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

ai辅导员的历史聊天记录

Browse Source
This commit is contained in:
firefly
2025-08-11 18:03:30 +08:00
parent a14d5f6d18
commit dddb8961eb
5 changed files with 1030 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/views/aitutor/chathistory/index.vue Normal file
View File

@@ -0,0 +1,273 @@
<template>
<div class="app-container">
<div class="search-form">
<el-form :inline="true" :model="queryParams" ref="queryForm" label-width="68px">
<el-form-item label="用户ID" prop="user">
<el-input v-model="queryParams.user" placeholder="请输入用户ID" clearable size="small" />
</el-form-item>
<el-form-item label="会话ID" prop="conversation_id">
<el-input v-model="queryParams.conversation_id" placeholder="请输入会话ID" clearable size="small" />
</el-form-item>
<el-form-item label="消息内容" prop="content">
<el-input v-model="queryParams.content" placeholder="请输入消息内容" clearable size="small" />
</el-form-item>
<el-form-item label="时间段">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button type="success" icon="el-icon-menu" size="small" @click="getConversationsByUser">查询会话</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table v-loading="loading" :data="historyList" border fit highlight-current-row style="width: 100%">
<el-table-column label="序号" type="index" width="50" align="center" />
<el-table-column prop="user" label="用户ID" width="100" align="center" />
<el-table-column prop="conversation_id" label="会话ID" width="180" align="center" />
<el-table-column prop="message_id" label="消息ID" width="180" align="center" />
<el-table-column prop="type" label="消息类型" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.type === 'user' ? 'primary' : 'success'" size="small">
{{ scope.row.type === 'user' ? '用户' : 'AI' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="content" label="消息内容" min-width="300">
<template slot-scope="scope">
<div v-html="scope.row.content"></div>
</template>
</el-table-column>
<el-table-column prop="feedback" label="反馈状态" width="100" align="center">
<template slot-scope="scope">
<div v-if="scope.row.feedback === 'like'"><i class="el-icon-thumb text-primary"></i> 点赞</div>
<div v-else-if="scope.row.feedback === 'dislike'"><i class="el-icon-minus text-danger"></i> 点踩</div>
<div v-else>无反馈</div>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" width="180" align="center" />
<el-table-column label="操作" width="150" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-view" size="mini" @click="viewMessage(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
v-show="total > 0"
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
import { getHistoryMessages, getFeedbacks, getConversationList } from "@/api/aitutor/chat";
import { getTokenKeySessionStorage } from "@/utils/auth";
export default {
name: "ChatHistory",
data() {
return {
loading: false,
historyList: [],
conversationList: [], // 存储会话列表
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
user: undefined,
conversation_id: undefined,
content: undefined
},
dateRange: [],
userToken: getTokenKeySessionStorage()
};
},
created() {
this.getList();
},
methods: {
/** 根据用户ID查询会话列表 */
getConversationsByUser() {
if (!this.queryParams.user) {
this.$message.error('请输入用户ID');
return;
}
this.loading = true;
const params = {
user: this.queryParams.user
};
getConversationList(params).then(response => {
if (response.code === 200) {
let conversationData = response.data;
// 如果返回的是字符串形式的JSON，尝试解析
if (typeof conversationData === 'string') {
try {
conversationData = JSON.parse(conversationData);
} catch (e) {
console.error('解析会话列表数据失败:', e);
}
}
// 格式化数据
if (Array.isArray(conversationData)) {
this.conversationList = conversationData;
if (conversationData.length > 0) {
this.$message.success(`成功获取到${conversationData.length}条会话记录`);
// 如果只有一条会话，可以自动填充到会话ID输入框
if (conversationData.length === 1) {
this.queryParams.conversation_id = conversationData[0].conversation_id;
}
} else {
this.$message.info('未找到该用户的会话记录');
}
} else if (conversationData && Array.isArray(conversationData.list)) {
this.conversationList = conversationData.list;
this.$message.success(`成功获取到${conversationData.list.length}条会话记录`);
} else {
this.conversationList = [];
this.$message.info('未找到该用户的会话记录');
}
} else {
this.$message.error("获取会话列表失败：" + (response.msg || response.message));
}
this.loading = false;
}).catch(error => {
console.error('获取会话列表失败:', error);
this.$message.error("网络错误：" + error.message);
this.loading = false;
});
},
/** 查询历史消息列表 */
getList() {
this.loading = true;
// 处理日期范围
if (this.dateRange && this.dateRange.length > 0) {
this.queryParams.start_time = this.dateRange[0];
this.queryParams.end_time = this.dateRange[1];
} else {
this.queryParams.start_time = undefined;
this.queryParams.end_time = undefined;
}
// 检查user参数是否存在
if (!this.queryParams.user) {
this.$message.error('请输入用户ID');
this.loading = false;
return;
}
// 添加user参数以匹配API要求
const params = {
...this.queryParams,
user: this.queryParams.user
};
getHistoryMessages(params).then(response => {
// 假设接口返回格式为 { code: 200, data: { list: [], total: 0 } }
// 根据实际接口调整
if (response.code === 200) {
let historyData = response.data;
// 如果返回的是字符串形式的JSON，尝试解析
if (typeof historyData === 'string') {
try {
historyData = JSON.parse(historyData);
} catch (e) {
console.error('解析历史消息数据失败:', e);
}
}
// 格式化数据
if (Array.isArray(historyData)) {
this.historyList = historyData;
this.total = historyData.length;
} else if (historyData && Array.isArray(historyData.list)) {
this.historyList = historyData.list;
this.total = historyData.total;
} else {
this.historyList = [];
this.total = 0;
}
} else {
this.$message.error("获取历史消息失败：" + (response.msg || response.message));
}
this.loading = false;
}).catch(error => {
console.error('获取历史消息失败:', error);
this.$message.error("网络错误：" + error.message);
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.$refs.queryForm.resetFields();
this.handleQuery();
},
/** 查看消息详情 */
viewMessage(row) {
// 这里可以实现查看消息详情的逻辑
this.$modal.msgDetail('消息详情', {
user: row.user,
conversation_id: row.conversation_id,
message_id: row.message_id,
type: row.type,
content: row.content,
feedback: row.feedback,
created_at: row.created_at
});
// 如果需要更复杂的详情展示，可以打开一个新的弹窗组件
// this.$refs.detailDialog.open(row);
},
/** 分页大小改变 */
handleSizeChange(val) {
this.queryParams.pageSize = val;
this.getList();
},
/** 当前页码改变 */
handleCurrentChange(val) {
this.queryParams.pageNum = val;
this.getList();
}
}
};
</script>
<style scoped>
.search-form {
margin-bottom: 20px;
}
.pagination-container {
margin-top: 20px;
text-align: right;
}
</style>