修复通用智能打开之后其它无法显示（应该只能有一个div）

src/types/im.ts

@@ -30,3 +30,27 @@ export interface OllamaRequest {
     context: number[];
 }
 
+// "ID": 488,
+// "CreatedAt": "2025-04-01T13:52:56.887+08:00",
+// "UpdatedAt": "2025-04-01T13:52:56.887+08:00",
+// "DeletedAt": null,
+// "Type": 3,
+// "SessionID": 178,
+// "FromID": 1,
+// "ToID": 11,
+// "Msg": "图片主要讲了什么",
+// "FunctionID": 2,
+// "Status": 3
+export interface GenMessage {
+    ID : number;
+    CreatedAt : string;
+    UpdatedAt : string;
+    DeletedAt : string;
+    Type : number;
+    SessionID : number;
+    FromID : number;
+    ToID : number;
+    Msg : string;
+    FunctionID : number;
+    Status : number;
+}

src/views/system/gen-chat.vue

@@ -81,14 +81,15 @@
             <el-input
               v-model="inputMessage"
               type="textarea"
+              style="border: 0"
               :rows="5"
               placeholder="输入消息..."
               @keyup.enter="sendMessage"
             />
-            <el-text
+            <!-- <el-text
               v-model="inputMessage"
               aria-placeholder="输入信息...."
-            ></el-text>
+            ></el-text> -->
           </el-col>
           <el-col :span="4" style="text-align: center">
             <el-button
@@ -101,49 +102,145 @@
             >
             <div>
               <p>模型参数</p>
-              <el-slider v-model="temperature" :min="0" :max="1" :step="0.1">temperature</el-slider>
-               <el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
+              <el-slider v-model="temperature" :min="0" :max="1" :step="0.1"
+                >temperature</el-slider
+              >
+              <el-slider
+                v-model="topP"
+                :min="0"
+                :max="1"
+                :step="0.1"
+              ></el-slider>
             </div>
-            
           </el-col>
           <el-col :span="3" style="text-align: center">
             <el-select v-model="selectModel" placeholder="选择模型">
               <el-option
                 v-for="item in ModelList"
                 :key="item.ID"
-                :label="item.Type +':' + item.Description"
+                :label="item.Type + ':' + item.Description"
                 :value="item.ID"
               ></el-option>
             </el-select>
           </el-col>
+          <el-col :span="1" style="text-align: center">
+            <el-button @click="handleSelectFileVisible"
+              ><el-icon><Files /></el-icon
+            ></el-button>
+          </el-col>
+          <!-- <el-col :span="1" style="text-align: center">
+            <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
+          </el-col>
+          <el-col :span="1" style="text-align: center">
+            <el-button><el-icon><VideoCamera /></el-icon></el-button>
+          </el-col> -->
+          <!-- 已选文件一行显示 -->
+          <el-col :span="12" style="text-align: center">
+            <el-tag
+              v-for="(file, index) in selectedFiles"
+              :key="index"
+              closable
+              @close="removeFile(index)"
+              >{{ file.UserFileName }}</el-tag
+            >
+          </el-col>
         </el-row>
       </el-card>
     </div>
