muzhiyu-ui 1.0.0

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

@@ -0,0 +1,124 @@
+<template>
+	<view
+		class="mu-loading"
+		:class="{
+			'mu-loading--rotate': type === 'spinner',
+			'mu-loading--fullscreen': fullScreen
+		}"
+		:style="wrapStyle"
+	>
+		<!-- 旋转类型 -->
+		<view v-if="type === 'spinner'" class="mu-loading__spinner" :style="spinnerStyle">
+			<view v-for="i in 12" :key="i" class="mu-loading__dot" :style="{ transform: `rotate(${i * 30}deg)`, animationDelay: `${-1.1 + i * 0.1}s` }"></view>
+		</view>
+		<!-- 圆环类型 -->
+		<view v-else class="mu-loading__ring" :style="ringStyle"></view>
+		<text v-if="text" class="mu-loading__text" :style="textStyle">{{ text }}</text>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	type: { type: String, default: 'ring' }, // ring | spinner
+	size: { type: [Number, String], default: 20 },
+	color: { type: String, default: '#171717' },
+	text: { type: String, default: '' },
+	textColor: { type: String, default: '' },
+	marginRight: { type: [Number, String], default: 0 },
+	fullScreen: { type: Boolean, default: false }, // 是否全屏模态遮罩居中显示
+	bgColor: { type: String, default: 'rgba(255, 255, 255, 0.88)' }
+})
+
+function formatUnit(val, defaultVal = '36rpx') {
+	if (typeof val === 'number') return `${val}rpx`
+	if (typeof val === 'string') {
+		if (val.endsWith('rpx') || val.endsWith('px')) return val
+		return `${val}rpx`
+	}
+	return defaultVal
+}
+
+const sizeRpx = computed(() => formatUnit(props.size, '36rpx'))
+
+const wrapStyle = computed(() => {
+	if (props.fullScreen) {
+		return {
+			backgroundColor: props.bgColor,
+			color: props.color
+		}
+	}
+	return {
+		marginRight: props.marginRight ? props.marginRight + 'rpx' : '0',
+		color: props.color
+	}
+})
+
+const spinnerStyle = computed(() => ({ width: sizeRpx.value, height: sizeRpx.value }))
+
+const ringStyle = computed(() => ({
+	width: sizeRpx.value,
+	height: sizeRpx.value,
+	borderWidth: '4rpx',
+	borderColor: 'rgba(0, 0, 0, 0.1)',
+	borderTopColor: props.color
+}))
+
+const textStyle = computed(() => ({ color: props.textColor || props.color }))
+</script>
+
+<style lang="scss" scoped>
+.mu-loading {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	&--fullscreen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 99999;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+
+		.mu-loading__text {
+			margin-left: 0;
+			margin-top: 24rpx;
+			font-size: 28rpx;
+			font-weight: 700;
+		}
+	}
+
+	&__ring {
+		border-radius: 50%;
+		border-style: solid;
+		animation: mu-spin 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+	}
+	&__spinner { position: relative; }
+	&__dot {
+		position: absolute; width: 4rpx; height: 26%;
+		left: calc(50% - 2rpx); top: 0;
+		transform-origin: center bottom;
+		background: currentColor; border-radius: $mu-radius-full;
+		opacity: 0.2;
+		animation: mu-fade 1.2s linear infinite;
+	}
+	&__text {
+		margin-left: $mu-space-3;
+		font-size: $mu-font-sm;
+		font-weight: 600;
+	}
+}
+
+@keyframes mu-spin { to { transform: rotate(360deg); } }
+@keyframes mu-fade { 0% { opacity: 1; } 100% { opacity: 0.15; } }
+</style>

package/components/muzhiyu/mu-loading-page/mu-loading-page.vue

