From a067fd835752cb957c42cafef85030905d48462f Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Tue, 13 Oct 2026 16:08:55 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=9C=A8=E7=BA=BF=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E5=92=8C=E8=AF=A6=E7=BB=86=E4=B8=AD=E5=BF=83=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/message/cpns/MessageItem.vue     | 107 +++++++++----
 src/views/message/cpns/MessageList.vue     |   5 +-
 src/views/message/cpns/MessageTabs.vue     |  22 ++-
 src/views/message/detail.vue               | 177 +++++++++++----------
 src/views/message/index.vue                |  22 ++-
 src/views/service/cpns/ChatFileCard.vue    |  32 ++--
 src/views/service/cpns/ChatInput.vue       | 134 ++++++++++------
 src/views/service/cpns/ChatMessageItem.vue |  44 ++---
 src/views/service/cpns/ChatWindow.vue      |  73 ++++++---
 src/views/service/index.vue                |   3 +
 10 files changed, 381 insertions(+), 238 deletions(-)

diff --git a/src/views/message/cpns/MessageItem.vue b/src/views/message/cpns/MessageItem.vue
index 8ff597c..2f202bf 100644
--- a/src/views/message/cpns/MessageItem.vue
+++ b/src/views/message/cpns/MessageItem.vue
@@ -7,12 +7,18 @@ interface Props {
 
 defineProps<Props>()
 
-const emit = defineEmits<{ view: [id: string] }>()
+const emit = defineEmits<{ view: [message: Message] }>()
 
-const emojiMap: Record<MessageType, string> = {
-  在线客服: '💬',
-  状态通知: '📢',
-  系统通知: '🔔',
+const LABEL_MAP: Record<MessageType, string> = {
+  在线客服: '客',
+  状态通知: '态',
+  系统通知: '系',
+}
+
+const TONE_MAP: Record<MessageType, string> = {
+  在线客服: 'is-service',
+  状态通知: 'is-status',
+  系统通知: 'is-system',
 }
 </script>
 
@@ -22,10 +28,17 @@ const emojiMap: Record<MessageType, string> = {
     :class="{ 'is-unread': !message.isRead }"
     role="button"
     tabindex="0"
-    @click="emit('view', message.id)"
-    @keydown.enter="emit('view', message.id)"
+    @click="emit('view', message)"
+    @keydown.enter="emit('view', message)"
   >
-    <span class="message-item__emoji">{{ emojiMap[message.type] }}</span>
+    <span
+      class="message-item__icon"
+      :class="TONE_MAP[message.type]"
+      aria-hidden="true"
+    >
+      {{ LABEL_MAP[message.type] }}
+      <span v-if="!message.isRead" class="message-item__dot" aria-label="未读" />
+    </span>
     <div class="message-item__body">
       <div class="message-item__head">
         <span class="message-item__title">{{ message.title }}</span>
@@ -34,18 +47,17 @@ const emojiMap: Record<MessageType, string> = {
       <p class="message-item__summary">
         {{ message.summary }}
       </p>
+      <span class="message-item__type">{{ message.type }}</span>
     </div>
-    <span v-if="!message.isRead" class="message-item__dot" aria-label="未读" />
   </div>
 </template>
 
 <style lang="less" scoped>
 .message-item {
-  position: relative;
   .flex(row, flex-start, flex-start);
-  gap: 16px;
-  min-height: 86px;
-  padding: 19px 29px;
+  gap: @spacing-base;
+  min-height: 88px;
+  padding: @spacing-base @spacing-lg;
   background: @white;
   cursor: pointer;
   box-sizing: border-box;
@@ -55,20 +67,38 @@ const emojiMap: Record<MessageType, string> = {
     background: @bg-color-light;
   }
 
-  &__emoji {
+  &__icon {
+    position: relative;
     flex-shrink: 0;
     .flex(row, center);
-    width: 42px;
-    height: 42px;
+    width: 40px;
+    height: 40px;
     border-radius: @radius-round;
-    background: @message-item-icon;
-    font-size: 20px;
+    background: @primary-light;
+    color: @primary-strong;
+    font-size: @font-size-sm;
+    font-weight: 600;
     line-height: 1;
+
+    &.is-service {
+      background: @primary-light;
+      color: @primary-strong;
+    }
+
+    &.is-status {
+      background: fade(@success-color, 12%);
+      color: @success-color;
+    }
+
+    &.is-system {
+      background: fade(@warning-color, 14%);
+      color: @warning-color;
+    }
   }
 
   &__body {
     .flex(column, flex-start, stretch);
-    gap: 8px;
+    gap: @spacing-xs;
     flex: 1;
     min-width: 0;
   }
@@ -80,33 +110,44 @@ const emojiMap: Record<MessageType, string> = {
   }
 
   &__title {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    color: @finance-ink;
+    font-size: @font-size-base;
+    font-weight: 500;
+    line-height: 1.4;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__time {
     flex-shrink: 0;
-    font-size: 12px;
-    line-height: 20px;
-    color: @message-tabs-text;
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 
   &__summary {
-    font-size: 12px;
-    line-height: 18px;
-    color: @message-tabs-text;
+    margin: 0;
+    font-size: @font-size-sm;
+    line-height: 1.5;
+    color: @text-color-secondary;
     .ellipsis();
   }
 
+  &__type {
+    width: fit-content;
+    padding: 0 @spacing-sm;
+    border-radius: @radius-round;
+    background: @bg-color-light;
+    color: @text-color-secondary;
+    font-size: @font-size-xs;
+    line-height: 20px;
+  }
+
   &__dot {
     position: absolute;
-    top: 21px;
-    left: 60px;
-    width: 14px;
-    height: 14px;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 8px;
     border: 2px solid @white;
     border-radius: @radius-round;
     background: @message-tabs-badge;
diff --git a/src/views/message/cpns/MessageList.vue b/src/views/message/cpns/MessageList.vue
index 9f2dd53..c36341b 100644
--- a/src/views/message/cpns/MessageList.vue
+++ b/src/views/message/cpns/MessageList.vue
@@ -8,7 +8,7 @@ interface Props {
 
 defineProps<Props>()
 
-const emit = defineEmits<{ view: [id: string] }>()
+const emit = defineEmits<{ view: [message: Message] }>()
 </script>
 
 <template>
@@ -33,11 +33,12 @@ const emit = defineEmits<{ view: [id: string] }>()
   gap: 0;
   margin-top: 0;
   padding: 0;
+  border: 1px solid @border-color;
   border-radius: @radius-base;
   background: @white;
   overflow: hidden;
 
-  .message-item + .message-item {
+  :deep(.message-item + .message-item) {
     border-top: 1px solid @border-color;
   }
 
diff --git a/src/views/message/cpns/MessageTabs.vue b/src/views/message/cpns/MessageTabs.vue
index 48f73ba..2643624 100644
--- a/src/views/message/cpns/MessageTabs.vue
+++ b/src/views/message/cpns/MessageTabs.vue
@@ -44,6 +44,7 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
   gap: 2px;
   min-height: 0;
   padding: @spacing-sm 0;
+  border: 1px solid @border-color;
   border-radius: @radius-base;
   background: @white;
   box-sizing: border-box;
@@ -76,17 +77,22 @@ function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
 
   &__count {
     flex-shrink: 0;
-    min-width: 15px;
-    height: 15px;
-    padding: 0 4px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 @spacing-xs;
     border-radius: @radius-round;
-    background: @message-tabs-badge;
-    color: @white;
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 15px;
+    background: @bg-color-light;
+    color: @text-color-secondary;
+    font-size: @font-size-xs;
+    font-weight: 500;
+    line-height: 18px;
     text-align: center;
     box-sizing: border-box;
   }
+
+  &__tab.is-active &__count {
+    background: fade(@primary-strong, 12%);
+    color: @primary-strong;
+  }
 }
 </style>
diff --git a/src/views/message/detail.vue b/src/views/message/detail.vue
index 26dc258..e895338 100644
--- a/src/views/message/detail.vue
+++ b/src/views/message/detail.vue
@@ -1,7 +1,7 @@
 <!-- 页面：消息详情（MessageDetail） -->
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
-import { ElButton, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
 import { PageHead } from '@/components'
 import { useMessageStore } from '@/stores/modules/message'
@@ -42,7 +42,7 @@ onMounted(load)
       slogan="查看站内消息完整内容与附件资料"
     />
 
-    <div class="message-detail__wrap">
+    <div class="container message-detail__wrap">
       <nav class="message-detail__breadcrumb">
         <RouterLink to="/message" class="message-detail__breadcrumb-link">
           消息中心
@@ -53,12 +53,15 @@ onMounted(load)
 
       <template v-if="item">
         <article class="message-detail__card">
-          <h1 class="message-detail__title">
-            {{ item.title }}
-          </h1>
-          <p class="message-detail__time">
-            发布时间：{{ item.publishTime }}
-          </p>
+          <header class="message-detail__head">
+            <h1 class="message-detail__title">
+              {{ item.title }}
+            </h1>
+            <p class="message-detail__time">
+              发布时间：{{ item.publishTime }}
+            </p>
+          </header>
+
           <div class="message-detail__content">
             {{ item.content }}
           </div>
@@ -80,32 +83,33 @@ onMounted(load)
                   </span>
                 </div>
                 <div class="message-detail__file-actions">
-                  <el-button
+                  <button
+                    type="button"
                     class="message-detail__file-btn"
-                    link
                     @click="onPreview"
                   >
                     预览
-                  </el-button>
-                  <el-button
+                  </button>
+                  <button
+                    type="button"
                     class="message-detail__file-btn"
-                    link
                     @click="onDownload"
                   >
                     下载
-                  </el-button>
+                  </button>
                 </div>
               </li>
             </ul>
           </section>
 
           <div class="message-detail__actions">
-            <el-button
+            <button
+              type="button"
               class="message-detail__back"
               @click="onBack"
             >
               返回
-            </el-button>
+            </button>
           </div>
         </article>
       </template>
@@ -127,165 +131,176 @@ onMounted(load)
   background: @bg-color;
 
   &__wrap {
-    width: 100%;
-    max-width: @container-width;
-    margin: 0 auto;
-    padding: @spacing-lg @page-gutter 0;
+    padding-top: @spacing-lg;
+    padding-right: @home-gutter;
+    padding-left: @home-gutter;
     box-sizing: border-box;
+
+    @media (max-width: 1600px) {
+      padding-right: @spacing-lg;
+      padding-left: @spacing-lg;
+    }
   }
 
   &__breadcrumb {
     .flex(row, flex-start, center);
-    gap: 4px;
-    min-height: 40px;
+    gap: @spacing-xs;
+    margin-bottom: @spacing-base;
     font-size: @font-size-sm;
     line-height: 1.5;
-    color: @project-muted;
+    color: @text-color-secondary;
   }
 
   &__breadcrumb-link {
-    color: @project-muted;
+    color: @text-color-secondary;
 
     &:hover {
       color: @primary-strong;
     }
   }
 
-  &__breadcrumb-sep {
-    color: @project-muted;
-  }
-
   &__breadcrumb-current {
-    color: @message-tabs-text;
+    color: @heading-color;
     font-weight: 500;
   }
 
   &__card {
     padding: @spacing-xl;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
   }
 
+  &__head {
+    padding-bottom: @spacing-base;
+    border-bottom: 1px solid @border-color;
+  }
+
   &__title {
+    margin: 0;
     font-size: @font-size-xl;
     font-weight: 600;
     line-height: 1.4;
-    color: @finance-ink;
-    text-align: left;
+    color: @heading-color;
   }
 
   &__time {
-    margin-top: 14px;
-    font-size: 12px;
-    line-height: 18px;
-    color: @project-muted;
-    text-align: center;
+    margin: @spacing-sm 0 0;
+    font-size: @font-size-sm;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 
   &__content {
-    margin-top: 16px;
-    background: transparent;
-    color: @message-tabs-text;
-    font-size: 13px;
-    line-height: 2.8;
-    text-align: center;
+    margin-top: @spacing-lg;
+    color: @text-color;
+    font-size: @font-size-base;
+    line-height: 1.8;
+    text-align: left;
     white-space: pre-wrap;
     word-break: break-word;
   }
 
   &__attachments {
-    margin-top: 24px;
+    margin-top: @spacing-xl;
+  }
 
-    &-title {
-      margin-bottom: 10px;
-      font-size: 12px;
-      font-weight: 400;
-      color: @project-muted;
-    }
+  &__attachments-title {
+    margin: 0 0 @spacing-base;
+    font-size: @font-size-sm;
+    font-weight: 600;
+    color: @heading-color;
   }
 
   &__file-list {
     .flex(column, flex-start, stretch);
-    gap: 10px;
+    gap: @spacing-sm;
+    margin: 0;
+    padding: 0;
   }
 
   &__file {
     .flex(row, space-between, center);
     gap: @spacing-base;
-    width: 254px;
-    max-width: 100%;
-    padding: 15px 12px 15px 19px;
-    border-radius: @radius-sm;
-    background: @finance-row-bg;
+    width: 100%;
+    max-width: 520px;
+    padding: @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
     list-style: none;
     box-sizing: border-box;
   }
 
   &__file-info {
     .flex(column, flex-start, flex-start);
-    gap: 4px;
+    gap: @spacing-xs;
     min-width: 0;
   }
 
   &__file-name {
-    font-size: 12px;
-    font-weight: 700;
-    color: @finance-ink;
+    font-size: @font-size-sm;
+    font-weight: 600;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__file-meta {
-    font-size: 11px;
-    color: @project-muted;
+    font-size: @font-size-xs;
+    color: @text-color-secondary;
     .ellipsis();
   }
 
   &__file-actions {
-    .flex(column, center, center);
-    gap: 2px;
+    .flex(row, flex-end, center);
+    gap: @spacing-sm;
     flex-shrink: 0;
   }
 
   &__file-btn {
-    padding: 0;
-    font-size: 12px;
-    font-weight: 400;
-    color: @message-tabs-text;
+    height: 28px;
+    padding: 0 @spacing-sm;
+    border: none;
+    border-radius: @radius-round;
+    background: transparent;
+    color: @primary-strong;
+    font-size: @font-size-sm;
+    cursor: pointer;
 
     &:hover {
-      color: @primary-strong;
+      background: fade(@primary-strong, 8%);
     }
   }
 
   &__actions {
     .flex(row, flex-end);
-    margin-top: 40px;
+    margin-top: @spacing-xl;
   }
 
   &__back {
-    width: 94px;
-    height: 34px;
-    padding: 0;
-    border-color: @primary-strong;
-    border-radius: @radius-sm;
+    min-width: 88px;
+    height: 36px;
+    padding: 0 @spacing-lg;
+    border: none;
+    border-radius: @radius-round;
     background: @primary-strong;
     color: @white;
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
 
     &:hover {
-      border-color: @primary-strong;
-      background: @primary-strong;
-      color: @white;
+      background: @primary-hover;
     }
   }
 
   &__empty {
-    padding: 80px 0;
+    padding: @spacing-xxl 0;
     text-align: center;
-    font-size: 13px;
-    color: @project-muted;
+    font-size: @font-size-sm;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 8ade810..a30cba0 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
 import { ElButton, ElInput } from 'element-plus'
 import { PageHead, PaginationBar } from '@/components'
 import { useMessageStore } from '@/stores/modules/message'
-import type { MessageType } from '@/types/business/message'
+import type { Message, MessageType } from '@/types/business/message'
 import MessageTabs from './cpns/MessageTabs.vue'
 import MessageList from './cpns/MessageList.vue'
 
@@ -35,8 +35,13 @@ function onTabChange(type: MessageType | 'all'): void {
   void messageStore.search()
 }
 
-function onView(id: string): void {
-  void router.push(`/message/${id}`)
+function onView(message: Message): void {
+  // 用 message.type 区分：在线客服进会话页，其余进消息详情
+  if (message.type === '在线客服') {
+    void router.push('/service')
+    return
+  }
+  void router.push(`/message/${message.id}`)
 }
 
 function onMarkAllRead(): void {
@@ -128,8 +133,15 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
     .flex(row, flex-start, flex-start);
     gap: @spacing-lg;
     width: 100%;
-    padding: @spacing-lg 0 0;
+    padding-top: @spacing-lg;
+    padding-right: @home-gutter;
+    padding-left: @home-gutter;
     box-sizing: border-box;
+
+    @media (max-width: 1600px) {
+      padding-right: @spacing-lg;
+      padding-left: @spacing-lg;
+    }
   }
 
   &__tabs {
@@ -149,7 +161,7 @@ const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${un
     gap: @spacing-base;
     min-height: 64px;
     padding: 0 @spacing-lg;
-    border: none;
+    border: 1px solid @border-color;
     border-radius: @radius-base;
     background: @white;
     box-sizing: border-box;
diff --git a/src/views/service/cpns/ChatFileCard.vue b/src/views/service/cpns/ChatFileCard.vue
index 8780714..dcc90ce 100644
--- a/src/views/service/cpns/ChatFileCard.vue
+++ b/src/views/service/cpns/ChatFileCard.vue
@@ -31,45 +31,47 @@ function extOf(name: string): string {
 <style lang="less" scoped>
 .chat-file-card {
   .flex(row, center);
-  gap: 12px;
-  min-width: 300px;
+  gap: @spacing-base;
+  min-width: 240px;
   max-width: 420px;
-  padding: 14px 16px;
+  padding: @spacing-base;
+  border: 1px solid @border-color;
   border-radius: @radius-base;
   background: @white;
+  box-shadow: @shadow-base;
 
   &__icon {
     flex-shrink: 0;
     .flex(row, center);
-    width: 37px;
-    height: 37px;
+    width: 40px;
+    height: 40px;
     border-radius: @radius-sm;
-    background: @service-scroll-bg;
+    background: @primary-light;
     color: @primary-strong;
-    font-size: 11px;
+    font-size: @font-size-xs;
     font-weight: 700;
     line-height: 1;
   }
 
   &__info {
     .flex(column, flex-start, flex-start);
-    gap: 6px;
+    gap: @spacing-xs;
     flex: 1;
     min-width: 0;
   }
 
   &__name {
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 16px;
-    color: @service-bubble-text;
+    font-size: @font-size-sm;
+    font-weight: 600;
+    line-height: 1.4;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__size {
-    font-size: 12px;
-    line-height: 16px;
-    color: @project-muted;
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/service/cpns/ChatInput.vue b/src/views/service/cpns/ChatInput.vue
index 60d576e..0f45984 100644
--- a/src/views/service/cpns/ChatInput.vue
+++ b/src/views/service/cpns/ChatInput.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
-import { ElButton, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
 const MAX_FILE_SIZE = 1024 * 1024 * 1024
 
 const content = ref('')
+const fileRef = ref<HTMLInputElement | null>(null)
 
 const emit = defineEmits<{
   send: [content: string]
@@ -26,6 +27,10 @@ function onKeydown(event: KeyboardEvent): void {
   }
 }
 
+function onPickFile(): void {
+  fileRef.value?.click()
+}
+
 function onFileChange(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
@@ -45,27 +50,35 @@ function onFileChange(event: Event): void {
     <textarea
       v-model="content"
       class="chat-input__textarea"
-      placeholder="输入消息，按Enter发送，Shift+Enter换行..."
+      placeholder="输入消息，按 Enter 发送，Shift + Enter 换行"
       rows="3"
       @keydown="onKeydown"
     />
     <div class="chat-input__bar">
-      <span class="chat-input__hint">
-        按 Enter 发送 | 支持拖拽上传文件
-      </span>
-      <div class="chat-input__actions">
-        <input
-          type="file"
-          class="chat-input__file"
-          @change="onFileChange"
+      <div class="chat-input__tools">
+        <button
+          type="button"
+          class="chat-input__attach"
+          @click="onPickFile"
         >
-        <el-button
-          class="chat-input__send"
-          @click="doSend"
-        >
-          发送
-        </el-button>
+          附件
+        </button>
+        <span class="chat-input__hint">Enter 发送</span>
       </div>
+      <input
+        ref="fileRef"
+        type="file"
+        class="chat-input__file"
+        @change="onFileChange"
+      >
+      <button
+        type="button"
+        class="chat-input__send"
+        :disabled="!content.trim()"
+        @click="doSend"
+      >
+        发送
+      </button>
     </div>
   </div>
 </template>
@@ -73,34 +86,34 @@ function onFileChange(event: Event): void {
 <style lang="less" scoped>
 .chat-input {
   .flex(column, flex-start, stretch);
-  gap: 0;
-  padding: 16px 22px 20px;
-  border-top: 1px solid @service-card-line;
+  gap: @spacing-base;
+  padding: @spacing-base @spacing-lg @spacing-lg;
+  border-top: 1px solid @border-color;
   background: @white;
   box-sizing: border-box;
 
   &__textarea {
     width: 100%;
-    height: 72px;
-    padding: 12px 14px;
-    border: none;
-    border-radius: @radius-sm;
-    background: @service-input-bg;
+    min-height: 84px;
+    padding: @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
     color: @service-bubble-text;
-    font-size: 13px;
+    font-size: @font-size-sm;
     line-height: 1.6;
     resize: none;
     outline: none;
-    transition: background 0.2s;
+    transition: border-color 0.2s, background 0.2s;
     box-sizing: border-box;
 
     &:focus {
-      border: none;
-      background: @service-input-bg;
+      border-color: @primary-color;
+      background: @white;
     }
 
     &::placeholder {
-      color: @project-muted;
+      color: @text-color-secondary;
     }
   }
 
@@ -108,24 +121,35 @@ function onFileChange(event: Event): void {
     .flex(row, space-between, center);
     gap: @spacing-base;
     width: 100%;
-    margin-top: 0;
-    padding-top: 14px;
-    background: @service-bar-bg;
   }
 
-  &__hint {
-    font-size: 11px;
-    line-height: 16px;
-    color: @project-muted;
-  }
-
-  &__actions {
-    .flex(row, flex-end, center);
-    gap: @spacing-sm;
+  &__tools {
+    .flex(row, flex-start, center);
+    gap: @spacing-base;
+    min-width: 0;
   }
 
   &__attach {
-    display: none;
+    height: 32px;
+    padding: 0 @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-round;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-sm;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-strong;
+      color: @primary-strong;
+    }
+  }
+
+  &__hint {
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 
   &__file {
@@ -133,20 +157,26 @@ function onFileChange(event: Event): void {
   }
 
   &__send {
-    width: 76px;
-    height: 30px;
-    padding: 0;
-    border-color: @primary-strong;
-    border-radius: @radius-sm;
+    flex-shrink: 0;
+    min-width: 80px;
+    height: 32px;
+    padding: 0 @spacing-lg;
+    border: none;
+    border-radius: @radius-round;
     background: @primary-strong;
     color: @white;
-    font-size: 12px;
+    font-size: @font-size-sm;
     font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
 
-    &:hover {
-      border-color: @primary-strong;
-      background: @primary-strong;
-      color: @white;
+    &:hover:not(:disabled) {
+      background: @primary-hover;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
     }
   }
 }
diff --git a/src/views/service/cpns/ChatMessageItem.vue b/src/views/service/cpns/ChatMessageItem.vue
index 46f6d2c..3562b50 100644
--- a/src/views/service/cpns/ChatMessageItem.vue
+++ b/src/views/service/cpns/ChatMessageItem.vue
@@ -29,14 +29,14 @@ withDefaults(defineProps<Props>(), { unread: false })
       <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>
+    <span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">我</span>
   </div>
 </template>
 
 <style lang="less" scoped>
 .chat-message-item {
   .flex(row, flex-start, flex-start);
-  gap: 16px;
+  gap: @spacing-base;
 
   &__avatar {
     flex-shrink: 0;
@@ -46,55 +46,54 @@ withDefaults(defineProps<Props>(), { unread: false })
     border-radius: @radius-round;
     background: @primary-strong;
     color: @white;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: @font-size-sm;
+    font-weight: 500;
 
     &--user {
       background: @service-user-avatar;
-      color: @white;
     }
   }
 
   &__main {
     .flex(column, flex-start, flex-start);
-    gap: 6px;
-    max-width: 420px;
+    gap: @spacing-xs;
+    max-width: min(480px, 70%);
   }
 
   &__bubble {
     position: relative;
-    padding: 12px 16px;
-    border-radius: @radius-base;
+    padding: @spacing-base;
+    border-radius: @radius-base @radius-base @radius-base @radius-sm;
     background: @white;
+    border: 1px solid @border-color;
     color: @service-bubble-text;
-    font-size: 13px;
+    font-size: @font-size-sm;
     line-height: 1.7;
     white-space: pre-wrap;
     word-break: break-word;
+    box-shadow: @shadow-base;
   }
 
   &__bubble:has(.chat-file-card) {
     padding: 0;
+    border: none;
     background: transparent;
+    box-shadow: none;
   }
 
   &__time {
-    font-size: 11px;
-    line-height: 16px;
-    color: @project-muted;
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 
   &__unread {
     position: absolute;
-    top: 100%;
+    top: calc(100% + @spacing-xs);
     left: 0;
-    margin-top: 8px;
-    padding: 0;
-    background: transparent;
-    color: @project-muted;
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 14px;
+    color: @text-color-secondary;
+    font-size: @font-size-xs;
+    line-height: 1.4;
   }
 
   &--user {
@@ -105,8 +104,11 @@ withDefaults(defineProps<Props>(), { unread: false })
     }
 
     .chat-message-item__bubble {
+      border: none;
+      border-radius: @radius-base @radius-base @radius-sm @radius-base;
       background: @primary-strong;
       color: @white;
+      box-shadow: none;
     }
   }
 }
diff --git a/src/views/service/cpns/ChatWindow.vue b/src/views/service/cpns/ChatWindow.vue
index 01b9103..fa1e880 100644
--- a/src/views/service/cpns/ChatWindow.vue
+++ b/src/views/service/cpns/ChatWindow.vue
@@ -37,14 +37,17 @@ watch(
 <template>
   <div class="chat-window">
     <div class="chat-window__header">
-      <span class="chat-window__header-avatar" />
-      <span class="chat-window__header-name">专属客服</span>
+      <span class="chat-window__header-avatar" aria-hidden="true">客</span>
+      <div class="chat-window__header-meta">
+        <span class="chat-window__header-name">专属客服</span>
+        <span class="chat-window__header-status">在线 · 通常几分钟内回复</span>
+      </div>
     </div>
 
     <div ref="scrollRef" class="chat-window__scroll">
       <template v-for="(item, index) in messages" :key="item.id">
         <div v-if="index === 0" class="chat-window__divider">
-          —— 历史消息 ——
+          <span class="chat-window__divider-text">历史消息</span>
         </div>
         <ChatMessageItem
           :message="item"
@@ -60,7 +63,7 @@ watch(
 <style lang="less" scoped>
 .chat-window {
   .flex(column, flex-start, stretch);
-  border: none;
+  border: 1px solid @border-color;
   border-radius: @radius-base;
   background: @white;
   box-sizing: border-box;
@@ -69,8 +72,8 @@ watch(
   &__header {
     .flex(row, flex-start, center);
     gap: @spacing-base;
-    height: 56px;
-    padding: 0 @spacing-lg;
+    min-height: 64px;
+    padding: @spacing-base @spacing-lg;
     border-bottom: 1px solid @border-color;
     background: @white;
     box-sizing: border-box;
@@ -78,37 +81,65 @@ watch(
 
   &__header-avatar {
     flex-shrink: 0;
-    width: 33px;
-    height: 33px;
+    .flex(row, center);
+    width: 40px;
+    height: 40px;
     border-radius: @radius-round;
     background: @primary-strong;
+    color: @white;
+    font-size: @font-size-base;
+    font-weight: 600;
+  }
+
+  &__header-meta {
+    .flex(column, flex-start, flex-start);
+    gap: 2px;
+    min-width: 0;
   }
 
   &__header-name {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 18px;
-    color: @service-header-name;
+    font-size: @font-size-base;
+    font-weight: 600;
+    line-height: 1.4;
+    color: @heading-color;
+  }
+
+  &__header-status {
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 
   &__scroll {
     .flex(column, flex-start, stretch);
-    gap: 32px;
-    height: 450px;
-    padding: 24px 22px;
-    background: @service-scroll-bg;
+    gap: @spacing-lg;
+    height: 460px;
+    padding: @spacing-lg;
+    background: @bg-color-light;
     overflow-y: auto;
     box-sizing: border-box;
     .scrollbar();
   }
 
   &__divider {
+    .flex(row, center, center);
     flex-shrink: 0;
-    margin-bottom: -18px;
-    font-size: 12px;
-    line-height: 18px;
-    color: @project-muted;
-    text-align: center;
+    gap: @spacing-base;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: @border-color;
+    }
+  }
+
+  &__divider-text {
+    flex-shrink: 0;
+    font-size: @font-size-xs;
+    line-height: 1.4;
+    color: @text-color-secondary;
   }
 }
 </style>
diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index bbbf36e..75c2e17 100644
--- a/src/views/service/index.vue
+++ b/src/views/service/index.vue
@@ -50,6 +50,9 @@ onMounted(() => {
 
   &__wrap {
     width: 100%;
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
     padding: @spacing-lg 0 0;
     box-sizing: border-box;
   }