From 07e9ce725cd6cbd26f60610a473a8c415952aba3 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Sun, 1 Jun 2025 17:25:56 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |   3 +
 src/api/auth.ts                             |  10 +-
 src/layouts/tabbar.vue                      |  14 +-
 src/pages.json                              |   5 -
 src/pages/mine/about/index.vue              | 242 ++++++--------------
 src/pages/mine/profile/complete-profile.vue |  15 +-
 src/pages/mine/profile/index.vue            |  81 +++----
 src/pages/mine/settings/account/index.vue   |  42 ++--
 src/pages/mine/settings/agreement/index.vue |  98 ++++----
 src/pages/mine/settings/index.vue           | 208 +++++------------
 src/pages/mine/settings/network/index.vue   | 223 +++++-------------
 src/pages/mine/settings/privacy/index.vue   | 103 ---------
 src/pages/mine/settings/theme/index.vue     | 137 +++++------
 src/styles/index.scss                       |  20 +-
 src/utils/request.ts                        |  41 +++-
 uni-pages.d.ts                              |   1 -
 unocss.config.ts                            |   6 +-
 17 files changed, 422 insertions(+), 827 deletions(-)
 delete mode 100644 src/pages/mine/settings/privacy/index.vue

diff --git a/components.d.ts b/components.d.ts
index d65e7a9..f51f5aa 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -33,10 +33,13 @@ declare module 'vue' {
     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']
+    WdLoading: typeof import('wot-design-uni/components/wd-loading/wd-loading.vue')['default']
     WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default']
+    WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
     WdNoticeBar: typeof import('wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue')['default']
     WdNotify: typeof import('wot-design-uni/components/wd-notify/wd-notify.vue')['default']
     WdPopup: typeof import('wot-design-uni/components/wd-popup/wd-popup.vue')['default']
+    WdProgress: typeof import('wot-design-uni/components/wd-progress/wd-progress.vue')['default']
     WdRadio: typeof import('wot-design-uni/components/wd-radio/wd-radio.vue')['default']
     WdRadioGroup: typeof import('wot-design-uni/components/wd-radio-group/wd-radio-group.vue')['default']
     WdSwiper: typeof import('wot-design-uni/components/wd-swiper/wd-swiper.vue')['default']
diff --git a/src/api/auth.ts b/src/api/auth.ts
index 86e88ce..109cdbd 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,4 +1,4 @@
-import request from "@/utils/request";
+import request, { publicRequest } from "@/utils/request";
 
 const AUTH_BASE_URL = "/api/v1/auth";
 
@@ -35,7 +35,7 @@ const AuthAPI = {
       password: data.password,
     };
 
-    return request<LoginResult>({
+    return publicRequest<LoginResult>({
       url: `${AUTH_BASE_URL}/login`,
       method: "POST",
       data: formData,
@@ -51,7 +51,7 @@ const AuthAPI = {
    * @returns 登录结果
    */
   loginByWxMiniAppCode(code: string): Promise<LoginResult> {
-    return request<LoginResult>({
+    return publicRequest<LoginResult>({
       url: `${AUTH_BASE_URL}/wx/miniapp/code-login`,
       method: "POST",
       data: { code },
@@ -64,7 +64,7 @@ const AuthAPI = {
    * @returns 登录结果
    */
   loginByWxMiniAppPhone(data: WxLoginData): Promise<LoginResult> {
-    return request<LoginResult>({
+    return publicRequest<LoginResult>({
       url: `${AUTH_BASE_URL}/wx/miniapp/phone-login`,
       method: "POST",
       data,
@@ -99,7 +99,7 @@ const AuthAPI = {
    * @returns 新的访问令牌
    */
   refreshToken(refreshToken: string): Promise<{ accessToken: string; expiresIn: number }> {
-    return request<{ accessToken: string; expiresIn: number }>({
+    return publicRequest<{ accessToken: string; expiresIn: number }>({
       url: `${AUTH_BASE_URL}/refresh-token`,
       method: "POST",
       data: { refreshToken },
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index 2c42d86..06a251e 100644
--- a/src/layouts/tabbar.vue
+++ b/src/layouts/tabbar.vue
@@ -23,7 +23,7 @@ interface TabbarItem {
 
 // 根据 pages.json 配置的 tabbar 项目
 const tabbarItems = ref<TabbarItem[]>([
-  { name: "index", value: null, active: true, title: "首页123", icon: "home" },
+  { name: "index", value: null, active: true, title: "首页", icon: "home" },
   { name: "mine", value: null, active: false, title: "我的", icon: "user" },
 ]);
 
@@ -83,15 +83,19 @@ const updateTabbarByRoute = () => {
 
 function handleTabbarChange({ value }: { value: string }) {
   console.log(`用户点击 tabbar: ${value}`);
-  setTabbarItemActive(value);
 
-  // 根据 tabbar 项目导航到对应页面
+  // 立即设置激活状态
+  tabbarItems.value.forEach((item) => {
+    item.active = item.name === value;
+  });
+
+  // 导航到对应页面
   if (value === "index") {
-    uni.switchTab({
+    uni.reLaunch({
       url: "/pages/index/index",
     });
   } else if (value === "mine") {
-    uni.switchTab({
+    uni.reLaunch({
       url: "/pages/mine/index",
     });
   }
diff --git a/src/pages.json b/src/pages.json
index a0b7b55..93eebcc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -62,11 +62,6 @@
       "type": "page",
       "style": {}
     },
-    {
-      "path": "pages/mine/settings/privacy/index",
-      "type": "page",
-      "style": {}
-    },
     {
       "path": "pages/mine/settings/theme/index",
       "type": "page",
diff --git a/src/pages/mine/about/index.vue b/src/pages/mine/about/index.vue
index 02bf88c..8a32427 100644
--- a/src/pages/mine/about/index.vue
+++ b/src/pages/mine/about/index.vue
@@ -1,66 +1,80 @@
 <template>
-  <view class="about-container">
-    <!-- 顶部 Logo 区域 -->
-    <view class="logo-section">
-      <image class="logo" src="/static/logo.png" mode="aspectFit" />
-      <text class="app-name">vue-uniapp-template</text>
-      <text class="version">版本 {{ version }}</text>
-    </view>
+  <view class="app-container">
+    <wd-navbar title="关于我们" left-arrow @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>
+      </view>
+    </wd-card>
 
     <!-- 公司信息区域 -->
-    <view class="company-info">
-      <text class="company-name">有来开源组织</text>
-      <view class="divider" />
-      <text class="company-desc">专注于快速构建和高效开发的应用解决方案</text>
-    </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>
+        <text class="text-sm text-gray-500 block pl-6">专注于快速构建和高效开发的应用解决方案</text>
+      </view>
+    </wd-card>
 
-    <!-- 信息列表 -->
-    <view class="info-list">
-      <view class="list-header">
-        <text class="header-title">优质项目</text>
-      </view>
-      <view class="info-item">
-        <view class="item-content">
-          <text class="item-label">vue3-element-admin</text>
-          <text class="item-desc">
-            基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia
-            等主流技术栈构建的免费开源的中后台管理的前端模板
-          </text>
-        </view>
-      </view>
-      <view class="info-item">
-        <view class="item-content">
-          <text class="item-label">vue-uniapp-template</text>
-          <text class="item-desc">
-            基于 uni-app + Vue 3 + TypeScript 的项目，集成了 ESLint、Prettier、Stylelint、Husky 和
-            Commitlint 等工具，确保代码规范与质量。
-          </text>
-        </view>
-      </view>
-      <view class="info-item">
-        <view class="item-content">
-          <text class="item-label">youlai-boot</text>
-          <text class="item-desc">
-            基于 JDK 17、Spring Boot 3、Spring Security 6、JWT、Redis、Mybatis-Plus、Knife4j、Vue
-            3、Element-Plus 构建的前后端分离单体权限管理系统
-          </text>
-        </view>
-      </view>
-    </view>
+    <!-- 项目列表 -->
+    <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="copyright">
-      <text>Copyright © {{ getYear() }} 有来开源组织</text>
-      <text>All Rights Reserved</text>
+    <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");
+
+const handleBack = () => {
+  uni.navigateBack();
+};
+
 const getYear = () => {
   return new Date().getFullYear();
 };
+
 onMounted(() => {
   // #ifdef MP-WEIXIN
   version.value = uni.getSystemInfoSync().appVersion;
@@ -69,132 +83,14 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.about-container {
-  min-height: 100vh;
-  padding: 20px;
-  background-color: #f5f5f5;
+:deep(.wd-card__header) {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--wot-color-text, #333);
 }
 
-.logo-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 30px 0;
-
-  .logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 15px;
-  }
-
-  .app-name {
-    margin-bottom: 8px;
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .version {
-    font-size: 14px;
-    color: #666;
-  }
-}
-
-.company-info {
-  padding: 30px;
-  margin: 20px 0;
-  text-align: center;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-
-  .company-name {
-    margin-bottom: 15px;
-    font-size: 20px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .divider {
-    width: 40px;
-    height: 2px;
-    margin: 15px auto;
-    background-color: #409eff;
-  }
-
-  .company-desc {
-    padding: 0 10px;
-    margin-top: 15px;
-    overflow: hidden;
-    font-size: 15px;
-    line-height: 1.6;
-    color: #666;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.info-list {
-  margin: 20px 0;
-  background-color: #fff;
-  border-radius: 8px;
-
-  .list-header {
-    padding: 15px 20px;
-    border-bottom: 1px solid #eee;
-
-    .header-title {
-      font-size: 17px;
-      font-weight: 600;
-      color: #333;
-    }
-  }
-
-  .info-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 15px 20px;
-    border-bottom: 1px solid #eee;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .item-content {
-      flex: 1;
-      padding-right: 15px;
-    }
-
-    .item-label {
-      display: block;
-      margin-bottom: 4px;
-      font-size: 16px;
-      color: #333;
-    }
-
-    .item-desc {
-      display: block;
-      font-size: 13px;
-      line-height: 1.4;
-      color: #999;
-    }
-
-    .item-value {
-      font-size: 16px;
-      color: #999;
-    }
-  }
-}
-
-.copyright {
-  padding: 20px 0;
-  text-align: center;
-
-  text {
-    display: block;
-    font-size: 12px;
-    line-height: 1.5;
-    color: #999;
-  }
+:deep(.wd-cell__icon) {
+  font-size: 36rpx;
+  color: var(--wot-color-theme, #409eff);
 }
 </style>
diff --git a/src/pages/mine/profile/complete-profile.vue b/src/pages/mine/profile/complete-profile.vue
index ccdacd3..2aab07d 100644
--- a/src/pages/mine/profile/complete-profile.vue
+++ b/src/pages/mine/profile/complete-profile.vue
@@ -1,5 +1,7 @@
 <template>
-  <view class="complete-profile-container">
+  <view class="app-container">
+    <wd-navbar title="完善个人信息" left-arrow @click-left="handleBack" />
+
     <!-- 头部标题 -->
     <view class="header">
       <view class="title">完善个人信息</view>
@@ -335,15 +337,14 @@ const onWechatProfileChange = (data: { avatar?: string; nickname?: string; gende
   profileForm.nickname = data.nickname || "";
   profileForm.gender = data.gender || 1;
 };
+
+// 返回
+function handleBack() {
+  uni.navigateBack();
+}
 </script>
 
 <style lang="scss" scoped>
-.complete-profile-container {
-  min-height: 100vh;
-  padding: 40rpx 30rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
 .header {
   margin-bottom: 60rpx;
   text-align: center;
diff --git a/src/pages/mine/profile/index.vue b/src/pages/mine/profile/index.vue
index 4dd0373..debcca4 100644
--- a/src/pages/mine/profile/index.vue
+++ b/src/pages/mine/profile/index.vue
@@ -1,6 +1,8 @@
 <template>
-  <view class="profile">
-    <view v-if="userProfile" class="profile-card">
+  <view class="app-container">
+    <wd-navbar title="个人信息" left-arrow @click-left="handleBack" />
+
+    <wd-card v-if="userProfile" custom-style="margin-top: 20rpx">
       <wd-cell-group border>
         <wd-cell class="avatar-cell" title="头像" center is-link>
           <view class="avatar">
@@ -31,7 +33,7 @@
         <wd-cell title="角色" :value="userProfile.roleNames" />
         <wd-cell title="创建日期" :value="userProfile.createTime" />
       </wd-cell-group>
-    </view>
+    </wd-card>
 
     <!--头像裁剪-->
     <wd-img-cropper v-model="avatarShow" :img-src="originalSrc" @confirm="handleAvatarConfirm" />
@@ -55,7 +57,7 @@
             </wd-radio-group>
           </wd-cell>
         </wd-cell-group>
-        <view class="footer">
+        <view class="p-6">
           <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
         </view>
       </wd-form>
@@ -171,50 +173,41 @@ function touchstartListener(event: TouchEvent) {
 function touchmoveListener(event: TouchEvent) {
   event.preventDefault();
 }
+
+function handleBack() {
+  uni.navigateBack();
+}
 </script>
 <style lang="scss" scoped>
-.profile {
-  .profile-card {
-    padding: 10rpx;
-    margin-bottom: 24rpx;
-    line-height: 1.1;
-    background-color: rgb(255, 255, 255);
-    border-radius: 16px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
-
-    .avatar-cell {
-      :deep(.wd-cell__body) {
-        align-items: center;
-      }
-      .avatar {
-        display: flex;
-        align-items: center;
-        justify-content: right;
-        .img {
-          position: relative;
-          width: 80px;
-          height: 80px;
-          background-color: rgba(0, 0, 0, 0.04);
-          border-radius: 50%;
-          .img-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            color: #fff;
-          }
-        }
-      }
-    }
+.avatar-cell {
+  :deep(.wd-cell__body) {
+    align-items: center;
   }
-  .edit-form {
-    padding-top: 40rpx;
-    .ef-radio-group {
-      line-height: 1;
-      text-align: left;
-    }
-    .footer {
-      padding: 24rpx;
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    .img {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      background-color: rgba(0, 0, 0, 0.04);
+      border-radius: 50%;
+      .img-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #fff;
+      }
     }
   }
 }
+
+.edit-form {
+  padding-top: 40rpx;
+  .ef-radio-group {
+    line-height: 1;
+    text-align: left;
+  }
+}
 </style>
diff --git a/src/pages/mine/settings/account/index.vue b/src/pages/mine/settings/account/index.vue
index 928c01e..9d5eef9 100644
--- a/src/pages/mine/settings/account/index.vue
+++ b/src/pages/mine/settings/account/index.vue
@@ -1,6 +1,8 @@
 <template>
-  <view class="profile">
-    <view class="profile-card">
+  <view class="app-container">
+    <wd-navbar title="账号和安全" left-arrow @click-left="handleBack" />
+
+    <wd-card custom-style="margin-top: 20rpx">
       <wd-cell-group border>
         <wd-cell
           title="账户密码"
@@ -22,7 +24,7 @@
           @click="handleOpenDialog(DialogType.EMAIL)"
         />
       </wd-cell-group>
-    </view>
+    </wd-card>
 
     <!--用户信息编辑弹出框-->
     <wd-popup v-model="dialog.visible" position="bottom">
@@ -64,7 +66,7 @@
             :rules="rules.confirmPassword"
           />
         </wd-cell-group>
-        <view class="footer">
+        <view class="p-6">
           <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
         </view>
       </wd-form>
@@ -104,7 +106,7 @@
             </template>
           </wd-input>
         </wd-cell-group>
-        <view class="footer">
+        <view class="p-6">
           <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
         </view>
       </wd-form>
@@ -144,7 +146,7 @@
             </template>
           </wd-input>
         </wd-cell-group>
-        <view class="footer">
+        <view class="p-6">
           <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
         </view>
       </wd-form>
@@ -211,6 +213,11 @@ const mobileTimer = ref<ReturnType<typeof setInterval> | null>(null);
 const emailCountdown = ref(0);
 const emailTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 
+// 处理返回按钮点击
+const handleBack = () => {
+  uni.navigateBack();
+};
+
 /** 加载用户信息 */
 const loadUserProfile = async () => {
   userProfile.value = await UserAPI.getProfile();
@@ -319,25 +326,4 @@ onMounted(() => {
   loadUserProfile();
 });
 </script>
-<style lang="scss" scoped>
-.profile {
-  .profile-card {
-    padding: 10rpx;
-    margin-bottom: 24rpx;
-    line-height: 1.1;
-    background-color: rgb(255, 255, 255);
-    border-radius: 16px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
-  }
-  .edit-form {
-    padding-top: 40rpx;
-    .ef-radio-group {
-      line-height: 1;
-      text-align: left;
-    }
-    .footer {
-      padding: 24rpx;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/mine/settings/agreement/index.vue b/src/pages/mine/settings/agreement/index.vue
index 5798a44..87ca4d6 100644
--- a/src/pages/mine/settings/agreement/index.vue
+++ b/src/pages/mine/settings/agreement/index.vue
@@ -1,20 +1,36 @@
 <template>
-  <view class="agreement-container">
-    <view class="agreement-header">
-      <text class="header-title">用户协议</text>
-      <text class="header-date">更新日期：2024年3月15日</text>
-    </view>
+  <view class="app-container">
+    <wd-navbar title="用户协议" left-arrow @click-left="handleBack" />
 
-    <view class="agreement-content">
-      <view v-for="(section, index) in agreementContent" :key="index" class="section">
-        <text class="section-title">{{ section.title }}</text>
-        <text class="section-text">{{ section.content }}</text>
+    <wd-card custom-style="margin-top: 20rpx">
+      <view class="flex-col-center py-4">
+        <text class="text-xl font-bold mb-2">用户协议</text>
+        <text class="text-sm text-gray-500">更新日期：2024年3月15日</text>
       </view>
+    </wd-card>
+
+    <wd-collapse v-model="activeNames" accordion>
+      <wd-collapse-item
+        v-for="(section, index) in agreementContent"
+        :key="index"
+        :title="section.title"
+        :name="String(index)"
+      >
+        <view class="py-3 px-4">
+          <text class="text-base leading-relaxed text-gray-600">{{ section.content }}</text>
+        </view>
+      </wd-collapse-item>
+    </wd-collapse>
+
+    <view class="mt-6 px-4">
+      <wd-button type="primary" block @click="handleAgree">我已阅读并同意</wd-button>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
+const activeNames = ref(["0"]); // 默认展开第一项
+
 const agreementContent = [
   {
     title: "1. 协议的范围",
@@ -47,52 +63,22 @@ const agreementContent = [
       "我们保留随时修改本协议的权利。协议修改后，如果您继续使用本应用服务，即视为您已接受修改后的协议。我们建议您定期查看本协议以了解任何变更。",
   },
 ];
+
+// 返回
+const handleBack = () => {
+  uni.navigateBack();
+};
+
+// 同意协议
+const handleAgree = () => {
+  uni.showToast({
+    title: "感谢您的支持",
+    icon: "success",
+  });
+  setTimeout(() => {
+    uni.navigateBack();
+  }, 1500);
+};
 </script>
 
-<style lang="scss" scoped>
-.agreement-container {
-  min-height: 100vh;
-  padding: 20px;
-  background-color: #fff;
-}
-
-.agreement-header {
-  margin-bottom: 30px;
-  text-align: center;
-
-  .header-title {
-    display: block;
-    margin-bottom: 10px;
-    font-size: 22px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .header-date {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
-.agreement-content {
-  .section {
-    margin-bottom: 25px;
-
-    .section-title {
-      display: block;
-      margin-bottom: 12px;
-      font-size: 17px;
-      font-weight: 500;
-      color: #333;
-    }
-
-    .section-text {
-      display: block;
-      font-size: 15px;
-      line-height: 1.6;
-      color: #666;
-      text-align: justify;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/mine/settings/index.vue b/src/pages/mine/settings/index.vue
index 1ab878e..6a5f98c 100644
--- a/src/pages/mine/settings/index.vue
+++ b/src/pages/mine/settings/index.vue
@@ -1,11 +1,18 @@
 <template>
-  <view class="settings-container">
-    <wd-cell-group>
-      <wd-cell title="个人资料" icon="user" is-link @click="navigateToProfile" />
-      <wd-cell title="账号和安全" icon="secured" is-link @click="navigateToAccount" />
+  <view class="app-container">
+    <wd-navbar title="设置" left-arrow @click-left="handleBack" />
+
+    <wd-cell-group custom-style="margin-top: 20rpx">
+      <wd-cell v-if="isLogin" title="个人资料" icon="user" is-link @click="navigateToProfile" />
+      <wd-cell
+        v-if="isLogin"
+        title="账号和安全"
+        icon="secured"
+        is-link
+        @click="navigateToAccount"
+      />
       <wd-cell title="主题设置" icon="setting1" is-link @click="navigateToTheme" />
       <wd-cell title="用户协议" icon="user" is-link @click="navigateToUserAgreement" />
-      <wd-cell title="隐私政策" icon="folder" is-link @click="navigateToPrivacy" />
       <wd-cell title="关于我们" icon="info-circle" is-link @click="navigateToAbout" />
     </wd-cell-group>
 
@@ -24,20 +31,20 @@
       <wd-button class="logout-btn" @click="handleLogout">退出登录</wd-button>
     </view>
 
-    <!-- 全屏 loading -->
-    <view v-if="clearing" class="loading-mask">
-      <view class="loading-content">
-        <view class="loading-icon" />
-        <text class="loading-text">正在清理...</text>
-      </view>
-    </view>
+    <!-- 使用wot-design-uni的Loading组件 -->
+    <wd-loading
+      v-if="clearing"
+      v-model="clearing"
+      text="正在清理..."
+      mask
+      custom-class="loading-center"
+    />
   </view>
 </template>
 
 <script lang="ts" setup>
 import { useUserStore } from "@/store/modules/user.store";
 import { checkLogin } from "@/utils/auth";
-import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 
 const userStore = useUserStore();
@@ -71,14 +78,7 @@ const navigateToTheme = () => {
 // 用户协议
 const navigateToUserAgreement = () => {
   uni.navigateTo({
-    url: "/pages/mine/agreements/user-agreement",
-  });
-};
-
-// 隐私政策
-const navigateToPrivacy = () => {
-  uni.navigateTo({
-    url: "/pages/mine/agreements/privacy-policy",
+    url: "/pages/mine/settings/agreement/index",
   });
 };
 
@@ -192,143 +192,61 @@ const handleLogout = () => {
   });
 };
 
+// 返回
+const handleBack = () => {
+  uni.navigateBack();
+};
+
 // 检查登录状态
 onLoad(() => {
   getCacheSize();
 });
 </script>
 <style lang="scss" scoped>
-.settings-container {
-  // 强制 Wot 组件应用暗黑模式样式
-  :deep(.wd-cell-group) {
-    overflow: hidden;
-    background-color: var(--wot-card-bg-color, #fff);
-    border-radius: 16rpx;
-  }
+.logout-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rpx;
+  margin-top: 60rpx;
+}
 
-  :deep(.wd-cell) {
-    color: var(--wot-color-text, #333);
-    background-color: var(--wot-card-bg-color, #fff);
+.logout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90%;
+  height: 90rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #fff;
+  background-color: var(--wot-color-theme, var(--primary-color));
+  border: none;
+  border-radius: 45rpx;
+  box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.3);
+  transition: opacity 0.2s;
 
-    .wd-cell__title {
-      color: var(--wot-color-text, #333) !important;
-    }
-
-    .wd-cell__value {
-      color: var(--wot-color-text-secondary, #666) !important;
-    }
-
-    .wd-cell__right-icon {
-      color: var(--wot-color-text-secondary, #999) !important;
-    }
-  }
-
-  :deep(.wd-button) {
-    &.logout-btn {
-      color: #fff !important;
-      background-color: var(--wot-color-theme, var(--primary-color)) !important;
-    }
-  }
-
-  .loading-mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.4);
-
-    .loading-content {
-      padding: 30rpx 40rpx;
-      text-align: center;
-      background-color: var(--wot-card-bg-color, rgba(255, 255, 255, 0.95));
-      border-radius: 12rpx;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-
-      .loading-icon {
-        width: 60rpx;
-        height: 60rpx;
-        margin: 0 auto 20rpx;
-        border: 4rpx solid var(--wot-color-border, #f3f3f3);
-        border-top: 4rpx solid var(--wot-color-theme, #409eff);
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-      }
-
-      .loading-text {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: var(--wot-color-text, #333);
-      }
-    }
-  }
-
-  .logout-section {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 20rpx;
-    margin-top: 60rpx;
-  }
-
-  .logout-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 90rpx;
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #fff;
-    background-color: var(--wot-color-theme, var(--primary-color));
-    border: none;
-    border-radius: 45rpx;
-    box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.3);
-    transition: opacity 0.2s;
-
-    &:active {
-      opacity: 0.85;
-    }
+  &:active {
+    opacity: 0.85;
   }
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+:deep(.loading-center) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 12rpx;
 }
 
-// 全局暗黑模式适配（针对当前页面）
-:global([data-theme="dark"]) .settings-container {
-  color: var(--wot-color-text, #fff) !important;
-  background-color: var(--wot-color-bg, #1a1a1a) !important;
+:deep(.loading-center .wd-loading__spinner) {
+  margin: 0 auto;
+}
 
-  :deep(.wd-cell-group) {
-    background-color: var(--wot-card-bg-color, #2a2a2a) !important;
-  }
-
-  :deep(.wd-cell) {
-    color: var(--wot-color-text, #fff) !important;
-    background-color: var(--wot-card-bg-color, #2a2a2a) !important;
-
-    .wd-cell__title {
-      color: var(--wot-color-text, #fff) !important;
-    }
-
-    .wd-cell__value {
-      color: var(--wot-color-text-secondary, #d1d5db) !important;
-    }
-
-    .wd-cell__right-icon {
-      color: var(--wot-color-text-secondary, #9ca3af) !important;
-    }
-  }
+:deep(.loading-center .wd-loading__text) {
+  margin-top: 20rpx;
+  color: #fff;
+  text-align: center;
 }
 </style>
diff --git a/src/pages/mine/settings/network/index.vue b/src/pages/mine/settings/network/index.vue
index 921839c..983573d 100644
--- a/src/pages/mine/settings/network/index.vue
+++ b/src/pages/mine/settings/network/index.vue
@@ -1,48 +1,48 @@
 <template>
-  <view class="network-container">
+  <view class="app-container">
+    <wd-navbar title="网络测试" left-arrow @click-left="handleBack" />
+
     <!-- 网络状态展示 -->
-    <view class="status-card">
-      <view class="status-header">
-        <text class="title">网络状态</text>
-        <text :class="['status-badge', networkType ? 'online' : 'offline']">
-          {{ networkType ? "在线" : "离线" }}
-        </text>
-      </view>
-      <view class="status-info">
-        <view class="info-item">
-          <text class="label">网络类型：</text>
-          <text class="value">{{ networkType || "未知" }}</text>
-        </view>
-        <view class="info-item">
-          <text class="label">网络强度：</text>
-          <text class="value">{{ signalStrength }}</text>
-        </view>
-      </view>
-    </view>
+    <wd-card title="网络状态" custom-style="margin: 20rpx">
+      <wd-cell-group border>
+        <wd-cell title="网络状态">
+          <wd-tag :type="networkType ? 'success' : 'danger'" size="small">
+            {{ networkType ? "在线" : "离线" }}
+          </wd-tag>
+        </wd-cell>
+        <wd-cell title="网络类型" :value="networkType || '未知'" />
+        <wd-cell title="网络强度" :value="signalStrength" />
+      </wd-cell-group>
+    </wd-card>
 
     <!-- 网络测试 -->
-    <view class="test-card">
-      <view class="test-header">
-        <text class="title">网络测试</text>
-        <text class="subtitle">测试服务器连接情况</text>
+    <wd-card title="网络测试" custom-style="margin: 20rpx">
+      <view slot="extra">
+        <text class="text-gray-500 text-sm">测试服务器连接情况</text>
       </view>
 
-      <view class="test-content">
-        <view class="test-item">
-          <text class="label">延迟：</text>
-          <text class="value">{{ pingResult.delay }}ms</text>
-          <text :class="['status', getPingStatus]">{{ pingResult.status }}</text>
-        </view>
+      <wd-cell-group border>
+        <wd-cell title="延迟">
+          <view class="flex items-center">
+            <text class="mr-10">{{ pingResult.delay }}ms</text>
+            <wd-tag v-if="getPingStatus" :type="getPingStatusType" size="small">
+              {{ pingResult.status }}
+            </wd-tag>
+          </view>
+        </wd-cell>
+      </wd-cell-group>
 
-        <view v-if="testing" class="progress-bar">
-          <view class="progress" :style="{ width: `${progress}%` }" />
-        </view>
+      <wd-progress
+        v-if="testing"
+        :percentage="progress"
+        stroke-width="4"
+        custom-style="margin: 30rpx 0"
+      />
 
-        <button class="test-btn" :disabled="testing" @click="startTest">
-          {{ testing ? "测试中..." : "开始测试" }}
-        </button>
-      </view>
-    </view>
+      <wd-button block type="primary" :loading="testing" @click="startTest">
+        {{ testing ? "测试中..." : "开始测试" }}
+      </wd-button>
+    </wd-card>
   </view>
 </template>
 
@@ -79,6 +79,15 @@ const getPingStatus = computed(() => {
   return "bad";
 });
 
+// 计算状态对应的Tag类型
+const getPingStatusType = computed(() => {
+  const status = getPingStatus.value;
+  if (status === "good") return "success";
+  if (status === "normal") return "warning";
+  if (status === "bad") return "danger";
+  return "primary";
+});
+
 // 方法
 const getNetworkType = async () => {
   try {
@@ -172,6 +181,11 @@ const startTest = async () => {
   }
 };
 
+// 返回
+const handleBack = () => {
+  uni.navigateBack();
+};
+
 // 生命周期钩子
 onMounted(() => {
   getNetworkType();
@@ -193,134 +207,23 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-.network-container {
-  min-height: 100vh;
-  padding: 20px;
-  background-color: #f5f5f5;
+.mr-10 {
+  margin-right: 10rpx;
 }
 
-.status-card,
-.test-card {
-  padding: 20px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+.text-gray-500 {
+  color: #9e9e9e;
 }
 
-.status-header,
-.test-header {
+.text-sm {
+  font-size: 24rpx;
+}
+
+.flex {
   display: flex;
+}
+
+.items-center {
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-
-  .title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-  }
-}
-
-.status-badge {
-  padding: 4px 12px;
-  font-size: 14px;
-  border-radius: 12px;
-
-  &.online {
-    color: #4caf50;
-    background-color: #e8f5e9;
-  }
-
-  &.offline {
-    color: #f44336;
-    background-color: #ffebee;
-  }
-}
-
-.status-info,
-.test-content {
-  .info-item,
-  .test-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-
-    .label {
-      width: 100px;
-      font-size: 15px;
-      color: #666;
-    }
-
-    .value {
-      flex: 1;
-      font-size: 15px;
-      color: #333;
-    }
-
-    .status {
-      padding: 2px 8px;
-      font-size: 13px;
-      border-radius: 4px;
-
-      &.good {
-        color: #4caf50;
-        background-color: #e8f5e9;
-      }
-
-      &.normal {
-        color: #ff9800;
-        background-color: #fff3e0;
-      }
-
-      &.bad {
-        color: #f44336;
-        background-color: #ffebee;
-      }
-    }
-  }
-}
-
-.test-header {
-  .subtitle {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
-.progress-bar {
-  height: 4px;
-  margin: 20px 0;
-  overflow: hidden;
-  background-color: #f5f5f5;
-  border-radius: 2px;
-
-  .progress {
-    height: 100%;
-    background-color: #409eff;
-    transition: width 0.2s ease-in-out;
-  }
-}
-
-.test-btn {
-  width: 100%;
-  height: 44px;
-  margin-top: 20px;
-  font-size: 16px;
-  line-height: 44px;
-  color: #fff;
-  text-align: center;
-  background-color: #409eff;
-  border: none;
-  border-radius: 22px;
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-    background-color: #a0cfff;
-  }
 }
 </style>
diff --git a/src/pages/mine/settings/privacy/index.vue b/src/pages/mine/settings/privacy/index.vue
deleted file mode 100644
index a5a03f9..0000000
--- a/src/pages/mine/settings/privacy/index.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <view class="privacy-container">
-    <view class="privacy-header">
-      <text class="header-title">隐私政策</text>
-      <text class="header-date">更新日期：2024年3月15日</text>
-    </view>
-
-    <view class="privacy-content">
-      <view v-for="(section, index) in privacyContent" :key="index" class="section">
-        <text class="section-title">{{ section.title }}</text>
-        <text class="section-text">{{ section.content }}</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-const privacyContent = ref([
-  {
-    title: "1. 信息收集",
-    content:
-      "我们可能收集您的基本信息（如设备信息、操作日志等）以提供更好的服务体验。我们承诺对这些信息进行严格保密，并只用于改善产品服务。",
-  },
-  {
-    title: "2. 信息使用",
-    content:
-      "收集的信息将用于：优化用户体验、提供客户支持、发送重要通知、保障账号安全等。未经您的同意，我们不会向第三方分享您的个人信息。",
-  },
-  {
-    title: "3. 信息安全",
-    content:
-      "我们采用业界标准的安全技术和程序来保护您的个人信息，防止未经授权的访问、使用或泄露。我们定期审查信息收集、存储和处理实践。",
-  },
-  {
-    title: "4. Cookie 使用",
-    content:
-      "我们使用 Cookie 和类似技术来提供、保护和改进我们的产品和服务。这些技术帮助我们了解用户行为，告诉我们哪些功能最受欢迎。",
-  },
-  {
-    title: "5. 第三方服务",
-    content:
-      "我们的应用可能包含第三方服务。这些第三方服务有自己的隐私政策，我们建议您查看这些政策。我们不对第三方的隐私实践负责。",
-  },
-  {
-    title: "6. 未成年人保护",
-    content:
-      "我们非常重视对未成年人个人信息的保护。若您是未成年人，请在监护人指导下使用我们的服务。如果您是监护人，当您对您所监护的未成年人的个人信息有疑问时，请联系我们。",
-  },
-  {
-    title: "7. 隐私政策更新",
-    content:
-      "我们可能会不时更新本隐私政策。当我们更新隐私政策时，我们会在本页面上发布更新后的版本并修改更新日期。建议您定期查看本页面。",
-  },
-]);
-</script>
-
-<style lang="scss" scoped>
-.privacy-container {
-  min-height: 100vh;
-  padding: 20px;
-  background-color: #fff;
-}
-
-.privacy-header {
-  margin-bottom: 30px;
-  text-align: center;
-
-  .header-title {
-    display: block;
-    margin-bottom: 10px;
-    font-size: 22px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .header-date {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
-.privacy-content {
-  .section {
-    margin-bottom: 25px;
-
-    .section-title {
-      display: block;
-      margin-bottom: 12px;
-      font-size: 17px;
-      font-weight: 500;
-      color: #333;
-    }
-
-    .section-text {
-      display: block;
-      font-size: 15px;
-      line-height: 1.6;
-      color: #666;
-      text-align: justify;
-    }
-  }
-}
-</style>
diff --git a/src/pages/mine/settings/theme/index.vue b/src/pages/mine/settings/theme/index.vue
index 641bc71..37a582d 100644
--- a/src/pages/mine/settings/theme/index.vue
+++ b/src/pages/mine/settings/theme/index.vue
@@ -1,69 +1,65 @@
 <template>
+  <!-- 内容区域 -->
   <view class="app-container">
-    <!-- 内容区域 -->
-    <view class="content-wrapper">
-      <!-- 页面标题 -->
-      <view class="page-header">
-        <text class="page-title">主题设置</text>
-        <text class="page-subtitle">个性化您的应用外观</text>
+    <wd-navbar title="主题设置" left-arrow @click-left="handleBack" />
+
+    <!-- 页面标题 -->
+    <wd-card custom-class="page-header">
+      <text class="page-title">主题设置</text>
+      <view class="page-subtitle">个性化您的应用外观</view>
+    </wd-card>
+
+    <!-- 暗黑模式设置 -->
+    <wd-card class="mb-3">
+      <view class="flex-between py-2">
+        <text>暗黑模式</text>
+        <wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
       </view>
-      <!-- 暗黑模式设置 -->
-      <wd-card class="mb-3">
-        <view class="flex-between py-2">
-          <text>暗黑模式</text>
-          <wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
-        </view>
-      </wd-card>
-      <!-- 主题色选择 -->
-      <wd-card title="主题色" class="mb-3">
-        <view class="color-grid">
-          <view
-            v-for="item in colorColumns"
-            :key="item.value"
-            class="color-item"
-            :class="{ active: currentThemeColor === item.value }"
-            @click="setThemeColor(item.value)"
-          >
-            <view class="color-box" :style="{ backgroundColor: item.value }">
-              <wd-icon
-                v-if="currentThemeColor === item.value"
-                name="check"
-                size="16"
-                color="#fff"
-              />
-            </view>
-            <text class="color-label">{{ item.label }}</text>
+    </wd-card>
+    <!-- 主题色选择 -->
+    <wd-card title="主题色" class="mb-3">
+      <view class="color-grid">
+        <view
+          v-for="item in colorColumns"
+          :key="item.value"
+          class="color-item"
+          :class="{ active: currentThemeColor === item.value }"
+          @click="setThemeColor(item.value)"
+        >
+          <view class="color-box" :style="{ backgroundColor: item.value }">
+            <wd-icon v-if="currentThemeColor === item.value" name="check" size="16" color="#fff" />
           </view>
+          <text class="color-label">{{ item.label }}</text>
         </view>
-      </wd-card>
-      <!-- 自定义颜色 -->
-      <wd-card class="mb-3">
-        <view class="flex-between items-center py-2" @click="showCustomColorPopup = true">
-          <view class="flex-start gap-2 items-center">
-            <wd-icon name="edit" size="20" :color="currentThemeColor" />
-            <text>自定义颜色</text>
-          </view>
-          <view class="flex-start gap-2 items-center">
-            <view class="color-box small" :style="{ backgroundColor: currentThemeColor }"></view>
-            <text class="text-sm text-gray-500">{{ currentThemeColor }}</text>
-            <wd-icon name="arrow-right" size="14" color="#999" />
-          </view>
-        </view>
-      </wd-card>
-      <!-- 预览效果 -->
-      <wd-card title="预览效果" class="mb-3">
-        <view class="py-2">
-          <view class="flex-start gap-2">
-            <wd-button type="primary" size="small">主要按钮</wd-button>
-            <wd-button type="primary" plain size="small">次要按钮</wd-button>
-            <wd-tag type="primary">标签</wd-tag>
-          </view>
-        </view>
-      </wd-card>
-      <!-- 重置按钮 -->
-      <view class="mt-5 mx-3">
-        <wd-button plain block @click="handleReset">恢复默认</wd-button>
       </view>
+    </wd-card>
+    <!-- 自定义颜色 -->
+    <wd-card class="mb-3">
+      <view class="flex-between items-center py-2" @click="showCustomColorPopup = true">
+        <view class="flex-start gap-2 items-center">
+          <wd-icon name="edit" size="20" :color="currentThemeColor" />
+          <text>自定义颜色</text>
+        </view>
+        <view class="flex-start gap-2 items-center">
+          <view class="color-box small" :style="{ backgroundColor: currentThemeColor }"></view>
+          <text class="text-sm text-gray-500">{{ currentThemeColor }}</text>
+          <wd-icon name="arrow-right" size="14" color="#999" />
+        </view>
+      </view>
+    </wd-card>
+    <!-- 预览效果 -->
+    <wd-card title="预览效果" class="mb-3">
+      <view class="py-2">
+        <view class="flex-start gap-2">
+          <wd-button type="primary" size="small">主要按钮</wd-button>
+          <wd-button type="primary" plain size="small">次要按钮</wd-button>
+          <wd-tag type="primary">标签</wd-tag>
+        </view>
+      </view>
+    </wd-card>
+    <!-- 重置按钮 -->
+    <view class="mt-5 mx-3">
+      <wd-button plain block @click="handleReset">恢复默认</wd-button>
     </view>
 
     <!-- 自定义颜色弹窗 -->
@@ -84,7 +80,7 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { onShow } from "@dcloudio/uni-app";
+import { onShow, onLoad } from "@dcloudio/uni-app";
 import { useTheme } from "@/composables/useTheme";
 
 const { theme, currentThemeColor, colorColumns, toggleTheme, setThemeColor, resetTheme } =
@@ -94,6 +90,13 @@ const { theme, currentThemeColor, colorColumns, toggleTheme, setThemeColor, rese
 const showCustomColorPopup = ref(false);
 const customColor = ref(currentThemeColor.value);
 
+// 动态设置页面标题
+onLoad(() => {
+  uni.setNavigationBarTitle({
+    title: "主题设置",
+  });
+});
+
 // 应用自定义颜色
 const applyCustomColor = () => {
   const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
@@ -132,22 +135,22 @@ const handleReset = () => {
   });
 };
 
+// 处理返回按钮点击
+const handleBack = () => {
+  uni.navigateBack();
+};
+
 // 页面显示时更新自定义颜色值
 onShow(() => {
   customColor.value = currentThemeColor.value;
 });
 </script>
 <style lang="scss" scoped>
-.content-wrapper {
-  padding: 20rpx;
-}
-
 .page-header {
   padding: 40rpx 20rpx;
-  margin-bottom: 30rpx;
+  margin-top: 20rpx;
   text-align: center;
   background: linear-gradient(135deg, var(--wot-color-theme) 0%, var(--primary-color-light) 100%);
-  border-radius: 16rpx;
 
   .page-title {
     display: block;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ed5a140..b0b8fc7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,22 +8,6 @@ body,
   margin: 0;
 }
 
-html {
-  font-size: 8px;
-}
-
-html.dark {
-  background: #121212;
-}
-
-/* 微信小程序顶部安全区域适配 */
-page {
-  padding-top: constant(safe-area-inset-top); /* iOS < 11.2 */
-  padding-top: env(safe-area-inset-top); /* iOS >= 11.2 */
-}
-
-/* 顶部导航栏适配 */
-.nav-bar {
-  padding-top: constant(safe-area-inset-top); /* iOS < 11.2 */
-  padding-top: env(safe-area-inset-top); /* iOS >= 11.2 */
+.app-container {
+  padding: 0 10rpx;
 }
diff --git a/src/utils/request.ts b/src/utils/request.ts
index c99d345..d9e1e05 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -8,17 +8,27 @@ interface RequestOptions<T = any> {
   header?: Record<string, string>;
   timeout?: number;
   responseType?: "text" | "arraybuffer";
+  skipAuth?: boolean; // 标记是否跳过认证
 }
 
 // 请求函数
 function request<T = any>(options: RequestOptions): Promise<T> {
   return new Promise<T>((resolve, reject) => {
-    // 添加授权头
-    const token = getAccessToken();
+    // 构建请求头
     const header = Object.assign({}, options.header || {});
 
-    if (token) {
-      header["Authorization"] = `Bearer ${token}`;
+    // 检查是否需要添加认证令牌
+    if (!options.skipAuth) {
+      const token = getAccessToken();
+      if (token) {
+        header["Authorization"] = `Bearer ${token}`;
+      } else {
+        // 需要认证但没有令牌，跳转到登录页
+        uni.navigateTo({
+          url: "/pages/login/index",
+        });
+        return reject(new Error("请先登录"));
+      }
     }
 
     // 根据平台决定URL前缀
@@ -48,11 +58,13 @@ function request<T = any>(options: RequestOptions): Promise<T> {
         }
         // 未授权错误
         else if (res.statusCode === 401) {
-          // 直接跳转到登录页
-          uni.redirectTo({
-            url: "/pages/login/index",
-          });
-          reject(new Error("未授权，请重新登录"));
+          // 如果需要认证且未授权，跳转到登录页
+          if (!options.skipAuth) {
+            uni.navigateTo({
+              url: "/pages/login/index",
+            });
+          }
+          reject(new Error(res.data.message || "未授权，请重新登录"));
         }
         // 其他错误
         else {
@@ -67,4 +79,15 @@ function request<T = any>(options: RequestOptions): Promise<T> {
   });
 }
 
+/**
+ * 无需认证的请求
+ * @param options 请求配置
+ */
+export function publicRequest<T = any>(options: RequestOptions): Promise<T> {
+  return request<T>({
+    ...options,
+    skipAuth: true,
+  });
+}
+
 export default request;
diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 8f38d72..cc691ab 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -16,7 +16,6 @@ interface NavigateToOptions {
        "/pages/mine/settings/account/index" |
        "/pages/mine/settings/agreement/index" |
        "/pages/mine/settings/network/index" |
-       "/pages/mine/settings/privacy/index" |
        "/pages/mine/settings/theme/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
diff --git a/unocss.config.ts b/unocss.config.ts
index 7b91515..b64ba13 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -12,7 +12,8 @@ export default {
   ],
   shortcuts: [
     {
-      "flex-center": "flex justify-center items-center flex-wrap",
+      "flex-center": "flex justify-center items-center",
+
       "flex-start": "flex justify-start items-center",
       "flex-end": "flex justify-end items-center",
       "flex-between": "flex justify-between items-center",
@@ -22,6 +23,9 @@ export default {
       "flex-baseline": "flex justify-baseline items-center",
       "flex-column": "flex flex-col",
       "flex-row": "flex flex-row",
+
+      // 垂直布局并居中对齐
+      "flex-col-center": "flex flex-col items-center",
     },
   ],