refactor: 简化主题设置

Author: oyjt

src/components/theme-picker/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="mb-20rpx flex items-center gap-2">
+    <view>
+      请选择主题颜色：
+    </view>
+    <view
+      v-for="color in colors"
+      :key="color"
+      class="h-32rpx w-32rpx cursor-pointer border border-gray-200 rounded-full"
+      :style="{ backgroundColor: color }"
+      @click="changeTheme(color)"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store';
+
+const appStore = useAppStore();
+
+const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
+
+function changeTheme(color: string) {
+  appStore.setTheme(color);
+}
+</script>

src/components/theme-switcher/index.vue

@@ -1,4 +1,3 @@
-import type { ThemeMode } from '@/utils/theme/types';
 import { computed } from 'vue';
 import { useAppStore } from '@/store';
 
@@ -8,42 +7,18 @@ import { useAppStore } from '@/store';
 export default function useTheme() {
   const appStore = useAppStore();
 
-  // 当前主题模式
-  const themeMode = computed(() => appStore.getThemeMode);
-
-  // 是否为深色主题
-  const isDark = computed(() => appStore.getIsDark);
-
-  // 当前主题颜色
-  const themeColors = computed(() => appStore.getThemeColors);
+  // 当前主题
+  const themeColor = computed(() => appStore.getTheme);
 
   /**
    * 设置主题模式
    */
-  const setThemeMode = (mode: ThemeMode) => {
-    appStore.setThemeMode(mode);
-  };
-
-  /**
-   * 切换主题
-   */
-  const toggleTheme = () => {
-    appStore.toggleTheme();
-  };
-
-  /**
-   * 获取主题颜色值
-   */
-  const getThemeColor = (key: keyof typeof themeColors.value) => {
-    return themeColors.value[key];
+  const setTheme = (color: string) => {
+    appStore.setTheme(color);
   };
 
   return {
-    themeMode,
-    isDark,
-    themeColors,
-    setThemeMode,
-    toggleTheme,
-    getThemeColor,
+    setTheme,
+    themeColor,
   };
 }

src/hooks/use-theme/index.ts

@@ -1,25 +1,39 @@
 <template>
   <view class="min-h-screen flex flex-col items-center">
-    <image
-      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
-      src="@/static/images/logo.png"
-      width="200rpx"
-      height="200rpx"
-    />
+    <image class="mb-50rpx mt-200rpx h-200rpx w-200rpx" src="@/static/images/logo.png" width="200rpx" height="200rpx" />
     <view class="flex justify-center">
       <text class="font-size-36rpx">
         {{ $t('home.intro') }}
       </text>
     </view>
     <view class="mt-100rpx flex gap-30rpx">
       <lang-select />
-      <view cursor-pointer @click="toGithub">
+      <view class="cursor-pointer" @click="toGithub">
         <view class="i-mdi-github text-40rpx" />
       </view>
-      <!-- #ifdef H5 -->
-      <theme-switcher />
-      <!-- #endif -->
     </view>
+
+    <!-- 主题预览 -->
+    <view class="mt-100rpx">
+      <view class="rounded-12rpx bg-#f8f9fa p-30rpx shadow-md">
+        <theme-picker />
+        <view class="u-border-top pt-20rpx">
+          主题预览
+        </view>
+        <view class="flex flex-col gap-10rpx py-20rpx">
+          <view class="flex items-center">
+            图标：<text class="i-mdi-yin-yang text-36rpx color-primary" />
+          </view>
+          <view class="flex items-center">
+            文字：<up-text type="primary" text="主要文字" size="18" />
+          </view>
+          <view class="flex items-center">
+            按钮：<view><u-button type="primary" text="主要按钮" shape="circle" /></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <!-- #ifdef MP-WEIXIN -->
     <!-- 隐私协议组件 -->
     <agree-privacy v-model="showAgreePrivacy" :disable-check-privacy="false" @agree="handleAgree" />

src/pages/common/theme/index.vue

@@ -16,98 +16,7 @@
 
   // 背景颜色
   --theme-bg-color: #ffffff;
-  --theme-bg-color-secondary: #f8f9fa;
-  --theme-bg-color-tertiary: #f1f7f7;
 
   // 边框颜色
   --theme-border-color: #e9ecef;
-  --theme-border-color-light: #f2f7f7;
-
-  // 阴影
-  --theme-shadow-color: rgba(0, 0, 0, 0.1);
-  --theme-shadow-color-light: rgba(0, 0, 0, 0.05);
-}
-
-// 深色主题
-[data-theme="dark"] {
-  // 主色调保持不变
-  --theme-primary: #21d59d;
-  --theme-primary-dark: #76a3fd;
-  --theme-success: #3ed268;
-  --theme-warning: #fe9831;
-  --theme-error: #fa4e62;
-
-  // 文字颜色
-  --theme-main-color: #ffffff;
-  --theme-content-color: #b0b8c1;
-  --theme-tips-color: #8a8f95;
-  --theme-light-color: #6c757d;
-  --theme-disabled-color: #495057;
-
-  // 背景颜色
-  --theme-bg-color: #1a1a1a;
-  --theme-bg-color-secondary: #2d2d2d;
-  --theme-bg-color-tertiary: #3a3a3a;
-
-  // 边框颜色
-  --theme-border-color: #404040;
-  --theme-border-color-light: #4a4a4a;
-
-  // 阴影
-  --theme-shadow-color: rgba(0, 0, 0, 0.3);
-  --theme-shadow-color-light: rgba(0, 0, 0, 0.2);
-}
-
-// 主题切换动画
-// * {
-//   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-// }
-
-// 主题工具类
-.theme-bg {
-  background-color: var(--theme-bg-color);
-}
-
-.theme-bg-secondary {
-  background-color: var(--theme-bg-color-secondary);
-}
-
-.theme-bg-tertiary {
-  background-color: var(--theme-bg-color-tertiary);
-}
-
-.theme-text {
-  color: var(--theme-main-color);
-}
-
-.theme-text-content {
-  color: var(--theme-content-color);
-}
-
-.theme-text-tips {
-  color: var(--theme-tips-color);
-}
-
-.theme-text-light {
-  color: var(--theme-light-color);
-}
-
-.theme-text-disabled {
-  color: var(--theme-disabled-color);
-}
-
-.theme-border {
-  border-color: var(--theme-border-color);
-}
-
-.theme-border-light {
-  border-color: var(--theme-border-color-light);
-}
-
-.theme-shadow {
-  box-shadow: 0 2px 8px var(--theme-shadow-color);
-}
-
-.theme-shadow-light {
-  box-shadow: 0 1px 4px var(--theme-shadow-color-light);
 }