xydata-tools-uniapp 1.0.0

package/README.md

@@ -0,0 +1,60 @@
+# xydata-tools-uniapp
+
+鑫义科技 uni-app 组件库，从 `xydata-tools` 独立拆分而来，专注于 uni-app 端（微信小程序 / H5 / App）的组件能力。
+
+## 组件清单
+
+- **MediaPicker** - 媒体（图片/视频）选择上传组件，支持图片水印、拖拽排序、只读预览等
+- **FilePicker** - 文件选择上传组件
+
+## 本地开发
+
+1. 在项目根目录执行：
+
+    ```bash
+    yarn dev
+    ```
+
+2. 在 example-uniapp 下运行：
+
+    ```bash
+    yarn link xydata-tools-uniapp
+    ```
+
+3. 将 example-uniapp 添加到 H-Builder 中运行
+
+    > example-uniapp 的 `pages.json` 中 `easycom` 已配置好组件路径，会自动扫描引入。
+
+## 构建发布
+
+```bash 
+npm run prepublishOnly
+```
+
+发布 npm 包：
+
+```bash
+npm config set registry https://registry.npmjs.org
+npm publish -d
+```
+
+发布完成后，还原 npm 源（淘宝源）：
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
+
+## 目录结构
+
+```
+src/
+  index.js              # 组件库入口（导出 MediaPicker / FilePicker）
+  index.d.ts            # 类型声明
+  components/uni-app/   # uni-app 组件源码
+  utils/                # 共享工具（watermark-shared 等）
+  assets/               # 组件图片资源
+example-uniapp/         # 示例工程（HBuilder 直接运行）
+docs/                   # 组件文档
+```
+
+---

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

