uview-pro 0.3.16 → 0.4.2

package/libs/config/theme-tokens.ts

@@ -0,0 +1,101 @@
+import type { Theme, ThemeColor } from '../../types/global';
+
+const lightPalette: ThemeColor = {
+    primary: '#2979ff',
+    primaryDark: '#2b85e4',
+    primaryDisabled: '#a0cfff',
+    primaryLight: '#ecf5ff',
+    success: '#19be6b',
+    successDark: '#18b566',
+    successDisabled: '#71d5a1',
+    successLight: '#dbf1e1',
+    warning: '#ff9900',
+    warningDark: '#f29100',
+    warningDisabled: '#fcbd71',
+    warningLight: '#fdf6ec',
+    error: '#fa3534',
+    errorDark: '#dd6161',
+    errorDisabled: '#fab6b6',
+    errorLight: '#fef0f0',
+    info: '#909399',
+    infoDark: '#82848a',
+    infoDisabled: '#c8c9cc',
+    infoLight: '#f4f4f5',
+    whiteColor: '#ffffff',
+    blackColor: '#000000',
+    mainColor: '#303133',
+    contentColor: '#606266',
+    tipsColor: '#909399',
+    lightColor: '#c0c4cc',
+    borderColor: '#dcdfe6',
+    dividerColor: '#e4e7ed',
+    maskColor: 'rgba(0, 0, 0, 0.4)',
+    shadowColor: 'rgba(0, 0, 0, 0.1)',
+    bgColor: '#f3f4f6',
+    bgWhite: '#ffffff',
+    bgGrayLight: '#f5f7fa',
+    bgGrayDark: '#2f343c',
+    bgBlack: '#000000'
+};
+
+const darkPalette: ThemeColor = {
+    primary: '#8ab4ff',
+    primaryDark: '#5f8dff',
+    primaryDisabled: '#3d4f74',
+    primaryLight: '#1d273f',
+    success: '#4ade80',
+    successDark: '#1f9d57',
+    successDisabled: '#2f4d3d',
+    successLight: '#10291f',
+    warning: '#fbbf24',
+    warningDark: '#c88f00',
+    warningDisabled: '#4a3b17',
+    warningLight: '#2b1f05',
+    error: '#ff6b6b',
+    errorDark: '#d83a3a',
+    errorDisabled: '#4f2323',
+    errorLight: '#2d1414',
+    info: '#a0a7b8',
+    infoDark: '#7c8394',
+    infoDisabled: '#3b3f4c',
+    infoLight: '#1d2029',
+    whiteColor: '#f5f6f7',
+    blackColor: '#f5f6f7',
+    mainColor: '#f5f6f7',
+    contentColor: '#cfd3dc',
+    tipsColor: '#9aa1af',
+    lightColor: '#6b7082',
+    borderColor: '#3a4251',
+    dividerColor: '#3a4251',
+    maskColor: 'rgba(0, 0, 0, 0.6)',
+    shadowColor: 'rgba(0, 0, 0, 0.3)',
+    bgColor: '#111827',
+    bgWhite: '#000000',
+    bgGrayLight: '#1a1a1a',
+    bgGrayDark: '#f5f7fa',
+    bgBlack: '#ffffff'
+};
+
+const lightCss: Record<string, string> = {
+    '--u-background': '#ffffff',
+    '--u-surface': '#f7f8fa',
+    '--u-text': '#303133'
+};
+
+const darkCss: Record<string, string> = {
+    '--u-background': '#0f1115',
+    '--u-surface': '#1c2233',
+    '--u-text': '#f5f6f7'
+};
+
+export const defaultThemes: Theme[] = [
+    {
+        name: 'uviewpro',
+        label: '默认蓝',
+        description: 'uView Pro 默认主题，支持亮色与暗黑模式',
+        color: lightPalette,
+        darkColor: darkPalette,
+        css: lightCss,
+        darkCss: darkCss
+    }
+];

package/libs/css/style.theme.scss

