diff --git a/client/package-lock.json b/client/package-lock.json index b3f0b33d5..17fa55fba 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -19,6 +19,7 @@ "umi-request": "^1.4.0" }, "devDependencies": { + "@types/lodash": "^4.14.202", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "@umijs/plugins": "^4.1.0", @@ -2557,6 +2558,12 @@ "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==", + "dev": true + }, "node_modules/@types/minimist": { "version": "1.2.5", "resolved": "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.5.tgz", diff --git a/client/package.json b/client/package.json index ef7cac654..7f4320b96 100644 --- a/client/package.json +++ b/client/package.json @@ -22,6 +22,7 @@ "umi-request": "^1.4.0" }, "devDependencies": { + "@types/lodash": "^4.14.202", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "@umijs/plugins": "^4.1.0", diff --git a/client/routes.js b/client/routes.js index df28494eb..d989b608a 100644 --- a/client/routes.js +++ b/client/routes.js @@ -29,7 +29,7 @@ const routes = [ name: '知识库', icon: 'home', auth: [3, 4, 100], - path: '/knowledge/add', + path: '/knowledge/add/*', component: '@/pages/add-knowledge', pathname: 'knowledge', // routes: [{ diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png new file mode 100644 index 000000000..24616f1d1 Binary files /dev/null and b/client/src/assets/logo.png differ diff --git a/client/src/layouts/index.tsx b/client/src/layouts/index.tsx index 376ec8890..85b185cdc 100644 --- a/client/src/layouts/index.tsx +++ b/client/src/layouts/index.tsx @@ -3,19 +3,19 @@ import { history, Outlet, useLocation, useNavigate } from 'umi'; import { useTranslation, Trans } from 'react-i18next' import classnames from 'classnames' import '../locales/config'; +import logo from '@/assets/logo.png' import { - MenuFoldOutlined, - MenuUnfoldOutlined, + RedditOutlined } from '@ant-design/icons'; import { Layout, Button, theme, Space, } from 'antd'; import styles from './index.less' import User from './components/user' +import { head } from 'lodash'; const { Header, Content } = Layout; const App: React.FC = (props) => { const { t } = useTranslation() - const [collapsed, setCollapsed] = useState(false); const navigate = useNavigate() const { token: { colorBgContainer, borderRadiusLG }, @@ -40,17 +40,9 @@ const App: React.FC = (props) => { return ( -
- + + + ), + }, + { + key: '2', + label: ( +
+ +
+ ), + // disabled: true, + }, + ]; + + const columns: ColumnsType = [ + { + title: '名称', + dataIndex: 'name', + key: 'name', + render: (text) => {text}, + className: `${styles.column}` + }, + { + title: '数据总量', + dataIndex: 'total', + key: 'total', + className: `${styles.column}` + }, + { + title: 'Tokens', + dataIndex: 'tokens', + key: 'tokens', + className: `${styles.column}` + }, + { + title: '状态', + key: 'status', + dataIndex: 'status', + className: `${styles.column}`, + render: (_, { status }) => ( + <> + + + ), + }, + { + title: 'Action', + key: 'action', + className: `${styles.column}`, + render: (_, record) => ( + + + + 分段设置 + + + + ), + }, + ]; return <>
- + + + 导入文件 + + +
- +
}; diff --git a/client/src/pages/add-knowledge/components/knowledge-setting/index.tsx b/client/src/pages/add-knowledge/components/knowledge-setting/index.tsx index 06003520d..b7ddd1098 100644 --- a/client/src/pages/add-knowledge/components/knowledge-setting/index.tsx +++ b/client/src/pages/add-knowledge/components/knowledge-setting/index.tsx @@ -48,7 +48,7 @@ const App: React.FC = () => { {...layout} name="nest-messages" onFinish={onFinish} - style={{ maxWidth: 600 }} + style={{ maxWidth: 1000, padding: 14 }} validateMessages={validateMessages} > diff --git a/client/src/pages/add-knowledge/index.less b/client/src/pages/add-knowledge/index.less index 2ac5bc999..8cabb8e6c 100644 --- a/client/src/pages/add-knowledge/index.less +++ b/client/src/pages/add-knowledge/index.less @@ -1,7 +1,19 @@ -.tab { - :global { - .ant-tabs-tabpane { - margin: 20px; +.container { + display: flex; + + .menu { + .defaultWidth { + width: 256px; + } + + .minWidth { + width: 50px } } + + .content { + flex: 1; + overflow-x: auto; + height: 100%; + } } \ No newline at end of file diff --git a/client/src/pages/add-knowledge/index.tsx b/client/src/pages/add-knowledge/index.tsx index b228d7b8f..09df86e2b 100644 --- a/client/src/pages/add-knowledge/index.tsx +++ b/client/src/pages/add-knowledge/index.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; -import type { RadioChangeEvent } from 'antd'; -import { Radio, Space, Tabs } from 'antd'; +import React, { useMemo, useState, useEffect } from 'react'; +import type { MenuProps } from 'antd'; +import { Radio, Space, Tabs, Menu } from 'antd'; import { ToolOutlined, BarsOutlined, @@ -10,40 +10,78 @@ import File from './components/knowledge-file' import Setting from './components/knowledge-setting' import Search from './components/knowledge-search' import styles from './index.less' +import { getWidth } from '@/utils' const App: React.FC = () => { - type keyType = 'setting' | 'file' | 'search' - const [activeKey, setActiveKey] = useState('file') - // type tab = { label: string, icon: Element, tag: string } - const tabs = [{ label: '配置', icon: , tag: 'setting' }, { label: '知识库', icon: , tag: 'file' }, { label: '搜索测试', icon: , tag: 'search' }] + const [activeKey, setActiveKey] = useState('file') + const [collapsed, setCollapsed] = useState(false); + const [windowWidth, setWindowWidth] = useState(getWidth()); - const onTabClick = (activeKey: keyType) => { - setActiveKey(activeKey) + // 标记一下 + useEffect(() => { + const widthSize = () => { + const width = getWidth() + console.log(width) + + setWindowWidth(width); + }; + window.addEventListener("resize", widthSize); + return () => { + window.removeEventListener("resize", widthSize); + }; + }, []); + useEffect(() => { + if (windowWidth.width > 957) { + setCollapsed(false) + } else { + setCollapsed(true) + } + }, [windowWidth.width]) + type MenuItem = Required['items'][number]; + + function getItem( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], + type?: 'group', + ): MenuItem { + return { + key, + icon, + children, + label, + type, + } as MenuItem; } - // type stringKey = Record - - const mapComponent = { - file: , - setting: , - search: + const items: MenuItem[] = [ + getItem('配置', 'setting', ), + getItem('知识库', 'file', ), + getItem('搜索测试', 'search', ), + ]; + const handleSelect: MenuProps['onSelect'] = (e) => { + setActiveKey(e.key) } return ( <> - | MouseEvent) => { onTabClick(activeKey) }} - className={styles.tab} - items={tabs.map((item) => { - return { - label: item.label, - icon: item.icon, - key: item.tag, - children: mapComponent[activeKey] as Element, - }; - })} - /> +
+
+ 957 ? styles.defaultWidth : styles.minWidth} + inlineCollapsed={collapsed} + items={items} + onSelect={handleSelect} + /> +
+
+ {activeKey === 'file' && } + {activeKey === 'setting' && } + {activeKey === 'search' && } +
+
); }; diff --git a/client/src/pages/knowledge/index.less b/client/src/pages/knowledge/index.less index 45da6f445..f0089fbed 100644 --- a/client/src/pages/knowledge/index.less +++ b/client/src/pages/knowledge/index.less @@ -1,3 +1,7 @@ +.knowledge { + padding: 24px; +} + .container { height: 100px; display: flex; @@ -28,6 +32,8 @@ padding: 10px; margin: 0; } + + margin-bottom: 10px; } diff --git a/client/src/pages/knowledge/index.tsx b/client/src/pages/knowledge/index.tsx index 69363330e..c68236e87 100644 --- a/client/src/pages/knowledge/index.tsx +++ b/client/src/pages/knowledge/index.tsx @@ -1,6 +1,6 @@ import React, { useState, } from 'react'; import { useNavigate } from 'umi' -import { Card, List, Popconfirm, message, FloatButton } from 'antd'; +import { Card, List, Popconfirm, message, FloatButton, Row, Col } from 'antd'; import { MinusSquareOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'; import styles from './index.less' @@ -41,47 +41,52 @@ const App: React.FC = () => { }; const handleAddKnowledge = () => { // setDatas((datas) => [...datas, ...dd]) - navigate('add'); + navigate('add/file'); } - return (<>} type="primary" style={{ right: 24, top: 100 }} /> - ( - - -
-
- - content - - - { confirm(index) }} - okText="Yes" - cancelText="No" - > - - - -
-
- - {item.text} - - - {item.des} - -
+ return (<> +
+ } type="primary" style={{ right: 24, top: 100 }} /> + + { + data.map((item, index) => { + return (
+ +
+
+ + content + + + { confirm(index) }} + okText="Yes" + cancelText="No" + > + + -
- - - )} - /> + +
+
+ + {item.text} + + + {item.des} + +
+ + + + ) + }) + } + + + ) }; diff --git a/client/src/pages/login/model.ts b/client/src/pages/login/model.ts index 05c1428ed..cd88d7ba9 100644 --- a/client/src/pages/login/model.ts +++ b/client/src/pages/login/model.ts @@ -1,5 +1,4 @@ import { message } from 'antd'; -import store from '@/utils/persistStore'; import { addParam } from '@/utils'; import loginService from '@/services/loginService'; diff --git a/client/src/utils/StorageManager.ts b/client/src/utils/StorageManager.ts index 83614ab7d..423cd808f 100644 --- a/client/src/utils/StorageManager.ts +++ b/client/src/utils/StorageManager.ts @@ -2,32 +2,7 @@ import { debounce } from 'lodash'; import semver from 'semver'; import merge from 'lodash/merge'; import isPlainObject from 'lodash/isPlainObject'; -/** - * 统一localStorage存储管理器 - * - * 参数说明: - * lazy: boolean 是否懒加载，未开启懒加载在初始化时就读取localstorage，开启懒加载将在第一次获取或设置值时读取localstorage - * namespace: string localstorage的key，定义多个manager时区分 - * version: string 'x.x.x'格式，采用语义化版本控制，用于重置用户设备中的localstorage - * - * 使用说明: - * 创建一个初始结构，可用来初始化用户存储，或者重置用户存储, 格式类似于redux里的state - * const store = { - * token: '', - * }; - * - * 创建manager对象, 此处传入version便于标明版本号，方便后续升级重置用户数据 - * const manager = new StorageManager(store, { version: '0.0.0' }); - * - * 直接设置属性，将存入localstorage, 多次设置只会存入最后的值，此处使用debounce减少io操作 - * manager.token = '123456' - * manager.token = '123' - * manager.token = '456' - * - * 直接读取值，获取到的的localstorage中的值 - * console.log(manager.token) - * - */ + class StorageManager { constructor(store, options) { options = Object.assign( diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts index ffdf0445d..25e21f68d 100644 --- a/client/src/utils/index.ts +++ b/client/src/utils/index.ts @@ -147,9 +147,13 @@ export const formatRequestUrlByDomainPrefix = url => { } return `${prefix}${url}`; }; +export const getWidth = () => { + return { width: window.innerWidth }; +}; export default { parseQuery, downloadWithIframe, - formatRequestUrlByDomainPrefix + formatRequestUrlByDomainPrefix, + getWidth };