feat: layout the knowledge list page and modify the page switching button in the header (#48)

* feat: remove unnecessary 'loading' fields from other files

* feat: layout the knowledge list page

* feat: modify the page switching button in the header

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

@@ -0,0 +1,46 @@
+.tag {
+  height: 40px;
+  padding: 0 30px;
+  margin: 0 5px;
+  border: 1px solid #000;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.checked {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.appIcon {
+  vertical-align: middle;
+}
+
+.appName {
+  vertical-align: middle;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.radioGroup {
+  background: rgba(249, 249, 249, 1) !important;
+  & > label {
+    border: 0 !important;
+    &::before {
+      display: none !important;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked) {
+    border-radius: 6px !important;
+  }
+}
+
+.ant-radio-button-wrapper-checked {
+  border-radius: 6px !important;
+}
+.radioButtonIcon {
+  vertical-align: middle;
+}

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

@@ -0,0 +1,74 @@
+import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
+import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
+import { Layout, Radio, Space, theme } from 'antd';
+
+import styles from './index.less';
+
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'umi';
+import User from '../user';
+
+const { Header } = Layout;
+
+const RagHeader = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const tagsData = [
+    { path: '/knowledge', name: 'knowledge' },
+    { path: '/chat', name: 'chat' },
+    { path: '/file', name: 'file' },
+  ];
+
+  const currentPath = useMemo(() => {
+    return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
+  }, [pathname]);
+
+  const handleChange = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <Header
+      style={{
+        padding: '0 16px',
+        background: colorBgContainer,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '72px',
+      }}
+    >
+      <Space size={12}>
+        <Logo className={styles.appIcon}></Logo>
+        <label className={styles.appName}>Infinity flow</label>
+      </Space>
+      <Space size={[0, 8]} wrap>
+        <Radio.Group
+          defaultValue="a"
+          buttonStyle="solid"
+          className={styles.radioGroup}
+          value={currentPath}
+        >
+          {tagsData.map((item) => (
+            <Radio.Button
+              value={item.name}
+              onClick={() => handleChange(item.path)}
+            >
+              <Space>
+                <StarIon className={styles.radioButtonIcon}></StarIon>
+                {item.name}
+              </Space>
+            </Radio.Button>
+          ))}
+        </Radio.Group>
+      </Space>
+      <User></User>
+    </Header>
+  );
+};
+
+export default RagHeader;

web/src/layouts/index.less

@@ -18,16 +18,6 @@ body {
   margin: 0;
 }
 
-.tag {
-  height: 40px;
-  padding: 0 30px;
-  margin: 0 5px;
-  border: 1px solid #000;
-  border-radius: 10px;
-  cursor: pointer;
+.divider {
+  margin: 0;
 }
-
-.checked {
-  color: #1677ff;
-  border-color: #1677ff;
-}

web/src/layouts/index.tsx

@@ -1,74 +1,26 @@
-import logo from '@/assets/logo.png';
-import { Layout, Space, theme } from 'antd';
-import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import { Divider, Layout, theme } from 'antd';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useNavigate } from 'umi';
+import { Outlet } from 'umi';
 import '../locales/config';
-import User from './components/user';
+import Header from './components/header';
 import styles from './index.less';
 
-const { Header, Content } = Layout;
+const { Content } = Layout;
 
-const App: React.FC = (props) => {
+const App: React.FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
-  const [current, setCurrent] = useState('knowledge');
-
-  const location = useLocation();
-  useEffect(() => {
-    if (location.pathname !== '/') {
-      const path = location.pathname.split('/');
-      // setCurrent(path[1]);
-    }
-    console.log(location.pathname.split('/'));
-  }, [location.pathname]);
-
-  const handleChange = (path: string) => {
-    // setCurrent(path)
-    navigate(path);
-  };
-  const tagsData = [
-    { path: '/knowledge', name: 'knowledge' },
-    { path: '/chat', name: 'chat' },
-    { path: '/file', name: 'file' },
-  ];
 
   return (
     <Layout className={styles.layout}>
       <Layout>
-        <Header
-          style={{
-            padding: '0 8px',
-            background: colorBgContainer,
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <img src={logo} alt="" style={{ height: 30, width: 30 }} />
-          <Space size={[0, 8]} wrap>
-            {tagsData.map((item) => (
-              <span
-                key={item.name}
-                className={classnames(styles['tag'], {
-                  [styles['checked']]: current === item.name,
-                })}
-                onClick={() => handleChange(item.path)}
-              >
-                {item.name}
-              </span>
-            ))}
-          </Space>
-          <User></User>
-        </Header>
+        <Header></Header>
+        <Divider orientationMargin={0} className={styles.divider} />
         <Content
           style={{
-            margin: '24px 16px',
-
             minHeight: 280,
             background: colorBgContainer,
             borderRadius: borderRadiusLG,