mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-08-16 16:45:53 +08:00
feat: Modify the color of the svg icon in the header according to the selected state and feat: extract routing information from the knowledge base into constants (#51)
* feat: Modify the color of the svg icon in the header according to the selected state * feat: add translation icon to header * feat: shorten the route length of the knowledge base * feat: extract routing information from the knowledge base into constants
This commit is contained in:
balibabu
GitHub
parent
e6acaf6738
commit
503735cd1d
@ -1,11 +1,11 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1164_5493)">
|
||||
<g clip-path="url(#clip0_1190_5382)">
|
||||
<path
|
||||
d="M3.08282 12.894V10.0795M3.08282 4.45031V1.63574M1.67554 3.04303H4.49011M1.67554 11.4867H4.49011M7.86759 2.19866L6.8914 4.73676C6.73265 5.1495 6.65328 5.35588 6.52984 5.52947C6.42045 5.68332 6.28603 5.81774 6.13218 5.92713C5.95858 6.05057 5.75221 6.12994 5.33947 6.28869L2.80137 7.26488L5.33947 8.24107C5.75221 8.39982 5.95859 8.4792 6.13218 8.60263C6.28603 8.71203 6.42045 8.84645 6.52984 9.0003C6.65328 9.17389 6.73265 9.38026 6.8914 9.79301L7.86759 12.3311L8.84378 9.79301C9.00253 9.38026 9.08191 9.17389 9.20534 9.0003C9.31474 8.84645 9.44916 8.71203 9.60301 8.60263C9.7766 8.4792 9.98297 8.39982 10.3957 8.24107L12.9338 7.26488L10.3957 6.28869C9.98297 6.12994 9.7766 6.05057 9.60301 5.92713C9.44916 5.81774 9.31474 5.68332 9.20534 5.52947C9.08191 5.35588 9.00253 5.1495 8.84378 4.73676L7.86759 2.19866Z"
|
||||
stroke="black" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
|
||||
stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1164_5493">
|
||||
<clipPath id="clip0_1190_5382">
|
||||
<rect width="13.5099" height="13.5099" fill="white" transform="translate(0.549805 0.509888)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
12
web/src/assets/svg/file-management.svg
Normal file
12
web/src/assets/svg/file-management.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1190_5387)">
|
||||
<path
|
||||
d="M7.90739 4.45039L7.27943 3.19448C7.09871 2.83302 7.00834 2.65229 6.87352 2.52025C6.7543 2.40348 6.61061 2.31468 6.45286 2.26026C6.27446 2.19873 6.0724 2.19873 5.66828 2.19873H3.51666C2.88613 2.19873 2.57087 2.19873 2.33004 2.32144C2.11821 2.42938 1.94598 2.60161 1.83804 2.81344C1.71533 3.05427 1.71533 3.36953 1.71533 4.00005V4.45039M1.71533 4.45039H10.2716C11.2174 4.45039 11.6903 4.45039 12.0515 4.63445C12.3693 4.79635 12.6276 5.0547 12.7895 5.37246C12.9736 5.7337 12.9736 6.20659 12.9736 7.15237V9.62919C12.9736 10.575 12.9736 11.0479 12.7895 11.4091C12.6276 11.7269 12.3693 11.9852 12.0515 12.1471C11.6903 12.3312 11.2174 12.3312 10.2716 12.3312H4.41732C3.47153 12.3312 2.99864 12.3312 2.6374 12.1471C2.31964 11.9852 2.0613 11.7269 1.89939 11.4091C1.71533 11.0479 1.71533 10.575 1.71533 9.62919V4.45039Z"
|
||||
stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1190_5387">
|
||||
<rect width="13.5099" height="13.5099" fill="white" transform="translate(0.589355 0.509888)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
12
web/src/assets/svg/knowledge-base.svg
Normal file
12
web/src/assets/svg/knowledge-base.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1190_5377)">
|
||||
<path
|
||||
d="M12.3312 3.32448C12.3312 4.25715 10.063 5.01323 7.26496 5.01323C4.46696 5.01323 2.19873 4.25715 2.19873 3.32448M12.3312 3.32448C12.3312 2.39182 10.063 1.63574 7.26496 1.63574C4.46696 1.63574 2.19873 2.39182 2.19873 3.32448M12.3312 3.32448V11.2053C12.3312 12.1397 10.0795 12.894 7.26496 12.894C4.45039 12.894 2.19873 12.1397 2.19873 11.2053V3.32448M12.3312 7.26488C12.3312 8.19932 10.0795 8.95362 7.26496 8.95362C4.45039 8.95362 2.19873 8.19932 2.19873 7.26488"
|
||||
stroke="currentColor" stroke-width="1.68874" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1190_5377">
|
||||
<rect width="13.5099" height="13.5099" fill="white" transform="translate(0.51001 0.509888)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 940 B |
9
web/src/assets/svg/knowledge-configration.svg
Normal file
9
web/src/assets/svg/knowledge-configration.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.99805L7.5 1L14.5 3.99805L7.5 6.99609L0.5 3.99805Z"
|
||||
fill="#D2D1D4" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.99805V4V12L7.5 15V6.99609" fill="#D2D1D4" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 3.99805V12L7.5 15" fill="#D2D1D4" />
|
||||
<path
|
||||
d="M0.5 3.99805L7.5 1L14.5 3.99805M0.5 3.99805L7.5 6.99609M0.5 3.99805V4M14.5 3.99805L7.5 6.99609M14.5 3.99805V12L7.5 15M14.5 3.99805L7.5 7V15M7.5 6.99609V15M7.5 6.99609L0.5 4M7.5 15L0.5 12V4"
|
||||
stroke="#D2D1D4" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 703 B |
8
web/src/assets/svg/knowledge-dataset.svg
Normal file
8
web/src/assets/svg/knowledge-dataset.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0 5V0.5H1V5C1 5.82843 1.67157 6.5 2.5 6.5C3.32843 6.5 4 5.82843 4 5V2C4 1.72386 3.77614 1.5 3.5 1.5C3.22386 1.5 3 1.72386 3 2V5.5H2V2C2 1.17157 2.67157 0.5 3.5 0.5C4.32843 0.5 5 1.17157 5 2V5C5 6.38071 3.88071 7.5 2.5 7.5C1.11929 7.5 0 6.38071 0 5Z"
|
||||
fill="#3363FF" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M12.5 0.5H6V5C6 6.933 4.433 8.5 2.5 8.5H1V14C1 14.8284 1.67157 15.5 2.5 15.5H12.5C13.3284 15.5 14 14.8284 14 14V2C14 1.17157 13.3284 0.5 12.5 0.5ZM11 4.5H7V5.5H11V4.5ZM11 7.5H7V8.5H11V7.5ZM4 10.5H11V11.5H4V10.5Z"
|
||||
fill="#3363FF" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 700 B |
20
web/src/assets/svg/knowledge-testing.svg
Normal file
20
web/src/assets/svg/knowledge-testing.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M0.5 8C0.5 11.866 3.63401 15 7.5 15C11.366 15 14.5 11.866 14.5 8C14.5 4.13401 11.366 1 7.5 1C3.63401 1 0.5 4.13401 0.5 8Z"
|
||||
fill="#E8E8EA" />
|
||||
<path
|
||||
d="M3.5 8C3.5 10.2091 5.29086 12 7.5 12C9.70914 12 11.5 10.2091 11.5 8C11.5 5.79086 9.70914 4 7.5 4C5.29086 4 3.5 5.79086 3.5 8Z"
|
||||
fill="#E8E8EA" />
|
||||
<path
|
||||
d="M6.5 8C6.5 8.55228 6.94772 9 7.5 9C8.05228 9 8.5 8.55228 8.5 8C8.5 7.44772 8.05228 7 7.5 7C6.94772 7 6.5 7.44772 6.5 8Z"
|
||||
fill="#E8E8EA" />
|
||||
<path
|
||||
d="M0.5 8C0.5 11.866 3.63401 15 7.5 15C11.366 15 14.5 11.866 14.5 8C14.5 4.13401 11.366 1 7.5 1C3.63401 1 0.5 4.13401 0.5 8Z"
|
||||
stroke="#BBBABF" />
|
||||
<path
|
||||
d="M3.5 8C3.5 10.2091 5.29086 12 7.5 12C9.70914 12 11.5 10.2091 11.5 8C11.5 5.79086 9.70914 4 7.5 4C5.29086 4 3.5 5.79086 3.5 8Z"
|
||||
stroke="#BBBABF" />
|
||||
<path
|
||||
d="M6.5 8C6.5 8.55228 6.94772 9 7.5 9C8.05228 9 8.5 8.55228 8.5 8C8.5 7.44772 8.05228 7 7.5 7C6.94772 7 6.5 7.44772 6.5 8Z"
|
||||
stroke="#BBBABF" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
5
web/src/assets/svg/moon.svg
Normal file
5
web/src/assets/svg/moon.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.2815 8.68261C12.3175 8.56966 12.2062 8.46792 12.0932 8.50385C11.5907 8.66372 11.0554 8.74999 10.4999 8.74999C7.60042 8.74999 5.24992 6.39948 5.24992 3.49999C5.24992 2.94453 5.33618 2.40922 5.49604 1.90672C5.53198 1.79376 5.43023 1.68247 5.31728 1.71842C3.07937 2.43077 1.45825 4.52608 1.45825 7.00002C1.45825 10.0606 3.93934 12.5417 6.99992 12.5417C9.47388 12.5417 11.5692 10.9205 12.2815 8.68261Z"
|
||||
fill="#4E5969" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 552 B |
5
web/src/assets/svg/translation.svg
Normal file
5
web/src/assets/svg/translation.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9.04159 2.62494L5.78647 2.62494L5.53026 1.34387L4.38625 1.57267L4.5967 2.62494L1.45825 2.62494V3.79161L2.76942 3.79161C2.84706 4.03671 2.96215 4.36714 3.11903 4.73626C3.38908 5.37167 3.79813 6.15836 4.37992 6.81783C3.85387 7.21613 3.26794 7.57787 2.75378 7.86768C2.3987 8.06782 2.0853 8.22953 1.86122 8.34094C1.74929 8.39658 1.65994 8.43953 1.59918 8.46829C1.56881 8.48267 1.54561 8.49349 1.53032 8.50057L1.51342 8.50836L1.50889 8.51043C1.50889 8.51043 1.50898 8.51039 1.74999 9.04161C1.99099 9.57283 1.9919 9.57241 1.9919 9.57241L1.99362 9.57163L1.99947 9.56896L2.02056 9.55924C2.0387 9.55084 2.06488 9.53862 2.09834 9.52278C2.16525 9.49111 2.26137 9.44489 2.38059 9.38562C2.61882 9.26718 2.95054 9.09601 3.32664 8.88401C3.90897 8.55578 4.61632 8.1194 5.24995 7.61982C5.88359 8.1194 6.59094 8.55578 7.17326 8.88401C7.54937 9.09601 7.88109 9.26718 8.11931 9.38562C8.14919 9.40047 8.17762 9.4145 8.20449 9.42769L7.97218 9.98334L7.04118 12.3263L8.12539 12.7571L8.67457 11.375H11.1585L11.7079 12.7572L12.792 12.3262L11.8647 9.99287L10.4915 6.70837H9.34144L8.6554 8.34923C8.64989 8.3465 8.64432 8.34373 8.63869 8.34094C8.41461 8.22953 8.10121 8.06782 7.74613 7.86768C7.23197 7.57787 6.64604 7.21613 6.11999 6.81783C6.70177 6.15836 7.11083 5.37167 7.38088 4.73626C7.53776 4.36714 7.65285 4.03671 7.73048 3.79161L9.04159 3.79161V2.62494ZM6.30717 4.27993C6.05882 4.86426 5.70861 5.51908 5.24995 6.04061C4.7913 5.51908 4.44109 4.86426 4.19274 4.27993C4.11858 4.10542 4.05485 3.94047 4.00109 3.79161L6.49881 3.79161C6.44505 3.94047 6.38133 4.10542 6.30717 4.27993ZM10.6902 10.2084H9.14272L9.91649 8.35755L10.6902 10.2084Z"
|
||||
fill="#4E5969" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
5
web/src/constants/knowledge.ts
Normal file
5
web/src/constants/knowledge.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export enum KnowledgeRouteKey {
|
||||
Dataset = 'dataset',
|
||||
Testing = 'testing',
|
||||
Configration = 'configration',
|
||||
}
|
||||
@ -26,9 +26,14 @@
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
background: rgba(249, 249, 249, 1) !important;
|
||||
& > label {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border: 0 !important;
|
||||
background-color: rgba(249, 249, 249, 1);
|
||||
font-weight: @fontWeight700;
|
||||
font-family: 'Nunito Sans';
|
||||
color: rgba(29, 25, 41, 1);
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
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 { Layout, Radio, Space, theme } from 'antd';
|
||||
import Toolbar from '../right-toolbar';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useLocation, useNavigate } from 'umi';
|
||||
import User from '../user';
|
||||
|
||||
const { Header } = Layout;
|
||||
|
||||
@ -18,13 +20,15 @@ const RagHeader = () => {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const tagsData = [
|
||||
{ path: '/knowledge', name: 'knowledge' },
|
||||
{ path: '/chat', name: 'chat' },
|
||||
{ path: '/file', name: 'file' },
|
||||
{ path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
|
||||
{ path: '/chat', name: 'Chat', icon: StarIon },
|
||||
{ path: '/file', name: 'File Management', icon: FileIcon },
|
||||
];
|
||||
|
||||
const currentPath = useMemo(() => {
|
||||
return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
|
||||
return (
|
||||
tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
|
||||
);
|
||||
}, [pathname]);
|
||||
|
||||
const handleChange = (path: string) => {
|
||||
@ -57,16 +61,20 @@ const RagHeader = () => {
|
||||
<Radio.Button
|
||||
value={item.name}
|
||||
onClick={() => handleChange(item.path)}
|
||||
key={item.name}
|
||||
>
|
||||
<Space>
|
||||
<StarIon className={styles.radioButtonIcon}></StarIon>
|
||||
<item.icon
|
||||
className={styles.radioButtonIcon}
|
||||
stroke={item.name === currentPath ? 'black' : 'white'}
|
||||
></item.icon>
|
||||
{item.name}
|
||||
</Space>
|
||||
</Radio.Button>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
<User></User>
|
||||
<Toolbar></Toolbar>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
17
web/src/layouts/components/right-toolbar/index.less
Normal file
17
web/src/layouts/components/right-toolbar/index.less
Normal file
@ -0,0 +1,17 @@
|
||||
.toolbarWrapper {
|
||||
:global(.ant-avatar) {
|
||||
background-color: rgba(242, 243, 245, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(242, 243, 245, 1);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
39
web/src/layouts/components/right-toolbar/index.tsx
Normal file
39
web/src/layouts/components/right-toolbar/index.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { ReactComponent as MoonIcon } from '@/assets/svg/moon.svg';
|
||||
import { ReactComponent as TranslationIcon } from '@/assets/svg/translation.svg';
|
||||
import { BellOutlined, GithubOutlined } from '@ant-design/icons';
|
||||
import { Space } from 'antd';
|
||||
import React from 'react';
|
||||
import User from '../user';
|
||||
import styled from './index.less';
|
||||
|
||||
const Circle = ({ children }: React.PropsWithChildren) => {
|
||||
return <div className={styled.circle}>{children}</div>;
|
||||
};
|
||||
|
||||
const handleGithubCLick = () => {
|
||||
window.open('https://github.com/infiniflow/infinity', 'target');
|
||||
};
|
||||
|
||||
const RightToolBar = () => {
|
||||
return (
|
||||
<div className={styled.toolbarWrapper}>
|
||||
<Space wrap size={16}>
|
||||
<Circle>
|
||||
<GithubOutlined onClick={handleGithubCLick} />
|
||||
</Circle>
|
||||
<Circle>
|
||||
<TranslationIcon />
|
||||
</Circle>
|
||||
<Circle>
|
||||
<BellOutlined />
|
||||
</Circle>
|
||||
<Circle>
|
||||
<MoonIcon />
|
||||
</Circle>
|
||||
<User></User>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RightToolBar;
|
||||
@ -1,6 +1,6 @@
|
||||
import authorizationUtil from '@/utils/authorizationUtil';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import { Avatar, Button, Dropdown } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { history } from 'umi';
|
||||
@ -39,14 +39,12 @@ const App: React.FC = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow>
|
||||
<img
|
||||
style={{ width: '50px', height: '50px', borderRadius: '25px' }}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</Dropdown>
|
||||
</>
|
||||
<Dropdown menu={{ items }} placement="bottomLeft" arrow>
|
||||
<Avatar
|
||||
size={32}
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1 +1,14 @@
|
||||
@fontWeight600: 600;
|
||||
@fontWeight700: 700;
|
||||
|
||||
@gray2: rgba(29, 25, 41, 1);
|
||||
@gray3: rgba(52, 48, 62, 1);
|
||||
@gray8: rgba(165, 163, 169, 1);
|
||||
@gray11: rgba(232, 232, 234, 1);
|
||||
|
||||
@fontSize12: 12px;
|
||||
@fontSize14: 14px;
|
||||
@fontSize16: 16px;
|
||||
@fontSize18: 18px;
|
||||
|
||||
@fontFamilyNunitoSans: 'Nunito Sans';
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
@ -158,8 +159,9 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
|
||||
},
|
||||
];
|
||||
const toChunk = (id: string) => {
|
||||
console.log(id);
|
||||
navigate(`/knowledge/add/setting?activeKey=file&id=${kb_id}&doc_id=${id}`);
|
||||
navigate(
|
||||
`/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}&doc_id=${id}`,
|
||||
);
|
||||
};
|
||||
const columns: ColumnsType<DataType> = [
|
||||
{
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
import { Button, Form, Input, Radio, Select, Space, Tag } from 'antd';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useDispatch, useNavigate, useSelector } from 'umi';
|
||||
import styles from './index.less';
|
||||
|
||||
const { CheckableTag } = Tag;
|
||||
const layout = {
|
||||
labelCol: { span: 8 },
|
||||
@ -67,7 +69,7 @@ const KnowledgeSetting: React.FC<kSProps> = ({ kb_id }) => {
|
||||
},
|
||||
});
|
||||
retcode === 0 &&
|
||||
navigate(`/knowledge/add/setting?activeKey=file&id=${kb_id}`);
|
||||
navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
.sidebarWrapper {
|
||||
max-width: 288px;
|
||||
padding: 32px 24px 24px 24px;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebarTop {
|
||||
text-align: center;
|
||||
.knowledgeLogo {
|
||||
}
|
||||
.knowledgeTitle {
|
||||
font-family: 'Nunito Sans';
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: @fontWeight700;
|
||||
color: @gray2;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.knowledgeDescription {
|
||||
font-family: 'Nunito Sans';
|
||||
font-size: 12px;
|
||||
font-weight: @fontWeight600;
|
||||
color: @gray8;
|
||||
margin: 0;
|
||||
}
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.divider {
|
||||
height: 2px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
@gray11 0%,
|
||||
@gray11 50%,
|
||||
transparent 50%
|
||||
);
|
||||
background-size: 10px 2px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.menuWrapper {
|
||||
padding-top: 10px;
|
||||
|
||||
.menu {
|
||||
border: none;
|
||||
font-size: @fontSize14;
|
||||
font-weight: @fontWeight600;
|
||||
}
|
||||
|
||||
.defaultWidth {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.minWidth {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.menuText {
|
||||
color: @gray3;
|
||||
font-family: @fontFamilyNunitoSans;
|
||||
font-size: @fontSize14;
|
||||
font-weight: @fontWeight700;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
import { ReactComponent as ConfigrationIcon } from '@/assets/svg/knowledge-configration.svg';
|
||||
import { ReactComponent as DatasetIcon } from '@/assets/svg/knowledge-dataset.svg';
|
||||
import { ReactComponent as TestingIcon } from '@/assets/svg/knowledge-testing.svg';
|
||||
import { getWidth } from '@/utils';
|
||||
import { AntDesignOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Menu, MenuProps, Space } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate, useParams, useSelector } from 'umi';
|
||||
import { KnowledgeRouteKey, routeMap } from '../../constant';
|
||||
import styles from './index.less';
|
||||
|
||||
const KnowledgeSidebar = () => {
|
||||
const kAModel = useSelector((state: any) => state.kAModel);
|
||||
const { id } = kAModel;
|
||||
let navigate = useNavigate();
|
||||
const params = useParams();
|
||||
const activeKey = params.module || KnowledgeRouteKey.Dataset;
|
||||
|
||||
const [windowWidth, setWindowWidth] = useState(getWidth());
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
const handleSelect: MenuProps['onSelect'] = (e) => {
|
||||
navigate(`/knowledge/${e.key}?id=${id}`);
|
||||
};
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
function getItem(
|
||||
label: React.ReactNode,
|
||||
key: React.Key,
|
||||
icon?: React.ReactNode,
|
||||
disabled?: boolean,
|
||||
children?: MenuItem[],
|
||||
type?: 'group',
|
||||
): MenuItem {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
disabled,
|
||||
} as MenuItem;
|
||||
}
|
||||
const items: MenuItem[] = useMemo(() => {
|
||||
return [
|
||||
getItem(
|
||||
routeMap[KnowledgeRouteKey.Dataset], // TODO: Change icon color when selected
|
||||
KnowledgeRouteKey.Dataset,
|
||||
<DatasetIcon />,
|
||||
),
|
||||
getItem(
|
||||
routeMap[KnowledgeRouteKey.Testing],
|
||||
KnowledgeRouteKey.Testing,
|
||||
<TestingIcon />,
|
||||
),
|
||||
getItem(
|
||||
routeMap[KnowledgeRouteKey.Configration],
|
||||
KnowledgeRouteKey.Configration,
|
||||
<ConfigrationIcon />,
|
||||
),
|
||||
];
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (windowWidth.width > 957) {
|
||||
setCollapsed(false);
|
||||
} else {
|
||||
setCollapsed(true);
|
||||
}
|
||||
}, [windowWidth.width]);
|
||||
|
||||
// 标记一下
|
||||
useEffect(() => {
|
||||
const widthSize = () => {
|
||||
const width = getWidth();
|
||||
console.log(width);
|
||||
|
||||
setWindowWidth(width);
|
||||
};
|
||||
window.addEventListener('resize', widthSize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', widthSize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.sidebarWrapper}>
|
||||
<div className={styles.sidebarTop}>
|
||||
<Space size={8} direction="vertical">
|
||||
<Avatar size={64} icon={<AntDesignOutlined />} />
|
||||
<div className={styles.knowledgeTitle}>Cloud Computing</div>
|
||||
</Space>
|
||||
<p className={styles.knowledgeDescription}>
|
||||
A scalable, secure cloud-based database optimized for high-performance
|
||||
computing and data storage.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.divider}></div>
|
||||
<div className={styles.menuWrapper}>
|
||||
<Menu
|
||||
selectedKeys={[activeKey]}
|
||||
// mode="inline"
|
||||
className={classNames(styles.menu, {
|
||||
[styles.defaultWidth]: windowWidth.width > 957,
|
||||
[styles.minWidth]: windowWidth.width <= 957,
|
||||
})}
|
||||
inlineCollapsed={collapsed}
|
||||
items={items}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KnowledgeSidebar;
|
||||
9
web/src/pages/add-knowledge/constant.ts
Normal file
9
web/src/pages/add-knowledge/constant.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
|
||||
export const routeMap = {
|
||||
[KnowledgeRouteKey.Dataset]: 'Dataset',
|
||||
[KnowledgeRouteKey.Testing]: 'Retrieval testing',
|
||||
[KnowledgeRouteKey.Configration]: 'Configuration',
|
||||
};
|
||||
|
||||
export * from '@/constants/knowledge';
|
||||
@ -1,19 +1,15 @@
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
.menu {
|
||||
.defaultWidth {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.minWidth {
|
||||
width: 50px
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.contentWrapper {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
height: 100%;
|
||||
background-color: rgba(247, 248, 250, 1);
|
||||
padding: 16px 20px 28px 40px;
|
||||
}
|
||||
.content {
|
||||
background-color: white;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +1,46 @@
|
||||
import { getWidth } from '@/utils';
|
||||
import { BarsOutlined, SearchOutlined, ToolOutlined } from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Menu } from 'antd';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useDispatch, useLocation, useNavigate, useSelector } from 'umi';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import {
|
||||
useDispatch,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
useParams,
|
||||
useSelector,
|
||||
} from 'umi';
|
||||
import Chunk from './components/knowledge-chunk';
|
||||
import File from './components/knowledge-file';
|
||||
import Search from './components/knowledge-search';
|
||||
import Setting from './components/knowledge-setting';
|
||||
import Siderbar from './components/knowledge-sidebar';
|
||||
import { KnowledgeRouteKey, routeMap } from './constant';
|
||||
import styles from './index.less';
|
||||
|
||||
const KnowledgeAdding = () => {
|
||||
const dispatch = useDispatch();
|
||||
const kAModel = useSelector((state: any) => state.kAModel);
|
||||
const { id, activeKey, doc_id } = kAModel;
|
||||
const navigate = useNavigate();
|
||||
const { id, doc_id } = kAModel;
|
||||
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [windowWidth, setWindowWidth] = useState(getWidth());
|
||||
let navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const params = useParams();
|
||||
const activeKey: KnowledgeRouteKey =
|
||||
(params.module as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
|
||||
|
||||
// 标记一下
|
||||
console.log(doc_id, '>>>>>>>>>>>>>doc_id');
|
||||
useEffect(() => {
|
||||
const widthSize = () => {
|
||||
const width = getWidth();
|
||||
console.log(width);
|
||||
const gotoList = () => {
|
||||
navigate('/knowledge');
|
||||
};
|
||||
|
||||
const breadcrumbItems = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: <a onClick={gotoList}>Knowledge Base</a>,
|
||||
},
|
||||
{
|
||||
title: routeMap[activeKey],
|
||||
},
|
||||
];
|
||||
}, [activeKey]);
|
||||
|
||||
setWindowWidth(width);
|
||||
};
|
||||
window.addEventListener('resize', widthSize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', widthSize);
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const search: string = location.search.slice(1);
|
||||
const map = search.split('&').reduce<Record<string, string>>((obj, cur) => {
|
||||
@ -51,66 +58,24 @@ const KnowledgeAdding = () => {
|
||||
});
|
||||
}, [location]);
|
||||
|
||||
useEffect(() => {
|
||||
if (windowWidth.width > 957) {
|
||||
setCollapsed(false);
|
||||
} else {
|
||||
setCollapsed(true);
|
||||
}
|
||||
}, [windowWidth.width]);
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
function getItem(
|
||||
label: React.ReactNode,
|
||||
key: React.Key,
|
||||
icon?: React.ReactNode,
|
||||
disabled?: boolean,
|
||||
children?: MenuItem[],
|
||||
type?: 'group',
|
||||
): MenuItem {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
disabled,
|
||||
} as MenuItem;
|
||||
}
|
||||
const items: MenuItem[] = useMemo(() => {
|
||||
const disabled = !id;
|
||||
return [
|
||||
getItem('配置', 'setting', <ToolOutlined />),
|
||||
getItem('知识库', 'file', <BarsOutlined />, disabled),
|
||||
getItem('搜索测试', 'search', <SearchOutlined />, disabled),
|
||||
];
|
||||
}, [id]);
|
||||
|
||||
const handleSelect: MenuProps['onSelect'] = (e) => {
|
||||
navigate(`/knowledge/add/setting?activeKey=${e.key}&id=${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.menu}>
|
||||
<Menu
|
||||
selectedKeys={[activeKey]}
|
||||
mode="inline"
|
||||
className={
|
||||
windowWidth.width > 957 ? styles.defaultWidth : styles.minWidth
|
||||
}
|
||||
inlineCollapsed={collapsed}
|
||||
items={items}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
{activeKey === 'file' && !doc_id && <File kb_id={id} />}
|
||||
{activeKey === 'setting' && <Setting kb_id={id} />}
|
||||
{activeKey === 'search' && <Search kb_id={id} />}
|
||||
{activeKey === 'file' && !!doc_id && <Chunk doc_id={doc_id} />}
|
||||
<Siderbar></Siderbar>
|
||||
<div className={styles.contentWrapper}>
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className={styles.content}>
|
||||
{activeKey === KnowledgeRouteKey.Dataset && !doc_id && (
|
||||
<File kb_id={id} />
|
||||
)}
|
||||
{activeKey === KnowledgeRouteKey.Configration && (
|
||||
<Setting kb_id={id} />
|
||||
)}
|
||||
{activeKey === KnowledgeRouteKey.Testing && <Search kb_id={id} />}
|
||||
{activeKey === KnowledgeRouteKey.Dataset && !!doc_id && (
|
||||
<Chunk doc_id={doc_id} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -3,7 +3,6 @@ export interface kAModelState {
|
||||
isShowPSwModal: boolean;
|
||||
isShowTntModal: boolean;
|
||||
tenantIfo: any;
|
||||
activeKey: string;
|
||||
id: string;
|
||||
doc_id: string;
|
||||
}
|
||||
@ -14,7 +13,6 @@ const model: DvaModel<kAModelState> = {
|
||||
isShowPSwModal: false,
|
||||
isShowTntModal: false,
|
||||
tenantIfo: {},
|
||||
activeKey: 'setting',
|
||||
id: '',
|
||||
doc_id: '',
|
||||
},
|
||||
|
||||
@ -20,7 +20,7 @@ const Knowledge = () => {
|
||||
}, []);
|
||||
|
||||
const handleAddKnowledge = () => {
|
||||
navigate(`add/setting?activeKey=setting`);
|
||||
navigate(`add/setting`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import {
|
||||
AntDesignOutlined,
|
||||
CalendarOutlined,
|
||||
DeleteOutlined,
|
||||
FileTextOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Avatar, Card, Dropdown, MenuProps, Space, Tooltip } from 'antd';
|
||||
import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
|
||||
import { MouseEvent } from 'react';
|
||||
import { useDispatch, useNavigate } from 'umi';
|
||||
|
||||
@ -47,7 +47,7 @@ const KnowledgeCard = ({ item }: IProps) => {
|
||||
};
|
||||
|
||||
const handleCardClick = () => {
|
||||
navigate(`add/setting?activeKey=file&id=${item.id}`);
|
||||
navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${item.id}`);
|
||||
};
|
||||
|
||||
const onConfirmDelete = (e?: MouseEvent<HTMLElement>) => {
|
||||
@ -97,7 +97,7 @@ const KnowledgeCard = ({ item }: IProps) => {
|
||||
{formatDate(item.update_date)}
|
||||
</span>
|
||||
</div>
|
||||
<Avatar.Group size={25}>
|
||||
{/* <Avatar.Group size={25}>
|
||||
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
|
||||
<a href="https://ant.design">
|
||||
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
||||
@ -112,7 +112,7 @@ const KnowledgeCard = ({ item }: IProps) => {
|
||||
style={{ backgroundColor: '#1677ff' }}
|
||||
icon={<AntDesignOutlined />}
|
||||
/>
|
||||
</Avatar.Group>
|
||||
</Avatar.Group> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const routes = [
|
||||
component: '@/pages/knowledge',
|
||||
},
|
||||
{
|
||||
path: '/knowledge/add/*',
|
||||
path: '/knowledge/:module',
|
||||
component: '@/pages/add-knowledge',
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user