feat: add UserSetting and set height of MoreIcon to 24px and replace logo (#111)

* feat: replace logo

* feat: set height of MoreIcon to 24px

* feat: add UserSetting

web/src/pages/user-setting/constants.tsx

@@ -0,0 +1,16 @@
+import { UserSettingRouteKey } from '@/constants/setting';
+import {
+  ContainerOutlined,
+  DesktopOutlined,
+  PieChartOutlined,
+} from '@ant-design/icons';
+
+export const UserSettingIconMap = {
+  [UserSettingRouteKey.Profile]: <PieChartOutlined />,
+  [UserSettingRouteKey.Password]: <DesktopOutlined />,
+  [UserSettingRouteKey.Model]: <ContainerOutlined />,
+  [UserSettingRouteKey.Team]: <ContainerOutlined />,
+  [UserSettingRouteKey.Logout]: <ContainerOutlined />,
+};
+
+export * from '@/constants/setting';

web/src/pages/user-setting/index.tsx

@@ -0,0 +1,14 @@
+import { Flex } from 'antd';
+import { Outlet } from 'umi';
+import SideBar from './sidebar';
+
+const UserSetting = () => {
+  return (
+    <Flex>
+      <SideBar></SideBar>
+      <Outlet></Outlet>
+    </Flex>
+  );
+};
+
+export default UserSetting;

web/src/pages/user-setting/setting-model/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingModel = () => {
+  return <div>UserSettingModel</div>;
+};
+
+export default UserSettingModel;

web/src/pages/user-setting/setting-password/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingPassword = () => {
+  return <div>UserSettingPassword</div>;
+};
+
+export default UserSettingPassword;

web/src/pages/user-setting/setting-profile/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingProfile = () => {
+  return <div>UserSettingProfile</div>;
+};
+
+export default UserSettingProfile;

web/src/pages/user-setting/setting-team/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingTeam = () => {
+  return <div>UserSettingTeam</div>;
+};
+
+export default UserSettingTeam;

web/src/pages/user-setting/sidebar/index.tsx

@@ -0,0 +1,57 @@
+import { useSecondPathName } from '@/hooks/routeHook';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import React, { useMemo } from 'react';
+import { useNavigate } from 'umi';
+import {
+  UserSettingBaseKey,
+  UserSettingIconMap,
+  UserSettingRouteKey,
+  UserSettingRouteMap,
+} from '../constants';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) =>
+  getItem(UserSettingRouteMap[value], value, UserSettingIconMap[value]),
+);
+
+const SideBar = () => {
+  const navigate = useNavigate();
+  const pathName = useSecondPathName();
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    navigate(`/${UserSettingBaseKey}/${key}`);
+  };
+
+  const selectedKeys = useMemo(() => {
+    return [pathName];
+  }, [pathName]);
+
+  return (
+    <Menu
+      selectedKeys={selectedKeys}
+      mode="inline"
+      items={items}
+      onClick={handleMenuClick}
+    />
+  );
+};
+
+export default SideBar;