feat ui设计稿

src/views/service/cpns/ChatMessageItem.vue

@@ -38,70 +38,84 @@ const emit = defineEmits<{ download: [] }>()
 
 <style lang="less" scoped>
 .chat-message-item {
-  .flex(row, flex-start);
-  gap: @spacing-sm;
+  .flex(row, flex-start, flex-start); // 头像与气泡顶对齐（设计 38）
+  gap: 9px; // 头像→气泡 12 × 0.77
 
+  // 设计 38：头像直径 36 × 0.77；客服 #024FFF，用户 #8D99AE
   &__avatar {
     flex-shrink: 0;
     .flex(row, center);
-    width: 36px;
-    height: 36px;
+    width: 28px;
+    height: 28px;
     border-radius: @radius-round;
-    background: @primary-light;
-    color: @primary-color;
-    font-size: @font-size-base;
-    font-weight: 600;
+    background: @primary-strong;
+    color: @white;
+    font-size: 12px; // 16 → 12
+    font-weight: 400;
 
     &--user {
-      background: fade(@success-color, 15%);
-      color: @success-color;
+      background: @service-user-avatar;
+      color: @white;
     }
   }
 
   &__main {
-    .flex(column, flex-start);
-    gap: @spacing-xs;
-    max-width: 70%;
+    .flex(column, flex-start, flex-start);
+    gap: 4px;
+    max-width: 320px; // 气泡最宽 ≈ 设计 410 × 0.77
   }
 
+  // 设计 38：客服气泡白底轻影；13 → 11 / #1F2937
   &__bubble {
     position: relative;
-    padding: @spacing-sm @spacing-base;
-    border-radius: @radius-base;
+    padding: 9px 12px; // 内边距 12/15 × 0.77
+    border-radius: 8px;
     background: @white;
     box-shadow: @shadow-base;
-    color: @text-color;
-    font-size: @font-size-base;
-    line-height: 1.7;
+    color: @heading-color;
+    font-size: 11px;
+    line-height: 1.75;
     white-space: pre-wrap;
     word-break: break-word;
   }
 
-  &__time {
-    font-size: @font-size-sm;
+  // 文件消息：文件卡自身成卡，气泡去内边距/底色/影（设计 38 单层卡）
+  &__bubble:has(.chat-file-card) {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
   }
 
+  // 设计 38：消息时间 11 / #9CA3AF
+  &__time {
+    font-size: 11px;
+    color: @text-color-disabled;
+  }
+
+  // 设计 38：「未读」挂在文件卡左下外侧，10 → 11 / #9CA3AF，无底色
   &__unread {
     position: absolute;
-    top: -8px;
-    right: -6px;
-    padding: 0 6px;
-    border-radius: @radius-round;
-    background: @danger-color;
-    color: @white;
-    font-size: @font-size-sm;
-    line-height: 16px;
+    top: 100%;
+    left: 0;
+    margin-top: 6px;
+    padding: 0;
+    background: transparent;
+    color: @text-color-disabled;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.3;
   }
 
   &--user {
-    .flex(row, flex-end);
+    .flex(row, flex-end, flex-start);
 
     .chat-message-item__main {
       align-items: flex-end;
     }
 
+    // 设计 38：我方气泡 #024FFF 白字
     .chat-message-item__bubble {
-      background: @primary-color;
+      background: @primary-strong;
       color: @white;
     }
   }