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

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/assets/svg/chat-star.svg

 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_1164_5493)">
+    <g clip-path="url(#clip0_1190_5382)">
         <path
             d="M3.08282 12.894V10.0795M3.08282 4.45031V1.63574M1.67554 3.04303H4.49011M1.67554 11.4867H4.49011M7.86759 2.19866L6.8914 4.73676C6.73265 5.1495 6.65328 5.35588 6.52984 5.52947C6.42045 5.68332 6.28603 5.81774 6.13218 5.92713C5.95858 6.05057 5.75221 6.12994 5.33947 6.28869L2.80137 7.26488L5.33947 8.24107C5.75221 8.39982 5.95859 8.4792 6.13218 8.60263C6.28603 8.71203 6.42045 8.84645 6.52984 9.0003C6.65328 9.17389 6.73265 9.38026 6.8914 9.79301L7.86759 12.3311L8.84378 9.79301C9.00253 9.38026 9.08191 9.17389 9.20534 9.0003C9.31474 8.84645 9.44916 8.71203 9.60301 8.60263C9.7766 8.4792 9.98297 8.39982 10.3957 8.24107L12.9338 7.26488L10.3957 6.28869C9.98297 6.12994 9.7766 6.05057 9.60301 5.92713C9.44916 5.81774 9.31474 5.68332 9.20534 5.52947C9.08191 5.35588 9.00253 5.1495 8.84378 4.73676L7.86759 2.19866Z"
-            stroke="black" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
+            stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
     </g>
     <defs>
-        <clipPath id="clip0_1164_5493">
+        <clipPath id="clip0_1190_5382">
             <rect width="13.5099" height="13.5099" fill="white" transform="translate(0.549805 0.509888)" />
         </clipPath>
     </defs>

web/src/assets/svg/file-management.svg

+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1190_5387)">
+        <path
+            d="M7.90739 4.45039L7.27943 3.19448C7.09871 2.83302 7.00834 2.65229 6.87352 2.52025C6.7543 2.40348 6.61061 2.31468 6.45286 2.26026C6.27446 2.19873 6.0724 2.19873 5.66828 2.19873H3.51666C2.88613 2.19873 2.57087 2.19873 2.33004 2.32144C2.11821 2.42938 1.94598 2.60161 1.83804 2.81344C1.71533 3.05427 1.71533 3.36953 1.71533 4.00005V4.45039M1.71533 4.45039H10.2716C11.2174 4.45039 11.6903 4.45039 12.0515 4.63445C12.3693 4.79635 12.6276 5.0547 12.7895 5.37246C12.9736 5.7337 12.9736 6.20659 12.9736 7.15237V9.62919C12.9736 10.575 12.9736 11.0479 12.7895 11.4091C12.6276 11.7269 12.3693 11.9852 12.0515 12.1471C11.6903 12.3312 11.2174 12.3312 10.2716 12.3312H4.41732C3.47153 12.3312 2.99864 12.3312 2.6374 12.1471C2.31964 11.9852 2.0613 11.7269 1.89939 11.4091C1.71533 11.0479 1.71533 10.575 1.71533 9.62919V4.45039Z"
+            stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1190_5387">
+            <rect width="13.5099" height="13.5099" fill="white" transform="translate(0.589355 0.509888)" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file

web/src/assets/svg/knowledge-base.svg

+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1190_5377)">
+        <path
+            d="M12.3312 3.32448C12.3312 4.25715 10.063 5.01323 7.26496 5.01323C4.46696 5.01323 2.19873 4.25715 2.19873 3.32448M12.3312 3.32448C12.3312 2.39182 10.063 1.63574 7.26496 1.63574C4.46696 1.63574 2.19873 2.39182 2.19873 3.32448M12.3312 3.32448V11.2053C12.3312 12.1397 10.0795 12.894 7.26496 12.894C4.45039 12.894 2.19873 12.1397 2.19873 11.2053V3.32448M12.3312 7.26488C12.3312 8.19932 10.0795 8.95362 7.26496 8.95362C4.45039 8.95362 2.19873 8.19932 2.19873 7.26488"
+            stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1190_5377">
+            <rect width="13.5099" height="13.5099" fill="white" transform="translate(0.51001 0.509888)" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file

