xydata-tools 1.0.44 → 1.0.46

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

@@ -38,7 +38,7 @@
 					</view>
 					<view class="file-actions">
 						<view class="action-btn delete-btn" @click="removeFile(index)">
-							<text class="delete-icon">×</text>
+							×
 						</view>
 					</view>
 				</view>
@@ -57,7 +57,7 @@
 					</view>
 				</view>
 			</view>
-		</view> 
+		</view>
 	</view>
 </template>
 
@@ -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

@@ -72,31 +72,26 @@
 
       .file-actions {
         margin-left: 16rpx;
-        display: flex;
-        align-items: center;
-
-        .action-btn {
-          width: 44rpx;
-          height: 44rpx;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-color: rgba(0, 0, 0, 0.6);
+        position: relative;
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.6);
 
+        .delete-btn {
+          color: #fff;
+          font-size: 32rpx;
+          line-height: 1;
+          font-weight: 300;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          padding-bottom: 2px;
           &:active {
             opacity: 0.8;
           }
         }
-
-        .delete-btn {
-          .delete-icon {
-            color: #fff;
-            font-size: 32rpx;
-            line-height: 0.1;
-            font-weight: 300;
-          }
-        }
       }
 
       .progress-bar {

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: {
@@ -458,11 +458,8 @@ export default {
 
 		// ==================== 弹窗模式网格样式 ====================
 		popupGridStyle() {
-			// 如果指定了 itemWidth，使用固定宽度；否则使用 1fr 自动分配
-			const columnWidth = this.itemWidth ? `${this.itemWidth}rpx` : '1fr'
-
 			return {
-				gridTemplateColumns: `repeat(${this.cols}, ${columnWidth})`,
+				gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
 				gap: '10rpx'
 			}
 		}
@@ -496,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'
+			}
+		},
 
 		// ==================== 图片相关方法 ====================
 		/**
@@ -1018,7 +1057,7 @@ export default {
 					showCount: this.maxShowCount,
 					hiddenCount: this.allFileList.length - this.maxShowCount,
 					allFiles: this.allFileList
-				}) 
+				})
 
 				if (!this.hasEventListener('moreClick')) {
 					this.openPopup()

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,28 +129,30 @@ 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: [],
             width: 0,
+            containerWidth: 0,
             add: {
                 x: 0,
                 y: 0
             },
             colsValue: 0,
             viewWidth: 0,
+            rightAlignOffset: 0,
             tempItem: null,
             timer: null,
             changeStatus: true,
@@ -221,6 +223,14 @@ export default {
             },
             deep: true
         },
+        align() {
+            this.updateRightAlignOffset()
+            if (!this.viewWidth || !this.colsValue) {
+                return
+            }
+            this.recalculateAllPositions()
+            this.updateAddButtonPosition()
+        }
     },
     created() {
         this.width = uni.getSystemInfoSync().windowWidth
@@ -228,12 +238,17 @@ export default {
     mounted() {
         const query = uni.createSelectorQuery().in(this)
         query.select('.con').boundingClientRect(data => {
+            this.containerWidth = data.width
             this.colsValue = this.cols
             this.viewWidth = data.width / this.cols
             if (this.imageWidth > 0) {
                 this.viewWidth = this.rpx2px(this.imageWidth)
                 this.colsValue = Math.floor(data.width / this.viewWidth)
             }
+            if (this.colsValue < 1) {
+                this.colsValue = 1
+            }
+            this.updateRightAlignOffset()
             let list = this.value
             // #ifdef VUE3
             list = this.modelValue
@@ -259,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)
@@ -273,7 +288,25 @@ export default {
                 return { absX, absY }
             }
         },
-        
+        getRightOffset() {
+            return this.align === 'right' ? this.rightAlignOffset : 0
+        },
+        getAlignedX(absX) {
+            return this.getRightOffset() + absX * this.viewWidth
+        },
+        updateRightAlignOffset() {
+            if (!this.viewWidth || !this.colsValue || !this.containerWidth) {
+                this.rightAlignOffset = 0
+                return
+            }
+            if (this.align !== 'right') {
+                this.rightAlignOffset = 0
+                return
+            }
+            const theoreticalWidth = this.viewWidth * this.colsValue
+            this.rightAlignOffset = Math.max(0, this.containerWidth - theoreticalWidth)
+        },
+
         /**
          * 获取总数（如果显示添加按钮，则包括按钮）
          */
@@ -284,7 +317,7 @@ export default {
             }
             return this.imageList.length
         },
