@ecolovo/uniapp-components 2.0.4 → 2.0.6

package/components/upload/composable.d.ts

@@ -0,0 +1,24 @@
+import { type CommonProps } from './types';
+declare const useUpload: <Emit extends ((event: "update:modelValue", value: UniApp.UploadMediaFile[]) => void) & ((event: "change", value: UniApp.UploadMediaFile[]) => void)>(props: CommonProps, emit: Emit) => {
+    currentValue: import("vue").WritableComputedRef<UniNamespace.UploadMediaFile[], UniNamespace.UploadMediaFile[]>;
+    isReadonly: import("vue").ComputedRef<boolean>;
+    isUploading: import("vue").ComputedRef<boolean>;
+    restCount: import("vue").ComputedRef<number>;
+    previewList: import("vue").ComputedRef<string[]>;
+    validateFiles: (files: UniApp.UploadMediaFile[]) => {
+        uploadStatus: "ready";
+        duration?: number | undefined;
+        fileType?: "video" | "image" | undefined;
+        height?: number | undefined;
+        size?: number | undefined;
+        tempFilePath?: string | undefined;
+        thumbTempFilePath?: string | undefined;
+        width?: number | undefined;
+        name?: string;
+        type?: string;
+        url?: string;
+    }[] | undefined;
+    upload: () => Promise<(UniNamespace.UploadMediaFile | null)[]>;
+    deleteFile: (index: number) => void;
+};
+export { useUpload };

package/components/upload/composable.js

