刷新自动回到底部
This commit is contained in:
14651
@@ -50,350 +50,350 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
getHistory
|
getHistory
|
||||||
} from '../../api/aiChat/ai_index.js';
|
} from '../../api/aiChat/ai_index.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HistoryDrawer',
|
name: 'HistoryDrawer',
|
||||||
props: {
|
props: {
|
||||||
visible: Boolean
|
visible: Boolean
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
historyRecords: [],
|
|
||||||
filteredRecords: [],
|
|
||||||
searchKeyword: '', // 移除了重复定义
|
|
||||||
loading: false // 新增loading状态
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
visible(newVal) {
|
|
||||||
if (newVal) this.loadHistoryRecords();
|
|
||||||
else this.clearSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closeDrawer() {
|
|
||||||
this.$emit('close');
|
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
async loadHistoryRecords() {
|
return {
|
||||||
this.loading = true;
|
historyRecords: [],
|
||||||
try {
|
filteredRecords: [],
|
||||||
// 1. 获取当前用户学号
|
searchKeyword: '', // 移除了重复定义
|
||||||
const userNo = uni.getStorageSync('stuNo');
|
loading: false // 新增loading状态
|
||||||
if (!userNo) throw new Error('未获取到用户学号');
|
};
|
||||||
|
},
|
||||||
// 2. 调用接口获取数据
|
watch: {
|
||||||
const res = await getHistory({
|
visible(newVal) {
|
||||||
user: userNo,
|
if (newVal) this.loadHistoryRecords();
|
||||||
conversationId: '',
|
else this.clearSearch();
|
||||||
limit: 20
|
|
||||||
});
|
|
||||||
console.log('接口响应:', res);
|
|
||||||
|
|
||||||
// 3. 处理响应数据 - 修正数据结构解析
|
|
||||||
const list = Array.isArray(res.data?.data) ? res.data.data : [];
|
|
||||||
console.log('解析后的数据列表:', list);
|
|
||||||
|
|
||||||
// 4. 分组处理
|
|
||||||
const groupMap = {};
|
|
||||||
list.forEach(item => {
|
|
||||||
// 修正字段映射
|
|
||||||
const timestamp = item.created_at || item.create_time || item.timestamp || Date.now() /
|
|
||||||
1000;
|
|
||||||
const date = new Date(timestamp * 1000);
|
|
||||||
|
|
||||||
const record = {
|
|
||||||
id: item.id || Math.random().toString(36).slice(2),
|
|
||||||
date: this.formatDate(date),
|
|
||||||
time: this.formatTime(date),
|
|
||||||
content: item.query || item.content || '未知内容',
|
|
||||||
reply: item.answer || item.reply || '暂无回复',
|
|
||||||
timestamp: timestamp
|
|
||||||
};
|
|
||||||
|
|
||||||
const title = this.getGroupTitle(date);
|
|
||||||
(groupMap[title] ||= []).push(record);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 5. 排序并更新数据
|
|
||||||
this.historyRecords = Object.entries(groupMap).map(([title, arr]) => ({
|
|
||||||
title,
|
|
||||||
list: arr.sort((a, b) => b.timestamp - a.timestamp)
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.filteredRecords = [...this.historyRecords];
|
|
||||||
console.log('最终处理的历史记录:', this.historyRecords);
|
|
||||||
} catch (e) {
|
|
||||||
console.error('加载失败:', e);
|
|
||||||
uni.showToast({
|
|
||||||
title: `加载失败: ${e.message}`,
|
|
||||||
icon: 'none',
|
|
||||||
duration: 3000
|
|
||||||
});
|
|
||||||
this.historyRecords = [];
|
|
||||||
} finally {
|
|
||||||
this.loading = false;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
closeDrawer() {
|
||||||
|
this.$emit('close');
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadHistoryRecords() {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
// 1. 获取当前用户学号
|
||||||
|
const userNo = uni.getStorageSync('stuNo');
|
||||||
|
if (!userNo) throw new Error('未获取到用户学号');
|
||||||
|
|
||||||
|
// 2. 调用接口获取数据
|
||||||
|
const res = await getHistory({
|
||||||
|
user: userNo,
|
||||||
|
conversationId: '',
|
||||||
|
limit: 20
|
||||||
|
});
|
||||||
|
console.log('接口响应:', res);
|
||||||
|
|
||||||
|
// 3. 处理响应数据 - 修正数据结构解析
|
||||||
|
const list = Array.isArray(res.data?.data) ? res.data.data : [];
|
||||||
|
console.log('解析后的数据列表:', list);
|
||||||
|
|
||||||
|
// 4. 分组处理
|
||||||
|
const groupMap = {};
|
||||||
|
list.forEach(item => {
|
||||||
|
// 修正字段映射
|
||||||
|
const timestamp = item.created_at || item.create_time || item.timestamp || Date.now() /
|
||||||
|
1000;
|
||||||
|
const date = new Date(timestamp * 1000);
|
||||||
|
|
||||||
|
const record = {
|
||||||
|
id: item.id || Math.random().toString(36).slice(2),
|
||||||
|
date: this.formatDate(date),
|
||||||
|
time: this.formatTime(date),
|
||||||
|
content: item.query || item.content || '未知内容',
|
||||||
|
reply: item.answer || item.reply || '暂无回复',
|
||||||
|
timestamp: timestamp
|
||||||
|
};
|
||||||
|
|
||||||
|
const title = this.getGroupTitle(date);
|
||||||
|
(groupMap[title] ||= []).push(record);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. 排序并更新数据
|
||||||
|
this.historyRecords = Object.entries(groupMap).map(([title, arr]) => ({
|
||||||
|
title,
|
||||||
|
list: arr.sort((a, b) => b.timestamp - a.timestamp)
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.filteredRecords = [...this.historyRecords];
|
||||||
|
console.log('最终处理的历史记录:', this.historyRecords);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载失败:', e);
|
||||||
|
uni.showToast({
|
||||||
|
title: `加载失败: ${e.message}`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
this.historyRecords = [];
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// 处理搜索输入
|
// 处理搜索输入
|
||||||
handleSearch() {
|
handleSearch() {
|
||||||
const kw = this.searchKeyword.trim().toLowerCase();
|
const kw = this.searchKeyword.trim().toLowerCase();
|
||||||
if (!kw) return (this.filteredRecords = [...this.historyRecords]);
|
if (!kw) return (this.filteredRecords = [...this.historyRecords]);
|
||||||
|
|
||||||
// 过滤历史记录
|
// 过滤历史记录
|
||||||
this.filteredRecords = this.historyRecords
|
this.filteredRecords = this.historyRecords
|
||||||
.map(g => ({
|
.map(g => ({
|
||||||
...g,
|
...g,
|
||||||
list: g.list.filter(i =>
|
list: g.list.filter(i =>
|
||||||
i.content.toLowerCase().includes(kw) ||
|
i.content.toLowerCase().includes(kw) ||
|
||||||
i.reply.toLowerCase().includes(kw)
|
i.reply.toLowerCase().includes(kw)
|
||||||
)
|
)
|
||||||
}))
|
}))
|
||||||
.filter(g => g.list.length);
|
.filter(g => g.list.length);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 清除搜索
|
// 清除搜索
|
||||||
clearSearch() {
|
clearSearch() {
|
||||||
this.searchKeyword = '';
|
this.searchKeyword = '';
|
||||||
this.filteredRecords = [...this.historyRecords];
|
this.filteredRecords = [...this.historyRecords];
|
||||||
},
|
},
|
||||||
|
|
||||||
// 高亮搜索关键词
|
// 高亮搜索关键词
|
||||||
highlightKeyword(text) {
|
highlightKeyword(text) {
|
||||||
if (!this.searchKeyword || !text) return text;
|
if (!this.searchKeyword || !text) return text;
|
||||||
const kw = this.searchKeyword.trim();
|
const kw = this.searchKeyword.trim();
|
||||||
return text.replace(
|
return text.replace(
|
||||||
new RegExp(kw, 'gi'),
|
new RegExp(kw, 'gi'),
|
||||||
`<span class="highlight">${kw}</span>`
|
`<span class="highlight">${kw}</span>`
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取分组标题（今天/昨天/7天内等）
|
// 获取分组标题（今天/昨天/7天内等）
|
||||||
getGroupTitle(date) {
|
getGroupTitle(date) {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const today = new Date(now.setHours(0, 0, 0, 0));
|
const today = new Date(now.setHours(0, 0, 0, 0));
|
||||||
const yesterday = new Date(today).setDate(today.getDate() - 1);
|
const yesterday = new Date(today).setDate(today.getDate() - 1);
|
||||||
const week = new Date(today).setDate(today.getDate() - 7);
|
const week = new Date(today).setDate(today.getDate() - 7);
|
||||||
const month = new Date(today).setDate(today.getDate() - 30);
|
const month = new Date(today).setDate(today.getDate() - 30);
|
||||||
|
|
||||||
if (date >= today) return '今天';
|
if (date >= today) return '今天';
|
||||||
if (date >= yesterday) return '昨天';
|
if (date >= yesterday) return '昨天';
|
||||||
if (date >= week) return '7天内';
|
if (date >= week) return '7天内';
|
||||||
if (date >= month) return '30天内';
|
if (date >= month) return '30天内';
|
||||||
return '更早';
|
return '更早';
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化日期为YYYY-MM-DD
|
// 格式化日期为YYYY-MM-DD
|
||||||
formatDate(date) {
|
formatDate(date) {
|
||||||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
|
||||||
.getDate()
|
.getDate()
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, '0')}`;
|
.padStart(2, '0')}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 格式化时间为HH:MM
|
// 格式化时间为HH:MM
|
||||||
formatTime(date) {
|
formatTime(date) {
|
||||||
return `${date.getHours().toString().padStart(2, '0')}:${date
|
return `${date.getHours().toString().padStart(2, '0')}:${date
|
||||||
.getMinutes()
|
.getMinutes()
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, '0')}`;
|
.padStart(2, '0')}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 点击历史记录项
|
// 点击历史记录项
|
||||||
onItemClick(item) {
|
onItemClick(item) {
|
||||||
// 移除HTML标签后触发事件
|
// 移除HTML标签后触发事件
|
||||||
this.$emit('item-click', {
|
this.$emit('item-click', {
|
||||||
...item,
|
...item,
|
||||||
content: item.content.replace(/<[^>]+>/g, ''),
|
content: item.content.replace(/<[^>]+>/g, ''),
|
||||||
reply: item.reply.replace(/<[^>]+>/g, '')
|
reply: item.reply.replace(/<[^>]+>/g, '')
|
||||||
});
|
});
|
||||||
this.closeDrawer();
|
this.closeDrawer();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 抽屉容器样式 */
|
/* 抽屉容器样式 */
|
||||||
.drawer-container {
|
.drawer-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 遮罩层样式 */
|
/* 遮罩层样式 */
|
||||||
.drawer-mask {
|
.drawer-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 抽屉内容区域样式 */
|
/* 抽屉内容区域样式 */
|
||||||
.drawer-content {
|
.drawer-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 66.67%;
|
width: 66.67%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 头部样式 */
|
/* 头部样式 */
|
||||||
.drawer-header {
|
.drawer-header {
|
||||||
padding: 15px 15px 10px;
|
padding: 15px 15px 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-icon {
|
.close-icon {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索栏样式 */
|
/* 搜索栏样式 */
|
||||||
.search-bar {
|
.search-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
tint-color: #999;
|
tint-color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-icon {
|
.clear-icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
tint-color: #999;
|
tint-color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 历史列表样式 */
|
/* 历史列表样式 */
|
||||||
.history-list {
|
.history-list {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分组标题样式 */
|
/* 分组标题样式 */
|
||||||
.group-title {
|
.group-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #888;
|
color: #888;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 历史记录项样式 */
|
/* 历史记录项样式 */
|
||||||
.history-item {
|
.history-item {
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 日期时间样式 */
|
/* 日期时间样式 */
|
||||||
.datetime {
|
.datetime {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 消息内容样式 */
|
/* 消息内容样式 */
|
||||||
.record {
|
.record {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-msg {
|
.user-msg {
|
||||||
display: block;
|
display: block;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-msg {
|
.ai-msg {
|
||||||
display: block;
|
display: block;
|
||||||
color: #333;
|
color: #333;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
background-color: #eef7ff;
|
background-color: #eef7ff;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 关键词高亮样式 */
|
/* 关键词高亮样式 */
|
||||||
.highlight {
|
.highlight {
|
||||||
color: #ff4d4f;
|
color: #ff4d4f;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分隔线样式 */
|
/* 分隔线样式 */
|
||||||
.divider {
|
.divider {
|
||||||
height: 8px;
|
height: 8px;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态提示样式 */
|
/* 空状态提示样式 */
|
||||||
.empty-tip {
|
.empty-tip {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #999;
|
color: #999;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 修复输入框占位符样式 */
|
/* 修复输入框占位符样式 */
|
||||||
input::-webkit-input-placeholder {
|
input::-webkit-input-placeholder {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -39,4 +39,4 @@ module.exports = {
|
|||||||
* 单点登出url
|
* 单点登出url
|
||||||
*/
|
*/
|
||||||
caslogoutUrl: 'https://rsso.gxsdxy.cn/logout?service=http://zhxg.gxsdxy.cn/prod_api_test/getinfo',
|
caslogoutUrl: 'https://rsso.gxsdxy.cn/logout?service=http://zhxg.gxsdxy.cn/prod_api_test/getinfo',
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 518 KiB After Width: | Height: | Size: 4.3 KiB |
Reference in New Issue
Block a user