看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,173 @@
+/**
+ * 主题管理 composable
+ * 提供主题切换、持久化、CSS 变量注入、暗黑模式等功能
+ *
+ * 使用方式：
+ * const { currentTheme, themes, setTheme, getDarkMode, setDarkMode, isInDarkMode, getAvailableThemes, initTheme } = useTheme()
+ */
+
+import type { DarkMode, Theme } from '../../types/global';
+import configProvider, { type DefaultThemeConfig } from '../util/config-provider';
+import { defaultThemes } from '../config/theme-tokens';
+
+const THEME_STORAGE_KEY = 'uview-pro-theme';
+const DARK_MODE_STORAGE_KEY = 'uview-pro-dark-mode';
+const themesRef = configProvider.themesRef;
+const currentTheme = configProvider.currentThemeRef;
+const darkModeRef = configProvider.darkModeRef;
+
+/**
+ * 保存主题到 Storage
+ */
+function saveThemeToStorage(themeName: string) {
+    try {
+        uni.setStorageSync(THEME_STORAGE_KEY, themeName);
+    } catch (e) {
+        console.warn('[useTheme] failed to write storage', e);
+    }
+}
+
+/**
+ * 保存暗黑模式设置到 Storage
+ */
+function saveDarkModeToStorage(mode: DarkMode) {
+    try {
+        uni.setStorageSync(DARK_MODE_STORAGE_KEY, mode);
+    } catch (e) {
+        console.warn('[useTheme] failed to write storage', e);
+    }
+}
+
+/**
+ * 设置主题
+ */
+function setTheme(themeName: string) {
+    configProvider.setTheme(themeName);
+    currentTheme.value = configProvider.getCurrentTheme();
+    saveThemeToStorage(themeName);
+}
+
+/**
+ * 获取当前主题
+ */
+function getCurrentTheme(): Theme | null {
+    return currentTheme.value || configProvider.getCurrentTheme();
+}
+
+/**
+ * 获取所有可用主题
+ */
+function getAvailableThemes() {
+    return configProvider.getThemes();
+}
+
+/**
+ * 初始化主题系统
+ * @param themes 可选的主题列表，如果未提供则尝试从 uni.$u.themes 读取
+ * @param defaultConfig 可选的默认主题配置，支持字符串（默认主题名）或对象（{ defaultTheme?, defaultDarkMode? }）
+ */
+export function initTheme(themes?: Theme[], defaultConfig?: string | DefaultThemeConfig, isForce?: boolean) {
+    // 如果有传入主题列表，使用传入的
+    if (Array.isArray(themes) && themes.length > 0) {
+        configProvider.initTheme(themes, defaultConfig, isForce);
+        return;
+    }
+
+    // // 若已通过插件或其他方式完成初始化，则不再覆盖，最多按需切换默认主题
+    // const existingThemes = configProvider.getThemes();
+    // if (existingThemes.length > 0) {
+    //     if (typeof defaultConfig === 'string') {
+    //         configProvider.setTheme(defaultConfig);
+    //     } else if (defaultConfig && typeof defaultConfig === 'object' && (defaultConfig as any).defaultTheme) {
+    //         configProvider.setTheme(defaultConfig.defaultTheme);
+    //     } else if (!configProvider.getCurrentTheme()) {
+    //         configProvider.setTheme(existingThemes[0].name);
+    //     } else {
+    //         // 触发一次 apply，便于初始化 CSS 变量
+    //         configProvider.setTheme(configProvider.getCurrentTheme()!.name);
+    //     }
+    //     return;
+    // }
+
+    // // 初始化 configProvider（如果运行时提供了内置主题）
+    // try {
+    //     const builtin = (typeof uni !== 'undefined' && (uni as any).$u && (uni as any).$u.themes) || [];
+    //     if (Array.isArray(builtin) && builtin.length > 0) {
+    //         configProvider.initTheme(builtin as Theme[], defaultConfig);
+    //         return;
+    //     }
+    // } catch (e) {
+    //     // ignore
+    // }
+
+    // 回退到内置默认主题
+    configProvider.initTheme(defaultThemes as Theme[], defaultConfig);
+}
+
+/**
+ * 初始化暗黑模式
+ * @param darkMode 暗黑模式设置
+ * @param isForce 是否强制初始化
+ */
+function initDarkMode(darkMode?: DarkMode, isForce?: boolean) {
+    configProvider.initDarkMode(darkMode, isForce);
+}
+/**
+ * 获取当前暗黑模式设置
+ */
+function getDarkMode(): DarkMode {
+    return configProvider.getDarkMode();
+}
+
+/**
+ * 设置暗黑模式
+ * @param mode 'auto' (跟随系统) | 'light' (强制亮色) | 'dark' (强制暗黑)
+ */
+function setDarkMode(mode: DarkMode) {
+    configProvider.setDarkMode(mode);
+    darkModeRef.value = mode;
+    saveDarkModeToStorage(mode);
+}
+
+/**
+ * 检查当前是否处于暗黑模式
+ */
+function isInDarkMode(): boolean {
+    return configProvider.isInDarkMode();
+}
+
+/**
+ * 切换暗黑模式（在当前模式的基础上切换）
+ */
+function toggleDarkMode() {
+    const current = getDarkMode();
+    const nextMode = current === 'dark' ? 'light' : 'dark';
+    setDarkMode(nextMode);
+}
+
+/**
+ * 使用主题的 composable
+ * 返回所有主题相关的响应式引用和方法
+ */
+export function useTheme() {
+    return {
+        // 响应式引用
+        currentTheme,
+        themes: themesRef,
+        darkMode: darkModeRef,
+        cssVars: configProvider.cssVarsRef,
+
+        // 主题相关方法
+        initTheme,
+        setTheme,
+        getCurrentTheme,
+        getAvailableThemes,
+
+        // 暗黑模式相关方法
+        initDarkMode,
+        getDarkMode,
+        setDarkMode,
+        isInDarkMode,
+        toggleDarkMode
+    };
+}