AI聊天更新历史记录
This commit is contained in:
14651
7
.trae/TODO.md
Normal file
7
.trae/TODO.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# TODO:
|
||||
|
||||
- [x] 1: 分析控制台输出，确定API返回数据的正确结构 (priority: High)
|
||||
- [x] 2: 修复initChat方法中AI消息内容的数据映射 (priority: High)
|
||||
- [x] 3: 修复loadMoreHistory方法中的数据映射 (priority: High)
|
||||
- [x] 4: 移除调试代码，恢复正常UI显示 (priority: Medium)
|
||||
- [x] 5: 测试修复后的AI消息显示功能 (priority: Medium)
|
||||
@@ -1,38 +1,78 @@
|
||||
// src/api/index.js
|
||||
// src/api/ai_index.js
|
||||
// import request from '@/utils/ai_request.js'
|
||||
import request from "../../utils/ai_request";
|
||||
import request from "@/utils/ai_request.js";
|
||||
|
||||
// 获取历史
|
||||
export const getHistory = ({
|
||||
conversationId,
|
||||
user,
|
||||
limit = 20
|
||||
limit = 20,
|
||||
beforeId
|
||||
}) => {
|
||||
const params = {
|
||||
conversationId,
|
||||
user,
|
||||
limit
|
||||
};
|
||||
|
||||
// 如果有beforeId参数，添加到请求中
|
||||
if (beforeId) {
|
||||
params.beforeId = beforeId;
|
||||
}
|
||||
|
||||
return request({
|
||||
url: '/aitutor/aichat/getMessagesToUser',
|
||||
method: 'get',
|
||||
params: {
|
||||
conversationId,
|
||||
user,
|
||||
limit
|
||||
}
|
||||
// headers: {
|
||||
// Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBmMTY3NmY2LTgwOGMtNGUwMC04NDJjLWIwNmY1ZTM5NzJlNCJ9.VVc6OwQ-Xn9pxzYbPhlCpvDp6TwESS00gJi9IXUEIbFw4RFACZDmYCYjQ7voTM4fppy9SAMJCWT-L7Uy-K1eqw'
|
||||
// }
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// export const getHistory = ({
|
||||
// conversationId,
|
||||
// user,
|
||||
// limit = 20
|
||||
// }) => {
|
||||
// return request({
|
||||
// url: '/aitutor/aichat/getMessagesToUser',
|
||||
// method: 'get',
|
||||
// params: {
|
||||
// conversationId,
|
||||
// user,
|
||||
// limit
|
||||
// }
|
||||
// // headers: {
|
||||
// // Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBmMTY3NmY2LTgwOGMtNGUwMC04NDJjLWIwNmY1ZTM5NzJlNCJ9.VVc6OwQ-Xn9pxzYbPhlCpvDp6TwESS00gJi9IXUEIbFw4RFACZDmYCYjQ7voTM4fppy9SAMJCWT-L7Uy-K1eqw'
|
||||
// // }
|
||||
// });
|
||||
// };
|
||||
|
||||
// 点赞/点踩 action: 1 点赞 0 点踩
|
||||
export const sendFeedback = ({
|
||||
messageId,
|
||||
action
|
||||
action,
|
||||
user
|
||||
}) => {
|
||||
return request({
|
||||
url: '/api/chat/feedback',
|
||||
url: '/aitutor/aichat/feedback',
|
||||
method: 'post',
|
||||
data: {
|
||||
messageId,
|
||||
action
|
||||
message_id: messageId,
|
||||
rating: action === 1 ? 'like' : 'dislike', // 添加rating参数
|
||||
user
|
||||
}
|
||||
});
|
||||
};
|
||||
// export const sendFeedback = ({
|
||||
// messageId,
|
||||
// action
|
||||
// }) => {
|
||||
// return request({
|
||||
// url: '/api/chat/feedback',
|
||||
// method: 'post',
|
||||
// data: {
|
||||
// messageId,
|
||||
// action
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
@@ -50,362 +50,350 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getHistory
|
||||
} from '../../api/aiChat/ai_index.js'; // 历史记录API
|
||||
import {
|
||||
getHistory
|
||||
} from '../../api/aiChat/ai_index.js';
|
||||
|
||||
export default {
|
||||
name: 'HistoryDrawer',
|
||||
props: {
|
||||
visible: Boolean // 控制抽屉显示
|
||||
export default {
|
||||
name: 'HistoryDrawer',
|
||||
props: {
|
||||
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() {
|
||||
return {
|
||||
historyRecords: [], // 原始历史记录
|
||||
filteredRecords: [], // 过滤后的历史记录
|
||||
searchKeyword: '' // 搜索关键词
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听visible变化，显示时加载记录
|
||||
visible(newVal) {
|
||||
if (newVal) this.loadHistoryRecords();
|
||||
else this.clearSearch();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭抽屉
|
||||
closeDrawer() {
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
/* ========== 1. 读本地缓存兜底 ========== */
|
||||
renderLocal(list) {
|
||||
// 将本地缓存的消息按日期分组
|
||||
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((m, idx) => {
|
||||
const date = new Date();
|
||||
const formatted = {
|
||||
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: m.sender === 'user' ? m.content : '',
|
||||
reply: m.sender === 'ai' ? m.content : '',
|
||||
id: idx
|
||||
content: item.query || item.content || '未知内容',
|
||||
reply: item.answer || item.reply || '暂无回复',
|
||||
timestamp: timestamp
|
||||
};
|
||||
|
||||
const title = this.getGroupTitle(date);
|
||||
(groupMap[title] ||= []).push(formatted);
|
||||
(groupMap[title] ||= []).push(record);
|
||||
});
|
||||
|
||||
// 转换为数组形式
|
||||
this.historyRecords = Object.entries(groupMap).map(([t, arr]) => ({
|
||||
title: t,
|
||||
list: arr
|
||||
// 5. 排序并更新数据
|
||||
this.historyRecords = Object.entries(groupMap).map(([title, arr]) => ({
|
||||
title,
|
||||
list: arr.sort((a, b) => b.timestamp - a.timestamp)
|
||||
}));
|
||||
|
||||
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, '')
|
||||
console.log('最终处理的历史记录:', this.historyRecords);
|
||||
} catch (e) {
|
||||
console.error('加载失败:', e);
|
||||
uni.showToast({
|
||||
title: `加载失败: ${e.message}`,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
this.closeDrawer();
|
||||
this.historyRecords = [];
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 处理搜索输入
|
||||
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-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-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-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;
|
||||
}
|
||||
/* 头部样式 */
|
||||
.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;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.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-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-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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/* 历史列表样式 */
|
||||
.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;
|
||||
}
|
||||
/* 分组标题样式 */
|
||||
.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;
|
||||
}
|
||||
/* 历史记录项样式 */
|
||||
.history-item {
|
||||
padding: 15px 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 日期时间样式 */
|
||||
.datetime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/* 日期时间样式 */
|
||||
.datetime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.date {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 消息内容样式 */
|
||||
.record {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* 消息内容样式 */
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ai-msg {
|
||||
display: block;
|
||||
color: #333;
|
||||
padding: 6px 10px;
|
||||
background-color: #eef7ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 关键词高亮样式 */
|
||||
.highlight {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 关键词高亮样式 */
|
||||
.highlight {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 分隔线样式 */
|
||||
.divider {
|
||||
height: 8px;
|
||||
background-color: #f9f9f9;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* 分隔线样式 */
|
||||
.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;
|
||||
}
|
||||
/* 空状态提示样式 */
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* 修复输入框占位符样式 */
|
||||
input::-webkit-input-placeholder {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* 修复输入框占位符样式 */
|
||||
input::-webkit-input-placeholder {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #F5F5F5;
|
||||
background-color: #f5f5f5;
|
||||
padding-top: 10px;
|
||||
/* 为固定导航栏预留空间 */
|
||||
box-sizing: border-box;
|
||||
@@ -45,6 +45,7 @@
|
||||
color: #333;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
margin-right: 45px;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -166,7 +167,7 @@
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
@@ -260,10 +261,9 @@
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* 可点击文档名 */
|
||||
.doc-name-link {
|
||||
color: #007AFF;
|
||||
color: #007aff;
|
||||
text-decoration: underline;
|
||||
margin-right: 16rpx;
|
||||
font-size: 10rpx;
|
||||
@@ -301,7 +301,7 @@
|
||||
}
|
||||
|
||||
.doc-name-link {
|
||||
color: #007AFF;
|
||||
color: #007aff;
|
||||
text-decoration: underline;
|
||||
margin-right: 16rpx;
|
||||
font-size: clamp(13px, 3vw, 15px);
|
||||
@@ -344,6 +344,28 @@
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.loading-history {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.no-more-history {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #ccc;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
border-top: 1px dashed #eee;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* ============= 小屏设备适配 ============= */
|
||||
@media (max-width: 600px) {
|
||||
.message-content {
|
||||
|
||||
@@ -6,9 +6,13 @@ import {
|
||||
|
||||
const service = axios.create({
|
||||
// baseURL: 'http://localhost:9090/dev-api/aitutor/aichat',
|
||||
baseURL: 'http://localhost:8088/aitutor/aichat',
|
||||
// baseURL: 'http://localhost:8088/aitutor/aichat',
|
||||
// baseURL: 'http://localhost:8080/aitutor/aichat',
|
||||
baseURL: 'http://localhost:8088',
|
||||
timeout: 15000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器：统一加 token
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// src/utils/ai_stream.js (H5 优化版)
|
||||
// src/utils/ai_stream.js
|
||||
import {
|
||||
getToken
|
||||
} from '@/utils/auth';
|
||||
@@ -23,7 +23,6 @@ export function createChatStream(params) {
|
||||
const fetchPromise = fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'text/event-stream',
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'X-Request-ID': requestId
|
||||
@@ -38,20 +37,21 @@ export function createChatStream(params) {
|
||||
}),
|
||||
signal: controller.signal
|
||||
})
|
||||
.then(resp => {
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||||
if (!resp.body) throw new Error('Response body is null');
|
||||
return resp.body;
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
if (!response.body) throw new Error('Response body is null');
|
||||
return {
|
||||
reader: response.body.getReader(),
|
||||
decoder: new TextDecoder('utf-8')
|
||||
};
|
||||
});
|
||||
|
||||
return fetchPromise.then(body => ({
|
||||
stream: Promise.resolve({
|
||||
reader: body.getReader(),
|
||||
decoder: new TextDecoder('utf-8')
|
||||
}),
|
||||
cancel: reason => !controller.signal.aborted && controller.abort(reason)
|
||||
})).catch(err => ({
|
||||
stream: Promise.reject(err),
|
||||
cancel: () => {}
|
||||
}));
|
||||
return {
|
||||
stream: fetchPromise,
|
||||
cancel: (reason) => {
|
||||
if (!controller.signal.aborted) {
|
||||
controller.abort(reason);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user