10/10

1. 设备管理界面完成
2. 用户管理界面完成
3. 会话列表完成

src/views/system/conversation/compontents/MessageList/RobotMessage.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="robot-message">
+    <div class="avatar">智</div>
+    <div class="msg-body">
+      <!-- 头部：客服名 + 标签 + 时间 -->
+      <div class="msg-header">
+        <span class="name">智能客服 小智</span>
+        <span class="tag robot-tag">机器人</span>
+        <span class="time">{{ time }}</span>
+      </div>
+      <!-- 气泡 -->
+      <div class="bubble" v-html="content"></div>
+      <!-- 快捷按钮 -->
+      <div v-if="quickActions?.length" class="quick-actions">
+        <button
+          v-for="btn in quickActions"
+          :key="btn.action"
+          :class="{ primary: btn.primary }"
+          class="action-btn"
+          @click="$emit('quickAction', btn.action)"
+        >
+          {{ btn.label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface QuickAction {
+  label: string
+  action: string
+  primary?: boolean
+}
+
+defineProps({
+  name: {type: String, default: '智能客服'},
+  avatar: {type: String, default: ''},
+  content: {type: String, required: true},
+  time: {type: String, default: ''},
+  quickActions: {type: Array as () => QuickAction[], default: () => []}
+})
+defineEmits(['quickAction'])
+</script>
+
+<style scoped>
+.robot-message {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(15, 118, 110, 1);
+}
+
+.msg-body {
+  margin-left: 8px;
+  max-width: 75%;
+}
+
+.msg-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.name {
+  font-size: 12px;
+  color: rgba(156, 163, 175, 1);
+  font-weight: 500;
+}
+
+.robot-tag {
+  background: #f3f0ff;
+  color: #8b50ef;
+  font-weight: bold;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.time {
+  font-size: 11px;
+  color: #999;
+}
+
+.bubble {
+  background: #fff;
+  border-radius: 12px 12px 12px 2px;
+  padding: 10px 14px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.action-btn {
+  padding: 4px 14px;
+  border: 1px solid #2563eb;
+  border-radius: 14px;
+  background: #fff;
+  color: #2563eb;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.action-btn.primary {
+  background: #2563eb;
+  color: #fff;
+}
+</style>