web/src/assets/svg/knowledge-configration.svg

+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.99805L7.5 1L14.5 3.99805L7.5 6.99609L0.5 3.99805Z"
+        fill="#D2D1D4" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.99805V4V12L7.5 15V6.99609" fill="#D2D1D4" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 3.99805V12L7.5 15" fill="#D2D1D4" />
+    <path
+        d="M0.5 3.99805L7.5 1L14.5 3.99805M0.5 3.99805L7.5 6.99609M0.5 3.99805V4M14.5 3.99805L7.5 6.99609M14.5 3.99805V12L7.5 15M14.5 3.99805L7.5 7V15M7.5 6.99609V15M7.5 6.99609L0.5 4M7.5 15L0.5 12V4"
+        stroke="#D2D1D4" stroke-linejoin="round" />
+</svg>
\ No newline at end of file

web/src/assets/svg/knowledge-dataset.svg

+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0 5V0.5H1V5C1 5.82843 1.67157 6.5 2.5 6.5C3.32843 6.5 4 5.82843 4 5V2C4 1.72386 3.77614 1.5 3.5 1.5C3.22386 1.5 3 1.72386 3 2V5.5H2V2C2 1.17157 2.67157 0.5 3.5 0.5C4.32843 0.5 5 1.17157 5 2V5C5 6.38071 3.88071 7.5 2.5 7.5C1.11929 7.5 0 6.38071 0 5Z"
+        fill="#3363FF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.5 0.5H6V5C6 6.933 4.433 8.5 2.5 8.5H1V14C1 14.8284 1.67157 15.5 2.5 15.5H12.5C13.3284 15.5 14 14.8284 14 14V2C14 1.17157 13.3284 0.5 12.5 0.5ZM11 4.5H7V5.5H11V4.5ZM11 7.5H7V8.5H11V7.5ZM4 10.5H11V11.5H4V10.5Z"
+        fill="#3363FF" />
+</svg>
\ No newline at end of file

web/src/assets/svg/knowledge-testing.svg

+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0.5 8C0.5 11.866 3.63401 15 7.5 15C11.366 15 14.5 11.866 14.5 8C14.5 4.13401 11.366 1 7.5 1C3.63401 1 0.5 4.13401 0.5 8Z"
+        fill="#E8E8EA" />
+    <path
+        d="M3.5 8C3.5 10.2091 5.29086 12 7.5 12C9.70914 12 11.5 10.2091 11.5 8C11.5 5.79086 9.70914 4 7.5 4C5.29086 4 3.5 5.79086 3.5 8Z"
+        fill="#E8E8EA" />
+    <path
+        d="M6.5 8C6.5 8.55228 6.94772 9 7.5 9C8.05228 9 8.5 8.55228 8.5 8C8.5 7.44772 8.05228 7 7.5 7C6.94772 7 6.5 7.44772 6.5 8Z"
+        fill="#E8E8EA" />
+    <path
+        d="M0.5 8C0.5 11.866 3.63401 15 7.5 15C11.366 15 14.5 11.866 14.5 8C14.5 4.13401 11.366 1 7.5 1C3.63401 1 0.5 4.13401 0.5 8Z"
+        stroke="#BBBABF" />
+    <path
+        d="M3.5 8C3.5 10.2091 5.29086 12 7.5 12C9.70914 12 11.5 10.2091 11.5 8C11.5 5.79086 9.70914 4 7.5 4C5.29086 4 3.5 5.79086 3.5 8Z"
+        stroke="#BBBABF" />
+    <path
+        d="M6.5 8C6.5 8.55228 6.94772 9 7.5 9C8.05228 9 8.5 8.55228 8.5 8C8.5 7.44772 8.05228 7 7.5 7C6.94772 7 6.5 7.44772 6.5 8Z"
+        stroke="#BBBABF" />
+</svg>
\ No newline at end of file

