balibabu commited on
Commit
596e145
·
1 Parent(s): d944812

feat: replace the graph icon in the header #918 (#1376)

Browse files

### What problem does this PR solve?

feat: replace the graph icon in the header #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/assets/svg/graph.svg ADDED
web/src/layouts/components/header/index.less CHANGED
@@ -52,4 +52,6 @@
52
  }
53
  .radioButtonIcon {
54
  vertical-align: middle;
 
 
55
  }
 
52
  }
53
  .radioButtonIcon {
54
  vertical-align: middle;
55
+ max-width: 16px;
56
+ max-height: 16px;
57
  }
web/src/layouts/components/header/index.tsx CHANGED
@@ -1,15 +1,15 @@
1
- import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
2
  import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
 
3
  import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
4
  import { useTranslate } from '@/hooks/commonHooks';
5
  import { useNavigateWithFromState } from '@/hooks/routeHook';
6
- import { Layout, Radio, Space, theme } from 'antd';
7
  import { useCallback, useMemo } from 'react';
8
  import { useLocation } from 'umi';
9
  import Toolbar from '../right-toolbar';
10
 
11
  import { useFetchAppConf } from '@/hooks/logicHooks';
12
- import { NodeIndexOutlined } from '@ant-design/icons';
13
  import styles from './index.less';
14
 
15
  const { Header } = Layout;
@@ -26,8 +26,8 @@ const RagHeader = () => {
26
  const tagsData = useMemo(
27
  () => [
28
  { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
29
- { path: '/chat', name: t('chat'), icon: StarIon },
30
- { path: '/flow', name: t('flow'), icon: NodeIndexOutlined },
31
  { path: '/file', name: t('fileManager'), icon: FileIcon },
32
  ],
33
  [t],
@@ -75,13 +75,13 @@ const RagHeader = () => {
75
  onClick={() => handleChange(item.path)}
76
  key={item.name}
77
  >
78
- <Space>
79
  <item.icon
80
  className={styles.radioButtonIcon}
81
  stroke={item.name === currentPath ? 'black' : 'white'}
82
  ></item.icon>
83
  {item.name}
84
- </Space>
85
  </Radio.Button>
86
  ))}
87
  </Radio.Group>
 
 
1
  import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
2
+ import { ReactComponent as GraphIcon } from '@/assets/svg/graph.svg';
3
  import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
4
  import { useTranslate } from '@/hooks/commonHooks';
5
  import { useNavigateWithFromState } from '@/hooks/routeHook';
6
+ import { Flex, Layout, Radio, Space, theme } from 'antd';
7
  import { useCallback, useMemo } from 'react';
8
  import { useLocation } from 'umi';
9
  import Toolbar from '../right-toolbar';
10
 
11
  import { useFetchAppConf } from '@/hooks/logicHooks';
12
+ import { MessageOutlined } from '@ant-design/icons';
13
  import styles from './index.less';
14
 
15
  const { Header } = Layout;
 
26
  const tagsData = useMemo(
27
  () => [
28
  { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
29
+ { path: '/chat', name: t('chat'), icon: MessageOutlined },
30
+ { path: '/flow', name: t('flow'), icon: GraphIcon },
31
  { path: '/file', name: t('fileManager'), icon: FileIcon },
32
  ],
33
  [t],
 
75
  onClick={() => handleChange(item.path)}
76
  key={item.name}
77
  >
78
+ <Flex align="center" gap={8}>
79
  <item.icon
80
  className={styles.radioButtonIcon}
81
  stroke={item.name === currentPath ? 'black' : 'white'}
82
  ></item.icon>
83
  {item.name}
84
+ </Flex>
85
  </Radio.Button>
86
  ))}
87
  </Radio.Group>