update:聊天记录展现

2026-07-24 08:03:53 +08:00 · 2025-05-04 12:53:36 +08:00
parent afe88ccfd6
commit 4043d20ea6
6 changed files with 442 additions and 21 deletions
@@ -0,0 +1,366 @@
+<template>
+    <el-dialog :title="'与' + agentName + '的聊天记录' + (currentMacAddress ? '[' + currentMacAddress + ']' : '')"
+        :visible.sync="dialogVisible" width="80%" :before-close="handleClose" custom-class="chat-history-dialog">
+        <div class="chat-container">
+            <div class="session-list" @scroll="handleScroll">
+                <div v-for="session in sessions" :key="session.sessionId" class="session-item"
+                    :class="{ active: currentSessionId === session.sessionId }" @click="selectSession(session)">
+                    <img src="@/assets/xiaozhi-logo.png" class="avatar" />
+                    <div class="session-info">
+                        <div class="session-time">{{ formatTime(session.createdAt) }}</div>
+                        <div class="message-count">{{ session.chatCount }}</div>
+                    </div>
+                </div>
+                <div v-if="loading" class="loading">加载中...</div>
+                <div v-if="!hasMore" class="no-more">没有更多记录了</div>
+            </div>
+            <div class="chat-content">
+                <div v-if="currentSessionId" class="messages">
+                    <div v-for="(message, index) in messagesWithTime" :key="message.id">
+                        <div v-if="message.type === 'time'" class="time-divider">
+                            {{ message.content }}
+                        </div>
+                        <div v-else class="message-item" :class="{ 'user-message': message.chatType === 1 }">
+                            <img :src="message.chatType === 1 ? require('@/assets/user-avatar.png') : require('@/assets/xiaozhi-logo.png')"
+                                class="avatar" />
+                            <div class="message-content">{{ message.content }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="no-session-selected">
+                    请选择会话查看聊天记录
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import Api from '@/apis/api';
+
+export default {
+    name: 'ChatHistoryDialog',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        agentId: {
+            type: String,
+            required: true
+        },
+        agentName: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            sessions: [],
+            messages: [],
+            currentSessionId: '',
+            currentMacAddress: '',
+            page: 1,
+            limit: 10,
+            loading: false,
+            hasMore: true,
+            scrollTimer: null,
+            isFirstLoad: true
+        };
+    },
+    watch: {
+        visible(val) {
+            this.dialogVisible = val;
+            if (val) {
+                this.resetData();
+                this.loadSessions();
+            }
+        },
+        dialogVisible(val) {
+            if (!val) {
+                this.$emit('update:visible', false);
+            }
+        }
+    },
+    computed: {
+        messagesWithTime() {
+            if (!this.messages || this.messages.length === 0) return [];
+
+            const result = [];
+            const TIME_INTERVAL = 60 * 1000; // 1分钟的时间间隔（毫秒）
+
+            // 添加第一条消息的时间标记
+            if (this.messages[0]) {
+                result.push({
+                    type: 'time',
+                    content: this.formatTime(this.messages[0].createdAt),
+                    id: `time-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                });
+            }
+
+            // 处理消息列表
+            for (let i = 0; i < this.messages.length; i++) {
+                const currentMessage = this.messages[i];
+                result.push(currentMessage);
+
+                // 检查是否需要添加时间标记
+                if (i < this.messages.length - 1) {
+                    const currentTime = new Date(currentMessage.createdAt).getTime();
+                    const nextTime = new Date(this.messages[i + 1].createdAt).getTime();
+
+                    if (nextTime - currentTime > TIME_INTERVAL) {
+                        result.push({
+                            type: 'time',
+                            content: this.formatTime(this.messages[i + 1].createdAt),
+                            id: `time-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                        });
+                    }
+                }
+            }
+
+            return result;
+        }
+    },
+    methods: {
+        resetData() {
+            this.sessions = [];
+            this.messages = [];
+            this.currentSessionId = '';
+            this.currentMacAddress = '';
+            this.page = 1;
+            this.loading = false;
+            this.hasMore = true;
+            this.isFirstLoad = true;
+        },
+        handleClose() {
+            this.dialogVisible = false;
+        },
+        loadSessions() {
+            if (this.loading || (!this.isFirstLoad && !this.hasMore)) {
+                return;
+            }
+
+            this.loading = true;
+            const params = {
+                page: this.page,
+                limit: this.limit
+            };
+
+            Api.agent.getAgentSessions(this.agentId, params, (res) => {
+                if (res.data && res.data.data && Array.isArray(res.data.data.list)) {
+                    const list = res.data.data.list;
+                    this.hasMore = list.length === this.limit;
+
+                    this.sessions = [...this.sessions, ...list];
+                    this.page++;
+
+                    if (this.sessions.length > 0 && !this.currentSessionId) {
+                        this.selectSession(this.sessions[0]);
+                    }
+                }
+                this.loading = false;
+                this.isFirstLoad = false;
+            });
+        },
+        selectSession(session) {
+            this.currentSessionId = session.sessionId;
+            Api.agent.getAgentChatHistory(this.agentId, session.sessionId, (res) => {
+                if (res.data && res.data.data) {
+                    this.messages = res.data.data;
+                    if (this.messages.length > 0 && this.messages[0].macAddress) {
+                        this.currentMacAddress = this.messages[0].macAddress;
+                    }
+                }
+            });
+        },
+        handleScroll(e) {
+            if (this.scrollTimer) {
+                clearTimeout(this.scrollTimer);
+            }
+
+            this.scrollTimer = setTimeout(() => {
+                const { scrollTop, scrollHeight, clientHeight } = e.target;
+                // 当滚动到底部时加载更多
+                if (scrollHeight - scrollTop <= clientHeight + 50) {
+                    this.loadSessions();
+                }
+            }, 200);
+        },
+        formatTime(timestamp) {
+            const date = new Date(timestamp);
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const yesterday = new Date(today);
+            yesterday.setDate(yesterday.getDate() - 1);
+
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+
+            if (date >= today) {
+                return `今天 ${hours}:${minutes}`;
+            } else if (date >= yesterday) {
+                return `昨天 ${hours}:${minutes}`;
+            } else {
+                const year = date.getFullYear();
+                const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                const day = date.getDate().toString().padStart(2, '0');
+                return `${year}-${month}-${day} ${hours}:${minutes}`;
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.chat-container {
+    display: flex;
+    height: 600px;
+}
+
+.session-list {
+    width: 250px;
+    border-right: 1px solid #eee;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.session-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.session-item:hover {
+    background-color: #f5f5f5;
+}
+
+.session-item.active {
+    background-color: #e6f7ff;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.session-info {
+    flex: 1;
+}
+
+.session-time {
+    font-size: 14px;
+    color: #272727;
+    float: left;
+    height: 30px;
+    line-height: 30px;
+    width: calc(100% - 30px);
+    /* 为消息数量留出空间 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.message-count {
+    font-size: 14px;
+    color: #fff;
+    background-color: #1890ff;
+    border-radius: 20px;
+    float: left;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    margin-top: 5px;
+    margin-left: 5px;
+}
+
+.chat-content {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.message-item {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.message-item.user-message {
+    flex-direction: row-reverse;
+}
+
+.message-content {
+    max-width: 60%;
+    padding: 10px 15px;
+    border-radius: 8px;
+    background-color: #f0f0f0;
+    margin: 0 10px;
+    text-align: left;
+    line-height: 20px;
+}
+
+.user-message .message-content {
+    background-color: #1890ff;
+    color: white;
+}
+
+.loading,
+.no-more {
+    text-align: center;
+    padding: 10px 10px 30px 10px;
+    color: #999;
+}
+
+.no-session-selected {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #999;
+}
+
+.time-divider {
+    text-align: center;
+    margin: 10px 0;
+    color: #999;
+    font-size: 12px;
+}
+
+.time-divider::before,
+.time-divider::after {
+    content: '';
+    display: inline-block;
+    width: 30%;
+    height: 1px;
+    background-color: #eee;
+    vertical-align: middle;
+    margin: 0 10px;
+}
+</style>
+
+<style>
+.chat-history-dialog {
+    display: flex;
+    flex-direction: column;
+    min-width: 700px;
+    margin: 0 !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 80vh;
+    max-width: 85vw;
+}
+
+.chat-history-dialog .el-dialog__body {
+    padding: 0;
+    overflow: hidden;
+    height: calc(80vh - 54px);
+    /* 减去标题栏的高度 */
+}
+</style>
@@ -26,6 +26,9 @@
      <div class="settings-btn" @click="handleDeviceManage">
        设备管理({{ device.deviceCount }})
      </div>
+      <div class="settings-btn" @click="handleChatHistory">
+        聊天记录
+      </div>
    </div>
    <div class="version-info">
      <div>最近对话：{{ device.lastConnectedAt }}</div>
@@ -51,6 +54,9 @@ export default {
    },
    handleDeviceManage() {
      this.$router.push({ path: '/device-management', query: { agentId: this.device.agentId } });
+    },
+    handleChatHistory() {
+      this.$emit('chat-history', { agentId: this.device.agentId, agentName: this.device.agentName })
    }
  }
 }