web/src/assets/svg/moon.svg

+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.2815 8.68261C12.3175 8.56966 12.2062 8.46792 12.0932 8.50385C11.5907 8.66372 11.0554 8.74999 10.4999 8.74999C7.60042 8.74999 5.24992 6.39948 5.24992 3.49999C5.24992 2.94453 5.33618 2.40922 5.49604 1.90672C5.53198 1.79376 5.43023 1.68247 5.31728 1.71842C3.07937 2.43077 1.45825 4.52608 1.45825 7.00002C1.45825 10.0606 3.93934 12.5417 6.99992 12.5417C9.47388 12.5417 11.5692 10.9205 12.2815 8.68261Z"
+        fill="#4E5969" />
+</svg>
\ No newline at end of file

web/src/assets/svg/translation.svg

+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M9.04159 2.62494L5.78647 2.62494L5.53026 1.34387L4.38625 1.57267L4.5967 2.62494L1.45825 2.62494V3.79161L2.76942 3.79161C2.84706 4.03671 2.96215 4.36714 3.11903 4.73626C3.38908 5.37167 3.79813 6.15836 4.37992 6.81783C3.85387 7.21613 3.26794 7.57787 2.75378 7.86768C2.3987 8.06782 2.0853 8.22953 1.86122 8.34094C1.74929 8.39658 1.65994 8.43953 1.59918 8.46829C1.56881 8.48267 1.54561 8.49349 1.53032 8.50057L1.51342 8.50836L1.50889 8.51043C1.50889 8.51043 1.50898 8.51039 1.74999 9.04161C1.99099 9.57283 1.9919 9.57241 1.9919 9.57241L1.99362 9.57163L1.99947 9.56896L2.02056 9.55924C2.0387 9.55084 2.06488 9.53862 2.09834 9.52278C2.16525 9.49111 2.26137 9.44489 2.38059 9.38562C2.61882 9.26718 2.95054 9.09601 3.32664 8.88401C3.90897 8.55578 4.61632 8.1194 5.24995 7.61982C5.88359 8.1194 6.59094 8.55578 7.17326 8.88401C7.54937 9.09601 7.88109 9.26718 8.11931 9.38562C8.14919 9.40047 8.17762 9.4145 8.20449 9.42769L7.97218 9.98334L7.04118 12.3263L8.12539 12.7571L8.67457 11.375H11.1585L11.7079 12.7572L12.792 12.3262L11.8647 9.99287L10.4915 6.70837H9.34144L8.6554 8.34923C8.64989 8.3465 8.64432 8.34373 8.63869 8.34094C8.41461 8.22953 8.10121 8.06782 7.74613 7.86768C7.23197 7.57787 6.64604 7.21613 6.11999 6.81783C6.70177 6.15836 7.11083 5.37167 7.38088 4.73626C7.53776 4.36714 7.65285 4.03671 7.73048 3.79161L9.04159 3.79161V2.62494ZM6.30717 4.27993C6.05882 4.86426 5.70861 5.51908 5.24995 6.04061C4.7913 5.51908 4.44109 4.86426 4.19274 4.27993C4.11858 4.10542 4.05485 3.94047 4.00109 3.79161L6.49881 3.79161C6.44505 3.94047 6.38133 4.10542 6.30717 4.27993ZM10.6902 10.2084H9.14272L9.91649 8.35755L10.6902 10.2084Z"
+        fill="#4E5969" />
+</svg>
\ No newline at end of file

web/src/constants/knowledge.ts

+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

 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

+.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

+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

 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

 @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

+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

+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

+.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

+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

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