feat: initial commit - kratos admin service

web/src/components/Footer/index.tsx

@@ -0,0 +1,36 @@
+import { GithubOutlined } from '@ant-design/icons';
+import { DefaultFooter } from '@ant-design/pro-components';
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <DefaultFooter
+      style={{
+        background: 'none',
+      }}
+      copyright="Powered by Ant Desgin"
+      links={[
+        {
+          key: 'Ant Design Pro',
+          title: 'Ant Design Pro',
+          href: 'https://pro.ant.design',
+          blankTarget: true,
+        },
+        {
+          key: 'github',
+          title: <GithubOutlined />,
+          href: 'https://github.com/ant-design/ant-design-pro',
+          blankTarget: true,
+        },
+        {
+          key: 'Ant Design',
+          title: 'Ant Design',
+          href: 'https://ant.design',
+          blankTarget: true,
+        },
+      ]}
+    />
+  );
+};
+
+export default Footer;

web/src/components/HeaderDropdown/index.tsx

@@ -0,0 +1,41 @@
+import { Dropdown } from 'antd';
+import type { DropDownProps } from 'antd/es/dropdown';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    dropdown: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        width: '100%',
+      },
+    },
+  };
+});
+
+export type HeaderDropdownProps = {
+  overlayClassName?: string;
+  placement?:
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'topLeft'
+    | 'topCenter'
+    | 'topRight'
+    | 'bottomCenter';
+} & Omit<DropDownProps, 'overlay'>;
+
+const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
+  overlayClassName: cls,
+  ...restProps
+}) => {
+  const { styles } = useStyles();
+  return (
+    <Dropdown
+      overlayClassName={classNames(styles.dropdown, cls)}
+      {...restProps}
+    />
+  );
+};
+
+export default HeaderDropdown;

web/src/components/RightContent/AvatarDropdown.tsx

@@ -0,0 +1,142 @@
+import { services } from "@/services";
+import {
+  LogoutOutlined,
+  SettingOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { history, useModel } from "@umijs/max";
+import type { MenuProps } from "antd";
+import { Spin } from "antd";
+import { createStyles } from "antd-style";
+import React from "react";
+import { flushSync } from "react-dom";
+import HeaderDropdown from "../HeaderDropdown";
+
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+  children?: React.ReactNode;
+};
+
+export const AvatarName = () => {
+  const { initialState } = useModel("@@initialState");
+  const { currentUser } = initialState || {};
+  return <span className="anticon">{currentUser?.name}</span>;
+};
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    action: {
+      display: "flex",
+      height: "48px",
+      marginLeft: "auto",
+      overflow: "hidden",
+      alignItems: "center",
+      padding: "0 8px",
+      cursor: "pointer",
+      borderRadius: token.borderRadius,
+      "&:hover": {
+        backgroundColor: token.colorBgTextHover,
+      },
+    },
+  };
+});
+
+export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({
+  menu,
+  children,
+}) => {
+  /**
+   * 退出登录，并且将当前的 url 保存
+   */
+  const loginOut = async () => {
+    await services.admin.Logout({});
+    const { search, pathname } = window.location;
+    const urlParams = new URL(window.location.href).searchParams;
+    const searchParams = new URLSearchParams({
+      redirect: pathname + search,
+    });
+    /** 此方法会跳转到 redirect 参数所在的位置 */
+    const redirect = urlParams.get("redirect");
+    // Note: There may be security issues, please note
+    if (window.location.pathname !== "/user/login" && !redirect) {
+      history.replace({
+        pathname: "/user/login",
+        search: searchParams.toString(),
+      });
+    }
+  };
+  const { styles } = useStyles();
+
+  const { initialState, setInitialState } = useModel("@@initialState");
+
+  const onMenuClick: MenuProps["onClick"] = (event) => {
+    const { key } = event;
+    if (key === "logout") {
+      flushSync(() => {
+        setInitialState((s) => ({ ...s, currentUser: undefined }));
+      });
+      loginOut();
+      return;
+    }
+    history.push(`/account/${key}`);
+  };
+
+  const loading = (
+    <span className={styles.action}>
+      <Spin
+        size="small"
+        style={{
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      />
+    </span>
+  );
+
+  if (!initialState) {
+    return loading;
+  }
+
+  const { currentUser } = initialState;
+
+  if (!currentUser || !currentUser.name) {
+    return loading;
+  }
+
+  const menuItems = [
+    ...(menu
+      ? [
+          {
+            key: "center",
+            icon: <UserOutlined />,
+            label: "个人中心",
+          },
+          {
+            key: "settings",
+            icon: <SettingOutlined />,
+            label: "个人设置",
+          },
+          {
+            type: "divider" as const,
+          },
+        ]
+      : []),
+    {
+      key: "logout",
+      icon: <LogoutOutlined />,
+      label: "退出登录",
+    },
+  ];
+
+  return (
+    <HeaderDropdown
+      menu={{
+        selectedKeys: [],
+        onClick: onMenuClick,
+        items: menuItems,
+      }}
+    >
+      {children}
+    </HeaderDropdown>
+  );
+};

web/src/components/RightContent/index.tsx

@@ -0,0 +1,32 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { SelectLang as UmiSelectLang } from '@umijs/max';
+
+export type SiderTheme = 'light' | 'dark';
+
+export const SelectLang: React.FC = () => {
+  return (
+    <UmiSelectLang
+      style={{
+        padding: 4,
+      }}
+    />
+  );
+};
+
+export const Question: React.FC = () => {
+  return (
+    <a
+      href="https://pro.ant.design/docs/getting-started"
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        display: 'inline-flex',
+        padding: '4px',
+        fontSize: '18px',
+        color: 'inherit',
+      }}
+    >
+      <QuestionCircleOutlined />
+    </a>
+  );
+};

web/src/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 这个文件作为组件的目录
+ * 目的是统一管理对外输出的组件，方便分类
+ */
+/**
+ * 布局组件
+ */
+import Footer from './Footer';
+import { Question, SelectLang } from './RightContent';
+import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown';
+
+export { AvatarDropdown, AvatarName, Footer, Question, SelectLang };