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

chore(aikefu): 更新UI： 会话管理

Browse Source
This commit is contained in:
ZF Sun
2025-12-08 11:24:57 +08:00
parent 510e8a07d2
commit 58052b1271
3 changed files with 203 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/addon/aikefu/shop/controller/Kefu.php
View File

@@ -221,16 +221,16 @@ class Kefu extends BaseShop
$limit = input("limit/d", 50); $limit = input("limit/d", 50);
$conversation_id = input("conversation_id/s", ""); $conversation_id = input("conversation_id/s", "");
if (empty($conversation_id)) {
return $this->error('会话ID不能为空');
}
$kefu_message_model = new KefuMessageModel(); $kefu_message_model = new KefuMessageModel();
$condition = [ $condition = [
['site_id', '=', $this->site_id], ['site_id', '=', $this->site_id]
['conversation_id', '=', $conversation_id]
]; ];
// 只有当会话ID不为空时才添加会话ID条件
if (!empty($conversation_id)) {
$condition[] = ['conversation_id', '=', $conversation_id];
}
$message_list = $kefu_message_model->getMessageList($condition, '*', 'create_time asc', $page, $limit); $message_list = $kefu_message_model->getMessageList($condition, '*', 'create_time asc', $page, $limit);
return $this->success('获取消息列表成功', null, $message_list); return $this->success('获取消息列表成功', null, $message_list);

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