@@ -0,0 +1,173 @@
+import { computed, inject, ref, watch } from 'vue';
+import { floor } from '@ecolovo/utils';
+import { toUploadMediaFile } from '../../utils/upload';
+const ONE_KB = 1024;
+const ONE_MB = ONE_KB * 1024;
+const ONE_GB = ONE_MB * 1024;
+/**
+ * 格式化文件尺寸
+ *
+ * @param {number} size 文件大小 B
+ */
+function fileSize(size) {
+    if (size < 0) {
+        return { size: -1, unit: 'B', formattedSize: '' };
+    }
+    const rtnObj = {};
+    if (size < 100) {
+        rtnObj.size = size;
+        rtnObj.unit = 'B';
+    }
+    else if (size < ONE_KB) {
+        rtnObj.size = floor(size / ONE_KB, -2);
+        rtnObj.unit = 'KB';
+    }
+    else if (size < ONE_MB) {
+        rtnObj.size = floor(size / ONE_KB);
+        rtnObj.unit = 'KB';
+    }
+    else if (size < ONE_GB) {
+        rtnObj.size = floor(size / ONE_MB, -1);
+        rtnObj.unit = 'MB';
+    }
+    else {
+        rtnObj.size = floor(size / ONE_GB, -1);
+        rtnObj.unit = 'GB';
+    }
+    rtnObj.formattedSize = `${rtnObj.size} ${rtnObj.unit}`;
+    return rtnObj;
+}
+const useUpload = (props, emit) => {
+    /** 表单是否只读 */
+    const isFormReadonly = inject('ecolovo/form/readonly', computed(() => false));
+    const isReadonly = computed(() => {
+        return props.readonly || isFormReadonly.value;
+    });
+    /** 剩余可上传文件数 */
+    const restCount = computed(() => {
+        const max = props.max ?? 9;
+        if (max <= 0)
+            return 9;
+        return max - currentValue.value.length;
+    });
+    const innerValue = ref(props.modelValue || []);
+    watch(() => props.modelValue, (newValue, oldValue) => {
+        if (newValue || (oldValue && !newValue)) {
+            innerValue.value = newValue || [];
+        }
+    });
+    const currentValue = computed({
+        get: function () {
+            return toUploadMediaFile(innerValue.value);
+        },
+        set: function (val) {
+            innerValue.value = val;
+            emit('update:modelValue', val);
+        },
+    });
+    const previewList = computed(() => {
+        return currentValue.value.map((item) => item.tempFilePath || item.url || '');
+    });
+    /** 当前是否有文件还在上传 */
+    const isUploading = computed(() => {
+        return currentValue.value.some((item) => item.uploadStatus === 'uploading');
+    });
+    /** 校验待上传文件 */
+    const validateFiles = (files) => {
+        if (files.length === 0)
+            return;
+        const maxSize = props.maxSize ?? 0;
+        // 过滤大文件
+        const selectedFiles = files.filter((file) => (file.size || 0) <= maxSize);
+        if (selectedFiles.length < files.length) {
+            uni.showToast({
+                icon: 'none',
+                title: `文件大小不能超过${fileSize(maxSize).formattedSize}`,
+                duration: 2000,
+            });
+        }
+        if (selectedFiles.length === 0)
+            return;
+        // 校验数量
+        if (selectedFiles.length > restCount.value) {
+            uni.showToast({
+                icon: 'none',
+                title: `最多只能上传${props.max}个文件`,
+                duration: 2000,
+            });
+        }
+        const validFiles = selectedFiles
+            .slice(0, restCount.value)
+            .map((file) => ({ ...file, uploadStatus: 'ready' }));
+        currentValue.value = currentValue.value.concat(validFiles);
+        return validFiles;
+    };
+    /**
+     * 上传文件
+     */
+    const upload = () => {
+        return Promise.all(currentValue.value.map(async (file, _index, arr) => {
+            if (file.uploadStatus !== 'ready')
+                return file;
+            try {
+                file.uploadStatus = 'uploading';
+                const res = await props.uploadHandler?.(file);
+                const index = arr.findIndex((item) => item.tempFilePath === file.tempFilePath);
+                if (index < 0) {
+                    return null;
+                }
+                const tempCurrentValue = [...currentValue.value];
+                tempCurrentValue.splice(index, 1, res && res.url
+                    ? {
+                        ...file,
+                        name: res.name,
+                        url: res.url,
+                        type: file.type,
+                        uploadStatus: 'success',
+                    }
+                    : {
+                        ...file,
+                        uploadStatus: 'error',
+                    });
+                currentValue.value = tempCurrentValue;
+                return currentValue.value[index];
+            }
+            catch {
+                const index = currentValue.value.findIndex((item) => item.tempFilePath === file.tempFilePath);
+                if (index < 0) {
+                    return null;
+                }
+                const tempCurrentValue = [...currentValue.value];
+                tempCurrentValue.splice(index, 1, {
+                    ...file,
+                    uploadStatus: 'error',
+                });
+                currentValue.value = tempCurrentValue;
+                return currentValue.value[index];
+            }
+        }));
+    };
+    /**
+     * 删除文件
+     *
+     * @param index 文件索引
+     */
+    const deleteFile = (index) => {
+        if (index >= 0 && index < currentValue.value.length) {
+            const tempCurrentValue = [...currentValue.value];
+            tempCurrentValue.splice(index, 1);
+            currentValue.value = tempCurrentValue;
+        }
+    };
+    return {
+        currentValue,
+        isReadonly,
+        isUploading,
+        restCount,
+        previewList,
+        validateFiles,
+        upload,
+        deleteFile,
+    };
+};
+export { useUpload };

package/components/upload/composable.ts

