添加文本预览、创建文件功能，调整通用智能布局，添加提示

2025-05-08 14:16:39 +08:00 · 2025-05-08 14:16:39 +08:00 · f991a8033d
parent bc0c367884
commit f991a8033d
5 changed files with 141 additions and 3 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -35,6 +35,7 @@
 				"mermaid-it-markdown": "^1.0.8",
 				"nprogress": "^0.2.0",
 				"pinia": "^2.1.7",
+				"vditor": "^3.11.0",
 				"vue": "^3.4.5",
 				"vue-cropper": "1.1.1",
 				"vue-cropperjs": "^5.0.0",
@ -2287,6 +2288,11 @@
 				"node": ">=0.3.1"
 			}
 		},
+		"node_modules/diff-match-patch": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+			"integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+		},
 		"node_modules/dom7": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
@ -5222,6 +5228,17 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/vditor": {
+			"version": "3.11.0",
+			"resolved": "https://registry.npmjs.org/vditor/-/vditor-3.11.0.tgz",
+			"integrity": "sha512-UfucKF2wstR6w92RG8BOMjbfbE241qP9qIb5i5J64vHTVdWzkWhv6DFNsKe6THBiD+RKQdeQMorCW1uDgoHaMw==",
+			"dependencies": {
+				"diff-match-patch": "^1.0.5"
+			},
+			"funding": {
+				"url": "https://ld246.com/sponsor"
+			}
+		},
 		"node_modules/vite": {
 			"version": "3.2.10",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.10.tgz",
--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
 		"mermaid-it-markdown": "^1.0.8",
 		"nprogress": "^0.2.0",
 		"pinia": "^2.1.7",
+		"vditor": "^3.11.0",
 		"vue": "^3.4.5",
 		"vue-cropper": "1.1.1",
 		"vue-cropperjs": "^5.0.0",
--- a/src/api/tool.ts
+++ b/src/api/tool.ts
@ -59,4 +59,17 @@ export const GetDashBoardStatisticsService = (Data) => {
            'token': Data.token, 
        }
    })
+}
+
+export const SetMessageTextToDocService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    //let request1 = getRequest();
+    return request.post('/tool/text_to_docx', params,{
+        headers: {
+            'token': Data.token, 
+        }
+    })
 }
--- a/src/views/system/gen-chat.vue
+++ b/src/views/system/gen-chat.vue
@ -63,11 +63,26 @@
            <div v-html="renderMarkdown(message,index)"></div>
            <!-- 添加复制 -->
            <div>
+            <el-tooltip content="复制" placement="top">
              <el-button
                type="text"
                :icon="DocumentCopy"
                @click="copyMessage(message.content)"
              ></el-button>
+              </el-tooltip> 
+              <!-- <el-button
+                type="text"
+                :icon="Document"
+                @click="MessageTextToDoc(message.content)"
+                ></el-button> -->
+                <el-tooltip content="预览、文本创建文件" placement="top">
+                    <el-button
+                      type="text"
+                      :icon="Document"
+                      @click="MessageTextToDoc(message.content)"
+                    >
+                    </el-button>
+                </el-tooltip>
            </div>
          </div>
        </div>
@ -171,7 +186,7 @@

          </el-col>
          <el-col :span="3" style="text-align: center">
-            <el-select v-model="selectModel" placeholder="选择模型">
+            <el-select v-model="selectModel" placeholder="选择模型" style="width: 320px;">
              <el-option
                v-for="item in ModelList"
                :key="item.ID"
@ -180,10 +195,12 @@
              ></el-option>
            </el-select>
          </el-col>
-          <el-col :span="1" style="text-align: center">
+          <el-col :span="10" style="text-align: center">
+            <el-tooltip content="文件选择" placement="top">
            <el-button @click="handleSelectFileVisible"
              ><el-icon><Files /></el-icon
            ></el-button>
+            </el-tooltip>
          </el-col>
          <!-- <el-col :span="1" style="text-align: center">
            <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
@ -266,6 +283,33 @@
        <UploadFile></UploadFile>
      </el-dialog>
    </div>
+    <div>
+      <!-- 文本创建文件对话 -->
+      <el-dialog
+        title="文本创建文件"
+        v-model="textToDocFileVisible"
+        width="70%"
+        heigth="80vh"
+        :before-close="handleMessageTextToDOCClose">
+        <!-- <textarea v-model="textToDocFileContent"></textarea> -->
+        <div id="vditor"></div>
+        <el-col>
+          <!-- 提示 -->
+          <el-input v-model="textToDocFileName" placeholder="输入文件名..." style="width: 30%;">输入文件名</el-input>
+        </el-col>
+        <!-- <el-input v-model="textToDocFileName" placeholder="输入文件名..." width="30%">输入文件名</el-input> -->
+        <el-col>
+          <el-select v-model="selectFileDocType" placeholder="选择文本类型" style="width: 30%;">
+          <el-option label="docx" value="docx"></el-option>
+          <el-option label="txt" value="txt"></el-option>
+          <el-option label="md" value="md"></el-option>
+        </el-select>
+        </el-col>
+      
+       <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
+        <el-button @click="textToDocFileVisible = false">取消</el-button>
+      </el-dialog>
+    </div>
  </div>
 </template>