@@ -0,0 +1,529 @@
+<template>
+	<view
+		v-if="visible"
+		class="mu-loading-page"
+		:class="[
+			`mu-loading-page--${activeLayout}`,
+			{
+				'mu-loading-page--blur': blur,
+				'mu-loading-page--fade-out': isFadingOut
+			}
+		]"
+		:style="pageStyle"
+		@tap="handleTap"
+		@touchmove.stop.prevent
+	>
+		<!-- 悬浮岛/微卡片核心容器 -->
+		<view class="mu-loading-page__card" :style="cardStyle">
+
+			<!-- ===== 模式 0: 自定义图片/GIF/插槽模式 ===== -->
+			<view v-if="activeType === 'custom' || ($slots.image || (activeImage && activeType === 'custom'))" class="mu-loading-page__custom-box">
+				<slot name="image">
+					<image
+						v-if="activeImage"
+						class="mu-loading-page__custom-img"
+						:class="[`mu-loading-page__custom-img--${activeImageAnimation}`]"
+						:src="activeImage"
+						:mode="imageMode"
+						:style="customImageStyle"
+					/>
+				</slot>
+			</view>
+
+			<!-- ===== 模式 1: Quantum Logo 呼吸脉冲 ===== -->
+			<view v-else-if="activeType === 'logo'" class="mu-loading-page__anim-box">
+				<view class="mu-loading-page__logo-ripple" :style="{ borderColor: activeColor }"></view>
+				<view class="mu-loading-page__logo-inner">
+					<image v-if="activeImage" class="mu-loading-page__logo-img" :src="activeImage" mode="aspectFit" />
+					<mu-icon v-else :name="icon || 'loading'" :size="32" :color="activeColor" class="mu-spin-pulse" />
+				</view>
+			</view>
+
+			<!-- ===== 模式 2: Bento 冰晶方块连波 ===== -->
+			<view v-else-if="activeType === 'bento'" class="mu-loading-page__bento-box">
+				<view
+					v-for="i in 4"
+					:key="i"
+					class="mu-loading-page__bento-block"
+					:style="{ backgroundColor: activeColor, animationDelay: `${(i - 1) * 0.15}s` }"
+				></view>
+			</view>
+
+			<!-- ===== 模式 3: Orbit 双轨双色流光 ===== -->
+			<view v-else-if="activeType === 'orbit'" class="mu-loading-page__orbit-box" :style="{ width: `${sizeNumber}px`, height: `${sizeNumber}px` }">
+				<view class="mu-loading-page__orbit-ring mu-loading-page__orbit-ring--1" :style="{ borderTopColor: activeColor, borderRightColor: activeColor }"></view>
+				<view class="mu-loading-page__orbit-ring mu-loading-page__orbit-ring--2" :style="{ borderBottomColor: activeColor }"></view>
+			</view>
+
+			<!-- ===== 模式 4: Wave 5柱声波律动 ===== -->
+			<view v-else-if="activeType === 'wave'" class="mu-loading-page__wave-box">
+				<view
+					v-for="i in 5"
+					:key="i"
+					class="mu-loading-page__wave-bar"
+					:style="{ backgroundColor: activeColor, animationDelay: `${(i - 1) * 0.12}s` }"
+				></view>
+			</view>
+
+			<!-- ===== 模式 5: Cube 3D 翻转方块 ===== -->
+			<view v-else-if="activeType === 'cube'" class="mu-loading-page__cube-box">
+				<view class="mu-loading-page__cube-inner" :style="{ backgroundColor: activeColor }"></view>
+			</view>
+
+			<!-- ===== 模式 6: Spinner / Ring 经典轻量微旋 ===== -->
+			<view v-else class="mu-loading-page__spinner-box">
+				<view class="mu-loading-page__ring" :style="ringStyle"></view>
+			</view>
+
+			<!-- 主文案 -->
+			<text v-if="activeText" class="mu-loading-page__text" :style="{ color: textColor || activeColor }">
+				{{ activeText }}
+			</text>
+
+			<!-- 副文案 -->
+			<text v-if="activeSubText" class="mu-loading-page__subtext">
+				{{ activeSubText }}
+			</text>
+
+			<!-- 允许用户传入提示/取消按钮槽 -->
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	// 控制显示/隐藏 (支持 v-model:show)
+	show: { type: Boolean, default: false },
+	loading: { type: Boolean, default: false },
+
+	// 布局风格: 'card' (悬浮冰晶岛) | 'pure' (纯净透屏)
+	layout: { type: String, default: 'card' },
+
+	// 加载页形态: logo | bento | orbit | wave | cube | spinner | ring | custom
+	type: { type: String, default: 'logo' },
+
+	// 提示文本
+	text: { type: String, default: '页面加载中...' },
+	subText: { type: String, default: '' },
+
+	// 图标 / Logo 图片
+	image: { type: String, default: '' },
+	imageSize: { type: [Number, String], default: 80 },
+	imageMode: { type: String, default: 'aspectFit' },
+	imageAnimation: { type: String, default: 'pulse' }, // 'pulse' | 'spin' | 'bounce' | 'float' | 'none'
+	icon: { type: String, default: '' },
+
+	// 尺寸 (px)
+	size: { type: [Number, String], default: 48 },
+
+	// 颜色体系
+	color: { type: String, default: '#171717' },
+	textColor: { type: String, default: '#0F172A' },
+	bgColor: { type: String, default: 'rgba(15, 23, 42, 0.45)' },
+
+	// 毛玻璃特效
+	blur: { type: Boolean, default: true },
+
+	// 层级 Z-Index
+	zIndex: { type: [Number, String], default: 99999 },
+
+	// 允许点击页面遮罩关闭
+	clickClose: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:show', 'click', 'close'])
+
+const visible = ref(false)
+const isFadingOut = ref(false)
+let animTimer = null
+
+// JS 动态覆盖属性
+const overrideType = ref('')
+const overrideLayout = ref('')
+const overrideText = ref('')
+const overrideSubText = ref('')
+const overrideImage = ref('')
+const overrideImageAnimation = ref('')
+const overrideColor = ref('')
+
+const activeType = computed(() => overrideType.value || props.type)
+const activeLayout = computed(() => overrideLayout.value || props.layout)
+const activeText = computed(() => overrideText.value || props.text)
+const activeSubText = computed(() => overrideSubText.value || props.subText)
+const activeImage = computed(() => overrideImage.value || props.image)
+const activeImageAnimation = computed(() => overrideImageAnimation.value || props.imageAnimation)
+const activeColor = computed(() => overrideColor.value || props.color)
+
+const isShow = computed(() => props.show || props.loading)
+
+const sizeNumber = computed(() => {
+	const n = Number(props.size)
+	return isNaN(n) ? 48 : n
+})
+
+const customImageStyle = computed(() => {
+	const sz = Number(props.imageSize) || 80
+	return {
+		width: `${sz}px`,
+		height: `${sz}px`
+	}
+})
+
+const pageStyle = computed(() => ({
+	backgroundColor: activeLayout.value === 'pure' ? (props.bgColor || 'rgba(255, 255, 255, 0.95)') : props.bgColor,
+	zIndex: props.zIndex
+}))
+
+const cardStyle = computed(() => {
+	if (activeLayout.value === 'pure') {
+		return {
+			background: 'transparent',
+			boxShadow: 'none',
+			border: 'none',
+			padding: '0'
+		}
+	}
+	return {
+		background: 'rgba(255, 255, 255, 0.92)',
+		backdropFilter: 'blur(20px)',
+		boxShadow: '0 20rpx 60rpx -10rpx rgba(15, 23, 42, 0.15)',
+		borderRadius: '36rpx',
+		border: '1rpx solid rgba(255, 255, 255, 0.9)'
+	}
+})
+
+const ringStyle = computed(() => ({
+	width: `${sizeNumber.value}px`,
+	height: `${sizeNumber.value}px`,
+	borderWidth: '5rpx',
+	borderColor: 'rgba(0, 0, 0, 0.08)',
+	borderTopColor: activeColor.value
+}))
+
+watch(isShow, (val) => {
+	if (animTimer) {
+		clearTimeout(animTimer)
+		animTimer = null
+	}
+	if (val) {
+		open()
+	} else {
+		close()
+	}
+}, { immediate: true })
+
+function open(opts) {
+	if (opts && typeof opts === 'object') {
+		overrideType.value = opts.type || ''
+		overrideLayout.value = opts.layout || ''
+		overrideText.value = opts.text || ''
+		overrideSubText.value = opts.subText || ''
+		overrideImage.value = opts.image || ''
+		overrideImageAnimation.value = opts.imageAnimation || ''
+		overrideColor.value = opts.color || ''
+	}
+	visible.value = true
+	isFadingOut.value = false
+}
+
+function close() {
+	isFadingOut.value = true
+	animTimer = setTimeout(() => {
+		visible.value = false
+		isFadingOut.value = false
+		overrideType.value = ''
+		overrideLayout.value = ''
+		overrideText.value = ''
+		overrideSubText.value = ''
+		overrideImage.value = ''
+		overrideImageAnimation.value = ''
+		overrideColor.value = ''
+		emit('update:show', false)
+		emit('close')
+	}, 240)
+}
+
+// 注册全局 JS 事件总线监听器
+onMounted(() => {
+	uni.$on('mu-loading-page-show', handleGlobalShow)
+	uni.$on('mu-loading-page-hide', close)
+	uni.$on('mu-loading-page-close', close)
+})
+
+onUnmounted(() => {
+	if (animTimer) clearTimeout(animTimer)
+	uni.$off('mu-loading-page-show', handleGlobalShow)
+	uni.$off('mu-loading-page-hide', close)
+	uni.$off('mu-loading-page-close', close)
+})
+
+function handleGlobalShow(opts) {
+	open(opts)
+}
+
+function handleTap(e) {
+	emit('click', e)
+	if (props.clickClose) {
+		close()
+	}
+}
+
+defineExpose({
+	open,
+	show: open,
+	close,
+	hide: close
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-loading-page {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: opacity;
+	box-sizing: border-box;
+
+	&--blur {
+		/* #ifndef APP-NVUE */
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		/* #endif */
+	}
+
+	&--fade-out {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&__card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 56rpx 64rpx;
+		min-width: 280rpx;
+		max-width: 80%;
+		box-sizing: border-box;
+		transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	/* ===== 模式 1: Logo 呼吸脉冲 ===== */
+	&__anim-box {
+		position: relative;
+		width: 110rpx;
+		height: 110rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__logo-ripple {
+		position: absolute;
+		inset: -10rpx;
+		border-radius: 50%;
+		border: 4rpx solid currentColor;
+		opacity: 0.3;
+		animation: mu-ripple 1.8s $mu-ease infinite;
+	}
+
+	&__logo-inner {
+		width: 90rpx;
+		height: 90rpx;
+		border-radius: 26rpx;
+		background: #FFFFFF;
+		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		animation: mu-pulse 1.8s $mu-ease infinite;
+	}
+
+	&__logo-img {
+		width: 65%;
+		height: 65%;
+	}
+
+	/* ===== 模式 2: Bento 冰晶 ===== */
+	&__bento-box {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 12rpx;
+		width: 72rpx;
+		height: 72rpx;
+	}
+
+	&__bento-block {
+		width: 100%;
+		height: 100%;
+		border-radius: 10rpx;
+		animation: mu-bento-scale 1.2s ease-in-out infinite;
+	}
+
+	/* ===== 模式 3: Orbit 行星轨 ===== */
+	&__orbit-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__orbit-ring {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		border: 4rpx solid transparent;
+
+		&--1 {
+			animation: mu-spin 1s linear infinite;
+		}
+
+		&--2 {
+			inset: 10rpx;
+			animation: mu-spin-reverse 0.75s linear infinite;
+		}
+	}
+
+	/* ===== 模式 4: Wave 5柱声波 ===== */
+	&__wave-box {
+		display: flex;
+		align-items: center;
+		gap: 10rpx;
+		height: 52rpx;
+	}
+
+	&__wave-bar {
+		width: 8rpx;
+		height: 100%;
+		border-radius: 999rpx;
+		animation: mu-wave 1s ease-in-out infinite;
+	}
+
+	/* ===== 模式 5: 3D 方块 ===== */
+	&__cube-box {
+		width: 60rpx;
+		height: 60rpx;
+		perspective: 160rpx;
+	}
+
+	&__cube-inner {
+		width: 100%;
+		height: 100%;
+		border-radius: 12rpx;
+		animation: mu-cube-flip 1.4s ease-in-out infinite;
+	}
+
+	/* ===== 模式 0: 自定义图片 ===== */
+	&__custom-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__custom-img {
+		display: block;
+		object-fit: contain;
+
+		&--pulse {
+			animation: mu-pulse 1.8s $mu-ease infinite;
+		}
+
+		&--spin {
+			animation: mu-spin 1.2s linear infinite;
+		}
+
+		&--bounce {
+			animation: mu-bounce 1.2s ease-in-out infinite;
+		}
+
+		&--float {
+			animation: mu-float 2s ease-in-out infinite;
+		}
+	}
+
+	/* ===== 模式 6: Ring 环形 ===== */
+	&__ring {
+		border-radius: 50%;
+		border-style: solid;
+		animation: mu-spin 0.75s linear infinite;
+	}
+
+	/* ===== 文本说明 ===== */
+	&__text {
+		font-size: 28rpx;
+		font-weight: 700;
+		margin-top: 32rpx;
+		letter-spacing: 1rpx;
+		text-align: center;
+	}
+
+	&__subtext {
+		font-size: 22rpx;
+		color: #64748B;
+		margin-top: 10rpx;
+		text-align: center;
+		font-weight: 500;
+	}
+}
+
+.mu-spin-pulse {
+	animation: mu-spin 2s linear infinite;
+}
+
+@keyframes mu-spin {
+	to { transform: rotate(360deg); }
+}
+
+@keyframes mu-spin-reverse {
+	to { transform: rotate(-360deg); }
+}
+
+@keyframes mu-pulse {
+	0%, 100% { transform: scale(1); }
+	50% { transform: scale(1.08); }
+}
+
+@keyframes mu-bounce {
+	0%, 100% { transform: translateY(0); }
+	50% { transform: translateY(-16rpx); }
+}
+
+@keyframes mu-float {
+	0%, 100% { transform: translateY(0) rotate(0deg); }
+	50% { transform: translateY(-12rpx) rotate(3deg); }
+}
+
+@keyframes mu-ripple {
+	0% { transform: scale(0.8); opacity: 0.8; }
+	100% { transform: scale(1.4); opacity: 0; }
+}
+
+@keyframes mu-bento-scale {
+	0%, 100% { transform: scale(0.5); opacity: 0.3; }
+	50% { transform: scale(1.1); opacity: 1; }
+}
+
+@keyframes mu-wave {
+	0%, 100% { transform: scaleY(0.3); }
+	50% { transform: scaleY(1); }
+}
+
+@keyframes mu-cube-flip {
+	0% { transform: rotateX(0deg) rotateY(0deg); }
+	50% { transform: rotateX(180deg) rotateY(0deg); }
+	100% { transform: rotateX(180deg) rotateY(180deg); }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+	<view class="mu-loadmore">
+		<mu-loading v-if="status === 'loading'" size="12" color="#8C8C8C" :margin-right="8" />
+		<text class="mu-loadmore__text">{{ statusText }}</text>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+	status: { type: String, default: 'more' }, // more | loading | nomore
+	textMore: { type: String, default: '加载更多' },
+	textLoading: { type: String, default: '正在加载...' },
+	textNomore: { type: String, default: '没有更多了' }
+})
+const statusText = computed(() => ({
+	more: props.textMore, loading: props.textLoading, nomore: props.textNomore
+}[props.status]))
+</script>
+
+<style lang="scss" scoped>
+.mu-loadmore {
+	display: flex; align-items: center; justify-content: center; padding: $mu-space-6 0;
+	&__text { font-size: $mu-font-sm; color: $mu-text-tertiary; }
+}
+</style>