From df4f8d826cb757f0a379e53dc0c05f1ad7173c5a Mon Sep 17 00:00:00 2001
From: zhangtao <9480807882@qq.com>
Date: Wed, 20 Aug 2025 01:43:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B5=E9=9D=A2):=20=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=E5=85=B3=E4=BA=8E=E6=88=91=E4=BB=AC=E5=92=8C=E5=B8=B8=E8=A7=81?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构关于我们页面，新增品牌展示区域、技术栈展示和资源链接
重写常见问题页面，新增技术支持卡片、FAQ列表和功能指南
优化网络测试功能，在H5环境下使用window.open打开链接
添加多个Wot Design组件到组件声明文件
---
 fastapp/components.d.ts                   |   3 +
 fastapp/src/pages/mine/about/index.vue    | 435 +++++++++++---
 fastapp/src/pages/mine/faq/index.vue      | 701 +++++++++++++++++-----
 fastapp/src/pages/mine/settings/index.vue |   3 +-
 4 files changed, 937 insertions(+), 205 deletions(-)

diff --git a/fastapp/components.d.ts b/fastapp/components.d.ts
index cbf16f89..2701df0b 100644
--- a/fastapp/components.d.ts
+++ b/fastapp/components.d.ts
@@ -24,11 +24,13 @@ declare module 'vue' {
     WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
     WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
+    WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
     WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
     WdFormItem: typeof import('wot-design-uni/components/wd-form-item/wd-form-item.vue')['default']
     WdGrid: typeof import('wot-design-uni/components/wd-grid/wd-grid.vue')['default']
     WdGridItem: typeof import('wot-design-uni/components/wd-grid-item/wd-grid-item.vue')['default']
     WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
+    WdImage: typeof import('wot-design-uni/components/wd-image/wd-image.vue')['default']
     WdImg: typeof import('wot-design-uni/components/wd-img/wd-img.vue')['default']
     WdImgCropper: typeof import('wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue')['default']
     WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
@@ -50,6 +52,7 @@ declare module 'vue' {
     WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default']
     WdText: typeof import('wot-design-uni/components/wd-text/wd-text.vue')['default']
     WdTextarea: typeof import('wot-design-uni/components/wd-textarea/wd-textarea.vue')['default']
+    WdTitle: typeof import('wot-design-uni/components/wd-title/wd-title.vue')['default']
     WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
     WdUpload: typeof import('wot-design-uni/components/wd-upload/wd-upload.vue')['default']
   }
diff --git a/fastapp/src/pages/mine/about/index.vue b/fastapp/src/pages/mine/about/index.vue
index 8a324277..2ea954cd 100644
--- a/fastapp/src/pages/mine/about/index.vue
+++ b/fastapp/src/pages/mine/about/index.vue
@@ -1,96 +1,393 @@
 <template>
   <view class="app-container">
-    <wd-navbar title="关于我们" left-arrow @click-left="handleBack" />
+    <wd-navbar
+      title="关于我们"
+      left-arrow
+      safe-area-inset-top
+      placeholder
+      @click-left="handleBack"
+    />
 
-    <!-- 顶部信息区域 -->
-    <wd-card custom-style="margin-top: 20rpx">
-      <view class="flex items-center p-2">
-        <wd-img width="60px" height="60px" src="/static/logo.png" mode="aspectFit" class="mr-4" />
-        <view class="flex-1">
-          <text class="text-lg font-bold block mb-1">vue-uniapp-template</text>
-          <text class="text-xs text-gray-500">版本 {{ version }}</text>
+    <!-- 顶部品牌区域 -->
+    <view class="brand-section">
+      <view class="brand-content">
+        <wd-img
+          :src="webLogo"
+          :width="120"
+          :height="120"
+          round
+          custom-class="brand-logo"
+          mode="aspectFit"
+        />
+        <view class="brand-info">
+          <view class="brand-title-wrapper">
+            <text class="brand-title">{{ webTitle }}</text>
+            <wd-tag type="primary" size="small" plain custom-class="version-tag">
+              v{{ version }}
+            </wd-tag>
+          </view>
+          <text class="brand-subtitle">{{ webDescription }}</text>
         </view>
       </view>
-    </wd-card>
+    </view>
 
-    <!-- 公司信息区域 -->
-    <wd-card custom-style="margin-top: 20rpx">
-      <view class="p-4">
-        <view class="flex items-center mb-3">
-          <wd-icon name="company" size="18" class="mr-2" />
-          <text class="text-base font-medium">有来开源组织</text>
+    <!-- 技术栈 -->
+    <view class="section">
+      <wd-card title="技术栈" custom-style="margin: 20rpx;">
+        <view class="tech-stack-container">
+          <view class="tech-category">
+            <view class="category-title">
+              <wd-icon name="computer" size="24" color="#409eff" />
+              <text class="category-text">前端技术</text>
+            </view>
+            <wd-grid :column="4" clickable custom-class="tech-grid">
+              <wd-grid-item
+                v-for="tech in frontendTechs"
+                :key="tech.name"
+                :icon="tech.icon"
+                :text="tech.name"
+              />
+            </wd-grid>
+          </view>
+
+          <view class="tech-category">
+            <view class="category-title">
+              <wd-icon name="server" size="24" color="#52c41a" />
+              <text class="category-text">后端技术</text>
+            </view>
+            <wd-grid :column="4" clickable custom-class="tech-grid">
+              <wd-grid-item
+                v-for="tech in backendTechs"
+                :key="tech.name"
+                :icon="tech.icon"
+                :text="tech.name"
+              />
+            </wd-grid>
+          </view>
+        </view>
+      </wd-card>
+    </view>
+
+    <!-- 资源链接 -->
+    <view class="section">
+      <wd-card title="资源链接" custom-style="margin: 20rpx;">
+        <wd-cell-group>
+          <wd-cell title="帮助文档" label="查看完整开发文档" is-link @click="openLink(helpDoc)">
+            <template #icon>
+              <view class="link-icon-wrapper doc">
+                <wd-icon name="document" size="28" color="#409eff" />
+              </view>
+            </template>
+          </wd-cell>
+          <wd-cell title="用户协议" label="了解使用条款" is-link @click="openLink(webClause)">
+            <template #icon>
+              <view class="link-icon-wrapper agreement">
+                <wd-icon name="agreement" size="28" color="#52c41a" />
+              </view>
+            </template>
+          </wd-cell>
+          <wd-cell title="隐私政策" label="保护您的隐私" is-link @click="openLink(webPrivacy)">
+            <template #icon>
+              <view class="link-icon-wrapper privacy">
+                <wd-icon name="privacy" size="28" color="#faad14" />
+              </view>
+            </template>
+          </wd-cell>
+          <wd-cell title="开源代码" label="访问GitHub仓库" is-link @click="openLink(gitCode)">
+            <template #icon>
+              <view class="link-icon-wrapper github">
+                <wd-icon name="github" size="28" color="#333" />
+              </view>
+            </template>
+          </wd-cell>
+        </wd-cell-group>
+      </wd-card>
+    </view>
+
+    <!-- 版权信息 -->
+    <view class="copyright-section">
+      <wd-divider content-position="center" custom-style="margin: 40rpx 0;">
+        <text class="divider-text">版权信息</text>
+      </wd-divider>
+      <view class="copyright-content">
+        <view class="copyright-card">
+          <wd-icon name="copyright" size="32" color="#909399" />
+          <text class="copyright-text">{{ copyright }}</text>
+          <text class="record-text">{{ keepRecord }}</text>
+          <view class="copyright-links">
+            <text class="copyright-link" @click="openLink(webClause)">用户协议</text>
+            <text class="copyright-separator">|</text>
+            <text class="copyright-link" @click="openLink(webPrivacy)">隐私政策</text>
+          </view>
         </view>
-        <text class="text-sm text-gray-500 block pl-6">专注于快速构建和高效开发的应用解决方案</text>
       </view>
-    </wd-card>
-
-    <!-- 项目列表 -->
-    <wd-card title="优质项目" custom-style="margin-top: 20rpx">
-      <wd-cell-group border>
-        <wd-cell title="vue3-element-admin" icon="desktop">
-          <view slot="label" class="text-xs text-gray-500 mt-1">
-            基于 Vue3 + Vite5 + TypeScript5 + Element-Plus + Pinia 构建的中后台管理模板
-          </view>
-        </wd-cell>
-
-        <wd-cell title="vue-uniapp-template" icon="mobile">
-          <view slot="label" class="text-xs text-gray-500 mt-1">
-            基于 uni-app + Vue 3 + TypeScript，集成多种工具的移动端应用模板
-          </view>
-        </wd-cell>
-
-        <wd-cell title="youlai-boot" icon="server">
-          <view slot="label" class="text-xs text-gray-500 mt-1">
-            基于 Spring Boot 3 + Vue 3 构建的前后端分离单体权限管理系统
-          </view>
-        </wd-cell>
-      </wd-cell-group>
-    </wd-card>
-
-    <!-- 联系方式 -->
-    <wd-card title="联系我们" custom-style="margin-top: 20rpx">
-      <wd-cell-group border>
-        <wd-cell title="官方网站" value="www.youlai.tech" icon="link" />
-        <wd-cell title="GitHub" value="github.com/youlaitech" icon="github" />
-        <wd-cell title="联系邮箱" value="youlaitech@163.com" icon="mail" />
-      </wd-cell-group>
-    </wd-card>
-
-    <!-- 底部版权信息 -->
-    <view class="text-center py-4">
-      <text class="block text-xs text-gray-400">Copyright © {{ getYear() }} 有来开源组织</text>
-      <text class="block text-xs text-gray-400 mt-1">All Rights Reserved</text>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-const version = ref("1.0.0");
+import { ref } from "vue";
+
+// 系统配置数据
+const webTitle = ref("FastAPI Vue3 Admin");
+const webDescription = ref("FastAPI Vue3 Admin 是完全开源的权限管理系统");
+const version = ref("2.0.0");
+const keepRecord = ref("陕ICP备2025069493号-1");
+const copyright = ref("Copyright © 2025-2026 service.fastapiadmin.com 版权所有");
+const webLogo = ref("http://service.fastapiadmin.com/api/v1/static/image/logo.png");
+const helpDoc = ref("http://service.fastapiadmin.com/docs/index.html");
+const webClause = ref("https://github.com/1014TaoTao/fastapi_vue3_admin/blob/master/LICENSE");
+const webPrivacy = ref("https://github.com/1014TaoTao/fastapi_vue3_admin/blob/master/LICENSE");
+const gitCode = ref("https://github.com/1014TaoTao/fastapi_vue3_admin.git");
+
+// 技术栈数据
+const frontendTechs = ref([
+  { name: "Vue 3", icon: "code", color: "#4fc08d" },
+  { name: "TypeScript", icon: "code", color: "#3178c6" },
+  { name: "Wot Design", icon: "code", color: "#409eff" },
+  { name: "uni-app", icon: "code", color: "#007aff" },
+]);
+
+const backendTechs = ref([
+  { name: "FastAPI", icon: "link", color: "#009688" },
+  { name: "Python", icon: "code", color: "#3776ab" },
+  { name: "MySQL", icon: "code", color: "#4479a1" },
+  { name: "Redis", icon: "code", color: "#dc382d" },
+]);
 
 const handleBack = () => {
   uni.navigateBack();
 };
 
-const getYear = () => {
-  return new Date().getFullYear();
-};
-
-onMounted(() => {
-  // #ifdef MP-WEIXIN
-  version.value = uni.getSystemInfoSync().appVersion;
+const openLink = (url: string) => {
+  // #ifdef H5
+  window.open(url, "_blank");
   // #endif
-});
+
+  // #ifdef APP-PLUS
+  plus.runtime.openURL(url);
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  uni.setClipboardData({
+    data: url,
+    success: () => {
+      uni.showToast({
+        title: "链接已复制",
+        icon: "success",
+        duration: 2000,
+      });
+    },
+  });
+  // #endif
+};
 </script>
 
 <style lang="scss" scoped>
-:deep(.wd-card__header) {
-  font-size: 30rpx;
-  font-weight: 500;
-  color: var(--wot-color-text, #333);
+.app-container {
+  min-height: 100vh;
+  padding-bottom: 40rpx;
+  background: var(--wot-color-bg-secondary);
 }
 
-:deep(.wd-cell__icon) {
+.brand-section {
+  padding: 60rpx 0;
+  text-align: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.brand-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.brand-info {
+  margin-top: 24rpx;
+  text-align: center;
+}
+
+.brand-title {
+  display: block;
+  margin-bottom: 8rpx;
   font-size: 36rpx;
-  color: var(--wot-color-theme, #409eff);
+  font-weight: 700;
+  color: white;
+}
+
+.brand-subtitle {
+  display: block;
+  margin-bottom: 16rpx;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.section {
+  margin-top: 40rpx;
+}
+
+.copyright-section {
+  padding: 0 32rpx;
+  margin-top: 60rpx;
+  text-align: center;
+}
+
+.copyright-content {
+  padding: 0 32rpx;
+}
+
+.copyright-card {
+  padding: 40rpx;
+  text-align: center;
+  background: var(--wot-color-bg);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.copyright-text {
+  margin: 20rpx 0 8rpx;
+  font-size: 26rpx;
+  color: var(--wot-color-text);
+}
+
+.record-text {
+  margin-bottom: 20rpx;
+  font-size: 24rpx;
+  color: var(--wot-color-text-secondary);
+}
+
+.divider-text {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: var(--wot-color-text);
+}
+
+.copyright-links {
+  display: flex;
+  gap: 16rpx;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+
+.copyright-link {
+  font-size: 24rpx;
+  color: var(--wot-color-primary);
+  text-decoration: underline;
+}
+
+.copyright-separator {
+  font-size: 24rpx;
+  color: var(--wot-color-text-third);
+}
+
+:deep(.wd-grid-item__content) {
+  padding: 0;
+}
+
+:deep(.wd-cell__left) {
+  display: flex;
+  align-items: center;
+}
+
+.architecture-detail {
+  padding: 0 24rpx;
+  margin-top: 32rpx;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16rpx;
+  line-height: 1.6;
+}
+
+.detail-label {
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  font-weight: 600;
+  color: var(--wot-color-text);
+}
+
+.detail-value {
+  flex: 1;
+  color: var(--wot-color-text-secondary);
+}
+
+:deep(.architecture-grid) {
+  margin: 24rpx;
+}
+
+.tech-stack-container {
+  padding: 0 24rpx;
+}
+
+.tech-category {
+  margin-bottom: 32rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.category-title {
+  display: flex;
+  align-items: center;
+  padding-left: 8rpx;
+  margin-bottom: 20rpx;
+}
+
+.category-text {
+  margin-left: 12rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: var(--wot-color-text);
+}
+
+:deep(.tech-grid) {
+  margin: 0;
+}
+
+:deep(.wd-cell__body) {
+  padding: 28rpx 32rpx;
+}
+
+:deep(.wd-cell__title) {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: var(--wot-color-text);
+}
+
+:deep(.wd-cell__label) {
+  margin-top: 8rpx;
+  font-size: 26rpx;
+  color: var(--wot-color-text-secondary);
+}
+
+.link-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 20rpx;
+  border-radius: 12rpx;
+}
+
+.link-icon-wrapper.doc {
+  background: linear-gradient(135deg, #409eff, #66b1ff);
+}
+
+.link-icon-wrapper.agreement {
+  background: linear-gradient(135deg, #52c41a, #73d13d);
+}
+
+.link-icon-wrapper.privacy {
+  background: linear-gradient(135deg, #faad14, #ffc53d);
+}
+
+.link-icon-wrapper.github {
+  background: linear-gradient(135deg, #333, #666);
 }
 </style>
diff --git a/fastapp/src/pages/mine/faq/index.vue b/fastapp/src/pages/mine/faq/index.vue
index 483b06c8..7a76a6f8 100644
--- a/fastapp/src/pages/mine/faq/index.vue
+++ b/fastapp/src/pages/mine/faq/index.vue
@@ -1,153 +1,584 @@
 <template>
   <view class="faq-container">
-    <view class="wechat">
-      <view class="tips">
-        <text>长按关注「有来技术」公众号，获取交流群二维码。</text>
-      </view>
-      <view class="flex-center">
-        <image
-          class="w-158px h-158px"
-          :show-menu-by-longpress="true"
-          src="/static/images/qrcode-official.png"
-          mode="aspectFit"
-        />
-      </view>
-      <view>
-        <text>如果交流群的二维码过期，请加微信(</text>
-        <text :user-select="true" :selectable="true">haoxianrui</text>
-        <text>)并备注「前端」、「后端」或「全栈」以获取最新二维码。</text>
-      </view>
-      <view>
-        <text>为确保交流群质量，防止营销广告人群混入，我们采取了此措施。望各位理解！</text>
-      </view>
-    </view>
+    <wd-navbar
+      title="常见问题"
+      left-arrow
+      safe-area-inset-top
+      placeholder
+      @click-left="handleBack"
+    />
 
-    <wd-collapse v-model="value">
-      <wd-collapse-item title="开源项目issues" name="item1">
-        <!-- #ifdef H5 -->
-        <a href="https://gitee.com/youlaiorg/vue-uniapp-template/issues">#issues</a>
-        <!-- #endif -->
-        <!-- #ifdef MP-WEIXIN -->
-        <text :user-select="true">https://gitee.com/youlaiorg/vue-uniapp-template/issues</text>
-        <!-- #endif -->
-      </wd-collapse-item>
-      <wd-collapse-item title="小程序分包" name="item2">
-        <view>
-          <text>
-            分包主要是因为小程序平台对主包大小有限制（微信小程序的规则是主包不超过2M，每个分包不超过2M，总体积一共不能超过20M），
-            分包不需要按照业务模块来分，可以将多个业务模块放入一个分包中，直到这个分包达到小程序的大小限制才考虑下一个分包。
-            uniapp的用法与微信官方文档一样，具体参见：
-          </text>
-          <!-- #ifdef H5 -->
-          <a
-            href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html"
-          >
-            微信官方文档-分包
-          </a>
-          <!-- #endif -->
-          <!-- #ifdef MP-WEIXIN -->
-          <text :user-select="true" :selectable="true">
-            https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
-          </text>
-          <!-- #endif -->
+    <scroll-view class="content-scroll" scroll-y :scroll-top="scrollTop" @scroll="handleScroll">
+      <view class="content-wrapper">
+        <!-- 技术支持卡片 -->
+        <view class="support-card">
+          <view class="card-header">
+            <wd-icon name="service" size="48rpx" color="#0083f0" />
+            <text class="card-title">技术支持</text>
+          </view>
+          <view class="card-body">
+            <text class="card-desc">专业的技术团队为您提供7×24小时服务支持</text>
+            <view class="support-grid">
+              <view class="support-item" @tap="handleContact('email')">
+                <view class="support-icon">
+                  <wd-icon name="email" size="40rpx" color="#0083f0" />
+                </view>
+                <view class="support-info">
+                  <text class="support-label">邮箱支持</text>
+                  <text class="support-value" user-select>support@example.com</text>
+                </view>
+              </view>
+              <view class="support-item" @tap="handleContact('phone')">
+                <view class="support-icon">
+                  <wd-icon name="phone" size="40rpx" color="#0083f0" />
+                </view>
+                <view class="support-info">
+                  <text class="support-label">客服热线</text>
+                  <text class="support-value">400-123-4567</text>
+                </view>
+              </view>
+              <view class="support-item">
+                <view class="support-icon">
+                  <wd-icon name="clock" size="40rpx" color="#0083f0" />
+                </view>
+                <view class="support-info">
+                  <text class="support-label">服务时间</text>
+                  <text class="support-value">工作日 9:00-18:00</text>
+                </view>
+              </view>
+            </view>
+          </view>
         </view>
-        <view class="mt-15rpx">
-          <text>
-            以下是一个简单示例。以下示例中创建了两个分包，分包a中包含两个页面，分包b中包含一个页面。
-          </text>
-          <text class="mt-15rpx">
-            请注意，如果想把分包页面中使用的组件打包到分包中，则需要将组件放入对应的分包目录下，否则组件会被打包到主包中。
-          </text>
+
+        <!-- FAQ内容区域 -->
+        <view class="faq-section">
+          <wd-collapse v-model="activeNames" accordion>
+            <wd-collapse-item title="常见问题" name="faq">
+              <view class="faq-list">
+                <view 
+                  v-for="(item, index) in faqList"
+                  :key="index"
+                  class="faq-item"
+                  :class="{ 'active': currentFaq === index }"
+                  @tap="toggleFaq(index)"
+                >
+                  <view class="faq-header">
+                    <view class="faq-question">
+                      <wd-icon name="question-filled" size="28rpx" color="#ff9500" />
+                      <text class="question-text">{{ item.question }}</text>
+                    </view>
+                    <wd-icon
+                      name="arrow-down-bold"
+                      size="24rpx" 
+                      color="#999"
+                      :custom-class="currentFaq === index ? 'rotate-180' : ''"
+                    />
+                  </view>
+                  <view v-if="currentFaq === index" class="faq-answer">
+                    <text class="answer-text">{{ item.answer }}</text>
+                  </view>
+                </view>
+              </view>
+            </wd-collapse-item>
+
+            <wd-collapse-item title="系统功能" name="features">
+              <view class="feature-list">
+                <view 
+                  v-for="(feature, index) in featureList" 
+                  :key="index"
+                  class="feature-item"
+                >
+                  <view class="feature-icon">
+                    <wd-icon :name="feature.icon" size="48rpx" :color="feature.color" />
+                  </view>
+                  <view class="feature-content">
+                    <text class="feature-name">{{ feature.name }}</text>
+                    <text class="feature-desc">{{ feature.desc }}</text>
+                  </view>
+                </view>
+              </view>
+            </wd-collapse-item>
+
+            <wd-collapse-item title="使用指南" name="guide">
+              <view class="guide-section">
+                <view class="guide-header">
+                  <wd-icon name="light" size="44rpx" color="#ff9500" />
+                  <text class="guide-title">快速开始</text>
+                </view>
+                <view class="guide-steps">
+                  <view
+                    v-for="(step, index) in guideSteps" 
+                    :key="index"
+                    class="guide-step"
+                  >
+                    <view class="step-indicator">
+                      <view class="step-number">{{ index + 1 }}</view>
+                      <view class="step-line" v-if="index < guideSteps.length - 1"></view>
+                    </view>
+                    <view class="step-content">
+                      <text class="step-title">{{ step.title }}</text>
+                      <text class="step-desc" v-if="step.desc">{{ step.desc }}</text>
+                    </view>
+                  </view>
+                </view>
+                <view class="guide-footer">
+                  <wd-icon name="tips" size="28rpx" color="#999" />
+                  <text class="footer-text">详细操作手册请查看帮助文档或联系客服获取</text>
+                </view>
+              </view>
+            </wd-collapse-item>
+          </wd-collapse>
         </view>
-        <view class="mt-15rpx">
-          <text>目录结构：</text>
-        </view>
-        <rich-text :nodes="subListStr" />
-        <view class="mt-15rpx">
-          <text>在pages.json文件中声明分包结构：</text>
-        </view>
-        <rich-text :nodes="pagesStr" />
-      </wd-collapse-item>
-    </wd-collapse>
+      </view>
+    </scroll-view>
   </view>
 </template>
 
 <script lang="ts" setup>
-const value = ref<string[]>(["item1"]);
-const subListStr = ref<string>(`
-<pre style="background-color: #f9f9fa"><code>
-|-- components    //主包组件目录
-|-- pages         //主包页面目录
-|   |-- index
-|-- sub-pkg-a
-|   |-- components    //分包组件目录
-|   |-- pages         //分包页面目录
-|   |   |-- cat
-|   |   |-- dog
-|-- sub-pkg-b
-|   |-- components    //分包组件目录
-|   |-- pages         //分包页面目录
-|   |   |-- apple</code></pre>
-`);
+import { ref } from "vue";
 
-const pagesStr = ref<string>(`<pre style="background-color: #f9f9fa"><code>
-{
-  "pages":[
-    {
-      "path": "pages/index",
-      "style": {
-        "navigationBarTitleText": "主页"
+// 响应式数据
+const activeNames = ref<string[]>(["faq"]);
+const currentFaq = ref<number | null>(null);
+const scrollTop = ref<number>(0);
+
+// FAQ数据
+const faqList = ref([
+  {
+    question: "如何重置密码？",
+    answer: '在登录页面点击"忘记密码"，按照提示操作即可重置密码。如果无法收到验证码，请检查邮箱或手机号是否正确，或联系客服协助处理。'
+  },
+  {
+    question: "数据如何备份？",
+    answer: '系统会自动定期备份数据，您也可以在"系统设置-数据管理"中手动导出数据。建议每月进行一次完整数据备份，确保数据安全。'
+  },
+  {
+    question: "支持哪些浏览器？",
+    answer: '推荐使用Chrome 90+、Firefox 88+、Safari 14+、Edge 90+等现代浏览器。IE浏览器仅支持IE11及以上版本。' 
+  },
+  {
+    question: "如何联系客服？",
+    answer: "您可以通过以下方式联系客服：1. 客服热线 400-123-4567（工作日9:00-18:00）；2. 邮箱 support@example.com（7×24小时）；3. 在线客服（工作日9:00-18:00）。"
+  }
+])
+
+// 系统功能数据
+const featureList = ref([
+  {
+    name: "用户管理",
+    desc: "支持用户注册、登录、权限管理等功能",
+    icon: "user",
+    color: "#0083f0"
+  },
+  {
+    name: "数据统计",
+    desc: "提供实时数据分析和可视化报表",
+    icon: "chart",
+    color: "#00c250"
+  },
+  {
+    name: "文件管理",
+    desc: "支持文件上传、下载、分类管理",
+    icon: "folder",
+    color: "#ff9500"
+  },
+  {
+    name: "消息通知",
+    desc: "实时消息推送和系统通知",
+    icon: "notification",
+    color: "#ff3b30"
+  }
+])
+
+// 使用指南数据
+const guideSteps = ref([
+  {
+    title: "注册账号并登录系统",
+    desc: "使用手机号或邮箱注册账号，完成实名认证"
+  },
+  {
+    title: "完善个人或企业信息",
+    desc: "填写基本信息，设置安全问题和密保邮箱"
+  },
+  {
+    title: "根据需求配置功能模块",
+    desc: "选择需要的功能模块，设置相关参数"
+  },
+  {
+    title: "开始使用各项功能",
+    desc: "完成初始化设置，开始使用系统各项功能"
+  }
+])
+
+// 方法定义
+const handleBack = () => {
+  uni.navigateBack()
+}
+
+const handleScroll = (e: any) => {
+  scrollTop.value = e.detail.scrollTop
+}
+
+const toggleFaq = (index: number) => {
+  currentFaq.value = currentFaq.value === index ? null : index
+}
+
+const handleContact = (type: "email" | "phone") => {
+  if (type === "email") {
+    // #ifdef H5
+    window.location.href = "mailto:support@example.com"
+    // #endif
+    // #ifndef H5
+    uni.setClipboardData({
+      data: "support@example.com",
+      success: () => {
+        uni.showToast({
+          title: "邮箱已复制",
+          icon: "success"
+        })
       }
-    }
-  ],
-  "subPackages": [
-    {
-      "root": "sub-pkg-a",
-      "pages": [
-        {
-          "path": "pages/cat",
-          "style": {
-            "navigationBarTitleText": "cat"
-          }
-        },
-        {
-          "path": "pages/dog",
-          "style": {
-            "navigationBarTitleText": "dog"
-          }
-        }
-      ]
-    },
-    {
-      "root": "sub-pkg-b",
-      "pages": [
-        {
-          "path": "pages/apple",
-          "style": {
-            "navigationBarTitleText": "apple"
-          }
-        }
-      ]
-    }
-  ]
-}</code></pre>
-`);
-onMounted(() => {});
+    })
+    // #endif
+  } else if (type === "phone") {
+    // #ifdef H5
+    window.location.href = "tel:400-123-4567"
+    // #endif
+    // #ifndef H5
+    uni.makePhoneCall({
+      phoneNumber: "400-123-4567"
+    })
+    // #endif
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  // 可以在这里添加页面埋点或初始化逻辑
+})
 </script>
 
 <style lang="scss" scoped>
 .faq-container {
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  .wechat {
-    padding: 30rpx;
-    margin: 20px 0;
-    font-size: 14px;
-    color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45));
-    background-color: #fff;
-    .tips {
-      font-weight: bold;
-      text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--wot-color-bg);
+
+  .content-scroll {
+    flex: 1;
+    height: 100%;
+  }
+
+  .content-wrapper {
+    padding: 24rpx;
+  }
+
+  // 技术支持卡片样式
+  .support-card {
+    margin-bottom: 24rpx;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 24rpx;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      padding: 32rpx 32rpx 24rpx;
+      border-bottom: 1rpx solid var(--wot-color-border);
+
+      .card-title {
+        margin-left: 16rpx;
+        font-size: 32rpx;
+        font-weight: 600;
+        color: var(--wot-color-text);
+      }
+    }
+
+    .card-body {
+      padding: 32rpx;
+
+      .card-desc {
+        display: block;
+        margin-bottom: 32rpx;
+        font-size: 28rpx;
+        line-height: 1.5;
+        color: var(--wot-color-text-light);
+        text-align: center;
+      }
+
+      .support-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 24rpx;
+
+        .support-item {
+          display: flex;
+          align-items: center;
+          padding: 32rpx;
+          background: var(--wot-color-bg);
+          border-radius: 16rpx;
+          transition: all 0.3s ease;
+
+          &:active {
+            opacity: 0.8;
+            transform: scale(0.98);
+          }
+
+          .support-icon {
+            flex-shrink: 0;
+            margin-right: 24rpx;
+          }
+
+          .support-info {
+            flex: 1;
+
+            .support-label {
+              display: block;
+              margin-bottom: 8rpx;
+              font-size: 28rpx;
+              font-weight: 600;
+              color: var(--wot-color-text);
+            }
+
+            .support-value {
+              display: block;
+              font-size: 26rpx;
+              color: var(--wot-color-text-light);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // FAQ区域样式
+  .faq-section {
+    :deep(.wd-collapse-item__title) {
+      font-size: 32rpx;
+      font-weight: 600;
+    }
+
+    :deep(.wd-collapse-item__content) {
+      padding: 0;
+    }
+
+    .faq-list {
+      .faq-item {
+        border-bottom: 1rpx solid var(--wot-color-border);
+        transition: all 0.3s ease;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.active {
+          background: rgba(0, 131, 240, 0.02);
+        }
+
+        .faq-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 32rpx;
+
+          .faq-question {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            margin-right: 24rpx;
+
+            .question-text {
+              margin-left: 16rpx;
+              font-size: 30rpx;
+              color: var(--wot-color-text);
+            }
+          }
+
+          .wd-icon {
+            transition: transform 0.3s ease;
+
+            &.rotate-180 {
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        .faq-answer {
+          padding: 0 32rpx 32rpx 32rpx;
+          border-top: 1rpx solid var(--wot-color-border);
+
+          .answer-text {
+            display: block;
+            padding: 24rpx 0;
+            font-size: 28rpx;
+            line-height: 1.6;
+            color: var(--wot-color-text-light);
+          }
+        }
+      }
+    }
+
+    .feature-list {
+      .feature-item {
+        display: flex;
+        align-items: center;
+        padding: 32rpx;
+        border-bottom: 1rpx solid var(--wot-color-border);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .feature-icon {
+          flex-shrink: 0;
+          margin-right: 24rpx;
+        }
+
+        .feature-content {
+          flex: 1;
+
+          .feature-name {
+            display: block;
+            margin-bottom: 8rpx;
+            font-size: 30rpx;
+            font-weight: 600;
+            color: var(--wot-color-text);
+          }
+
+          .feature-desc {
+            display: block;
+            font-size: 26rpx;
+            line-height: 1.4;
+            color: var(--wot-color-text-light);
+          }
+        }
+      }
+    }
+
+    .guide-section {
+      padding: 32rpx;
+
+      .guide-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 48rpx;
+
+        .guide-title {
+          margin-left: 16rpx;
+          font-size: 32rpx;
+          font-weight: 600;
+          color: var(--wot-color-text);
+        }
+      }
+
+      .guide-steps {
+        .guide-step {
+          display: flex;
+          margin-bottom: 48rpx;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .step-indicator {
+            position: relative;
+            flex-shrink: 0;
+            margin-right: 24rpx;
+
+            .step-number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 48rpx;
+              height: 48rpx;
+              font-size: 24rpx;
+              font-weight: 600;
+              color: #fff;
+              background: var(--wot-color-theme);
+              border-radius: 50%;
+            }
+
+            .step-line {
+              position: absolute;
+              top: 48rpx;
+              left: 50%;
+              width: 2rpx;
+              height: 48rpx;
+              background: var(--wot-color-border);
+              transform: translateX(-50%);
+            }
+          }
+
+          .step-content {
+            flex: 1;
+            padding-top: 8rpx;
+
+            .step-title {
+              display: block;
+              margin-bottom: 8rpx;
+              font-size: 30rpx;
+              font-weight: 600;
+              color: var(--wot-color-text);
+            }
+
+            .step-desc {
+              display: block;
+              font-size: 26rpx;
+              line-height: 1.4;
+              color: var(--wot-color-text-light);
+            }
+          }
+        }
+      }
+
+      .guide-footer {
+        display: flex;
+        align-items: center;
+        margin-top: 48rpx;
+        padding: 32rpx;
+        background: var(--wot-color-bg);
+        border-radius: 16rpx;
+
+        .footer-text {
+          margin-left: 16rpx;
+          font-size: 26rpx;
+          color: var(--wot-color-text-light);
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media screen and (min-width: 768px) {
+  .faq-container {
+    .content-wrapper {
+      max-width: 750rpx;
+      margin: 0 auto;
+    }
+
+    .support-card {
+      .support-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+}
+
+// 暗黑模式适配
+@media (prefers-color-scheme: dark) {
+  .faq-container {
+    --wot-color-text: #f5f5f5;
+    --wot-color-text-light: #969799;
+    --wot-color-border: #3a3a3c;
+    --wot-color-bg: #1c1c1e;
+
+    .support-card,
+    .faq-section :deep(.wd-collapse) {
+      background: #2c2c2e;
+      color: var(--wot-color-text);
     }
   }
 }
diff --git a/fastapp/src/pages/mine/settings/index.vue b/fastapp/src/pages/mine/settings/index.vue
index 9a62f608..148d57b2 100644
--- a/fastapp/src/pages/mine/settings/index.vue
+++ b/fastapp/src/pages/mine/settings/index.vue
@@ -99,7 +99,8 @@ const navigateToOfficialWebsite = () => {
 
 // 网络测试
 const navigateToNetworkTest = () => {
-  uni.navigateTo({ url: "/pages/mine/settings/network/index" });
+  // #ifdef H5
+  window.open("https://service.fastapiadmin.com", "_blank");
 };
 
 // 是否正在清理