From 585ac3ba34a34e6e507417a3f5e8ce496c428e34 Mon Sep 17 00:00:00 2001
From: billchen <yibie_jingnian@163.com>
Date: Wed, 31 Jan 2024 19:26:22 +0800
Subject: [PATCH] feat: modify the page switching button in the header

---
 web/src/assets/svg/chat-star.svg             | 12 ++++++
 web/src/assets/svg/logo.svg                  |  5 +++
 web/src/layouts/components/header/index.less | 33 +++++++++++++++
 web/src/layouts/components/header/index.tsx  | 42 ++++++++++++--------
 4 files changed, 76 insertions(+), 16 deletions(-)
 create mode 100644 web/src/assets/svg/chat-star.svg
 create mode 100644 web/src/assets/svg/logo.svg

diff --git a/web/src/assets/svg/chat-star.svg b/web/src/assets/svg/chat-star.svg
new file mode 100644
index 000000000..eb34c34b3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/assets/svg/logo.svg b/web/src/assets/svg/logo.svg
new file mode 100644
index 000000000..8e7968d21
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
index 898fc95a0..b396f0739 100644
--- a/web/src/layouts/components/header/index.less
+++ b/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;
+}
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
index 8307ae013..fab3ee416 100644
--- a/web/src/layouts/components/header/index.tsx
+++ b/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>