feat(帮助中心): 实现帮助文章接口对接及页面调整

- 新增帮助相关API接口文件
- 修改帮助列表和详情页，使用接口获取数据
- 调整页面字段映射，移除本地存储逻辑

+/*
+ * @Date: 2025-06-11 17:22:43
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-06-11 17:31:26
+ * @FilePath: /mlaj/src/api/help.js
+ * @Description: 帮助相关接口
+ */
+
+import { fn, fetch } from './fn'
+
+const Api = {
+  ARTICLE_LIST: '/srv/?a=get_article_list&sn=HELP',
+  ARTICLE_INFO: '/srv/?a=get_article',
+}
+
+/**
+ * @description: 帮助列表
+ */
+export const getArticleListAPI = (params) => fn(fetch.get(Api.ARTICLE_LIST, params))
+
+/**
+ * @description: 帮助详情
+ */
+export const getArticleInfoAPI = (params) => fn(fetch.get(Api.ARTICLE_INFO, params))

 <!--
  * @Date: 2025-03-24 13:04:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 13:04:32
+ * @LastEditTime: 2025-06-11 17:33:45
  * @FilePath: /mlaj/src/views/profile/HelpDetailPage.vue
  * @Description: 文件描述
 -->
@@ -10,9 +10,9 @@
     <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
       <div class="px-4 py-6">
         <FrostedGlass class="rounded-xl overflow-hidden p-4">
-          <h2 class="text-xl font-semibold text-gray-900 mb-4">{{ helpItem?.title }}</h2>
+          <h2 class="text-xl font-semibold text-gray-900 mb-4">{{ helpItem?.post_title }}</h2>
           <div class="prose prose-sm max-w-none">
-            <pre class="whitespace-pre-wrap text-gray-600 font-normal text-base">{{ helpItem?.content }}</pre>
+            <div class="whitespace-pre-wrap text-gray-600 font-normal text-base" v-html="helpItem?.post_content"></div>
           </div>
         </FrostedGlass>
       </div>
@@ -26,6 +26,8 @@ import { useRoute, useRouter } from 'vue-router';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
 import { useTitle } from '@vueuse/core';
+// 导入接口
+import { getArticleInfoAPI } from "@/api/help";
 
 const $route = useRoute();
 const $router = useRouter();
@@ -34,12 +36,12 @@ useTitle($route.meta.title);
 const route = useRoute();
 const helpItem = ref(null);
 
-onMounted(() => {
+onMounted(async() => {
   // 从本地存储中获取帮助项数据
   const id = route.params.id;
-  const storedItem = localStorage.getItem(`help_item_${id}`);
-  if (storedItem) {
-    helpItem.value = JSON.parse(storedItem);
+  const res = await getArticleInfoAPI({i: id});
+  if (res.code) {
+    helpItem.value = res.data;
   }
 });
 </script>

 <!--
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 13:04:23
+ * @LastEditTime: 2025-06-11 17:34:52
  * @FilePath: /mlaj/src/views/profile/HelpPage.vue
  * @Description: 文件描述
 -->
@@ -18,8 +18,8 @@
               @click="handleItemClick(item)"
             >
               <div class="flex-1">
-                <h3 class="text-base font-medium text-gray-900 mb-1">{{ item.title }}</h3>
-                <p class="text-sm text-gray-500">{{ item.description }}</p>
+                <h3 class="text-base font-medium text-gray-900 mb-1">{{ item.post_title }}</h3>
+                <p class="text-sm text-gray-500">{{ item.post_excerpt }}</p>
               </div>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -47,6 +47,8 @@ import { useRouter, useRoute } from 'vue-router';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import FrostedGlass from '@/components/ui/FrostedGlass.vue';
 import { useTitle } from '@vueuse/core';
+// 导入接口
+import { getArticleListAPI } from "@/api/help";
 
 const $route = useRoute();
 const $router = useRouter();
@@ -54,42 +56,16 @@ useTitle($route.meta.title);
 
 const router = useRouter();
 
-const helpItems = ref([
-  {
-    id: 1,
-    title: '如何开始学习课程？',
-    description: '了解如何选择和开始学习课程的详细指南',
-    content: '1. 浏览课程列表\n2. 选择感兴趣的课程\n3. 点击课程进入详情页\n4. 点击开始学习按钮\n5. 按照课程章节顺序学习'
-  },
-  {
-    id: 2,
-    title: '如何参与打卡活动？',
-    description: '学习打卡功能使用说明和注意事项',
-    content: '1. 在首页或个人中心点击打卡按钮\n2. 选择打卡类型（阅读、运动、学习、写作）\n3. 填写打卡内容\n4. 上传相关图片（可选）\n5. 提交打卡'
-  },
-  {
-    id: 3,
-    title: '如何参加线下活动？',
-    description: '线下活动报名流程和参与方式说明',
-    content: '1. 进入活动页面\n2. 查看活动详情和时间地点\n3. 点击报名按钮\n4. 填写报名信息\n5. 确认提交\n6. 等待审核通过\n7. 按时参加活动'
-  },
-  {
-    id: 4,
-    title: '订单和支付说明',
-    description: '了解订单流程和支付方式的详细说明',
-    content: '1. 选择要购买的课程或服务\n2. 点击购买按钮\n3. 确认订单信息\n4. 选择支付方式（微信支付/支付宝）\n5. 完成支付\n6. 查看订单状态'
-  },
-  {
-    id: 5,
-    title: '常见问题解答',
-    description: '解答用户最常遇到的问题和疑难',
-    content: '1. 账号相关问题\n   - 如何修改密码\n   - 如何绑定手机号\n   - 如何更新个人信息\n\n2. 课程相关问题\n   - 课程有效期说明\n   - 如何获取课程证书\n   - 课程退款规则\n\n3. 技术支持\n   - 视频无法播放解决方案\n   - 系统使用要求\n   - 如何清除缓存'
+const helpItems = ref([]);
+
+onMounted(async() => {
+  const res = await getArticleListAPI();
+  if (res.code) {
+    helpItems.value = res.list;
   }
-]);
+})
 
 const handleItemClick = (item) => {
-  // 将帮助项数据存储到本地存储
-  localStorage.setItem(`help_item_${item.id}`, JSON.stringify(item));
   router.push({
     path: `/profile/help/${item.id}`
   });