feat: Modify the color of the svg icon in the header according to the selected state and feat: extract routing information from the knowledge base into constants (#51)

* feat: Modify the color of the svg icon in the header according to the selected state

* feat: add translation icon to header

* feat: shorten the route length of the knowledge base

* feat: extract routing information from the knowledge base into constants

web/src/constants/knowledge.ts

@@ -0,0 +1,5 @@
+export enum KnowledgeRouteKey {
+  Dataset = 'dataset',
+  Testing = 'testing',
+  Configration = 'configration',
+}

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

@@ -26,9 +26,14 @@
 }
 
 .radioGroup {
-  background: rgba(249, 249, 249, 1) !important;
   & > label {
+    height: 40px;
+    line-height: 40px;
     border: 0 !important;
+    background-color: rgba(249, 249, 249, 1);
+    font-weight: @fontWeight700;
+    font-family: 'Nunito Sans';
+    color: rgba(29, 25, 41, 1);
     &::before {
       display: none !important;
     }

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

@@ -1,12 +1,14 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
+import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
+import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
 import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
 import { Layout, Radio, Space, theme } from 'antd';
+import Toolbar from '../right-toolbar';
 
 import styles from './index.less';
 
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from 'umi';
-import User from '../user';
 
 const { Header } = Layout;
 
@@ -18,13 +20,15 @@ const RagHeader = () => {
   const { pathname } = useLocation();
 
   const tagsData = [
-    { path: '/knowledge', name: 'knowledge' },
-    { path: '/chat', name: 'chat' },
-    { path: '/file', name: 'file' },
+    { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
+    { path: '/chat', name: 'Chat', icon: StarIon },
+    { path: '/file', name: 'File Management', icon: FileIcon },
   ];
 
   const currentPath = useMemo(() => {
-    return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
+    return (
+      tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
+    );
   }, [pathname]);
 
   const handleChange = (path: string) => {
@@ -57,16 +61,20 @@ const RagHeader = () => {
             <Radio.Button
               value={item.name}
               onClick={() => handleChange(item.path)}
+              key={item.name}
             >
               <Space>
-                <StarIon className={styles.radioButtonIcon}></StarIon>
+                <item.icon
+                  className={styles.radioButtonIcon}
+                  stroke={item.name === currentPath ? 'black' : 'white'}
+                ></item.icon>
                 {item.name}
               </Space>
             </Radio.Button>
           ))}
         </Radio.Group>
       </Space>
-      <User></User>
+      <Toolbar></Toolbar>
     </Header>
   );
 };

web/src/layouts/components/right-toolbar/index.less

@@ -0,0 +1,17 @@
+.toolbarWrapper {
+  :global(.ant-avatar) {
+    background-color: rgba(242, 243, 245, 1);
+  }
+}
+
+.circle {
+  display: inline-block;
+  line-height: 32px;
+  width: 32px;
+  text-align: center;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(242, 243, 245, 1);
+  vertical-align: middle;
+  cursor: pointer;
+}

web/src/layouts/components/right-toolbar/index.tsx

@@ -0,0 +1,39 @@
+import { ReactComponent as MoonIcon } from '@/assets/svg/moon.svg';
+import { ReactComponent as TranslationIcon } from '@/assets/svg/translation.svg';
+import { BellOutlined, GithubOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+import React from 'react';
+import User from '../user';
+import styled from './index.less';
+
+const Circle = ({ children }: React.PropsWithChildren) => {
+  return <div className={styled.circle}>{children}</div>;
+};
+
+const handleGithubCLick = () => {
+  window.open('https://github.com/infiniflow/infinity', 'target');
+};
+
+const RightToolBar = () => {
+  return (
+    <div className={styled.toolbarWrapper}>
+      <Space wrap size={16}>
+        <Circle>
+          <GithubOutlined onClick={handleGithubCLick} />
+        </Circle>
+        <Circle>
+          <TranslationIcon />
+        </Circle>
+        <Circle>
+          <BellOutlined />
+        </Circle>
+        <Circle>
+          <MoonIcon />
+        </Circle>
+        <User></User>
+      </Space>
+    </div>
+  );
+};
+
+export default RightToolBar;

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

@@ -1,6 +1,6 @@
 import authorizationUtil from '@/utils/authorizationUtil';
 import type { MenuProps } from 'antd';
-import { Button, Dropdown } from 'antd';
+import { Avatar, Button, Dropdown } from 'antd';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { history } from 'umi';
@@ -39,14 +39,12 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <Dropdown menu={{ items }} placement="bottomLeft" arrow>
-        <img
-          style={{ width: '50px', height: '50px', borderRadius: '25px' }}
-          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-        />
-      </Dropdown>
-    </>
+    <Dropdown menu={{ items }} placement="bottomLeft" arrow>
+      <Avatar
+        size={32}
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      />
+    </Dropdown>
   );
 };
 

