File size: 2,688 Bytes
af3ef26 7c6cf75 503735c af3ef26 5769711 af3ef26 5769711 503735c af3ef26 7c4aa10 af3ef26 5769711 af3ef26 aa396c5 e441caf 7c6cf75 aa396c5 e441caf aa396c5 af3ef26 503735c aa396c5 af3ef26 657bc8a af3ef26 657bc8a af3ef26 cfbf213 af3ef26 503735c af3ef26 503735c af3ef26 503735c af3ef26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
import { useTranslate } from '@/hooks/commonHooks';
import { useNavigateWithFromState } from '@/hooks/routeHook';
import { Layout, Radio, Space, theme } from 'antd';
import { useCallback, useMemo } from 'react';
import { useLocation } from 'umi';
import Toolbar from '../right-toolbar';
import styles from './index.less';
const { Header } = Layout;
const RagHeader = () => {
const {
token: { colorBgContainer },
} = theme.useToken();
const navigate = useNavigateWithFromState();
const { pathname } = useLocation();
const { t } = useTranslate('header');
const tagsData = useMemo(
() => [
{ path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
{ path: '/chat', name: t('chat'), icon: StarIon },
{ path: '/file', name: t('fileManager'), icon: FileIcon },
],
[t],
);
const currentPath = useMemo(() => {
return (
tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
);
}, [pathname, tagsData]);
const handleChange = (path: string) => {
navigate(path);
};
const handleLogoClick = useCallback(() => {
navigate('/');
}, [navigate]);
return (
<Header
style={{
padding: '0 16px',
background: colorBgContainer,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '72px',
}}
>
<Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
<Logo className={styles.appIcon}></Logo>
<span className={styles.appName}>RAGFlow</span>
</Space>
<Space size={[0, 8]} wrap>
<Radio.Group
defaultValue="a"
buttonStyle="solid"
className={styles.radioGroup}
value={currentPath}
>
{tagsData.map((item) => (
<Radio.Button
value={item.name}
onClick={() => handleChange(item.path)}
key={item.name}
>
<Space>
<item.icon
className={styles.radioButtonIcon}
stroke={item.name === currentPath ? 'black' : 'white'}
></item.icon>
{item.name}
</Space>
</Radio.Button>
))}
</Radio.Group>
</Space>
<Toolbar></Toolbar>
</Header>
);
};
export default RagHeader;
|