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

@@ -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;
+    }
   }
 }
 

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) => {
+  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
+            <Radio.Button value={item.name} key={item.name}>
-              value={item.name}
+              <a href={item.path}>
-              onClick={() => handleChange(item.path)}
+                <Flex
-              key={item.name}
+                  align="center"
+                  gap={8}
+                  onClick={handleChange(item.path)}
+                  className="cursor-pointer"
                 >
-              <Flex align="center" gap={8}>
                   <item.icon
                     className={styles.radioButtonIcon}
                     stroke={item.name === currentPath ? 'black' : 'white'}
                   ></item.icon>
                   {item.name}
                 </Flex>
+              </a>
             </Radio.Button>
           ))}
         </Radio.Group>