From 503735cd1df435093a727889c962450ba9759eb7 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 2 Feb 2024 09:35:21 +0800
Subject: [PATCH] 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
---
web/src/assets/svg/chat-star.svg | 6 +-
web/src/assets/svg/file-management.svg | 12 ++
web/src/assets/svg/knowledge-base.svg | 12 ++
web/src/assets/svg/knowledge-configration.svg | 9 ++
web/src/assets/svg/knowledge-dataset.svg | 8 ++
web/src/assets/svg/knowledge-testing.svg | 20 +++
web/src/assets/svg/moon.svg | 5 +
web/src/assets/svg/translation.svg | 5 +
web/src/constants/knowledge.ts | 5 +
web/src/layouts/components/header/index.less | 7 +-
web/src/layouts/components/header/index.tsx | 22 ++-
.../components/right-toolbar/index.less | 17 +++
.../components/right-toolbar/index.tsx | 39 ++++++
web/src/layouts/components/user/index.tsx | 16 +--
web/src/less/variable.less | 13 ++
.../components/knowledge-file/index.tsx | 6 +-
.../components/knowledge-setting/index.tsx | 4 +-
.../components/knowledge-sidebar/index.less | 63 +++++++++
.../components/knowledge-sidebar/index.tsx | 118 +++++++++++++++++
web/src/pages/add-knowledge/constant.ts | 9 ++
web/src/pages/add-knowledge/index.less | 32 ++---
web/src/pages/add-knowledge/index.tsx | 125 +++++++-----------
web/src/pages/add-knowledge/model.ts | 2 -
web/src/pages/knowledge/index.tsx | 2 +-
.../pages/knowledge/knowledge-card/index.tsx | 10 +-
web/src/routes.ts | 2 +-
26 files changed, 439 insertions(+), 130 deletions(-)
create mode 100644 web/src/assets/svg/file-management.svg
create mode 100644 web/src/assets/svg/knowledge-base.svg
create mode 100644 web/src/assets/svg/knowledge-configration.svg
create mode 100644 web/src/assets/svg/knowledge-dataset.svg
create mode 100644 web/src/assets/svg/knowledge-testing.svg
create mode 100644 web/src/assets/svg/moon.svg
create mode 100644 web/src/assets/svg/translation.svg
create mode 100644 web/src/constants/knowledge.ts
create mode 100644 web/src/layouts/components/right-toolbar/index.less
create mode 100644 web/src/layouts/components/right-toolbar/index.tsx
create mode 100644 web/src/pages/add-knowledge/components/knowledge-sidebar/index.less
create mode 100644 web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
create mode 100644 web/src/pages/add-knowledge/constant.ts
diff --git a/web/src/assets/svg/chat-star.svg b/web/src/assets/svg/chat-star.svg
index eb34c34..03b048f 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 0000000..9617c75
--- /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 0000000..b756e32
--- /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 0000000..ed5d52c
--- /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 0000000..7b3edfc
--- /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 0000000..22ab933
--- /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 0000000..14d49b7
--- /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 0000000..4ba0c14
--- /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 0000000..52fae77
--- /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 b396f07..f27b072 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 fab3ee4..9d69a44 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 0000000..9f9b9eb
--- /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 0000000..02b5168
--- /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 51d20eb..519e1c6 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 37fe53b..4820d07 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 dfda404..16f304d 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 e7b5659..0a43c52 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 0000000..435e126
--- /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 0000000..fda6c3d
--- /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 0000000..c918a3a
--- /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 d60a41d..d94c573 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 d2386a7..74942e7 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 0820749..accfd7b 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 44734da..234a9a4 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 2536641..31aaa3c 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 547404b..8e2e5b1 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',
},
{
--
GitLab