xydata-tools 1.0.45 → 1.0.46

package/dist/components/uni-app/file-picker/file-picker.vue

@@ -178,8 +178,6 @@ export default {
 				case 'jpeg':
 				case 'jpg':
 				case 'gif':
-				case 'webp':
-				case 'svg':
 					return require('../../../assets/file-icon/image.png')
 				case 'mp4':
 				case 'mov':
@@ -515,6 +513,15 @@ export default {
 			const ext = this.getFileExtension(file.name)
 			const supportedTypes = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
 			const isDocument = supportedTypes.includes(ext)
+			
+			const imageTypes = ['png', 'jpeg', 'jpg', 'gif']
+			console.log(ext)
+			if (imageTypes.includes(ext)) {
+				uni.previewImage({
+					urls: [file.url]
+				})
+				return
+			}
 
 			// 显示加载提示
 			uni.showLoading({

package/dist/components/uni-app/file-picker/styles.scss

@@ -73,8 +73,8 @@
       .file-actions {
         margin-left: 16rpx;
         position: relative;
-        width: 44rpx;
-        height: 44rpx;
+        width: 40rpx;
+        height: 40rpx;
         border-radius: 50%;
         background-color: rgba(0, 0, 0, 0.6);
 

package/dist/components/uni-app/media-picker/media-picker.vue

@@ -8,8 +8,7 @@
 				<view v-if="enableImage && showFileList" class="media-section">
 					<shmily-drag-media v-if="imageFileList.length > 0" v-model="imageUrls" :number="imageLimit"
 						:cols="cols" :imageWidth="itemWidth" :padding="10" :borderRadius="itemBorderRadius"
-						:align="align" :draggable="draggable" moveType="image"
-						@update:modelValue="handleImageDragChange">
+						:draggable="draggable" moveType="image" @update:modelValue="handleImageDragChange">
 					</shmily-drag-media>
 				</view>
 
@@ -18,8 +17,8 @@
 					:style="{ marginTop: enableImage && videoFileList.length > 0 ? '20rpx' : '0' }">
 					<shmily-drag-media v-if="videoFileList.length > 0" v-model="videoUrls" :number="videoLimit"
 						:cols="cols" :imageWidth="itemWidth" :padding="10" :borderRadius="itemBorderRadius"
-						:align="align" :draggable="draggable" moveType="video"
-						@update:modelValue="handleVideoDragChange" @videoClick="handleVideoItemClick">
+						:draggable="draggable" moveType="video" @update:modelValue="handleVideoDragChange"
+						@videoClick="handleVideoItemClick">
 					</shmily-drag-media>
 				</view>
 
@@ -29,8 +28,8 @@
 					<view v-if="enableImage" class="upload-button-wrapper">
 						<slot name="image-upload-button" :select="selectAndUploadImage" :limit="imageLimit"
 							:count="imageFileList.length">
-							<view class="upload-btn-vertical" v-if="imageFileList.length < imageLimit"
-								@click="selectAndUploadImage">
+							<view class="upload-btn-vertical" :style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								v-if="imageFileList.length < imageLimit" @click="selectAndUploadImage">
 								<image :src="imageUploadIcon" class="upload-icon"></image>
 								<view class="upload-text">{{ imageButtonTitle }}</view>
 							</view>
@@ -41,8 +40,8 @@
 					<view v-if="enableVideo" class="upload-button-wrapper">
 						<slot name="video-upload-button" :select="selectAndUploadVideo" :limit="videoLimit"
 							:count="videoFileList.length">
-							<view class="upload-btn-vertical" v-if="videoFileList.length < videoLimit"
-								@click="selectAndUploadVideo">
+							<view class="upload-btn-vertical" :style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								v-if="videoFileList.length < videoLimit" @click="selectAndUploadVideo">
 								<image :src="videoUploadIcon" class="upload-icon"></image>
 								<view class="upload-text">{{ videoButtonTitle }}</view>
 							</view>
@@ -58,14 +57,14 @@
 					:number="imageLimit" :cols="cols" :imageWidth="itemWidth" :padding="10"
 					:borderRadius="itemBorderRadius" :align="align" :draggable="draggable" :enableAddButton="true"
 					moveType="image" @update:modelValue="handleImageDragChange" @add-click="selectAndUploadImage">
-					<template #add-button>
+					<template #add-button="{ childWidth }">
 						<slot name="image-upload-button" :select="selectAndUploadImage" :limit="imageLimit"
 							:count="imageFileList.length">
 							<view class="drag-upload-btn">
 								<image :src="imageUploadIcon" class="upload-icon"
-									:style="{ width: uploadIconSize + 'rpx', height: uploadIconSize + 'rpx' }"></image>
-								<view class="upload-text" :style="{ fontSize: uploadTextSize + 'rpx' }">{{
-									imageButtonTitle }}</view>
+									:style="getUploadIconStyle(childWidth)"></image>
+								<view class="upload-text" :style="getUploadTextStyle(childWidth)">{{ imageButtonTitle }}
+								</view>
 							</view>
 						</slot>
 					</template>
@@ -77,14 +76,14 @@
 					:borderRadius="itemBorderRadius" :align="align" :draggable="draggable" :enableAddButton="true"
 					moveType="video" @update:modelValue="handleVideoDragChange" @add-click="selectAndUploadVideo"
 					@videoClick="handleVideoItemClick">
-					<template #add-button>
+					<template #add-button="{ childWidth }">
 						<slot name="video-upload-button" :select="selectAndUploadVideo" :limit="videoLimit"
 							:count="videoFileList.length">
 							<view class="drag-upload-btn">
 								<image :src="videoUploadIcon" class="upload-icon"
-									:style="{ width: uploadIconSize + 'rpx', height: uploadIconSize + 'rpx' }"></image>
-								<view class="upload-text" :style="{ fontSize: uploadTextSize + 'rpx' }">{{
-									videoButtonTitle }}</view>
+									:style="getUploadIconStyle(childWidth)"></image>
+								<view class="upload-text" :style="getUploadTextStyle(childWidth)">{{ videoButtonTitle }}
+								</view>
 							</view>
 						</slot>
 					</template>
@@ -197,8 +196,8 @@ export default {
 		// ==================== 通用配置 ====================
 		/** 上传类型: 'image' - 仅图片, 'video' - 仅视频, 'both' - 图片+视频（必填） */
 		uploadType: {
-			type: String,
-			required: true,
+			type: String, 
+			default: 'image',
 			validator: (value) => ['image', 'video', 'both'].includes(value)
 		},
 		/** 上传地址 */
@@ -335,6 +334,7 @@ export default {
 			popupAnimated: false,
 			mediaLoadingStatus: {},
 			fullscreenVideoSrc: '', // 专门用于全屏播放的视频源
+			windowWidth: uni.getSystemInfoSync ? uni.getSystemInfoSync().windowWidth : 375,
 		}
 	},
 	computed: {
@@ -457,7 +457,7 @@ export default {
 		},
 
 		// ==================== 弹窗模式网格样式 ====================
-		popupGridStyle() { 
+		popupGridStyle() {
 			return {
 				gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
 				gap: '10rpx'
@@ -493,6 +493,48 @@ export default {
 		hasEventListener(eventName) {
 			return !!(this.$listeners && this.$listeners[eventName])
 		},
+		parseChildWidth(childWidth) {
+			if (typeof childWidth === 'number') {
+				return childWidth
+			}
+			if (typeof childWidth === 'string') {
+				const parsed = parseFloat(childWidth)
+				return Number.isFinite(parsed) ? parsed : null
+			}
+			return null
+		},
+		pxToRpx(px) {
+			if (!px || !this.windowWidth) {
+				return 0
+			}
+			return px / this.windowWidth * 750
+		},
+		computeUploadIconSize(childWidth) {
+			const parsedPx = this.parseChildWidth(childWidth)
+			if (!parsedPx) {
+				return this.uploadIconSize
+			}
+			const widthRpx = this.pxToRpx(parsedPx)
+			const size = Math.floor(widthRpx * 0.3) 
+			return Math.max(20, size)
+		},
+		computeUploadTextSize(childWidth) {
+			const iconSize = this.computeUploadIconSize(childWidth)
+			const size = Math.floor(iconSize * 0.4)
+			return Math.max(20, size)
+		},
+		getUploadIconStyle(childWidth) {
+			const size = this.computeUploadIconSize(childWidth) 
+			return {
+				width: size + 'rpx',
+				height: size + 'rpx'
+			}
+		},
+		getUploadTextStyle(childWidth) { 
+			return {
+				fontSize: this.computeUploadTextSize(childWidth) + 'rpx'
+			}
+		},
 
 		// ==================== 图片相关方法 ====================
 		/**

package/dist/components/uni-app/media-picker/shmily-drag-media.vue

@@ -3,7 +3,7 @@
         <template v-if="viewWidth">
             <movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter"
                 @mouseleave="mouseleave">
-                <movable-view   v-for="(item, index) in imageList" :key="item.id" class="view" direction="all" :y="item.y"
+                <movable-view v-for="(item, index) in imageList" :key="item.id" class="view" direction="all" :y="item.y"
                     :x="item.x" :damping="40" :disabled="!draggable" @change="onChange($event, item)"
                     @touchstart="touchstart(item)" @mousedown="touchstart(item)" @touchend="touchend($event, item)"
                     @mouseup="touchend($event, item)" :style="{
@@ -18,9 +18,14 @@
                         borderRadius: borderRadius + 'rpx',
                         transform: 'scale(' + item.scale + ')'
                     }">
-                        <image v-if="moveType === 'image'" class="pre-image" :src="item.src" mode="aspectFill"></image>
+                        <image v-if="moveType === 'image'" class="pre-image" :src="item.src" mode="aspectFill"
+                            @load="handleMediaLoad(item)" @error="handleMediaError(item)"></image>
                         <video v-else-if="moveType === 'video'" :id="'readonlyVideo' + index" class="myVideo"
-                            :src="item.src" :controls="false" :show-center-play-btn="true" object-fit="cover"></video>
+                            :src="item.src" :controls="false" :show-center-play-btn="true" object-fit="cover"
+                            @loadedmetadata="handleMediaLoad(item)" @error="handleMediaError(item)"></video>
+                        <view class="media-loading-overlay" v-if="item.loading">
+                            <view class="loading-spinner"></view>
+                        </view>
                         <view class="del-con" @click="delImages(item, index)" @touchstart.stop="delImageMp(item, index)"
                             @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
                             <view class="del-wrap">
@@ -37,12 +42,7 @@
                     @click="addImages">
                     <view class="add-wrap"
                         :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
-                        <slot name="add-button" :childWidth="childWidth" :borderRadius="borderRadius">
-                            <!-- 默认添加按钮 -->
-                            <image style="width: 54rpx;height: 54rpx;"
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAABIUlEQVRoQ+2a2w2DMAxFeQzWrsMUbadAsEw3S1CqVgppKwLX8BEOP4iHTXx8uUgWdVXoVhdaV0VhSmf7vr/H8V3XzY6V3P9iD+nYOI5P7/01LMI596AwoZV0TIBXIUWFXhKLFBWYSFGhhxQN6SFFQ5i4ogITKSr0cEVDekjRECauqMBEigq9U7piOk2yAti27SUe5ljlTfPEQ6KZecTvwl4P3ytvOv06R2HDMNzes7+6aRrvnHvtf50L13Lp50rx88zcvNlS3JpwKQ67XyK04nq2nFbk/LqVjin0TvmBNgQ2S4UUDcliHgpMpKjQwxUN6SFFQ5i4ogITKSr0cEVDekjRECauqMAsVoph+hVPtYr5+03p9tbYQ96xrYtT4ootbAJGVxxVTapVswAAAABJRU5ErkJggg==">
-                            </image>
-                        </slot>
+                        <slot name="add-button" :childWidth="childWidth" :borderRadius="borderRadius"></slot>
                     </view>
                 </view>
             </movable-area>
@@ -129,18 +129,18 @@ export default {
             type: Boolean,
             default: false
         },
-		// 对齐方式：'left' 从左往右排列，'right' 从右往左排列
-		align: {
-			type: String,
-			default: 'left',
-			validator: (value) => ['left', 'right'].includes(value)
-		},
-		// 是否可以拖拽排序
-		draggable: {
-			type: Boolean,
-			default: true
-		},
-	},
+        // 对齐方式：'left' 从左往右排列，'right' 从右往左排列
+        align: {
+            type: String,
+            default: 'left',
+            validator: (value) => ['left', 'right'].includes(value)
+        },
+        // 是否可以拖拽排序
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+    },
     data() {
         return {
             imageList: [],
@@ -274,7 +274,7 @@ export default {
          */
         calculatePosition(index, total) {
             const absY = Math.floor(index / this.colsValue)
-            
+
             if (this.align === 'right') {
                 // 靠右对齐：计算当前行的元素数量（包括按钮），然后从右往左排列
                 const currentRowItemCount = Math.min(total - absY * this.colsValue, this.colsValue)
@@ -306,7 +306,7 @@ export default {
             const theoreticalWidth = this.viewWidth * this.colsValue
             this.rightAlignOffset = Math.max(0, this.containerWidth - theoreticalWidth)
         },
-        
+
         /**
          * 获取总数（如果显示添加按钮，则包括按钮）
          */
@@ -317,7 +317,7 @@ export default {
             }
             return this.imageList.length
         },
-        
+
         getSrc(item) {
             if (this.keyName !== null) {
                 return item[this.keyName]
@@ -356,6 +356,8 @@ export default {
                                 this.$nextTick(() => {
                                     obj.x = this.getAlignedX(obj.absX)
                                     obj.y = obj.absY * this.viewWidth
+                                    obj.oldX = obj.x
+                                    obj.oldY = obj.y
                                 })
                             }, 0)
                         }
@@ -370,6 +372,8 @@ export default {
                             this.$nextTick(() => {
                                 item.x = this.getAlignedX(item.absX)
                                 item.y = item.absY * this.viewWidth
+                                item.oldX = item.x
+                                item.oldY = item.y
                             })
                         }, 0)
                     }
@@ -390,6 +394,8 @@ export default {
                 this.$nextTick(() => {
                     obj.x = this.getAlignedX(obj.absX)
                     obj.y = obj.absY * this.viewWidth
+                    obj.oldX = obj.x
+                    obj.oldY = obj.y
                 })
             }, 0)
         },
@@ -398,7 +404,7 @@ export default {
             if (!this.draggable) {
                 return
             }
-            
+
             this.imageList.forEach(v => {
                 v.zIndex = v.index + 9
             })
@@ -420,7 +426,7 @@ export default {
                 this.lastTouchEndTime = Date.now()
             } else if (eventType === 'mouseup') {
                 // 如果 100ms 内已经处理过 touchend，则忽略此 mouseup（避免重复）
-                if (this.lastTouchEndTime && Date.now() - this.lastTouchEndTime < 100) { 
+                if (this.lastTouchEndTime && Date.now() - this.lastTouchEndTime < 100) {
                     if (this.timer) {
                         clearTimeout(this.timer)
                         this.timer = null
@@ -454,6 +460,8 @@ export default {
                 this.$nextTick(() => {
                     item.x = this.getAlignedX(item.absX)
                     item.y = item.absY * this.viewWidth
+                    item.oldX = item.x
+                    item.oldY = item.y
                     this.tempItem = null
                     this.changeStatus = true
                 })
@@ -512,6 +520,8 @@ export default {
                         this.$nextTick(() => {
                             v.x = this.getAlignedX(v.absX)
                             v.y = v.absY * this.viewWidth
+                            v.oldX = v.x
+                            v.oldY = v.y
                             this.tempItem = null
                         })
                     }
@@ -621,7 +631,7 @@ export default {
         },
         addProperties(item) {
             const newIndex = this.imageList.length
-            
+
             // 先添加图片到列表
             this.imageList.push({
                 src: item,
@@ -638,9 +648,10 @@ export default {
                 id: this.guid(16),
                 disable: false,
                 offset: 0,
-                moveEnd: false
+                moveEnd: false,
+                loading: true
             })
-            
+
             // 如果是右对齐且显示按钮，添加新图片后需要重新计算所有图片位置
             if (this.align === 'right' && this.showAddButton) {
                 this.recalculateAllPositions()
@@ -656,10 +667,10 @@ export default {
                 obj.oldX = obj.x
                 obj.oldY = obj.y
             }
-            
+
             this.updateAddButtonPosition()
         },
-        
+
         /**
          * 重新计算所有图片的位置（用于右对齐时添加/删除图片）
          */
@@ -669,7 +680,7 @@ export default {
                 const pos = this.calculatePosition(i, totalWithButton)
                 const newX = this.getAlignedX(pos.absX)
                 const newY = pos.absY * this.viewWidth
-                
+
                 // 如果位置有变化，进行动画过渡
                 if (obj.absX !== pos.absX || obj.absY !== pos.absY) {
                     obj.x = obj.oldX
@@ -711,7 +722,7 @@ export default {
                 return
             }
             const length = this.imageList.length
-            
+
             if (this.align === 'right' && this.showAddButton) {
                 // 右对齐且显示按钮：按钮的位置就是"虚拟的第 length 个元素"的位置
                 // 总数包括按钮本身
@@ -726,6 +737,14 @@ export default {
                 this.add.x = this.getAlignedX(absX) + 'px'
                 this.add.y = absY * this.viewWidth + 'px'
             }
+        },
+        handleMediaLoad(item) {
+            if (!item) return
+            item.loading = false
+        },
+        handleMediaError(item) {
+            if (!item) return
+            item.loading = false
         }
     }
 }
@@ -774,6 +793,29 @@ export default {
                     }
                 }
 
+                .media-loading-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: rgba(0, 0, 0, 0.05);
+                    border-radius: inherit;
+                    z-index: 5;
+                }
+
+                .loading-spinner {
+                    width: 40rpx;
+                    height: 40rpx;
+                    border: 4rpx solid rgba(0, 0, 0, 0.1);
+                    border-top-color: #007aff;
+                    border-radius: 50%;
+                    animation: spinner-rotate 0.8s linear infinite;
+                }
+
                 .del-con {
                     position: absolute;
                     top: 0rpx;
@@ -813,4 +855,14 @@ export default {
         }
     }
 }
+
+@keyframes spinner-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>