知识库列表

package.json

@@ -12,7 +12,7 @@
     "build:prod": "vite build --mode production"
   },
   "dependencies": {
-    "antd": "^5.22.0",
+    "antd": "^5.23.0",
     "axios": "^1.7.0",
     "dayjs": "^1.11.0",
     "mobx": "^6.13.0",
@@ -28,6 +28,6 @@
     "@vitejs/plugin-react": "^4.3.0",
     "less": "^4.2.0",
     "typescript": "^5.7.0",
-    "vite": "6.0.0"
+    "vite": "6.1.0"
   }
 }

src/App.tsx

@@ -53,7 +53,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> = (props: ConfigProviderProp
                 },
                 components: {
                     Table: {
-                        headerBg: '#F4F5FA',
+                        headerBg: '#F7F8FA',
                         headerSplitColor: 'transparent',
                     },
                 },

src/LocalStorage.ts

@@ -30,11 +30,11 @@ class LocalStorage {
 
     // 获取账号密码
     getAccountPassword = () => {
-        const accountPasswordString = localStorage.getItem('accountPassword');
+        const infoString = localStorage.getItem('accountPassword');
 
-        if (accountPasswordString) {
-            const accountPassword: AccountPassword = JSON.parse(accountPasswordString);
-            return accountPassword;
+        if (infoString) {
+            const info: AccountPassword = JSON.parse(infoString);
+            return info;
         } else {
             return undefined;
         }
@@ -45,7 +45,7 @@ class LocalStorage {
         const token = localStorage.getItem('token');
 
         if (token) {
-            return token;
+            return token as string;
         } else {
             this.clear();
             return undefined;

src/apis/index.ts

@@ -6,9 +6,16 @@ export type LoginApiParams = {
     password: string,
 };
 
+export type FetchKnowledgeLibListApiParams = {
+    pageNumber: number,
+    pageSize: number,
+};
+
 // Api函数类型
 export type LoginApi = (data: LoginApiParams) => Promise<any>;
 export type LogoutApi = () => Promise<any>;
+export type FetchKnowledgeLibListApi = (data: FetchKnowledgeLibListApiParams) => Promise<any>;
+export type DeleteKnowledgeLibApi = (knowledgeId: string) => Promise<any>;
 
 // 登录
 const loginApi: LoginApi = async (data) => {
@@ -20,7 +27,19 @@ const logoutApi: LogoutApi = async () => {
     return api.post('/logout', {});
 };
 
+// 获取知识库列表
+const fetchKnowledgeLibListApi: FetchKnowledgeLibListApi = async (data) => {
+    return api.post('bigmodel/api/knowledgeList', data);
+};
+
+// 删除知识库
+const deleteKnowledgeLibApi: DeleteKnowledgeLibApi = async (knowledgeId) => {
+    return api.delete(`bigmodel/api/delKnowledge/${knowledgeId}`);
+};
+
 export const apis = {
     login: loginApi,
     logout: logoutApi,
+    fetchKnowledgeLibList: fetchKnowledgeLibListApi,
+    deleteKnowledgeLib: deleteKnowledgeLibApi,
 };

src/pages/knowledgeLib/info/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import store from './store';
 import './style.less';
@@ -13,8 +14,11 @@ const KnowledgeLibInfo: React.FC = () => {
         pageLoading
     } = state;
 
+    const location = useLocation();
+
     React.useEffect(() => {
-        init();
+        const { knowledgeId } = location.state;
+        init(knowledgeId);
         return () => reset();
     }, []);
 

src/pages/knowledgeLib/info/store.ts

@@ -26,12 +26,12 @@ const useKnowledgeLibInfoStore = (): KnowledgeLibInfoStore => {
     }
 
     // 初始渲染
-    const init = () => {
-
+    const init: KnowledgeLibInfoStore['init'] = (knowledgeId) => {
+        console.log(knowledgeId, 'knowledgeId');
     }
 
     // 状态重置
-    const reset = () => {
+    const reset: KnowledgeLibInfoStore['reset'] = () => {
         const initialPageLoading = stateGenerator().pageLoading;
 
         actions.setPageLoading(initialPageLoading);

src/pages/knowledgeLib/info/types.ts

@@ -14,6 +14,6 @@ export type StateAction = {
 // 仓库类型
 export type KnowledgeLibInfoStore = {
     state: ReadonlyState,
-    init: () => void,
+    init: (knowledgeId?: string) => void,
     reset: () => void,
 };

src/pages/knowledgeLib/list/index.tsx

@@ -1,16 +1,25 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
+import { Button, Table, TableColumnsType, Modal, TablePaginationConfig } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import router from '@/router';
+import dayjs from 'dayjs';
 import store from './store';
+import { Record } from './types';
 import './style.less';
 
 const KnowledgeLibList: React.FC = () => {
     const {
         state,
+        onChangePagination,
+        onClickDelete,
         init,
         reset
     } = store;
     const {
-        pageLoading
+        listLoading,
+        list,
+        page
     } = state;
 
     React.useEffect(() => {
@@ -18,9 +27,143 @@ const KnowledgeLibList: React.FC = () => {
         return () => reset();
     }, []);
 
+    const columns: TableColumnsType<Record> = [
+        {
+            title: '序号',
+            dataIndex: 'index',
+            width: 80,
+            render: (text, record, index) => {
+                return index + 1;
+            }
+        },
+        {
+            title: 'ID',
+            dataIndex: 'id',
+        },
+        {
+            title: '知识库名称',
+            dataIndex: 'name',
+        },
+        {
+            title: '使用空间',
+            dataIndex: 'length',
+            render: (text) => {
+                const size = (text / 1024).toFixed(2);
+                return `${size}M`;
+            }
+        },
+        {
+            title: '字符数量',
+            dataIndex: 'word_num',
+            render: (text) => {
+                return `${text}字`;
+            }
+        },
+        {
+            title: '文件数量',
+            dataIndex: 'document_size',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: 200,
+            render: (text) => {
+                if (text) {
+                    return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+                } else {
+                    return '--';
+                }
+            }
+        },
+        {
+            title: '更新时间',
+            dataIndex: 'updateTime',
+            width: 200,
+            render: (text) => {
+                if (text) {
+                    return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+                } else {
+                    return '--';
+                }
+            }
+        },
+        {
+            title: '操作',
+            dataIndex: 'operation',
+            width: 100,
+            fixed: 'right',
+            render: (text, record) => {
+                return (
+                    <>
+                        <a
+                            style={{ marginRight: 16 }}
+                            onClick={() => {
+                                router.navigate({ pathname: '/knowledgeLib/modify' }, { state: { knowledgeId: record.id } });
+                            }}
+                        >
+                            <EditOutlined />
+                        </a >
+                        <a
+                            className='text-error'
+                            onClick={() => {
+                                Modal.confirm({
+                                    title: '删除',
+                                    content: `确定删除知识库名称${record.name}吗？`,
+                                    okType: 'danger',
+                                    onOk: async () => {
+                                        await onClickDelete(record.id);
+                                    }
+                                });
+                            }}
+                        >
+                            <DeleteOutlined />
+                        </a>
+                    </>
+                )
+            }
+        }
+    ];
+
+    const paginationConfig: TablePaginationConfig = {
+        // 显示数据总量
+        showTotal: (total: number) => {
+            return `共 ${total} 条`;
+        },
+        // 展示分页条数切换
+        showSizeChanger: true,
+        // 指定每页显示条数
+        pageSizeOptions: ['10', '20', '50', '100'],
+        // 快速跳转至某页
+        showQuickJumper: true,
+        current: page.pageNumber,
+        pageSize: page.pageSize,
+        total: page.total,
+        onChange: async (page, pageSize) => {
+            await onChangePagination(page, pageSize);
+        },
+    };
+
     return (
         <div className='knowledgeLibList'>
-            知识库列表
+            <div className='knowledgeLibList-operation'>
+                <Button
+                    type='primary'
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                        router.navigate({ pathname: '/knowledgeLib/create' });
+                    }}
+                >
+                    创建知识库
+                </Button>
+            </div>
+            <Table
+                scroll={{ x: 'max-content' }}
+                rowKey={(record) => record.id}
+                loading={listLoading}
+                columns={columns}
+                dataSource={list}
+                pagination={paginationConfig}
+            />
         </div>
     );
 };

src/pages/knowledgeLib/list/store.ts

@@ -1,17 +1,30 @@
 import { makeAutoObservable } from 'mobx';
+import { message } from 'antd';
 import { apis } from '@/apis';
 import { State, ReadonlyState, StateAction, KnowledgeLibListStore } from './types';
 
 // 定义状态
 const stateGenerator = (): ReadonlyState => ({
-    pageLoading: false,
+    listLoading: false,
+    list: [],
+    page: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0,
+    },
 });
 
 // 修改状态
 const stateActionsGenerator = (state: State): StateAction => {
     return {
-        setPageLoading: (loading) => {
-            state.pageLoading = loading;
+        setListLoading: (loading) => {
+            state.listLoading = loading;
+        },
+        setList: (list) => {
+            state.list = list;
+        },
+        setPage: (page) => {
+            state.page = page;
         },
     };
 };
@@ -22,23 +35,77 @@ const useKnowledgeLibListStore = (): KnowledgeLibListStore => {
     const actions = stateActionsGenerator(state);
 
     const api = {
+        // 获取知识库列表
+        fetchKnowledgeLibList: async () => {
+            actions.setListLoading(true);
+            try {
+                const data = {
+                    pageNumber: state.page.pageNumber,
+                    pageSize: state.page.pageSize,
+                };
+                const res = await apis.fetchKnowledgeLibList(data);
+                actions.setList(res.data.list);
+                actions.setPage({
+                    ...state.page,
+                    total: res.data.total,
+                });
+            } catch (error: any) {
+                console.error(error);
+            } finally {
+                actions.setListLoading(false);
+            }
+        },
+        // 删除知识库
+        deleteKnowledgeLib: async (knowledgeId: string) => {
+            try {
+                await apis.deleteKnowledgeLib(knowledgeId);
+                // 获取知识库列表
+                await api.fetchKnowledgeLibList();
+                message.success('删除成功');
+            } catch (error: any) {
+                message.error(error.msg);
+            }
+        },
+    }
 
+    // 更改分页
+    const onChangePagination: KnowledgeLibListStore['onChangePagination'] = async (pageNumber, pageSize) => {
+        actions.setPage({
+            ...state.page,
+            pageNumber: pageNumber,
+            pageSize: pageSize,
+        });
+        // 获取知识库列表
+        await api.fetchKnowledgeLibList();
     }
 
-    // 初始渲染
-    const init = () => {
+    // 点击删除
+    const onClickDelete: KnowledgeLibListStore['onClickDelete'] = async (knowledgeId) => {
+        // 删除知识库
+        await api.deleteKnowledgeLib(knowledgeId);
+    }
 
+    // 初始渲染
+    const init: KnowledgeLibListStore['init'] = async () => {
+        // 获取知识库列表
+        await api.fetchKnowledgeLibList();
     }
 
     // 状态重置
-    const reset = () => {
-        const initialPageLoading = stateGenerator().pageLoading;
+    const reset: KnowledgeLibListStore['reset'] = () => {
+        const initialListLoading = stateGenerator().listLoading;
+        const initialList = stateGenerator().list;
+        const initialPage = stateGenerator().page;
 
-        actions.setPageLoading(initialPageLoading);
+        actions.setListLoading(initialListLoading);
+        actions.setList(initialList);
+        actions.setPage(initialPage);
     }
 
     return {
         state,
+        onChangePagination,
+        onClickDelete,
         init,
         reset
     };

src/pages/knowledgeLib/list/style.less

@@ -1,6 +1,12 @@
 .knowledgeLibList {
   width: 100%;
   height: 100%;
+  padding: 20px;
   background: #FFFFFF;
   border-radius: @border-radius-base;
+  overflow-y: auto;
+
+  &-operation {
+    margin-bottom: 20px;
+  }
 }

src/pages/knowledgeLib/list/types.ts

@@ -1,6 +1,22 @@
+export type Record = {
+    id: string,
+    name: string,// 知识库名称
+    length: number,// 使用空间
+    word_num: number,// 字符数量
+    document_size: number,// 文件数量
+    createTime: string,// 创建时间
+    updateTime: string,// 更新时间
+};
+
 // 定义状态
 export type State = {
-    pageLoading: boolean,
+    listLoading: boolean,
+    list: Record[],
+    page: {
+        pageNumber: number,
+        pageSize: number,
+        total: number,
+    },
 };
 
 // 只读状态
@@ -8,12 +24,16 @@ export type ReadonlyState = Readonly<State>;
 
 // 修改状态
 export type StateAction = {
-    setPageLoading: (loading: boolean) => void,
+    setListLoading: (loading: State['listLoading']) => void,
+    setList: (list: State['list']) => void,
+    setPage: (page: State['page']) => void,
 };
 
 // 仓库类型
 export type KnowledgeLibListStore = {
     state: ReadonlyState,
-    init: () => void,
+    onChangePagination: (pageNumber: number, pageSize: number) => Promise<any>,
+    onClickDelete: (knowledgeId: string) => Promise<any>,
+    init: () => Promise<any>,
     reset: () => void,
 };

src/pages/layout/store.ts

@@ -44,7 +44,7 @@ const useLayoutStore = (): LayoutStore => {
         // 退出登录
         logout: async () => {
             try {
-                // await layoutApis.logout();
+                await apis.logout();
                 LocalStorage.clear();
                 router.navigate({ pathname: '/login' }, { replace: true });
                 message.success('退出成功');

src/pages/login/components/Copyright.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 
 const Copyright: React.FC = () => {
 	// 公司名称
-	const companyName = '上海建科';
+	const companyName = '上海高井信息技术有限公司';
 
 	// 今年
 	const currentYear = dayjs().format('YYYY');

src/style/global.less

@@ -51,6 +51,26 @@ ul li {
     list-style-type: none;
 }
 
+.text-primary,
+.text-primary:hover {
+    color: @primary-color;
+}
+
+.text-success,
+.text-success:hover {
+    color: @success-color;
+}
+
+.text-warning,
+.text-warning:hover {
+    color: @warning-color;
+}
+
+.text-error,
+.text-error:hover {
+    color: @error-color;
+}
+
 .router-lazyLoad {
     position: absolute;
     top: 50%;