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

2025-12-08 11:24:57 +08:00
parent 510e8a07d2
commit 58052b1271
3 changed files with 203 additions and 81 deletions
--- a/src/addon/aikefu/shop/controller/Kefu.php
+++ b/src/addon/aikefu/shop/controller/Kefu.php
@@ -221,16 +221,16 @@ class Kefu extends BaseShop
        $limit = input("limit/d", 50);
        $conversation_id = input("conversation_id/s", "");

-        if (empty($conversation_id)) {
-            return $this->error('会话ID不能为空');
-        }
-
        $kefu_message_model = new KefuMessageModel();
        $condition = [
-            ['site_id', '=', $this->site_id],
-            ['conversation_id', '=', $conversation_id]
+            ['site_id', '=', $this->site_id]
        ];

+        // 只有当会话ID不为空时才添加会话ID条件
+        if (!empty($conversation_id)) {
+            $condition[] = ['conversation_id', '=', $conversation_id];
+        }
+
        $message_list = $kefu_message_model->getMessageList($condition, '*', 'create_time asc', $page, $limit);

        return $this->success('获取消息列表成功', null, $message_list);
--- a/src/addon/aikefu/shop/view/kefu/conversation.html
+++ b/src/addon/aikefu/shop/view/kefu/conversation.html
@@ -80,14 +80,14 @@
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            title: '会话管理',
+            width: '100%',
            cols: [[
-                {field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
-                {field: 'conversation_id', title: '会话ID', width: 200, align: 'center'},
-                {field: 'user_id', title: '用户ID', width: 150, align: 'center'},
-                {field: 'name', title: '会话名称', width: 180, align: 'center'},
-                {field: 'status', title: '状态', width: 100, align: 'center' },
-                {field: 'create_time', title: '创建时间', width: 180, align: 'center'},
-                {field: 'update_time', title: '更新时间', width: 180, align: 'center'},
+                {field: 'conversation_id', title: '会话ID', align: 'center'},
+                {field: 'user_id', title: '用户ID', align: 'center'},
+                {field: 'name', title: '会话名称', align: 'center'},
+                {field: 'status', title: '状态', align: 'center' },
+                {field: 'create_time', title: '创建时间', align: 'center'},
+                {field: 'update_time', title: '更新时间', align: 'center'},
                {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
            ]],
            page: true,
--- a/src/addon/aikefu/shop/view/kefu/message.html
+++ b/src/addon/aikefu/shop/view/kefu/message.html
@@ -1,122 +1,232 @@
 <style>
-    .message-list {
-        max-height: 600px;
-        overflow-y: auto;
+    /* 整体页面样式优化 */
+    .layui-card-body {
        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;
        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 {
-        margin-bottom: 20px;
+        margin-bottom: 25px;
        display: flex;
        align-items: flex-start;
    }
+    
    .message-item.user {
        justify-content: flex-end;
    }
+    
    .message-item.assistant {
        justify-content: flex-start;
    }
+    
+    /* 头像样式 */
    .message-avatar {
-        width: 40px;
-        height: 40px;
+        width: 48px;
+        height: 48px;
        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 {
        max-width: 70%;
-        padding: 12px 16px;
+        padding: 16px 20px;
        border-radius: 18px;
        word-wrap: break-word;
-        line-height: 1.5;
+        line-height: 1.6;
+        position: relative;
    }
+    
    .message-item.user .message-content {
        background-color: #1E9FFF;
        color: white;
        border-bottom-right-radius: 4px;
+        box-shadow: 0 2px 8px rgba(30, 159, 255, 0.3);
    }
+    
    .message-item.assistant .message-content {
        background-color: white;
        color: #333;
        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 {
        font-size: 12px;
-        color: #909399;
-        margin-top: 5px;
+        color: #999;
+        margin-top: 8px;
        text-align: center;
    }
+    
+    /* 消息角色样式 */
    .message-role {
-        font-size: 12px;
-        color: #909399;
-        margin-bottom: 5px;
+        font-size: 13px;
+        font-weight: 500;
+        margin-bottom: 6px;
    }
-    .conversation-info {
-        margin-bottom: 20px;
-        padding: 15px;
-        background-color: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-        border: 1px solid #e6e6e6;
+    
+    .message-item.user .message-role {
+        color: rgba(255, 255, 255, 0.9);
+        text-align: right;
    }
-    .conversation-info h3 {
-        margin: 0 0 10px 0;
-        font-size: 16px;
-        color: #333;
-        font-weight: bold;
-    }
-    .conversation-info p {
-        margin: 5px 0;
-        font-size: 14px;
-        color: #606266;
+    
+    .message-item.assistant .message-role {
+        color: #666;
+        text-align: left;
    }
+    
+    /* 状态标签样式 */
    .status-active {
        color: #52c41a;
+        font-weight: 500;
    }
+    
    .status-inactive {
        color: #faad14;
+        font-weight: 500;
    }
-    .search-box {
-        margin-bottom: 20px;
-        padding: 15px;
-        background-color: white;
-        border-radius: 8px;
-        border: 1px solid #e6e6e6;
+    
+    /* 分页样式 */
+    .layui-fixbar {
+        text-align: center;
+        margin-top: 20px;
    }
-    .search-item {
-        margin-right: 15px;
+    
+    /* 按钮样式 */
+    .layui-btn {
+        border-radius: 6px;
    }
-    .search-item label {
-        display: inline-block;
-        width: 80px;
-        text-align: right;
-        margin-right: 10px;
+    
+    .layui-btn-primary:hover {
+        border-color: #1E9FFF;
+        color: #1E9FFF;
    }
-    .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>

 <div class="layui-card-body">
    <!-- 搜索区域 -->
    <div class="search-box">
-        <form class="layui-form" id="searchForm">
+        <form class="layui-form search-form" id="searchForm">
            <div class="search-item">
                <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 class="search-item">
                <button type="button" class="layui-btn layui-btn-primary" id="searchBtn">搜索</button>
+                <button type="button" class="layui-btn" id="resetBtn">重置</button>
            </div>
        </form>
    </div>
    
    <!-- 会话信息 -->
    <div id="conversationInfo" class="conversation-info">
-        <!-- 会话信息将通过JavaScript动态加载 -->
+        <h3>消息记录</h3>
+        <p><span class="status-active">默认显示所有会话消息</span>，可通过会话ID进行过滤</p>
    </div>
    
    <!-- 消息列表 -->
@@ -139,10 +249,10 @@
        var total = 0;
        var conversation_id = $('#conversation_id').val();
        
-        // 加载会话信息
+        // 加载会话信息（当指定会话ID时显示）
        function loadConversationInfo() {
            if (!conversation_id) {
-                $('#conversationInfo').html('<h3>会话详情</h3><p>请输入会话ID进行搜索</p>');
+                $('#conversationInfo').html('<h3>消息记录</h3><p><span class="status-active">默认显示所有会话消息</span>，可通过会话ID进行过滤</p>');
                return;
            }
            
@@ -165,7 +275,7 @@
                        html += '<p><strong>更新时间：</strong>' + info.update_time + '</p>';
                        $('#conversationInfo').html(html);
                    } else {
-                        $('#conversationInfo').html('<h3>会话详情</h3><p>未找到会话信息</p>');
+                        $('#conversationInfo').html('<h3>会话详情</h3><p>未找到该会话的详细信息</p>');
                    }
                },
                error: function() {
@@ -176,19 +286,21 @@
        
        // 加载消息列表
        function loadMessageList() {
-            if (!conversation_id) {
-                $('#messageList').html('<div style="text-align: center; padding: 50px; color: #999;">请输入会话ID进行搜索</div>');
-                return;
+            // 构建请求数据
+            var requestData = {
+                page: page,
+                limit: limit
+            };
+            
+            // 如果有会话ID，则添加到请求数据中
+            if (conversation_id) {
+                requestData.conversation_id = conversation_id;
            }
            
            $.ajax({
                url: ns.url("aikefu://shop/kefu/getMessageList"),
                type: 'POST',
-                data: {
-                    page: page,
-                    limit: limit,
-                    conversation_id: conversation_id
-                },
+                data: requestData,
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
@@ -217,7 +329,10 @@
                                html += '</div>';
                            });
                        } 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);
@@ -259,16 +374,23 @@
        
        // 搜索按钮点击事件
        $('#searchBtn').click(function() {
-            conversation_id = $('#conversation_id').val();
+            conversation_id = $('#conversation_id').val().trim();
            page = 1;
            loadConversationInfo();
            loadMessageList();
        });
        
-        // 初始化加载
-        if (conversation_id) {
+        // 重置按钮点击事件
+        $('#resetBtn').click(function() {
+            $('#conversation_id').val('');
+            conversation_id = '';
+            page = 1;
            loadConversationInfo();
            loadMessageList();
-        }
+        });
+        
+        // 初始化加载（默认显示所有消息）
+        loadConversationInfo();
+        loadMessageList();
    });
 </script>