From 82fae9ed4bf2fdcd2684abc8f5ddb15eb4fc6183 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Sat, 31 May 2025 07:42:27 +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

---
 README.md                                     |  31 ++
 components.d.ts                               |  12 +-
 pages.config.ts                               |   5 +-
 src/App.vue                                   |   6 +-
 .../{ => business}/WechatProfile.vue          |  41 ++-
 src/components/business/index.ts              |  11 +
 src/components/todo/TodoItem.vue              | 122 --------
 src/components/todo/TodoList.vue              |  43 ---
 src/composables/useTheme.ts                   |  28 +-
 src/layouts/default.vue                       |  68 ++++-
 src/layouts/tabbar.vue                        |  28 +-
 src/main.ts                                   |  10 +-
 src/pages.json                                |   5 +-
 src/pages/index/index.vue                     |  32 +--
 src/pages/login/index.vue                     |  11 +-
 src/pages/mine/index.vue                      |  52 +---
 src/pages/mine/profile/complete-profile.vue   |   2 +-
 src/pages/mine/settings/index.vue             |   7 +-
 src/pages/mine/settings/theme/index.vue       | 271 ++++++------------
 src/styles/dark-mode-fix.scss                 |  46 ---
 src/styles/index.scss                         |  17 ++
 unocss.config.ts                              |   6 +
 22 files changed, 308 insertions(+), 546 deletions(-)
 rename src/components/{ => business}/WechatProfile.vue (85%)
 create mode 100644 src/components/business/index.ts
 delete mode 100644 src/components/todo/TodoItem.vue
 delete mode 100644 src/components/todo/TodoList.vue
 delete mode 100644 src/styles/dark-mode-fix.scss
 create mode 100644 src/styles/index.scss

