From 6ecc649a1cb66388ea6eac51a0e84ecff9bf50ec Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Sat, 10 Oct 2026 08:12:18 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=9C=A8=E7=BA=BF=E5=AE=A2=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/message/cpns/MessageItem.vue     |  57 +++--
 src/views/message/cpns/MessageList.vue     |   7 +-
 src/views/message/cpns/MessageTabs.vue     |  45 ++--
 src/views/message/detail.vue               | 276 ++++++++++++---------
 src/views/message/index.vue                | 246 +++++++++---------
 src/views/service/cpns/ChatFileCard.vue    |  61 ++---
 src/views/service/cpns/ChatInput.vue       |  88 +++----
 src/views/service/cpns/ChatMessageItem.vue |  40 ++-
 src/views/service/cpns/ChatWindow.vue      |  53 ++--
 src/views/service/index.vue                |  55 ++--
 10 files changed, 456 insertions(+), 472 deletions(-)

diff --git a/src/views/message/cpns/MessageItem.vue b/src/views/message/cpns/MessageItem.vue
index ebb34a2..8ff597c 100644
--- a/src/views/message/cpns/MessageItem.vue
+++ b/src/views/message/cpns/MessageItem.vue
@@ -29,9 +29,9 @@ const emojiMap: Record<MessageType, string> = {
     <div class="message-item__body">
       <div class="message-item__head">
         <span class="message-item__title">{{ message.title }}</span>
-        <span class="message-item__time text-secondary">{{ message.publishTime }}</span>
+        <span class="message-item__time">{{ message.publishTime }}</span>
       </div>
-      <p class="message-item__summary text-secondary">
+      <p class="message-item__summary">
         {{ message.summary }}
       </p>
     </div>
@@ -42,11 +42,13 @@ const emojiMap: Record<MessageType, string> = {
 <style lang="less" scoped>
 .message-item {
   position: relative;
-  .flex(row, flex-start);
-  gap: @spacing-base;
-  padding: 14px 17px;
+  .flex(row, flex-start, flex-start);
+  gap: 16px;
+  min-height: 86px;
+  padding: 19px 29px;
   background: @white;
   cursor: pointer;
+  box-sizing: border-box;
   transition: background 0.2s;
 
   &:hover {
@@ -56,60 +58,63 @@ const emojiMap: Record<MessageType, string> = {
   &__emoji {
     flex-shrink: 0;
     .flex(row, center);
-    width: 31px;
-    height: 31px;
+    width: 42px;
+    height: 42px;
     border-radius: @radius-round;
-    background: @message-icon-bg;
-    font-size: 15px;
+    background: @message-item-icon;
+    font-size: 20px;
     line-height: 1;
   }
 
   &__body {
     .flex(column, flex-start, stretch);
-    gap: 5px;
+    gap: 8px;
     flex: 1;
     min-width: 0;
-    margin-top: 6px;
   }
 
   &__head {
-    .flex(row, space-between);
+    .flex(row, space-between, flex-start);
     gap: @spacing-base;
     width: 100%;
   }
 
   &__title {
-    font-size: 11px;
+    font-size: 14px;
     font-weight: 600;
-    color: @heading-color;
+    line-height: 20px;
+    color: @finance-ink;
     .ellipsis();
   }
 
   &__time {
     flex-shrink: 0;
-    font-size: 11px;
-    color: @text-color-disabled;
+    font-size: 12px;
+    line-height: 20px;
+    color: @message-tabs-text;
   }
 
   &__summary {
-    font-size: 11px;
+    font-size: 12px;
+    line-height: 18px;
+    color: @message-tabs-text;
     .ellipsis();
   }
 
   &__dot {
     position: absolute;
-    top: 12px;
-    left: 42px;
-    width: 15px;
-    height: 15px;
+    top: 21px;
+    left: 60px;
+    width: 14px;
+    height: 14px;
+    border: 2px solid @white;
     border-radius: @radius-round;
-    background: @danger-color;
+    background: @message-tabs-badge;
+    box-sizing: content-box;
   }
 
-  &.is-unread {
-    .message-item__title {
-      font-weight: 600;
-    }
+  &.is-unread .message-item__title {
+    font-weight: 600;
   }
 }
 </style>
diff --git a/src/views/message/cpns/MessageList.vue b/src/views/message/cpns/MessageList.vue
index 3e5e734..5b4e1c7 100644
--- a/src/views/message/cpns/MessageList.vue
+++ b/src/views/message/cpns/MessageList.vue
@@ -31,19 +31,20 @@ const emit = defineEmits<{ view: [id: string] }>()
 .message-list {
   .flex(column, flex-start, stretch);
   gap: 0;
+  margin-top: 16px;
   padding: 0;
   border-radius: @radius-base;
   background: @white;
   overflow: hidden;
 
   .message-item + .message-item {
-    border-top: 1px solid @project-divider;
+    border-top: 1px solid @finance-card-line;
   }
 
   &__empty {
-    padding: 40px 0;
+    padding: 60px 0;
     text-align: center;
-    font-size: 11px;
+    font-size: 13px;
   }
 }
 </style>
diff --git a/src/views/message/cpns/MessageTabs.vue b/src/views/message/cpns/MessageTabs.vue
index 2de059b..b14fd45 100644
--- a/src/views/message/cpns/MessageTabs.vue
+++ b/src/views/message/cpns/MessageTabs.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
+import type { MessageTabCounts } from '@/stores/modules/message'
 import type { MessageType } from '@/types/business/message'
 
-interface Counts {
-  all: number
-  在线客服: number
-  状态通知: number
-  系统通知: number
-}
-
 interface Props {
   active: MessageType | 'all'
-  counts: Counts
+  counts: MessageTabCounts
 }
 
 defineProps<Props>()
@@ -24,7 +18,7 @@ const tabs: Array<{ label: string; value: MessageType | 'all' }> = [
   { label: '系统通知', value: '系统通知' },
 ]
 
-function countOf(value: MessageType | 'all', counts: Counts): number {
+function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
   return counts[value]
 }
 </script>
@@ -47,23 +41,25 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
 <style lang="less" scoped>
 .message-tabs {
   .flex(column, flex-start, stretch);
-  padding: 18px 0;
-  min-height: 338px;
+  gap: 0;
+  height: 438px;
+  padding: 14px 0;
   border-radius: @radius-base;
   background: @white;
-  box-shadow: none;
+  box-sizing: border-box;
 
   &__tab {
-    .flex(row, space-between);
+    .flex(row, space-between, center);
     gap: @spacing-sm;
-    height: 32px;
-    padding: 0 18px 0 25px;
+    height: 44px;
+    padding: 0 25px;
     border-radius: 0;
     background: transparent;
-    color: @text-color;
-    font-size: 11px;
+    color: @message-tabs-text;
+    font-size: 13px;
     font-weight: 400;
-    transition: all 0.2s;
+    line-height: 18px;
+    transition: color 0.2s;
 
     &:hover {
       color: @primary-strong;
@@ -77,21 +73,18 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
   }
 
   &__count {
+    flex-shrink: 0;
     min-width: 15px;
     height: 15px;
     padding: 0 4px;
     border-radius: @radius-round;
-    background: @danger-color;
+    background: @message-tabs-badge;
     color: @white;
-    font-size: 11px;
+    font-size: 10px;
+    font-weight: 400;
     line-height: 15px;
     text-align: center;
-  }
-
-  .is-active &__count {
-    background: @danger-color;
-    color: @white;
-    font-weight: 600;
+    box-sizing: border-box;
   }
 }
 </style>
diff --git a/src/views/message/detail.vue b/src/views/message/detail.vue
index 17ad4f1..06b5272 100644
--- a/src/views/message/detail.vue
+++ b/src/views/message/detail.vue
@@ -1,8 +1,9 @@
+<!-- 页面：消息详情（MessageDetail） -->
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElButton, ElMessage } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
-import { AppButton } from '@/components'
+import { PageHead } from '@/components'
 import { useMessageStore } from '@/stores/modules/message'
 import { formatFileSize } from '@/utils/format'
 
@@ -36,181 +37,218 @@ onMounted(load)
 
 <template>
   <div class="message-detail">
-    <nav class="message-detail__breadcrumb text-secondary">
-      <RouterLink to="/message" class="link">
-        消息中心
-      </RouterLink>
-      <span> &gt; </span>
-      <span>{{ item ? `${item.type}详情` : '消息详情' }}</span>
-    </nav>
+    <PageHead
+      title="消息详情"
+      slogan="查看站内消息完整内容与附件资料"
+    />
 
-    <template v-if="item">
-      <article class="message-detail__card">
-        <h1 class="message-detail__title">
-          {{ item.title }}
-        </h1>
-        <p class="message-detail__time text-secondary">
-          发布时间：{{ item.publishTime }}
-        </p>
-        <div class="message-detail__content">
-          {{ item.content }}
-        </div>
+    <div class="message-detail__wrap">
+      <nav class="message-detail__breadcrumb">
+        <RouterLink to="/message" class="message-detail__breadcrumb-link">
+          消息中心
+        </RouterLink>
+        <span class="message-detail__breadcrumb-sep">&gt;</span>
+        <span class="message-detail__breadcrumb-current">{{ item ? `${item.type}详情` : '消息详情' }}</span>
+      </nav>
 
-        <section v-if="item.attachments.length > 0" class="message-detail__attachments">
-          <h2 class="message-detail__attachments-title">
-            附件（{{ item.attachments.length }}）
-          </h2>
-          <ul class="message-detail__file-list">
-            <li
-              v-for="(file, index) in item.attachments"
-              :key="`${file.name}-${index}`"
-              class="message-detail__file"
+      <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>
+          <div class="message-detail__content">
+            {{ item.content }}
+          </div>
+
+          <section v-if="item.attachments.length > 0" class="message-detail__attachments">
+            <h2 class="message-detail__attachments-title">
+              附件（{{ item.attachments.length }}）
+            </h2>
+            <ul class="message-detail__file-list">
+              <li
+                v-for="(file, index) in item.attachments"
+                :key="`${file.name}-${index}`"
+                class="message-detail__file"
+              >
+                <div class="message-detail__file-info">
+                  <span class="message-detail__file-name" :title="file.name">{{ file.name }}</span>
+                  <span class="message-detail__file-meta">
+                    {{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
+                  </span>
+                </div>
+                <div class="message-detail__file-actions">
+                  <el-button
+                    class="message-detail__file-btn"
+                    link
+                    @click="onPreview"
+                  >
+                    预览
+                  </el-button>
+                  <el-button
+                    class="message-detail__file-btn"
+                    link
+                    @click="onDownload"
+                  >
+                    下载
+                  </el-button>
+                </div>
+              </li>
+            </ul>
+          </section>
+
+          <div class="message-detail__actions">
+            <el-button
+              class="message-detail__back"
+              @click="onBack"
             >
-              <div class="message-detail__file-info">
-                <span class="message-detail__file-name" :title="file.name">{{ file.name }}</span>
-                <span class="message-detail__file-meta text-secondary">
-                  {{ formatFileSize(file.size) }} · 上传于{{ file.uploadTime }}
-                </span>
-              </div>
-              <div class="message-detail__file-actions">
-                <button class="message-detail__file-btn" @click="onPreview">
-                  预览
-                </button>
-                <button class="message-detail__file-btn" @click="onDownload">
-                  下载
-                </button>
-              </div>
-            </li>
-          </ul>
-        </section>
+              返回
+            </el-button>
+          </div>
+        </article>
+      </template>
 
-        <div class="message-detail__actions">
-          <AppButton type="primary" @click="onBack">
-            返回
-          </AppButton>
-        </div>
-      </article>
-    </template>
-
-    <p v-else class="message-detail__empty text-secondary">
-      消息不存在
-    </p>
+      <p v-else class="message-detail__empty">
+        消息不存在
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .message-detail {
-  max-width: @container-width;
-  margin: 0 auto;
-  padding: @spacing-lg @spacing-base @spacing-xxl;
+  .flex(column, flex-start, stretch);
+  gap: 0;
+  width: 100%;
+  padding-bottom: 60px;
+  background: @message-page-bg;
+
+  &__wrap {
+    width: 100%;
+    padding: 28px 70px 0;
+    box-sizing: border-box;
+  }
 
   &__breadcrumb {
-    display: flex;
-    align-items: center;
+    .flex(row, flex-start, center);
     gap: 4px;
-    margin-bottom: 12px;
-    font-size: 11px;
-    color: @text-color-disabled;
+    height: 49px;
+    font-size: 12px;
+    line-height: 17px;
+    color: @project-muted;
+  }
 
-    .link {
-      color: @text-color-disabled;
-    }
+  &__breadcrumb-link {
+    color: @project-muted;
 
-    span:last-child {
-      color: @text-color;
-      font-weight: 500;
+    &:hover {
+      color: @primary-strong;
     }
   }
 
+  &__breadcrumb-sep {
+    color: @project-muted;
+  }
+
+  &__breadcrumb-current {
+    color: @message-tabs-text;
+    font-weight: 500;
+  }
+
   &__card {
-    padding: 32px 36px 34px;
-    border-radius: @radius-lg;
+    padding: 45px 47px 40px;
+    border-radius: @radius-base;
     background: @white;
-    box-shadow: none;
+    box-sizing: border-box;
   }
 
   &__title {
-    font-size: 15px;
+    font-size: 20px;
     font-weight: 700;
-    color: @heading-color;
+    line-height: 28px;
+    color: @finance-ink;
     text-align: center;
   }
 
   &__time {
-    margin-top: 11px; // 14 × 0.77
-    font-size: 11px;
-    color: @text-color-disabled;
+    margin-top: 14px;
+    font-size: 12px;
+    line-height: 18px;
+    color: @project-muted;
     text-align: center;
   }
 
   &__content {
-    margin-top: 24px;
+    margin-top: 16px;
     background: transparent;
-    color: @text-color;
-    font-size: 11px;
-    line-height: 1.9;
+    color: @message-tabs-text;
+    font-size: 13px;
+    line-height: 2.8;
     text-align: center;
     white-space: pre-wrap;
     word-break: break-word;
   }
 
   &__attachments {
-    margin-top: 20px;
+    margin-top: 24px;
 
     &-title {
-      margin-bottom: 8px;
-      font-size: 11px;
+      margin-bottom: 10px;
+      font-size: 12px;
       font-weight: 400;
-      color: @text-color-disabled;
+      color: @project-muted;
     }
   }
 
   &__file-list {
     .flex(column, flex-start, stretch);
-    gap: @spacing-sm;
+    gap: 10px;
   }
 
   &__file {
-    .flex(row, space-between);
+    .flex(row, space-between, center);
     gap: @spacing-base;
-    align-items: center;
-    width: fit-content;
+    width: 254px;
     max-width: 100%;
-    padding: 10px 14px;
-    border: none;
-    border-radius: 6px;
+    padding: 15px 12px 15px 19px;
+    border-radius: @radius-sm;
     background: @finance-row-bg;
     list-style: none;
+    box-sizing: border-box;
   }
 
   &__file-info {
     .flex(column, flex-start, flex-start);
-    gap: 3px;
+    gap: 4px;
     min-width: 0;
   }
 
   &__file-name {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
-    color: @heading-color;
+    color: @finance-ink;
     .ellipsis();
   }
 
   &__file-meta {
     font-size: 11px;
-    color: @text-color-disabled;
+    color: @project-muted;
+    .ellipsis();
   }
 
   &__file-actions {
-    .flex(row, center);
-    gap: @spacing-sm;
+    .flex(column, center, center);
+    gap: 2px;
     flex-shrink: 0;
   }
 
   &__file-btn {
-    font-size: 11px;
-    color: @text-color-secondary;
-    transition: color 0.2s;
+    padding: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: @message-tabs-text;
 
     &:hover {
       color: @primary-strong;
@@ -219,28 +257,32 @@ onMounted(load)
 
   &__actions {
     .flex(row, flex-end);
-    margin-top: 32px;
+    margin-top: 40px;
+  }
 
-    .app-button {
-      height: 24px; // 31 × 0.77
-      padding: 0 16px;
-      border-radius: 6px;
+  &__back {
+    width: 94px;
+    height: 34px;
+    padding: 0;
+    border-color: @primary-strong;
+    border-radius: @radius-sm;
+    background: @primary-strong;
+    color: @white;
+    font-size: 13px;
+    font-weight: 500;
+
+    &:hover {
+      border-color: @primary-strong;
       background: @primary-strong;
       color: @white;
-      font-size: 11px;
-      font-weight: 500;
-
-      &:hover {
-        background: @primary-strong;
-        color: @white;
-      }
     }
   }
 
   &__empty {
-    padding: @spacing-xxl 0;
+    padding: 80px 0;
     text-align: center;
-    font-size: 11px;
+    font-size: 13px;
+    color: @project-muted;
   }
 }
 </style>
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 47afeff..25c161b 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -1,9 +1,10 @@
 <!-- 页面：消息中心（Message） -->
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
-import { AppButton, FilterPanel, PaginationBar } from '@/components'
+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 MessageTabs from './cpns/MessageTabs.vue'
@@ -13,16 +14,15 @@ const router = useRouter()
 const messageStore = useMessageStore()
 const { query, list, total, unreadCount, tabCounts } = storeToRefs(messageStore)
 
-const keyword = computed({
-  get: () => query.value.keyword,
-  set: (value: string) => messageStore.setQuery({ ...query.value, keyword: value }),
-})
+const keyword = ref(query.value.keyword)
 
 function onSearch(): void {
+  messageStore.setQuery({ ...query.value, keyword: keyword.value })
   void messageStore.search()
 }
 
 function onReset(): void {
+  keyword.value = ''
   void messageStore.resetQuery()
 }
 
@@ -50,18 +50,16 @@ onMounted(() => {
     messageStore.fetchTabCounts(),
   ])
 })
+
+const UNREAD_LABEL = computed(() => (unreadCount.value > 0 ? `全部已读 (${unreadCount.value})` : '全部已读'))
 </script>
 
 <template>
   <div class="message">
-    <header class="message__head">
-      <h1 class="message__title">
-        消息中心
-      </h1>
-    </header>
-    <p class="message__subtitle text-secondary">
-      统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒
-    </p>
+    <PageHead
+      title="消息中心"
+      slogan="统一接收项目进度、售后工单、账单待办等站内消息，重要业务动态实时提醒"
+    />
 
     <div class="message__body">
       <MessageTabs
@@ -73,21 +71,34 @@ onMounted(() => {
 
       <div class="message__main">
         <div class="message__toolbar">
-          <FilterPanel
-            class="message__filter"
-            v-model:keyword="keyword"
-            keyword-placeholder="搜索消息标题、内容"
-            @search="onSearch"
-            @reset="onReset"
+          <el-input
+            v-model="keyword"
+            class="message__search"
+            placeholder="搜索消息标题、内容"
+            clearable
+            @keyup.enter="onSearch"
           />
-          <AppButton
-            class="message__mark-read"
-            type="default"
+
+          <el-button
+            class="message__btn"
+            @click="onReset"
+          >
+            重置
+          </el-button>
+          <el-button
+            class="message__btn message__btn--primary"
+            @click="onSearch"
+          >
+            搜索
+          </el-button>
+
+          <el-button
+            class="message__btn message__btn--read"
             :disabled="unreadCount === 0"
             @click="onMarkAllRead"
           >
-            全部已读
-          </AppButton>
+            {{ UNREAD_LABEL }}
+          </el-button>
         </div>
 
         <MessageList :messages="list" @view="onView" />
@@ -107,144 +118,125 @@ onMounted(() => {
 <style lang="less" scoped>
 .message {
   .flex(column, flex-start, stretch);
-  gap: @spacing-base;
-  max-width: @container-width;
-  margin: 0 auto;
-  padding: @spacing-xl @spacing-base @spacing-xxl;
-
-  &__head {
-    .flex(row, flex-start);
-    margin-bottom: -10px;
-  }
-
-  &__title {
-    font-size: 17px;
-    font-weight: 700;
-    color: @heading-color;
-  }
-
-  &__subtitle {
-    text-align: center;
-    font-size: 11px;
-  }
+  gap: 0;
+  width: 100%;
+  padding-bottom: 14px;
+  background: @message-page-bg;
 
   &__body {
-    .flex(row, flex-start);
-    gap: 26px;
-    align-items: flex-start;
+    .flex(row, flex-start, flex-start);
+    gap: 22px;
+    width: 100%;
+    padding: 119px 25px 0;
+    box-sizing: border-box;
   }
 
   &__tabs {
     flex-shrink: 0;
-    width: 156px;
+    width: 198px;
   }
 
   &__main {
     .flex(column, flex-start, stretch);
-    gap: 15px;
+    gap: 0;
     flex: 1;
     min-width: 0;
   }
 
   &__toolbar {
-    .flex(row, flex-start);
-    align-items: center;
-    gap: 11px;
-    padding: 10px 17px;
+    .flex(row, flex-start, center);
+    gap: 0;
+    height: 69px;
+    padding: 0 21px 0 25px;
+    border: 1px solid @message-toolbar-btn-border;
     border-radius: @radius-base;
     background: @white;
+    box-sizing: border-box;
   }
 
-  & .message__filter {
-    flex: 1;
-    min-width: 0;
-    padding: 0;
-    background: transparent;
-  }
+  &__search {
+    flex: 0 1 460px;
+    height: 37px;
 
-  & .message__mark-read {
-    flex-shrink: 0;
-    height: 26px; // 34 × 0.77
-    padding: 0 16px;
-    border: 1px solid @border-color;
-    border-radius: 6px;
-    background: @white;
-    color: @text-color;
-    font-size: 11px;
-    font-weight: 500;
-
-    &:hover:not(:disabled) {
-      border-color: @primary-color;
-      background: @white;
-      color: @primary-color;
-    }
-  }
-
-  & .message__pagination {
-    justify-content: flex-end;
-    align-self: stretch;
-    padding: 0;
-  }
-
-  .message__filter {
-    :deep(.filter-panel__bar) {
-      gap: 6px;
-    }
-
-    :deep(.filter-panel__body) {
-      margin-top: 0;
-    }
-
-    :deep(.filter-panel__input) {
-      order: 0;
-      flex: 0 1 349px;
-      max-width: 349px;
-      height: 29px; // 38 × 0.77
-      margin-right: 2px;
-      padding: 0 10px;
-      border: none;
-      border-radius: 6px;
+    :deep(.el-input__wrapper) {
+      height: 37px;
+      padding: 0 16px;
+      border-radius: @radius-base;
       background: @finance-field-bg;
-      color: @text-color;
-      font-size: 11px;
+      box-shadow: none;
+    }
+
+    :deep(.el-input__inner) {
+      color: @finance-ink;
+      font-size: 13px;
 
       &::placeholder {
         color: @contract-placeholder;
       }
+    }
+  }
 
-      &:focus {
-        border: none;
-      }
+  &__btn {
+    height: 28px;
+    margin-left: 14px;
+    padding: 0 15px;
+    border-radius: @radius-sm;
+    font-size: 12px;
+    font-weight: 400;
+
+    &:hover {
+      border-color: @primary-strong;
+      color: @primary-strong;
     }
 
-    :deep(.filter-panel__btn) {
-      order: 1;
-      min-width: 46px;
-      height: 29px;
-      padding: 0 12px;
-      border: none;
-      border-radius: 6px;
-      background: @contract-reset-bg;
-      color: @text-color;
-      font-size: 11px;
-      font-weight: 500;
-
-      &:hover {
-        background: @contract-reset-bg;
-        color: @text-color;
-      }
-    }
-
-    :deep(.filter-panel__btn--primary) {
-      order: 2;
+    &--primary {
+      border-color: @primary-strong;
       background: @primary-strong;
       color: @white;
 
       &:hover {
+        border-color: @primary-strong;
         background: @primary-strong;
         color: @white;
       }
     }
+
+    &--read {
+      margin-left: auto;
+      border-color: @message-toolbar-btn-border;
+      background: @white;
+      color: @finance-entry-text;
+
+      &:hover:not(:disabled) {
+        border-color: @primary-strong;
+        background: @white;
+        color: @primary-strong;
+      }
+    }
+  }
+
+  &__pagination {
+    justify-content: flex-end;
+    align-self: stretch;
+    margin-top: 16px;
+    padding: 0;
+
+    :deep(.pagination__btn) {
+      min-width: 23px;
+      height: 26px;
+      border-color: @message-toolbar-btn-border;
+      border-radius: @radius-sm;
+      background: @white;
+      color: @finance-entry-text;
+      font-size: 12px;
+    }
+
+    :deep(.pagination__btn.is-active) {
+      border-color: @message-pager-active-bg;
+      background: @message-pager-active-bg;
+      color: @primary-strong;
+      font-weight: 500;
+    }
   }
 }
 </style>
diff --git a/src/views/service/cpns/ChatFileCard.vue b/src/views/service/cpns/ChatFileCard.vue
index 788f28a..8780714 100644
--- a/src/views/service/cpns/ChatFileCard.vue
+++ b/src/views/service/cpns/ChatFileCard.vue
@@ -12,73 +12,64 @@ interface Props {
 
 defineProps<Props>()
 
-const emit = defineEmits<{ download: [] }>()
+function extOf(name: string): string {
+  const idx = name.lastIndexOf('.')
+  return idx > -1 ? name.slice(idx + 1).toUpperCase() : 'FILE'
+}
 </script>
 
 <template>
   <div class="chat-file-card">
-    <span class="chat-file-card__icon">📄</span>
+    <span class="chat-file-card__icon">{{ extOf(file.name) }}</span>
     <div class="chat-file-card__info">
       <span class="chat-file-card__name" :title="file.name">{{ file.name }}</span>
-      <span class="chat-file-card__size text-secondary">{{ formatFileSize(file.size) }}</span>
+      <span class="chat-file-card__size">{{ formatFileSize(file.size) }}</span>
     </div>
-    <button class="chat-file-card__download" @click="emit('download')">
-      下载
-    </button>
   </div>
 </template>
 
 <style lang="less" scoped>
 .chat-file-card {
   .flex(row, center);
-  gap: 8px;
-  min-width: 181px;
-  max-width: 320px;
-  padding: 10px 12px;
-  border: 1px solid @project-divider;
-  border-radius: 6px;
+  gap: 12px;
+  min-width: 300px;
+  max-width: 420px;
+  padding: 14px 16px;
+  border-radius: @radius-base;
   background: @white;
 
   &__icon {
     flex-shrink: 0;
-    font-size: 14px;
+    .flex(row, center);
+    width: 37px;
+    height: 37px;
+    border-radius: @radius-sm;
+    background: @service-scroll-bg;
+    color: @primary-strong;
+    font-size: 11px;
+    font-weight: 700;
     line-height: 1;
   }
 
   &__info {
     .flex(column, flex-start, flex-start);
-    gap: 4px;
+    gap: 6px;
     flex: 1;
     min-width: 0;
   }
 
   &__name {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 700;
-    color: @heading-color;
+    line-height: 16px;
+    color: @service-bubble-text;
     .ellipsis();
   }
 
   &__size {
-    font-size: 11px;
-    color: @text-color-disabled;
-  }
-
-  &__download {
-    flex-shrink: 0;
-    height: 22px;
-    padding: 0 8px;
-    border: 1px solid @border-color;
-    border-radius: 4px;
-    background: @white;
-    color: @text-color-secondary;
-    font-size: 11px;
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: @primary-strong;
-      color: @primary-strong;
-    }
+    font-size: 12px;
+    line-height: 16px;
+    color: @project-muted;
   }
 }
 </style>
diff --git a/src/views/service/cpns/ChatInput.vue b/src/views/service/cpns/ChatInput.vue
index 015acd3..60d576e 100644
--- a/src/views/service/cpns/ChatInput.vue
+++ b/src/views/service/cpns/ChatInput.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { AppButton } from '@/components'
+import { ElButton, ElMessage } from 'element-plus'
 
 const MAX_FILE_SIZE = 1024 * 1024 * 1024
 
 const content = ref('')
-const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const emit = defineEmits<{
   send: [content: string]
@@ -28,10 +26,6 @@ function onKeydown(event: KeyboardEvent): void {
   }
 }
 
-function openFilePicker(): void {
-  fileInputRef.value?.click()
-}
-
 function onFileChange(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
@@ -56,28 +50,21 @@ function onFileChange(event: Event): void {
       @keydown="onKeydown"
     />
     <div class="chat-input__bar">
-      <span class="chat-input__hint text-secondary">
-        按Enter发送 | 支持拖拽上传文件
+      <span class="chat-input__hint">
+        按 Enter 发送 | 支持拖拽上传文件
       </span>
       <div class="chat-input__actions">
-        <button
-          type="button"
-          class="chat-input__attach"
-          aria-label="上传附件"
-          title="上传附件"
-          @click="openFilePicker"
-        >
-          📎
-        </button>
         <input
-          ref="fileInputRef"
           type="file"
           class="chat-input__file"
           @change="onFileChange"
         >
-        <AppButton type="primary" @click="doSend">
+        <el-button
+          class="chat-input__send"
+          @click="doSend"
+        >
           发送
-        </AppButton>
+        </el-button>
       </div>
     </div>
   </div>
@@ -86,20 +73,21 @@ function onFileChange(event: Event): void {
 <style lang="less" scoped>
 .chat-input {
   .flex(column, flex-start, stretch);
-  gap: 16px;
-  padding: 12px 16px 24px;
-  border-top: 1px solid @project-divider;
+  gap: 0;
+  padding: 16px 22px 20px;
+  border-top: 1px solid @service-card-line;
   background: @white;
+  box-sizing: border-box;
 
   &__textarea {
     width: 100%;
-    height: 57px;
-    padding: 11px 10px;
+    height: 72px;
+    padding: 12px 14px;
     border: none;
-    border-radius: 6px;
-    background: @finance-row-bg;
-    color: @heading-color;
-    font-size: 11px;
+    border-radius: @radius-sm;
+    background: @service-input-bg;
+    color: @service-bubble-text;
+    font-size: 13px;
     line-height: 1.6;
     resize: none;
     outline: none;
@@ -108,24 +96,27 @@ function onFileChange(event: Event): void {
 
     &:focus {
       border: none;
-      background: @finance-row-bg;
+      background: @service-input-bg;
     }
 
     &::placeholder {
-      color: @heading-color;
+      color: @project-muted;
     }
   }
 
   &__bar {
-    .flex(row, space-between);
+    .flex(row, space-between, center);
     gap: @spacing-base;
-    align-items: center;
     width: 100%;
+    margin-top: 0;
+    padding-top: 14px;
+    background: @service-bar-bg;
   }
 
   &__hint {
     font-size: 11px;
-    color: @text-color-disabled;
+    line-height: 16px;
+    color: @project-muted;
   }
 
   &__actions {
@@ -134,35 +125,26 @@ function onFileChange(event: Event): void {
   }
 
   &__attach {
-    .flex(row, center);
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: @radius-sm;
-    background: transparent;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      background: @bg-color-light;
-    }
+    display: none;
   }
 
   &__file {
     display: none;
   }
 
-  .app-button {
-    height: 24px; // 31 × 0.77
-    padding: 0 14px;
-    border-radius: 6px;
+  &__send {
+    width: 76px;
+    height: 30px;
+    padding: 0;
+    border-color: @primary-strong;
+    border-radius: @radius-sm;
     background: @primary-strong;
     color: @white;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 500;
 
     &:hover {
+      border-color: @primary-strong;
       background: @primary-strong;
       color: @white;
     }
diff --git a/src/views/service/cpns/ChatMessageItem.vue b/src/views/service/cpns/ChatMessageItem.vue
index 0727647..46f6d2c 100644
--- a/src/views/service/cpns/ChatMessageItem.vue
+++ b/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 {
diff --git a/src/views/service/cpns/ChatWindow.vue b/src/views/service/cpns/ChatWindow.vue
index 852d324..056e73e 100644
--- a/src/views/service/cpns/ChatWindow.vue
+++ b/src/views/service/cpns/ChatWindow.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
 import type { ChatMessage } from '@/types/business/service'
 import ChatMessageItem from './ChatMessageItem.vue'
 import ChatInput from './ChatInput.vue'
@@ -29,10 +28,6 @@ async function scrollToBottom(): Promise<void> {
   if (el) el.scrollTop = el.scrollHeight
 }
 
-function onDownload(): void {
-  ElMessage.info('下载待接口接入')
-}
-
 watch(
   () => props.messages.length,
   () => void scrollToBottom(),
@@ -48,13 +43,12 @@ watch(
 
     <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 text-secondary">
+        <div v-if="index === 0" class="chat-window__divider">
           —— 历史消息 ——
         </div>
         <ChatMessageItem
           :message="item"
           :unread="isUnread(index)"
-          @download="onDownload"
         />
       </template>
     </div>
@@ -66,51 +60,54 @@ watch(
 <style lang="less" scoped>
 .chat-window {
   .flex(column, flex-start, stretch);
-  border-radius: @radius-lg;
+  border: 1px solid @service-card-line;
+  border-radius: @radius-base;
   background: @white;
-  box-shadow: @shadow-base;
+  box-sizing: border-box;
   overflow: hidden;
 
   &__header {
-    .flex(row, flex-start);
-    gap: 11px;
-    height: 46px;
-    padding: 0 16px; // 21 × 0.77
-    border-bottom: 1px solid @project-divider;
+    .flex(row, flex-start, center);
+    gap: 16px;
+    height: 66px;
+    padding: 0 22px;
+    border-bottom: 1px solid @service-card-line;
     background: @white;
+    box-sizing: border-box;
   }
 
   &__header-avatar {
     flex-shrink: 0;
-    width: 28px;
-    height: 28px;
+    width: 33px;
+    height: 33px;
     border-radius: @radius-round;
     background: @primary-strong;
   }
 
   &__header-name {
-    align-self: center;
-    font-size: 11px;
-    font-weight: 700;
-    color: @heading-color;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 18px;
+    color: @service-header-name;
   }
 
   &__scroll {
     .flex(column, flex-start, stretch);
-    gap: 56px;
-    max-height: 60vh;
-    min-height: 347px;
-    padding: 22px 16px;
-    background: @bg-color-light;
+    gap: 32px;
+    height: 450px;
+    padding: 24px 22px;
+    background: @service-scroll-bg;
     overflow-y: auto;
+    box-sizing: border-box;
     .scrollbar();
   }
 
   &__divider {
     flex-shrink: 0;
-    margin-bottom: -42px;
-    font-size: 11px;
-    color: @text-color-disabled;
+    margin-bottom: -18px;
+    font-size: 12px;
+    line-height: 18px;
+    color: @project-muted;
     text-align: center;
   }
 }
diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index 075e69d..736b3af 100644
--- a/src/views/service/index.vue
+++ b/src/views/service/index.vue
@@ -2,6 +2,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
+import { PageHead } from '@/components'
 import { useServiceStore } from '@/stores/modules/service'
 import ChatWindow from './cpns/ChatWindow.vue'
 
@@ -23,49 +24,33 @@ onMounted(() => {
 
 <template>
   <div class="service">
-    <header class="service__head">
-      <h1 class="service__title">
-        在线客服
-      </h1>
-      <p class="service__subtitle text-secondary">
-        在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题。
-      </p>
-    </header>
-
-    <ChatWindow
-      :messages="messages"
-      @send="onSend"
-      @send-file="onSendFile"
+    <PageHead
+      title="在线客服"
+      slogan="在线客服为您提供需求咨询、项目进度查询、业务答疑，快速协助解决平台操作与项目相关问题"
     />
+
+    <div class="service__wrap">
+      <ChatWindow
+        :messages="messages"
+        @send="onSend"
+        @send-file="onSendFile"
+      />
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .service {
   .flex(column, flex-start, stretch);
-  gap: @spacing-base;
-  max-width: @container-width;
-  min-height: calc(100vh - @header-height);
-  margin: 0 auto;
-  padding: 25px @spacing-base @spacing-xxl;
-  background: @white;
+  gap: 0;
+  width: 100%;
+  padding-bottom: 60px;
+  background: @message-page-bg;
 
-  &__head {
-    padding-left: 32px;
-  }
-
-  &__title {
-    font-size: @font-size-xxl;
-    font-weight: 700;
-    color: @home-ink;
-  }
-
-  &__subtitle {
-    margin-top: 12px;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.5;
-    color: @contract-muted;
+  &__wrap {
+    width: 100%;
+    padding: 0 70px;
+    box-sizing: border-box;
   }
 }
 </style>