@@ -0,0 +1,228 @@
+import { computed, inject, ref, watch } from 'vue';
+import { floor } from '@ecolovo/utils';
+import { type CommonProps } from './types';
+import { toUploadMediaFile } from '../../utils/upload';
+
+const ONE_KB = 1024;
+const ONE_MB = ONE_KB * 1024;
+const ONE_GB = ONE_MB * 1024;
+
+interface FileSizeInfo {
+	size: number;
+	unit: 'B' | 'KB' | 'MB' | 'GB';
+	formattedSize: string;
+}
+
+/**
+ * 格式化文件尺寸
+ *
+ * @param {number} size 文件大小 B
+ */
+function fileSize(size: number): FileSizeInfo {
+	if (size < 0) {
+		return { size: -1, unit: 'B', formattedSize: '' };
+	}
+	const rtnObj = {} as FileSizeInfo;
+	if (size < 100) {
+		rtnObj.size = size;
+		rtnObj.unit = 'B';
+	} else if (size < ONE_KB) {
+		rtnObj.size = floor(size / ONE_KB, -2);
+		rtnObj.unit = 'KB';
+	} else if (size < ONE_MB) {
+		rtnObj.size = floor(size / ONE_KB);
+		rtnObj.unit = 'KB';
+	} else if (size < ONE_GB) {
+		rtnObj.size = floor(size / ONE_MB, -1);
+		rtnObj.unit = 'MB';
+	} else {
+		rtnObj.size = floor(size / ONE_GB, -1);
+		rtnObj.unit = 'GB';
+	}
+	rtnObj.formattedSize = `${rtnObj.size} ${rtnObj.unit}`;
+	return rtnObj;
+}
+
+const useUpload = <
+	Emit extends ((
+		event: 'update:modelValue',
+		value: UniApp.UploadMediaFile[]
+	) => void) &
+		((event: 'change', value: UniApp.UploadMediaFile[]) => void)
+>(
+	props: CommonProps,
+	emit: Emit
+) => {
+	/** 表单是否只读 */
+	const isFormReadonly = inject(
+		'ecolovo/form/readonly',
+		computed(() => false)
+	);
+
+	const isReadonly = computed(() => {
+		return props.readonly || isFormReadonly.value;
+	});
+
+	/** 剩余可上传文件数 */
+	const restCount = computed(() => {
+		const max = props.max ?? 9;
+		if (max <= 0) return 9;
+		return max - currentValue.value.length;
+	});
+
+	const innerValue = ref<UniApp.UploadMediaFile[] | string[]>(
+		props.modelValue || []
+	);
+
+	watch(
+		() => props.modelValue,
+		(newValue, oldValue) => {
+			if (newValue || (oldValue && !newValue)) {
+				innerValue.value = newValue || [];
+			}
+		}
+	);
+
+	const currentValue = computed<UniApp.UploadMediaFile[]>({
+		get: function () {
+			return toUploadMediaFile(innerValue.value);
+		},
+		set: function (val) {
+			innerValue.value = val;
+			emit('update:modelValue', val);
+		},
+	});
+
+	const previewList = computed(() => {
+		return currentValue.value.map(
+			(item) => item.tempFilePath || item.url || ''
+		);
+	});
+
+	/** 当前是否有文件还在上传 */
+	const isUploading = computed(() => {
+		return currentValue.value.some(
+			(item) => item.uploadStatus === 'uploading'
+		);
+	});
+
+	/** 校验待上传文件 */
+	const validateFiles = (files: UniApp.UploadMediaFile[]) => {
+		if (files.length === 0) return;
+
+		const maxSize = props.maxSize ?? 0;
+
+		// 过滤大文件
+		const selectedFiles = files.filter(
+			(file) => (file.size || 0) <= maxSize
+		);
+		if (selectedFiles.length < files.length) {
+			uni.showToast({
+				icon: 'none',
+				title: `文件大小不能超过${fileSize(maxSize).formattedSize}`,
+				duration: 2000,
+			});
+		}
+		if (selectedFiles.length === 0) return;
+
+		// 校验数量
+		if (selectedFiles.length > restCount.value) {
+			uni.showToast({
+				icon: 'none',
+				title: `最多只能上传${props.max}个文件`,
+				duration: 2000,
+			});
+		}
+
+		const validFiles = selectedFiles
+			.slice(0, restCount.value)
+			.map((file) => ({ ...file, uploadStatus: 'ready' as const }));
+		currentValue.value = currentValue.value.concat(validFiles);
+
+		return validFiles;
+	};
+
+	/**
+	 * 上传文件
+	 */
+	const upload = () => {
+		return Promise.all(
+			currentValue.value.map(async (file, _index, arr) => {
+				if (file.uploadStatus !== 'ready') return file;
+
+				try {
+					file.uploadStatus = 'uploading';
+					const res = await props.uploadHandler?.(file);
+
+					const index = arr.findIndex(
+						(item) => item.tempFilePath === file.tempFilePath
+					);
+					if (index < 0) {
+						return null;
+					}
+
+					const tempCurrentValue = [...currentValue.value];
+					tempCurrentValue.splice(
+						index,
+						1,
+						res && res.url
+							? {
+									...file,
+									name: res.name,
+									url: res.url,
+									type: file.type,
+									uploadStatus: 'success' as const,
+							  }
+							: {
+									...file,
+									uploadStatus: 'error' as const,
+							  }
+					);
+					currentValue.value = tempCurrentValue;
+					return currentValue.value[index];
+				} catch {
+					const index = currentValue.value.findIndex(
+						(item) => item.tempFilePath === file.tempFilePath
+					);
+					if (index < 0) {
+						return null;
+					}
+
+					const tempCurrentValue = [...currentValue.value];
+					tempCurrentValue.splice(index, 1, {
+						...file,
+						uploadStatus: 'error',
+					});
+					currentValue.value = tempCurrentValue;
+					return currentValue.value[index];
+				}
+			})
+		);
+	};
+
+	/**
+	 * 删除文件
+	 *
+	 * @param index 文件索引
+	 */
+	const deleteFile = (index: number) => {
+		if (index >= 0 && index < currentValue.value.length) {
+			const tempCurrentValue = [...currentValue.value];
+			tempCurrentValue.splice(index, 1);
+			currentValue.value = tempCurrentValue;
+		}
+	};
+
+	return {
+		currentValue,
+		isReadonly,
+		isUploading,
+		restCount,
+		previewList,
+		validateFiles,
+		upload,
+		deleteFile,
+	};
+};
+
+export { useUpload };

