muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-upload/mu-upload.vue

@@ -0,0 +1,415 @@
+<template>
+	<view class="mu-upload" :class="{ 'mu-upload--disabled': disabled, 'mu-upload--avatar': avatar }">
+		<!-- 头像上传专用单图模式 -->
+		<template v-if="avatar">
+			<view class="mu-upload__avatar-wrap" :style="avatarStyle" @tap="handleChoose">
+				<image v-if="fileList.length > 0 && getFileUrl(fileList[0])" class="mu-upload__avatar-img" :src="getFileUrl(fileList[0])" mode="aspectFill" />
+				<view v-else class="mu-upload__avatar-placeholder">
+					<mu-icon name="camera" :size="28" color="#94A3B8" />
+					<text class="mu-upload__avatar-text">{{ addText || '上传头像' }}</text>
+				</view>
+				<view v-if="fileList.length > 0" class="mu-upload__avatar-edit">
+					<mu-icon name="camera" :size="12" color="#ffffff" />
+				</view>
+			</view>
+		</template>
+
+		<!-- 标准多图/文件网格列表模式 -->
+		<template v-else>
+			<view class="mu-upload__list">
+				<!-- 图片/文件已选节点网格 -->
+				<view v-for="(file, index) in fileList" :key="index" class="mu-upload__item" :style="itemStyle">
+					<image v-if="isImage(file)" class="mu-upload__img" :src="getFileUrl(file)" mode="aspectFill" @tap="handlePreview(index)" />
+					<view v-else class="mu-upload__file">
+						<mu-icon name="attachment" :size="20" color="#64748B" />
+						<text class="mu-upload__file-name">{{ getFileName(file) }}</text>
+					</view>
+					
+					<!-- 右上角精致删除图标按钮 -->
+					<view v-if="!disabled" class="mu-upload__del mu-touchable-flat" @tap.stop="handleDelete(index)">
+						<mu-icon name="close" :size="10" color="#ffffff" />
+					</view>
+
+					<!-- 动态上传中 (Uploading 蒙层 & 百分比数字 & Loading 转圈) -->
+					<view v-if="getFileStatus(file) === 'uploading' || getFileStatus(file) === 'failed'" class="mu-upload__status-layer" :class="{ 'mu-upload__status-layer--failed': getFileStatus(file) === 'failed' }">
+						<template v-if="getFileStatus(file) === 'uploading'">
+							<mu-loading :size="18" color="#ffffff" />
+							<text class="mu-upload__status-text">{{ getFileMessage(file) || `${getFileProgress(file)}%` }}</text>
+							<view class="mu-upload__progress-track">
+								<view class="mu-upload__progress-bar" :style="{ width: getFileProgress(file) + '%' }"></view>
+							</view>
+						</template>
+						<template v-else-if="getFileStatus(file) === 'failed'">
+							<mu-icon name="warning" :size="20" color="#F43F5E" />
+							<text class="mu-upload__status-text mu-upload__status-text--failed">上传失败</text>
+						</template>
+					</view>
+				</view>
+
+				<!-- 增加照片卡片 Add Box -->
+				<view v-if="showAdd" class="mu-upload__add mu-touchable-flat" :style="itemStyle" @tap="handleChoose">
+					<slot name="add">
+						<view class="mu-upload__add-inner">
+							<mu-icon name="camera" :size="24" color="#94A3B8" />
+							<text v-if="addText" class="mu-upload__add-text">{{ addText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: [Array, String], default: () => [] },
+	value: { type: [Array, String], default: null },
+	max: { type: Number, default: 9 },
+	disabled: { type: Boolean, default: false },
+	avatar: { type: Boolean, default: false },             // 是否开启单图头像上传模式
+	addText: { type: String, default: '上传图片' },
+	size: { type: [Number, String], default: 150 },
+	accept: { type: String, default: 'image' },
+	sourceType: { type: Array, default: () => ['album', 'camera'] },
+	sizeLimit: { type: Number, default: 0 }
+})
+
+const emit = defineEmits(['change', 'delete', 'oversize', 'update:modelValue', 'update:value'])
+
+function toArray(val) {
+	if (!val) return []
+	if (Array.isArray(val)) return [...val]
+	if (typeof val === 'string' && val.trim()) return [val]
+	return []
+}
+
+const fileList = ref(toArray((props.modelValue !== undefined ? props.modelValue : props.value)))
+
+watch(() => props.modelValue, (v) => {
+	fileList.value = toArray(v)
+})
+watch(() => props.value, (v) => {
+	fileList.value = toArray(v)
+})
+
+const showAdd = computed(() => fileList.value.length < props.max && !props.disabled)
+
+const itemStyle = computed(() => {
+	const s = Number(props.size)
+	return { width: s + 'rpx', height: s + 'rpx' }
+})
+
+const avatarStyle = computed(() => {
+	const s = Number(props.size) > 150 ? Number(props.size) : 160
+	return { width: s + 'rpx', height: s + 'rpx' }
+})
+
+function getFileUrl(file) {
+	if (typeof file === 'string') return file
+	return file.url || file.path || file.tempFilePath || ''
+}
+
+function getFileStatus(file) {
+	if (typeof file === 'object' && file !== null) {
+		if (file.status) return file.status
+		if (typeof file.progress === 'number' && file.progress < 100) return 'uploading'
+	}
+	return 'success'
+}
+
+function getFileProgress(file) {
+	if (typeof file === 'object' && file !== null && typeof file.progress === 'number') {
+		return Math.min(100, Math.max(0, file.progress))
+	}
+	return 0
+}
+
+function getFileMessage(file) {
+	if (typeof file === 'object' && file !== null) return file.message || ''
+	return ''
+}
+
+function isImage(file) {
+	if (props.accept === 'image') return true
+	const url = getFileUrl(file)
+	if (!url) return true
+	if (typeof file === 'object' && file !== null && file.type && file.type.startsWith('image/')) return true
+	return /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(url) ||
+		url.startsWith('blob:') ||
+		url.startsWith('data:') ||
+		url.startsWith('wxfile:') ||
+		url.startsWith('file:') ||
+		url.startsWith('tmp:')
+}
+
+function getFileName(file) {
+	if (typeof file === 'object' && file !== null) return file.name || file.url || '文件'
+	return String(file)
+}
+
+function handleChoose() {
+	if (props.disabled) return
+	const count = props.avatar ? 1 : (props.max - fileList.value.length)
+	uni.chooseImage({
+		count,
+		sourceType: props.sourceType,
+		sizeType: ['compressed'],
+		success: (res) => {
+			const rawFiles = res.tempFilePaths || []
+			const tempFiles = rawFiles.map(p => typeof p === 'string' && p.startsWith('http://tmp/') ? p.replace('http://tmp/', 'wxfile://tmp/') : p)
+			const newList = props.avatar ? tempFiles : [...fileList.value, ...tempFiles]
+			fileList.value = newList
+			const emitVal = props.avatar ? (newList[0] || '') : newList
+			emit('update:modelValue', emitVal)
+			emit('update:value', emitVal)
+			emit('change', emitVal)
+		}
+	})
+}
+
+function handleDelete(index) {
+	const deletedItem = fileList.value[index]
+	fileList.value.splice(index, 1)
+	const newList = [...fileList.value]
+	const emitVal = props.avatar ? '' : newList
+	emit('update:modelValue', emitVal)
+	emit('update:value', emitVal)
+	emit('delete', { index, item: deletedItem })
+	emit('change', emitVal)
+}
+
+function handlePreview(index) {
+	const urls = fileList.value.map(f => getFileUrl(f)).filter(Boolean)
+	uni.previewImage({
+		current: index,
+		urls
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-upload {
+	&--disabled { opacity: $mu-opacity-disabled; pointer-events: none; }
+
+	&__list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+	}
+
+	&__item {
+		position: relative;
+		border-radius: 16rpx;
+		overflow: hidden;
+		background: rgba(241, 245, 249, 0.6);
+		border: 1rpx solid $mu-border;
+		box-sizing: border-box;
+	}
+
+	&__img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	&__file {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 12rpx;
+		box-sizing: border-box;
+
+		&-name {
+			font-size: 20rpx;
+			color: $mu-text-secondary;
+			margin-top: 8rpx;
+			text-align: center;
+			word-break: break-all;
+		}
+	}
+
+	&__del {
+		position: absolute;
+		top: 8rpx;
+		right: 8rpx;
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: rgba(15, 23, 42, 0.65);
+		backdrop-filter: blur(8px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		z-index: 20;
+	}
+
+	&__status-layer {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.65);
+		backdrop-filter: blur(4px);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 12rpx;
+		z-index: 10;
+		box-sizing: border-box;
+
+		&--failed {
+			background: rgba(244, 63, 94, 0.15);
+		}
+	}
+
+	&__status-text {
+		color: #ffffff;
+		font-size: 20rpx;
+		font-weight: 700;
+		margin-top: 8rpx;
+
+		&--failed {
+			color: #F43F5E;
+		}
+	}
+
+	&__progress-track {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 6rpx;
+		background: rgba(255, 255, 255, 0.2);
+
+		.mu-upload__progress-bar {
+			height: 100%;
+			background: $mu-primary;
+			transition: width 0.2s ease;
+		}
+	}
+
+	&__add {
+		border-radius: 16rpx;
+		border: 2rpx dashed rgba(148, 163, 184, 0.4);
+		background: rgba(248, 250, 252, 0.8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		box-sizing: border-box;
+
+		&:active {
+			border-color: $mu-primary;
+			background: rgba(99, 102, 241, 0.04);
+		}
+
+		&-inner {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&-text {
+			font-size: 22rpx;
+			color: #94A3B8;
+			font-weight: 600;
+			margin-top: 8rpx;
+		}
+	}
+
+	/* 单图头像专用样式 */
+	&__avatar-wrap {
+		position: relative;
+		border-radius: 50%;
+		overflow: hidden;
+		background: rgba(241, 245, 249, 0.9);
+		border: 2rpx dashed rgba(148, 163, 184, 0.5);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+	}
+
+	&__avatar-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+	}
+
+	&__avatar-placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__avatar-text {
+		font-size: 20rpx;
+		color: #64748B;
+		font-weight: 600;
+		margin-top: 6rpx;
+	}
+
+	&__avatar-edit {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 40rpx;
+		background: rgba(15, 23, 42, 0.65);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-upload {
+		&__item {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__add {
+			background: rgba(255, 255, 255, 0.02);
+			border-color: rgba(255, 255, 255, 0.15);
+			&-text { color: $mu-dark-text-secondary; }
+		}
+		&__avatar-wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: rgba(255, 255, 255, 0.2);
+		}
+		&__avatar-text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-upload {
+		&__item {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__add {
+			background: rgba(255, 255, 255, 0.02);
+			border-color: rgba(255, 255, 255, 0.15);
+			&-text { color: $mu-dark-text-secondary; }
+		}
+		&__avatar-wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: rgba(255, 255, 255, 0.2);
+		}
+		&__avatar-text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>