From d1c5124b82582bc3d9da9628d607bf44dc2112c4 Mon Sep 17 00:00:00 2001
From: Utopia <greatauk11@gmail.com>
Date: Tue, 19 Aug 2025 17:44:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=8A=9F=E8=83=BD=20&=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=8D=E5=90=8C=20layout=20=E7=9A=84?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/default.vue   | 10 +++-------
 src/layouts/tabbar.vue    | 11 ++++------
 src/pages/index/index.vue |  8 ++++++--
 src/store/index.ts        |  1 +
 src/store/theme.ts        | 42 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 56 insertions(+), 16 deletions(-)
 create mode 100644 src/store/theme.ts

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 360c6b2..d362f86 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import { useThemeStore } from '@/store'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+const themeStore = useThemeStore()
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars">
+  <wd-config-provider :theme-vars="themeStore.themeVars" :theme="themeStore.theme">
     <slot />
     <wd-toast />
     <wd-message-box />
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index 7e8d345..d55fb51 100644
--- a/src/layouts/tabbar.vue
+++ b/src/layouts/tabbar.vue
@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import { useThemeStore } from '@/store'
 import FgTabbar from '@/tabbar/index.vue'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+const themeStore = useThemeStore()
+
 const testUniLayoutExposedData = ref('testUniLayoutExposedData')
 defineExpose({
   testUniLayoutExposedData,
@@ -14,7 +11,7 @@ defineExpose({
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars">
+  <wd-config-provider :theme-vars="themeStore.themeVars" :theme="themeStore.theme">
     <slot />
     <FgTabbar />
     <wd-toast />
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index dd24520..4b8b937 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -11,10 +11,14 @@
 </route>
 
 <script lang="ts" setup>
+import { useThemeStore } from '@/store'
+
 defineOptions({
   name: 'Home',
 })
 
+const themeStore = useThemeStore()
+
 // 获取屏幕边界到安全区域距离
 let safeAreaInsets
 let systemInfo
@@ -109,8 +113,8 @@ console.log('index')
     <!-- #endif -->
 
     <view class="mt-4 text-center">
-      <wd-button type="primary">
-        UI组件按钮
+      <wd-button type="primary" class="ml-2" @click="themeStore.setThemeVars({ colorTheme: 'red' })">
+        设置主题变量
       </wd-button>
     </view>
     <view class="mt-4 text-center">
diff --git a/src/store/index.ts b/src/store/index.ts
index 74b1b2f..0b98dbc 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,5 +13,6 @@ store.use(
 
 export default store
 
+export * from './theme'
 // 模块统一导出
 export * from './user'
diff --git a/src/store/theme.ts b/src/store/theme.ts
new file mode 100644
index 0000000..c3f1c55
--- /dev/null
+++ b/src/store/theme.ts
@@ -0,0 +1,42 @@
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore(
+  'theme-store',
+  () => {
+    /** 主题 */
+    const theme = ref<'light' | 'dark'>('light')
+
+    /** 主题变量 */
+    const themeVars = ref<ConfigProviderThemeVars>({
+      // colorTheme: 'red',
+      // buttonPrimaryBgColor: '#07c160',
+      // buttonPrimaryColor: '#07c160',
+    })
+
+    /** 设置主题变量 */
+    const setThemeVars = (partialVars: Partial<ConfigProviderThemeVars>) => {
+      themeVars.value = { ...themeVars.value, ...partialVars }
+    }
+
+    /** 切换主题 */
+    const toggleTheme = () => {
+      theme.value = theme.value === 'light' ? 'dark' : 'light'
+    }
+
+    return {
+      /** 设置主题变量 */
+      setThemeVars,
+      /** 切换主题 */
+      toggleTheme,
+      /** 主题变量 */
+      themeVars,
+      /** 主题 */
+      theme,
+    }
+  },
+  {
+    persist: true,
+  },
+)