xydata-tools 1.0.43 → 1.0.44

package/README.md

@@ -30,8 +30,7 @@
 
 #### uni-app 组件
 
-- [PicPicker - 图片选择器](./docs/uniapp/PicPicker.md)
-- [VideoPicker - 视频选择器](./docs/uniapp/VideoPicker.md)
+- [MediaPicker - 媒体选择器](./docs/uniapp/MediaPicker.md) 
 - [FilePicker - 文件选择器](./docs/uniapp/FilePicker.md)
 
 ### 模版使用文档

package/dist/components/uni-app/{FilePicker.vue → file-picker/file-picker.vue}

@@ -6,7 +6,7 @@
 				<view class="file-item uploading-item" v-if="uploading">
 					<view class="file-info">
 						<view class="file-icon">
-							<image class="loading-icon" src="../../assets/loading.png" />
+							<image class="loading-icon" src="../../../assets/loading.png" />
 						</view>
 						<view class="file-content">
 							<text class="file-name">上传中 {{ uploadProgress }}%</text>
@@ -22,7 +22,7 @@
 					<!-- 默认上传按钮 -->
 					<button class="upload-btn" v-if="fileList.length < limit && !uploading"
 						@click="selectAndUploadFile">
-						上传文档
+						{{ buttonTitle }}
 					</button>
 				</slot>
 
@@ -57,7 +57,7 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view> 
 	</view>
 </template>
 
@@ -94,6 +94,11 @@ export default {
 		maxSize: {
 			type: Number,
 			default: 20
+		},
+		/** 上传按钮文字 */
+		buttonTitle: {
+			type: String,
+			default: '上传附件'
 		}
 	},
 	data() {
@@ -101,17 +106,6 @@ export default {
 			fileList: [],
 			uploading: false,
 			uploadProgress: 0,
-			// 文件图标映射
-			fileIcons: {
-				doc: 'https://img.icons8.com/color/96/000000/ms-word.png',
-				docx: 'https://img.icons8.com/color/96/000000/ms-word.png',
-				xls: 'https://img.icons8.com/color/96/000000/ms-excel.png',
-				xlsx: 'https://img.icons8.com/color/96/000000/ms-excel.png',
-				ppt: 'https://img.icons8.com/color/96/000000/ms-powerpoint.png',
-				pptx: 'https://img.icons8.com/color/96/000000/ms-powerpoint.png',
-				pdf: 'https://img.icons8.com/color/96/000000/pdf.png',
-				default: 'https://img.icons8.com/color/96/000000/document.png'
-			},
 			actualUploadUrl: ''  // 实际使用的上传地址
 		}
 	},
