uview-pro 0.6.0-beta.0 → 0.6.0-beta.1

package/changelog.md

@@ -1,28 +1,39 @@
-## 0.6.0-beta.0（2026-04-30）
+## 0.6.0-beta.1（2026-05-08）
 
 ### ✨ Features | 新功能
 
-- **u-upload:** 新增多种上传模式和文件类型支持，支持图片、视频、文档等多种类型，支持网格(grid)和列表(list)两种展示模式 ([f75d34c](https://github.com/anyup/uView-Pro/commit/f75d34c22d551c41e8e873bc5779089ff2b2c0c7))
-- **u-upload:** 新增 v-model 支持并优化文件列表同步逻辑 ([5548d84](https://github.com/anyup/uView-Pro/commit/5548d847b5c442da40775ec06ecfab7f0fddf448))
-- **upload:** 完善上传组件示例页面功能，添加多种上传模式示例：图片上传（网格模式）、文件上传（列表模式）、视频上传 ([d43b3d2](https://github.com/anyup/uView-Pro/commit/d43b3d2c7f0ff7a7fe45467d49d451ca878b7eb1))
-
-### ♻️ Code Refactoring | 代码重构
-
-- **u-divider:** 规范化 slot 标签 ([fccac33](https://github.com/anyup/uView-Pro/commit/fccac33b6adce3395179d5c55b7b8a0a4d25a800))
-
-### 🐛 Bug Fixes | Bug 修复
-
-- **u-upload:** 优化微信小程序平台监听文件列表变化不触发on-list-change事件的场景 ([47fa5c1](https://github.com/anyup/uView-Pro/commit/47fa5c1dfa30214dfc40f7ee01b09f6f95d09b9a))
-- **changelog:** 修复版本标题格式和Unreleased区块处理 ([3a87f47](https://github.com/anyup/uView-Pro/commit/3a87f4739cdebc1aafcb33e3f9b31dd79f9bc3d2))
-
-### 👷 Continuous Integration | CI 配置
-
-- 增强预发布版本支持和发布管理功能 ([86abdaa](https://github.com/anyup/uView-Pro/commit/86abdaad6a618dfa42416138f05baf910f52fba5))
+- **u-upload:** 新增image-shape属性支持圆形和方形展示 ([fac9414](https://github.com/anyup/uView-Pro/commit/fac941413ba4d944116513934306376a0188fcda))
+- **u-upload:** 新增customChoose属性支持自定义文件选择功能 ([97e17ee](https://github.com/anyup/uView-Pro/commit/97e17eeae15c03a7791bb5eec4159782f3d70d84))
 
 ### 👥 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.6.0-beta.0（2026-04-30）
+
+### ✨ Features | 新功能
+
+- **u-upload:** 新增多种上传模式和文件类型支持，支持图片、视频、文档等多种类型，支持网格(grid)和列表(list)两种展示模式 ([f75d34c](https://github.com/anyup/uView-Pro/commit/f75d34c22d551c41e8e873bc5779089ff2b2c0c7))
+- **u-upload:** 新增 v-model 支持并优化文件列表同步逻辑 ([5548d84](https://github.com/anyup/uView-Pro/commit/5548d847b5c442da40775ec06ecfab7f0fddf448))
+- **upload:** 完善上传组件示例页面功能，添加多种上传模式示例：图片上传（网格模式）、文件上传（列表模式）、视频上传 ([d43b3d2](https://github.com/anyup/uView-Pro/commit/d43b3d2c7f0ff7a7fe45467d49d451ca878b7eb1))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **u-divider:** 规范化 slot 标签 ([fccac33](https://github.com/anyup/uView-Pro/commit/fccac33b6adce3395179d5c55b7b8a0a4d25a800))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-upload:** 优化微信小程序平台监听文件列表变化不触发on-list-change事件的场景 ([47fa5c1](https://github.com/anyup/uView-Pro/commit/47fa5c1dfa30214dfc40f7ee01b09f6f95d09b9a))
+- **changelog:** 修复版本标题格式和Unreleased区块处理 ([3a87f47](https://github.com/anyup/uView-Pro/commit/3a87f4739cdebc1aafcb33e3f9b31dd79f9bc3d2))
+
+### 👷 Continuous Integration | CI 配置
+
+- 增强预发布版本支持和发布管理功能 ([86abdaa](https://github.com/anyup/uView-Pro/commit/86abdaad6a618dfa42416138f05baf910f52fba5))
+
+### 👥 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.5.18（2026-04-22）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-upload/types.ts

@@ -153,7 +153,19 @@ export const UploadProps = {
      * 选择文件时的扩展名过滤
      * @description 仅在 accept='file' 或 accept='all' 时有效
      */
-    extension: { type: Array as PropType<string[]>, default: () => [] }
+    extension: { type: Array as PropType<string[]>, default: () => [] },
+    /**
+     * 图片/图标展示形状
+     * @description 可选值：square-方形(默认), circle-圆形。在 grid 模式下作用于图片和添加按钮，在 list 模式下作用于图标
+     * @default 'square'
+     */
+    imageShape: { type: String as PropType<'square' | 'circle'>, default: 'square' },
+    /**
+     * 是否使用自定义选择文件
+     * @description 设置为 true 时，点击选择文件会触发 on-choose 事件，不会调用默认的文件选择 API，用户可自行处理文件选择逻辑，然后通过 addFiles 方法将文件添加到列表
+     * @default false
+     */
+    customChoose: { type: Boolean, default: false }
 };
 
 export type UploadProps = ExtractPropTypes<typeof UploadProps>;

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

@@ -18,11 +18,20 @@
                     <view class="u-upload-list__left" @tap.stop="handlePreview(item, index)">
                         <!-- 图片类型：显示缩略图 -->
                         <template v-if="isImageFile(item)">
-                            <image class="u-upload-list__thumb" :src="item.url || item.path" mode="aspectFill" />
+                            <image
+                                class="u-upload-list__thumb"
+                                :class="{ 'u-upload-list__thumb--circle': props.imageShape === 'circle' }"
+                                :src="item.url || item.path"
+                                :mode="imageMode"
+                            />
                         </template>
                         <!-- 非图片类型：显示文件图标 -->
                         <template v-else>
-                            <view class="u-upload-list__icon" :style="{ background: getFileIcon(item).bgColor }">
+                            <view
+                                class="u-upload-list__icon"
+                                :class="{ 'u-upload-list__icon--circle': props.imageShape === 'circle' }"
+                                :style="{ background: getFileIcon(item).bgColor }"
+                            >
                                 <u-icon :name="getFileIcon(item).name" size="32" color="var(--u-white-color)"></u-icon>
                             </view>
                         </template>
@@ -99,8 +108,9 @@
         <template v-else>
             <template v-if="showUploadList">
                 <view
-                    class="u-upload-grid__item u-upload-grid__preview"
                     v-for="(item, index) in lists"
+                    class="u-upload-grid__item u-upload-grid__preview"
+                    :class="{ 'u-upload-grid__item--circle': props.imageShape === 'circle' }"
                     :key="index"
                     :style="{
                         width: $u.addUnit(width),
@@ -132,10 +142,11 @@
                     <!-- 图片类型预览 -->
                     <template v-if="isImageFile(item)">
                         <image
-                            @tap.stop="handlePreview(item, index)"
                             class="u-upload-grid__image"
+                            :class="{ 'u-upload-grid__image--circle': props.imageShape === 'circle' }"
                             :src="item.url || item.path"
                             :mode="imageMode"
+                            @tap.stop="handlePreview(item, index)"
                         ></image>
                     </template>
 
@@ -190,6 +201,7 @@
                     class="u-upload-grid__item u-upload-grid__add"
                     hover-class="u-upload-grid__add--hover"
                     hover-stay-time="150"
+                    :class="{ 'u-upload-grid__item--circle': props.imageShape === 'circle' }"
                     :style="{
                         width: $u.addUnit(width),
                         height: $u.addUnit(height)
@@ -262,10 +274,12 @@ import type { UploadFileItem } from '../../types/global';
  * @property {Boolean} compressed 选择视频时是否压缩（默认true）
  * @property {Number} max-duration 选择视频时拍摄最长时长，单位秒（默认60）
  * @property {String} camera 选择视频时摄像头方向，可选值：front|back（默认'back'）
+ * @property {String} image-shape 图片/图标展示形状，可选值：square|circle（默认'square'），在grid模式下作用于图片和添加按钮，在list模式下作用于图标
  * @property {Array<Object>} file-list 默认显示的文件列表，数组元素为对象，必须提供url属性
  * @property {Function} before-upload 上传前钩子，返回false或Promise.reject则跳过当前文件上传
  * @property {Function} before-remove 删除前钩子，返回false或Promise.reject则阻止删除
  * @property {Boolean} to-json 如果上传后的返回值为json字符串，是否自动转为json格式（默认true）
+ * @property {Boolean} custom-choose 是否使用自定义文件选择，开启后点击选择文件会触发 on-choose 事件而不调用默认选择API（默认false）
  *
  * @event {Function} on-oversize 文件大小超出max-size限制时触发
  * @event {Function} on-exceed 文件数量超出max-count限制时触发
@@ -279,6 +293,7 @@ import type { UploadFileItem } from '../../types/global';
  * @event {Function} on-remove 移除文件时触发
  * @event {Function} on-preview 预览文件时触发
  * @event {Function} on-list-change 文件列表发生变化时触发
+ * @event {Function} on-choose 启用 custom-choose 时触发，参数为 { accept, maxCount, fileList, index }，用户可自定义文件选择逻辑
  *
  * @example <u-upload :action="action" :file-list="fileList" accept="image"></u-upload>
  * @example <u-upload :action="action" accept="file" mode="list" :show-file-name="true"></u-upload>
@@ -292,6 +307,7 @@ const emit = defineEmits([
     'on-list-change',
     'on-oversize',
     'on-exceed',
+    'on-choose',
     'on-choose-complete',
     'on-choose-fail',
     'on-uploaded',
@@ -594,6 +610,17 @@ function reUpload() {
 function selectFile() {
     if (props.disabled) return;
 
+    // 如果启用了自定义选择，触发 on-choose 事件，由用户自行处理文件选择
+    if (props.customChoose) {
+        emit('on-choose', {
+            accept: props.accept,
+            maxCount: props.maxCount,
+            fileList: lists.value,
+            index: props.index
+        });
+        return;
+    }
+
     // 根据 accept 类型选择不同的文件选择方式
     switch (props.accept) {
         case 'image':
@@ -751,6 +778,8 @@ function chooseFile() {
 
 /**
  * 处理选中的文件
+ * @param files 文件数组
+ * @param sourceType 文件来源类型
  */
 function handleFilesSelected(files: any[], sourceType: 'image' | 'video' | 'media' | 'file') {
     let listOldLength = lists.value.length;
@@ -781,8 +810,12 @@ function handleFilesSelected(files: any[], sourceType: 'image' | 'video' | 'medi
             } else if (props.accept === 'file') {
                 fileType = 'file';
             } else {
-                // media 或 all 时，根据路径或 sourceType 检测
-                fileType = detectFileTypeFromPath(val.path || val.name || '');
+                // media 或 all 时，根据 sourceType 或路径检测
+                if (sourceType === 'image' || sourceType === 'video') {
+                    fileType = sourceType;
+                } else {
+                    fileType = detectFileTypeFromPath(val.path || val.name || '');
+                }
             }
 
             lists.value.push({
@@ -805,9 +838,19 @@ function handleFilesSelected(files: any[], sourceType: 'image' | 'video' | 'medi
 
     // 每次文件选择完，抛出一个事件，并将当前内部选择的文件数组抛出去
     emit('on-choose-complete', lists.value, props.index);
+    // 使用 props.autoUpload 是否立即上传
     if (props.autoUpload) uploadFile(listOldLength);
 }
 
+/**
+ * 添加文件到列表（供外部调用，配合 custom-choose 使用）
+ * @param files 文件数组，格式为 { path: string, name?: string, size?: number, fileType?: 'image'|'video'|'file', ... }
+ */
+function addFiles(files: any[]) {
+    if (!files || !Array.isArray(files) || files.length === 0) return;
+    handleFilesSelected(files, props.accept as 'image' | 'video' | 'media' | 'file');
+}
+
 /**
  * 从路径中获取文件扩展名
  */
@@ -1187,7 +1230,18 @@ function checkFileExt(file: { name?: string; path?: string }): boolean {
     return isValid;
 }
 
-defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImage, doPreviewFile, lists });
+defineExpose({
+    lists,
+    clear,
+    reUpload,
+    selectFile,
+    upload,
+    retry,
+    remove,
+    previewImage: doPreviewImage,
+    previewFile: doPreviewFile,
+    addFiles
+});
 </script>
 
 <style lang="scss" scoped>
@@ -1241,6 +1295,27 @@ defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImag
     border-radius: 10rpx;
 }
 
+.u-upload-grid__image--circle {
+    border-radius: 50%;
+}
+
+.u-upload-grid__item--circle {
+    border-radius: 50%;
+}
+
+.u-upload-grid__item--circle .u-upload-grid__delete {
+    top: 20rpx;
+    right: 30rpx;
+    width: 36rpx;
+    height: 36rpx;
+}
+
+.u-upload-grid__item--circle .u-upload-grid__progress {
+    bottom: 16rpx;
+    left: 16rpx;
+    right: 16rpx;
+}
+
 .u-upload-grid__delete {
     position: absolute;
     top: 10rpx;
@@ -1390,6 +1465,10 @@ defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImag
     background: var(--u-bg-gray-light);
 }
 
+.u-upload-list__thumb--circle {
+    border-radius: 50%;
+}
+
 .u-upload-list__icon {
     width: 80rpx;
     height: 80rpx;
@@ -1399,6 +1478,10 @@ defineExpose({ clear, reUpload, selectFile, upload, retry, remove, doPreviewImag
     justify-content: center;
 }
 
+.u-upload-list__icon--circle {
+    border-radius: 50%;
+}
+
 // 中间：文件名信息
 .u-upload-list__center {
     flex: 1;

package/package.json

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