Services/shop-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

test(addon/aikefu): 测试会话管理及消息展示

Browse Source
This commit is contained in:
ZF Sun
2025-12-09 09:31:01 +08:00
parent 9c4ccbbd99
commit 443f3c38fc
2 changed files with 85 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/addon/aikefu/shop/view/kefu/conversation.html
View File

@@ -159,8 +159,8 @@
width: '100%', width: '100%',
cols: [[ cols: [[
{type: 'checkbox', fixed: 'left'}, {type: 'checkbox', fixed: 'left'},
{field: 'conversation_id', title: '会话ID', width: 240, align: 'center'}, {field: 'conversation_id', title: '会话ID', width: 280, align: 'center'},
{field: 'user_id', title: '用户ID', width: 150, align: 'center'}, {field: 'user_id', title: '用户ID', width: 200, align: 'center'},
{field: 'name', title: '会话名称', width: 180, align: 'center'}, {field: 'name', title: '会话名称', width: 180, align: 'center'},
{field: 'status', title: '状态', width: 100, align: 'center', templet: '#statusTpl' }, {field: 'status', title: '状态', width: 100, align: 'center', templet: '#statusTpl' },
{field: 'create_time', title: '创建时间', width: 180, align: 'center'}, {field: 'create_time', title: '创建时间', width: 180, align: 'center'},
@@ -172,15 +172,31 @@
limits: [10, 20, 30, 50, 100], limits: [10, 20, 30, 50, 100],
height: 'full-200', height: 'full-200',
text: { text: {
none: '暂无会话数据' none: '暂无会话数据',
error: '加载数据失败，请检查网络或稍后重试'
}, },
parseData: function(res) { parseData: function(res) {
// 将后端返回的数据格式转换为Layui表格所需的格式 // 调试：打印原始数据
console.log('API返回原始数据:', res);
// 确保res存在
if (!res) {
return {
"code": -1,
"msg": "服务器返回数据为空",
"count": 0,
"data": []
};
}
// 适配后端返回的格式：
// 后端返回的data字段包含conversations数组和page_info对象
// 根级的count字段是总记录数
return { return {
"code": res.code, "code": res.code || 0,
"msg": res.msg, "msg": res.msg || "获取数据成功",
"count": res.data ? (res.data.page_info ? res.data.page_info.total : 0) : 0, "count": res.count || 0, // 使用根级的count字段
"data": res.data ? (res.data.conversations ? res.data.conversations : []) : [] "data": Array.isArray(res.data?.conversations) ? res.data.conversations : [] // 使用data.conversations作为表格数据
}; };
} }
}); });

84
src/addon/aikefu/shop/view/kefu/message.html
View File

@@ -65,11 +65,11 @@
max-height: 650px; max-height: 650px;
overflow-y: auto; overflow-y: auto;
padding: 25px; padding: 25px;
background-color: #fafbfc; background-color: #f7f9fc;
border-radius: 8px; border-radius: 12px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
} }
/* 消息项样式 */ /* 消息项样式 */
@@ -77,6 +77,20 @@
margin-bottom: 25px; margin-bottom: 25px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
width: 100%;
}
/* 消息主体容器 */
.message-main {
max-width: 70%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* 用户消息的主体容器 */
.message-item.user .message-main {
align-items: flex-end;
} }
.message-item.user { .message-item.user {
@@ -89,16 +103,28 @@
/* 头像样式 */ /* 头像样式 */
.message-avatar { .message-avatar {
width: 48px; width: 50px;
height: 48px; height: 50px;
border-radius: 50%; border-radius: 50%;
margin: 0 12px; margin-top: 2px;
border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 26px;
flex-shrink: 0;
}
/* 机器人头像位置调整 */
.message-item.assistant .message-avatar {
margin-right: 15px;
margin-left: 5px;
}
/* 用户头像位置调整 */
.message-item.user .message-avatar {
margin-left: 15px;
margin-right: 5px;
} }
/* 用户头像样式 */ /* 用户头像样式 */
@@ -115,12 +141,14 @@
/* 消息内容样式 */ /* 消息内容样式 */
.message-content { .message-content {
max-width: 70%; width: auto;
padding: 16px 20px; padding: 16px 20px;
border-radius: 18px; border-radius: 18px;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.6; line-height: 1.6;
position: relative; position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 4px 0;
} }
.message-item.user .message-content { .message-item.user .message-content {
@@ -147,19 +175,20 @@
/* 消息角色样式 */ /* 消息角色样式 */
.message-role { .message-role {
font-size: 13px; font-size: 12px;
font-weight: 500; font-weight: 600;
margin-bottom: 6px; margin-bottom: 4px;
opacity: 0.8;
} }
.message-item.user .message-role { .message-item.user .message-role {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 0.9);
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
} }
.message-item.assistant .message-role { .message-item.assistant .message-role {
color: #333; color: #555;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
} }
@@ -341,19 +370,26 @@
// 使用用户ID作为角色显示 // 使用用户ID作为角色显示
var role = item.user_id || (item.role === 'user' ? '用户' : '机器人'); var role = item.user_id || (item.role === 'user' ? '用户' : '机器人');
var roleClass = item.user_id ? 'user' : 'assistant'; var roleClass = item.user_id ? 'user' : 'assistant';
// 用户使用用户图标，机器人使用AI图标 // 用户使用用户图标，机器人使用AI机器人图标
var avatar = item.user_id ? '<i class="layui-icon layui-icon-user"></i>' : '<i class="layui-icon layui-icon-chat-fill"></i>'; var avatar = item.user_id ? '<i class="layui-icon layui-icon-user"></i>' : '<i class="layui-icon layui-icon-bot"></i>';
html += '<div class="message-item ' + roleClass + '">'; html += '<div class="message-item ' + roleClass + '">';
if (item.role === 'assistant') { // 机器人消息：头像在左，内容在右
if (roleClass === 'assistant') {
html += '<div class="message-avatar">' + avatar + '</div>'; html += '<div class="message-avatar">' + avatar + '</div>';
html += '<div class="message-main">';
html += '<div class="message-role">' + role + '</div>';
html += '<div class="message-content">' + item.content + '</div>';
html += '<div class="message-time">' + item.create_time + '</div>';
html += '</div>';
} }
html += '<div>'; // 用户消息：内容在左，头像在右
html += '<div class="message-role">' + role + '</div>'; else {
html += '<div class="message-content">' + item.content + '</div>'; html += '<div class="message-main">';
html += '<div class="message-time">' + item.create_time + '</div>'; html += '<div class="message-role">' + role + '</div>';
html += '</div>'; html += '<div class="message-content">' + item.content + '</div>';
if (item.role === 'user') { html += '<div class="message-time">' + item.create_time + '</div>';
html += '</div>';
html += '<div class="message-avatar">' + avatar + '</div>'; html += '<div class="message-avatar">' + avatar + '</div>';
} }
html += '</div>'; html += '</div>';