docs(user): 完善帮助中心常见问题内容

@@ -127,7 +127,6 @@
 <script setup>
 <script setup>
 import { ref, computed } from 'vue'
 import { ref, computed } from 'vue'
 import NavHeader from '@/components/navigation/NavHeader.vue'
 import NavHeader from '@/components/navigation/NavHeader.vue'
-import TabBar from '@/components/navigation/TabBar.vue'
 import IconFont from '@/components/icons/IconFont.vue'
 import IconFont from '@/components/icons/IconFont.vue'
 import SearchBar from '@/components/forms/SearchBar.vue'
 import SearchBar from '@/components/forms/SearchBar.vue'
 
 
@@ -164,74 +163,265 @@ const contactMethods = [
   }
   }
 ]
 ]
 
 
-// Mock Rich Text Content
-const mockRichText = `
+// 不同类型的问题内容模板
+const createPlanbookContent = `
 <div class="rich-text-content">
 <div class="rich-text-content">
-  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">操作步骤：</h3>
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">创建计划书步骤：</h3>
 
 
   <div style="margin-bottom: 8px; color: #374151;">
   <div style="margin-bottom: 8px; color: #374151;">
-    <span style="color: #EF4444; font-weight: 500;">步骤 1：</span>
-    <span>登录系统后，点击左侧菜单的"计划书管理"</span>
+    <span style="color: #2563EB; font-weight: 500;">步骤 1：</span>
+    <span>进入"计划书"页面，点击右上角"+"按钮</span>
   </div>
   </div>
 
 
   <div style="margin-bottom: 8px; color: #374151;">
   <div style="margin-bottom: 8px; color: #374151;">
-    <span style="color: #EF4444; font-weight: 500;">步骤 2：</span>
-    <span>点击右上角"新建计划书"按钮</span>
+    <span style="color: #2563EB; font-weight: 500;">步骤 2：</span>
+    <span>选择计划类型（A类/B类）</span>
   </div>
   </div>
 
 
   <div style="margin-bottom: 8px; color: #374151;">
   <div style="margin-bottom: 8px; color: #374151;">
