uview-pro 0.0.21 → 0.0.22

package/changelog.md

@@ -1,9 +1,32 @@
+## 0.0.22（2025-09-11）
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- 忽略 pnpm-lock.yaml 文件 ([28802d3](https://github.com/anyup/uView-Pro/commit/28802d308d3c1f2d0d6b583b3b27725b6b40b1a9))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **td/th:** fix invalid width setting ([21718fc](https://github.com/anyup/uView-Pro/commit/21718fc3b2f09e1ccf9f1ce8247b78f30e5fe465))
+- **u-modal:** 修复在 modal 组件中添加 clearLoading 方法的暴露，以便外部可以调用 ([34b51a7](https://github.com/anyup/uView-Pro/commit/34b51a7187da296b11f4b5db027a86c41a50a477))
+
+### ✨ Features | 新功能
+
+- **components:** add u-status-bar and u-safe-bottom component ([2085e73](https://github.com/anyup/uView-Pro/commit/2085e73be725f921c436069c27c124e507b24d0e))
+- **u-upload:** 调整上传组件默认值和功能 ([4808627](https://github.com/anyup/uView-Pro/commit/48086274f5fe16f4b3b7554a99038a76aa08e8c5))
+- **pages:** 在多个页面中添加功能说明的弹窗提示 ([5e59855](https://github.com/anyup/uView-Pro/commit/5e59855ff81f21c54cbfa44a3f4641b4b9f1f6bd))
+
 ## 0.0.21（2025-09-09）
-### Performance Improvements | 性能优化
 
-- **pages:** 所有示例页面语法升级为 composition 语法 ([e38878c](https://github.com/anyup/uView-Pro/commit/e38878c696ffc548374169423613e97c3878bafd))
+### ⚡ Performance Improvements | 性能优化
 
-### Bug Fixes | Bug 修复
+- **pages:** options 语法升级为 composition 语法 ([e38878c](https://github.com/anyup/uView-Pro/commit/e38878c696ffc548374169423613e97c3878bafd))
+- **pages:** options 语法升级为 composition 语法 ([0403545](https://github.com/anyup/uView-Pro/commit/040354507bd187a9bff4371fc4950dfd6412cd5b))
+- **pages:** options 语法升级为 composition 语法 ([514ecb6](https://github.com/anyup/uView-Pro/commit/514ecb6f8e2b133b962a6cbe7609a64e4d973928))
+- **pages:** options 语法升级为 composition 语法 ([ffcc1cb](https://github.com/anyup/uView-Pro/commit/ffcc1cb8993196252535ea6553d7fd999ab57719))
+- **pages:** options 语法升级为 composition 语法 ([2c755e3](https://github.com/anyup/uView-Pro/commit/2c755e3e1f386c3be1ae8955607d64f72b2b6640))
+- 优化首页图标渲染问题 ([a6d4b16](https://github.com/anyup/uView-Pro/commit/a6d4b1690544f3261fb138cb490a10131d4fb749))
+
+### 🐛 Bug Fixes | Bug 修复
 
 - **u-tag:** 修复 u-tag 类型 ([c9071a6](https://github.com/anyup/uView-Pro/commit/c9071a610e08efc4581eff97e4d4998c2d01c9eb))
 - **u-table:** 修复 u-table props style 属性变化时，u-th/t-td 未更新问题 ([b1ee7d6](https://github.com/anyup/uView-Pro/commit/b1ee7d6ade7a59e305d7a4081415418387bb6832))
@@ -12,9 +35,27 @@
 - 修复微信小程序不支持u-circle-progress绘制canvas失败问题 ([46406c5](https://github.com/anyup/uView-Pro/commit/46406c593260f29b081c6a5d98c48dc97e225600))
 - 修复 u-picker 组件 params 属性默认值设置 ([36a713b](https://github.com/anyup/uView-Pro/commit/36a713b3c84ddb6e9ef40132512063cdde35ea19))
 
-### Build System | 打包构建
+### 📝 Documentation | 文档
+
+- 更新微信交流群图片 ([825b187](https://github.com/anyup/uView-Pro/commit/825b187619ee745a23559bfe0b597b75f90f220d))
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- update project configuration and add prettier support ([9c0cc6a](https://github.com/anyup/uView-Pro/commit/9c0cc6ae3719b975d702b0283bd0c15ee4f3c374))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **library:** 移除不需要的 globalVariable ([420c40e](https://github.com/anyup/uView-Pro/commit/420c40eac3c67e184924e166edaf4cf2ea904477))
+- 更新 pages.json ([03297ce](https://github.com/anyup/uView-Pro/commit/03297ce219ae9337c1a424b9583fa53c74f0291d))
+
+### 💄 Styles | 风格
+
+- 格式化代码 ([a9e0a38](https://github.com/anyup/uView-Pro/commit/a9e0a387ffa55df740b828ea4a1463d97089c4bd))
+
+### 📦‍ Build System | 打包构建
 
 - mp-alipay 开启 component2 支持 ([430d248](https://github.com/anyup/uView-Pro/commit/430d248ef9e805365dcee0373f6a524bd7084a38))
+
 ## 0.0.20（2025-09-08）
 
 ### ♻️ Code Refactoring | 代码重构

package/components/u-modal/u-modal.vue

@@ -151,6 +151,10 @@ function popupClose() {
 function clearLoading() {
     loading.value = false;
 }
+
+defineExpose({
+    clearLoading
+});
 </script>
 
 <style lang="scss" scoped>

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -0,0 +1,46 @@
+<template>
+    <view class="u-safe-bottom" :style="style" :class="[!isNVue && 'safe-area-inset-bottom']"></view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
+import { sys } from '../../libs/function/sys';
+import addUnit from '../../libs/function/addUnit';
+import deepMerge from '../../libs/function/deepMerge';
+import { mergeStyles } from '../../libs/function/styleUtils';
+
+defineOptions({ name: 'u-safe-bottom' });
+
+/**
+ * SafeBottom 底部安全区
+ * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+ * @property {String | Object} customStyle 自定义样式
+ * @example <u-safe-bottom></u-safe-bottom>
+ */
+const props = withDefaults(
+    defineProps<{
+        customStyle?: string | CSSProperties;
+    }>(),
+    {
+        customStyle: () => ({})
+    }
+);
+
+const isNVue = ref(false);
+
+const style = computed(() => {
+    let r: CSSProperties = {};
+    // #ifdef APP-NVUE || MP-TOUTIAO
+    // nvue下，高度使用js计算填充
+    r.height = addUnit(sys().safeAreaInsets.bottom, 'px');
+    // #endif
+    return deepMerge(r, mergeStyles(props.customStyle));
+});
+
+onMounted(() => {
+    // #ifdef APP-NVUE
+    // 标识为是否nvue
+    isNVue.value = true;
+    // #endif
+});
+</script>

package/components/u-status-bar/u-status-bar.vue

@@ -0,0 +1,65 @@
+<template>
+    <view :style="style" :class="['u-status-bar', { 'safe-area-inset-top': noBar }]">
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
+import { sys } from '../../libs/function/sys';
+import addUnit from '../../libs/function/addUnit';
+import deepMerge from '../../libs/function/deepMerge';
+import { mergeStyles } from '../../libs/function/styleUtils';
+
+defineOptions({
+    name: 'u-status-bar'
+});
+
+/**
+ * StatusBar 状态栏
+ * @property {String | Object} customStyle 自定义样式
+ * @property {String} background 背景颜色
+ * @example <u-status-bar></u-status-bar>
+ */
+const props = withDefaults(
+    defineProps<{
+        background?: string;
+        customStyle?: string | CSSProperties;
+    }>(),
+    {
+        // 背景颜色
+        background: 'transparent',
+        customStyle: () => ({})
+    }
+);
+
+const noBar = ref(false);
+
+const style = computed(() => {
+    let r: CSSProperties = {
+        background: props.background
+    };
+    const sh = sys().statusBarHeight;
+    if (sh === 0) {
+        noBar.value = true;
+    } else {
+        r.height = addUnit(sh, 'px');
+    }
+    return deepMerge(r, mergeStyles(props.customStyle));
+});
+
+onMounted(() => {
+    // #ifdef H5
+    noBar.value = true;
+    // #endif
+});
+</script>
+
+<style scoped>
+.u-status-bar {
+    /* #ifndef APP-NVUE */
+    /* nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常 */
+    width: 100%;
+    /* #endif */
+}
+</style>

package/components/u-td/u-td.vue

@@ -35,7 +35,8 @@ function updateStyle() {
     if (!parent) return;
 
     const style: Record<string, any> = {};
-    if (props.width !== 'auto') style.flex = `0 0 ${props.width}`;
+    if (props.width && props.width !== 'auto') style.width = props.width;
+    else style.flex = '1';
     style.textAlign = parent.props.align;
     style.fontSize = parent.props.fontSize + 'rpx';
     style.padding = parent.props.padding;
@@ -75,7 +76,7 @@ onMounted(() => {
 .u-td {
     @include vue-flex;
     flex-direction: column;
-    flex: 1;
+    // flex: 1;
     justify-content: center;
     font-size: 28rpx;
     color: $u-content-color;

package/components/u-th/types.ts

@@ -6,7 +6,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
  */
 export const ThProps = {
     /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
-    width: { type: [Number, String] as PropType<number | string>, default: '' }
+    width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
 };
 
 export type ThProps = ExtractPropTypes<typeof ThProps>;

package/components/u-th/u-th.vue

@@ -31,7 +31,8 @@ function updateStyle() {
     if (!parent) return;
 
     const style: Record<string, any> = {};
-    if (props.width) style.flex = `0 0 ${props.width}`;
+    if (props.width && props.width !== 'auto') style.width = props.width;
+    else style.flex = '1';
     style.textAlign = parent.props.align;
     style.padding = parent.props.padding;
     style.borderBottom = `solid 1px ${parent.props.borderColor}`;
@@ -70,7 +71,7 @@ onMounted(() => {
 .u-th {
     @include vue-flex;
     flex-direction: column;
-    flex: 1;
+    // flex: 1;
     justify-content: center;
     font-size: 28rpx;
     color: $u-main-color;

package/components/u-upload/types.ts

@@ -7,11 +7,11 @@ import type { ImgMode, UploadSizeType, UploadSourceType } from '../../types/glob
  */
 export const UploadProps = {
     /** 选择器宽度，单位rpx */
-    width: { type: [Number, String] as PropType<number | string>, default: 80 },
+    width: { type: [Number, String] as PropType<number | string>, default: 200 },
     /** 选择器高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 80 },
+    height: { type: [Number, String] as PropType<number | string>, default: 200 },
     /** 最大上传数量 */
-    maxCount: { type: [Number, String] as PropType<number | string>, default: 9 },
+    maxCount: { type: [Number, String] as PropType<number | string>, default: 52 },
     /** 是否可删除 */
     deletable: { type: Boolean, default: true },
     /** 是否显示上传列表 */
@@ -29,12 +29,12 @@ export const UploadProps = {
     /** 是否自定义上传按钮 */
     customBtn: { type: Boolean, default: false },
     /** 上传按钮文字 */
-    uploadText: { type: String, default: '上传' },
+    uploadText: { type: String, default: '选择图片' },
     /** 上传地址 */
     action: { type: String, default: '' },
     /** 是否禁用 */
     disabled: { type: Boolean, default: false },
-    /** 索引值 */
+    /** 索引值，在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件 */
     index: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 请求头对象 */
     header: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
@@ -55,7 +55,10 @@ export const UploadProps = {
     /** 文件列表 */
     fileList: { type: Array as PropType<any[]>, default: () => [] },
     /** 限制文件类型 */
-    limitType: { type: Array as PropType<string[]>, default: () => [] },
+    /** 允许上传的图片后缀 */
+    /** 支付宝小程序真机选择图片的后缀为"image" */
+    /** https://opendocs.alipay.com/mini/api/media-image */
+    limitType: { type: Array as PropType<string[]>, default: () => ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'] },
     /** 是否自动上传 */
     autoUpload: { type: Boolean, default: true },
     /** 是否显示提示 */
@@ -64,8 +67,8 @@ export const UploadProps = {
     beforeUpload: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
     /** 删除前钩子，返回true或Promise */
     beforeRemove: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
-    /** 是否转为json格式 */
-    toJson: { type: Boolean, default: false }
+    /** 如果上传后的返回值为json字符串，是否转为json格式 */
+    toJson: { type: Boolean, default: true }
 };
 
 export type UploadProps = ExtractPropTypes<typeof UploadProps>;

package/libs/css/style.vue.scss

@@ -17,10 +17,12 @@ page {
 /* end-icon图标外层套一个view，让其达到更好的垂直居中的效果--end */
 
 /* start--iPhoneX底部安全区定义--start */
-.safe-area-inset-bottom {
-    padding-bottom: 0;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+@each $d in top, right, bottom, left {
+    .safe-area-inset-#{$d} {
+        padding-#{$d}: 0;
+        padding-#{$d}: constant(safe-area-inset-#{$d});
+        padding-#{$d}: env(safe-area-inset-#{$d});
+    }
 }
 /* end-iPhoneX底部安全区定义--end */
 

package/libs/function/styleUtils.ts

@@ -0,0 +1,83 @@
+import type { CSSProperties } from 'vue';
+import trim from './trim';
+import test from './test';
+
+function isValidValue(value: any): boolean {
+    if (test.isEmpty(value)) return false;
+    if (typeof value === 'string') {
+        const trimmed = trim(value).toLowerCase();
+        return trimmed !== 'null' && trimmed !== 'undefined' && trimmed !== '';
+    }
+    return true;
+}
+
+/**
+ * 将 CSS 字符串解析为对象
+ */
+function cssStrToObj(str: string): object {
+    const result = {};
+    if (!isValidValue(str)) return result;
+    const styleStr = trim(String(str));
+    if (!isValidValue(styleStr)) return result;
+    const declarations = styleStr.split(';');
+    declarations.forEach(decl => {
+        const [prop, ...values] = decl.split(':').map(s => s.trim());
+        const value = values.join(':');
+        if (prop && value) {
+            const camelProp = prop.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+            result[camelProp] = value;
+        }
+    });
+    return result;
+}
+
+/**
+ * 将 CSS 对象转换为 CSS 字符串
+ */
+function cssObjToStr(obj: object): string {
+    if (!isValidValue(obj) || typeof obj !== 'object') return '';
+    return (
+        Object.entries(obj)
+            .map(([key, value]) => {
+                if (!isValidValue(value)) return '';
+                // 驼峰转短横线
+                const kebab = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+                return `${kebab}: ${value}`;
+            })
+            .filter(Boolean)
+            .join('; ') + ';'
+    );
+}
+
+/**
+ * 合并多个 CSS 输入（对象或字符串），返回一个 CSS 对象
+ */
+export function mergeStyles(...args: (object | string)[]): CSSProperties {
+    const result = {};
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (!isValidValue(arg)) return;
+        if (typeof arg === 'string') {
+            Object.assign(result, cssStrToObj(arg));
+        } else if (test.object(arg)) {
+            const cleanedObj = {};
+            Object.keys(arg).forEach(key => {
+                const value = arg[key];
+                if (isValidValue(value)) {
+                    // 有效
+                    cleanedObj[key] = value;
+                }
+            });
+            Object.assign(result, cleanedObj);
+        }
+    }
+    return result;
+}
+
+/**
+ * 合并为 CSS 字符串
+ */
+export function mergeCssStrings(...args: (object | string)[]): string {
+    const obj = mergeStyles(...args);
+    return cssObjToStr(obj);
+}

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",