feat: modify the page switching button in the header

web/src/assets/svg/chat-star.svg

@@ -0,0 +1,12 @@
+<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)">
+        <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" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1164_5493">
+            <rect width="13.5099" height="13.5099" fill="white" transform="translate(0.549805 0.509888)" />
+        </clipPath>
+    </defs>
+</svg>

web/src/assets/svg/logo.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M18.1777 8C23.2737 8 23.2737 16 18.1777 16C13.0827 16 11.0447 8 5.43875 8C0.85375 8 0.85375 16 5.43875 16C11.0447 16 13.0828 8 18.1788 8H18.1777Z"
+        stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

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

@@ -11,3 +11,36 @@
   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

@@ -1,6 +1,6 @@
-import logo from '@/assets/logo.png';
-import { Layout, Space, theme } from 'antd';
-import classnames from 'classnames';
+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';
 
@@ -34,7 +34,7 @@ const RagHeader = () => {
   return (
     <Header
       style={{
-        padding: '0 8px',
+        padding: '0 16px',
         background: colorBgContainer,
         display: 'flex',
         justifyContent: 'space-between',
@@ -42,19 +42,29 @@ const RagHeader = () => {
         height: '72px',
       }}
     >
-      <img src={logo} alt="" style={{ height: 30, width: 30 }} />
+      <Space size={12}>
+        <Logo className={styles.appIcon}></Logo>
+        <label className={styles.appName}>Infinity flow</label>
+      </Space>
       <Space size={[0, 8]} wrap>
-        {tagsData.map((item) => (
-          <span
-            key={item.name}
-            className={classnames(styles.tag, {
-              [styles.checked]: currentPath === item.name,
-            })}
-            onClick={() => handleChange(item.path)}
-          >
-            {item.name}
-          </span>
-        ))}
+        <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>