解析图片

src/apis/index.ts

@@ -456,7 +456,6 @@ const fetchTakaiProjectApi: FetchTakaiProjectApi = async () => {
     return api.get(`/system/project/alllist?pageNum=1&pageSize=1000`);
 };
 
-
 export const apis = {
     login: loginApi,
     logout: logoutApi,

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { generatePath, useLocation, useParams } from 'react-router-dom';
-import { Form, Input, Button, message } from 'antd';
+import { Form, Input, Button, message, Upload, UploadProps } from 'antd';
 import { apis } from '@/apis';
 import router from '@/router';
 import { ArrowLeftOutlined } from '@ant-design/icons';
+import config, { getHeaders } from '@/apis/config';
 
 const { TextArea } = Input;
 
@@ -58,7 +59,19 @@ const SliceDetail: React.FC = () => {
         init();
     }, [])
 
-    const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+    const [cursorEndPosition, setCursorEndPosition] = React.useState<number>(0);
+
+    // 上传图片配置
+    const uploadImageConfig: UploadProps = {
+        name: 'files',
+        action: config.baseURL + `/deepseek/api/uploadSliceImage/${params.knowledgeId}/${params.documentId}`,
+        method: 'POST',
+        headers: getHeaders(),
+        accept: ['.png', '.jpg', '.jpeg'].join(','),
+        multiple: true,
+        maxCount: 5,
+        showUploadList: false,
+    };
 
     return (
         <div>
@@ -73,7 +86,6 @@ const SliceDetail: React.FC = () => {
                             name="slice_text"
                             rules={[{ required: true, message: '切片内容不能为空' }]}>
                             <TextArea
-                                ref={textAreaRef}
                                 style={{
                                     width: '50%',
                                     height: '200px',
@@ -84,36 +96,53 @@ const SliceDetail: React.FC = () => {
                                 }}
                                 placeholder=""
                                 autoSize={{ minRows: 20, maxRows: 5000 }}
+                                onBlur={(e) => {
+                                    const target = e.target as HTMLTextAreaElement;
+                                    // 更新光标终点位置
+                                    setCursorEndPosition(target.selectionEnd);
+                                }}
                             />
                         </FormItem>
-                        <Button
-                            type='primary'
-                            onClick={() => {
-                                const textToInsert = '插入成功';
-                                const textarea = textAreaRef.current;
-
-                                if (!textarea) return;
+                        <Upload
+                            {...uploadImageConfig}
+                            onChange={(info) => {
+                                const insertToSliceText = (text: string) => {
+                                    const { slice_text } = form.getFieldsValue();
 
-                                const start = textarea.selectionStart;
-                                const end = textarea.selectionEnd;
-                                const value = textarea.value;
+                                    // 获取当前光标位置
+                                    const position = cursorEndPosition;
 
-                                // 插入文本到光标位置
-                                textarea.value = value.substring(0, start) + textToInsert + value.substring(end);
+                                    let newValue = '';
 
-                                // 设置新的光标位置（插入后的位置）
-                                textarea.selectionStart = textarea.selectionEnd = start + textToInsert.length;
+                                    if (!slice_text) {
+                                        newValue = text;
+                                    } else {
+                                        newValue = slice_text.slice(0, position) + text + slice_text.slice(position);
+                                    }
 
-                                // 触发 change 事件以便 Form 可以更新
-                                const event = new Event('input', { bubbles: true });
-                                textarea.dispatchEvent(event);
-                                form.setFieldsValue({
-                                    slice_text: textarea.value,
-                                });
+                                    form.setFieldsValue({ slice_text: newValue });
+                                }
+                                const file = info.file;
+                                if (file.status === 'done') {// 上传成功
+                                    const { code, msg, data } = file.response;
+                                    if (code === 200) {
+                                        const text = data.join('');
+                                        insertToSliceText(text);
+                                        message.success('上传成功');
+                                    } else {
+                                        message.error(msg);
+                                    }
+                                } else if (file.status === 'error') {// 上传失败
+                                    message.error('上传失败');
+                                }
                             }}
                         >
-                            解析图片
-                        </Button>
+                            <Button
+                                type='primary'
+                            >
+                                解析图片
+                            </Button>
+                        </Upload>
                         <Button
                             style={{ margin: '0 16px' }}
                             type='primary'