feat 在线客服和详细中心整改

src/api/profile.ts

@@ -344,60 +344,61 @@ export function submitFeedback(feedback: Feedback): Promise<void> {
   return Promise.resolve()
 }
 
+/** TODO(api): 后端帮助中心接口就绪后改为 request 调用；暂用设计稿假数据 */
 export function getHelpFaqs(): Promise<HelpFaqGroup[]> {
   return Promise.resolve([
     {
-      title: '1. 账户与登录',
+      title: '账户与登录',
       items: [
         {
-          q: '如何注册账号？',
+          q: '如何注册账号?',
-          a: '点击页面右上角"注册"，输入手机号并获取验证码，设置 6-20 位登录密码即可完成注册。',
+          a: '打开APP后点击“注册”，输入手机号获取验证码，设置登录密码即可完成注册。',
         },
         {
-          q: '忘记密码怎么办？',
+          q: '忘记密码怎么办?',
-          a: '在登录页点击"忘记密码"，通过绑定手机号验证码验证身份后即可重新设置密码。',
+          a: '在登录页面点击“忘记密码”，输入注册手机号获取验证码，验证通过后即可重置新密码。',
         },
         {
-          q: '一个账号可以多地登录吗？',
+          q: '一个账号可以多端登录吗?',
-          a: '同一账号同时仅允许在 1 台设备上保持在线，超出将自动踢出最早登录的设备。',
+          a: '同一账号仅允许在 1 台设备上保持在线，超出将自动踢出最早登录的设备。',
         },
         {
-          q: '如何修改绑定手机号？',
+          q: '如何修改绑定手机号?',
-          a: '进入 个人中心 → 账号安全 → 绑定手机，验证原手机号后即可绑定新号码。',
+          a: '进入「我的 -> 设置 -> 账户安全 -> 更换手机号」，验证原手机号后即可绑定新号码。',
         },
       ],
     },
     {
-      title: '2. 功能使用指南',
+      title: '功能使用指南',
       items: [
         {
-          q: '如何提交需求？',
+          q: '如何提交报修/工单?',
-          a: '进入"发布需求"页面，填写需求描述、预算、周期等信息并提交，专业顾问将在一个工作日内与您联系。',
+          a: '首页点击「报修」 -> 选择报修类型 -> 填写问题描述并上传图片 -> 提交。提交后可在「我的 -> 我的工单」中查看处理进度。',
         },
         {
-          q: '如何查看我的消息？',
+          q: '如何预约会议室?',
-          a: '登录后点击右上角消息图标，或进入 个人中心 → 消息通知，即可查看系统通知与顾问消息。',
+          a: '进入「服务 -> 会议室预订」，选择日期、时间段及会议室，确认后提交预约，预约成功将收到消息通知。',
         },
         {
-          q: '如何申请售后？',
+          q: '如何查看我的消息通知?',
-          a: '在"我的订单"中找到对应项目，点击"申请售后"填写问题描述并上传附件，平台将尽快为您处理。',
+          a: '首页右上角铃铛图标进入消息中心，支持按“全部 / 未读 / 系统通知 / 业务提醒”分类查看。',
         },
       ],
     },
     {
-      title: '3. 系统与权限',
+      title: '系统与权限',
       items: [
         {
-          q: '无权限怎么办？',
+          q: 'APP提示“无权限”怎么办?',
-          a: '请确认当前账号角色是否具备该模块权限；如仍无法访问，请联系专属客服或平台管理员为您开通。',
+          a: '部分功能需要管理员授权后方可使用，请联系贵司系统管理员为您分配对应角色权限。',
         },
         {
-          q: '收不到通知怎么办？',
+          q: '为什么收不到推送通知?',
-          a: '请检查浏览器通知权限与消息设置是否开启；若仍未收到，请联系客服核实账号通知配置。',
+          a: '请检查：①手机系统设置中是否允许本APP发送通知；②APP内「我的 -> 设置 -> 消息推送」是否已开启。',
         },
         {
-          q: '支持哪些浏览器？',
+          q: 'APP支持哪些系统版本?',
-          a: '推荐使用 Chrome、Edge、Firefox、Safari 等主流浏览器的最新版本访问本平台。',
+          a: 'iOS 13.0 及以上版本，Android 8.0 及以上版本。建议使用最新系统版本以获得最佳体验。',
         },
       ],
     },

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)"
+    @click="emit('view', message)"
-    @keydown.enter="emit('view', message.id)"
+    @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;
+  gap: @spacing-base;
-  min-height: 86px;
+  min-height: 88px;
-  padding: 19px 29px;
+  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;
+    width: 40px;
-    height: 42px;
+    height: 40px;
     border-radius: @radius-round;
-    background: @message-item-icon;
+    background: @primary-light;
-    font-size: 20px;
+    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-size: @font-size-base;
-    font-weight: 600;
+    font-weight: 500;
-    line-height: 20px;
+    line-height: 1.4;
-    color: @finance-ink;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__time {
     flex-shrink: 0;
-    font-size: 12px;
+    font-size: @font-size-xs;
-    line-height: 20px;
+    line-height: 1.4;
-    color: @message-tabs-text;
+    color: @text-color-secondary;
   }
 
   &__summary {
-    font-size: 12px;
+    margin: 0;
-    line-height: 18px;
+    font-size: @font-size-sm;
-    color: @message-tabs-text;
+    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;
+    top: 0;
-    left: 60px;
+    right: 0;
-    width: 14px;
+    width: 8px;
-    height: 14px;
+    height: 8px;
     border: 2px solid @white;
     border-radius: @radius-round;
     background: @message-tabs-badge;

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;
   }
 

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;
+    min-width: 18px;
-    height: 15px;
+    height: 18px;
-    padding: 0 4px;
+    padding: 0 @spacing-xs;
     border-radius: @radius-round;
-    background: @message-tabs-badge;
+    background: @bg-color-light;
-    color: @white;
+    color: @text-color-secondary;
-    font-size: 10px;
+    font-size: @font-size-xs;
-    font-weight: 400;
+    font-weight: 500;
-    line-height: 15px;
+    line-height: 18px;
     text-align: center;
     box-sizing: border-box;
   }
+
+  &__tab.is-active &__count {
+    background: fade(@primary-strong, 12%);
+    color: @primary-strong;
+  }
 }
 </style>

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">
+          <header class="message-detail__head">
-            {{ item.title }}
+            <h1 class="message-detail__title">
-          </h1>
+              {{ item.title }}
-          <p class="message-detail__time">
+            </h1>
-            发布时间：{{ item.publishTime }}
+            <p class="message-detail__time">
-          </p>
+              发布时间：{{ 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>
+                  </button>
-                  <el-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%;
+    padding-top: @spacing-lg;
-    max-width: @container-width;
+    padding-right: @home-gutter;
-    margin: 0 auto;
+    padding-left: @home-gutter;
-    padding: @spacing-lg @page-gutter 0;
     box-sizing: border-box;
+
+    @media (max-width: 1600px) {
+      padding-right: @spacing-lg;
+      padding-left: @spacing-lg;
+    }
   }
 
   &__breadcrumb {
     .flex(row, flex-start, center);
-    gap: 4px;
+    gap: @spacing-xs;
-    min-height: 40px;
+    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;
+    color: @heading-color;
-    text-align: left;
   }
 
   &__time {
-    margin-top: 14px;
+    margin: @spacing-sm 0 0;
-    font-size: 12px;
+    font-size: @font-size-sm;
-    line-height: 18px;
+    line-height: 1.4;
-    color: @project-muted;
+    color: @text-color-secondary;
-    text-align: center;
   }
 
   &__content {
-    margin-top: 16px;
+    margin-top: @spacing-lg;
-    background: transparent;
+    color: @text-color;
-    color: @message-tabs-text;
+    font-size: @font-size-base;
-    font-size: 13px;
+    line-height: 1.8;
-    line-height: 2.8;
+    text-align: left;
-    text-align: center;
     white-space: pre-wrap;
     word-break: break-word;
   }
 
   &__attachments {
-    margin-top: 24px;
+    margin-top: @spacing-xl;
+  }
 
-    &-title {
+  &__attachments-title {
-      margin-bottom: 10px;
+    margin: 0 0 @spacing-base;
-      font-size: 12px;
+    font-size: @font-size-sm;
-      font-weight: 400;
+    font-weight: 600;
-      color: @project-muted;
+    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;
+    width: 100%;
-    max-width: 100%;
+    max-width: 520px;
-    padding: 15px 12px 15px 19px;
+    padding: @spacing-base;
-    border-radius: @radius-sm;
+    border: 1px solid @border-color;
-    background: @finance-row-bg;
+    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-size: @font-size-sm;
-    font-weight: 700;
+    font-weight: 600;
-    color: @finance-ink;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__file-meta {
-    font-size: 11px;
+    font-size: @font-size-xs;
-    color: @project-muted;
+    color: @text-color-secondary;
     .ellipsis();
   }
 
   &__file-actions {
-    .flex(column, center, center);
+    .flex(row, flex-end, center);
-    gap: 2px;
+    gap: @spacing-sm;
     flex-shrink: 0;
   }
 
   &__file-btn {
-    padding: 0;
+    height: 28px;
-    font-size: 12px;
+    padding: 0 @spacing-sm;
-    font-weight: 400;
+    border: none;
-    color: @message-tabs-text;
+    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;
+    min-width: 88px;
-    height: 34px;
+    height: 36px;
-    padding: 0;
+    padding: 0 @spacing-lg;
-    border-color: @primary-strong;
+    border: none;
-    border-radius: @radius-sm;
+    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-hover;
-      background: @primary-strong;
-      color: @white;
     }
   }
 
   &__empty {
-    padding: 80px 0;
+    padding: @spacing-xxl 0;
     text-align: center;
-    font-size: 13px;
+    font-size: @font-size-sm;
-    color: @project-muted;
+    color: @text-color-secondary;
   }
 }
 </style>

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 {
+function onView(message: Message): void {
-  void router.push(`/message/${id}`)
+  // 用 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;

src/views/profile/address.vue

@@ -78,7 +78,7 @@ onMounted(() => {
         class="address-row"
       >
         <span v-if="address.isDefault" class="address-row__tag">默认</span>
-        <div class="address-row__col address-row__col--name">
+        <div class="address-row__col">
           <p class="address-row__label">收货人姓名</p>
           <EllipsisText class="address-row__value" :text="address.receiverName" />
         </div>
@@ -90,7 +90,7 @@ onMounted(() => {
           <p class="address-row__label">所在地区</p>
           <EllipsisText class="address-row__value" :text="address.region" />
         </div>
-        <div class="address-row__col address-row__col--detail">
+        <div class="address-row__col">
           <p class="address-row__label">详细地址</p>
           <EllipsisText class="address-row__value" :text="address.detailAddress" />
         </div>
@@ -144,8 +144,9 @@ onMounted(() => {
 <style lang="less" scoped>
 .address-page {
   .flex(column, flex-start);
-  gap: 20px;
+  gap: @spacing-lg;
   width: 100%;
+  min-width: 0;
 
   &__head {
     .flex(row, space-between, center);
@@ -158,7 +159,7 @@ onMounted(() => {
     font-size: @font-size-base;
     font-weight: 600;
     color: @profile-ink;
-    line-height: 20px;
+    line-height: 1.4;
 
     &::before {
       content: '';
@@ -174,7 +175,7 @@ onMounted(() => {
 
   &__create {
     height: 32px;
-    padding: 0 14px;
+    padding: 0 @spacing-base;
     border: none;
     border-radius: @profile-radius;
     background: @primary-strong;
@@ -191,15 +192,16 @@ onMounted(() => {
 
   &__list {
     .flex(column, flex-start, stretch);
-    gap: 15px;
+    gap: @spacing-base;
     width: 100%;
+    min-width: 0;
   }
 
   &__empty {
     padding: @spacing-xxl 0;
     width: 100%;
     text-align: center;
-    font-size: 13px;
+    font-size: @font-size-sm;
   }
 
   :deep(.pagination) {

src/views/profile/cpns/AddressDialog.vue

@@ -148,10 +148,10 @@ function onSave(): void {
   &__title {
     position: relative;
     padding-left: 12px;
-    font-size: 12px;
+    font-size: @font-size-base;
-    font-weight: 700;
+    font-weight: 600;
     color: @heading-color;
-    line-height: 20px;
+    line-height: 1.4;
 
     &::before {
       content: '';
@@ -172,7 +172,7 @@ function onSave(): void {
   }
 
   &__label {
-    font-size: 11px;
+    font-size: @font-size-sm;
     font-weight: 500;
     color: @heading-color;
   }
@@ -180,11 +180,11 @@ function onSave(): void {
   &__input,
   &__textarea {
     width: 100%;
-    padding: 0 12px;
+    padding: 0 @spacing-base;
     border: 1px solid @profile-input-border;
     border-radius: @profile-radius;
     background: @white;
-    font-size: 11px;
+    font-size: @font-size-sm;
     color: @text-color;
     outline: none;
     transition: border-color 0.2s;
@@ -195,7 +195,7 @@ function onSave(): void {
     }
 
     &::placeholder {
-      color: @heading-color;
+      color: @text-color-secondary;
     }
   }
 
@@ -218,7 +218,7 @@ function onSave(): void {
   .app-button {
     flex: 1;
     height: 36px;
-    font-size: 12px;
+    font-size: @font-size-sm;
     font-weight: 500;
     border-radius: @profile-radius;
   }

src/views/profile/cpns/HelpFaq.vue

@@ -1,36 +1,50 @@
 <script setup lang="ts">
-import type { HelpFaqGroup } from '@/types/business/profile'
+import { computed } from 'vue'
+import type { HelpFaqGroup, HelpFaqItem } from '@/types/business/profile'
 
 interface Props {
   groups: HelpFaqGroup[]
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const questions = computed<HelpFaqItem[]>(() =>
+  props.groups.flatMap((group) => group.items),
+)
 </script>
 
 <template>
   <div class="help-faq">
-    <section
+    <aside class="help-faq__aside">
-      v-for="(group, gi) in groups"
+      <p
-      :key="group.title"
+        v-for="item in questions"
-      class="help-faq__group"
-    >
-      <h3 class="help-faq__group-title">
-        {{ gi + 1 }}、{{ group.title }}
-      </h3>
-      <div
-        v-for="item in group.items"
         :key="item.q"
-        class="help-faq__item"
+        class="help-faq__q"
       >
-        <p class="help-faq__q">
+        Q: {{ item.q }}
-          Q: {{ item.q }}
+      </p>
-        </p>
+    </aside>
-        <p class="help-faq__a text-secondary">
+
-          {{ item.a }}
+    <div class="help-faq__main">
-        </p>
+      <div class="help-faq__main-inner">
+        <section
+          v-for="(group, gi) in groups"
+          :key="group.title"
+          class="help-faq__group"
+        >
+          <h3 class="help-faq__group-title">
+            {{ gi + 1 }}、{{ group.title }}
+          </h3>
+          <p
+            v-for="item in group.items"
+            :key="`${group.title}-${item.q}`"
+            class="help-faq__a"
+          >
+            {{ item.a }}
+          </p>
+        </section>
       </div>
-    </section>
+    </div>
 
     <p v-if="groups.length === 0" class="help-faq__empty text-secondary">
       暂无常见问题
@@ -40,48 +54,79 @@ defineProps<Props>()
 
 <style lang="less" scoped>
 .help-faq {
-  .flex(column, flex-start);
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: @spacing-xxl;
+  align-items: start;
   width: 100%;
+  min-width: 0;
+
+  &__aside {
+    .flex(column, flex-start, flex-start);
+    gap: @spacing-xl;
+    text-align: left;
+  }
+
+  &__q {
+    margin: 0;
+    font-size: @font-size-base;
+    font-weight: 600;
+    color: @heading-color;
+    line-height: 1.6;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  &__main {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  &__main-inner {
+    width: 100%;
+    max-width: 480px;
+    margin: 0 auto;
+    text-align: center;
+  }
 
   &__group {
+    .flex(column, flex-start, center);
+    gap: @spacing-base;
+    width: 100%;
+
     & + & {
-      margin-top: @spacing-xl;
+      margin-top: @spacing-xxl;
     }
   }
 
   &__group-title {
+    margin: 0;
+    width: 100%;
     font-size: @font-size-base;
     font-weight: 600;
     color: @heading-color;
     line-height: 1.4;
-    text-align: left;
+    text-align: center;
-  }
-
-  &__item {
-    margin-top: @spacing-base;
-    padding: @spacing-base;
-    border-radius: @radius-base;
-    background: @bg-color-light;
-  }
-
-  &__q {
-    font-size: @font-size-base;
-    font-weight: 600;
-    color: @heading-color;
-    line-height: 1.4;
   }
 
   &__a {
-    margin: @spacing-sm 0 0;
+    margin: 0;
+    width: 100%;
     font-size: @font-size-sm;
-    line-height: 1.6;
+    line-height: 1.8;
     color: @text-color-secondary;
+    text-align: center;
   }
 
   &__empty {
+    grid-column: 1 / -1;
     padding: @spacing-xxl 0;
     text-align: center;
-    font-size: 13px;
+    font-size: @font-size-sm;
   }
 }
 </style>

src/views/profile/cpns/QualificationCard.vue

@@ -74,7 +74,17 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
 <style lang="less" scoped>
 .qual-row {
   position: relative;
-  .flex(row, flex-start, center);
+  display: grid;
+  grid-template-columns:
+    minmax(72px, 0.9fr)
+    minmax(100px, 1.2fr)
+    minmax(100px, 1.1fr)
+    minmax(100px, 1.1fr)
+    minmax(140px, 1.4fr)
+    minmax(64px, 0.7fr)
+    auto;
+  align-items: center;
+  gap: @spacing-base;
   min-height: 72px;
   padding: @spacing-base @spacing-lg;
   border: 1px solid @border-color;
@@ -83,37 +93,22 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
   box-sizing: border-box;
 
   &__col {
-    flex: 0 0 200px;
     min-width: 0;
-    padding-right: 20px;
-    box-sizing: border-box;
-
-    &--name {
-      flex: 0 0 270px;
-    }
-
-    &--valid {
-      flex: 0 0 250px;
-    }
-
-    &--status {
-      flex: 0 0 100px;
-    }
   }
 
   &__label {
+    margin: 0;
     font-size: @font-size-sm;
-    color: @finance-axis-text;
+    color: @text-color-secondary;
-    line-height: 16px;
+    line-height: 1.4;
   }
 
   &__value {
-    margin-top: 6px;
+    margin-top: @spacing-xs;
     font-size: @font-size-base;
     font-weight: 600;
     color: @profile-ink;
-    line-height: 20px;
+    line-height: 1.4;
-    .ellipsis();
   }
 
   &__status {
@@ -131,10 +126,9 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
   }
 
   &__actions {
-    .flex(row, flex-start, center);
+    .flex(row, flex-end, center);
-    flex-shrink: 0;
+    flex-wrap: wrap;
-    gap: 12px;
+    gap: @spacing-sm;
-    margin-left: auto;
   }
 
   &__btn {
@@ -143,8 +137,9 @@ const STATUS_CLASS: Record<QualificationStatus, string> = {
     border: 1px solid @border-color;
     border-radius: @radius-round;
     background: @white;
-    color: @finance-entry-text;
+    color: @text-color;
     font-size: @font-size-sm;
+    white-space: nowrap;
     cursor: pointer;
     transition: all 0.2s;
 

src/views/profile/help.vue

@@ -37,11 +37,11 @@ onMounted(() => {
 
   &__title {
     position: relative;
-    padding-left: 12px;
+    padding-left: 14px;
-    font-size: 14px;
+    font-size: @font-size-base;
-    font-weight: 700;
+    font-weight: 600;
-    color: @heading-color;
+    color: @profile-ink;
-    line-height: 20px;
+    line-height: 1.4;
 
     &::before {
       content: '';

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;
+  gap: @spacing-base;
-  min-width: 300px;
+  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;
+    width: 40px;
-    height: 37px;
+    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-size: @font-size-sm;
-    font-weight: 700;
+    font-weight: 600;
-    line-height: 16px;
+    line-height: 1.4;
-    color: @service-bubble-text;
+    color: @heading-color;
     .ellipsis();
   }
 
   &__size {
-    font-size: 12px;
+    font-size: @font-size-xs;
-    line-height: 16px;
+    line-height: 1.4;
-    color: @project-muted;
+    color: @text-color-secondary;
   }
 }
 </style>

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">
+      <div class="chat-input__tools">
-        按 Enter 发送 | 支持拖拽上传文件
+        <button
-      </span>
+          type="button"
-      <div class="chat-input__actions">
+          class="chat-input__attach"
-        <input
+          @click="onPickFile"
-          type="file"
-          class="chat-input__file"
-          @change="onFileChange"
         >
-        <el-button
+          附件
-          class="chat-input__send"
+        </button>
-          @click="doSend"
+        <span class="chat-input__hint">Enter 发送</span>
-        >
-          发送
-        </el-button>
       </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;
+  gap: @spacing-base;
-  padding: 16px 22px 20px;
+  padding: @spacing-base @spacing-lg @spacing-lg;
-  border-top: 1px solid @service-card-line;
+  border-top: 1px solid @border-color;
   background: @white;
   box-sizing: border-box;
 
   &__textarea {
     width: 100%;
-    height: 72px;
+    min-height: 84px;
-    padding: 12px 14px;
+    padding: @spacing-base;
-    border: none;
+    border: 1px solid @border-color;
-    border-radius: @radius-sm;
+    border-radius: @radius-base;
-    background: @service-input-bg;
+    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;
+      border-color: @primary-color;
-      background: @service-input-bg;
+      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 {
+  &__tools {
-    font-size: 11px;
+    .flex(row, flex-start, center);
-    line-height: 16px;
+    gap: @spacing-base;
-    color: @project-muted;
+    min-width: 0;
-  }
-
-  &__actions {
-    .flex(row, flex-end, center);
-    gap: @spacing-sm;
   }
 
   &__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;
+    flex-shrink: 0;
-    height: 30px;
+    min-width: 80px;
-    padding: 0;
+    height: 32px;
-    border-color: @primary-strong;
+    padding: 0 @spacing-lg;
-    border-radius: @radius-sm;
+    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 {
+    &:hover:not(:disabled) {
-      border-color: @primary-strong;
+      background: @primary-hover;
-      background: @primary-strong;
+    }
-      color: @white;
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
     }
   }
 }

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-size: @font-size-sm;
-    font-weight: 400;
+    font-weight: 500;
 
     &--user {
       background: @service-user-avatar;
-      color: @white;
     }
   }
 
   &__main {
     .flex(column, flex-start, flex-start);
-    gap: 6px;
+    gap: @spacing-xs;
-    max-width: 420px;
+    max-width: min(480px, 70%);
   }
 
   &__bubble {
     position: relative;
-    padding: 12px 16px;
+    padding: @spacing-base;
-    border-radius: @radius-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;
+    font-size: @font-size-xs;
-    line-height: 16px;
+    line-height: 1.4;
-    color: @project-muted;
+    color: @text-color-secondary;
   }
 
   &__unread {
     position: absolute;
-    top: 100%;
+    top: calc(100% + @spacing-xs);
     left: 0;
-    margin-top: 8px;
+    color: @text-color-secondary;
-    padding: 0;
+    font-size: @font-size-xs;
-    background: transparent;
+    line-height: 1.4;
-    color: @project-muted;
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 14px;
   }
 
   &--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;
     }
   }
 }

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-avatar" aria-hidden="true">客</span>
-      <span class="chat-window__header-name">专属客服</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;
+    min-height: 64px;
-    padding: 0 @spacing-lg;
+    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;
+    .flex(row, center);
-    height: 33px;
+    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-size: @font-size-base;
-    font-weight: 500;
+    font-weight: 600;
-    line-height: 18px;
+    line-height: 1.4;
-    color: @service-header-name;
+    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;
+    gap: @spacing-lg;
-    height: 450px;
+    height: 460px;
-    padding: 24px 22px;
+    padding: @spacing-lg;
-    background: @service-scroll-bg;
+    background: @bg-color-light;
     overflow-y: auto;
     box-sizing: border-box;
     .scrollbar();
   }
 
   &__divider {
+    .flex(row, center, center);
     flex-shrink: 0;
-    margin-bottom: -18px;
+    gap: @spacing-base;
-    font-size: 12px;
+
-    line-height: 18px;
+    &::before,
-    color: @project-muted;
+    &::after {
-    text-align: center;
+      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>

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;
   }