+
+    <div>
+      <!-- 文件对话框 -->
+      <el-dialog
+        v-model="selectFileVisible"
+        title="从上传文件中选择"
+        width="50%"
+      >
+        <el-input
+          placeholder="搜索文件"
+          v-model="searchFileQuery"
+          prefix-icon="el-icon-search"
+        />
+        <el-button @click="uploadMessageFile">上传文件</el-button>
+        <!-- 文件列表 -->
+        <div class="file-list">
+          <el-checkbox-group v-model="selectedFiles">
+            <el-checkbox
+              v-for="(item, index) in filteredFiles"
+              :key="index"
+              :label="item"
+            >
+              <span class="file-icon">
+                <!-- 根据文件类型展示不同图标 -->
+                <i
+                  v-if="item.UploadType === 'image'"
+                  class="el-icon-picture"
+                ></i>
+                <i
+                  v-else-if="item.UploadType === 'file'"
+                  class="el-icon-document"
+                ></i>
+                <!-- 可继续补充其他文件类型图标 -->
+              </span>
+              {{ item.UserFileName }}
+              <!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <!-- 底部状态栏和按钮 -->
+        <div class="footer-bar">
+          <span class="selected-count"
+            >已选 {{ selectedFiles.length }} 个文件</span
+          >
+          <el-button @click="selectFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSelectFileConfirm"
+            >确认添加({{ selectedFiles.length }})</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+    <!-- 上传文件对话框 -->
+    <div>
+      <el-dialog
+        title="上传文件"
+        v-model="uploadFileVisible"
+        width="50%"
+        :before-close="handleUploadFileClose"
+      >
+        <UploadFile></UploadFile>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
-import { ElCard, ElInput, ElButton } from "element-plus";
-import { WSMessage} from "@/types/im";
-import { ElMessage } from "element-plus";
+import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
+import { WSMessage, GenMessage } from "@/types/im";
 import { GetMessageService } from "@/api/im";
-import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
-import MarkdownIt from "markdown-it";
-import hljs from "highlight.js";
+import { FindUserFileService } from "@/api/file";
+import { Model } from "@/types/model";
+import { File, fileUrl } from "@/types/file";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
+import { ElMessage } from "element-plus";
+import { Check, DocumentCopy } from "@element-plus/icons-vue";
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js";
+import UploadFile from "@/components/upload-file.vue";
 import { FindModelListByFunctionName } from "@/api/function";
 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 { Model } from "@/types/model";
 interface Message {
   role: "user" | "assistant";
   content: string;
   finished?: boolean;
 }
