feat 在线客服

src/views/service/cpns/ChatMessageItem.vue

@@ -8,8 +8,6 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), { unread: false })
-
-const emit = defineEmits<{ download: [] }>()
 </script>
 
 <template>
@@ -25,11 +23,10 @@ const emit = defineEmits<{ download: [] }>()
         <ChatFileCard
           v-if="message.file"
           :file="message.file"
-          @download="emit('download')"
         />
         <template v-else>{{ message.content }}</template>
       </div>
-      <span class="chat-message-item__time text-secondary">{{ message.time }}</span>
+      <span class="chat-message-item__time">{{ message.time }}</span>
     </div>
 
     <span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">王</span>
@@ -39,17 +36,17 @@ const emit = defineEmits<{ download: [] }>()
 <style lang="less" scoped>
 .chat-message-item {
   .flex(row, flex-start, flex-start);
-  gap: 9px;
+  gap: 16px;
 
   &__avatar {
     flex-shrink: 0;
     .flex(row, center);
-    width: 28px;
-    height: 28px;
+    width: 36px;
+    height: 36px;
     border-radius: @radius-round;
     background: @primary-strong;
     color: @white;
-    font-size: 12px; // 16 → 12
+    font-size: 14px;
     font-weight: 400;
 
     &--user {
@@ -60,19 +57,18 @@ const emit = defineEmits<{ download: [] }>()
 
   &__main {
     .flex(column, flex-start, flex-start);
-    gap: 4px;
-    max-width: 320px;
+    gap: 6px;
+    max-width: 420px;
   }
 
   &__bubble {
     position: relative;
-    padding: 9px 12px;
-    border-radius: 8px;
+    padding: 12px 16px;
+    border-radius: @radius-base;
     background: @white;
-    box-shadow: @shadow-base;
-    color: @heading-color;
-    font-size: 11px;
-    line-height: 1.75;
+    color: @service-bubble-text;
+    font-size: 13px;
+    line-height: 1.7;
     white-space: pre-wrap;
     word-break: break-word;
   }
@@ -80,25 +76,25 @@ const emit = defineEmits<{ download: [] }>()
   &__bubble:has(.chat-file-card) {
     padding: 0;
     background: transparent;
-    box-shadow: none;
   }
 
   &__time {
     font-size: 11px;
-    color: @text-color-disabled;
+    line-height: 16px;
+    color: @project-muted;
   }
 
   &__unread {
     position: absolute;
     top: 100%;
     left: 0;
-    margin-top: 6px;
+    margin-top: 8px;
     padding: 0;
     background: transparent;
-    color: @text-color-disabled;
-    font-size: 11px;
+    color: @project-muted;
+    font-size: 10px;
     font-weight: 400;
-    line-height: 1.3;
+    line-height: 14px;
   }
 
   &--user {