411 lines
9.6 KiB
Vue
411 lines
9.6 KiB
Vue
<!-- HistoryDrawer.vue -->
|
||
<template>
|
||
<!-- 抽屉容器，visible控制显示 -->
|
||
<view v-if="visible" class="drawer-container" @touchmove.stop.prevent>
|
||
<!-- 遮罩层，点击关闭 -->
|
||
<view class="drawer-mask" @click="closeDrawer"></view>
|
||
|
||
<!-- 抽屉内容区域 -->
|
||
<view class="drawer-content">
|
||
<!-- 标题区域 -->
|
||
<view class="drawer-header">
|
||
<text class="title">历史记录</text>
|
||
<image src="/static/close.svg" mode="aspectFit" class="close-icon" @click="closeDrawer" />
|
||
</view>
|
||
|
||
<!-- 搜索栏 -->
|
||
<view class="search-bar">
|
||
<image src="/static/search.svg" mode="aspectFit" class="search-icon" />
|
||
<input v-model="searchKeyword" placeholder="搜索聊天记录..." class="search-input" @input="handleSearch" />
|
||
<image v-if="searchKeyword" src="/static/clear.svg" class="clear-icon" @click="clearSearch" />
|
||
</view>
|
||
|
||
<!-- 历史列表区域 -->
|
||
<scroll-view scroll-y class="history-list">
|
||
<!-- 分组渲染历史记录 -->
|
||
<block v-for="(group, gIndex) in filteredRecords" :key="gIndex">
|
||
<view class="group-title">{{ group.title }}</view>
|
||
<view v-for="item in group.list" :key="item.id" class="history-item" @click="onItemClick(item)">
|
||
<!-- 日期时间显示 -->
|
||
<view class="datetime">
|
||
<text class="date">{{ item.date }}</text>
|
||
<text class="time">{{ item.time }}</text>
|
||
</view>
|
||
<!-- 消息内容 -->
|
||
<view class="record">
|
||
<text class="user-msg" v-html="highlightKeyword(item.content)"></text>
|
||
<text class="ai-msg" v-html="highlightKeyword(item.reply)"></text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 空状态提示 -->
|
||
<view v-if="filteredRecords.length === 0" class="empty-tip">
|
||
<text>{{ searchKeyword ? '没有找到匹配的记录' : '暂无聊天记录' }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getHistory
|
||
} from '../../api/aiChat/ai_index.js'; // 历史记录API
|
||
|
||
export default {
|
||
name: 'HistoryDrawer',
|
||
props: {
|
||
visible: Boolean // 控制抽屉显示
|
||
},
|
||
data() {
|
||
return {
|
||
historyRecords: [], // 原始历史记录
|
||
filteredRecords: [], // 过滤后的历史记录
|
||
searchKeyword: '' // 搜索关键词
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听visible变化，显示时加载记录
|
||
visible(newVal) {
|
||
if (newVal) this.loadHistoryRecords();
|
||
else this.clearSearch();
|
||
}
|
||
},
|
||
methods: {
|
||
// 关闭抽屉
|
||
closeDrawer() {
|
||
this.$emit('close');
|
||
},
|
||
|
||
/* ========== 1. 读本地缓存兜底 ========== */
|
||
renderLocal(list) {
|
||
// 将本地缓存的消息按日期分组
|
||
const groupMap = {};
|
||
list.forEach((m, idx) => {
|
||
const date = new Date();
|
||
const formatted = {
|
||
date: this.formatDate(date),
|
||
time: this.formatTime(date),
|
||
content: m.sender === 'user' ? m.content : '',
|
||
reply: m.sender === 'ai' ? m.content : '',
|
||
id: idx
|
||
};
|
||
const title = this.getGroupTitle(date);
|
||
(groupMap[title] ||= []).push(formatted);
|
||
});
|
||
|
||
// 转换为数组形式
|
||
this.historyRecords = Object.entries(groupMap).map(([t, arr]) => ({
|
||
title: t,
|
||
list: arr
|
||
}));
|
||
this.filteredRecords = [...this.historyRecords];
|
||
},
|
||
|
||
/* ========== 2. 加载接口或本地缓存 ========== */
|
||
async loadHistoryRecords() {
|
||
try {
|
||
// 1. 先读本地缓存，立即显示（避免空白）
|
||
const local = uni.getStorageSync('chatHistory') || [];
|
||
if (local.length) this.renderLocal(local);
|
||
|
||
// 2. 再调接口，成功后覆盖本地
|
||
const res = await getHistory({
|
||
conversationId: '5665af64-22b4-4a59-b15f-2126eb056302',
|
||
user: '2023429112',
|
||
limit: 50
|
||
});
|
||
console.log('原始返回结构', res);
|
||
|
||
const list = res?.data?.data || [];
|
||
if (!list.length) return; // 接口返回空数组也保留本地
|
||
|
||
// 处理API返回的数据
|
||
const groupMap = {};
|
||
list.forEach(item => {
|
||
const ts = item.created_at ?? item.create_time ?? item.timestamp ?? 0;
|
||
const date = String(ts).length === 13 ? new Date(ts) : new Date(ts * 1000);
|
||
|
||
const formatted = {
|
||
date: this.formatDate(date),
|
||
time: this.formatTime(date),
|
||
content: item.query || item.question || item.content || '未知内容',
|
||
reply: item.answer || item.reply || '暂无回复',
|
||
id: item.id || Math.random().toString(36).slice(2)
|
||
};
|
||
|
||
const title = this.getGroupTitle(date);
|
||
(groupMap[title] ||= []).push(formatted);
|
||
});
|
||
|
||
// 按时间排序并更新数据
|
||
this.historyRecords = Object.entries(groupMap).map(([title, arr]) => ({
|
||
title,
|
||
list: arr.sort((a, b) => b.timestamp - a.timestamp)
|
||
}));
|
||
this.filteredRecords = [...this.historyRecords];
|
||
} catch (e) {
|
||
console.error('历史接口 401，已使用本地缓存兜底', e);
|
||
// 接口失败时，保留本地缓存（不覆盖）
|
||
}
|
||
},
|
||
|
||
// 处理搜索输入
|
||
handleSearch() {
|
||
const kw = this.searchKeyword.trim().toLowerCase();
|
||
if (!kw) return (this.filteredRecords = [...this.historyRecords]);
|
||
|
||
// 过滤历史记录
|
||
this.filteredRecords = this.historyRecords
|
||
.map(g => ({
|
||
...g,
|
||
list: g.list.filter(i =>
|
||
i.content.toLowerCase().includes(kw) ||
|
||
i.reply.toLowerCase().includes(kw)
|
||
)
|
||
}))
|
||
.filter(g => g.list.length);
|
||
},
|
||
|
||
// 清除搜索
|
||
clearSearch() {
|
||
this.searchKeyword = '';
|
||
this.filteredRecords = [...this.historyRecords];
|
||
},
|
||
|
||
// 高亮搜索关键词
|
||
highlightKeyword(text) {
|
||
if (!this.searchKeyword || !text) return text;
|
||
const kw = this.searchKeyword.trim();
|
||
return text.replace(
|
||
new RegExp(kw, 'gi'),
|
||
`<span class="highlight">${kw}</span>`
|
||
);
|
||
},
|
||
|
||
// 获取分组标题（今天/昨天/7天内等）
|
||
getGroupTitle(date) {
|
||
const now = new Date();
|
||
const today = new Date(now.setHours(0, 0, 0, 0));
|
||
const yesterday = new Date(today).setDate(today.getDate() - 1);
|
||
const week = new Date(today).setDate(today.getDate() - 7);
|
||
const month = new Date(today).setDate(today.getDate() - 30);
|
||
|
||
if (date >= today) return '今天';
|
||
if (date >= yesterday) return '昨天';
|
||
if (date >= week) return '7天内';
|
||
if (date >= month) return '30天内';
|
||
return '更早';
|
||
},
|
||
|
||
// 格式化日期为YYYY-MM-DD
|
||
formatDate(date) {
|
||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
|
||
.getDate()
|
||
.toString()
|
||
.padStart(2, '0')}`;
|
||
},
|
||
|
||
// 格式化时间为HH:MM
|
||
formatTime(date) {
|
||
return `${date.getHours().toString().padStart(2, '0')}:${date
|
||
.getMinutes()
|
||
.toString()
|
||
.padStart(2, '0')}`;
|
||
},
|
||
|
||
// 点击历史记录项
|
||
onItemClick(item) {
|
||
// 移除HTML标签后触发事件
|
||
this.$emit('item-click', {
|
||
...item,
|
||
content: item.content.replace(/<[^>]+>/g, ''),
|
||
reply: item.reply.replace(/<[^>]+>/g, '')
|
||
});
|
||
this.closeDrawer();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 抽屉容器样式 */
|
||
.drawer-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* 遮罩层样式 */
|
||
.drawer-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
/* 抽屉内容区域样式 */
|
||
.drawer-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 66.67%;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.drawer-header {
|
||
padding: 15px 15px 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
height: 50px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
/* 搜索栏样式 */
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 15px;
|
||
background-color: #f5f5f5;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8px;
|
||
tint-color: #999;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 36px;
|
||
background-color: #fff;
|
||
border-radius: 18px;
|
||
padding: 0 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.clear-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 8px;
|
||
tint-color: #999;
|
||
}
|
||
|
||
/* 历史列表样式 */
|
||
.history-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 分组标题样式 */
|
||
.group-title {
|
||
font-size: 14px;
|
||
color: #888;
|
||
padding: 12px 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 历史记录项样式 */
|
||
.history-item {
|
||
padding: 15px 20px;
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
/* 日期时间样式 */
|
||
.datetime {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.date {
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
/* 消息内容样式 */
|
||
.record {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.user-msg {
|
||
display: block;
|
||
color: #333;
|
||
margin-bottom: 6px;
|
||
padding: 6px 10px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.ai-msg {
|
||
display: block;
|
||
color: #333;
|
||
padding: 6px 10px;
|
||
background-color: #eef7ff;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 关键词高亮样式 */
|
||
.highlight {
|
||
color: #ff4d4f;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 分隔线样式 */
|
||
.divider {
|
||
height: 8px;
|
||
background-color: #f9f9f9;
|
||
margin-top: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 空状态提示样式 */
|
||
.empty-tip {
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 16px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
/* 修复输入框占位符样式 */
|
||
input::-webkit-input-placeholder {
|
||
color: #ccc;
|
||
font-size: 14px;
|
||
}
|
||
</style> |