-    <span style="color: #EF4444; font-weight: 500;">步骤 3：</span>
-    <span>填写客户信息、保障方案等详细内容</span>
+    <span style="color: #2563EB; font-weight: 500;">步骤 3：</span>
+    <span>填写客户信息：姓名、年龄、联系方式等</span>
+  </div>
+
+  <div style="margin-bottom: 8px; color: #374151;">
+    <span style="color: #2563EB; font-weight: 500;">步骤 4：</span>
+    <span>填写保障方案：保额、保费、保障期限等</span>
+  </div>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="color: #2563EB; font-weight: 500;">步骤 5：</span>
+    <span>点击"提交"按钮，系统将生成计划书</span>
+  </div>
+
+  <div style="background-color: #EFF6FF; border-left: 4px solid #2563EB; padding: 12px; margin: 16px 0; border-radius: 4px;">
+    <span style="font-size: 12px; color: #1E40AF;">💡 提示：提交后的计划书状态为"生成中"，通常在1-2分钟内完成生成。</span>
+  </div>
+
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何修改已提交的计划书？</div>
+    <div style="color: #4B5563;">A：目前计划书提交后暂不支持修改，如需调整请联系客服处理。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：生成需要多长时间？</div>
+    <div style="color: #4B5563;">A：通常在1-2分钟内完成。如超过5分钟仍在"生成中"状态，请联系客服。</div>
+  </div>
+</div>
+`
+
+const loginAuthContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">登录与认证说明：</h3>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">本小程序采用微信授权登录：</span>首次进入时，系统会自动获取您的微信授权，无需额外注册账号。
+  </div>
+
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：为什么提示"需要重新登录"？</div>
+    <div style="color: #4B5563;">A：这是因为您的登录会话已过期。系统会自动尝试重新登录，如仍失败，请关闭小程序后重新打开。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：微信授权失败怎么办？</div>
+    <div style="color: #4B5563;">A：请检查：1) 微信是否已登录；2) 网络连接是否正常；3) 小程序是否有权限访问微信信息。如仍无法解决，请联系客服。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何退出登录？</div>
+    <div style="color: #4B5563;">A：进入"我的"页面，点击右上角设置图标，选择"退出登录"即可。</div>
+  </div>
+</div>
+`
+
+const productSearchContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">产品搜索方法：</h3>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">1) 首页搜索：</span>在首页顶部搜索框输入产品名称或关键词
+  </div>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">2) 搜索页：</span>点击"搜索"图标进入专门的搜索页面，支持按产品/资料分类筛选
+  </div>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">3) 分类浏览：</span>进入"产品中心"或"分类列表"按类别查找
+  </div>
+
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：搜索不到想要的产品？</div>
+    <div style="color: #4B5563;">A：请尝试：1) 使用产品简称搜索；2) 检查是否选择了错误的分类（产品/资料）；3) 联系客服确认产品是否已上架。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何查看产品详情？</div>
+    <div style="color: #4B5563;">A：点击产品卡片进入详情页，可查看产品介绍、保障范围、保费计算等信息。</div>
+  </div>
+</div>
+`
+
+const favoriteContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">收藏功能说明：</h3>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">收藏方法：</span>在产品或资料卡片上点击"收藏"图标（爱心形状）即可收藏。
   </div>
   </div>
 
 
   <div style="margin-bottom: 12px; color: #374151;">
   <div style="margin-bottom: 12px; color: #374151;">
-    <span style="color: #EF4444; font-weight: 500;">步骤 4：</span>
-    <span>点击"生成"按钮，系统将自动生成专业的计划书文档</span>
+    <span style="font-weight: 500;">查看收藏：</span>进入"我的"页面，点击"我的收藏"查看所有收藏的内容。
+  </div>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">取消收藏：</span>在收藏列表或卡片上再次点击收藏图标即可取消。
+  </div>
+
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏的内容在哪里查看？</div>
+    <div style="color: #4B5563;">A：进入"我的"页面，点击"我的收藏"即可看到所有收藏的产品和资料。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏后为什么会消失？</div>
+    <div style="color: #4B5563;">A：可能原因：1) 该产品或资料已下架；2) 您已取消收藏；3) 网络延迟导致显示异常。请下拉刷新重试。</div>
+  </div>
+</div>
+`
+
+const documentPreviewContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">文档预览说明：</h3>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">支持的文档格式：</span>PDF、Word、Excel、PowerPoint、图片、文本等
+  </div>
+
+  <div style="margin-bottom: 12px; color: #374151;">
+    <span style="font-weight: 500;">预览方式：</span>点击资料卡片即可在线预览，无需下载
+  </div>
+
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：文档无法打开/显示空白？</div>
+    <div style="color: #4B5563;">A：请尝试：1) 检查网络连接；2) 退出重新进入；3) 确认文档格式是否支持；4) 联系客服反馈。</div>
+  </div>
+
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：Office文档建议使用什么方式查看？</div>
+    <div style="color: #4B5563;">A：Word、Excel、PowerPoint文档建议使用电脑端查看以获得最佳体验。移动端预览可能存在格式差异。</div>
   </div>
   </div>
 
 
