ljydlv
/
sawAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
junleea 2025-04-01 16:07:25 +08:00
parent c46e36208f
commit 66f87c8d0e
1 changed files with 123 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
src/views/system/gen-chat.vue
View File

@ -81,7 +81,7 @@
<el-input <el-input
v-model="inputMessage" v-model="inputMessage"
type="textarea" type="textarea"
style="border: 0;" style="border: 0"
:rows="5" :rows="5"
placeholder="输入消息..." placeholder="输入消息..."
@keyup.enter="sendMessage" @keyup.enter="sendMessage"
@ -102,8 +102,15 @@
> >
<div> <div>
<p>模型参数</p> <p>模型参数</p>
<el-slider v-model="temperature" :min="0" :max="1" :step="0.1">temperature</el-slider> <el-slider v-model="temperature" :min="0" :max="1" :step="0.1"
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider> >temperature</el-slider
>
<el-slider
v-model="topP"
:min="0"
:max="1"
:step="0.1"
></el-slider>
</div> </div>
</el-col> </el-col>
<el-col :span="3" style="text-align: center"> <el-col :span="3" style="text-align: center">
@ -111,13 +118,15 @@
<el-option <el-option
v-for="item in ModelList" v-for="item in ModelList"
:key="item.ID" :key="item.ID"
:label="item.Type +':' + item.Description" :label="item.Type + ':' + item.Description"
:value="item.ID" :value="item.ID"
></el-option> ></el-option>
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="1" style="text-align: center"> <el-col :span="1" style="text-align: center">
<el-button @click="handleSelectFileVisible"><el-icon><Files /></el-icon></el-button> <el-button @click="handleSelectFileVisible"
><el-icon><Files /></el-icon
></el-button>
</el-col> </el-col>
<!-- <el-col :span="1" style="text-align: center"> <!-- <el-col :span="1" style="text-align: center">
<el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button> <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
@ -125,96 +134,110 @@
<el-col :span="1" style="text-align: center"> <el-col :span="1" style="text-align: center">
<el-button><el-icon><VideoCamera /></el-icon></el-button> <el-button><el-icon><VideoCamera /></el-icon></el-button>
</el-col> --> </el-col> -->
<!-- 已选文件一行显示 --> <!-- 已选文件一行显示 -->
<el-col :span="12" style="text-align: center"> <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-tag
</el-col> v-for="(file, index) in selectedFiles"
:key="index"
closable
@close="removeFile(index)"
>{{ file.UserFileName }}</el-tag
>
</el-col>
</el-row> </el-row>
</el-card> </el-card>
</div> </div>
</div>
<div> <div>
<!-- 文件对话框 --> <!-- 文件对话框 -->
<el-dialog <el-dialog
v-model="selectFileVisible" v-model="selectFileVisible"
title="从上传文件中选择" title="从上传文件中选择"
width="50%" 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"> <el-input
<!-- 根据文件类型展示不同图标 --> placeholder="搜索文件"
<i v-if="item.UploadType === 'image'" class="el-icon-picture"></i> v-model="searchFileQuery"
<i v-else-if="item.UploadType === 'file'" class="el-icon-document"></i> prefix-icon="el-icon-search"
<!-- 可继续补充其他文件类型图标 --> />
</span> <el-button @click="uploadMessageFile">上传文件</el-button>
{{ item.UserFileName }} <!-- 文件列表 -->
<!-- <span class="file-time">{{ item.CreatedAt }}</span> --> <div class="file-list">
</el-checkbox> <el-checkbox-group v-model="selectedFiles">
</el-checkbox-group> <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> </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>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue"; import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { ElCard, ElInput, ElButton,ElDialog } from "element-plus"; import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
import { WSMessage} from "@/types/im"; import { WSMessage, GenMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im"; import { GetMessageService } from "@/api/im";
import { FindUserFileService } from "@/api/file"; import { FindUserFileService } from "@/api/file";
import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue"; import { Model } from "@/types/model";
import MarkdownIt from "markdown-it"; import { File, fileUrl } from "@/types/file";
import hljs from "highlight.js";
import UploadFile from '@/components/upload-file.vue';
import { Session } from "@/types/session"; import { Session } from "@/types/session";
import { FindSessionService } from "@/api/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 { FindModelListByFunctionName } from "@/api/function";
import markdownItHighlightjs from "markdown-it-highlightjs"; import markdownItHighlightjs from "markdown-it-highlightjs";
import markdownItKatex from "markdown-it-katex"; import markdownItKatex from "markdown-it-katex";
import mermaidPlugin from "@agoose77/markdown-it-mermaid"; import mermaidPlugin from "@agoose77/markdown-it-mermaid";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import { Model } from "@/types/model";
import {File,fileUrl} from "@/types/file";
import {GenMessage} from "@/types/im";
interface Message { interface Message {
role: "user" | "assistant"; role: "user" | "assistant";
content: string; content: string;
finished?: boolean; finished?: boolean;
} }
interface ImageMessage{ interface ImageMessage {
img_url: string; img_url: string;
text: string; text: string;
} }
@ -273,11 +296,11 @@ const removeFile = (index: number) => {
const handleSelectFileVisible = async () => { const handleSelectFileVisible = async () => {
await getFileListData(); // 获取文件列表 await getFileListData(); // 获取文件列表
console.log("selectedFiles:", selectedFiles.value); console.log("selectedFiles:", selectedFiles.value);
selectFileVisible.value =true; // 显示对话框 selectFileVisible.value = true; // 显示对话框
console.log("handleSelectFileVisible:", selectFileVisible.value); console.log("handleSelectFileVisible:", selectFileVisible.value);
}; };
const handleUploadFileClose= async () => { const handleUploadFileClose = async () => {
uploadFileVisible.value = false; // 关闭上传文件对话框 uploadFileVisible.value = false; // 关闭上传文件对话框
await getFileListData(); // 获取文件列表 await getFileListData(); // 获取文件列表
console.log("handleUploadFileClose:", uploadFileVisible.value); console.log("handleUploadFileClose:", uploadFileVisible.value);
@ -286,7 +309,6 @@ const handleUploadFileClose= async () => {
const handleUploadPicture = () => { const handleUploadPicture = () => {
// 处理上传图片的逻辑 // 处理上传图片的逻辑
//选择图片并上传 //选择图片并上传
}; };
const uploadMessageFile = () => { const uploadMessageFile = () => {
@ -430,11 +452,11 @@ const sendMessage = () => {
temperature: temperature.value, temperature: temperature.value,
top_p: topP.value, top_p: topP.value,
}; };
if(selectedFiles.value.length > 0){ if (selectedFiles.value.length > 0) {
// 处理选中的文件 // 处理选中的文件
console.log("选中的文件:", selectedFiles.value); console.log("选中的文件:", selectedFiles.value);
let img_file:File = selectedFiles.value[0]; let img_file: File = selectedFiles.value[0];
let img_msg:ImageMessage = { let img_msg: ImageMessage = {
img_url: fileUrl + img_file.file_store_name, img_url: fileUrl + img_file.file_store_name,
text: inputMessage.value, text: inputMessage.value,
}; };
@ -442,7 +464,7 @@ const sendMessage = () => {
msg["msg"] = img_msg_str; msg["msg"] = img_msg_str;
msg["is_image"] = true; msg["is_image"] = true;
} }
try { try {
socket.value.send(JSON.stringify(msg)); socket.value.send(JSON.stringify(msg));
} catch (e) { } catch (e) {
@ -452,19 +474,19 @@ const sendMessage = () => {
if (sessionID.value == 0) { if (sessionID.value == 0) {
sessionName.value = inputMessage.value; sessionName.value = inputMessage.value;
} }
let pMsgContent let pMsgContent;
if(msg["is_image"]){ if (msg["is_image"]) {
let img_msg:ImageMessage = JSON.parse(msg["msg"]); let img_msg: ImageMessage = JSON.parse(msg["msg"]);
//解析成md格式 //解析成md格式
pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text; pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
}else{ } else {
pMsgContent = msg.msg; pMsgContent = msg.msg;
} }
messages.push({ role: "user", content: pMsgContent, finished: true }); messages.push({ role: "user", content: pMsgContent, finished: true });
inputMessage.value = ""; inputMessage.value = "";
nextTick(() => { nextTick(() => {
scrollToBottom(); // 新增滚动调用 scrollToBottom(); // 新增滚动调用
}); });
loading.value = true; loading.value = true;
if (sessionID.value == 0) { if (sessionID.value == 0) {
sessionName.value = msg.msg; sessionName.value = msg.msg;
@ -519,13 +541,13 @@ const getMessage = async (session_id: number) => {
let data = result["data"]; let data = result["data"];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i]["Type"] === 3) { if (data[i]["Type"] === 3) {
let msg:GenMessage=data[i]; let msg: GenMessage = data[i];
let pMsgContent let pMsgContent;
if(msg.Status==3){ if (msg.Status == 3) {
let img_msg:ImageMessage = JSON.parse(msg.Msg); let img_msg: ImageMessage = JSON.parse(msg.Msg);
//解析成md格式 //解析成md格式
pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text; pMsgContent = `![图片](${img_msg.img_url})` + "\n" + img_msg.text;
}else{ } else {
pMsgContent = msg.Msg; pMsgContent = msg.Msg;
} }
messages.push({ messages.push({
@ -565,7 +587,7 @@ const GetModelListByFunctionName = async () => {
function: "gen-ai-chat", function: "gen-ai-chat",
token: localStorage.getItem("token"), token: localStorage.getItem("token"),
}; };
try{ try {
let result = await FindModelListByFunctionName(req); let result = await FindModelListByFunctionName(req);
if (result["code"] === 0) { if (result["code"] === 0) {
ModelList.value = result["data"]; ModelList.value = result["data"];
@ -574,7 +596,7 @@ const GetModelListByFunctionName = async () => {
} else { } else {
ElMessage.error(result["msg"]); ElMessage.error(result["msg"]);
} }
}catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
@ -582,16 +604,16 @@ const GetModelListByFunctionName = async () => {
GetModelListByFunctionName(); GetModelListByFunctionName();
const getFileListData = async () => { const getFileListData = async () => {
let req={ let req = {
token: localStorage.getItem('token'), token: localStorage.getItem("token"),
type: "all" type: "all",
} };
let result = await FindUserFileService(req); let result = await FindUserFileService(req);
if (result["code"] === 0) { if (result["code"] === 0) {
filteredFiles.value = result["data"]; filteredFiles.value = result["data"];
} else { } else {
ElMessage.error(result["msg"]); ElMessage.error(result["msg"]);
} }
}; };
</script> </script>
<style scoped> <style scoped>