package/components/upload/media-upload.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../../styles/utils" as *;
+
+// 可配置的变量
+$media-upload: () !default;
+$media-upload-default: (
+	gap: 12rpx,
+	delete-icon-size: 36rpx,
+	delete-icon-color: red,
+	border-radius: 16rpx,
+);
+$media-upload: map.merge($media-upload-default, $media-upload);

package/components/upload/media-upload.vue

@@ -0,0 +1,250 @@
+<template>
+	<view :class="[...classNames, $style['Uploader']]" :style="inlineStyle">
+		<slot name="file-list" :delete-file="deleteFile">
+			<!-- 已上传文件列表 -->
+			<aspect-cpn
+				v-for="(item, index) in currentValue"
+				:key="index"
+				:class="$style['Uploader--item']"
+				:style="styleWidth"
+			>
+				<!-- TODO: 视频文件支持 -->
+				<!-- <video
+				v-if="item.fileType === 'video'"
+				:muted="true"
+				:src="item.fileUrl"
+				:controls="false"
+				:show-progress="false"
+				:show-fullscreen-btn="false"
+				:show-play-btn="false"
+				:show-center-play-btn="false"
+				:show-loading="false"
+				:enable-progress-gesture="false"
+				object-fit="fill"
+				:class="[$style['Uploader--image'], $style['Uploader--video']]"
+			></video> -->
+				<slot :image="item" :index="index" :list="previewList">
+					<image-cpn
+						:src="item.tempFilePath || item.url"
+						:preview="previewList"
+						:class="$style['Uploader--image']"
+						mode="aspectFill"
+					/>
+				</slot>
+				<loading-cpn
+					v-if="!isReadonly && item.uploadStatus === 'uploading'"
+					:class="$style['Uploader--upload-loading']"
+				/>
+				<view
+					v-if="!isReadonly && item.uploadStatus === 'error'"
+					:class="$style['Uploader--upload-error']"
+				>
+					上传失败
+				</view>
+				<template
+					v-if="!isReadonly && item.uploadStatus !== 'uploading'"
+				>
+					<slot
+						name="delete-icon"
+						:index="index"
+						:delete-file="deleteFile"
+					>
+						<icon-cpn
+							icon="close-filled"
+							:class="$style['Uploader--delete-icon']"
+							@click.stop="deleteFile(index)"
+						>
+						</icon-cpn>
+					</slot>
+				</template>
+			</aspect-cpn>
+		</slot>
+		<!-- 上传按钮 -->
+		<aspect-cpn
+			v-if="!isReadonly && restCount > 0"
+			:class="$style['Uploader--item']"
+			:style="styleWidth"
+			@click="selectFile"
+		>
+			<slot name="adder">
+				<view :class="$style['Uploader--button']">
+					<view>上传</view>
+					<view>图片</view>
+				</view>
+			</slot>
+		</aspect-cpn>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
+import AspectCpn from '../aspect/aspect.vue';
+import IconCpn from '../icon/icon.vue';
+import ImageCpn from '../image/image.vue';
+import LoadingCpn from '../loading/animations/loading-animation4.vue';
+import { useUpload } from './composable.js';
+import { type CommonProps, mediaUploadProps } from './types.js';
+
+defineOptions({
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+});
+
+const classNames = useClassNames('media-upload');
+
+type _Props = CommonProps & {
+	/** 媒体类型，可选值：'image' | 'video' | 'mix' */
+	type?: 'image' | 'video' | 'mix';
+	/** 媒体来源，可选值：'album' | 'camera' | 'album&camera' */
+	source?: 'album' | 'camera' | 'album&camera';
+	/** 列数 */
+	columns?: string | number;
+	/** 显示宽度 */
+	width?: string | number;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: () => [],
+	readonly: false,
+	max: 9,
+	maxSize: 1024 * 1024 * 10, // 10MB
+	autoUpload: true,
+	uploadHandler: undefined,
+	type: 'image',
+	source: 'album',
+	columns: 4,
+	width: undefined,
+	...mediaUploadProps,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: UniApp.UploadMediaFile[]): void;
+	(e: 'change', value: UniApp.UploadMediaFile[]): void;
+}>();
+
+const {
+	currentValue,
+	isReadonly,
+	restCount,
+	previewList,
+	deleteFile,
+	validateFiles,
+	upload,
+} = useUpload(props, emit);
+
+const styleWidth = computed(() => {
+	if (!props.width) return '';
+	const width =
+		typeof props.width === 'number' ? `${props.width}rpx` : props.width;
+	return `width: ${width};`;
+});
+
+const inlineStyle = computed(() => `--columns: ${props.columns}`);
+
+const selectFile = () => {
+	uni.chooseMedia({
+		count: restCount.value,
+		mediaType: [props.type],
+		sourceType:
+			props.source === 'album&camera'
+				? ['album', 'camera']
+				: [props.source],
+		success: (res) => {
+			const files = validateFiles(res.tempFiles);
+			if (props.autoUpload && files) {
+				upload();
+			}
+		},
+	});
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/utils' as *;
+@use './media-upload' as *;
+
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS('media-upload', $media-upload);
+}
+
+$gap: UTILS__LOCAL_VAR(gap);
+
+.Uploader {
+	@extend %external-vars;
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	gap: $gap;
+}
+
+.Uploader--item {
+	position: relative;
+	width: calc((100% + #{$gap}) / var(--columns) - #{$gap});
+}
+
+.Uploader--image {
+	width: 100%;
+	height: 100%;
+	border-radius: UTILS__LOCAL_VAR(border-radius);
+}
+
+.Uploader--upload-loading {
+	pointer-events: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	font-size: 2em;
+	color: #fff;
+	transform: translate(-50%, -50%);
+}
+
+.Uploader--upload-error {
+	pointer-events: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 2em;
+	height: 2em;
+	box-sizing: content-box;
+	transform: translate(-50%, -50%);
+	padding: 1.25em;
+	border-radius: 50%;
+	background-color: #00000080;
+	color: #fff;
+	font-size: 22rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.Uploader--button {
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	border-radius: UTILS__LOCAL_VAR(border-radius);
+	border: 1rpx solid UTILS__GLOBAL_VAR(theme, primary);
+	color: UTILS__GLOBAL_VAR(theme, primary);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.Uploader--delete-icon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(25%, -25%);
+	z-index: 1;
+	color: UTILS__LOCAL_VAR(delete-icon-color);
+	@include UTILS__SET_VAR(
+		icon,
+		font-size,
+		UTILS__LOCAL_VAR(delete-icon-size)
+	);
+}
+</style>