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/constants/setting.ts

@@ -0,0 +1,17 @@
+export const UserSettingBaseKey = 'user-setting';
+
+export enum UserSettingRouteKey {
+  Profile = 'profile',
+  Password = 'password',
+  Model = 'model',
+  Team = 'team',
+  Logout = 'logout',
+}
+
+export const UserSettingRouteMap = {
+  [UserSettingRouteKey.Profile]: 'Profile',
+  [UserSettingRouteKey.Password]: 'Password',
+  [UserSettingRouteKey.Model]: 'Model Providers',
+  [UserSettingRouteKey.Team]: 'Team',
+  [UserSettingRouteKey.Logout]: 'Log out',
+};

web/src/layouts/components/header/index.less

@@ -12,6 +12,10 @@
   border-color: #1677ff;
 }
 
+.logoWrapper {
+  .pointerCursor;
+}
+
 .appIcon {
   vertical-align: middle;
 }

web/src/layouts/components/header/index.tsx

@@ -6,7 +6,7 @@ import Toolbar from '../right-toolbar';
 
 import styles from './index.less';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'umi';
 
 const { Header } = Layout;
@@ -37,6 +37,10 @@ const RagHeader = () => {
     navigate(path);
   };
 
+  const handleLogoClick = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
   return (
     <Header
       style={{
@@ -48,9 +52,9 @@ const RagHeader = () => {
         height: '72px',
       }}
     >
-      <Space size={12}>
+      <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
         <Logo className={styles.appIcon}></Logo>
-        <label className={styles.appName}>RagFlow</label>
+        <span className={styles.appName}>RagFlow</span>
       </Space>
       <Space size={[0, 8]} wrap>
         <Radio.Group

web/src/layouts/components/user/index.tsx

@@ -24,7 +24,7 @@ const App: React.FC = () => {
   }, [logout]);
 
   const toSetting = () => {
-    history.push('/setting');
+    history.push('/user-setting');
   };
 
   const items: MenuProps['items'] = useMemo(() => {

web/src/less/mixins.less

@@ -29,3 +29,7 @@
     background-color: #f2f2f2;
   }
 }
+
+.pointerCursor() {
+  cursor: pointer;
+}

web/src/pages/add-knowledge/constant.ts

@@ -4,7 +4,6 @@ export const routeMap = {
   [KnowledgeRouteKey.Dataset]: 'Dataset',
   [KnowledgeRouteKey.Testing]: 'Retrieval testing',
   [KnowledgeRouteKey.Configuration]: 'Configuration',
-  [KnowledgeRouteKey.TempTesting]: 'Testing',
 };
 
 export enum KnowledgeDatasetRouteKey {

web/src/pages/chat/chat-container/index.tsx

@@ -36,7 +36,7 @@ import styles from './index.less';
 
 const reg = /(#{2}\d+\${2})/g;
 
-const getChunkIndex = (match: string) => Number(match.slice(2, 3));
+const getChunkIndex = (match: string) => Number(match.slice(2, -2));
 
 const rehypeWrapReference = () => {
   return function wrapTextTransform(tree: any) {

web/src/pages/knowledge/knowledge-card/index.less

@@ -4,6 +4,10 @@
   flex-direction: column;
   justify-content: space-between;
 
+  .delete {
+    height: 24px;
+  }
+
   .content {
     display: flex;
     justify-content: space-between;

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -64,17 +64,16 @@ const KnowledgeCard = ({ item }: IProps) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
-
-          <span className={styles.delete}>
-            <Dropdown
-              menu={{
-                items,
-                onClick: handleDropdownMenuClick,
-              }}
-            >
+          <Dropdown
+            menu={{
+              items,
+              onClick: handleDropdownMenuClick,
+            }}
+          >
+            <span className={styles.delete}>
               <MoreIcon />
-            </Dropdown>
-          </span>
+            </span>
+          </Dropdown>
         </div>
         <div className={styles.titleWrapper}>
           <span className={styles.title}>{item.name}</span>

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;

web/src/routes.ts

@@ -56,6 +56,29 @@ const routes = [
         path: '/setting',
         component: '@/pages/setting',
       },
+      {
+        path: '/user-setting',
+        component: '@/pages/user-setting',
+        routes: [
+          { path: '/user-setting', redirect: '/user-setting/profile' },
+          {
+            path: '/user-setting/profile',
+            component: '@/pages/user-setting/setting-profile',
+          },
+          {
+            path: '/user-setting/password',
+            component: '@/pages/user-setting/setting-password',
+          },
+          {
+            path: '/user-setting/model',
+            component: '@/pages/user-setting/setting-model',
+          },
+          {
+            path: '/user-setting/team',
+            component: '@/pages/user-setting/setting-team',
+          },
+        ],
+      },
       {
         path: '/file',
         component: '@/pages/file',