@ -279,8 +323,9 @@ import { Model } from "@/types/model";
 import { File, fileUrl } from "@/types/file";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
+import { SetMessageTextToDocService } from "@/api/tool";
 import { ElMessage } from "element-plus";
-import { Check, DocumentCopy } from "@element-plus/icons-vue";
+import { Check, DocumentCopy,Document } from "@element-plus/icons-vue";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
 import UploadFile from "@/components/upload-file.vue";
@ -289,6 +334,10 @@ import markdownItHighlightjs from "markdown-it-highlightjs";
 import markdownItKatex from "markdown-it-katex";
 import mermaidPlugin from "@agoose77/markdown-it-mermaid";
 import "katex/dist/katex.min.css";
+import Vditor from 'vditor'
+import 'vditor/dist/index.css';
+
+
 interface Message {
  role: "user" | "assistant";
  content: string;
@ -350,6 +399,13 @@ const selectFileVisible = ref(false); // 控制文件选择对话框的显示与
 const searchFileQuery = ref(""); // 用于搜索文件的查询条件
 const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
 const uploadFileVisible = ref(false); // 控制上传文件对话框的显示与隐藏
+const textToDocFileVisible = ref(false); // 控制文本创建文件对话框的显示与隐藏
+const selectFileDocType = ref("docx"); // 选择的文本类型
+const textToDocFileName = ref(""); // 文本创建文件的名称
+const textToDocFileContent = ref(""); // 文本创建文件的内容
+const vditor = ref(); // Vditor 实例
+
+
 const historyMsgHtml= ref([]); // 用于存储历史消息的HTML内容
 const wssUrl = 
    "wss://pm.ljsea.top/im/ai_chat_ws?" +
@ -401,6 +457,11 @@ const handleUploadFileClose = async () => {
  console.log("handleUploadFileClose:", uploadFileVisible.value);
 };

+const handleMessageTextToDOCClose = async () => {
+  textToDocFileVisible.value = false; // 关闭文本创建文件对话框
+};
+
+
 const handleUploadPicture = () => {
  // 处理上传图片的逻辑
  //选择图片并上传
@ -881,6 +942,20 @@ const getMessageWithFile = async (session_id: number) => {
 };


+const MessageTextToDoc = async (content: string) => {
+  
+  textToDocFileContent.value = content;
+  vditor.value = new Vditor('vditor', {
+    mode: 'sv',
+    height: '600px',
+    width: '100%',
+    cache: { enable: false },
+    value: textToDocFileContent.value,
+  });
+  textToDocFileVisible.value = true;
+};
+
+
 const copyMessage = (content: string) => {
  navigator.clipboard
    .writeText(content)
@ -925,6 +1000,26 @@ const getFileListData = async () => {
    ElMessage.error(result["msg"]);
  }
 };
+
+
+const HandleTextToDocFile = async () => {
+  // 处理文本创建文件的逻辑
+  //console.log("文本创建文件:", textToDocFileName.value, vditor.value.getValue(), selectFileDocType.value);
+  let req = {
+    token: localStorage.getItem("token"),
+    file_name: textToDocFileName.value,
+    text: vditor.value.getValue(),
+    file_type: selectFileDocType.value,
+  };
+  let result = await SetMessageTextToDocService(req);
+  if (result["code"] === 0) {
+    ElMessage.success("文件已加入创建队列，请等待一段时间后可在你的文件中查看!");
+    textToDocFileVisible.value = false;
+  } else {
+    ElMessage.error(result["msg"]);
+  }
+};
+
 </script>
 <style scoped>
 .chat-app {
--- a/yarn.lock
+++ b/yarn.lock
@ -1563,6 +1563,11 @@ dequal@^2.0.0:
  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==

+diff-match-patch@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff@^5.0.0:
  version "5.2.0"
  resolved "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz"
@ -3281,6 +3286,13 @@ uvu@^0.5.0:
    kleur "^4.0.3"
    sade "^1.7.3"

+vditor@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.npmjs.org/vditor/-/vditor-3.11.0.tgz"
+  integrity sha512-UfucKF2wstR6w92RG8BOMjbfbE241qP9qIb5i5J64vHTVdWzkWhv6DFNsKe6THBiD+RKQdeQMorCW1uDgoHaMw==
+  dependencies:
+    diff-match-patch "^1.0.5"
+
 vite-plugin-vue-setup-extend@^0.4.0:
  version "0.4.0"
  resolved "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz"