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/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>
   );
 };