test(addon/aikefu): 测试会话管理及消息展示是否有分页功能

This commit is contained in:
2025-12-09 10:47:04 +08:00
parent 345e7393ae
commit 2f9e1fabd6

View File

@@ -188,37 +188,35 @@
var role = item.role === 'user' ? (item.user_id ? '用户-' + item.user_id : '用户') : '机器人';
var roleClass = item.role === 'user' ? 'user' : 'assistant';
var avatar = item.role === 'user' ? '/addon/aikefu/static/images/user.svg' : '/addon/aikefu/static/images/robot.svg';
}}}
<div class="message-item {{roleClass}}">
{{# if(item.role === 'assistant') {
<img src="{{avatar}}" class="message-avatar">
}}}
<div>
<div class="message-role">{{role}}</div>
<div class="message-content">{{item.content}}</div>
<div class="message-time">{{item.create_time}}</div>
</div>
{{# if(item.role === 'user') {
<img src="{{avatar}}" class="message-avatar">
}}}
</div>
{{# });
<div class="message-item {{= roleClass }}">
{{# if(item.role === 'assistant') { }}}
<img src="{{= avatar }}" class="message-avatar">
{{# } }}
<div>
<div class="message-role">{{= role }}</div>
<div class="message-content">{{= item.content }}</div>
<div class="message-time">{{= item.create_time }}</div>
</div>
{{# if(item.role === 'user') { }}}
<img src="{{= avatar }}" class="message-avatar">
{{# } }}
</div>
});
} else {
}}}
<div class="empty-state">
<i class="layui-icon layui-icon-message"></i>
<p>暂无消息记录</p>
</div>
{{# }
}}
<div class="empty-state">
<i class="layui-icon layui-icon-message"></i>
<p>暂无消息记录</p>
</div>
} }}
</div>
</script>
<script>
layui.use(['table', 'form', 'layer'], function() {
layui.use(['table', 'form', 'layer', 'laypage'], function() {
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var laypage = layui.laypage;
// 渲染表格
var tableIns = table.render({
@@ -315,60 +313,90 @@
layer.open({
type: 1,
title: '消息记录',
content: '<div class="message-list" style="padding: 25px; max-height: 650px; overflow-y: auto;">加载中...</div>',
content: '<div style="padding: 25px; max-height: 700px;"><div class="message-list" style="max-height: 580px; overflow-y: auto; margin-bottom: 20px;">加载中...</div><div id="messagePage" style="text-align: center;"></div></div>',
area: ['80%', '70%'],
success: function(layero, index) {
// 获取消息列表
$.ajax({
url: ns.url("aikefu://shop/kefu/getMessageList"),
type: 'POST',
data: {
conversation_id: data.conversation_id,
page: 1,
limit: 100, // 加载最多100条消息
sort_field: 'create_time',
sort_order: 'desc' // 默认最新消息在前面
},
dataType: 'json',
success: function(res) {
var messageList = res.data?.messages || [];
var html = '';
if (messageList.length > 0) {
messageList.forEach(function(item) {
var role = item.role === 'user' ? (item.user_id ? '用户-' + item.user_id : '用户') : '机器人';
var roleClass = item.role === 'user' ? 'user' : 'assistant';
var avatar = item.role === 'user' ? '/addon/aikefu/static/images/user.svg' : '/addon/aikefu/static/images/robot.svg';
html += '<div class="message-item ' + roleClass + '">';
if (item.role === 'assistant') {
html += '<img src="' + avatar + '" class="message-avatar">';
}
html += '<div>';
html += '<div class="message-role">' + role + '</div>';
html += '<div class="message-content">' + item.content + '</div>';
html += '<div class="message-time">' + item.create_time + '</div>';
var currentPage = 1;
var pageSize = 15; // 每页显示15条消息
var total = 0;
// 加载消息列表函数
function loadMessages(page) {
$.ajax({
url: ns.url("aikefu://shop/kefu/getMessageList"),
type: 'POST',
data: {
conversation_id: data.conversation_id,
page: page,
limit: pageSize,
sort_field: 'create_time',
sort_order: 'desc' // 默认最新消息在前面
},
dataType: 'json',
success: function(res) {
var messageList = res.data?.messages || [];
total = res.data?.total || 0;
var html = '';
if (messageList.length > 0) {
messageList.forEach(function(item) {
var role = item.role === 'user' ? (item.user_id ? '用户-' + item.user_id : '用户') : '机器人';
var roleClass = item.role === 'user' ? 'user' : 'assistant';
var avatar = item.role === 'user' ? '/addon/aikefu/static/images/user.svg' : '/addon/aikefu/static/images/robot.svg';
html += '<div class="message-item ' + roleClass + '">';
if (item.role === 'assistant') {
html += '<img src="' + avatar + '" class="message-avatar">';
}
html += '<div>';
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>';
if (item.role === 'user') {
html += '<img src="' + avatar + '" class="message-avatar">';
}
html += '</div>';
});
} else {
html += '<div class="empty-state">';
html += '<i class="layui-icon layui-icon-message"></i>';
html += '<p>暂无消息记录</p>';
html += '</div>';
if (item.role === 'user') {
html += '<img src="' + avatar + '" class="message-avatar">';
}
html += '</div>';
});
} else {
html += '<div class="empty-state">';
html += '<i class="layui-icon layui-icon-message"></i>';
html += '<p>暂无消息记录</p>';
html += '</div>';
}
layero.find('.message-list').html(html);
// 滚动到顶部显示当前页消息
layero.find('.message-list').scrollTop(0);
// 渲染分页控件
initPagination(total, page);
},
error: function() {
layero.find('.message-list').html('<div class="empty-state">加载消息失败</div>');
}
layero.find('.message-list').html(html);
// 默认滚动到底部(最新消息)
layero.find('.message-list').scrollTop(layero.find('.message-list')[0].scrollHeight);
},
error: function() {
layero.find('.message-list').html('<div class="empty-state">加载消息失败</div>');
}
});
});
}
// 初始化分页控件
function initPagination(total, curr) {
layui.laypage.render({
elem: layero.find('#messagePage')[0],
count: total,
limit: pageSize,
curr: curr,
layout: ['prev', 'page', 'next', 'count', 'skip'],
jump: function(obj, first) {
if (!first) {
currentPage = obj.curr;
loadMessages(currentPage);
}
}
});
}
// 初始加载第一页消息
loadMessages(currentPage);
}
});
} else if (layEvent === 'end') {