@@ -0,0 +1,633 @@
+<template>
+	<view class="file-picker-wrapper">
+		<view class="file-picker-box" v-if="!readonly">
+			<view class="upload-view">
+				<!-- 上传中状态 -->
+				<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" />
+						</view>
+						<view class="file-content">
+							<text class="file-name">上传中 {{ uploadProgress }}%</text>
+						</view>
+					</view>
+					<view class="progress-bar">
+						<view class="progress-bar-inner" :style="{ width: uploadProgress + '%' }"></view>
+					</view>
+				</view>
+
+				<!-- 自定义上传按钮插槽 -->
+				<slot name="upload-button" :select="selectAndUploadFile" :count="fileList.length">
+					<!-- 默认上传按钮 -->
+					<button class="upload-btn" v-if="fileList.length < limit && !uploading" @click="selectAndUploadFile">
+						{{ buttonTitle }}
+					</button>
+				</slot>
+
+				<!-- 文件列表 -->
+				<view class="file-item" v-for="(file, index) in fileList" :key="index">
+					<view class="file-info" @click="handleFileClick(file)">
+						<view class="file-icon">
+							<image :src="getFileIcon(file.name)" mode="aspectFit" class="icon-image"></image>
+						</view>
+						<view class="file-content">
+							<text class="file-name">{{ file.name }}</text>
+						</view>
+					</view>
+					<view class="file-actions">
+						<view class="action-btn delete-btn" @click="removeFile(index)"> × </view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 只读模式 -->
+		<view class="file-readonly" v-else-if="fileList.length">
+			<view class="file-item" v-for="(file, index) in fileList" :key="index">
+				<view class="file-info" @click="handleFileClick(file)">
+					<view class="file-icon">
+						<image :src="getFileIcon(file.name)" mode="aspectFit" class="icon-image"></image>
+					</view>
+					<view class="file-content">
+						<text class="file-name">{{ file.name }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import msWord from '../../../assets/file-icon/ms-word.png';
+import msExcel from '../../../assets/file-icon/ms-excel.png';
+import msPowerpoint from '../../../assets/file-icon/ms-powerpoint.png';
+import pdfIcon from '../../../assets/file-icon/pdf.png';
+import imageIcon from '../../../assets/file-icon/image.png';
+import videoIcon from '../../../assets/file-icon/video.png';
+import documentIcon from '../../../assets/file-icon/document.png';
+import zipIcon from '../../../assets/file-icon/zip.png';
+
+export default {
+	name: 'FilePicker',
+	// #ifdef VUE3
+	emits: ['change', 'update:modelValue', 'fileLimitReached', 'fileTypeInvalid', 'fileSizeExceed', 'uploadSuccess', 'uploadFail', 'progress', 'click'],
+	// #endif
+	props: {
+		// #ifdef VUE3
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
+		// #ifndef VUE3
+		value: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
+		/** 上传地址 */
+		uploadUrl: {
+			type: String,
+			default: ''
+		},
+		/** 只读模式 */
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		/** 文件列表(兼容非v-model用法) */
+		files: {
+			type: Array,
+			default: () => []
+		},
+		/** 最大上传数量 */
+		limit: {
+			type: Number,
+			default: 10
+		},
+		/** 允许的文件扩展名 */
+		accept: {
+			type: Array,
+			default: () => ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx', 'zip', 'rar', 'png', 'jpg']
+		},
+		/** 文件大小限制（MB） */
+		maxSize: {
+			type: Number,
+			default: 20
+		},
+		/** 上传按钮文字 */
+		buttonTitle: {
+			type: String,
+			default: '上传附件'
+		}
+	},
+	data() {
+		return {
+			fileList: [],
+			uploading: false,
+			uploadProgress: 0,
+			actualUploadUrl: '' // 实际使用的上传地址
+		};
+	},
+	computed: {
+		// 判断是否为H5环境
+		isH5() {
+			// #ifdef H5
+			return true;
+			// #endif
+			// #ifndef H5
+			return false;
+			// #endif
+		},
+		/** 实际使用的上传地址 */
+		finalUploadUrl() {
+			return this.actualUploadUrl || this.uploadUrl || (getApp().globalData && getApp().globalData.uploadUrl) || '';
+		},
+		/** 统一读取外部值 */
+		internalValue() {
+			// #ifdef VUE3
+			return this.modelValue && this.modelValue.length ? this.modelValue : this.files;
+			// #endif
+			// #ifndef VUE3
+			return this.value && this.value.length ? this.value : this.files;
+			// #endif
+		}
+	},
+	watch: {
+		internalValue: {
+			handler(val) {
+				this.fileList = val || [];
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	mounted() {
+		this.fileList = this.internalValue || [];
+		// 初始化上传地址
+		if (!this.uploadUrl) {
+			this.actualUploadUrl = (getApp().globalData && getApp().globalData.uploadUrl) || '';
+		}
+	},
+	methods: {
+		// ==================== 事件监听辅助方法 ====================
+		/**
+		 * 检查事件是否被监听
+		 * @param {String} eventName - 事件名称
+		 * @returns {Boolean} - 是否被监听
+		 */
+		hasEventListener(eventName) {
+			// #ifdef VUE3
+			const onEventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+			return !!(this.$attrs[eventName] || this.$attrs[onEventName]);
+			// #endif
+			// #ifndef VUE3
+			return !!(this.$listeners && this.$listeners[eventName]);
+			// #endif
+		},
+
+		// ==================== 文件处理方法 ====================
+		/**
+		 * 获取文件扩展名
+		 */
+		getFileExtension(fileName) {
+			if (!fileName) return '';
+			const parts = fileName.split('.');
+			return parts.length > 1 ? parts.pop().toLowerCase() : '';
+		},
+
+		/**
+		 * 获取文件图标
+		 */
+		getFileIcon(fileName) {
+			const ext = this.getFileExtension(fileName);
+			switch (ext) {
+				case 'doc':
+				case 'docx':
+					return msWord;
+				case 'xls':
+				case 'xlsx':
+					return msExcel;
+				case 'ppt':
+				case 'pptx':
+					return msPowerpoint;
+				case 'pdf':
+					return pdfIcon;
+				case 'png':
+				case 'jpeg':
+				case 'jpg':
+				case 'gif':
+					return imageIcon;
+				case 'mp4':
+				case 'mov':
+				case 'avi':
+				case 'wmv':
+				case 'flv':
+				case 'mkv':
+				case 'webm':
+				case 'mpg':
+				case 'mpeg':
+				case 'm4v':
+					return videoIcon;
+				case 'rar':
+				case 'zip':
+				case '7z':
+					return zipIcon;
+				default:
+					return documentIcon;
+			}
+		},
+
+		/**
+		 * 格式化文件大小
+		 */
+		formatFileSize(bytes) {
+			if (!bytes) return '';
+			if (bytes < 1024) return bytes + 'B';
+			if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB';
+			return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
+		},
+
+		/**
+		 * 选择并上传文件
+		 */
+		selectAndUploadFile() {
+			if (!this.finalUploadUrl) {
+				uni.showToast({
+					title: '请先配置上传地址',
+					icon: 'none'
+				});
+				return;
+			}
+
+			if (this.fileList.length >= this.limit || this.uploading) {
+				if (this.fileList.length >= this.limit) {
+					this.$emit('fileLimitReached', {
+						current: this.fileList.length,
+						limit: this.limit
+					});
+					if (!this.hasEventListener('fileLimitReached')) {
+						uni.showToast({
+							title: `最多上传${this.limit}个文件`,
+							icon: 'none'
+						});
+					}
+				}
+				return;
+			}
+
+			// #ifdef H5
+			uni.chooseFile({
+				count: 1,
+				extension: this.accept,
+				success: (res) => {
+					this.validateAndUpload(res.tempFiles[0]);
+				}
+			});
+			// #endif
+
+			// #ifndef H5
+			uni.chooseMessageFile({
+				count: 1,
+				extension: this.accept,
+				success: (res) => {
+					this.validateAndUpload(res.tempFiles[0]);
+				}
+			});
+			// #endif
+		},
+
+		/**
+		 * 验证并上传文件
+		 */
+		validateAndUpload(file) {
+			const ext = this.getFileExtension(file.name);
+
+			if (this.accept && this.accept.length && !this.accept.includes(ext)) {
+				this.$emit('fileTypeInvalid', {
+					fileName: file.name,
+					fileType: ext,
+					acceptTypes: this.accept,
+					file: file
+				});
+				if (!this.hasEventListener('fileTypeInvalid')) {
+					uni.showToast({
+						title: `不支持${ext}格式`,
+						icon: 'none'
+					});
+				}
+				return;
+			}
+
+			const maxBytes = this.maxSize * 1024 * 1024;
+			if (file.size > maxBytes) {
+				this.$emit('fileSizeExceed', {
+					size: file.size,
+					maxSize: maxBytes,
+					fileName: file.name
+				});
+				if (!this.hasEventListener('fileSizeExceed')) {
+					uni.showToast({
+						title: `不能超过${this.maxSize}MB`,
+						icon: 'none'
+					});
+				}
+				return;
+			}
+
+			this.uploadFile(file);
+		},
+
+		/**
+		 * 上传文件核心
+		 */
+		uploadFile(file) {
+			this.uploading = true;
+			this.uploadProgress = 0;
+
+			const uploadTask = uni.uploadFile({
+				url: this.finalUploadUrl,
+				filePath: file.path,
+				name: 'file',
+				success: (uploadFileRes) => {
+					this.handleUploadSuccess(uploadFileRes, file);
+				},
+				fail: (err) => {
+					this.handleUploadError(err);
+				}
+			});
+
+			// 监听上传进度
+			uploadTask.onProgressUpdate((res) => {
+				this.uploadProgress = res.progress;
+				this.$emit('progress', res);
+			});
+		},
+
+		/**
+		 * 处理上传成功
+		 */
+		handleUploadSuccess(uploadFileRes, originalFile) {
+			try {
+				const result = JSON.parse(uploadFileRes.data);
+				console.log('文件上传成功:', result);
+
+				const fileInfo = {
+					fileName: result.data.fileName,
+					name: result.data.originFileName || originalFile.name,
+					url: result.data.pathUrl
+				};
+
+				this.fileList.push(fileInfo);
+				this.uploadProgress = 100;
+				this.uploading = false;
+				this.emitChange();
+
+				// 触发上传成功事件
+				this.$emit('uploadSuccess', {
+					file: fileInfo,
+					response: result
+				});
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('uploadSuccess')) {
+					uni.showToast({
+						title: '上传成功',
+						icon: 'success'
+					});
+				}
+			} catch (e) {
+				this.handleUploadError(e);
+			}
+		},
+
+		/**
+		 * 处理上传失败
+		 */
+		handleUploadError(err) {
+			console.error('文件上传失败:', err);
+
+			// 触发上传失败事件
+			this.$emit('uploadFail', {
+				error: err,
+				message: '文件上传失败'
+			});
+
+			// 如果用户未监听事件，显示默认提示
+			if (!this.hasEventListener('uploadFail')) {
+				uni.showToast({
+					icon: 'none',
+					title: '文件上传失败'
+				});
+			}
+
+			this.uploading = false;
+			this.uploadProgress = 0;
+		},
+
+		/**
+		 * 删除文件
+		 */
+		removeFile(index) {
+			uni.showModal({
+				title: '提示',
+				content: '确定要删除该文件吗？',
+				success: (res) => {
+					if (res.confirm) {
+						this.fileList.splice(index, 1);
+						this.emitChange();
+					}
+				}
+			});
+		},
+
+		/**
+		 * 处理文件点击
+		 */
+		handleFileClick(file) {
+			if (this.hasEventListener('click')) {
+				this.$emit('click', file);
+				return;
+			}
+
+			if (!file.url) {
+				uni.showToast({
+					title: '文件地址无效',
+					icon: 'none'
+				});
+				return;
+			}
+
+			// #ifdef H5
+			// H5环境直接下载
+			this.downloadFileH5(file);
+			// #endif
+
+			// #ifndef H5
+			// 小程序等环境使用 uni.openDocument
+			this.openDocument(file);
+			// #endif
+		},
+
+		/**
+		 * H5环境下载文件
+		 */
+		downloadFileH5(file) {
+			uni.showLoading({
+				title: '下载中...'
+			});
+
+			// 使用 fetch 下载文件
+			fetch(file.url)
+				.then((res) => res.blob())
+				.then((blob) => {
+					// 创建 blob URL
+					const blobUrl = URL.createObjectURL(blob);
+					const a = document.createElement('a');
+					a.href = blobUrl;
+					a.download = file.name;
+					document.body.appendChild(a);
+					a.click();
+					document.body.removeChild(a);
+
+					// 释放 blob URL
+					setTimeout(() => {
+						URL.revokeObjectURL(blobUrl);
+					}, 100);
+
+					uni.hideLoading();
+				})
+				.catch((err) => {
+					console.error('下载文件失败:', err);
+					uni.hideLoading();
+					uni.showToast({
+						title: '下载失败',
+						icon: 'none'
+					});
+				});
+		},
+
+		/**
+		 * 打开文档（小程序等）
+		 */
+		openDocument(file) {
+			// 判断文件类型是否为可打开的文档类型
+			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({
+				title: isDocument ? '正在打开...' : '正在下载...'
+			});
+
+			// 下载文件
+			uni.downloadFile({
+				url: file.url,
+				success: (res) => {
+					if (res.statusCode === 200) {
+						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: '下载失败',
+							icon: 'none'
+						});
+					}
+				},
+				fail: (err) => {
+					console.error('下载失败:', err);
+					uni.hideLoading();
+					uni.showToast({
+						title: '下载失败',
+						icon: 'none'
+					});
+				}
+			});
+		},
+
+		/**
+		 * 触发变更事件
+		 */
+		emitChange() {
+			this.$emit('change', this.fileList);
+			// #ifdef VUE3
+			this.$emit('update:modelValue', this.fileList);
+			// #endif
+			// #ifndef VUE3
+			this.$emit('input', this.fileList);
+			// #endif
+		},
+
+		/**
+		 * 获取文件列表
+		 * @returns {Array} 文件列表
+		 */
+		getFileList() {
+			return this.fileList;
+		},
+
+		/**
+		 * 获取参数（不包含 url 字段）
+		 * @returns {String} JSON 字符串
+		 */
+		getParams() {
+			const params = this.fileList.map((file) => {
+				const { url, ...rest } = file;
+				return rest;
+			});
+			return JSON.stringify(params);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import './styles.scss';
+</style>