+interface ImageMessage {
+  img_url: string;
+  text: string;
+}
 
 const md = new MarkdownIt();
 md.use(markdownItHighlightjs, {
@@ -171,6 +268,11 @@ const ModelList = ref<Model[]>([]);
 const selectModel = ref(0);
 const temperature = ref(0.5);
 const topP = ref(0.9);
+const selectedFiles = ref<File[]>([]); // 用于存储已选文件
+const selectFileVisible = ref(false); // 控制文件选择对话框的显示与隐藏
+const searchFileQuery = ref(""); // 用于搜索文件的查询条件
+const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
+const uploadFileVisible = ref(false); // 控制上传文件对话框的显示与隐藏
 
 const renderMarkdown = (content: string) => {
   return md.render(content);
@@ -178,6 +280,7 @@ const renderMarkdown = (content: string) => {
 
 const scrollToBottom = () => {
   let x = document.getElementsByClassName("chat-messages")[0];
+  if (!x) return;
   x.scrollTop = x.scrollHeight; //将滚轮置底
 };
 
@@ -186,6 +289,41 @@ const copyCode = (code: string) => {
     ElMessage.success("代码已复制到剪贴板");
   });
 };
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1);
+};
+
+const handleSelectFileVisible = async () => {
+  await getFileListData(); // 获取文件列表
+  console.log("selectedFiles:", selectedFiles.value);
+  selectFileVisible.value = true; // 显示对话框
+  console.log("handleSelectFileVisible:", selectFileVisible.value);
+};
+
+const handleUploadFileClose = async () => {
+  uploadFileVisible.value = false; // 关闭上传文件对话框
+  await getFileListData(); // 获取文件列表
+  console.log("handleUploadFileClose:", uploadFileVisible.value);
+};
+
+const handleUploadPicture = () => {
+  // 处理上传图片的逻辑
+  //选择图片并上传
+};
+
+const uploadMessageFile = () => {
+  // 处理上传文件的逻辑
+  // 这里可以调用上传文件的API
+  uploadFileVisible.value = true; // 显示上传文件对话框
+  console.log("上传文件:", selectedFiles.value);
+};
+
+const handleSelectFileConfirm = () => {
+  // 处理选中的文件
+  console.log("选中的文件:", selectedFiles.value);
+  // 在这里可以进行文件上传或其他操作
+  selectFileVisible.value = false; // 关闭对话框
+};
 
 const doButtonD = () => {
   const codeBlocks = document.querySelectorAll("pre code");
@@ -314,6 +452,19 @@ const sendMessage = () => {
     temperature: temperature.value,
     top_p: topP.value,
   };
+  if (selectedFiles.value.length > 0) {
+    // 处理选中的文件
+    console.log("选中的文件:", selectedFiles.value);
+    let img_file: File = selectedFiles.value[0];
+    let img_msg: ImageMessage = {
+      img_url: fileUrl + img_file.file_store_name,
+      text: inputMessage.value,
+    };
+    let img_msg_str = JSON.stringify(img_msg);
+    msg["msg"] = img_msg_str;
+    msg["is_image"] = true;
+  }
+
   try {
     socket.value.send(JSON.stringify(msg));
   } catch (e) {
@@ -323,11 +474,19 @@ const sendMessage = () => {
   if (sessionID.value == 0) {
     sessionName.value = inputMessage.value;
   }
-  messages.push({ role: "user", content: inputMessage.value, finished: true });
+  let pMsgContent;
+  if (msg["is_image"]) {
+    let img_msg: ImageMessage = JSON.parse(msg["msg"]);
+    //解析成md格式
+    pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
+  } else {
+    pMsgContent = msg.msg;
+  }
+  messages.push({ role: "user", content: pMsgContent, finished: true });
   inputMessage.value = "";
   nextTick(() => {
-      scrollToBottom(); // 新增滚动调用
-    });
+    scrollToBottom(); // 新增滚动调用
+  });
   loading.value = true;
   if (sessionID.value == 0) {
     sessionName.value = msg.msg;
@@ -382,9 +541,18 @@ const getMessage = async (session_id: number) => {
       let data = result["data"];
       for (let i = 0; i < data.length; i++) {
         if (data[i]["Type"] === 3) {
+          let msg: GenMessage = data[i];
+          let pMsgContent;
+          if (msg.Status == 3) {
+            let img_msg: ImageMessage = JSON.parse(msg.Msg);
+            //解析成md格式
+            pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
+          } else {
+            pMsgContent = msg.Msg;
+          }
           messages.push({
             role: "user",
-            content: data[i]["Msg"],
+            content: pMsgContent,
             finished: true,
           });
         } else if (data[i]["Type"] === 4) {
@@ -419,7 +587,7 @@ const GetModelListByFunctionName = async () => {
     function: "gen-ai-chat",
     token: localStorage.getItem("token"),
   };
-  try{
+  try {
     let result = await FindModelListByFunctionName(req);
     if (result["code"] === 0) {
       ModelList.value = result["data"];
@@ -428,12 +596,25 @@ const GetModelListByFunctionName = async () => {
     } else {
       ElMessage.error(result["msg"]);
     }
-  }catch (e) {
+  } catch (e) {
     console.log(e);
   }
 };
 
 GetModelListByFunctionName();
+
+const getFileListData = async () => {
+  let req = {
+    token: localStorage.getItem("token"),
+    type: "all",
+  };
+  let result = await FindUserFileService(req);
+  if (result["code"] === 0) {
+    filteredFiles.value = result["data"];
+  } else {
+    ElMessage.error(result["msg"]);
+  }
+};
 </script>
 <style scoped>
 .chat-app {
@@ -596,4 +777,33 @@ GetModelListByFunctionName();
 .el-icon-copy {
   margin-right: 5px;
 }
+
+/* 对话框 */
+.file-list {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+.file-icon {
+  margin-right: 5px;
+  color: #606266;
+}
+.file-time {
+  float: right;
+  color: #909399;
+  font-size: 12px;
+}
+.footer-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.selected-count {
+  margin-right: 10px;
+}
+.el-icon-document {
+  color: #409eff;
+}
 </style>