-  <div style="background-color: #FEFCE8; border-left: 4px solid #FACC15; padding: 12px; margin: 16px 0; border-radius: 4px;">
-    <span style="font-size: 12px; color: #854D0E;">💡 小提示：生成后的计划书可以随时在"我的计划书"中查看和管理。</span>
+  <div style="margin-bottom: 12px;">
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：图片如何查看大图？</div>
+    <div style="color: #4B5563;">A：点击资料卡片上的图片封面，即可进入全屏预览模式，支持缩放和保存。</div>
+  </div>
+</div>
+`
+
+const personalInfoContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">个人信息管理：</h3>
+
+  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改头像：</h3>
+  <div style="margin-bottom: 12px; color: #4B5563;">
+    进入"我的"页面，点击头像→选择"更换头像"→从相册选择或拍照→确认上传
+  </div>
+
+  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改昵称/手机号：</h3>
+  <div style="margin-bottom: 12px; color: #4B5563;">
+    进入"我的"页面→点击个人信息→点击对应字段→修改后保存
   </div>
   </div>
 
 
   <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
   <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
 
 
   <div style="margin-bottom: 12px;">
   <div style="margin-bottom: 12px;">
-    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何修改已生成的计划书？</div>
-    <div style="color: #4B5563;">A：在"我的计划书"列表中，找到对应的计划书，点击"编辑"按钮即可修改内容。</div>
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：头像上传失败怎么办？</div>
+    <div style="color: #4B5563;">A：请检查：1) 图片大小是否超过5MB；2) 网络是否正常；3) 是否授予了相册/相机权限。建议使用JPG/PNG格式，大小不超过2MB。</div>
   </div>
   </div>
 
 
   <div style="margin-bottom: 12px;">
   <div style="margin-bottom: 12px;">
-    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：可以导出为PDF吗？</div>
-    <div style="color: #4B5563;">A：可以的。在计划书详情页，点击"下载PDF"按钮即可导出高清PDF文件。</div>
+    <div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：手机号可以修改吗？</div>
+    <div style="color: #4B5563;">A：可以。进入个人信息页面，点击手机号→通过短信验证后即可更换新手机号。</div>
+  </div>
+</div>
+`
+
+const performanceContent = `
+<div class="rich-text-content">
+  <h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">性能优化建议：</h3>
+
+  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">页面加载慢？</h3>
+  <div style="margin-bottom: 12px; color: #4B5563;">
+    1) 切换到更好的网络环境（WiFi或4G/5G）<br/>
+    2) 关闭后台其他小程序释放内存<br/>
+    3) 下拉刷新页面重新加载<br/>
+    4) 删除小程序后重新添加
+  </div>
+
+  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">图片无法显示？</h3>
+  <div style="margin-bottom: 12px; color: #4B5563;">
+    1) 检查网络连接是否正常<br/>
+    2) 下拉刷新页面<br/>
+    3) 确认图片URL是否有效（如已失效请联系客服）
+  </div>
+
+  <h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">如何清除缓存？</h3>
+  <div style="margin-bottom: 12px; color: #4B5563;">
+    微信→发现→小程序→长按本小程序→删除→重新进入即可清除缓存
+  </div>
+
+  <div style="background-color: #FEF2F2; border-left: 4px solid #DC2626; padding: 12px; margin: 16px 0; border-radius: 4px;">
+    <span style="font-size: 12px; color: #991B1B;">⚠️ 注意：清除缓存会删除本地存储的收藏记录等信息，请谨慎操作。</span>
   </div>
   </div>
 </div>
 </div>
 `
 `
 
 
 const questions = ref([
 const questions = ref([
   {
   {
-    title: '如何创建新的计划书？',
+    title: '如何创建计划书？',
     id: 1,
     id: 1,
-    content: mockRichText
+    content: createPlanbookContent
   },
   },
   {
   {
-    title: 'AI答疑如何使用？',
+    title: '为什么提示需要重新登录？',
     id: 2,
     id: 2,
-    content: mockRichText
+    content: loginAuthContent
   },
   },
   {
   {
-    title: '如何修改个人信息？',
+    title: '如何搜索产品和资料？',
     id: 3,
     id: 3,
-    content: mockRichText
+    content: productSearchContent
   },
   },
   {
   {
-    title: '数据如何同步到云端？',
+    title: '收藏的内容在哪里查看？',
     id: 4,
     id: 4,
-    content: mockRichText
+    content: favoriteContent
   },
   },
   {
   {
-    title: '忘记密码怎么办？',
+    title: '文档无法打开怎么办？',
     id: 5,
     id: 5,
-    content: mockRichText
+    content: documentPreviewContent
+  },
+  {
+    title: '如何修改个人信息和头像？',
+    id: 6,
+    content: personalInfoContent
+  },
+  {
+    title: '页面加载慢怎么办？',
+    id: 7,
+    content: performanceContent
   }
   }
 ])
 ])