uview-pro 0.4.12 → 0.4.13

package/changelog.md

@@ -1,24 +1,44 @@
-## 0.4.12（2026-01-04）
+## 0.4.13（2026-01-06）
 
-### ♻️ Code Refactoring | 代码重构
+### ✨ Features | 新功能
 
-- **u-action-sheet:** 优化u-action-sheet组件的类型定义 ([bc5e474](https://github.com/anyup/uView-Pro/commit/bc5e474e7117e20495504ff0e2397a147595033c))
-- **zIndex:** 统一组件z-index值配置 ([ae1da98](https://github.com/anyup/uView-Pro/commit/ae1da986d307e5b4855fa32e5b2995fdb7be69e8))
+- **theme:** 主题初始化时支持默认主题设置 ([f2b61f6](https://github.com/anyup/uView-Pro/commit/f2b61f6caa1c285753b2e02f97309aa55bb77cca))
+- **theme:** 增强主题系统初始化配置，支持在初始化时设置默认主题和暗黑模式 ([d228d10](https://github.com/anyup/uView-Pro/commit/d228d100baf619799b1dc1c8e289e1e8c9a30699))
 
 ### 🐛 Bug Fixes | Bug 修复
 
-- **form:** 修复field实例销毁时没有正常移除问题 ([57bfd3b](https://github.com/anyup/uView-Pro/commit/57bfd3bf9315d74c416869cd5a8c41562231166a))
+- **u-number-box:** 修复 u-number-box 步进器 disabled 时字体不显示问题 ([75b3a74](https://github.com/anyup/uView-Pro/commit/75b3a74e6e763dec1a1ee0d3b4d0a62d646ee389))
+- **u-textarea:** 修复u-textarea组件设置props.border='none'无效的问题 ([c5a97ba](https://github.com/anyup/uView-Pro/commit/c5a97ba4c00d226c8c0fd9605660d2654dec9dc2))
 
-### ✨ Features | 新功能
+### ♻️ Code Refactoring | 代码重构
 
-- **u-tabbar:** 新增z-index属性支持自定义层级 ([c75d45f](https://github.com/anyup/uView-Pro/commit/c75d45f45e237453d0248124cdbe5bb797edb117))
-- **u-modal:** 增加u-modal基础属性支持和自定义样式功能 ([201231e](https://github.com/anyup/uView-Pro/commit/201231ee2e0c25c605f12f582650b048e83213de))
-- **components:** 增加u-pagination和u-picker自定义样式支持 ([eb22265](https://github.com/anyup/uView-Pro/commit/eb222657540179fcf8359133df83da89c10b09b8))
+- **theme:** 调整u-bg-gray-light默认色值，优化演示示例 ([37d6bda](https://github.com/anyup/uView-Pro/commit/37d6bda939f5d7c54aec09960878f236dfa32bb2))
 
 ### 👥 Contributors
 
-<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> <a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a> 
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.4.12（2026-01-04）
+
+### ♻️ Code Refactoring | 代码重构
+
+- **u-action-sheet:** 优化u-action-sheet组件的类型定义 ([bc5e474](https://github.com/anyup/uView-Pro/commit/bc5e474e7117e20495504ff0e2397a147595033c))
+- **zIndex:** 统一组件z-index值配置 ([ae1da98](https://github.com/anyup/uView-Pro/commit/ae1da986d307e5b4855fa32e5b2995fdb7be69e8))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **form:** 修复field实例销毁时没有正常移除问题 ([57bfd3b](https://github.com/anyup/uView-Pro/commit/57bfd3bf9315d74c416869cd5a8c41562231166a))
+
+### ✨ Features | 新功能
+
+- **u-tabbar:** 新增z-index属性支持自定义层级 ([c75d45f](https://github.com/anyup/uView-Pro/commit/c75d45f45e237453d0248124cdbe5bb797edb117))
+- **u-modal:** 增加u-modal基础属性支持和自定义样式功能 ([201231e](https://github.com/anyup/uView-Pro/commit/201231ee2e0c25c605f12f582650b048e83213de))
+- **components:** 增加u-pagination和u-picker自定义样式支持 ([eb22265](https://github.com/anyup/uView-Pro/commit/eb222657540179fcf8359133df83da89c10b09b8))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> <a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a> 
+
 ## 0.4.11（2025-12-30）
 
 ### 📦‍ Build System | 打包构建

package/components/u-config-provider/u-config-provider.vue

@@ -13,7 +13,7 @@
  * - 组件/页面场景（推荐）：使用 `useTheme()` 组合式函数在组件内部读取响应式 `currentTheme`、`themes`、`darkMode` 并通过 `setTheme()` 和 `setDarkMode()` 切换主题/模式。
  *
  * 该组件的行为：
- * - 如果在挂载时传入 `themes`，会调用 `configProvider.init(themes)`
+ * - 如果在挂载时传入 `themes`，会调用 `configProvider.initTheme(themes)`
  * - 如果传入 `currentTheme`，会优先设置当前主题
  * - 如果传入 `darkMode`，会设置当前的暗黑模式状态，同时在 document 上添加 `u-theme-dark` 或 `u-theme-light` 类名
  *
@@ -63,7 +63,7 @@ const bootstrapTheme = () => {
 
     // 未初始化，进行初始化
     if (props.themes && props.themes.length) {
-        configProvider.init(props.themes, props.currentTheme as any);
+        configProvider.initTheme(props.themes, props.currentTheme as any);
     } else {
         // 使用 useTheme 的 initTheme，它会处理默认主题
         const { initTheme } = useTheme();
@@ -91,7 +91,7 @@ watch(
         // 那么对其做深度监听会在我们内部更新主题对象时触发该回调，进而再次调用 init 导致循环更新。
         // 为避免该情况，先做简单保护：当传入对象正是 configProvider.themesRef.value 时不重复初始化。
         if (val && val.length && val !== configProvider.themesRef.value) {
-            configProvider.init(val, props.currentTheme as any);
+            configProvider.initTheme(val, props.currentTheme as any);
         }
     },
     { deep: true }

package/components/u-number-box/u-number-box.vue

@@ -310,12 +310,12 @@ function handleChange(value: number, type: 'update:modelValue' | 'change' | 'blu
 }
 
 .u-icon-disabled {
-    color: var(--u-bg-gray-light) !important;
+    color: var(--u-type-info-disabled) !important;
     background: var(--u-bg-gray-light) !important;
 }
 
 .u-input-disabled {
-    color: var(--u-bg-gray-light) !important;
+    color: var(--u-type-info-disabled) !important;
     background-color: var(--u-bg-gray-light) !important;
 }
 </style>

package/components/u-textarea/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import { baseProps } from '../common/props';
+import type { TextareaBorder } from '../../types/global';
 
 const textarea = {
     value: '',
@@ -72,7 +73,7 @@ export const TextareaProps = {
     // 最大输入长度，设置为 -1 的时候不限制最大长度
     maxlength: { type: [String, Number] as PropType<string | number>, default: textarea.maxlength },
     // 边框类型，surround-四周边框，bottom-底部边框
-    border: { type: [String, Boolean] as PropType<string | boolean>, default: textarea.border },
+    border: { type: [String, Boolean] as PropType<TextareaBorder | boolean>, default: textarea.border },
     // 用于处理或者过滤输入框内容的方法
     formatter: { type: Function as PropType<((val: any) => any) | null>, default: textarea.formatter },
     // 是否忽略组件内对文本合成系统事件的处理

package/components/u-textarea/u-textarea.vue

@@ -165,7 +165,7 @@ watch(
 // 组件的类名
 const textareaClass = computed(() => {
     let classes: string[] = [];
-    if (props.border) {
+    if (props.border && props.border !== 'none') {
         if (props.border === 'surround') {
             classes = classes.concat(['u-textarea--border', 'u-textarea--radius']);
         } else if (props.border === 'bottom') {
@@ -181,7 +181,7 @@ const textareaClass = computed(() => {
 // 组件的样式
 const textareaStyle = computed(() => {
     const style: Record<string, any> = {};
-    if (props.border) {
+    if (props.border && props.border !== 'none') {
         style.padding = `${props.border ? 20 : 0}rpx`;
     }
     // #ifdef APP-NVUE

package/index.ts

@@ -17,14 +17,19 @@ const install = (app: any, options?: UViewProOptions): void => {
     try {
         if (options) {
             // 配置主题：统一使用 useTheme 的 initTheme 初始化，避免重复初始化
-            if (options.theme) {
-                // 如果是数组，则为多主题配置
-                // 直接使用 useTheme 的 initTheme，它会智能处理重复初始化
-                if (Array.isArray(options.theme)) {
-                    initTheme(options.theme);
+            if (options?.theme) {
+                const optTheme = options.theme as any;
+                // 1.如果是数组，则为多主题配置
+                if (Array.isArray(optTheme)) {
+                    initTheme(optTheme);
+                } else if (typeof optTheme === 'object' && optTheme.themes) {
+                    // 2.如果为对象且有themes，则为多主题配置+设置默认主题
+                    initTheme(optTheme.themes, {
+                        defaultTheme: optTheme.defaultTheme,
+                        defaultDarkMode: optTheme.defaultDarkMode
+                    });
                 } else {
-                    // 兼容之前只有一套样式的情况,需要覆盖默认主题
-                    // 获取默认主题（uviewpro）
+                    // 3.兼容之前只有一套样式的情况,需要覆盖默认主题，默认系统主题（uviewpro）
                     const defaultTheme = defaultThemes[0];
                     if (defaultTheme) {
                         // 创建新主题对象，用用户的 theme 覆盖默认主题的 color
@@ -32,7 +37,7 @@ const install = (app: any, options?: UViewProOptions): void => {
                             ...defaultTheme,
                             color: {
                                 ...defaultTheme.color,
-                                ...options.theme
+                                ...optTheme
                             }
                         };
                         // 初始化主题（只包含覆盖后的默认主题）

package/libs/config/config.ts

@@ -1,8 +1,7 @@
-// 此版本发布于2023-03-27
 /**
  * 组件库配置项类型定义
  */
-
+import { reactive } from 'vue';
 import { version } from '../../package.json';
 import type { DarkMode } from '../../types/global';
 
@@ -19,9 +18,7 @@ export interface AppConfig {
     defaultDarkMode: DarkMode;
 }
 
-// const version: string = '1.8.8';
-
-const config: AppConfig = {
+export const config = reactive<AppConfig>({
     v: version,
     version: version,
     // 主题名称
@@ -30,6 +27,6 @@ const config: AppConfig = {
     defaultTheme: 'uviewpro',
     // 默认为亮色模式
     defaultDarkMode: 'light'
-};
+});
 
 export default config;

package/libs/config/theme-tokens.ts

@@ -34,7 +34,7 @@ export const lightPalette: ThemeColor = {
     shadowColor: 'rgba(0, 0, 0, 0.1)',
     bgColor: '#f3f4f6',
     bgWhite: '#ffffff',
-    bgGrayLight: '#f5f7fa',
+    bgGrayLight: '#f1f1f1',
     bgGrayDark: '#2f343c',
     bgBlack: '#000000'
 };

package/libs/hooks/useTheme.ts

@@ -7,7 +7,7 @@
  */
 
 import type { DarkMode, Theme } from '../../types/global';
-import configProvider from '../util/config-provider';
+import configProvider, { type DefaultThemeConfig } from '../util/config-provider';
 import { defaultThemes } from '../config/theme-tokens';
 
 const THEME_STORAGE_KEY = 'uview-pro-theme';
@@ -64,42 +64,44 @@ function getAvailableThemes() {
 /**
  * 初始化主题系统
  * @param themes 可选的主题列表，如果未提供则尝试从 uni.$u.themes 读取
- * @param defaultThemeName 可选的默认主题名
+ * @param defaultConfig 可选的默认主题配置，支持字符串（默认主题名）或对象（{ defaultTheme?, defaultDarkMode? }）
  */
-export function initTheme(themes?: any[], defaultThemeName?: string) {
+export function initTheme(themes?: Theme[], defaultConfig?: string | DefaultThemeConfig) {
     // 如果有传入主题列表，使用传入的
     if (Array.isArray(themes) && themes.length > 0) {
-        configProvider.init(themes, defaultThemeName);
+        configProvider.initTheme(themes, defaultConfig);
         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
-    }
+    // // 若已通过插件或其他方式完成初始化，则不再覆盖，最多按需切换默认主题
+    // 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.init(defaultThemes as Theme[], defaultThemeName);
+    configProvider.initTheme(defaultThemes as Theme[], defaultConfig);
 }
 
 /**

package/libs/util/config-provider.ts

@@ -33,6 +33,17 @@ const STRUCTURAL_TOKENS = new Set([
     'shadowColor'
 ]);
 
+export type DefaultThemeConfig = {
+    /**
+     * 默认主题
+     */
+    defaultTheme?: string;
+    /**
+     * 默认暗黑模式
+     */
+    defaultDarkMode?: DarkMode;
+};
+
 /**
  * ConfigProvider: 管理全局主题
  * - init(themes, defaultName): 初始化主题系统
@@ -141,28 +152,39 @@ export class ConfigProvider {
     /**
      * 初始化主题系统
      * @param themes 可用主题数组
-     * @param defaultThemeName 可选默认主题名
+     * @param defaultTheme 可选默认主题名
      */
-    init(themes?: Theme[], defaultThemeName?: string) {
+    initTheme(themes?: Theme[], defaultConfig?: string | DefaultThemeConfig) {
         const normalizedThemes = this.normalizeThemes(themes);
         if (!normalizedThemes.length) {
             console.warn('[ConfigProvider] init called with empty themes');
             return;
         }
 
+        // 配置默认主题
+        if (defaultConfig) {
+            if (typeof defaultConfig === 'string') {
+                config.defaultTheme = defaultConfig || config.defaultTheme;
+            } else if (typeof defaultConfig === 'object') {
+                const { defaultTheme, defaultDarkMode } = defaultConfig;
+                config.defaultTheme = defaultTheme || config.defaultTheme;
+                config.defaultDarkMode = defaultDarkMode || config.defaultDarkMode;
+            }
+        }
+
+        // 设置主题列表，响应式
         this.themesRef.value = normalizedThemes.slice();
 
         // 先尝试从 Storage 读取已保存主题名
         const saved = this.readStorage<string>(THEME_STORAGE_KEY);
-
-        let initialName = saved || defaultThemeName || this.themesRef.value[0].name;
+        let initialName = saved || config.defaultTheme || this.themesRef.value[0].name;
         const found = this.themesRef.value.find(t => t.name === initialName) || this.themesRef.value[0];
 
+        // 设置当前主题，响应式
         this.currentThemeRef.value = found;
 
-        // 尝试从 Storage 读取暗黑模式设置
-        const savedDarkMode = this.readStorage<DarkMode>(DARK_MODE_STORAGE_KEY);
-        this.darkModeRef.value = savedDarkMode || config.defaultDarkMode;
+        // 初始化暗黑模式设置
+        this.initDarkMode(config.defaultDarkMode);
 
         // 应用主题
         this.applyTheme(found);
@@ -173,6 +195,16 @@ export class ConfigProvider {
         return this;
     }
 
+    /**
+     * 初始化暗黑模式设置
+     * @param darkMode
+     */
+    initDarkMode(darkMode?: DarkMode) {
+        // 尝试从 Storage 读取暗黑模式设置
+        const savedDarkMode = this.readStorage<DarkMode>(DARK_MODE_STORAGE_KEY);
+        this.darkModeRef.value = savedDarkMode || darkMode || config.defaultDarkMode;
+    }
+
     /**
      * 获取所有可用主题
      */

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式",
-    "version": "0.4.12",
+    "version": "0.4.13",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题与暗黑模式，支持H5/APP/鸿蒙/小程序等多端开发。已在华为鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",

package/theme.scss

@@ -25,7 +25,7 @@ page {
     /* 背景色 */
     --u-bg-color: #f3f4f6;
     --u-bg-white: #ffffff;
-    --u-bg-gray-light: #f5f7fa;
+    --u-bg-gray-light: #f1f1f1;
     --u-bg-gray-dark: #2f343c;
     --u-bg-black: #000000;
 

package/types/global.d.ts

@@ -160,6 +160,8 @@ export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done';
 
 export type InputLabelPosition = 'left' | 'top';
 
+export type TextareaBorder = 'surround' | 'none' | 'bottom';
+
 export type FormErrorType = 'message' | 'border' | 'border-bottom' | 'none' | 'toast';
 
 export type IconLabelPosition = 'left' | 'top' | 'right' | 'bottom';
@@ -372,6 +374,12 @@ export type Theme = {
     darkCss?: Record<string, string>;
 };
 
+export type Themes = {
+    themes: Theme[];
+    defaultTheme?: string;
+    defaultDarkMode?: DarkMode;
+};
+
 export type LogConfig = Partial<{
     debug?: boolean;
     prefix?: string;
@@ -379,7 +387,7 @@ export type LogConfig = Partial<{
 }>;
 
 export interface UViewProOptions {
-    theme?: ThemeColor | Theme[];
+    theme?: ThemeColor | Theme[] | Themes;
     log?: LogConfig;
     // 可扩展更多配置项
 }