wip: 临时提交

src/store/modules/theme.store.ts

@@ -1,49 +1,83 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
-import { applyThemeToMiniProgram } from "@/utils/theme";
-
-// 从缓存获取主题色
-const getThemeColor = (): string => {
-  const savedColor = uni.getStorageSync("themeColor");
-  return savedColor || "#165DFF"; // 默认Arco蓝色
-};
-
-// 保存主题色到缓存
-const setThemeColorCache = (color: string) => {
-  uni.setStorageSync("themeColor", color);
-};
+import { useStorage } from "@uni-helper/uni-use";
+import type { ThemeColorOption, ThemeMode } from "@/composables/types/theme";
+import { themeColorOptions } from "@/composables/types/theme";
 
 export const useThemeStore = defineStore("theme", () => {
-  // 主题色
-  const primaryColor = ref<string>(getThemeColor());
+  const theme = useStorage<ThemeMode>("app-theme", "light");
+  const currentThemeColor = useStorage<ThemeColorOption>("app-theme-color", themeColorOptions[0]);
 
-  // 设置主题色
-  const setPrimaryColor = (color: string) => {
-    primaryColor.value = color;
-    setThemeColorCache(color);
+  // 主题变量（响应式对象）
+  const themeVars = reactive({
+    darkBackground: "#0f0f0f",
+    darkBackground2: "#1a1a1a",
+    darkBackground3: "#242424",
+    darkBackground4: "#2f2f2f",
+    darkBackground5: "#3d3d3d",
+    darkBackground6: "#4a4a4a",
+    darkBackground7: "#606060",
+    darkColor: "#ffffff",
+    darkColor2: "#e0e0e0",
+    darkColor3: "#a0a0a0",
+    colorTheme: currentThemeColor.value.primary,
+  });
 
-    // 检测运行环境，区分处理
-    if (typeof document !== "undefined") {
-      // H5环境
-      document.documentElement.style.setProperty("--primary-color", color);
+  // 计算属性
+  const isDark = computed(() => theme.value === "dark");
 
-      // 设置简单的衍生色（不依赖外部工具函数）
-      document.documentElement.style.setProperty("--primary-color-light", color + "80"); // 添加透明度
-      document.documentElement.style.setProperty("--primary-color-dark", color);
-    } else {
-      // 小程序环境
-      applyThemeToMiniProgram(color);
-    }
+  // 设置导航栏颜色
+  const setNavigationBarColor = () => {
+    uni.setNavigationBarColor({
+      frontColor: theme.value === "light" ? "#000000" : "#ffffff",
+      backgroundColor: theme.value === "light" ? "#ffffff" : "#000000",
+    });
   };
 
-  // 初始化，应用主题色
+  /**
+   * 切换主题
+   * @param mode 指定主题模式，不传则自动切换
+   */
+  const toggleTheme = (mode?: ThemeMode) => {
+    theme.value = mode || (theme.value === "light" ? "dark" : "light");
+    setNavigationBarColor();
+  };
+
+  /**
+   * 设置主题色
+   * @param color 主题色选项
+   */
+  const setCurrentThemeColor = (color: ThemeColorOption) => {
+    currentThemeColor.value = color;
+    themeVars.colorTheme = color.primary;
+    console.log("主题色已设置:", color.name);
+  };
+
+  /**
+   * 初始化主题
+   */
   const initTheme = () => {
-    setPrimaryColor(primaryColor.value);
+    // 更新主题变量中的颜色
+    themeVars.colorTheme = currentThemeColor.value.primary;
+
+    // 设置导航栏颜色
+    nextTick(() => {
+      setNavigationBarColor();
+    });
   };
 
   return {
-    primaryColor,
-    setPrimaryColor,
+    // 状态
+    theme,
+    currentThemeColor,
+    themeVars,
+
+    // 计算属性
+    isDark,
+
+    // 方法
+    toggleTheme,
+    setCurrentThemeColor,
+    setNavigationBarColor,
     initTheme,
   };
 });