-        
+
         getSrc(item) {
             if (this.keyName !== null) {
                 return item[this.keyName]
@@ -297,10 +330,14 @@ export default {
             item.oldY = e.detail.y
             if (e.detail.source === 'touch') {
                 if (item.moveEnd) {
-                    item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY - item
+                    item.offset = Math.sqrt(Math.pow(item.oldX - this.getAlignedX(item.absX), 2) + Math.pow(item.oldY - item
                         .absY * this.viewWidth, 2))
                 }
-                let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth)
+                const offsetX = this.getRightOffset()
+                let x = Math.floor((e.detail.x - offsetX + this.viewWidth / 2) / this.viewWidth)
+                if (x < 0) {
+                    x = 0
+                }
                 if (x >= this.colsValue) return
                 let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth)
                 let index = this.colsValue * y + x
@@ -317,8 +354,10 @@ export default {
                             obj.y = obj.oldY
                             setTimeout(() => {
                                 this.$nextTick(() => {
-                                    obj.x = obj.absX * this.viewWidth
+                                    obj.x = this.getAlignedX(obj.absX)
                                     obj.y = obj.absY * this.viewWidth
+                                    obj.oldX = obj.x
+                                    obj.oldY = obj.y
                                 })
                             }, 0)
                         }
@@ -331,8 +370,10 @@ export default {
                     if (!item.moveEnd) {
                         setTimeout(() => {
                             this.$nextTick(() => {
-                                item.x = item.absX * this.viewWidth
+                                item.x = this.getAlignedX(item.absX)
                                 item.y = item.absY * this.viewWidth
+                                item.oldX = item.x
+                                item.oldY = item.y
                             })
                         }, 0)
                     }
@@ -351,8 +392,10 @@ export default {
             obj.absY = pos.absY
             setTimeout(() => {
                 this.$nextTick(() => {
-                    obj.x = obj.absX * this.viewWidth
+                    obj.x = this.getAlignedX(obj.absX)
                     obj.y = obj.absY * this.viewWidth
+                    obj.oldX = obj.x
+                    obj.oldY = obj.y
                 })
             }, 0)
         },
@@ -361,7 +404,7 @@ export default {
             if (!this.draggable) {
                 return
             }
-            
+
             this.imageList.forEach(v => {
                 v.zIndex = v.index + 9
             })
@@ -383,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
@@ -415,8 +458,10 @@ export default {
             item.moveEnd = false
             setTimeout(() => {
                 this.$nextTick(() => {
-                    item.x = item.absX * this.viewWidth
+                    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
                 })
@@ -473,8 +518,10 @@ export default {
                         v.x = v.oldX
                         v.y = v.oldY
                         this.$nextTick(() => {
-                            v.x = v.absX * this.viewWidth
+                            v.x = this.getAlignedX(v.absX)
                             v.y = v.absY * this.viewWidth
+                            v.oldX = v.x
+                            v.oldY = v.y
                             this.tempItem = null
                         })
                     }
@@ -526,7 +573,7 @@ export default {
                 const pos = this.calculatePosition(i, totalWithButton)
                 obj.absX = pos.absX
                 obj.absY = pos.absY
-                const newX = obj.absX * this.viewWidth
+                const newX = this.getAlignedX(obj.absX)
                 const newY = obj.absY * this.viewWidth
 
                 // 如果位置有变化，才进行动画
@@ -584,7 +631,7 @@ export default {
         },
         addProperties(item) {
             const newIndex = this.imageList.length
-            
+
             // 先添加图片到列表
             this.imageList.push({
                 src: item,
@@ -601,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()
@@ -614,15 +662,15 @@ export default {
                 const obj = this.imageList[newIndex]
                 obj.absX = pos.absX
                 obj.absY = pos.absY
-                obj.x = pos.absX * this.viewWidth
+                obj.x = this.getAlignedX(pos.absX)
                 obj.y = pos.absY * this.viewWidth
                 obj.oldX = obj.x
                 obj.oldY = obj.y
             }
-            
+
             this.updateAddButtonPosition()
         },
-        
+
         /**
          * 重新计算所有图片的位置（用于右对齐时添加/删除图片）
          */
@@ -630,9 +678,9 @@ export default {
             const totalWithButton = this.getTotalCount()
             this.imageList.forEach((obj, i) => {
                 const pos = this.calculatePosition(i, totalWithButton)
-                const newX = pos.absX * this.viewWidth
+                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
@@ -674,19 +722,29 @@ export default {
                 return
             }
             const length = this.imageList.length
-            
+
             if (this.align === 'right' && this.showAddButton) {
                 // 右对齐且显示按钮：按钮的位置就是"虚拟的第 length 个元素"的位置
                 // 总数包括按钮本身
                 const totalWithButton = length + 1
                 const pos = this.calculatePosition(length, totalWithButton)
-                this.add.x = pos.absX * this.viewWidth + 'px'
+                this.add.x = this.getAlignedX(pos.absX) + 'px'
                 this.add.y = pos.absY * this.viewWidth + 'px'
             } else {
                 // 左对齐或不显示按钮：按钮直接跟在最后一个元素后面
-                this.add.x = (length % this.colsValue) * this.viewWidth + 'px'
-                this.add.y = Math.floor(length / this.colsValue) * this.viewWidth + 'px'
+                const absX = length % this.colsValue
+                const absY = Math.floor(length / this.colsValue)
+                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
         }
     }
 }
@@ -735,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;
@@ -774,4 +855,14 @@ export default {
         }
     }
 }
+
+@keyframes spinner-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>