uview-pro 0.4.9 → 0.4.11

package/changelog.md

@@ -1,27 +1,61 @@
-## 0.4.9（2025-12-24）
+## 0.4.11（2025-12-30）
 
-### 📝 Documentation | 文档
+### 📦‍ Build System | 打包构建
 
-- **readme:** 修复捐赠页面链接 ([93323ab](https://github.com/anyup/uView-Pro/commit/93323ab414ddc5a4542604928f221a050cbe55c5))
+- 添加edgeone.json配置 ([ed7ba7d](https://github.com/anyup/uView-Pro/commit/ed7ba7d94dbfa791264a624a03938dc6ac58c0bb))
 
-### ✨ Features | 新功能
+### 🐛 Bug Fixes | Bug 修复
 
-- **request:** 增强http请求工具，添加请求超时配置和全局配置合并功能 ([54d4a44](https://github.com/anyup/uView-Pro/commit/54d4a448a82d76889524cc2ad0f8f08b758b73fb))
-- **http:** 修改http请求实例和响应拦截器 ([d566496](https://github.com/anyup/uView-Pro/commit/d56649673103b519492033504aa387cd6d037721))
-- **source:** 添加静态资源文件 ([346bce6](https://github.com/anyup/uView-Pro/commit/346bce63126c4cb2c9db1f1665568eb11e26be07))
-- **pages:** 优化多个页面演示样式，统一布局和暗黑模式 ([da68f17](https://github.com/anyup/uView-Pro/commit/da68f17ddf3018f7f5d53a7eebfb3dc1bad550ab))
-- **i18n:** 完善国际化支持文案 ([68accbd](https://github.com/anyup/uView-Pro/commit/68accbd1d864f190e510de380d4ed8d603f8676b))
-- **pages:** 更新iconfont图标 ([bafd4af](https://github.com/anyup/uView-Pro/commit/bafd4af26f6d2ca4dbe6e818b31be84f57c787b0))
-- **demo-page:** 调整演示页面样式并添加tabbar支持 ([f4c5cfc](https://github.com/anyup/uView-Pro/commit/f4c5cfc70920b50602f226220ded4690279cb331))
-
-### 🚀 Chore | 构建/工程依赖/工具
-
-- **harmony:** 添加调试配置并调整harmony兼容版本 ([bd18fd2](https://github.com/anyup/uView-Pro/commit/bd18fd234bf0aec9671663f5b26294b4622bae81))
+- **theme:** 修复运行时设置 color 与 theme 主题色不同步问题 ([1dcf56a](https://github.com/anyup/uView-Pro/commit/1dcf56a232f5b046e0dce5eb58ec90fb46ce19d5))
+- **u-top-tips:** 修复顶部提示组件zindex显示问题，避免影响其他组件的层级显示 ([91391a8](https://github.com/anyup/uView-Pro/commit/91391a8ca10d505936c0b45488af0a3145cab335))
 
 ### 👥 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> 
 
+## 0.4.10（2025-12-26）
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- **contributors:** 更新贡献者映射配置 ([d496b21](https://github.com/anyup/uView-Pro/commit/d496b21d85bede68fefc9ffd752e31ecde14735a))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-popup:** 修复u-popup设置mode=center，点击遮罩层无法关闭的问题 ([3896019](https://github.com/anyup/uView-Pro/commit/389601965933d9e1dc74d32c370c4e858df86595))
+- **u-upload:** 优化u-upload组件在多个平台的样式兼容性 ([bfb60b5](https://github.com/anyup/uView-Pro/commit/bfb60b5c2f431d14425eceed9c9e5c248e7cfa29))
+
+### ✨ Features | 新功能
+
+- **u-tabbar:** 增强u-tabbar组件能力，支持文字和图标显示隐藏配置功能 ([29f3394](https://github.com/anyup/uView-Pro/commit/29f3394d7e8a5e2a818e397ffe97420855970333))
+
+### 👥 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> 
+
+## 0.4.9（2025-12-24）
+
+### 📝 Documentation | 文档
+
+- **readme:** 修复捐赠页面链接 ([93323ab](https://github.com/anyup/uView-Pro/commit/93323ab414ddc5a4542604928f221a050cbe55c5))
+
+### ✨ Features | 新功能
+
+- **request:** 增强http请求工具，添加请求超时配置和全局配置合并功能 ([54d4a44](https://github.com/anyup/uView-Pro/commit/54d4a448a82d76889524cc2ad0f8f08b758b73fb))
+- **http:** 修改http请求实例和响应拦截器 ([d566496](https://github.com/anyup/uView-Pro/commit/d56649673103b519492033504aa387cd6d037721))
+- **source:** 添加静态资源文件 ([346bce6](https://github.com/anyup/uView-Pro/commit/346bce63126c4cb2c9db1f1665568eb11e26be07))
+- **pages:** 优化多个页面演示样式，统一布局和暗黑模式 ([da68f17](https://github.com/anyup/uView-Pro/commit/da68f17ddf3018f7f5d53a7eebfb3dc1bad550ab))
+- **i18n:** 完善国际化支持文案 ([68accbd](https://github.com/anyup/uView-Pro/commit/68accbd1d864f190e510de380d4ed8d603f8676b))
+- **pages:** 更新iconfont图标 ([bafd4af](https://github.com/anyup/uView-Pro/commit/bafd4af26f6d2ca4dbe6e818b31be84f57c787b0))
+- **demo-page:** 调整演示页面样式并添加tabbar支持 ([f4c5cfc](https://github.com/anyup/uView-Pro/commit/f4c5cfc70920b50602f226220ded4690279cb331))
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- **harmony:** 添加调试配置并调整harmony兼容版本 ([bd18fd2](https://github.com/anyup/uView-Pro/commit/bd18fd234bf0aec9671663f5b26294b4622bae81))
+
+### 👥 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> 
+
 ## 0.4.8（2025-12-23）
 
 ### 🐛 Bug Fixes | Bug 修复
@@ -36,7 +70,7 @@
 
 ### 👥 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/lime"><img src="https://github.com/lime.png?size=40" width="40" height="40" alt="lime" title="lime"/></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> <a href="https://github.com/limes-cloud"><img src="https://github.com/limes-cloud.png?size=40" width="40" height="40" alt="limes-cloud" title="limes-cloud"/></a> 
 
 ## 0.4.7（2025-12-19）
 

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

@@ -87,7 +87,10 @@ onMounted(() => {
 watch(
     () => props.themes,
     val => {
-        if (val && val.length) {
+        // 如果传入的 themes 来自于 configProvider 自身（常见于模板中使用 useTheme() 直接透传），
+        // 那么对其做深度监听会在我们内部更新主题对象时触发该回调，进而再次调用 init 导致循环更新。
+        // 为避免该情况，先做简单保护：当传入对象正是 configProvider.themesRef.value 时不重复初始化。
+        if (val && val.length && val !== configProvider.themesRef.value) {
             configProvider.init(val, props.currentTheme as any);
         }
     },

package/components/u-popup/u-popup.vue

@@ -24,7 +24,6 @@
                 zoom && mode == 'center' ? 'u-animation-zoom' : ''
             ]"
             @touchmove.stop.prevent
-            @tap.stop.prevent
             :style="[style]"
         >
             <view

package/components/u-tabbar/types.ts

@@ -20,6 +20,8 @@ export const TabbarProps = {
     iconSize: { type: [String, Number] as PropType<string | number>, default: 40 },
     /** 凸起图标的大小，单位任意，数值默认rpx */
     midButtonSize: { type: [String, Number] as PropType<string | number>, default: 90 },
+    /** 文本大小，单位任意，数值默认rpx */
+    textSize: { type: [String, Number] as PropType<string | number>, default: 26 },
     /** 激活时的颜色 */
     activeColor: { type: String, default: 'var(--u-main-color)' },
     /** 未激活时的颜色 */

package/components/u-tabbar/u-tabbar.vue

@@ -20,14 +20,18 @@
                 :style="{ backgroundColor: props.bgColor }"
             >
                 <view
+                    v-if="item.iconPath || item.selectedIconPath"
                     :class="[
                         props.midButton && item.midButton
                             ? 'u-tabbar__content__circle__button'
-                            : 'u-tabbar__content__item__button'
+                            : 'u-tabbar__content__item__button',
+                        !item.text && (item.iconPath || item.selectedIconPath)
+                            ? 'u-tabbar__content__item__button--center'
+                            : ''
                     ]"
                 >
                     <u-icon
-                        :size="props.midButton && item.midButton ? props.midButtonSize : props.iconSize"
+                        :size="getIconSize(index)"
                         :name="elIconPath(index)"
                         img-mode="scaleToFill"
                         :color="elColor(index)"
@@ -40,7 +44,14 @@
                         :offset="[-2, getOffsetRight(item.count, item.isDot)]"
                     ></u-badge>
                 </view>
-                <view class="u-tabbar__content__item__text" :style="{ color: elColor(index) }">
+                <view
+                    v-if="item.text"
+                    class="u-tabbar__content__item__text"
+                    :class="{
+                        'u-tabbar__content__item__text--center': item.text && !(item.iconPath || item.selectedIconPath)
+                    }"
+                    :style="{ color: elColor(index), fontSize: $u.addUnit(getTextSize(index)) }"
+                >
                     <text class="u-line-1">{{ item.text }}</text>
                 </view>
             </view>
@@ -240,6 +251,31 @@ function getOffsetRight(count: number, isDot: boolean): number {
     }
 }
 
+/**
+ * 获取单项icon尺寸（单项优先级高于props）
+ */
+function getIconSize(index: number) {
+    const item = props.list[index] || {};
+    if (props.midButton && item.midButton) {
+        return props.midButtonSize;
+    }
+    if (item.iconSize !== undefined && item.iconSize !== null && item.iconSize !== '') {
+        return item.iconSize;
+    }
+    return props.iconSize;
+}
+
+/**
+ * 获取单项text尺寸（单项优先级高于props）
+ */
+function getTextSize(index: number) {
+    const item = props.list[index] || {};
+    if (item.textSize !== undefined && item.textSize !== null && item.textSize !== '') {
+        return item.textSize;
+    }
+    return props.textSize;
+}
+
 /**
  * 获取凸起按钮外层元素的left值，让其水平居中
  */
@@ -302,6 +338,10 @@ function getMidButtonLeft() {
                 left: 50%;
                 transform: translateX(-50%);
             }
+            &__button--center {
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
             &__text {
                 color: $u-content-color;
                 font-size: 26rpx;
@@ -313,6 +353,11 @@ function getMidButtonLeft() {
                 width: 100%;
                 text-align: center;
             }
+            &__text--center {
+                top: 50%;
+                bottom: auto;
+                transform: translate(-50%, -50%);
+            }
         }
         &__circle {
             position: relative;

package/components/u-top-tips/u-top-tips.vue

@@ -61,7 +61,7 @@ const uNavbarHeight = computed(() => {
 
 const tipStyle = computed(() => ({
     top: Number(uNavbarHeight.value) + 'px',
-    zIndex: uZIndex.value
+    zIndex: isShow.value ? uZIndex.value : -1
 }));
 
 /**

package/components/u-upload/u-upload.vue

@@ -18,15 +18,16 @@
                     background: delBgColor
                 }"
             >
-                <u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
+                <u-icon :name="delIcon" size="20" :color="delColor"></u-icon>
+            </view>
+            <view class="u-upload-progress">
+                <u-line-progress
+                    v-if="showProgress && item.progress > 0 && item.progress != 100 && !item.error"
+                    :show-percent="false"
+                    height="16"
+                    :percent="item.progress"
+                ></u-line-progress>
             </view>
-            <u-line-progress
-                v-if="showProgress && item.progress > 0 && item.progress != 100 && !item.error"
-                :show-percent="false"
-                height="16"
-                class="u-progress"
-                :percent="item.progress"
-            ></u-line-progress>
             <view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
             <image
                 @tap.stop="doPreviewImage(item.url || item.path, index)"
@@ -539,13 +540,7 @@ defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImag
     justify-content: center;
 }
 
-.u-icon {
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.u-progress {
+.u-upload-progress {
     position: absolute;
     bottom: 10rpx;
     left: 8rpx;

package/libs/config/color.ts

@@ -0,0 +1,9 @@
+import { reactive } from 'vue';
+import { lightPalette } from './theme-tokens';
+import type { ThemeColor } from '../../types/global';
+
+// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
+// 这个对象会被 configProvider 在主题切换时更新
+export const color = reactive<ThemeColor>({ ...lightPalette });
+
+export default color;

package/libs/config/theme-tokens.ts

@@ -1,7 +1,7 @@
 import type { Theme, ThemeColor } from '../../types/global';
 import config from './config';
 
-const lightPalette: ThemeColor = {
+export const lightPalette: ThemeColor = {
     primary: '#2979ff',
     primaryDark: '#2b85e4',
     primaryDisabled: '#a0cfff',
@@ -39,7 +39,7 @@ const lightPalette: ThemeColor = {
     bgBlack: '#000000'
 };
 
-const darkPalette: ThemeColor = {
+export const darkPalette: ThemeColor = {
     primary: '#8ab4ff',
     primaryDark: '#5f8dff',
     primaryDisabled: '#3d4f74',

package/libs/function/color.ts

@@ -1,48 +1,7 @@
-import { reactive } from 'vue';
 import type { ColorType, ThemeColor } from '../../types/global';
-
-// 默认颜色值（作为初始值）
-const defaultColor: 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'
-};
-
-// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
-// 这个对象会被 configProvider 在主题切换时更新
-export const color = reactive<ThemeColor>({ ...defaultColor });
+import { color } from '../config/color';
+import { lightPalette } from '../config/theme-tokens';
+import configProvider from '../util/config-provider';
 
 /**
  * 获取颜色值（响应式）
@@ -51,27 +10,17 @@ export const color = reactive<ThemeColor>({ ...defaultColor });
  * @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 defaultColor[name] || '';
+    return lightPalette[name] || '';
+}
+
+export function setColor(theme: Partial<ThemeColor> | undefined) {
+    configProvider.setThemeColor(theme);
 }
 
 export default color;

package/libs/index.ts

@@ -11,9 +11,8 @@ import colorGradients from './function/colorGradient';
 // 生成全局唯一guid字符串
 import guid from './function/guid';
 // 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
-import color from './function/color';
-import { getColor } from './function/color';
-import type { ThemeColor } from '../types/global';
+import { color } from './config/color';
+import { getColor, setColor } from './function/color';
 // 根据type获取图标名称
 import type2icon from './function/type2icon';
 // 打乱数组的顺序
@@ -244,25 +243,6 @@ export function kebabCase(word: string): string {
     return newWord;
 }
 
-/**
- * 运行时设置主题颜色（就地合并到 reactive 的 $u.color）
- * @param theme Partial<ThemeColor>
- */
-function setColor(theme: Partial<ThemeColor> | undefined) {
-    if (!theme) return;
-    try {
-        const merged = deepMerge($u.color, theme);
-        Object.keys(merged).forEach(k => {
-            $u.color[k] = (merged as any)[k];
-        });
-    } catch (e) {
-        // 兜底：直接 assign
-        Object.keys(theme).forEach(k => {
-            $u.color[k] = (theme as any)[k];
-        });
-    }
-}
-
 export {
     queryParams,
     route,
@@ -271,6 +251,7 @@ export {
     guid,
     color,
     getColor,
+    setColor,
     sys,
     os,
     type2icon,
@@ -290,8 +271,7 @@ export {
     clipboard,
     config,
     zIndex,
-    mitt,
-    setColor
+    mitt
 };
 
 export const $u = {
@@ -305,6 +285,7 @@ export const $u = {
     guid,
     color,
     getColor,
+    setColor,
     sys,
     os,
     type2icon,
@@ -333,8 +314,7 @@ export const $u = {
     formatName,
     addStyle,
     toStyle,
-    kebabCase,
-    setColor
+    kebabCase
 };
 
 // 颜色相关方法单独导出

package/libs/util/config-provider.ts

@@ -4,9 +4,9 @@
 
 import { ref } from 'vue';
 import type { DarkMode, Theme, ThemeColor } from '../../types/global';
-import { config, setColor } from '..';
+import config from '../config/config';
 import { defaultThemes } from '../config/theme-tokens';
-import { color as reactiveColor } from '../function/color';
+import { color as reactiveColor } from '../config/color';
 import { getSystemDarkMode as getNativeSystemDarkMode } from './system-theme';
 
 declare const uni: any;
@@ -213,6 +213,39 @@ export class ConfigProvider {
         if (this.debug) console.log('[ConfigProvider] setTheme ->', themeName);
     }
 
+    /**
+     * 运行时更新当前主题颜色并应用（不持久化）
+     * @param colors 主题颜色键值，支持部分更新
+     */
+    public setThemeColor(colors: Partial<ThemeColor>) {
+        if (!colors || Object.keys(colors).length === 0) return;
+        if (!this.currentThemeRef.value) {
+            console.warn('[ConfigProvider] setThemeColor called but no current theme');
+            return;
+        }
+
+        const mode = this.getActiveMode();
+
+        if (mode === 'dark') {
+            const existing = this.currentThemeRef.value.darkColor || {};
+            this.currentThemeRef.value.darkColor = {
+                ...existing,
+                ...colors
+            };
+        } else {
+            const existing = this.currentThemeRef.value.color || {};
+            this.currentThemeRef.value.color = {
+                ...existing,
+                ...colors
+            };
+        }
+
+        // 重新应用当前主题以同步运行时 color、CSS 变量等
+        this.applyTheme(this.currentThemeRef.value);
+
+        if (this.debug) console.log('[ConfigProvider] setThemeColor ->', colors);
+    }
+
     /**
      * 获取当前暗黑模式设置
      */
@@ -406,10 +439,8 @@ export class ConfigProvider {
             });
 
             // 同步到 uni.$u.color（如果存在）
-            if (typeof uni !== 'undefined' && uni?.$u?.setColor) {
-                uni.$u.setColor(mergedPalette);
-            } else {
-                setColor(mergedPalette);
+            if (typeof uni !== 'undefined' && uni?.$u?.color) {
+                uni.$u.color = reactiveColor;
             }
         } catch (e) {
             if (this.debug) console.warn('[ConfigProvider] sync runtime theme failed', e);

package/package.json

@@ -1,9 +1,9 @@
 {
     "id": "uview-pro",
     "name": "uview-pro",
-    "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的80+精选UI组件库，支持多主题，暗黑模式",
-    "version": "0.4.9",
-    "description": "uView Pro，是全面支持Vue3+TS的uni-app生态框架，80+精选组件，支持安卓，iOS，鸿蒙，各小程序平台，支持多主题，一键暗黑模式",
+    "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式",
+    "version": "0.4.11",
+    "description": "uView Pro 是为 Vue 3 + TypeScript 的 uni-app 生态量身打造的多平台 UI 框架。提供 80+ 高质量组件、丰富主题与暗黑模式、实用开发工具与模板，显著提升 H5/APP/鸿蒙/小程序 的多端开发效率，目前已在华为鸿蒙应用商店上线，欢迎体验。",
     "main": "index.ts",
     "module": "index.ts",
     "browser": "index.ts",

package/types/global.d.ts

@@ -403,4 +403,6 @@ export type TabbarItem = {
     isDot?: boolean;
     customIcon?: boolean | string;
     midButton?: boolean;
+    iconSize?: string | number;
+    textSize?: string | number;
 };