fix: 渠道账号群聊同步缓存 key 及成员名称兜底；统一 Docker/Maven 项目约定

admin-web/src/views/Messages.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="messages-layout">
+    <div class="conversation-list">
+      <div class="conv-search">
+        <el-input v-model="search" placeholder="搜索会话" prefix-icon="Search" />
+      </div>
+      <div class="conv-items">
+        <div
+          v-for="conv in conversations"
+          :key="conv.id"
+          class="conv-item"
+          :class="{ active: current?.id === conv.id }"
+          @click="current = conv"
+        >
+          <div class="conv-title">{{ conv.name }}</div>
+          <div class="conv-preview">{{ conv.preview }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="chat-area" v-if="current">
+      <div class="chat-header">
+        <span class="chat-name">{{ current.name }}</span>
+        <div class="chat-actions">
+          <el-button link type="primary">打标签</el-button>
+          <el-button link type="primary">会话详情</el-button>
+        </div>
+      </div>
+      <div class="chat-body">
+        <div
+          v-for="(msg, idx) in current.messages"
+          :key="idx"
+          class="chat-msg"
+          :class="msg.self ? 'self' : 'other'"
+        >
+          <div class="chat-bubble">{{ msg.content }}</div>
+        </div>
+      </div>
+      <div class="chat-footer">
+        <el-input v-model="reply" placeholder="输入消息..." @keyup.enter="send" />
+        <el-button type="primary" @click="send">发送</el-button>
+      </div>
+    </div>
+    <div class="chat-empty" v-else>
+      <el-empty description="请选择会话" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const search = ref('')
+const reply = ref('')
+const current = ref<any>(null)
+
+const conversations = ref([
+  {
+    id: 1,
+    name: '艾先生',
+    preview: '我要查询订单状态',
+    messages: [
+      { content: '我要查询订单状态', self: false },
+      { content: '订单号是 20250709001', self: false },
+      { content: '好的，已为您查询到订单正在发货中。', self: true },
+    ],
+  },
+  {
+    id: 2,
+    name: '华东销售群',
+    preview: '[图片] 车牌号 京A12345',
+    messages: [
+      { content: '[图片] 车牌号 京A12345', self: false },
+    ],
+  },
+])
+
+function send() {
+  if (!reply.value.trim() || !current.value) return
+  current.value.messages.push({ content: reply.value, self: true })
+  current.value.preview = reply.value
+  reply.value = ''
+}
+</script>
+
+<style scoped>
+.messages-layout {
+  display: flex;
+  height: calc(100vh - 140px);
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.conversation-list {
+  width: 280px;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+}
+.conv-search {
+  padding: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+.conv-items {
+  flex: 1;
+  overflow-y: auto;
+}
+.conv-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f8fafc;
+  cursor: pointer;
+}
+.conv-item:hover,
+.conv-item.active {
+  background: #f8fafc;
+}
+.conv-title {
+  font-weight: 500;
+  font-size: 14px;
+  color: #0f172a;
+}
+.conv-preview {
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.chat-header {
+  height: 56px;
+  border-bottom: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+.chat-name {
+  font-weight: 600;
+}
+.chat-body {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background: #f8fafc;
+}
+.chat-msg {
+  display: flex;
+  margin-bottom: 12px;
+}
+.chat-msg.self {
+  justify-content: flex-end;
+}
+.chat-bubble {
+  max-width: 60%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.chat-msg.other .chat-bubble {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  color: #0f172a;
+  border-top-left-radius: 4px;
+}
+.chat-msg.self .chat-bubble {
+  background: #2563eb;
+  color: #fff;
+  border-top-right-radius: 4px;
+}
+.chat-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #f1f5f9;
+  display: flex;
+  gap: 12px;
+}
+.chat-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>