sino-mci/admin-web/src/views/Messages.vue

<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>