web/src/less/variable.less

@@ -1 +1,14 @@
 @fontWeight600: 600;
+@fontWeight700: 700;
+
+@gray2: rgba(29, 25, 41, 1);
+@gray3: rgba(52, 48, 62, 1);
+@gray8: rgba(165, 163, 169, 1);
+@gray11: rgba(232, 232, 234, 1);
+
+@fontSize12: 12px;
+@fontSize14: 14px;
+@fontSize16: 16px;
+@fontSize18: 18px;
+
+@fontFamilyNunitoSans: 'Nunito Sans';

web/src/pages/add-knowledge/components/knowledge-file/index.tsx

@@ -1,3 +1,4 @@
+import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
 import { DownOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
@@ -158,8 +159,9 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
     },
   ];
   const toChunk = (id: string) => {
-    console.log(id);
-    navigate(`/knowledge/add/setting?activeKey=file&id=${kb_id}&doc_id=${id}`);
+    navigate(
+      `/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}&doc_id=${id}`,
+    );
   };
   const columns: ColumnsType<DataType> = [
     {

web/src/pages/add-knowledge/components/knowledge-setting/index.tsx

@@ -1,7 +1,9 @@
+import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { Button, Form, Input, Radio, Select, Space, Tag } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import styles from './index.less';
+
 const { CheckableTag } = Tag;
 const layout = {
   labelCol: { span: 8 },
@@ -67,7 +69,7 @@ const KnowledgeSetting: React.FC<kSProps> = ({ kb_id }) => {
           },
         });
         retcode === 0 &&
-          navigate(`/knowledge/add/setting?activeKey=file&id=${kb_id}`);
+          navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}`);
       }
     } catch (error) {
       console.warn(error);

web/src/pages/add-knowledge/components/knowledge-sidebar/index.less

@@ -0,0 +1,63 @@
+.sidebarWrapper {
+  max-width: 288px;
+  padding: 32px 24px 24px 24px;
+  flex-direction: column;
+
+  .sidebarTop {
+    text-align: center;
+    .knowledgeLogo {
+    }
+    .knowledgeTitle {
+      font-family: 'Nunito Sans';
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: @fontWeight700;
+      color: @gray2;
+      margin-bottom: 6px;
+    }
+    .knowledgeDescription {
+      font-family: 'Nunito Sans';
+      font-size: 12px;
+      font-weight: @fontWeight600;
+      color: @gray8;
+      margin: 0;
+    }
+    padding-bottom: 20px;
+  }
+  .divider {
+    height: 2px;
+    background-image: linear-gradient(
+      to right,
+      @gray11 0%,
+      @gray11 50%,
+      transparent 50%
+    );
+    background-size: 10px 2px;
+    background-repeat: repeat-x;
+  }
+
+  .menuWrapper {
+    padding-top: 10px;
+
+    .menu {
+      border: none;
+      font-size: @fontSize14;
+      font-weight: @fontWeight600;
+    }
+
+    .defaultWidth {
+      width: 240px;
+    }
+
+    .minWidth {
+      width: 50px;
+    }
+
+    .menuText {
+      color: @gray3;
+      font-family: @fontFamilyNunitoSans;
+      font-size: @fontSize14;
+      font-weight: @fontWeight700;
+    }
+  }
+}

web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx

@@ -0,0 +1,118 @@
+import { ReactComponent as ConfigrationIcon } from '@/assets/svg/knowledge-configration.svg';
+import { ReactComponent as DatasetIcon } from '@/assets/svg/knowledge-dataset.svg';
+import { ReactComponent as TestingIcon } from '@/assets/svg/knowledge-testing.svg';
+import { getWidth } from '@/utils';
+import { AntDesignOutlined } from '@ant-design/icons';
+import { Avatar, Menu, MenuProps, Space } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams, useSelector } from 'umi';
+import { KnowledgeRouteKey, routeMap } from '../../constant';
+import styles from './index.less';
+
+const KnowledgeSidebar = () => {
+  const kAModel = useSelector((state: any) => state.kAModel);
+  const { id } = kAModel;
+  let navigate = useNavigate();
+  const params = useParams();
+  const activeKey = params.module || KnowledgeRouteKey.Dataset;
+
+  const [windowWidth, setWindowWidth] = useState(getWidth());
+  const [collapsed, setCollapsed] = useState(false);
+
+  const handleSelect: MenuProps['onSelect'] = (e) => {
+    navigate(`/knowledge/${e.key}?id=${id}`);
+  };
+
+  type MenuItem = Required<MenuProps>['items'][number];
+
+  function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    disabled?: boolean,
+    children?: MenuItem[],
+    type?: 'group',
+  ): MenuItem {
+    return {
+      key,
+      icon,
+      children,
+      label,
+      type,
+      disabled,
+    } as MenuItem;
+  }
+  const items: MenuItem[] = useMemo(() => {
+    return [
+      getItem(
+        routeMap[KnowledgeRouteKey.Dataset], // TODO: Change icon color when selected
+        KnowledgeRouteKey.Dataset,
+        <DatasetIcon />,
+      ),
+      getItem(
+        routeMap[KnowledgeRouteKey.Testing],
+        KnowledgeRouteKey.Testing,
+        <TestingIcon />,
+      ),
+      getItem(
+        routeMap[KnowledgeRouteKey.Configration],
+        KnowledgeRouteKey.Configration,
+        <ConfigrationIcon />,
+      ),
+    ];
+  }, [id]);
+
+  useEffect(() => {
+    if (windowWidth.width > 957) {
+      setCollapsed(false);
+    } else {
+      setCollapsed(true);
+    }
+  }, [windowWidth.width]);
+
+  // 标记一下
+  useEffect(() => {
+    const widthSize = () => {
+      const width = getWidth();
+      console.log(width);
+
+      setWindowWidth(width);
+    };
+    window.addEventListener('resize', widthSize);
+    return () => {
+      window.removeEventListener('resize', widthSize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.sidebarWrapper}>
+      <div className={styles.sidebarTop}>
+        <Space size={8} direction="vertical">
+          <Avatar size={64} icon={<AntDesignOutlined />} />
+          <div className={styles.knowledgeTitle}>Cloud Computing</div>
+        </Space>
+        <p className={styles.knowledgeDescription}>
+          A scalable, secure cloud-based database optimized for high-performance
+          computing and data storage.
+        </p>
+      </div>
+      <div className={styles.divider}></div>
+      <div className={styles.menuWrapper}>
+        <Menu
+          selectedKeys={[activeKey]}
+          // mode="inline"
+          className={classNames(styles.menu, {
+            [styles.defaultWidth]: windowWidth.width > 957,
+            [styles.minWidth]: windowWidth.width <= 957,
+          })}
+          inlineCollapsed={collapsed}
+          items={items}
+          onSelect={handleSelect}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default KnowledgeSidebar;

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

@@ -0,0 +1,9 @@
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+
+export const routeMap = {
+  [KnowledgeRouteKey.Dataset]: 'Dataset',
+  [KnowledgeRouteKey.Testing]: 'Retrieval testing',
+  [KnowledgeRouteKey.Configration]: 'Configuration',
+};
+
+export * from '@/constants/knowledge';

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

@@ -1,19 +1,15 @@
 .container {
-    display: flex;
-
-    .menu {
-        .defaultWidth {
-            width: 256px;
-        }
-
-        .minWidth {
-            width: 50px
-        }
-    }
-
-    .content {
-        flex: 1;
-        overflow-x: auto;
-        height: 100%;
-    }
-}
+  display: flex;
+  height: 100%;
+  .contentWrapper {
+    flex: 1;
+    overflow-x: auto;
+    height: 100%;
+    background-color: rgba(247, 248, 250, 1);
+    padding: 16px 20px 28px 40px;
+  }
+  .content {
+    background-color: white;
+    margin-top: 16px;
+  }
+}

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

@@ -1,39 +1,46 @@
-import { getWidth } from '@/utils';
-import { BarsOutlined, SearchOutlined, ToolOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Menu } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useLocation, useNavigate, useSelector } from 'umi';
+import { Breadcrumb } from 'antd';
+import { useEffect, useMemo } from 'react';
+import {
+  useDispatch,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSelector,
+} from 'umi';
 import Chunk from './components/knowledge-chunk';
 import File from './components/knowledge-file';
 import Search from './components/knowledge-search';
 import Setting from './components/knowledge-setting';
+import Siderbar from './components/knowledge-sidebar';
+import { KnowledgeRouteKey, routeMap } from './constant';
 import styles from './index.less';
 
 const KnowledgeAdding = () => {
   const dispatch = useDispatch();
   const kAModel = useSelector((state: any) => state.kAModel);
-  const { id, activeKey, doc_id } = kAModel;
+  const navigate = useNavigate();
+  const { id, doc_id } = kAModel;
 
-  const [collapsed, setCollapsed] = useState(false);
-  const [windowWidth, setWindowWidth] = useState(getWidth());
-  let navigate = useNavigate();
   const location = useLocation();
+  const params = useParams();
+  const activeKey: KnowledgeRouteKey =
+    (params.module as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
 
-  // 标记一下
-  console.log(doc_id, '>>>>>>>>>>>>>doc_id');
-  useEffect(() => {
-    const widthSize = () => {
-      const width = getWidth();
-      console.log(width);
+  const gotoList = () => {
+    navigate('/knowledge');
+  };
+
+  const breadcrumbItems = useMemo(() => {
+    return [
+      {
+        title: <a onClick={gotoList}>Knowledge Base</a>,
+      },
+      {
+        title: routeMap[activeKey],
+      },
+    ];
+  }, [activeKey]);
 
-      setWindowWidth(width);
-    };
-    window.addEventListener('resize', widthSize);
-    return () => {
-      window.removeEventListener('resize', widthSize);
-    };
-  }, []);
   useEffect(() => {
     const search: string = location.search.slice(1);
     const map = search.split('&').reduce<Record<string, string>>((obj, cur) => {
@@ -51,66 +58,24 @@ const KnowledgeAdding = () => {
     });
   }, [location]);
 
-  useEffect(() => {
-    if (windowWidth.width > 957) {
-      setCollapsed(false);
-    } else {
-      setCollapsed(true);
-    }
-  }, [windowWidth.width]);
-
-  type MenuItem = Required<MenuProps>['items'][number];
-
-  function getItem(
-    label: React.ReactNode,
-    key: React.Key,
-    icon?: React.ReactNode,
-    disabled?: boolean,
-    children?: MenuItem[],
-    type?: 'group',
-  ): MenuItem {
-    return {
-      key,
-      icon,
-      children,
-      label,
-      type,
-      disabled,
-    } as MenuItem;
-  }
-  const items: MenuItem[] = useMemo(() => {
-    const disabled = !id;
-    return [
-      getItem('配置', 'setting', <ToolOutlined />),
-      getItem('知识库', 'file', <BarsOutlined />, disabled),
-      getItem('搜索测试', 'search', <SearchOutlined />, disabled),
-    ];
-  }, [id]);
-
-  const handleSelect: MenuProps['onSelect'] = (e) => {
-    navigate(`/knowledge/add/setting?activeKey=${e.key}&id=${id}`);
-  };
-
   return (
     <>
       <div className={styles.container}>
-        <div className={styles.menu}>
-          <Menu
-            selectedKeys={[activeKey]}
-            mode="inline"
-            className={
-              windowWidth.width > 957 ? styles.defaultWidth : styles.minWidth
-            }
-            inlineCollapsed={collapsed}
-            items={items}
-            onSelect={handleSelect}
-          />
-        </div>
-        <div className={styles.content}>
-          {activeKey === 'file' && !doc_id && <File kb_id={id} />}
-          {activeKey === 'setting' && <Setting kb_id={id} />}
-          {activeKey === 'search' && <Search kb_id={id} />}
-          {activeKey === 'file' && !!doc_id && <Chunk doc_id={doc_id} />}
+        <Siderbar></Siderbar>
+        <div className={styles.contentWrapper}>
+          <Breadcrumb items={breadcrumbItems} />
+          <div className={styles.content}>
+            {activeKey === KnowledgeRouteKey.Dataset && !doc_id && (
+              <File kb_id={id} />
+            )}
+            {activeKey === KnowledgeRouteKey.Configration && (
+              <Setting kb_id={id} />
+            )}
+            {activeKey === KnowledgeRouteKey.Testing && <Search kb_id={id} />}
+            {activeKey === KnowledgeRouteKey.Dataset && !!doc_id && (
+              <Chunk doc_id={doc_id} />
+            )}
+          </div>
         </div>
       </div>
     </>

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

@@ -3,7 +3,6 @@ export interface kAModelState {
   isShowPSwModal: boolean;
   isShowTntModal: boolean;
   tenantIfo: any;
-  activeKey: string;
   id: string;
   doc_id: string;
 }
@@ -14,7 +13,6 @@ const model: DvaModel<kAModelState> = {
     isShowPSwModal: false,
     isShowTntModal: false,
     tenantIfo: {},
-    activeKey: 'setting',
     id: '',
     doc_id: '',
   },

web/src/pages/knowledge/index.tsx

@@ -20,7 +20,7 @@ const Knowledge = () => {
   }, []);
 
   const handleAddKnowledge = () => {
-    navigate(`add/setting?activeKey=setting`);
+    navigate(`add/setting`);
   };
 
   useEffect(() => {

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

@@ -1,13 +1,13 @@
 import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { formatDate } from '@/utils/date';
 import {
-  AntDesignOutlined,
   CalendarOutlined,
   DeleteOutlined,
   FileTextOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { Avatar, Card, Dropdown, MenuProps, Space, Tooltip } from 'antd';
+import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
 import { MouseEvent } from 'react';
 import { useDispatch, useNavigate } from 'umi';
 
@@ -47,7 +47,7 @@ const KnowledgeCard = ({ item }: IProps) => {
   };
 
   const handleCardClick = () => {
-    navigate(`add/setting?activeKey=file&id=${item.id}`);
+    navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${item.id}`);
   };
 
   const onConfirmDelete = (e?: MouseEvent<HTMLElement>) => {
@@ -97,7 +97,7 @@ const KnowledgeCard = ({ item }: IProps) => {
                 {formatDate(item.update_date)}
               </span>
             </div>
-            <Avatar.Group size={25}>
+            {/* <Avatar.Group size={25}>
               <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
               <a href="https://ant.design">
                 <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
@@ -112,7 +112,7 @@ const KnowledgeCard = ({ item }: IProps) => {
                 style={{ backgroundColor: '#1677ff' }}
                 icon={<AntDesignOutlined />}
               />
-            </Avatar.Group>
+            </Avatar.Group> */}
           </div>
         </div>
       </div>

web/src/routes.ts

@@ -16,7 +16,7 @@ const routes = [
         component: '@/pages/knowledge',
       },
       {
-        path: '/knowledge/add/*',
+        path: '/knowledge/:module',
         component: '@/pages/add-knowledge',
       },
       {