@@ -80,14 +80,14 @@
toolbar: '#toolbarDemo', toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print'], defaultToolbar: ['filter', 'exports', 'print'],
title: '会话管理', title: '会话管理',
width: '100%',
cols: [[ cols: [[
{field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'}, {field: 'conversation_id', title: '会话ID', align: 'center'},
{field: 'conversation_id', title: '会话ID', width: 200, align: 'center'}, {field: 'user_id', title: '用户ID', align: 'center'},
{field: 'user_id', title: '用户ID', width: 150, align: 'center'}, {field: 'name', title: '会话名称', align: 'center'},
{field: 'name', title: '会话名称', width: 180, align: 'center'}, {field: 'status', title: '状态', align: 'center' },
{field: 'status', title: '状态', width: 100, align: 'center' }, {field: 'create_time', title: '创建时间', align: 'center'},
{field: 'create_time', title: '创建时间', width: 180, align: 'center'}, {field: 'update_time', title: '更新时间', align: 'center'},
{field: 'update_time', title: '更新时间', width: 180, align: 'center'},
{fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'} {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
]], ]],
page: true, page: true,

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

@@ -1,122 +1,232 @@
<style> <style>
.message-list { /* 整体页面样式优化 */
max-height: 600px; .layui-card-body {
overflow-y: auto;
padding: 20px; padding: 20px;
background-color: #f5f7fa; }
/* 搜索区域样式 */
.search-box {
margin-bottom: 20px;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
border: 1px solid #e8e8e8;
}
.search-form {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.search-item {
display: flex;
align-items: center;
}
.search-item label {
width: 80px;
text-align: right;
margin-right: 10px;
font-weight: 500;
color: #333;
}
/* 会话信息区域样式 */
.conversation-info {
margin-bottom: 20px;
padding: 20px;
background-color: #f7f9fc;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
border: 1px solid #e8e8e8;
}
.conversation-info h3 {
margin: 0 0 15px 0;
font-size: 18px;
color: #333;
font-weight: 600;
border-bottom: 2px solid #1E9FFF;
padding-bottom: 8px;
display: inline-block;
}
.conversation-info p {
margin: 10px 0;
font-size: 14px;
color: #666;
}
/* 消息列表样式优化 */
.message-list {
max-height: 650px;
overflow-y: auto;
padding: 25px;
background-color: #fafbfc;
border-radius: 8px; border-radius: 8px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #e6e6e6; border: 1px solid #e8e8e8;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
} }
/* 消息项样式 */
.message-item { .message-item {
margin-bottom: 20px; margin-bottom: 25px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
.message-item.user { .message-item.user {
justify-content: flex-end; justify-content: flex-end;
} }
.message-item.assistant { .message-item.assistant {
justify-content: flex-start; justify-content: flex-start;
} }
/* 头像样式 */
.message-avatar { .message-avatar {
width: 40px; width: 48px;
height: 40px; height: 48px;
border-radius: 50%; border-radius: 50%;
margin: 0 10px; margin: 0 12px;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
} }
/* 消息内容样式 */
.message-content { .message-content {
max-width: 70%; max-width: 70%;
padding: 12px 16px; padding: 16px 20px;
border-radius: 18px; border-radius: 18px;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.5; line-height: 1.6;
position: relative;
} }
.message-item.user .message-content { .message-item.user .message-content {
background-color: #1E9FFF; background-color: #1E9FFF;
color: white; color: white;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
box-shadow: 0 2px 8px rgba(30, 159, 255, 0.3);
} }
.message-item.assistant .message-content { .message-item.assistant .message-content {
background-color: white; background-color: white;
color: #333; color: #333;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
/* 消息时间样式 */
.message-time { .message-time {
font-size: 12px; font-size: 12px;
color: #909399; color: #999;
margin-top: 5px; margin-top: 8px;
text-align: center; text-align: center;
} }
/* 消息角色样式 */
.message-role { .message-role {
font-size: 12px; font-size: 13px;
color: #909399; font-weight: 500;
margin-bottom: 5px; margin-bottom: 6px;
} }
.conversation-info {
margin-bottom: 20px; .message-item.user .message-role {
padding: 15px; color: rgba(255, 255, 255, 0.9);
background-color: white; text-align: right;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #e6e6e6;
} }
.conversation-info h3 {
margin: 0 0 10px 0; .message-item.assistant .message-role {
font-size: 16px; color: #666;
color: #333; text-align: left;
font-weight: bold;
}
.conversation-info p {
margin: 5px 0;
font-size: 14px;
color: #606266;
} }
/* 状态标签样式 */
.status-active { .status-active {
color: #52c41a; color: #52c41a;
font-weight: 500;
} }
.status-inactive { .status-inactive {
color: #faad14; color: #faad14;
font-weight: 500;
} }
.search-box {
margin-bottom: 20px; /* 分页样式 */
padding: 15px; .layui-fixbar {
background-color: white; text-align: center;
border-radius: 8px; margin-top: 20px;
border: 1px solid #e6e6e6;
} }
.search-item {
margin-right: 15px; /* 按钮样式 */
.layui-btn {
border-radius: 6px;
} }
.search-item label {
display: inline-block; .layui-btn-primary:hover {
width: 80px; border-color: #1E9FFF;
text-align: right; color: #1E9FFF;
margin-right: 10px;
} }
.layui-btn-sm {
margin-left: 5px; /* 空状态样式 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state i {
font-size: 48px;
margin-bottom: 15px;
display: block;
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-content {
max-width: 85%;
}
.search-form {
flex-direction: column;
align-items: stretch;
}
.search-item {
margin-bottom: 10px;
}
.search-item label {
width: auto;
text-align: left;
}
} }
</style> </style>
<div class="layui-card-body"> <div class="layui-card-body">
<!-- 搜索区域 --> <!-- 搜索区域 -->
<div class="search-box"> <div class="search-box">
<form class="layui-form" id="searchForm"> <form class="layui-form search-form" id="searchForm">
<div class="search-item"> <div class="search-item">
<label for="conversation_id">会话ID</label> <label for="conversation_id">会话ID</label>
<input type="text" name="conversation_id" id="conversation_id" placeholder="请输入会话ID" value="{$conversation_id ?? ''}" class="layui-input" style="width: 200px; display: inline-block;"> <input type="text" name="conversation_id" id="conversation_id" placeholder="请输入会话ID进行过滤" value="{$conversation_id ?? ''}" class="layui-input" style="width: 250px; display: inline-block;">
</div> </div>
<div class="search-item"> <div class="search-item">
<button type="button" class="layui-btn layui-btn-primary" id="searchBtn">搜索</button> <button type="button" class="layui-btn layui-btn-primary" id="searchBtn">搜索</button>
<button type="button" class="layui-btn" id="resetBtn">重置</button>
</div> </div>
</form> </form>
</div> </div>
<!-- 会话信息 --> <!-- 会话信息 -->
<div id="conversationInfo" class="conversation-info"> <div id="conversationInfo" class="conversation-info">
<!-- 会话信息将通过JavaScript动态加载 --> <h3>消息记录</h3>
<p><span class="status-active">默认显示所有会话消息</span>，可通过会话ID进行过滤</p>
</div> </div>
<!-- 消息列表 --> <!-- 消息列表 -->
@@ -139,10 +249,10 @@
var total = 0; var total = 0;
var conversation_id = $('#conversation_id').val(); var conversation_id = $('#conversation_id').val();
// 加载会话信息 // 加载会话信息（当指定会话ID时显示）
function loadConversationInfo() { function loadConversationInfo() {
if (!conversation_id) { if (!conversation_id) {
$('#conversationInfo').html('<h3>会话详情</h3><p>请输入会话ID进行搜索</p>'); $('#conversationInfo').html('<h3>消息记录</h3><p><span class="status-active">默认显示所有会话消息</span>，可通过会话ID进行过滤</p>');
return; return;
} }
@@ -165,7 +275,7 @@
html += '<p><strong>更新时间：</strong>' + info.update_time + '</p>'; html += '<p><strong>更新时间：</strong>' + info.update_time + '</p>';
$('#conversationInfo').html(html); $('#conversationInfo').html(html);
} else { } else {
$('#conversationInfo').html('<h3>会话详情</h3><p>未找到会话信息</p>'); $('#conversationInfo').html('<h3>会话详情</h3><p>未找到该会话的详细信息</p>');
} }
}, },
error: function() { error: function() {
@@ -176,19 +286,21 @@
// 加载消息列表 // 加载消息列表
function loadMessageList() { function loadMessageList() {
if (!conversation_id) { // 构建请求数据
$('#messageList').html('<div style="text-align: center; padding: 50px; color: #999;">请输入会话ID进行搜索</div>'); var requestData = {
return; page: page,
limit: limit
};
// 如果有会话ID，则添加到请求数据中
if (conversation_id) {
requestData.conversation_id = conversation_id;
} }
$.ajax({ $.ajax({
url: ns.url("aikefu://shop/kefu/getMessageList"), url: ns.url("aikefu://shop/kefu/getMessageList"),
type: 'POST', type: 'POST',
data: { data: requestData,
page: page,
limit: limit,
conversation_id: conversation_id
},
dataType: 'json', dataType: 'json',
success: function(res) { success: function(res) {
if (res.code === 0) { if (res.code === 0) {
@@ -217,7 +329,10 @@
html += '</div>'; html += '</div>';
}); });
} else { } else {
html += '<div style="text-align: center; padding: 50px; color: #999;">暂无消息记录</div>'; html += '<div class="empty-state">';
html += '<i class="layui-icon layui-icon-message"></i>';
html += '<p>暂无消息记录</p>';
html += '</div>';
} }
$('#messageList').html(html); $('#messageList').html(html);
@@ -259,16 +374,23 @@
// 搜索按钮点击事件 // 搜索按钮点击事件
$('#searchBtn').click(function() { $('#searchBtn').click(function() {
conversation_id = $('#conversation_id').val(); conversation_id = $('#conversation_id').val().trim();
page = 1; page = 1;
loadConversationInfo(); loadConversationInfo();
loadMessageList(); loadMessageList();
}); });
// 初始化加载 // 重置按钮点击事件
if (conversation_id) { $('#resetBtn').click(function() {
$('#conversation_id').val('');
conversation_id = '';
page = 1;
loadConversationInfo(); loadConversationInfo();
loadMessageList(); loadMessageList();
} });
// 初始化加载（默认显示所有消息）
loadConversationInfo();
loadMessageList();
}); });
</script> </script>