muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-image-grid/mu-image-grid.vue

@@ -0,0 +1,225 @@
+<template>
+	<view
+		class="mu-image-grid"
+		:class="[
+			mode === 'scroll' && 'mu-image-grid--scroll'
+		]"
+		:style="gridContainerStyle"
+	>
+		<view
+			v-for="(img, index) in displayImages"
+			:key="index"
+			class="mu-image-grid__item mu-touchable-flat"
+			:style="getItemStyle(index)"
+			@tap="handlePreview(index)"
+		>
+			<image
+				class="mu-image-grid__img"
+				:src="getImageUrl(img)"
+				:mode="getImageMode(index)"
+			/>
+
+			<!-- 超出最大数量 +N 暗化遮罩 -->
+			<view
+				v-if="index === max - 1 && remainingCount > 0"
+				class="mu-image-grid__more-overlay"
+			>
+				<text class="mu-image-grid__more-text">+{{ remainingCount }}</text>
+			</view>
+
+			<!-- 可选的右顶部删除图标 (deletable) -->
+			<view
+				v-if="deletable"
+				class="mu-image-grid__delete-btn"
+				@tap.stop="handleDelete(index)"
+			>
+				<mu-icon name="close" :size="12" color="#FFFFFF" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	images: { type: Array, default: () => [] },            // 图片列表 (字符串数组或 [{url, desc}])
+	max: { type: Number, default: 9 },                     // 最多显示张数
+	columns: { type: [Number, String], default: 0 },       // 强制指定列数 (0 为自动朋友圈 1/2/3 列智能自适应)
+	gap: { type: [Number, String], default: 12 },          // 图片间距 (rpx)
+	radius: { type: [Number, String], default: 16 },       // 图片圆角 (rpx)
+	mode: { type: String, default: 'grid' },               // grid (网格) | scroll (横向滚动)
+	preview: { type: Boolean, default: true },             // 点击是否自动大图预览
+	deletable: { type: Boolean, default: false }           // 是否显示删除按钮
+})
+
+const emit = defineEmits(['click', 'preview', 'delete'])
+
+const normalizedImages = computed(() => props.images || [])
+
+const displayImages = computed(() => {
+	return normalizedImages.value.slice(0, props.max)
+})
+
+const remainingCount = computed(() => {
+	return normalizedImages.value.length - props.max
+})
+
+// 计算自适应网格列数 (微信朋友圈黄金规则)
+const currentColumns = computed(() => {
+	const forcedCols = Number(props.columns)
+	if (forcedCols > 0) return forcedCols
+
+	const count = displayImages.value.length
+	if (count === 1) return 1
+	if (count === 2 || count === 4) return 2
+	return 3
+})
+
+const gridContainerStyle = computed(() => {
+	const g = Number(props.gap)
+	if (props.mode === 'scroll') {
+		return { gap: `${g}rpx` }
+	}
+	const cols = currentColumns.value
+	return {
+		display: 'grid',
+		gridTemplateColumns: `repeat(${cols}, 1fr)`,
+		gap: `${g}rpx`
+	}
+})
+
+function getImageUrl(item) {
+	if (typeof item === 'string') return item
+	if (typeof item === 'object' && item.url) return item.url
+	return ''
+}
+
+function getImageMode(index) {
+	if (currentColumns.value === 1) return 'aspectFill'
+	return 'aspectFill'
+}
+
+function getItemStyle(index) {
+	const r = typeof props.radius === 'number' ? `${props.radius}rpx` : props.radius
+	const style = { borderRadius: r }
+
+	// 单张图智能高大图
+	if (currentColumns.value === 1) {
+		style.width = '380rpx'
+		style.height = '380rpx'
+	} else if (props.mode === 'scroll') {
+		style.width = '200rpx'
+		style.height = '200rpx'
+		style.flexShrink = '0'
+	} else {
+		style.width = '100%'
+		style.paddingBottom = '100%' // 维持 1:1 正方形网格比例
+	}
+	return style
+}
+
+function handlePreview(index) {
+	const rawList = normalizedImages.value.map(item => getImageUrl(item))
+	emit('click', { index, src: rawList[index] })
+
+	if (props.preview) {
+		uni.previewImage({
+			urls: rawList,
+			current: index
+		})
+	}
+	emit('preview', { index, src: rawList[index] })
+}
+
+function handleDelete(index) {
+	emit('delete', { index, item: normalizedImages.value[index] })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-image-grid {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+
+	&--scroll {
+		display: flex;
+		flex-wrap: nowrap;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	&__item {
+		position: relative;
+		overflow: hidden;
+		cursor: pointer;
+		background: #F1F5F9;
+		box-sizing: border-box;
+	}
+
+	&__img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+		object-fit: cover;
+	}
+
+	&__more-overlay {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.55);
+		backdrop-filter: blur(4px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 2;
+
+		&-text {
+			color: #ffffff;
+			font-size: 36rpx;
+			font-weight: 800;
+			letter-spacing: 1rpx;
+		}
+	}
+
+	&__delete-btn {
+		position: absolute;
+		top: 10rpx;
+		right: 10rpx;
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		background: rgba(15, 23, 42, 0.7);
+		backdrop-filter: blur(4px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 3;
+		cursor: pointer;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-image-grid {
+		&__item {
+			background: rgba(255, 255, 255, 0.05);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-image-grid {
+		&__item {
+			background: rgba(255, 255, 255, 0.05);
+		}
+	}
+}
+</style>

package/components/muzhiyu/mu-image-preview/mu-image-preview.vue

@@ -0,0 +1,286 @@
+<template>
+	<view
+		v-if="visible"
+		class="mu-image-preview"
+		:class="[animating && 'mu-image-preview--show']"
+		@tap="handleMaskClick"
+	>
+		<!-- 顶部悬浮毛玻璃操作栏 -->
+		<view class="mu-image-preview__header" @tap.stop>
+			<!-- 极光数字页码胶囊 -->
+			<view class="mu-image-preview__page-badge">
+				<text class="mu-image-preview__page-text">{{ currentIndex + 1 }} / {{ normalizedImages.length }}</text>
+			</view>
+
+			<!-- 顶部右侧快捷按钮群 (保存 + 关闭) -->
+			<view class="mu-image-preview__header-actions">
+				<view v-if="showSave" class="mu-image-preview__icon-btn mu-touchable-flat" @tap="handleSaveImage">
+					<mu-icon name="download" :size="20" color="#FFFFFF" />
+				</view>
+				<view v-if="closeable" class="mu-image-preview__icon-btn mu-touchable-flat" @tap="close">
+					<mu-icon name="close" :size="20" color="#FFFFFF" />
+				</view>
+			</view>
+		</view>
+
+		<!-- 图片轮播 Swiper 视口 -->
+		<swiper
+			class="mu-image-preview__swiper"
+			:current="currentIndex"
+			:circular="loop"
+			:duration="300"
+			@change="onSwiperChange"
+		>
+			<swiper-item
+				v-for="(img, i) in normalizedImages"
+				:key="i"
+				class="mu-image-preview__swiper-item"
+				@tap="handleMaskClick"
+			>
+				<image
+					class="mu-image-preview__image"
+					:src="getImageUrl(img)"
+					mode="aspectFit"
+					:show-menu-by-longpress="true"
+				/>
+			</swiper-item>
+		</swiper>
+
+		<!-- 底部描述信息栏 -->
+		<view
+			v-if="currentDescription"
+			class="mu-image-preview__footer"
+			@tap.stop
+		>
+			<text class="mu-image-preview__desc-text">{{ currentDescription }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	images: { type: Array, default: () => [] },            // 图片数组 (支持字符串 URL 或对象 [{url, desc}])
+	current: { type: Number, default: 0 },                 // 初始索引
+	loop: { type: Boolean, default: true },                // 是否循环轮播
+	closeable: { type: Boolean, default: true },           // 是否显示关闭按钮
+	closeOnClickMask: { type: Boolean, default: true },   // 点击遮罩是否关闭
+	showSave: { type: Boolean, default: true }             // 是否显示保存图片按钮
+})
+
+const emit = defineEmits(['update:show', 'close', 'change', 'save'])
+
+const visible = ref(false)
+const animating = ref(false)
+const currentIndex = ref(0)
+
+const normalizedImages = computed(() => {
+	if (!props.images) return []
+	return props.images
+})
+
+const currentDescription = computed(() => {
+	const item = normalizedImages.value[currentIndex.value]
+	if (!item) return ''
+	if (typeof item === 'object' && item.desc) return item.desc
+	return ''
+})
+
+function getImageUrl(item) {
+	if (typeof item === 'string') return item
+	if (typeof item === 'object' && item.url) return item.url
+	return ''
+}
+
+function onSwiperChange(e) {
+	currentIndex.value = e.detail.current
+	emit('change', e.detail.current)
+}
+
+function handleMaskClick() {
+	if (props.closeOnClickMask) {
+		close()
+	}
+}
+
+function handleSaveImage() {
+	const currentUrl = getImageUrl(normalizedImages.value[currentIndex.value])
+	if (!currentUrl) return
+
+	emit('save', { url: currentUrl, index: currentIndex.value })
+
+	// #ifdef H5
+	try {
+		const a = document.createElement('a')
+		a.href = currentUrl
+		a.download = `preview_${Date.now()}.png`
+		document.body.appendChild(a)
+		a.click()
+		document.body.removeChild(a)
+		uni.showToast({ title: '已触发保存图片', icon: 'success' })
+	} catch (e) {
+		uni.showToast({ title: '长按图片保存到相册', icon: 'none' })
+	}
+	// #endif
+
+	// #ifndef H5
+	if (currentUrl.startsWith('http')) {
+		uni.downloadFile({
+			url: currentUrl,
+			success: (res) => {
+				if (res.statusCode === 200 && res.tempFilePath) {
+					uni.saveImageToPhotosAlbum({
+						filePath: res.tempFilePath,
+						success: () => uni.showToast({ title: '保存成功', icon: 'success' }),
+						fail: () => uni.showToast({ title: '保存失败或拒绝授权', icon: 'none' })
+					})
+				} else {
+					uni.showToast({ title: '图片下载失败', icon: 'none' })
+				}
+			},
+			fail: () => uni.showToast({ title: '图片下载失败', icon: 'none' })
+		})
+	} else {
+		uni.saveImageToPhotosAlbum({
+			filePath: currentUrl,
+			success: () => uni.showToast({ title: '保存成功', icon: 'success' }),
+			fail: () => uni.showToast({ title: '保存失败或拒绝授权', icon: 'none' })
+		})
+	}
+	// #endif
+}
+
+function open(index = 0) {
+	currentIndex.value = index
+	visible.value = true
+	setTimeout(() => {
+		animating.value = true
+	}, 30)
+}
+
+function close() {
+	animating.value = false
+	setTimeout(() => {
+		visible.value = false
+		emit('update:show', false)
+		emit('close')
+	}, 200)
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		open(props.current)
+	} else {
+		close()
+	}
+})
+
+defineExpose({ open, close, handleSaveImage })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-image-preview {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-modal;
+	background: rgba(0, 0, 0, 0.95);
+	backdrop-filter: blur(16px);
+	display: flex;
+	flex-direction: column;
+	opacity: 0;
+	transition: opacity 0.25s ease;
+
+	&--show {
+		opacity: 1;
+	}
+
+	&__header {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 32rpx 36rpx;
+		padding-top: calc(32rpx + env(safe-area-inset-top));
+	}
+
+	&__page-badge {
+		padding: 8rpx 24rpx;
+		background: rgba(255, 255, 255, 0.15);
+		backdrop-filter: blur(12px);
+		border-radius: 999rpx;
+		border: 1rpx solid rgba(255, 255, 255, 0.2);
+	}
+
+	&__page-text {
+		font-size: 24rpx;
+		font-weight: 700;
+		color: #ffffff;
+		letter-spacing: 1rpx;
+	}
+
+	&__header-actions {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+	}
+
+	&__icon-btn {
+		width: 68rpx;
+		height: 68rpx;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.15);
+		backdrop-filter: blur(12px);
+		border: 1rpx solid rgba(255, 255, 255, 0.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+	}
+
+	&__swiper {
+		width: 100vw;
+		height: 100vh;
+
+		&-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+		}
+	}
+
+	&__image {
+		width: 100%;
+		height: 100%;
+		will-change: transform;
+	}
+
+	&__footer {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		padding: 32rpx 40rpx;
+		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+		background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
+		backdrop-filter: blur(8px);
+	}
+
+	&__desc-text {
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.92);
+		line-height: 1.5;
+		display: block;
+		text-align: center;
+	}
+}
+</style>