@@ -143,6 +137,17 @@ export default {
 		}
 	},
 	methods: {
+		// ==================== 事件监听辅助方法 ====================
+		/**
+		 * 检查事件是否被监听
+		 * @param {String} eventName - 事件名称
+		 * @returns {Boolean} - 是否被监听
+		 */
+		hasEventListener(eventName) {
+			return !!(this.$listeners && this.$listeners[eventName])
+		},
+
+		// ==================== 文件处理方法 ====================
 		/**
 		 * 获取文件扩展名
 		 */
@@ -157,7 +162,39 @@ export default {
 		 */
 		getFileIcon(fileName) {
 			const ext = this.getFileExtension(fileName)
-			return this.fileIcons[ext] || this.fileIcons.default
+			switch (ext) {
+				case 'doc':
+				case 'docx':
+					return require('../../../assets/file-icon/ms-word.png')
+				case 'xls':
+				case 'xlsx':
+					return require('../../../assets/file-icon/ms-excel.png')
+				case 'ppt':
+				case 'pptx':
+					return require('../../../assets/file-icon/ms-powerpoint.png')
+				case 'pdf':
+					return require('../../../assets/file-icon/pdf.png')
+				case 'png':
+				case 'jpeg':
+				case 'jpg':
+				case 'gif':
+				case 'webp':
+				case 'svg':
+					return require('../../../assets/file-icon/image.png')
+				case 'mp4':
+				case 'mov':
+				case 'avi':
+				case 'wmv':
+				case 'flv':
+				case 'mkv':
+				case 'webm':
+				case 'mpg':
+				case 'mpeg':
+				case 'm4v':
+					return require('../../../assets/file-icon/video.png')
+				default:
+					return require('../../../assets/file-icon/document.png')
+			}
 		},
 
 		/**
@@ -184,10 +221,19 @@ export default {
 
 			if (this.fileList.length >= this.limit || this.uploading) {
 				if (this.fileList.length >= this.limit) {
-					uni.showToast({
-						title: `最多上传${this.limit}个文件`,
-						icon: 'none'
+					// 触发文件数量限制事件
+					this.$emit('fileLimitReached', {
+						current: this.fileList.length,
+						limit: this.limit
 					})
+
+					// 如果用户未监听事件，显示默认提示
+					if (!this.hasEventListener('fileLimitReached')) {
+						uni.showToast({
+							title: `最多上传${this.limit}个文件`,
+							icon: 'none'
+						})
+					}
 				}
 				return
 			}
@@ -232,20 +278,44 @@ export default {
 			const ext = this.getFileExtension(fileName)
 
 			if (!this.accept.includes(ext)) {
-				uni.showToast({
-					title: `只支持${this.accept.join(', ')}格式`,
-					icon: 'none'
+				// 触发文件类型不支持事件
+				this.$emit('fileTypeInvalid', {
+					fileName: fileName,
+					fileType: ext,
+					acceptTypes: this.accept,
+					file: file,
+					message: `只支持${this.accept.join(', ')}格式`
 				})
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('fileTypeInvalid')) {
+					uni.showToast({
+						title: `只支持${this.accept.join(', ')}格式`,
+						icon: 'none'
+					})
+				}
 				return
 			}
 
 			// 验证文件大小
 			const maxBytes = this.maxSize * 1024 * 1024
 			if (file.size > maxBytes) {
-				uni.showToast({
-					title: `文件大小不能超过${this.maxSize}MB`,
-					icon: 'none'
+				// 触发文件大小超限事件
+				this.$emit('fileSizeExceed', {
+					size: file.size,
+					maxSize: maxBytes,
+					fileName: fileName,
+					file: file,
+					message: `文件大小不能超过${this.maxSize}MB（当前：${this.formatFileSize(file.size)}）`
 				})
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('fileSizeExceed')) {
+					uni.showToast({
+						title: `文件大小不能超过${this.maxSize}MB`,
+						icon: 'none'
+					})
+				}
 				return
 			}
 
@@ -259,9 +329,10 @@ export default {
 		uploadFile(file) {
 			this.uploading = true
 			this.uploadProgress = 0
+			let uploadTask = {}
 
 			// #ifdef H5
-			const uploadTask = uni.uploadFile({
+			uploadTask = uni.uploadFile({
 				url: this.finalUploadUrl,
 				file: file,
 				name: 'file',
@@ -275,7 +346,7 @@ export default {
 			// #endif
 
 			// #ifndef H5
-			const uploadTask = uni.uploadFile({
+			uploadTask = uni.uploadFile({
 				url: this.finalUploadUrl,
 				filePath: file.path,
 				name: 'file',
@@ -317,10 +388,19 @@ export default {
 				this.uploading = false
 				this.emitChange()
 
-				uni.showToast({
-					title: '上传成功',
-					icon: 'success'
+				// 触发上传成功事件
+				this.$emit('uploadSuccess', {
+					file: fileInfo,
+					response: result
 				})
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('uploadSuccess')) {
+					uni.showToast({
+						title: '上传成功',
+						icon: 'success'
+					})
+				}
 			} catch (e) {
 				this.handleUploadError(e)
 			}
@@ -331,10 +411,21 @@ export default {
 		 */
 		handleUploadError(err) {
 			console.error('文件上传失败:', err)
-			uni.showToast({
-				icon: 'none',
-				title: '文件上传失败'
+
+			// 触发上传失败事件
+			this.$emit('uploadFail', {
+				error: err,
+				message: '文件上传失败'
 			})
+
+			// 如果用户未监听事件，显示默认提示
+			if (!this.hasEventListener('uploadFail')) {
+				uni.showToast({
+					icon: 'none',
+					title: '文件上传失败'
+				})
+			}
+
 			this.uploading = false
 			this.uploadProgress = 0
 		},
@@ -420,44 +511,71 @@ export default {
 		 * 打开文档（小程序等）
 		 */
 		openDocument(file) {
+			// 判断文件类型是否为可打开的文档类型
+			const ext = this.getFileExtension(file.name)
+			const supportedTypes = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
+			const isDocument = supportedTypes.includes(ext)
+
+			// 显示加载提示
 			uni.showLoading({
-				title: '正在打开...'
+				title: isDocument ? '正在打开...' : '正在下载...'
 			})
 
-			// 先下载文件到本地
+			// 下载文件
 			uni.downloadFile({
 				url: file.url,
 				success: (res) => {
 					if (res.statusCode === 200) {
-						// 打开文档
-						uni.openDocument({
-							filePath: res.tempFilePath,
-							fileType: this.getFileExtension(file.name),
-							success: () => {
-								uni.hideLoading()
-							},
-							fail: (err) => {
-								console.error('打开文档失败:', err)
-								uni.hideLoading()
-								uni.showToast({
-									title: '打开文档失败',
-									icon: 'none'
-								})
-							}
-						})
+						if (isDocument) {
+							// 打开文档
+							uni.openDocument({
+								filePath: res.tempFilePath,
+								fileType: ext,
+								success: () => {
+									uni.hideLoading()
+								},
+								fail: (err) => {
+									console.error('打开文档失败:', err)
+									uni.hideLoading()
+									uni.showToast({
+										title: '打开文档失败',
+										icon: 'none'
+									})
+								}
+							})
+						} else {
+							// 保存文件到本地
+							uni.saveFile({
+								tempFilePath: res.tempFilePath,
+								success: (saveRes) => {
+									uni.hideLoading()
+									uni.showToast({
+										title: '已保存到本地',
+										icon: 'success'
+									})
+								},
+								fail: () => {
+									uni.hideLoading()
+									uni.showToast({
+										title: '保存失败',
+										icon: 'none'
+									})
+								}
+							})
+						}
 					} else {
 						uni.hideLoading()
 						uni.showToast({
-							title: '下载文件失败',
+							title: '下载失败',
 							icon: 'none'
 						})
 					}
 				},
 				fail: (err) => {
-					console.error('下载文件失败:', err)
+					console.error('下载失败:', err)
 					uni.hideLoading()
 					uni.showToast({
-						title: '下载文件失败',
+						title: '下载失败',
 						icon: 'none'
 					})
 				}
@@ -495,203 +613,5 @@ export default {
 </script>
 
 <style lang="scss">
-.file-picker-wrapper {
-	width: 100%;
-}
-
-@keyframes rotate {
-	0% {
-		transform: rotate(0deg);
-	}
-
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-.file-picker-box {
-	.upload-view {
-		padding: 8rpx 0;
-
-		.file-item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 16rpx 20rpx;
-			margin-top: 12rpx;
-			background-color: #fff;
-			border-radius: 8rpx;
-			border: 2rpx solid #E5E5E5;
-			transition: all 0.3s;
-
-			&:active {
-				background-color: #f5f5f5;
-			}
-
-			.file-info {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				min-width: 0;
-
-				.file-icon {
-					width: 56rpx;
-					height: 56rpx;
-					margin-right: 16rpx;
-					flex-shrink: 0;
-
-					.icon-image {
-						width: 100%;
-						height: 100%;
-					}
-
-					.loading-icon {
-						width: 100%;
-						height: 100%;
-						animation: rotate 2s linear infinite;
-					}
-				}
-
-				.file-content {
-					flex: 1;
-					min-width: 0;
-
-					.file-name {
-						font-size: 28rpx;
-						color: #333;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-			}
-
-			.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);
-
-					&:active {
-						opacity: 0.8;
-					}
-				}
-
-				.delete-btn {
-					.delete-icon {
-						color: #fff;
-						font-size: 32rpx;
-						line-height: 0.1;
-						font-weight: 300;
-					}
-				}
-			}
-
-			.progress-bar {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				height: 8rpx;
-				background-color: #e6f7ff;
-				border-radius: 0 0 12rpx 12rpx;
-				overflow: hidden;
-
-				.progress-bar-inner {
-					height: 100%;
-					background-color: #1890ff;
-					transition: width 0.3s;
-				}
-			}
-
-			&.uploading-item {
-				border-color: #1890ff;
-				background-color: rgba(24, 144, 255, 0.05);
-				position: relative;
-				padding-bottom: 24rpx;
-
-				.file-name {
-					color: #1890ff;
-				}
-			}
-		}
-
-		.upload-btn {
-			width: 100%;
-			height: 80rpx;
-			background-color: #fff;
-			color: #1890ff;
-			border: 2rpx solid #1890ff;
-			border-radius: 12rpx;
-			font-size: 28rpx;
-			transition: all 0.3s;
-
-			&:active {
-				opacity: 0.8;
-				background-color: #ecf5ff;
-			}
-
-			&::after {
-				border: none;
-			}
-		}
-	}
-}
-
-.file-readonly {
-	.file-item {
-		display: flex;
-		align-items: center;
-		padding: 16rpx 20rpx;
-		margin-bottom: 12rpx;
-		background-color: #fff;
-		border-radius: 8rpx;
-		border: 2rpx solid #E5E5E5;
-		transition: all 0.3s;
-
-		&:active {
-			background-color: #f5f5f5;
-		}
-
-		.file-info {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			min-width: 0;
-
-			.file-icon {
-				width: 56rpx;
-				height: 56rpx;
-				margin-right: 16rpx;
-				flex-shrink: 0;
-
-				.icon-image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.file-content {
-				flex: 1;
-				min-width: 0;
-
-				.file-name {
-					font-size: 28rpx;
-					color: #333;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-		}
-	}
-}
+@import './styles.scss';
 </style>