@@ -0,0 +1,31 @@
+:root {
+    color-scheme: light;
+}
+
+:root.u-theme-dark,
+:root[data-u-theme-mode='dark'] {
+    color-scheme: dark;
+}
+
+page {
+    color: $u-main-color;
+    background-color: $u-bg-color;
+    font-size: 28rpx;
+}
+
+page.u-theme-dark,
+:root.u-theme-dark page,
+:root[data-u-theme-mode='dark'] page {
+    background-color: $u-bg-color;
+    color: $u-main-color;
+}
+
+.u-config-provider {
+    color: $u-main-color;
+    background-color: var(--u-bg-white, #ffffff);
+}
+
+.u-config-provider.u-theme-dark {
+    background-color: var(--u-bg-white, #0f1115);
+    color: $u-main-color;
+}

package/libs/css/style.vue.scss

@@ -33,7 +33,7 @@ page {
 }
 
 .u-cell-hover {
-    background-color: #f7f8f9 !important;
+    background-color: $u-bg-gray-light !important;
 }
 /* end--各种hover点击反馈相关的类名--end */
 

package/libs/function/clipboard.ts

@@ -48,7 +48,6 @@ function H5Copy(text: string, config: TClipboardOptions) {
 
 function UniCopy(text: string, config: TClipboardOptions) {
     const opt = Object.assign({ data: text }, config);
-    console.log(opt);
     uni.setClipboardData(opt);
 }
 
@@ -56,17 +55,13 @@ type TClipboardOptions = Omit<UniNamespace.SetClipboardDataOptions, 'data'>;
 
 export function clipboard(content: string, options?: TClipboardOptions) {
     const text = String(content);
-    const showToast = typeof options.showToast === 'boolean' ? options.showToast : true;
-    const copySuccessCb = typeof options.success === 'function' ? options.success : () => {};
-    const copyFailCb = typeof options.success === 'function' ? options.fail : () => {};
-    const copyCompleteCb = typeof options.complete === 'function' ? options.complete : () => {};
-
-    let config: TClipboardOptions = {
-        showToast,
-        success: copySuccessCb,
-        fail: copyFailCb,
-        complete: copyCompleteCb
+    const defaultOpt = {
+        showToast: true,
+        success: () => {},
+        fail: () => {},
+        complete: () => {}
     };
+    const config = Object.assign(defaultOpt, options);
 
     // #ifdef H5
     H5Copy(text, config);

package/libs/function/color.ts

@@ -1,46 +1,77 @@
+import { reactive } from 'vue';
 import type { ColorType, ThemeColor } from '../../types/global';
 
-// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
-const color: ThemeColor = {
+// 默认颜色值（作为初始值）
+const defaultColor: ThemeColor = {
     primary: '#2979ff',
     primaryDark: '#2b85e4',
     primaryDisabled: '#a0cfff',
     primaryLight: '#ecf5ff',
-    bgColor: '#f3f4f6',
-
-    info: '#909399',
-    infoDark: '#82848a',
-    infoDisabled: '#c8c9cc',
-    infoLight: '#f4f4f5',
-
+    success: '#19be6b',
+    successDark: '#18b566',
+    successDisabled: '#71d5a1',
+    successLight: '#dbf1e1',
     warning: '#ff9900',
     warningDark: '#f29100',
     warningDisabled: '#fcbd71',
     warningLight: '#fdf6ec',
-
     error: '#fa3534',
     errorDark: '#dd6161',
     errorDisabled: '#fab6b6',
     errorLight: '#fef0f0',
-
-    success: '#19be6b',
-    successDark: '#18b566',
-    successDisabled: '#71d5a1',
-    successLight: '#dbf1e1',
-
+    info: '#909399',
+    infoDark: '#82848a',
+    infoDisabled: '#c8c9cc',
+    infoLight: '#f4f4f5',
+    whiteColor: '#ffffff',
+    blackColor: '#000000',
     mainColor: '#303133',
     contentColor: '#606266',
     tipsColor: '#909399',
     lightColor: '#c0c4cc',
-    borderColor: '#e4e7ed'
+    borderColor: '#dcdfe6',
+    dividerColor: '#e4e7ed',
+    maskColor: 'rgba(0, 0, 0, 0.4)',
+    shadowColor: 'rgba(0, 0, 0, 0.1)',
+    bgColor: '#f3f4f6',
+    bgWhite: '#ffffff',
+    bgGrayLight: '#f5f7fa',
+    bgGrayDark: '#2f343c',
+    bgBlack: '#000000'
 };
 
-export function getColor(name: ColorType) {
-    // 延迟获取，确保在组件实例化时获取当前主题颜色
-    if (typeof uni !== 'undefined' && uni.$u) {
-        return uni.$u.color[name];
+// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
+// 这个对象会被 configProvider 在主题切换时更新
+export const color = reactive<ThemeColor>({ ...defaultColor });
+
+/**
+ * 获取颜色值（响应式）
+ * 优先从 configProvider 获取当前主题颜色，否则返回默认值
+ * @param name 颜色名称
+ * @returns 颜色值
+ */
+export function getColor(name: ColorType): string {
+    // // 优先从 configProvider 获取当前主题颜色
+    // const currentTheme = configProvider.getCurrentTheme();
+    // if (currentTheme) {
+    //     const isDark = configProvider.isInDarkMode();
+    //     const palette =
+    //         isDark && currentTheme.darkColor && Object.keys(currentTheme.darkColor).length
+    //             ? currentTheme.darkColor
+    //             : currentTheme.color || {};
+
+    //     if (palette[name]) {
+    //         return palette[name] as string;
+    //     }
+    // }
+
+    // 从响应式 color 对象获取（会被 configProvider 更新）
+    if (color[name]) {
+        return color[name] as string;
     }
-    return color[name] || '';
+
+    // 兜底返回默认值
+    return defaultColor[name] || '';
 }
 
 export default color;

package/libs/hooks/index.ts

@@ -1,3 +1,5 @@
 export * from './useEmitter';
 export * from './useRect';
 export * from './useCompRelation';
+export * from './useTheme';
+export * from './useColor';

package/libs/hooks/useColor.ts

@@ -0,0 +1,61 @@
+/**
+ * 响应式颜色管理 composable
+ * 提供响应式的颜色访问，支持主题切换和暗黑模式
+ *
+ * 使用方式：
+ * const { color, getColor } = useColor()
+ * // color 是响应式的，可以直接在模板中使用
+ * // getColor('primary') 返回响应式的颜色值
+ */
+
+import { computed, type ComputedRef } from 'vue';
+import type { ColorType } from '../../types/global';
+import configProvider from '../util/config-provider';
+
+/**
+ * 响应式颜色 composable
+ * 返回响应式的颜色对象和获取颜色的方法
+ */
+export function useColor() {
+    // 从 configProvider 获取当前主题的响应式引用
+    const currentTheme = configProvider.currentThemeRef;
+    const darkModeRef = configProvider.darkModeRef;
+
+    /**
+     * 获取当前激活模式下的颜色对象（响应式）
+     */
+    const color = computed(() => {
+        const theme = currentTheme.value;
+        if (!theme) return {} as Record<ColorType, string>;
+
+        const isDark = configProvider.isInDarkMode();
+        const palette =
+            isDark && theme.darkColor && Object.keys(theme.darkColor).length ? theme.darkColor : theme.color || {};
+
+        // 合并默认值，确保所有颜色都有值
+        const defaultPalette = isDark
+            ? (configProvider as any).baseDarkColorTokens || {}
+            : (configProvider as any).baseColorTokens || {};
+
+        return {
+            ...defaultPalette,
+            ...palette
+        } as Record<ColorType, string>;
+    });
+
+    /**
+     * 获取指定颜色（响应式）
+     * @param name 颜色名称
+     * @returns 颜色值
+     */
+    const getColor = (name: ColorType): ComputedRef<string> => {
+        return computed(() => {
+            return color.value[name] || '';
+        });
+    };
+
+    return {
+        color,
+        getColor
+    };
+}

package/libs/hooks/useTheme.ts

@@ -0,0 +1,162 @@
+/**
+ * 主题管理 composable
+ * 提供主题切换、持久化、CSS 变量注入、暗黑模式等功能
+ *
+ * 使用方式：
+ * const { currentTheme, themes, setTheme, getDarkMode, setDarkMode, isInDarkMode, getAvailableThemes, initTheme } = useTheme()
+ */
+
+import type { DarkMode, Theme } from '../../types/global';
+import configProvider 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 defaultThemeName 可选的默认主题名
+ */
+export function initTheme(themes?: any[], defaultThemeName?: string) {
+    // 如果有传入主题列表，使用传入的
+    if (Array.isArray(themes) && themes.length > 0) {
+        configProvider.init(themes, defaultThemeName);
+        return;
+    }
+
+    // 若已通过插件或其他方式完成初始化，则不再覆盖，最多按需切换默认主题
+    const existingThemes = configProvider.getThemes();
+    if (existingThemes.length > 0) {
+        if (defaultThemeName) {
+            configProvider.setTheme(defaultThemeName);
+        } 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.init(builtin as Theme[], defaultThemeName);
+            return;
+        }
+    } catch (e) {
+        // ignore
+    }
+
+    // 回退到内置默认主题
+    configProvider.init(defaultThemes as Theme[], defaultThemeName);
+}
+
+/**
+ * 获取当前暗黑模式设置
+ */
+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,
+
+        // 主题相关方法
+        setTheme,
+        getCurrentTheme,
+        getAvailableThemes,
+        initTheme,
+
+        // 暗黑模式相关方法
+        getDarkMode,
+        setDarkMode,
+        isInDarkMode,
+        toggleDarkMode
+    };
+}

package/libs/index.ts

@@ -248,7 +248,7 @@ export function kebabCase(word: string): string {
  * 运行时设置主题颜色（就地合并到 reactive 的 $u.color）
  * @param theme Partial<ThemeColor>
  */
-function setTheme(theme: Partial<ThemeColor> | undefined) {
+function setColor(theme: Partial<ThemeColor> | undefined) {
     if (!theme) return;
     try {
         const merged = deepMerge($u.color, theme);
@@ -291,7 +291,7 @@ export {
     config,
     zIndex,
     mitt,
-    setTheme
+    setColor
 };
 
 export const $u = {
@@ -334,7 +334,7 @@ export const $u = {
     addStyle,
     toStyle,
     kebabCase,
-    setTheme
+    setColor
 };
 
 // 颜色相关方法单独导出
@@ -353,3 +353,4 @@ export {
 export * from './hooks';
 
 export * from './util/logger';
+export * from './util/config-provider';