diff --git a/web/src/assets/svg/chat-star.svg b/web/src/assets/svg/chat-star.svg
index eb34c34b3da0d0d9dc24fe423d30bcec551c3292..03b048f4201779367a1f0300f1cd6d615bbe7c41 100644
--- a/web/src/assets/svg/chat-star.svg
+++ b/web/src/assets/svg/chat-star.svg
@@ -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>
diff --git a/web/src/assets/svg/file-management.svg b/web/src/assets/svg/file-management.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9617c7520e774cc6755f56f255ecca22d000749c
--- /dev/null
+++ b/web/src/assets/svg/file-management.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/knowledge-base.svg b/web/src/assets/svg/knowledge-base.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b756e32749e0d239b5db3fb035366202ff29e6f0
--- /dev/null
+++ b/web/src/assets/svg/knowledge-base.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/knowledge-configration.svg b/web/src/assets/svg/knowledge-configration.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ed5d52c816986eeab1b87a73f4035f3cdfe40b9a
--- /dev/null
+++ b/web/src/assets/svg/knowledge-configration.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/knowledge-dataset.svg b/web/src/assets/svg/knowledge-dataset.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7b3edfc608ace8cae9df2bdf2a01f09d72435425
--- /dev/null
+++ b/web/src/assets/svg/knowledge-dataset.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/knowledge-testing.svg b/web/src/assets/svg/knowledge-testing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..22ab9335c2d83e26313858f0a167456716252e25
--- /dev/null
+++ b/web/src/assets/svg/knowledge-testing.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/moon.svg b/web/src/assets/svg/moon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..14d49b700610c446edd68fcf9a679ffd77882e10
--- /dev/null
+++ b/web/src/assets/svg/moon.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/assets/svg/translation.svg b/web/src/assets/svg/translation.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ba0c14201dd03846224bcdc6256b2adbc7007c7
--- /dev/null
+++ b/web/src/assets/svg/translation.svg
@@ -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>
\ No newline at end of file
diff --git a/web/src/constants/knowledge.ts b/web/src/constants/knowledge.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52fae77a8e7720696554ce639467bb6bfed42d20
--- /dev/null
+++ b/web/src/constants/knowledge.ts
@@ -0,0 +1,5 @@
+export enum KnowledgeRouteKey {
+ Dataset = 'dataset',
+ Testing = 'testing',
+ Configration = 'configration',
+}
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
index b396f073982ebf46bf4e3c1cf1259c3f3182e0e7..f27b0720b905172c0c5a4677268257a20b8cad20 100644
--- a/web/src/layouts/components/header/index.less
+++ b/web/src/layouts/components/header/index.less
@@ -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;
}
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
index fab3ee41682bdf602d2851be46cf964c68bfb504..9d69a44647858dddb7baf3585b97b33c65aa89ea 100644
--- a/web/src/layouts/components/header/index.tsx
+++ b/web/src/layouts/components/header/index.tsx
@@ -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>
);
};
diff --git a/web/src/layouts/components/right-toolbar/index.less b/web/src/layouts/components/right-toolbar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..9f9b9ebc31868b31439711b8faec677a125e8230
--- /dev/null
+++ b/web/src/layouts/components/right-toolbar/index.less
@@ -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;
+}
diff --git a/web/src/layouts/components/right-toolbar/index.tsx b/web/src/layouts/components/right-toolbar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..02b5168149014b08686267026add63f61fbd7604
--- /dev/null
+++ b/web/src/layouts/components/right-toolbar/index.tsx
@@ -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;
diff --git a/web/src/layouts/components/user/index.tsx b/web/src/layouts/components/user/index.tsx
index 51d20eb9082da7f9de577753f56599a120da8a26..519e1c69b400b6446273b4ae3ca3b16f4c979a0b 100644
--- a/web/src/layouts/components/user/index.tsx
+++ b/web/src/layouts/components/user/index.tsx
@@ -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>
);
};
diff --git a/web/src/less/variable.less b/web/src/less/variable.less
index 37fe53bc76abb77c46033eb43e24cfaea311031d..4820d07f6b4847d219cb78eb76ce38e7931c0f56 100644
--- a/web/src/less/variable.less
+++ b/web/src/less/variable.less
@@ -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';
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
index dfda404744cb2fb1307700e5371e796f2b1f2aaa..16f304d6c4a80d779a099be2facc8a99230b03fc 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@@ -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> = [
{
diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
index e7b5659c9ebceaa03d84729930aaaf1c398eb8f1..0a43c527fcb5eda664c5d3d03e4019700db03faa 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
@@ -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);
diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.less b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..435e1261b21e8a724aa3bfc4465e5910a94d075f
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.less
@@ -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;
+ }
+ }
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fda6c3da096501880a985ff43eb9e1721cd9212d
--- /dev/null
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
@@ -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;
diff --git a/web/src/pages/add-knowledge/constant.ts b/web/src/pages/add-knowledge/constant.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c918a3af63463c5144befe7be48a28ed4ea327bd
--- /dev/null
+++ b/web/src/pages/add-knowledge/constant.ts
@@ -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';
diff --git a/web/src/pages/add-knowledge/index.less b/web/src/pages/add-knowledge/index.less
index d60a41d85fcb54acb440c20a00dff95ac24cd761..d94c573abc209b14f3ee354a9e9be021b936d29d 100644
--- a/web/src/pages/add-knowledge/index.less
+++ b/web/src/pages/add-knowledge/index.less
@@ -1,19 +1,15 @@
.container {
- display: flex;
-
- .menu {
- .defaultWidth {
- width: 256px;
- }
-
- .minWidth {
- width: 50px
- }
- }
-
- .content {
- flex: 1;
- overflow-x: auto;
- height: 100%;
- }
-}
\ No newline at end of file
+ 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;
+ }
+}
diff --git a/web/src/pages/add-knowledge/index.tsx b/web/src/pages/add-knowledge/index.tsx
index d2386a771c6aaebc07abbab21d24b4f57b34c4d1..74942e7b3113f9409dc080bfeada382a133d8edd 100644
--- a/web/src/pages/add-knowledge/index.tsx
+++ b/web/src/pages/add-knowledge/index.tsx
@@ -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>
</>
diff --git a/web/src/pages/add-knowledge/model.ts b/web/src/pages/add-knowledge/model.ts
index 0820749256f4331fae12a39617fdd5214db01cba..accfd7bc4e86d1f925eac33594585857ce1231dc 100644
--- a/web/src/pages/add-knowledge/model.ts
+++ b/web/src/pages/add-knowledge/model.ts
@@ -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: '',
},
diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx
index 44734dace44335ff329f4296a1d9d263e95edca4..234a9a4083959653c93217f95a40dd90b699d59d 100644
--- a/web/src/pages/knowledge/index.tsx
+++ b/web/src/pages/knowledge/index.tsx
@@ -20,7 +20,7 @@ const Knowledge = () => {
}, []);
const handleAddKnowledge = () => {
- navigate(`add/setting?activeKey=setting`);
+ navigate(`add/setting`);
};
useEffect(() => {
diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx
index 2536641c07cc541ed22e7d5e5534a0570ef05ded..31aaa3ca1e5ef729d7c16700a1ea086ce8884c8d 100644
--- a/web/src/pages/knowledge/knowledge-card/index.tsx
+++ b/web/src/pages/knowledge/knowledge-card/index.tsx
@@ -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>
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 547404bd2df88ebbc3ad775d66568cccd585dc1d..8e2e5b104e2ca3ed9200c817e3e2328c40690f1a 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -16,7 +16,7 @@ const routes = [
component: '@/pages/knowledge',
},
{
- path: '/knowledge/add/*',
+ path: '/knowledge/:module',
component: '@/pages/add-knowledge',
},
{