<template>
|
<div class="schedule-container">
|
<el-card class="schedule-card" shadow="never">
|
<div v-for="(item, index) in chatList" :key="index" class="chat-item" @mouseenter="showDelete = index"
|
@mouseleave="showDelete = null">
|
<!-- 新增删除按钮 -->
|
<i class="el-icon-delete delete-button"
|
v-show="showDelete === index"
|
@click.stop="handleDelete(item.chatId, $event)"></i>
|
<div class="chat-header"></div>
|
<div class="chat-header">
|
<!-- <span class="chat-time">{{ formatDate(item.createTime) }}</span>
|
<span class="chat-id">#{{ item.chatId }}</span> -->
|
</div>
|
<div class="chat-content" @click="handleItemClick(item.chatId)">
|
{{ extractContent(item.title) }}
|
</div>
|
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import chatHistory from "@/api/ChatHistoryView"
|
export default {
|
name: 'ChatHistory',
|
data() {
|
return {
|
showDelete: null, // 当前显示删除按钮的索引
|
chatData: {
|
list: [],
|
pagination: {}
|
}
|
}
|
},
|
computed: {
|
chatList() {
|
return this.chatData.list || []
|
}
|
},
|
methods: {
|
// 新增删除处理方法
|
async handleDelete(chatId, index) {
|
try {
|
await this.$confirm('确定要删除此聊天记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
|
// 调用删除接口
|
await chatHistory.deleteChat({
|
chatId:chatId
|
})
|
|
// 前端立即更新列表
|
this.chatData.list.splice(index, 1)
|
this.$message.success('删除成功')
|
} catch (error) {
|
if (error !== 'cancel') {
|
console.error('删除失败:', error)
|
this.$message.error('删除失败')
|
}
|
}
|
},
|
handleItemClick(chatId) {
|
// console.info("点击"+chatId)
|
this.$emit('item-selected', chatId); // 触发自定义事件
|
},
|
async fetchChatHistory() {
|
try {
|
const tasks = await chatHistory.getChats({//检测对话历史
|
// page: 1,
|
// pageSize: 999
|
});
|
// console.info(tasks.data.list)
|
this.chatData.list = tasks.data.list
|
this.chatData.pagination = tasks.data.pagination
|
} catch (error) {
|
console.error('获取筛选选项失败:', error);
|
this.$message.error('筛选选项加载失败');
|
}
|
},
|
formatDate(dateString) {
|
return dateString.split(' ')[0] // 提取日期部分
|
},
|
extractContent(content) {
|
// 移除<think>标签内容，提取实际内容
|
const cleanContent = content.replace(/<think>[\s\S]*?<\/think>\n*/g, '')
|
return cleanContent.trim()
|
}
|
},
|
mounted() {
|
// 模拟接收后端数据
|
this.fetchChatHistory()
|
// this.chatData = {
|
// list: [
|
// {
|
// chatId: 19,
|
// title: `<think>思考过程...</think>\n\n你好！有什么我可以帮你的吗？😊`,
|
// createTime: "2025-05-27 09:30:33.1284251+00:00"
|
// }
|
// // 其他数据项...
|
// ],
|
// pagination: {
|
// page: 1,
|
// total: 6
|
// }
|
// }
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 优化后的样式 */
|
.schedule-container {
|
height: 600px;
|
background: white;
|
padding: 0;
|
overflow-y: auto;
|
}
|
|
.schedule-card {
|
padding: 0;
|
border: none;
|
min-height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.chat-item {
|
padding: 10px 0;
|
/* border-bottom: 1px solid #f0f0f0; */
|
cursor: pointer;
|
transition: background-color 0.3s;
|
position: relative; /* 为绝对定位按钮提供参考 */
|
padding-right: 40px; /* 为按钮留出空间 */
|
}
|
.delete-button {
|
position: absolute;
|
right: 8px;
|
top: 50%;
|
transform: translateY(-50%);
|
cursor: pointer;
|
color: #ff4d4f;
|
padding: 5px;
|
font-size: 16px;
|
transition: all 0.3s;
|
z-index: 2;
|
}
|
.delete-button:hover {
|
background-color: rgba(255,77,79,0.1);
|
border-radius: 50%;
|
}
|
|
/* 优化悬停效果 */
|
.chat-item:hover .delete-button {
|
display: block;
|
}
|
|
.chat-item:hover {
|
background-color: #f8f9fa;
|
}
|
|
.chat-header {
|
display: flex;
|
justify-content: space-between;
|
/* margin-bottom: 8px; */
|
font-size: 12px;
|
color: #666;
|
}
|
.item-container {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
width: 100%;
|
}
|
.chat-content {
|
flex: 1;
|
cursor: pointer;
|
color: #1a1a1a;
|
font-size: 16px;
|
line-height: 1.6;
|
word-break: break-word;
|
text-align: left; /* 新增左对齐 */
|
|
/* 新增单行省略样式 */
|
display: block;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
/* 确保宽度限制 */
|
max-width: 100%;
|
width: 100%;
|
}
|
/* 悬停时显示完整内容 */
|
/* .chat-item:hover .chat-content {
|
white-space: normal;
|
overflow: visible;
|
text-overflow: initial;
|
} */
|
|
.loading-container {
|
padding: 40px;
|
text-align: center;
|
color: #666;
|
font-size: 14px;
|
}
|
|
.empty-state {
|
text-align: center;
|
padding: 40px;
|
color: #999;
|
|
i {
|
font-size: 48px;
|
margin-bottom: 16px;
|
}
|
}
|
|
.pagination {
|
margin-top: auto;
|
padding: 16px;
|
justify-content: center;
|
}
|
|
/* 滚动条优化 */
|
::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 4px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #a8a8a8;
|
}
|
</style>
|
