xgxt_sd/zhxg_pc
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
曹贼
2025-08-15 16:51:24 +08:00
parent 8e4f51500f
commit 657c426d9b
5 changed files with 52 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/aiChat/ai_index.js
View File

@@ -1,4 +1,4 @@
import request from '@/utils/ai_request'
import request from '@/utils/request'
/**
* 获取聊天历史记录

82
src/utils/ai_request.js
View File

@@ -1,54 +1,54 @@
import axios from 'axios'
import { getTokenKeySessionStorage } from './auth'
import { useRouter } from 'vue-router'
import { showToast } from '@/utils/toast' // 请替换为你的Toast组件
import axios from "axios";
import { getTokenKeySessionStorage } from "./auth";
import { useRouter } from "vue-router";
import { showToast } from "@/utils/toast"; // 请替换为你的Toast组件
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
timeout: 15000,
headers: {
'Content-Type': 'application/json'
}
})
baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8088',
timeout: 15000,
headers: {
"Content-Type": "application/json",
},
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 从本地存储获取token
const token = getTokenKeySessionStorage()
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
(config) => {
// 从本地存储获取token
const token = getTokenKeySessionStorage();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
)
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做处理
return response.data
},
error => {
const router = useRouter()
(response) => {
// 对响应数据做处理
return response.data;
},
(error) => {
const router = useRouter();
// 处理401未授权
if (error.response?.status === 401) {
showToast('登录已过期，请重新登录', 'error')
router.push('/login')
}
// 处理其他错误状态码
if (error.response?.status === 500) {
showToast('服务器错误，请稍后再试', 'error')
}
return Promise.reject(error)
// 处理401未授权
if (error.response?.status === 401) {
showToast("登录已过期，请重新登录", "error");
router.push("/login");
}
)
export default service
// 处理其他错误状态码
if (error.response?.status === 500) {
showToast("服务器错误，请稍后再试", "error");
}
return Promise.reject(error);
}
);
export default service;

4
src/utils/ai_stream.js
View File

@@ -1,7 +1,7 @@
import { getTokenKeySessionStorage } from "@/utils/auth";
// 使用环境变量配置基础URL
const BASE_URL = process.env.VUE_APP_API_BASE_URL || "http://localhost:8088";
const BASE_URL = null;
/**
* 创建聊天流式连接
@@ -16,7 +16,7 @@ export function createChatStream(params) {
const requestId = `req-${Date.now()}-${Math.random()
.toString(36)
.slice(2, 8)}`;
const url = `${BASE_URL}/aitutor/aichat/stream`;
const url = `${process.env.VUE_APP_BASE_API}/aitutor/aichat/stream`;
const token = getTokenKeySessionStorage();
if (!token) {

671
src/views/aitutor/chattest/index.vue
View File

@@ -1,671 +0,0 @@
<!-- src/views/tool/ai-chat/index.vue -->
<template>
<div class="ai-chat-container">
<h3>AI 聊天助手</h3>
<div class="conversation-controls">
<el-button @click="toggleConversationList">
{{ showConversationList ? '隐藏会话列表' : '显示会话列表' }}
</el-button>
<el-button @click="fetchHistoryMessages" :disabled="!conversationId || historyLoaded">获取历史消息</el-button>
<el-button @click="createNewConversation" type="primary">新建会话</el-button>
<el-button @click="fetchFeedbacks">获取反馈列表</el-button>
</div>
<!-- 会话列表 -->
<div v-if="showConversationList" class="conversation-list">
<h4>会话列表</h4>
<el-scrollbar max-height="200px">
<div v-for="conv in conversationList" :key="conv.id" class="conversation-item" :class="{ 'active': conv.id === conversationId }" @click="switchConversation(conv.id)">
<div class="conv-title">{{ conv.title || '未命名会话' }}</div>
<div class="conv-time">{{ formatDate(conv.updated_at) }}</div>
<div class="conv-preview">{{ conv.preview || '无消息' }}</div>
</div>
</el-scrollbar>
</div>
<el-button @click="fetchHistoryMessages" :disabled="!conversationId">获取历史消息</el-button>
<div class="chat-box" ref="chatBox">
<div v-for="(msg, index) in messages" :key="index" class="message-item">
<!-- 用户消息 -->
<div v-if="msg.type === 'user'" class="user-message">
<el-avatar :size="30" style="background-color: #1890ff;">U</el-avatar>
<div class="message-content user">{{ msg.content }}</div>
</div>
<!-- AI 消息（带点赞/点踩） -->
<div v-else class="ai-message">
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
<div class="message-content ai" v-html="msg.content"></div>
<!-- 引用和归属分段列表 -->
<div v-if="msg.references && msg.references.length > 0" class="references-section">
<h4 class="references-title">引用来源：</h4>
<ul class="references-list">
<li v-for="(ref, refIndex) in msg.references" :key="refIndex" class="reference-item">
<span class="reference-source">{{ ref.source }}：</span>
<span class="reference-content">{{ ref.content }}</span>
</li>
</ul>
</div>
<!-- 👍 点赞 / 👎 点踩 按钮 -->
<div class="feedback-actions" v-if="msg.message_id">
<el-button
size="mini"
:type="msg.feedback === 'like' ? 'primary' : 'default'"
icon="el-icon-thumb"
@click="submitFeedback(msg, 'like')"
:loading="msg.feedbackLoading"
>点赞</el-button
>
<el-button
size="mini"
:type="msg.feedback === 'dislike' ? 'danger' : 'default'"
icon="el-icon-minus"
@click="submitFeedback(msg, 'dislike')"
:loading="msg.feedbackLoading"
>点踩</el-button
>
</div>
</div>
</div>
<!-- 流式输出中 -->
<div v-if="isStreaming" class="ai-message">
<el-avatar :size="30" style="background-color: #52c41a;">AI</el-avatar>
<div class="message-content ai" v-html="currentText"></div>
</div>
</div>
<div class="input-area">
<el-input
v-model="inputText"
placeholder="请输入你的问题... (回车发送)"
@keyup.enter.native="send"
@keydown.enter.native="handleEnterKey"
clearable
/>
<el-button type="primary" @click="send" :loading="isStreaming">发送</el-button>
</div>
</div>
</template>
<script>
import { getConversationList, submitFeedback, getFeedbacks, getHistoryMessages } from "@/api/aitutor/chat";
import { getTokenKeySessionStorage } from "@/utils/auth";
export default {
name: "AiChat",
data() {
return {
inputText: "",
messages: [],
currentText: "",
isStreaming: false,
abortController: null,
conversationId: null,
userId: 2023429112,
userName: "当前用户", // 添加用户名
userRole: "我是学生", // 添加用户角色
//userToken: getTokenKeySessionStorage(),
userToken: "123",
showConversationList: false,
conversationList: [],
loadingConversations: false,
historyLoaded: false, // 新增：标记历史消息是否已加载
};
},
mounted() {
// 组件挂载时获取会话列表
this.fetchConversationList();
},
methods: {
// 处理回车键事件
handleEnterKey(event) {
// 阻止默认行为，避免表单提交
event.preventDefault();
this.send();
},
// 切换会话列表显示状态并获取数据
toggleConversationList() {
this.showConversationList = !this.showConversationList;
this.fetchConversationList();
},
// 获取会话列表
async fetchConversationList() {
if (this.loadingConversations) return;
this.loadingConversations = true;
try {
const result = await getConversationList({ user: this.userId });
this.conversationList = result.data || [];
console.log('会话列表接口返回数据:', result.data);
// 自动选中第一个会话（如果有）
if (this.conversationList.length > 0 && !this.conversationId) {
this.switchConversation(this.conversationList[0].id);
}
} catch (err) {
this.$message.error("网络错误：" + err.message);
} finally {
this.loadingConversations = false;
}
},
// 切换会话
switchConversation(conversationId) {
this.conversationId = conversationId;
this.messages = []; // 清空当前消息
this.historyLoaded = false; // 重置历史消息加载标志
this.fetchHistoryMessages(); // 获取选中会话的历史消息
},
// 新建会话
createNewConversation() {
this.conversationId = null;
this.messages = [];
this.currentText = "";
this.historyLoaded = false;
this.showConversationList = false;
this.$message.info("已创建新会话，请先发送消息开始对话");
},
// 格式化日期
formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleString();
},
async send() {
const query = this.inputText.trim();
if (!query || this.isStreaming) return;
this.messages.push({
type: "user",
content: query,
});
this.currentText = "";
this.isStreaming = true;
this.inputText = "";
// 确保有会话ID
if (!this.conversationId) {
console.log('发送消息时conversationId为null，尝试创建新会话');
if (this.conversationList.length > 0) {
this.switchConversation(this.conversationList[0].id);
} else {
console.log('没有现有会话，将发送消息以创建新会话');
}
}
console.log('发送消息时的conversationId:', this.conversationId);
// 创建请求体
const requestBody = {
query: query,
conversation_id: this.conversationId || undefined,
user: this.userId,
user_id: this.userId,
user_name: this.userName,
user_role: this.userRole,
user_token: this.userToken
};
// 创建AbortController以支持取消请求
this.abortController = new AbortController();
try {
// 对于SSE请求，使用原生fetch而不是axios封装
// Use the base API URL from environment configuration
const baseUrl = process.env.VUE_APP_BASE_API || '';
const response = await fetch(`${baseUrl}/aitutor/aichat/stream`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/event-stream',
'Authorization': `Bearer ${getTokenKeySessionStorage()}`
},
body: JSON.stringify(requestBody),
signal: this.abortController.signal
});
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
if (!response.body) throw new Error("No response body");
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split("\n");
buffer = lines.pop();
for (const line of lines) {
if (line.startsWith("data:")) {
const data = line.slice(5).trim();
if (data === "[DONE]") {
await this.finalizeResponse();
return;
} else {
try {
const json = JSON.parse(data);
const eventType = json.event;
switch (eventType) {
case "message":
this.currentText += json.answer || "";
break;
case "message_end":
// ✅ 保存 conversation_id 和 message_id
if (json.conversation_id) {
this.conversationId = json.conversation_id;
console.log("Conversation ID set to:", this.conversationId); // 添加调试信息
}
// 给最后一条 AI 消息添加 message_id 和引用数据
// 处理引用数据 - 根据Dify文档，引用数据在retriever_resources字段中
let refs = [];
if (json.retriever_resources && Array.isArray(json.retriever_resources)) {
refs = json.retriever_resources;
console.log('引用数据来自retriever_resources字段:', refs);
} else if (json.references && Array.isArray(json.references)) {
refs = json.references;
console.log('引用数据来自references字段:', refs);
} else if (json.sources && Array.isArray(json.sources)) {
refs = json.sources;
console.log('引用数据来自sources字段:', refs);
} else {
console.log('未找到引用数据或格式不正确:', json);
}
this.messages.push({
type: "ai",
content: this.currentText,
message_id: json.id, // Dify 返回的消息 ID
references: refs, // 引用数据
feedback: null, // 初始无反馈
feedbackLoading: false,
});
this.currentText = "";
break;
case "error":
this.currentText += `<span style=\"color:red\">[AI错误] ${json.message || "未知错误"}</span>`;
break;
default:
break;
}
} catch (e) {
this.currentText += data;
}
}
}
}
}
await this.finalizeResponse();
} catch (err) {
if (err.name !== "AbortError") {
console.error("SSE Error:", err);
this.$message.error("连接失败: " + err.message + ", 请检查后端服务是否正常运行");
}
this.isStreaming = false;
}
},
async finalizeResponse() {
this.isStreaming = false;
this.abortController = null;
},
// ==================== 新增：提交点赞/点踩 ====================
async submitFeedback(msg, rating) {
// 防止重复提交
if (msg.feedbackLoading) return;
// 构造请求体
const payload = {
message_id: msg.message_id,
user_id: this.userId,
user: this.userId, // 添加user参数，与user_id保持一致
rating: rating, // 'like' 或 'dislike'
content: null,
};
// 更新 UI 状态
msg.feedbackLoading = true;
try {
const result = await submitFeedback(payload);
console.log("提交反馈响应:", result);
if (result.code === 200) {
// 更新反馈状态（如果再次点击则撤销）
if (msg.feedback === rating) {
msg.feedback = null;
this.$message.success("已撤销");
} else {
msg.feedback = rating;
this.$message.success(rating === "like" ? "感谢点赞！" : "已提交点踩");
}
} else {
this.$message.error("提交失败：" + (result.msg || result.message));
}
} catch (err) {
this.$message.error("网络错误：" + err.message);
} finally {
msg.feedbackLoading = false;
}
},
// 获取反馈列表
async fetchFeedbacks() {
/* if (!this.conversationId) {
this.$message.error("当前会话ID不存在，请先选择一个会话。");
return;
} */
try {
// 调用API函数
const data = await getFeedbacks({
conversation_id: this.conversationId,
user_id: this.userId
});
// 处理响应数据
if (data.code === 200) {
// 检查data是否是数组，如果不是则尝试获取其content属性
const feedbacks = Array.isArray(data.data) ? data.data : (data.data?.content || []);
// 创建一个反馈映射，方便快速查找
const feedbackMap = {};
feedbacks.forEach(feedback => {
feedbackMap[feedback.message_id] = feedback.rating;
});
// 更新消息列表中的反馈状态
this.messages = this.messages.map(msg => {
if (feedbackMap[msg.message_id] !== undefined) {
return {
...msg,
feedback: feedbackMap[msg.message_id],
};
}
return msg;
});
this.$message.success("获取反馈列表成功");
} else {
console.error('获取反馈失败: 响应格式不正确', data);
this.$message.error("获取反馈列表失败：" + (data.msg || data.message));
}
} catch (error) {
console.error('获取反馈失败:', error);
this.$message.error("网络错误：" + error.message);
}
},
// ==================== 新增：获取历史消息 ====================
async fetchHistoryMessages() {
if (!this.conversationId) {
// 如果会话列表不为空但没有选中会话，自动选中第一个
if (this.conversationList.length > 0) {
this.switchConversation(this.conversationList[0].id);
return;
}
this.$message.error("当前会话ID不存在，请先发起一次对话。");
return;
}
// 如果历史消息已加载，则不再重复加载
if (this.historyLoaded) {
this.$message.info("历史消息已加载");
return;
}
try {
// 调用API函数
// 确保user参数是字符串类型并正确传递
const data = await getHistoryMessages({
conversation_id: this.conversationId,
user_id: this.userId,
user: String(this.userId)
});
// 处理响应数据
if (data.code === 200) {
let historyData;
try {
// 尝试解析数据（如果是字符串形式的JSON）
historyData = typeof data.data === 'string' ? JSON.parse(data.data) : data.data;
} catch (e) {
historyData = data.data;
}
if (Array.isArray(historyData)) {
// 格式化历史消息
const historyMessages = [];
historyData.forEach(msg => {
// 如果有query字段，添加用户消息
if (msg.query) {
historyMessages.push({
type: 'user',
content: msg.query,
message_id: msg.id + '-user', // 添加后缀以确保唯一性
feedback: null,
feedbackLoading: false,
});
}
// 如果有answer字段，添加AI消息
if (msg.answer) {
historyMessages.push({
type: 'ai',
content: msg.answer,
message_id: msg.id,
references: msg.references || msg.sources || [], // 引用数据，适配不同字段名
feedback: msg.feedback || null,
feedbackLoading: false,
});
}
});
// 将历史消息添加到现有消息列表的开头
this.messages = [...historyMessages, ...this.messages];
this.historyLoaded = true; // 标记历史消息已加载
} else if (historyData && Array.isArray(historyData.messages)) {
// 格式化历史消息
const historyMessages = [];
historyData.messages.forEach(msg => {
if (msg.role === 'user') {
historyMessages.push({
type: 'user',
content: msg.content,
message_id: msg.id + '-user',
feedback: null,
feedbackLoading: false,
});
} else {
historyMessages.push({
type: 'ai',
content: msg.content,
message_id: msg.id,
references: msg.references || [],
feedback: null,
feedbackLoading: false,
});
}
});
this.messages = [...historyMessages, ...this.messages];
this.historyLoaded = true; // 标记历史消息已加载
} else {
console.error('获取历史消息失败: 响应格式不正确', historyData);
this.$message.error("获取历史消息失败：响应格式不正确");
}
} else {
console.error('获取历史消息失败:', data);
this.$message.error("获取历史消息失败：" + (data.msg || data.message));
}
} catch (error) {
console.error('获取历史消息失败:', error);
this.$message.error("网络错误：" + error.message);
}
},
},
beforeUnmount() {
if (this.abortController) {
this.abortController.abort();
}
},
};
</script>
<style scoped>
.ai-chat-container {
padding: 20px;
background-color: #f5f5f5;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
}
.chat-box {
flex: 1;
overflow-y: auto;
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 8px;
background-color: white;
margin-bottom: 20px;
}
.message-item {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.message-content {
max-width: 80%;
padding: 8px 12px;
border-radius: 18px;
margin-left: 8px;
line-height: 1.6;
}
.user-message .message-content {
background-color: #1890ff;
color: white;
}
.ai-message .message-content {
background-color: #f0f2f5;
color: #333;
}
.references-section {
margin-left: 40px;
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 8px;
font-size: 13px;
}
.references-title {
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
color: #666;
}
.references-list {
list-style-type: none;
padding-left: 0;
}
.reference-item {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed #e0e0e0;
}
.reference-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.reference-source {
font-weight: bold;
color: #1890ff;
}
.reference-content {
color: #666;
}
/* 点赞/点踩按钮样式 */
.feedback-actions {
margin-left: 40px;
margin-top: 5px;
font-size: 12px;
}
.feedback-actions .el-button {
padding: 4px 8px;
margin-right: 5px;
}
.conversation-controls {
margin-bottom: 15px;
display: flex;
gap: 10px;
}
.conversation-list {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 8px;
background-color: white;
}
.conversation-item {
padding: 10px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
.conversation-item:hover {
background-color: #f5f5f5;
}
.conversation-item.active {
background-color: #e6f7ff;
border-left: 3px solid #1890ff;
}
.conv-title {
font-weight: bold;
margin-bottom: 5px;
}
.conv-time {
font-size: 12px;
color: #999;
margin-bottom: 5px;
}
.conv-preview {
font-size: 12px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

8
src/views/aitutor/chatwarning/index.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="cmd">你好
</div>
</template>
<script>
export default {};
</script>
<style></style>