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/profile/cpns/HelpFaq.vue

@@ -1,15 +1,32 @@
 <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">
+    <aside class="help-faq__aside">
+      <p
+        v-for="item in questions"
+        :key="item.q"
+        class="help-faq__q"
+      >
+        Q: {{ item.q }}
+      </p>
+    </aside>
+
+    <div class="help-faq__main">
+      <div class="help-faq__main-inner">
         <section
           v-for="(group, gi) in groups"
           :key="group.title"
@@ -18,19 +35,16 @@ defineProps<Props>()
           <h3 class="help-faq__group-title">
             {{ gi + 1 }}、{{ group.title }}
           </h3>
-      <div
+          <p
             v-for="item in group.items"
-        :key="item.q"
+            :key="`${group.title}-${item.q}`"
-        class="help-faq__item"
+            class="help-faq__a"
           >
-        <p class="help-faq__q">
-          Q: {{ item.q }}
-        </p>
-        <p class="help-faq__a text-secondary">
             {{ item.a }}
           </p>
-      </div>
         </section>
+      </div>
+    </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/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: '';