修改通用chat页面，修改会话管理页面，添加文件上传功能、文件管理功能（未全部完成）
This commit is contained in:
junleea
parent
4d0f14713b
commit
6b4d979fd6
366
README.md
366
README.md
|
|
@ -1,306 +1,72 @@
|
|||
<template>
|
||||
<div class="chat-container">
|
||||
<!-- 消息列表 -->
|
||||
<el-card class="chat-messages" shadow="never" ref="messageContainer">
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
:class="['message', message.role]"
|
||||
<div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="http://localhost:8080/upload"
|
||||
:data="uploadData"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeUpload"
|
||||
ref="uploadRef"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<span v-if="message.role === 'assistant'">💬</span>
|
||||
<span v-else>👤</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div v-html="renderMarkdown(message.content)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="loading-indicator">Loading...</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<el-card class="chat-input" shadow="never">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="20">
|
||||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="输入消息..."
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary" @click="sendMessage">Send</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
|
||||
import { ElCard, ElInput, ElButton } from "element-plus";
|
||||
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GetMessageService } from "@/api/im";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import hljs from "highlight.js";
|
||||
import bash from "highlight.js/lib/languages/bash";
|
||||
import javascript from "highlight.js/lib/languages/javascript";
|
||||
import typescript from "highlight.js/lib/languages/typescript";
|
||||
import java from "highlight.js/lib/languages/java";
|
||||
import sql from "highlight.js/lib/languages/sql";
|
||||
import nginx from "highlight.js/lib/languages/nginx";
|
||||
import json from "highlight.js/lib/languages/json";
|
||||
import yaml from "highlight.js/lib/languages/yaml";
|
||||
import xml from "highlight.js/lib/languages/xml";
|
||||
import shell from "highlight.js/lib/languages/shell";
|
||||
interface Message {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
finished?: boolean;
|
||||
}
|
||||
hljs.registerLanguage("bash", bash);
|
||||
hljs.registerLanguage("javascript", javascript);
|
||||
hljs.registerLanguage("typescript", typescript);
|
||||
hljs.registerLanguage("java", java);
|
||||
hljs.registerLanguage("sql", sql);
|
||||
hljs.registerLanguage("nginx", nginx);
|
||||
hljs.registerLanguage("json", json);
|
||||
hljs.registerLanguage("yaml", yaml);
|
||||
hljs.registerLanguage("xml", xml);
|
||||
hljs.registerLanguage("shell", shell);
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
breaks: true,
|
||||
xhtmlOut: true,
|
||||
typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return (
|
||||
'<pre class="hljs"><code>' +
|
||||
hljs.highlight(lang, str, true).value +
|
||||
"</code></pre>"
|
||||
);
|
||||
} catch (__) {}
|
||||
}
|
||||
|
||||
return (
|
||||
'<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const isUserScrolling = ref<boolean>(false);
|
||||
const messages = reactive([]);
|
||||
const inputMessage = ref("");
|
||||
const socket = ref(null);
|
||||
const currentAIMessage = ref("");
|
||||
const messageContainer = ref(null);
|
||||
const sessionID = ref(0);
|
||||
|
||||
const renderMarkdown = (content: string) => {
|
||||
return md.render(content);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let url =
|
||||
"wss://pm.ljsea.top/im/ai_chat_ws?" +
|
||||
"token=" +
|
||||
localStorage.getItem("token");
|
||||
socket.value = new WebSocket(url);
|
||||
socket.value.onopen = () => {
|
||||
console.log("WebSocket 连接已建立");
|
||||
ElMessage.success("连接成功");
|
||||
};
|
||||
|
||||
const container = document.querySelector('.messages-wrapper') as HTMLElement | null;
|
||||
if (container) {
|
||||
container.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
|
||||
socket.value.onmessage = (event) => {
|
||||
let msg: WSMessage = JSON.parse(event.data);
|
||||
const existingMessage = messages.find(
|
||||
(msg) => msg.role === "assistant" && !msg.finished
|
||||
);
|
||||
// if (msg.msg.msg.done) {
|
||||
// messages.push({ role: 'assistant', content: currentAIMessage.value });
|
||||
// currentAIMessage.value = '';
|
||||
// scrollToBottom();
|
||||
// return;
|
||||
// }
|
||||
if (existingMessage) {
|
||||
// 追加内容
|
||||
existingMessage.content += msg.msg.msg.response;
|
||||
} else {
|
||||
// 新消息
|
||||
messages.push({
|
||||
role: "assistant",
|
||||
content: msg.msg.msg.response,
|
||||
finished: false,
|
||||
});
|
||||
}
|
||||
console.log("resp:", msg);
|
||||
sessionID.value = msg.session_id;
|
||||
currentAIMessage.value += msg.msg.msg.response;
|
||||
scrollToBottom();
|
||||
if (msg.msg.msg.done) {
|
||||
const assistantMessage = messages[messages.length - 1];
|
||||
assistantMessage.finished = true;
|
||||
}
|
||||
};
|
||||
|
||||
socket.value.onclose = () => {
|
||||
console.log("WebSocket 连接已关闭");
|
||||
ElMessage.error("连接已关闭");
|
||||
};
|
||||
|
||||
socket.value.onerror = (error) => {
|
||||
console.error("WebSocket 发生错误:", error);
|
||||
};
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (socket.value) {
|
||||
socket.value.close();
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
interface UploadData {
|
||||
upload_type: string;
|
||||
auth_type: string;
|
||||
md5: string;
|
||||
type: string;
|
||||
}
|
||||
});
|
||||
|
||||
const sendMessage = () => {
|
||||
let msg = {
|
||||
msg: inputMessage.value,
|
||||
type: "ollama",
|
||||
function: "gen-ai-chat",
|
||||
session_id: sessionID.value,
|
||||
};
|
||||
if (inputMessage.value.trim() === "") return;
|
||||
messages.push({ role: "user", content: inputMessage.value, finished: true });
|
||||
socket.value.send(JSON.stringify(msg));
|
||||
inputMessage.value = "";
|
||||
//getMessage();
|
||||
scrollToBottom();
|
||||
};
|
||||
|
||||
const scrollToBottom = (): void => {
|
||||
nextTick(() => {
|
||||
if (messageContainer.value && !isUserScrolling.value) {
|
||||
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const uploadData: UploadData = {
|
||||
upload_type: 'your_upload_type',
|
||||
auth_type: 'your_auth_type',
|
||||
md5: 'your_md5_value',
|
||||
type: 'your_type'
|
||||
};
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
};
|
||||
|
||||
const uploadRef = ref(null);
|
||||
|
||||
const handleSuccess = (response: any, file: any, fileList: any) => {
|
||||
console.log('上传成功', response);
|
||||
};
|
||||
|
||||
const handleError = (error: any, file: any, fileList: any) => {
|
||||
console.log('上传失败', error);
|
||||
};
|
||||
|
||||
const beforeUpload = (file: any) => {
|
||||
// 可以在这里进行文件验证等操作
|
||||
return true;
|
||||
};
|
||||
|
||||
return {
|
||||
uploadData,
|
||||
headers,
|
||||
uploadRef,
|
||||
handleSuccess,
|
||||
handleError,
|
||||
beforeUpload
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听用户滚动行为，判断是否在手动滚动历史消息
|
||||
const handleScroll = (): void => {
|
||||
const container = document.querySelector(
|
||||
".messages-wrapper"
|
||||
) as HTMLElement | null;
|
||||
if (container) {
|
||||
const scrollBottom =
|
||||
container.scrollHeight - container.scrollTop - container.clientHeight;
|
||||
isUserScrolling.value = scrollBottom > 50; // 如果距离底部超过50px，则认为在查看历史消息
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-demo {
|
||||
margin-top: 20px;
|
||||
}
|
||||
};
|
||||
|
||||
const getMessage = async () => {
|
||||
let result = {};
|
||||
try {
|
||||
let req = {
|
||||
token: localStorage.getItem("token"),
|
||||
session_id: sessionID.value,
|
||||
};
|
||||
result = await GetMessageService(req);
|
||||
if (result["code"] === 0) {
|
||||
console.log(result["data"]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
return {};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* 使用视口高度确保容器占满整个屏幕 */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto; /* 允许垂直滚动 */
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messages-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end; /* 默认将新消息对齐到底部 */
|
||||
overflow-y: auto; /* 确保内部可以滚动 */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.message.assistant .message-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
background-color: #f0f9eb;
|
||||
border: 1px solid #e1f3d8;
|
||||
border-radius: 4px;
|
||||
padding: 10px 15px;
|
||||
white-space: pre-wrap;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.message.assistant .message-content {
|
||||
background-color: #f3f4f6;
|
||||
border: 1px solid #dce4eb;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import request from '@/utils/request2';
|
||||
|
||||
export const FindUserFileService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/file/file_list', params,{
|
||||
headers: {
|
||||
'token': Data.token, //token
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const AddUserFileService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/model/create', params,{
|
||||
headers: {
|
||||
'token': Data.token, //token
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const UpdateUserFileService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/file/file_update', params,{
|
||||
headers: {
|
||||
'token': Data.token, //token
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const DelUserFileService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/file/file_delete', params,{
|
||||
headers: {
|
||||
'token': Data.token, //token
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -36,7 +36,13 @@ export const menuData: Menus[] = [
|
|||
pid: '1',
|
||||
index: '/function',
|
||||
title: '功能管理',
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '56',
|
||||
pid: '1',
|
||||
index: '/manage-file',
|
||||
title: '文件管理',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -50,6 +50,15 @@ const routes: RouteRecordRaw[] = [
|
|||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/function.vue'),
|
||||
},
|
||||
{
|
||||
path: '/manage-file',
|
||||
name: 'manage-file',
|
||||
meta: {
|
||||
title: '文件管理',
|
||||
permiss: '56',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/manage-file.vue'),
|
||||
},
|
||||
{
|
||||
path: '/manage-session',
|
||||
name: 'manage-session',
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export const usePermissStore = defineStore('permiss', {
|
|||
'53', //通用人机对话
|
||||
'54', //功能管理
|
||||
'55', //提示词生成
|
||||
'56', //文件管理
|
||||
],
|
||||
user: ['0', '8', '7','9', '61','53'],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
export interface File {
|
||||
name: string;
|
||||
size: number;
|
||||
type: string;
|
||||
lastModified: number;
|
||||
}
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element Plus自带上传组件。 访问地址：
|
||||
<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
|
||||
</div>
|
||||
<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple
|
||||
<el-upload class="upload-demo" drag
|
||||
action="https://pm.ljsea.top/file/upload" multiple
|
||||
:data="uploadData"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:before-upload="beforeUpload"
|
||||
:on-change="handle">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
|
|
@ -13,20 +15,51 @@
|
|||
<em>点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
vue-cropper：一个简单的vue图片裁剪插件。 访问地址：
|
||||
<a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a>。 示例请查看
|
||||
<router-link to="/ucenter">个人中心-我的头像</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const handle = (rawFile: any) => {
|
||||
console.log(rawFile);
|
||||
};
|
||||
|
||||
interface UploadData {
|
||||
upload_type: string;
|
||||
auth_type: string;
|
||||
md5: string;
|
||||
type: string;
|
||||
}
|
||||
const uploadData: UploadData = {
|
||||
upload_type: 'file',
|
||||
auth_type: 'public',
|
||||
md5: '',
|
||||
type: 'file',
|
||||
};
|
||||
const headers = {
|
||||
"token": localStorage.getItem('token') || '',
|
||||
};
|
||||
|
||||
const handleSuccess = (response: any, file: any, fileList: any) => {
|
||||
let res = response;
|
||||
if (res.code !== 0){
|
||||
ElMessage.error(res.error);
|
||||
return;
|
||||
}
|
||||
console.log('上传成功', res);
|
||||
ElMessage.success('上传成功');
|
||||
};
|
||||
|
||||
const handleError = (error: any, file: any, fileList: any) => {
|
||||
console.log('上传失败', error);
|
||||
ElMessage.error('上传失败');
|
||||
};
|
||||
|
||||
const beforeUpload = (file: any) => {
|
||||
// 可以在这里进行文件验证等操作
|
||||
return true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -39,6 +72,6 @@ const handle = (rawFile: any) => {
|
|||
}
|
||||
|
||||
.upload-demo {
|
||||
width: 360px;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="chat-app">
|
||||
<!-- 历史会话侧边栏 -->
|
||||
<div class="history-sessions" v-if="sessionIsShow">
|
||||
<div >
|
||||
<el-button type="primary" @click="clearCurrent">新会话</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" @click="clearCurrent">新会话</el-button>
|
||||
</div>
|
||||
<el-card class="session-card">
|
||||
<template #header>
|
||||
<h3>当前会话</h3>
|
||||
|
|
@ -30,21 +30,26 @@
|
|||
</el-scrollbar>
|
||||
</el-card>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="showSession" style="cursor: pointer">
|
||||
<el-icon v-if="sessionIsShow">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 原有的聊天区域 -->
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
<div @click="showSession" style="cursor: pointer">
|
||||
<el-icon v-if="sessionIsShow">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息列表 -->
|
||||
<el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
|
||||
<el-card
|
||||
class="chat-messages"
|
||||
shadow="never"
|
||||
ref="messagesContainer"
|
||||
v-if="messages.length > 0"
|
||||
>
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
|
|
@ -58,8 +63,12 @@
|
|||
<div v-html="renderMarkdown(message.content)"></div>
|
||||
<!-- 添加复制 -->
|
||||
<div>
|
||||
<el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
|
||||
</div>
|
||||
<el-button
|
||||
type="text"
|
||||
:icon="DocumentCopy"
|
||||
@click="copyMessage(message.content)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="loading-indicator">Loading...</div>
|
||||
|
|
@ -72,14 +81,24 @@
|
|||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:rows="5"
|
||||
placeholder="输入消息..."
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<el-text v-model="inputMessage" aria-placeholder="输入信息...."></el-text>
|
||||
<el-text
|
||||
v-model="inputMessage"
|
||||
aria-placeholder="输入信息...."
|
||||
></el-text>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: center">
|
||||
<el-button @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
|
||||
<el-button
|
||||
@click="sendMessage"
|
||||
type="success"
|
||||
:icon="Check"
|
||||
round
|
||||
:disabled="loading"
|
||||
>发送</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
@ -93,13 +112,13 @@ import { ElCard, ElInput, ElButton } from "element-plus";
|
|||
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GetMessageService } from "@/api/im";
|
||||
import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
|
||||
import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import hljs from "highlight.js";
|
||||
import { Session } from "@/types/session";
|
||||
import { FindSessionService } from "@/api/session";
|
||||
import markdownItHighlightjs from 'markdown-it-highlightjs';
|
||||
import markdownItKatex from 'markdown-it-katex';
|
||||
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";
|
||||
interface Message {
|
||||
|
|
@ -147,34 +166,34 @@ const copyCode = (code: string) => {
|
|||
};
|
||||
|
||||
const doButtonD = () => {
|
||||
const codeBlocks = document.querySelectorAll('pre code');
|
||||
const codeBlocks = document.querySelectorAll("pre code");
|
||||
codeBlocks.forEach((codeBlock) => {
|
||||
//先查看是否已经添加了复制按钮
|
||||
if (codeBlock.parentNode.querySelector('.code-controls')) {
|
||||
if (codeBlock.parentNode.querySelector(".code-controls")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取代码类型
|
||||
const codeType = codeBlock.className.replace('hljs ', '');
|
||||
const codeType = codeBlock.className.replace("hljs ", "");
|
||||
// 创建代码类型显示元素
|
||||
const codeTypeElement = document.createElement('span');
|
||||
codeTypeElement.textContent = codeType.split('-')[1];
|
||||
const codeTypeElement = document.createElement("span");
|
||||
codeTypeElement.textContent = codeType.split("-")[1];
|
||||
codeTypeElement.setAttribute("background-color", "rgba(0, 0, 0, 0.1)");
|
||||
codeTypeElement.setAttribute("padding", "3px 6px");
|
||||
codeTypeElement.setAttribute("border-radius", "4px");
|
||||
codeTypeElement.setAttribute("font-size", "0.9em");
|
||||
|
||||
// 创建复制按钮
|
||||
const copyButton = document.createElement('button');
|
||||
const copyButton = document.createElement("button");
|
||||
copyButton.setAttribute("background-color", "dodgerblue");
|
||||
copyButton.setAttribute("display", "flex");
|
||||
copyButton.setAttribute("align-items", "center");
|
||||
copyButton.setAttribute("padding", "5px 10px");
|
||||
copyButton.setAttribute("cursor", "pointer");
|
||||
copyButton.setAttribute("border-radius", "4px");
|
||||
copyButton.textContent = '复制';
|
||||
copyButton.textContent = "复制";
|
||||
copyButton.classList.add();
|
||||
copyButton.addEventListener('click', () => {
|
||||
copyButton.addEventListener("click", () => {
|
||||
copyCode(codeBlock.textContent);
|
||||
});
|
||||
|
||||
|
|
@ -183,16 +202,14 @@ const doButtonD = () => {
|
|||
// pre.style.position = 'relative';
|
||||
|
||||
// 创建一个容器用于放置代码类型和复制按钮
|
||||
const controlsContainer = document.createElement('div');
|
||||
controlsContainer.classList.add('code-controls');
|
||||
const controlsContainer = document.createElement("div");
|
||||
controlsContainer.classList.add("code-controls");
|
||||
controlsContainer.appendChild(codeTypeElement);
|
||||
controlsContainer.appendChild(copyButton);
|
||||
|
||||
// 将容器添加到代码块父元素中
|
||||
pre.insertBefore(controlsContainer, codeBlock);
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -250,6 +267,7 @@ onMounted(() => {
|
|||
};
|
||||
|
||||
socket.value.onerror = (error) => {
|
||||
socket.value = new WebSocket(url);
|
||||
console.error("WebSocket 发生错误:", error);
|
||||
};
|
||||
});
|
||||
|
|
@ -271,10 +289,20 @@ const sendMessage = () => {
|
|||
function: "gen-ai-chat",
|
||||
session_id: sessionID.value,
|
||||
};
|
||||
try {
|
||||
socket.value.send(JSON.stringify(msg));
|
||||
} catch (e) {
|
||||
ElMessage.error("发送失败!连接已断开！");
|
||||
return;
|
||||
}
|
||||
if (sessionID.value == 0) {
|
||||
sessionName.value = inputMessage.value;
|
||||
}
|
||||
messages.push({ role: "user", content: inputMessage.value, finished: true });
|
||||
socket.value.send(JSON.stringify(msg));
|
||||
inputMessage.value = "";
|
||||
scrollToBottom();
|
||||
nextTick(() => {
|
||||
scrollToBottom(); // 新增滚动调用
|
||||
});
|
||||
loading.value = true;
|
||||
if (sessionID.value == 0) {
|
||||
sessionName.value = msg.msg;
|
||||
|
|
@ -351,11 +379,14 @@ const getMessage = async (session_id: number) => {
|
|||
return {};
|
||||
};
|
||||
const copyMessage = (content: string) => {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
ElMessage.success('复制成功');
|
||||
}).catch((error) => {
|
||||
ElMessage.error('复制失败: ' + error);
|
||||
});
|
||||
navigator.clipboard
|
||||
.writeText(content)
|
||||
.then(() => {
|
||||
ElMessage.success("复制成功");
|
||||
})
|
||||
.catch((error) => {
|
||||
ElMessage.error("复制失败: " + error);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
@ -393,6 +424,7 @@ const copyMessage = (content: string) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -401,7 +433,8 @@ const copyMessage = (content: string) => {
|
|||
overflow-y: auto; /* 允许垂直滚动 */
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
scrollbar-width: 20px;
|
||||
scrollbar-width: 10px;
|
||||
height: 90%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -505,18 +538,16 @@ const copyMessage = (content: string) => {
|
|||
}
|
||||
|
||||
.copy-code-button {
|
||||
background-color:dodgerblue;
|
||||
color:white;
|
||||
background-color: dodgerblue;
|
||||
color: white;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
border:0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.el-icon-copy {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
|
||||
</template>
|
||||
</TableCustom>
|
||||
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑': '编辑'" v-model="visible" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options_edit" :edit="isEdit" :update="updateData" />
|
||||
</el-dialog>
|
||||
<el-dialog :title="isAdd ? '新增' : '新增'" v-model="visible_add" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isAdd" :update="addData" />
|
||||
</el-dialog>
|
||||
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
|
||||
<TableDetail :data="viewData"></TableDetail>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="system-user">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { Session } from '@/types/session';
|
||||
import {FindUserFileService} from "@/api/file";
|
||||
import {UpdateUserFileService} from "@/api/file";
|
||||
import {DelUserFileService} from "@/api/file";
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import TableSearch from '@/components/table-search.vue';
|
||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
const userRole = localStorage.getItem('role') == 'admin';
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 122,
|
||||
})
|
||||
const tableData = ref<[]>([]);
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '会话ID：', prop: 'name' }
|
||||
])
|
||||
const handleSearch = async () => {
|
||||
// if (isFinite(query.name) == false){
|
||||
// ElMessage.error("请输入正确的会话ID");
|
||||
// return;
|
||||
// }
|
||||
let req={
|
||||
token: localStorage.getItem('token'),
|
||||
type: "ID",
|
||||
id: parseInt(query.name)
|
||||
}
|
||||
let result = await FindUserFileService(req);
|
||||
tableData.value = result.data;
|
||||
page.total = result.data.length;
|
||||
};
|
||||
|
||||
// 表格相关
|
||||
let columns = ref([
|
||||
{ type: 'index', label: '序号', width: 55, align: 'center' },
|
||||
{ prop: 'ID', label: '文件ID', width: 50 },
|
||||
{ prop: 'UserFileName', label: '文件名' ,width: 300},
|
||||
{ prop: "UploadType", label: "上传类型",width: 100},
|
||||
{ prop: 'CreatedAt', label: '创建时间',type: 'date',width: 200 },
|
||||
{ prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 200 },
|
||||
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} }},
|
||||
])
|
||||
|
||||
const getData = async () => {
|
||||
let req={
|
||||
token: localStorage.getItem('token'),
|
||||
type: "all"
|
||||
}
|
||||
let result = await FindUserFileService(req);
|
||||
tableData.value = result.data;
|
||||
page.total = result.data.length;
|
||||
};
|
||||
getData();
|
||||
|
||||
const changePage = (val: number) => {
|
||||
page.index = val;
|
||||
getData();
|
||||
};
|
||||
|
||||
// 新增弹窗
|
||||
let options = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 12,
|
||||
list: [
|
||||
{ type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
|
||||
]
|
||||
})
|
||||
|
||||
//编辑弹窗
|
||||
let options_edit = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 12,
|
||||
list: [
|
||||
{ type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
|
||||
]
|
||||
})
|
||||
|
||||
const visible = ref(false);
|
||||
const visible_add = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const isAdd = ref(false);
|
||||
const rowData = ref({});
|
||||
const handleEdit = async (row: Session) => {
|
||||
let data = row;
|
||||
rowData.value = data;
|
||||
console.log("edit_row_data:", rowData.value);
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const updateData = async (data) => {
|
||||
let result ={}
|
||||
try{
|
||||
let req={
|
||||
token:localStorage.getItem("token"),
|
||||
id: data.ID,
|
||||
name: data.Name
|
||||
};
|
||||
result = await UpdateUserFileService(req)
|
||||
if (result["code"] === 0) {
|
||||
ElMessage.success("更新成功");
|
||||
} else {
|
||||
ElMessage.error("更新失败");
|
||||
}
|
||||
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
closeDialog();
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
const addData = async (data) => {
|
||||
let result ={}
|
||||
try{
|
||||
let req={
|
||||
token:localStorage.getItem("token"),
|
||||
name: data.Name
|
||||
};
|
||||
result = await AddSessionService(req)
|
||||
if (result["code"] === 0) {
|
||||
ElMessage.success("新增成功");
|
||||
} else {
|
||||
ElMessage.error("新增失败");
|
||||
}
|
||||
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
closeDialog();
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
visible_add.value = false;
|
||||
isEdit.value = false;
|
||||
};
|
||||
|
||||
// 查看详情弹窗相关
|
||||
const visible1 = ref(false);
|
||||
const viewData = ref({
|
||||
row: {},
|
||||
list: []
|
||||
});
|
||||
const handleView =async (row: Session) => {
|
||||
viewData.value.row = row;
|
||||
viewData.value.list = [
|
||||
|
||||
]
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = async (row: Session) => {
|
||||
let req={
|
||||
token: localStorage.getItem('token'),
|
||||
id: row.ID,
|
||||
}
|
||||
try{
|
||||
let result = await DelUserFileService(req);
|
||||
if(result["code"] === 0){
|
||||
ElMessage.success("删除成功");
|
||||
handleSearch();
|
||||
}else{
|
||||
ElMessage.error("删除失败");
|
||||
}
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -42,6 +42,12 @@ import TableSearch from '@/components/table-search.vue';
|
|||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
const userRole = localStorage.getItem('role') == 'admin';
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 122,
|
||||
})
|
||||
const tableData = ref<Session[]>([]);
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
|
|
@ -76,12 +82,7 @@ let columns = ref([
|
|||
{ prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 150 },
|
||||
{ prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: true,label:"继续该会话"} }},
|
||||
])
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 122,
|
||||
})
|
||||
const tableData = ref<Session[]>([]);
|
||||
|
||||
const getData = async () => {
|
||||
let req={
|
||||
token: localStorage.getItem('token'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue