From 31decadd8e5b986c701bd3dd58b437c7fe412d35 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:20:00 +0800
Subject: [PATCH] feat: Let the top navigation bar open in a tab when you right
 click on it #3018 (#3486)

### What problem does this PR solve?

feat: Let the top navigation bar open in a tab when you right click on
it #3018

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/layouts/components/header/index.less |  5 ++-
 web/src/layouts/components/header/index.tsx  | 40 ++++++++++++--------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
index bb3edc39c..fc72c7d36 100644
--- a/web/src/layouts/components/header/index.less
+++ b/web/src/layouts/components/header/index.less
@@ -31,7 +31,7 @@
 }
 
 .radioGroup {
-  & > label {
+  & label {
     height: 40px;
     line-height: 40px;
     border: 0 !important;
@@ -44,6 +44,9 @@
   }
   :global(.ant-radio-button-wrapper-checked) {
     border-radius: 6px !important;
+    & a {
+      color: white;
+    }
   }
 }
 
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
index b6420b917..e5a4954ca 100644
--- a/web/src/layouts/components/header/index.tsx
+++ b/web/src/layouts/components/header/index.tsx
@@ -6,7 +6,7 @@ import { useFetchAppConf } from '@/hooks/logic-hooks';
 import { useNavigateWithFromState } from '@/hooks/route-hook';
 import { MessageOutlined, SearchOutlined } from '@ant-design/icons';
 import { Flex, Layout, Radio, Space, theme } from 'antd';
-import { useCallback, useMemo } from 'react';
+import { MouseEventHandler, useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
@@ -40,9 +40,14 @@ const RagHeader = () => {
     );
   }, [pathname, tagsData]);
 
-  const handleChange = (path: string) => {
-    navigate(path);
-  };
+  const handleChange = useCallback(
+    (path: string): MouseEventHandler =>
+      (e) => {
+        e.preventDefault();
+        navigate(path);
+      },
+    [navigate],
+  );
 
   const handleLogoClick = useCallback(() => {
     navigate('/');
@@ -77,18 +82,21 @@ const RagHeader = () => {
           value={currentPath}
         >
           {tagsData.map((item) => (
-            <Radio.Button
-              value={item.name}
-              onClick={() => handleChange(item.path)}
-              key={item.name}
-            >
-              <Flex align="center" gap={8}>
-                <item.icon
-                  className={styles.radioButtonIcon}
-                  stroke={item.name === currentPath ? 'black' : 'white'}
-                ></item.icon>
-                {item.name}
-              </Flex>
+            <Radio.Button value={item.name} key={item.name}>
+              <a href={item.path}>
+                <Flex
+                  align="center"
+                  gap={8}
+                  onClick={handleChange(item.path)}
+                  className="cursor-pointer"
+                >
+                  <item.icon
+                    className={styles.radioButtonIcon}
+                    stroke={item.name === currentPath ? 'black' : 'white'}
+                  ></item.icon>
+                  {item.name}
+                </Flex>
+              </a>
             </Radio.Button>
           ))}
         </Radio.Group>