diff --git a/README.md b/README.md
index 1993c64..960bd2f 100644
--- a/README.md
+++ b/README.md
@@ -25,3 +25,34 @@ pnpm run dev:h5
 ```
 
 访问 [http://localhost:4096](http://localhost:4096)
+
+## 组件结构
+
+项目组件分为以下几类：
+
+- **基础组件**：`src/components` 下的通用组件
+- **业务组件**：`src/components/business` 下的业务相关组件
+  - `WechatProfile.vue`: 微信小程序环境下的头像、昵称和性别选择组件
+
+使用业务组件：
+
+```vue
+<template>
+  <WechatProfile v-model="profileData" @change="onProfileChange" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { WechatProfile } from "@/components/business";
+
+const profileData = ref({
+  avatar: "",
+  nickname: "",
+  gender: 1,
+});
+
+const onProfileChange = (data) => {
+  console.log("个人资料变更:", data);
+};
+</script>
+```
diff --git a/components.d.ts b/components.d.ts
index 8d00a5d..b62069f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,18 +19,22 @@ declare module 'vue' {
     QiunDataCharts: typeof import('./src/components/qiun-data-charts/qiun-data-charts.vue')['default']
     QiunError: typeof import('./src/components/qiun-error/qiun-error.vue')['default']
     QiunLoading: typeof import('./src/components/qiun-loading/qiun-loading.vue')['default']
-    TodoItem: typeof import('./src/components/todo/TodoItem.vue')['default']
-    TodoList: typeof import('./src/components/todo/TodoList.vue')['default']
+    TodoItem: (typeof import("./src/components/todo/TodoItem.vue"))["default"]
+    TodoList: (typeof import("./src/components/todo/TodoList.vue"))["default"]
     WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
     WdCard: typeof import('wot-design-uni/components/wd-card/wd-card.vue')['default']
     WdCell: typeof import('wot-design-uni/components/wd-cell/wd-cell.vue')['default']
     WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
+    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']
+    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']
     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']
+    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']
     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']
@@ -45,6 +49,6 @@ declare module 'vue' {
     WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
     WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default']
     WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
-    WechatProfile: typeof import('./src/components/WechatProfile.vue')['default']
+    WechatProfile: typeof import('./src/components/business/WechatProfile.vue')['default']
   }
 }
diff --git a/pages.config.ts b/pages.config.ts
index 4d68a28..e7a2291 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -14,8 +14,11 @@ export default defineUniPages({
     },
   ],
   globalStyle: {
+    navigationStyle: "custom",
     navigationBarTextStyle: "black",
-    navigationBarTitleText: "vue-uniapp-template",
+    navigationBarTitleText: "youlai-mall-app",
+    navigationBarBackgroundColor: "#F8F8F8",
+    backgroundColor: "#F8F8F8",
   },
 
   tabBar: {
diff --git a/src/App.vue b/src/App.vue
index bf99123..bcf15fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,6 @@
 import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
 import { useTheme } from "@/composables/useTheme";
 
-// 使用主题 composable
 const { initTheme } = useTheme();
 
 onLaunch(() => {
@@ -20,7 +19,4 @@ onHide(() => {
 });
 </script>
 
-<style lang="scss">
-/* 导入暗黑模式修复样式 */
-@import "./styles/dark-mode-fix';";
-</style>
+<style lang="scss"></style>
diff --git a/src/components/WechatProfile.vue b/src/components/business/WechatProfile.vue
similarity index 85%
rename from src/components/WechatProfile.vue
rename to src/components/business/WechatProfile.vue
index a4bbbb3..bcfb9c0 100644
--- a/src/components/WechatProfile.vue
+++ b/src/components/business/WechatProfile.vue
@@ -40,13 +40,28 @@
 import { ref, watch } from "vue";
 import FileAPI, { type FileInfo } from "@/api/file";
 
+/**
+ * 微信小程序头像昵称组件
+ *
+ * @description 用于微信小程序环境下的头像、昵称和性别选择
+ * @component WechatProfile
+ * @example
+ * <WechatProfile v-model="profileData" @change="onProfileChange" />
+ */
+
+defineOptions({
+  name: "WechatProfile",
+});
+
 // Props
+interface ProfileData {
+  avatar?: string;
+  nickname?: string;
+  gender?: number;
+}
+
 interface Props {
-  modelValue?: {
-    avatar?: string;
-    nickname?: string;
-    gender?: number;
-  };
+  modelValue?: ProfileData;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -59,8 +74,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Emits
 const emit = defineEmits<{
-  "update:modelValue": [value: { avatar?: string; nickname?: string; gender?: number }];
-  change: [value: { avatar?: string; nickname?: string; gender?: number }];
+  "update:modelValue": [value: ProfileData];
+  change: [value: ProfileData];
 }>();
 
 // 响应式数据
@@ -134,7 +149,7 @@ watch(gender, () => {
   margin-bottom: 20rpx;
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: var(--wot-color-text);
 }
 
 .avatar-section {
@@ -171,14 +186,14 @@ watch(gender, () => {
     justify-content: center;
     width: 100%;
     height: 100%;
-    background: #f8f9fa;
-    border: 2rpx dashed #ddd;
+    background: var(--wot-color-bg-light);
+    border: 2rpx dashed var(--wot-color-border);
     border-radius: 50%;
 
     .placeholder-text {
       margin-top: 10rpx;
       font-size: 24rpx;
-      color: #999;
+      color: var(--wot-color-text-secondary);
     }
   }
 }
@@ -192,8 +207,8 @@ watch(gender, () => {
     height: 80rpx;
     padding: 0 20rpx;
     font-size: 28rpx;
-    background: #f8f9fa;
-    border: 1rpx solid #e9ecef;
+    background: var(--wot-color-bg-light);
+    border: 1rpx solid var(--wot-color-border);
     border-radius: 12rpx;
   }
 }
diff --git a/src/components/business/index.ts b/src/components/business/index.ts
new file mode 100644
index 0000000..a606365
--- /dev/null
+++ b/src/components/business/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 业务组件导出索引
+ */
+import WechatProfile from "./WechatProfile.vue";
+
+export { WechatProfile };
+
+// 用于批量注册组件
+export default {
+  WechatProfile,
+};
diff --git a/src/components/todo/TodoItem.vue b/src/components/todo/TodoItem.vue
deleted file mode 100644
index ee40ea9..0000000
--- a/src/components/todo/TodoItem.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <view :class="['todo-item', { completed: todo.completed }]" @tap="toggleCompleted">
-    <view class="status-icon">
-      <wd-icon v-if="todo.completed" name="check" color="#67C23A" size="20" />
-      <view v-else class="uncompleted-circle"></view>
-    </view>
-    <view class="todo-content">
-      <view class="todo-title">{{ todo.title }}</view>
-      <view v-if="todo.description" class="todo-description">
-        {{ todo.description }}
-      </view>
-      <view v-if="todo.deadline" class="todo-deadline">
-        <wd-icon name="time" size="14" color="#999999" style="margin-right: 4rpx" />
-        {{ formatDate(todo.deadline) }}
-      </view>
-    </view>
-    <view class="todo-actions">
-      <wd-icon
-        name="delete-filling"
-        color="#F56C6C"
-        size="18"
-        @tap.stop="$emit('delete', todo.id)"
-      />
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, defineEmits } from "vue";
-import { Todo } from "@/types/todo";
-
-const props = defineProps({
-  todo: {
-    type: Object as () => Todo,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["update", "delete"]);
-
-// 切换完成状态
-const toggleCompleted = () => {
-  emit("update", {
-    ...props.todo,
-    completed: !props.todo.completed,
-  });
-};
-
-// 格式化日期
-const formatDate = (date: string) => {
-  const d = new Date(date);
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-</script>
-
-<style lang="scss" scoped>
-.todo-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 24rpx;
-  margin-bottom: 16rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-  &.completed {
-    opacity: 0.7;
-
-    .todo-title {
-      color: #909399;
-      text-decoration: line-through;
-    }
-  }
-
-  .status-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40rpx;
-    height: 40rpx;
-    margin-right: 20rpx;
-
-    .uncompleted-circle {
-      width: 36rpx;
-      height: 36rpx;
-      border: 2rpx solid #dcdfe6;
-      border-radius: 50%;
-    }
-  }
-
-  .todo-content {
-    flex: 1;
-
-    .todo-title {
-      margin-bottom: 8rpx;
-      font-size: 30rpx;
-      font-weight: 500;
-      color: #303133;
-    }
-
-    .todo-description {
-      margin-bottom: 8rpx;
-      font-size: 26rpx;
-      color: #606266;
-    }
-
-    .todo-deadline {
-      display: flex;
-      align-items: center;
-      font-size: 24rpx;
-      color: #909399;
-    }
-  }
-
-  .todo-actions {
-    padding: 6rpx;
-  }
-}
-</style>
diff --git a/src/components/todo/TodoList.vue b/src/components/todo/TodoList.vue
deleted file mode 100644
index dc8a449..0000000
--- a/src/components/todo/TodoList.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <view class="todo-list">
-    <wd-empty v-if="todos.length === 0" description="暂无待办事项" />
-    <TodoItem
-      v-for="todo in todos"
-      :key="todo.id"
-      :todo="todo"
-      @update="handleUpdate"
-      @delete="handleDelete"
-    />
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, defineEmits } from "vue";
-import { Todo } from "@/types/todo";
-import TodoItem from "@/components/todo/TodoItem.vue";
-
-defineProps({
-  todos: {
-    type: Array as () => Todo[],
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(["update", "delete"]);
-
-// 处理更新待办事项
-const handleUpdate = (todo: Todo) => {
-  emit("update", todo);
-};
-
-// 处理删除待办事项
-const handleDelete = (id: string) => {
-  emit("delete", id);
-};
-</script>
-
-<style lang="scss" scoped>
-.todo-list {
-  padding: 20rpx 0;
-}
-</style>
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index ecc120e..6618cc1 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -3,18 +3,22 @@ import type { ConfigProviderThemeVars } from "wot-design-uni";
 
 /* 默认的主题色列表 */
 export const colorColumns = [
-  { value: "#165DFF", label: "蓝色" },
-  { value: "#0FC6C2", label: "青绿色" },
-  { value: "#722ED1", label: "紫色" },
-  { value: "#F5222D", label: "红色" },
-  { value: "#FA8C16", label: "橙色" },
-  { value: "#FADB14", label: "黄色" },
-  { value: "#52C41A", label: "绿色" },
-  { value: "#EB2F96", label: "粉色" },
-  { value: "#13C2C2", label: "青色" },
-  { value: "#1890FF", label: "天蓝色" },
-  { value: "#CD5C5C", label: "经典红" },
-  { value: "#228B22", label: "自然绿" },
+  { value: "#165DFF", label: "海洋蓝" },
+  { value: "#1677FF", label: "天空蓝" },
+  { value: "#0081FF", label: "梦幻蓝" },
+  { value: "#4080FF", label: "皇家蓝" },
+  { value: "#4D74FF", label: "靛蓝" },
+  { value: "#0FC6C2", label: "碧波绿" },
+  { value: "#722ED1", label: "魔幻紫" },
+  { value: "#F5222D", label: "热情红" },
+  { value: "#FA8C16", label: "活力橙" },
+  { value: "#FADB14", label: "阳光黄" },
+  { value: "#52C41A", label: "生机绿" },
+  { value: "#EB2F96", label: "浪漫粉" },
+  { value: "#13C2C2", label: "清新青" },
+  { value: "#36CFC9", label: "湖水蓝" },
+  { value: "#CD5C5C", label: "复古红" },
+  { value: "#228B22", label: "森林绿" },
 ];
 
 /* 存储键名 */
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index bdd524f..18d3e07 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,7 +1,57 @@
 <script lang="ts" setup>
 import { useTheme } from "@/composables/useTheme";
+import { onLoad } from "@dcloudio/uni-app";
 
 const { theme, themeVars } = useTheme();
+
+// 页面标题
+const pageTitle = ref("");
+// 是否显示返回按钮
+const showBackButton = ref(false);
+// 是否显示导航栏
+const showNavbar = ref(true);
+
+// 获取当前页面路由信息
+const getCurrentPageRoute = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1];
+    return currentPage.route || "";
+  }
+  return "";
+};
+
+// 处理返回按钮点击
+const handleBack = () => {
+  uni.navigateBack({
+    fail: () => {
+      uni.switchTab({ url: "/pages/index/index" });
+    },
+  });
+};
+
+// 页面加载时处理导航栏配置
+onLoad(() => {
+  const route = getCurrentPageRoute();
+
+  // 获取当前页面实例
+  const pages = getCurrentPages();
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1];
+
+    // 尝试获取页面的navigationBarTitleText
+    const navigationBarTitleText = currentPage.$page?.style?.navigationBarTitleText || "";
+    pageTitle.value = navigationBarTitleText;
+
+    // 如果是首页或tabbar页面，不显示返回按钮
+    showBackButton.value = pages.length > 1;
+
+    // 某些页面可能不需要显示导航栏
+    if (route.includes("/index/index") || route.includes("/login")) {
+      showNavbar.value = false;
+    }
+  }
+});
 </script>
 
 <script lang="ts">
@@ -21,18 +71,20 @@ export default {
     custom-style="background-color: #f5f5f5;min-height: 100vh"
     :class="{ 'wot-theme-dark': theme === 'dark' }"
   >
+    <!-- 顶部导航栏 -->
+    <wd-navbar :title="pageTitle" :border="false" @click-left="handleBack">
+      <template #left>
+        <wd-icon name="arrow-left" size="20" />
+      </template>
+    </wd-navbar>
+
+    <!-- 内容区域 -->
     <slot />
+
     <wd-notify />
     <wd-toast />
     <wd-message-box />
-    <privacy-popup />
   </wd-config-provider>
 </template>
 
-<style lang="scss" scoped>
-/* 暗黑模式样式 */
-.wot-theme-dark {
-  color: #f5f5f5 !important;
-  background-color: #1a1a1a !important;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index af3e374..2c42d86 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: "首页", icon: "home" },
+  { name: "index", value: null, active: true, title: "首页123", icon: "home" },
   { name: "mine", value: null, active: false, title: "我的", icon: "user" },
 ]);
 
@@ -161,14 +161,6 @@ export default {
     custom-style="min-height: 100vh"
     :class="{ 'wot-theme-dark': theme === 'dark' }"
   >
-    <wd-navbar
-      :title="activeTabbar.title"
-      safe-area-inset-top
-      placeholder
-      fixed
-      :bordered="false"
-    />
-
     <slot />
     <wd-tabbar
       :model-value="activeTabbar.name"
@@ -193,20 +185,4 @@ export default {
   </wd-config-provider>
 </template>
 
-<style lang="scss" scoped>
-/* 暗黑模式样式 */
-.wot-theme-dark {
-  color: #f5f5f5;
-  background-color: #1a1a1a;
-
-  :deep(.wd-navbar) {
-    color: #f5f5f5;
-    background-color: #2a2a2a;
-  }
-
-  :deep(.wd-tabbar) {
-    background-color: #2a2a2a;
-    border-top-color: #404040;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/main.ts b/src/main.ts
index 0f7d7f6..764fe3b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,14 +2,22 @@ import { createSSRApp } from "vue";
 import App from "./App.vue";
 
 import "uno.css";
-import "@/styles/theme.scss";
+import "@/styles/index.scss";
 
 import { setupStore } from "@/store";
+// 可选：导入业务组件
+// import BusinessComponents from '@/components/business';
 
 export function createApp() {
   const app = createSSRApp(App);
 
   setupStore(app);
+
+  // 可选：全局注册业务组件
+  // Object.entries(BusinessComponents).forEach(([name, component]) => {
+  //   app.component(name, component);
+  // });
+
   return {
     app,
   };
diff --git a/src/pages.json b/src/pages.json
index f3cd0fb..a0b7b55 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -74,8 +74,11 @@
     }
   ],
   "globalStyle": {
+    "navigationStyle": "custom",
     "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "vue-uniapp-template"
+    "navigationBarTitleText": "youlai-mall-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
   },
   "tabBar": {
     "custom": true,
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 0702165..ea083dd 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <view style="width: 100%; height: var(--status-bar-height)" />
-  <view class="home">
+  <view class="app-container">
     <wd-swiper
       v-model:current="current"
       :list="swiperList"
@@ -21,7 +20,7 @@
         <view class="p-2">
           <image class="w-72rpx h-72rpx rounded-8rpx" :src="item.icon" />
         </view>
-        <view class="text">{{ item.title }}</view>
+        <view class="text-sm text-center">{{ item.title }}</view>
       </wd-grid-item>
     </wd-grid>
 
@@ -40,9 +39,9 @@
 
     <!-- 数据统计 -->
     <wd-grid :column="2" :gutter="2">
-      <wd-grid-item use-slot custom-class="custom-item">
+      <wd-grid-item use-slot custom-class="h-80px">
         <view class="flex justify-start pl-5">
-          <view class="flex-center">
+          <view class="flex items-center">
             <image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/visitor.png" />
             <view class="ml-5 text-left">
               <view class="font-bold">访客数</view>
@@ -51,9 +50,9 @@
           </view>
         </view>
       </wd-grid-item>
-      <wd-grid-item use-slot custom-class="custom-item">
+      <wd-grid-item use-slot custom-class="h-80px">
         <view class="flex justify-start pl-5">
-          <view class="flex-center">
+          <view class="flex items-center">
             <image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/browser.png" />
             <view class="ml-5 text-left">
               <view class="font-bold">浏览量</view>
@@ -66,7 +65,7 @@
 
     <wd-card>
       <template #title>
-        <view class="flex-between">
+        <view class="flex justify-between items-center">
           <view>访问趋势</view>
           <view>
             <wd-radio-group
@@ -82,7 +81,7 @@
         </view>
       </template>
 
-      <view class="charts-box">
+      <view class="w-full h-300px mb-40rpx">
         <qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
       </view>
     </wd-card>
@@ -267,18 +266,5 @@ onShow(() => {
 </script>
 
 <style setup lang="scss">
-.home {
-  padding: 10rpx 10rpx;
-  :deep(.custom-item) {
-    height: 80px !important;
-  }
-  :deep(.wd-card) {
-    margin: 10rpx 0 !important;
-  }
-}
-
-.charts-box {
-  width: 100%;
-  height: 300px;
-}
+/* 已全部使用UnoCSS替代，不需要额外的样式 */
 </style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index bebcf98..01566f2 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,12 +1,10 @@
 <template>
-  <view class="login-container">
+  <view class="app-container">
     <!-- 背景图 -->
     <image src="/static/images/login-bg.svg" mode="aspectFill" class="login-bg" />
 
     <!-- Logo和标题区域 -->
-    <view class="header">    <view class="header">
-
-    </view>
+    <view class="header"></view>
 
     <view class="login-card">
       <view class="form-wrap">
@@ -310,12 +308,13 @@ const navigateToPrivacy = () => {
 </script>
 
 <style lang="scss" scoped>
-.login-container {
+.app-container {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100vh;
+  height: 100%;
+  min-height: 100vh;
   overflow: hidden;
   background-color: var(--wot-color-bg-container);
 }
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index 2d55c98..5438760 100644
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="mine-container">
+  <view class="app-container">
     <!-- 用户信息卡片 -->
     <view class="user-profile">
       <view class="blur-bg"></view>
@@ -143,8 +143,15 @@
       </view>
     </view>
 
-    <view v-if="isLogin" class="logout-btn-container">
-      <wd-button custom-class="logout-btn-unocss" @click="handleLogout">退出登录</wd-button>
+    <!-- 退出登录按钮 -->
+    <view v-if="isLogin" class="logout-btn-wrap">
+      <wd-button
+        class="w-full h-80rpx rounded-40rpx font-bold text-32rpx"
+        plain
+        @click="handleLogout"
+      >
+        退出登录
+      </wd-button>
     </view>
 
     <wd-toast />
@@ -243,13 +250,6 @@ onShow(() => {
 </script>
 
 <style lang="scss" scoped>
-/* stylelint-disable declaration-property-value-no-unknown */
-.mine-container {
-  min-height: 100vh;
-  padding-bottom: 100rpx;
-  background-color: var(--wot-color-bg-page);
-}
-
 // 用户信息卡片
 .user-profile {
   position: relative;
@@ -549,35 +549,7 @@ onShow(() => {
 }
 
 // 退出登录按钮
-.logout-btn-container {
-  padding: 20rpx 30rpx;
-}
-</style>
-
-<style>
-/* 使用全局样式解决微信小程序组件样式问题 */
-.logout-btn-unocss {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 100% !important;
-  height: 80rpx !important;
-  font-size: 32rpx !important;
-  font-weight: bold !important;
-  color: #fff !important;
-  background-color: var(--wot-color-theme) !important;
-  border: none !important;
-  border-radius: 40rpx !important;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15) !important;
-}
-
-.btn-login {
-  width: 160rpx !important;
-  height: 60rpx !important;
-  font-size: 26rpx !important;
-  color: var(--wot-color-theme) !important;
-  background-color: #fff !important;
-  border: none !important;
-  border-radius: 30rpx !important;
+.logout-btn-wrap {
+  padding: 30rpx;
 }
 </style>
diff --git a/src/pages/mine/profile/complete-profile.vue b/src/pages/mine/profile/complete-profile.vue
index 0a31770..ccdacd3 100644
--- a/src/pages/mine/profile/complete-profile.vue
+++ b/src/pages/mine/profile/complete-profile.vue
@@ -118,7 +118,7 @@ import { useToast } from "wot-design-uni";
 import { useUserStore } from "@/store/modules/user.store";
 import UserAPI, { type UserProfileForm } from "@/api/user";
 import FileAPI, { type FileInfo } from "@/api/file";
-import WechatProfile from "@/components/WechatProfile.vue";
+import WechatProfile from "@/components/business/WechatProfile.vue";
 
 const toast = useToast();
 const userStore = useUserStore();
diff --git a/src/pages/mine/settings/index.vue b/src/pages/mine/settings/index.vue
index bc8a692..1ab878e 100644
--- a/src/pages/mine/settings/index.vue
+++ b/src/pages/mine/settings/index.vue
@@ -6,7 +6,7 @@
       <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" is-link @click="navigateToAbout" />
+      <wd-cell title="关于我们" icon="info-circle" is-link @click="navigateToAbout" />
     </wd-cell-group>
 
     <wd-cell-group custom-style="margin-top:40rpx">
@@ -199,11 +199,6 @@ onLoad(() => {
 </script>
 <style lang="scss" scoped>
 .settings-container {
-  min-height: 100vh;
-  padding: 20px;
-  color: var(--wot-color-text, #333);
-  background-color: var(--wot-color-bg-light, #f8f8f8);
-
   // 强制 Wot 组件应用暗黑模式样式
   :deep(.wd-cell-group) {
     overflow: hidden;
diff --git a/src/pages/mine/settings/theme/index.vue b/src/pages/mine/settings/theme/index.vue
index 8dc203c..641bc71 100644
--- a/src/pages/mine/settings/theme/index.vue
+++ b/src/pages/mine/settings/theme/index.vue
@@ -1,91 +1,81 @@
 <template>
-  <view class="theme-settings-container">
-    <!-- 页面标题 -->
-    <view class="page-header">
-      <text class="page-title">主题设置</text>
-      <text class="page-subtitle">个性化您的应用外观</text>
-    </view>
-
-    <!-- 暗黑模式设置 -->
-    <wd-card custom-class="setting-card">
-      <view class="setting-item">
-        <view class="setting-info">
-          <wd-icon name="moon" size="20" :color="currentThemeColor" />
-          <text class="setting-label">暗黑模式</text>
+  <view class="app-container">
+    <!-- 内容区域 -->
+    <view class="content-wrapper">
+      <!-- 页面标题 -->
+      <view class="page-header">
+        <text class="page-title">主题设置</text>
+        <text class="page-subtitle">个性化您的应用外观</text>
+      </view>
+      <!-- 暗黑模式设置 -->
+      <wd-card class="mb-3">
+        <view class="flex-between py-2">
+          <text>暗黑模式</text>
+          <wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
         </view>
-        <wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
-      </view>
-    </wd-card>
-
-    <!-- 主题色选择 -->
-    <wd-card custom-class="setting-card">
-      <view class="setting-header">
-        <wd-icon name="palette" size="20" :color="currentThemeColor" />
-        <text class="setting-title">主题色</text>
-      </view>
-
-      <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" />
+      </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>
-          <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 custom-class="setting-card">
-      <view class="setting-item" @click="showCustomColorPopup = true">
-        <view class="setting-info">
-          <wd-icon name="edit" size="20" :color="currentThemeColor" />
-          <text class="setting-label">自定义颜色</text>
-        </view>
-        <view class="custom-color-preview">
-          <view class="color-box small" :style="{ backgroundColor: currentThemeColor }"></view>
-          <text class="color-value">{{ currentThemeColor }}</text>
-          <wd-icon name="arrow-right" size="14" color="#999" />
-        </view>
-      </view>
-    </wd-card>
-
-    <!-- 预览效果 -->
-    <wd-card custom-class="setting-card">
-      <view class="preview-section">
-        <text class="preview-title">预览效果</text>
-        <view class="preview-items">
-          <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="action-buttons">
-      <wd-button block @click="handleReset">恢复默认</wd-button>
     </view>
 
     <!-- 自定义颜色弹窗 -->
     <wd-popup v-model="showCustomColorPopup" position="bottom" closeable>
       <view class="custom-color-popup">
-        <view class="popup-header">
-          <text class="popup-title">自定义主题色</text>
-        </view>
-
-        <view class="color-input-section">
+        <view class="text-center mb-5"><text class="text-lg font-bold">自定义主题色</text></view>
+        <view class="mb-5">
           <view class="color-preview-large" :style="{ backgroundColor: customColor }"></view>
           <wd-input v-model="customColor" placeholder="请输入颜色值，如 #FF6B6B" clearable />
           <text class="input-tip">支持 HEX 格式颜色值</text>
         </view>
-
-        <view class="popup-actions">
+        <view class="flex gap-2">
           <wd-button type="info" block @click="showCustomColorPopup = false">取消</wd-button>
           <wd-button type="primary" block @click="applyCustomColor">应用</wd-button>
         </view>
@@ -93,9 +83,7 @@
     </wd-popup>
   </view>
 </template>
-
 <script lang="ts" setup>
-import { ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import { useTheme } from "@/composables/useTheme";
 
@@ -149,12 +137,9 @@ onShow(() => {
   customColor.value = currentThemeColor.value;
 });
 </script>
-
 <style lang="scss" scoped>
-.theme-settings-container {
-  min-height: 100vh;
+.content-wrapper {
   padding: 20rpx;
-  background-color: var(--wot-color-bg-page);
 }
 
 .page-header {
@@ -178,58 +163,18 @@ onShow(() => {
   }
 }
 
-.setting-card {
-  margin-bottom: 20rpx;
-  background-color: var(--wot-color-bg-container) !important;
-  border-radius: 16rpx !important;
-
-  :deep(.wd-card__body) {
-    padding: 30rpx !important;
-  }
-}
-
-.setting-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .setting-info {
-    display: flex;
-    gap: 20rpx;
-    align-items: center;
-  }
-
-  .setting-label {
-    font-size: 30rpx;
-    color: var(--wot-color-text);
-  }
-}
-
-.setting-header {
-  display: flex;
-  gap: 20rpx;
-  align-items: center;
-  margin-bottom: 30rpx;
-
-  .setting-title {
-    font-size: 30rpx;
-    font-weight: 600;
-    color: var(--wot-color-text);
-  }
-}
-
 .color-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20rpx;
+  gap: 24rpx 20rpx;
 }
 
 .color-item {
   display: flex;
   flex-direction: column;
-  gap: 10rpx;
+  gap: 8rpx;
   align-items: center;
-  padding: 10rpx;
+  padding: 8rpx;
   cursor: pointer;
 
   &.active .color-box {
@@ -255,79 +200,29 @@ onShow(() => {
   .color-label {
     font-size: 22rpx;
     color: var(--wot-color-text-secondary);
+    text-align: center;
+    white-space: nowrap;
   }
 }
 
-.custom-color-preview {
-  display: flex;
-  gap: 15rpx;
-  align-items: center;
-
-  .color-value {
-    font-size: 26rpx;
-    color: var(--wot-color-text-secondary);
-  }
-}
-
-.preview-section {
-  .preview-title {
-    display: block;
-    margin-bottom: 20rpx;
-    font-size: 28rpx;
-    color: var(--wot-color-text-secondary);
-  }
-
-  .preview-items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20rpx;
-    align-items: center;
-  }
-}
-
-.action-buttons {
-  padding: 0 20rpx;
-  margin-top: 40rpx;
-}
-
 .custom-color-popup {
   padding: 40rpx 30rpx;
   background-color: var(--wot-color-bg-container);
 
-  .popup-header {
-    margin-bottom: 40rpx;
+  .color-preview-large {
+    width: 100%;
+    height: 120rpx;
+    margin-bottom: 30rpx;
+    border: 2rpx solid var(--wot-color-border);
+    border-radius: 16rpx;
+  }
+
+  .input-tip {
+    display: block;
+    margin-top: 15rpx;
+    font-size: 24rpx;
+    color: var(--wot-color-text-placeholder);
     text-align: center;
-
-    .popup-title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: var(--wot-color-text);
-    }
-  }
-
-  .color-input-section {
-    margin-bottom: 40rpx;
-
-    .color-preview-large {
-      width: 100%;
-      height: 120rpx;
-      margin-bottom: 30rpx;
-      border: 2rpx solid var(--wot-color-border);
-      border-radius: 16rpx;
-    }
-
-    .input-tip {
-      display: block;
-      margin-top: 15rpx;
-      font-size: 24rpx;
-      color: var(--wot-color-text-placeholder);
-      text-align: center;
-    }
-  }
-
-  .popup-actions {
-    display: flex;
-    gap: 20rpx;
   }
 }
 </style>
diff --git a/src/styles/dark-mode-fix.scss b/src/styles/dark-mode-fix.scss
deleted file mode 100644
index 83ed7d9..0000000
--- a/src/styles/dark-mode-fix.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * 暗黑模式输入框修复
- * 强制所有输入框在暗黑模式下保持透明背景
- */
-
-/* 暗黑模式下的输入框 */
-.wot-theme-dark {
-  /* 通用输入框 */
-  input,
-  textarea,
-  [contenteditable="true"] {
-    color: var(--wot-color-text, #f5f5f5) !important;
-    background-color: transparent !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-  }
-
-  /* 自动填充覆盖 */
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    background: none !important;
-    background-color: transparent !important;
-    -webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0.95) inset !important;
-    transition: background-color 5000s;
-    -webkit-text-fill-color: var(--wot-color-text, #f5f5f5) !important;
-  }
-
-  /* 登录页特殊处理 */
-  .login-card {
-    input,
-    .form-input {
-      background-color: transparent !important;
-    }
-  }
-}
-
-/* 登录页面特别修复 */
-.login-container {
-  input,
-  .form-input {
-    background-color: transparent !important;
-    border: none !important;
-  }
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..774c93d
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,17 @@
+@import "./theme";
+
+html,
+body,
+#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 8px;
+}
+
+html.dark {
+  background: #121212;
+}
diff --git a/unocss.config.ts b/unocss.config.ts
index b65b035..7b91515 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -16,6 +16,12 @@ export default {
       "flex-start": "flex justify-start items-center",
       "flex-end": "flex justify-end items-center",
       "flex-between": "flex justify-between items-center",
+      "flex-around": "flex justify-around items-center",
+      "flex-evenly": "flex justify-evenly items-center",
+      "flex-stretch": "flex justify-stretch items-center",
+      "flex-baseline": "flex justify-baseline items-center",
+      "flex-column": "flex flex-col",
+      "flex-row": "flex flex-row",
     },
   ],