修改路由面包屑

src/pages/takai/knowledgeLib/detail/index.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import store from './store';
-import './style.less';
+
 import { Button, Table, TableColumnsType, Modal, TablePaginationConfig, Upload, UploadProps, message, Spin } from 'antd';
-import { EditOutlined, DeleteOutlined, InboxOutlined, PlusOutlined, FileOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, InboxOutlined, PlusOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import InfoModal from './components/InfoModal';
 import InfoModalSetting from './components/InfoModalSetting';
 import router from '@/router';
-
-import { Record, RecordKonwledge } from './types';
+import { Record } from './types';
 import dayjs from 'dayjs';
-import { set } from 'mobx';
 import axios from 'axios';
 import LocalStorage from '@/LocalStorage';
-import { apis, ModifyDocumentApiParams } from '@/apis';
+import store from './store';
+import './style.less';
 
 const { Dragger } = Upload;
 
@@ -264,10 +262,17 @@ const KnowledgeLibInfo: React.FC = () => {
                 return (
                     <>
                         {createFlag &&
-                            <a style={{ marginRight: 16 }}
+                            <a
+                                style={{ marginRight: 16 }}
                                 onClick={() => {
-                                    router.navigate({ pathname: '/deepseek/knowledgeLib/slice/' + record.documentId + '/' + params.knowledgeId + '/' + state.knowledgeDetail.embeddingId });
-                                }}>
+                                    const path = generatePath('/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId', {
+                                        knowledgeId: params.knowledgeId as string,
+                                        documentId: record.documentId,
+                                        embeddingId: state.knowledgeDetail.embeddingId,
+                                    });
+                                    router.navigate({ pathname: path });
+                                }}
+                            >
                                 切片
                             </a>
                         }
@@ -339,55 +344,59 @@ const KnowledgeLibInfo: React.FC = () => {
     return (
         <div className='knowledgeLibInfo'>
             <Spin spinning={uploadLoading || listLoading}>
-                <div className='knowledgeLibList-operation'>
-                    {
-                        page.total === 0 &&
-                        <>
-                            <div>
-                                <Button type='primary' icon={<ArrowLeftOutlined />} onClick={() => {
-                                    router.navigate(-1);
-                                }}>返回</Button>
+                {
+                    page.total === 0 &&
+                    <div className='knowledgeLibInfo-operation'>
+                        <div>
+                            <Button
+                                type='primary'
+                                icon={<ArrowLeftOutlined />}
+                                onClick={() => {
+                                    router.navigate({ pathname: '/deepseek/knowledgeLib' });
+                                }}
+                            >
+                                返回
+                            </Button>
+                        </div>
+                        {
+                            createFlag &&
+                            <div style={{ marginTop: 20, width: '100%', height: '200px' }}>
+                                <Dragger {...props}>
+                                    <p className="ant-upload-drag-icon">
+                                        <InboxOutlined />
+                                    </p>
+                                    <p >
+                                        点击上传,或拖放文件到此处
+                                    </p >
+                                    <p className="ant-upload-hint">
+                                        支持文件格式md,txt,pdf,jpg,png,jpeg,docx,xlsx,
+                                        pptx,eml,csv,单个文档小雨30M,单张图片小于5M,文件总
+                                        大小不得超过125M.
+                                    </p>
+                                </Dragger>
                             </div>
-                            {
-                                createFlag &&
-                                <div style={{ marginTop: 20, width: '100%', height: '200px' }}>
-                                    <Dragger {...props}>
-                                        <p className="ant-upload-drag-icon">
-                                            <InboxOutlined />
-                                        </p>
-                                        <p >
-                                            点击上传,或拖放文件到此处
-                                        </p >
-                                        <p className="ant-upload-hint">
-                                            支持文件格式md,txt,pdf,jpg,png,jpeg,docx,xlsx,
-                                            pptx,eml,csv,单个文档小雨30M,单张图片小于5M,文件总
-                                            大小不得超过125M.
-                                        </p>
-                                    </Dragger>
-                                </div>
-                            }
-                        </>
-                    }
-                </div>
+                        }
+                    </div>
+                }
                 {
                     page.total > 0 &&
                     <>
-                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                            <div>
-                                <Button type='primary' icon={<ArrowLeftOutlined />} onClick={() => {
-                                    router.navigate(-1);
-                                }}>返回</Button>
-                            </div>
+                        <div className='knowledgeLibInfo-operation'>
+                            <Button
+                                style={{ marginRight: 16 }}
+                                type='primary'
+                                icon={<ArrowLeftOutlined />} onClick={() => {
+                                    router.navigate({ pathname: '/deepseek/knowledgeLib' });
+                                }}>
+                                返回
+                            </Button>
                             {
                                 createFlag &&
-                                <div>
-                                    <Upload {...props}>
-                                        <Button type='primary' icon={<PlusOutlined />}>上传知识文件</Button>
-                                    </Upload>
-                                </div>
+                                <Upload {...props}>
+                                    <Button type='primary' icon={<PlusOutlined />}>上传知识文件</Button>
+                                </Upload>
                             }
                         </div>
-
                         <Table
                             scroll={{ x: 'max-content' }}
                             rowKey={(record) => record.documentId}

src/pages/takai/knowledgeLib/detail/style.less

@@ -3,4 +3,10 @@
   height: 100%;
   background: #FFFFFF;
   border-radius: @border-radius-base;
+
+  &-operation {
+    padding: 20px;
+    background: #FFFFFF;
+    border-radius: @border-radius-base;
+  }
 }

src/pages/takai/knowledgeLib/slice/detail/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { useParams } from 'react-router-dom';
+import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { Form, Input, Button, message } from 'antd';
 import { apis } from '@/apis';
 import router from '@/router';
@@ -15,12 +15,14 @@ interface TakaiSliceDetailRequest {
     sliceId: string,
     sliceText: string,
 }
+
 const SliceDetail: React.FC = () => {
 
     const [form] = Form.useForm();
 
     const params = useParams();
-
+    const location = useLocation();
+    const { text, page } = location.state;
     const [listLoading, setListLoading] = React.useState(false);
 
     const appApi = {
@@ -47,7 +49,7 @@ const SliceDetail: React.FC = () => {
     };
 
     const init = async () => {
-        if (params.sliceId) {
+        if (params.sliceId && params.sliceId !== 'new') {
             await appApi.fetchList();
         }
     }
@@ -56,6 +58,8 @@ const SliceDetail: React.FC = () => {
         init();
     }, [])
 
+    const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+
     return (
         <div>
             <div className='questionAnswerList'>
@@ -69,6 +73,7 @@ const SliceDetail: React.FC = () => {
                             name="slice_text"
                             rules={[{ required: true, message: '切片内容不能为空' }]}>
                             <TextArea
+                                ref={textAreaRef}
                                 style={{
                                     width: '50%',
                                     height: '200px',
@@ -81,11 +86,50 @@ const SliceDetail: React.FC = () => {
                                 autoSize={{ minRows: 20, maxRows: 5000 }}
                             />
                         </FormItem>
-                        <Button type='primary' icon={<ArrowLeftOutlined />} onClick={() => {
-                            router.navigate(-1);
-                        }}>返回</Button>
                         <Button
-                            style={{ marginLeft: '10px' }}
+                            type='primary'
+                            onClick={() => {
+                                const textToInsert = '插入成功';
+                                const textarea = textAreaRef.current;
+
+                                if (!textarea) return;
+
+                                const start = textarea.selectionStart;
+                                const end = textarea.selectionEnd;
+                                const value = textarea.value;
+
+                                // 插入文本到光标位置
+                                textarea.value = value.substring(0, start) + textToInsert + value.substring(end);
+
+                                // 设置新的光标位置（插入后的位置）
+                                textarea.selectionStart = textarea.selectionEnd = start + textToInsert.length;
+
+                                // 触发 change 事件以便 Form 可以更新
+                                const event = new Event('input', { bubbles: true });
+                                textarea.dispatchEvent(event);
+                                form.setFieldsValue({
+                                    slice_text: textarea.value,
+                                });
+                            }}
+                        >
+                            解析图片
+                        </Button>
+                        <Button
+                            style={{ margin: '0 16px' }}
+                            type='primary'
+                            icon={<ArrowLeftOutlined />}
+                            onClick={() => {
+                                const path = generatePath('/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId', {
+                                    knowledgeId: params.knowledgeId as string,
+                                    documentId: params.documentId as string,
+                                    embeddingId: params.embeddingId as string,
+                                });
+                                router.navigate({ pathname: path }, { state: { text: text, page } });
+                            }}
+                        >
+                            返回
+                        </Button>
+                        <Button
                             type='primary'
                             onClick={() => {
                                 form.validateFields().then(async (values) => {
@@ -101,44 +145,39 @@ const SliceDetail: React.FC = () => {
                                         sliceText: values.slice_text,
                                         documentId: params.documentId,
                                     };
-                                    console.log(params.sliceId, 'params.sliceId');
                                     let res = null;
                                     if (params.sliceId && params.sliceId !== 'null') {
-                                        console.log('11111111');
                                         // 编辑应用
-                                        res = await apis.modifyTakaiSliceInfo(info);
+                                        res = await apis.modifyTakaiSliceInfo(info as any);
                                     } else {
-                                        console.log('2222222');
-                                        res = await apis.addTakaiSlice(info);
+                                        res = await apis.addTakaiSlice(info as any);
                                     }
                                     if (res.code === 200 && res.data === 1) {
-                                        if(params.sliceId && params.sliceId !== 'null'){
+                                        if (params.sliceId && params.sliceId !== 'null') {
                                             message.success('修改成功');
-                                        }else{
+                                        } else {
                                             message.success('新增成功');
                                         }
-                                    }else{
-                                        if(params.sliceId && params.sliceId !== 'null'){
+                                    } else {
+                                        if (params.sliceId && params.sliceId !== 'null') {
                                             message.error('修改失败');
-                                        }else{
+                                        } else {
                                             message.error('新增失败');
                                         }
                                     }
-                                    const pageInfo = {
-                                        knowledge_id: params.knowledgeId,
-                                        document_id: params.documentId,
-                                        text: '',
-                                        pageNum: 1,
-                                        pageSize: 10,
-                                    }
-                                    // 刷新列表
-                                    await router.navigate({ pathname: '/deepseek/knowledgeLib/slice/' + params.documentId + '/' + params.knowledgeId + '/' + params.embeddingId });
-
+                                    const path = generatePath('/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId', {
+                                        knowledgeId: params.knowledgeId as string,
+                                        documentId: params.documentId as string,
+                                        embeddingId: params.embeddingId as string,
+                                    });
+                                    router.navigate({ pathname: path }, { state: { text: text, page } });
                                 }).catch((error) => {
                                     console.error(error);
                                 });
                             }}
-                        >保存</Button>
+                        >
+                            保存
+                        </Button>
                     </Form>
                 </div>
             </div>

src/pages/takai/knowledgeLib/slice/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { useParams } from 'react-router-dom';
+import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { List, Button, Divider, Empty, Modal, Form, Input, message } from 'antd';
 import { SettingOutlined, DeleteOutlined, ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
 import { apis } from '@/apis';
@@ -29,6 +29,7 @@ const SliceList: React.FC = () => {
         total: number,
     };
 
+    const location = useLocation();
     const [listLoading, setListLoading] = React.useState(false);
     const [list, setList] = React.useState<Item[]>([]);
     const [page, setPage] = React.useState<PageInfo>({
@@ -53,7 +54,6 @@ const SliceList: React.FC = () => {
                     pageSize: page.pageSize,
                     pageNum: page.pageNum
                 })
-                console.log('fetchTakaiSliceList', res);
                 const list = res.rows.map((item: any) => {
                     return {
                         slice_id: item.sliceId,
@@ -74,7 +74,6 @@ const SliceList: React.FC = () => {
                 setListLoading(false);
             }
         },
-
     };
 
     const handleClickSearch = () => {
@@ -102,8 +101,23 @@ const SliceList: React.FC = () => {
     }
 
     const init = async () => {
-        console.log('params', params.knowledgeId);
-        await appApi.fetchList({ searchText: '' });
+        if (location.state) {
+            const { text, page } = location.state;
+            if (text) {
+                form.setFieldsValue({
+                    text: text,
+                });
+            }
+            if (page && page.pageNum && page.pageSize) {
+                setPage(page);
+            }
+        }
+
+        const values = form.getFieldsValue();
+
+        const searchText = values.text ? values.text : '';
+
+        await appApi.fetchList({ searchText: searchText });
     }
 
     React.useEffect(() => {
@@ -116,7 +130,7 @@ const SliceList: React.FC = () => {
         setUpdateFlag(tFlag);
         const lFlag = LocalStorage.getStatusFlag('deepseek:slice:list');
         setListFlag(lFlag);
-    }, [page.pageSize, page.pageNum])
+    }, [])
 
     const paginationConfig: PaginationConfig = {
         // 显示数据总量
@@ -126,24 +140,27 @@ const SliceList: React.FC = () => {
         // 展示分页条数切换
         showSizeChanger: true,
         // 指定每页显示条数
-        // pageSizeOptions: ['2', '20', '50', '100'],
+        pageSizeOptions: ['10', '20', '50', '100'],
         // 快速跳转至某页
         showQuickJumper: true,
         current: page.pageNum,
         pageSize: page.pageSize,
         total: page.total,
-        onChange: (pageNum, pageSize) => {
+        onChange: async (pageNum, pageSize) => {
             setPage({
                 pageNum: pageNum,
                 pageSize: pageSize,
                 total: page.total,
             });
+            const values = form.getFieldsValue();
+            const searchText = values.text ? values.text : '';
+            await appApi.fetchList({ searchText: searchText });
         },
     };
 
     return (
         <div>
-            <div className='dataExport-search'>
+            <div className='slice-search'>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Form form={form} layout='inline' colon={false}>
                         <FormItem label='切片' name='text'>
@@ -162,21 +179,34 @@ const SliceList: React.FC = () => {
                             </Button>
                         </FormItem>
                     </Form>
-
-                    <div >
+                    <div>
                         {
                             createFlag &&
-                            <Button style={{ marginRight: 16 }} type='primary' icon={<PlusOutlined />} onClick={() => {
-                                router.navigate({
-                                    pathname: '/deepseek/knowledgeLib/slice/detail/' + null + '/' + params.knowledgeId + '/' + params.documentId + '/'
-                                        + params.embeddingId
-                                });
-                            }}>新增切片</Button>
+                            <Button
+                                style={{ marginRight: 16 }}
+                                type='primary'
+                                icon={<PlusOutlined />}
+                                onClick={() => {
+                                    const path = generatePath('/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId/:sliceId', {
+                                        knowledgeId: params.knowledgeId as string,
+                                        documentId: params.documentId as string,
+                                        embeddingId: params.embeddingId as string,
+                                        sliceId: 'new',
+                                    });
+                                    const { text } = form.getFieldsValue();
+                                    router.navigate({ pathname: path }, { state: { text: text, page } });
+                                }}>
+                                新增切片
+                            </Button>
                         }
-
                         <Button type='primary' icon={<ArrowLeftOutlined />} onClick={() => {
-                            router.navigate(-1);
-                        }}>返回</Button>
+                            const path = generatePath('/deepseek/knowledgeLib/:knowledgeId', {
+                                knowledgeId: params.knowledgeId as string,
+                            });
+                            router.navigate({ pathname: path });
+                        }}>
+                            返回
+                        </Button>
                     </div>
                 </div>
             </div>
@@ -186,7 +216,9 @@ const SliceList: React.FC = () => {
                     <div className='questionAnswerList'>
 
                         <div className='applicationList'>
-                            <List style={{ height: 400 }}
+                            <List
+                                style={{ height: 400 }}
+                                loading={listLoading}
                                 grid={{
                                     gutter: 16,
                                     xs: 1,
@@ -212,12 +244,18 @@ const SliceList: React.FC = () => {
                                                 <div style={{ overflow: 'auto' }}>
                                                     {
                                                         updateFlag &&
-                                                        <a style={{ marginRight: 20 }} onClick={() => {
-                                                            router.navigate({
-                                                                pathname: '/deepseek/knowledgeLib/slice/detail/' + item.slice_id + '/' + params.knowledgeId + '/' + params.documentId + '/'
-                                                                    + params.embeddingId
-                                                            });
-                                                        }}>
+                                                        <a
+                                                            style={{ marginRight: 20 }}
+                                                            onClick={() => {
+                                                                const path = generatePath('/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId/:sliceId', {
+                                                                    knowledgeId: params.knowledgeId as string,
+                                                                    documentId: params.documentId as string,
+                                                                    embeddingId: params.embeddingId as string,
+                                                                    sliceId: item.slice_id,
+                                                                });
+                                                                const { text } = form.getFieldsValue();
+                                                                router.navigate({ pathname: path }, { state: { text: text, page } });
+                                                            }}>
                                                             <SettingOutlined /> 编辑
                                                         </a>
                                                     }

src/pages/takai/knowledgeLib/slice/style.less

@@ -3,6 +3,7 @@
   height: 100%;
   background: #FFFFFF;
   border-radius: @border-radius-base;
+  padding: 10px 20px;
 }
 
 .applicationList {
@@ -11,15 +12,16 @@
   padding-top: 10px;
 }
 
-.card{
+.card {
   padding: 20px;
   border: 1px solid @border-color;
   border-radius: @border-radius-base;
   height: 200px;
   overflow: auto;
 }
-.card:hover{
-  border-color:@primary-color ;
+
+.card:hover {
+  border-color: @primary-color ;
 }
 
 .desc {
@@ -30,4 +32,11 @@
 .info-head {
   width: 100%;
   height: 35%;
+}
+
+.slice-search {
+  padding: 20px 20px 4px;
+  background: #FFFFFF;
+  border-radius: @border-radius-base;
+  margin-bottom: 20px;
 }

src/router.tsx

@@ -30,7 +30,7 @@ const routerList: RouteObject[] = [
         children: [
             {
                 index: true,
-                element: LocalStorage.getStatusFlag('deepseek:application:list') ?  <Navigate to='/deepseek/questionAnswer' /> : <Navigate to='/404' />,
+                element: LocalStorage.getStatusFlag('deepseek:application:list') ? <Navigate to='/deepseek/questionAnswer' /> : <Navigate to='/404' />,
             },
             {   /* 问答应用 */
                 path: '/deepseek/questionAnswer',
@@ -78,24 +78,34 @@ const routerList: RouteObject[] = [
                             menuLevel: 1,
                             breadcrumbName: '知识库详情',
                         },
-                        element: lazyLoad(() => import('@/pages/takai/knowledgeLib/detail/index')),
+                        children: [
+                            {
+                                index: true,
+                                element: lazyLoad(() => import('@/pages/takai/knowledgeLib/detail/index'))
+                            },
+                            {   /* 知识库-知识库详情-切片信息 */
+                                path: '/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId',
+                                handle: {
+                                    menuLevel: 1,
+                                    breadcrumbName: '切片信息',
+                                },
+                                children: [
+                                    {
+                                        index: true,
+                                        element: lazyLoad(() => import('@/pages/takai/knowledgeLib/slice/index')),
+                                    },
+                                    {   /* 知识库-知识库详情-切片信息-切片详情 */
+                                        path: '/deepseek/knowledgeLib/:knowledgeId/slice/:documentId/:embeddingId/:sliceId',
+                                        handle: {
+                                            menuLevel: 1,
+                                            breadcrumbName: '切片详情',
+                                        },
+                                        element: lazyLoad(() => import('@/pages/takai/knowledgeLib/slice/detail/index')),
+                                    },
+                                ]
+                            },
+                        ]
                     },
-                    {   /* 知识库-知识-切片信息 */
-                        path: '/deepseek/knowledgeLib/slice/:documentId/:knowledgeId/:embeddingId',
-                        handle: {
-                            menuLevel: 1,
-                            breadcrumbName: '切片信息',
-                        },
-                        element: lazyLoad(() => import('@/pages/takai/knowledgeLib/slice/index')),
-                    },
-                    {   /* 知识库-知识-切片详情 */
-                        path: '/deepseek/knowledgeLib/slice/detail/:sliceId/:knowledgeId/:documentId/:embeddingId',
-                        handle: {
-                            menuLevel: 1,
-                            breadcrumbName: '切片详情',
-                        },
-                        element: lazyLoad(() => import('@/pages/takai/knowledgeLib/slice/detail/index')),
-                    }
                 ]
             },
             {   /* 数据导出 */