mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
feat: layout the knowledge list page and modify the page switching button in the header (#48)
* feat: remove unnecessary 'loading' fields from other files * feat: layout the knowledge list page * feat: modify the page switching button in the header
This commit is contained in:
74
web/src/layouts/components/header/index.tsx
Normal file
74
web/src/layouts/components/header/index.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
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';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useLocation, useNavigate } from 'umi';
|
||||
import User from '../user';
|
||||
|
||||
const { Header } = Layout;
|
||||
|
||||
const RagHeader = () => {
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken();
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const tagsData = [
|
||||
{ path: '/knowledge', name: 'knowledge' },
|
||||
{ path: '/chat', name: 'chat' },
|
||||
{ path: '/file', name: 'file' },
|
||||
];
|
||||
|
||||
const currentPath = useMemo(() => {
|
||||
return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
|
||||
}, [pathname]);
|
||||
|
||||
const handleChange = (path: string) => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<Header
|
||||
style={{
|
||||
padding: '0 16px',
|
||||
background: colorBgContainer,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: '72px',
|
||||
}}
|
||||
>
|
||||
<Space size={12}>
|
||||
<Logo className={styles.appIcon}></Logo>
|
||||
<label className={styles.appName}>Infinity flow</label>
|
||||
</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)}
|
||||
>
|
||||
<Space>
|
||||
<StarIon className={styles.radioButtonIcon}></StarIon>
|
||||
{item.name}
|
||||
</Space>
|
||||
</Radio.Button>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
<User></User>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
export default RagHeader;
|
||||
Reference in New Issue
Block a user