muzhiyu-ui 1.0.0

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

@@ -0,0 +1,215 @@
+<template>
+	<view class="mu-dropdown">
+		<!-- 触发器槽位 Trigger -->
+		<view class="mu-dropdown__trigger" @tap.stop="toggle">
+			<slot></slot>
+		</view>
+
+		<!-- 悬浮下拉面板 Panel -->
+		<view v-if="visible" class="mu-dropdown__mask" @tap="close"></view>
+		<view
+			v-if="visible"
+			class="mu-dropdown__panel"
+			:class="[`mu-dropdown--${placement}`]"
+			:style="panelStyle"
+			@tap.stop
+		>
+			<view
+				v-for="(item, index) in items"
+				:key="index"
+				class="mu-dropdown__item"
+				:class="[
+					item.disabled && 'mu-dropdown__item--disabled',
+					item.danger && 'mu-dropdown__item--danger',
+					item.divider && 'mu-dropdown__item--divider'
+				]"
+				@tap="handleClick(index, item)"
+			>
+				<mu-icon v-if="item.icon" :name="item.icon" :size="15" :color="getItemIconColor(item)" style="margin-right: 12rpx;" />
+				<text class="mu-dropdown__text" :style="{ color: item.color || '' }">{{ item.text || item.label || item }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	placement: { type: String, default: 'bottom-left' }, // bottom-left | bottom-right | top-left | top-right
+	width: { type: String, default: '280rpx' }
+})
+
+const emit = defineEmits(['click', 'select', 'open', 'close'])
+
+const visible = ref(false)
+
+const panelStyle = computed(() => ({
+	width: props.width
+}))
+
+function getItemIconColor(item) {
+	if (item.disabled) return '#CBD5E1'
+	if (item.danger) return '#F43F5E'
+	if (item.iconColor) return item.iconColor
+	return '#64748B'
+}
+
+function toggle() {
+	visible.value = !visible.value
+	if (visible.value) emit('open')
+	else emit('close')
+}
+
+function handleClick(index, item) {
+	if (item.disabled) return
+	visible.value = false
+	emit('click', { index, item })
+	emit('select', item)
+	emit('close')
+}
+
+function close() {
+	visible.value = false
+	emit('close')
+}
+
+defineExpose({ toggle, close, visible })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-dropdown {
+	position: relative;
+	display: inline-flex;
+
+	&__trigger {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	&__mask {
+		position: fixed;
+		inset: 0;
+		z-index: $mu-z-popup;
+		background: transparent;
+	}
+
+	&__panel {
+		position: absolute;
+		z-index: calc(#{$mu-z-popup} + 1);
+		background: #FFFFFF !important;
+		border-radius: 20rpx;
+		box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.14);
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		overflow: hidden;
+		padding: 8rpx 0;
+		animation: mu-dropdown-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+		transform-origin: top left;
+	}
+
+	/* 位置扩展 */
+	&--bottom-left {
+		top: 100%;
+		left: 0;
+		margin-top: 12rpx;
+	}
+
+	&--bottom-right {
+		top: 100%;
+		right: 0;
+		margin-top: 12rpx;
+		transform-origin: top right;
+	}
+
+	&--top-left {
+		bottom: 100%;
+		left: 0;
+		margin-bottom: 12rpx;
+		transform-origin: bottom left;
+	}
+
+	&--top-right {
+		bottom: 100%;
+		right: 0;
+		margin-bottom: 12rpx;
+		transform-origin: bottom right;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 24rpx;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:active {
+			background: rgba(99, 102, 241, 0.06);
+		}
+
+		&--disabled {
+			opacity: 0.45;
+			pointer-events: none;
+		}
+
+		&--danger .mu-dropdown__text {
+			color: #F43F5E !important;
+		}
+
+		&--divider {
+			border-bottom: 1rpx solid rgba(226, 232, 240, 0.7);
+			margin-bottom: 6rpx;
+			padding-bottom: 22rpx;
+		}
+	}
+
+	&__text {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 500;
+		white-space: nowrap;
+	}
+}
+
+@keyframes mu-dropdown-fade {
+	from {
+		opacity: 0;
+		transform: scale(0.92);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-dropdown {
+		&__panel {
+			background: #161622 !important;
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.65);
+		}
+		&__text { color: #F8FAFC !important; }
+		&__item--divider { border-color: rgba(255, 255, 255, 0.08); }
+		&__item:active { background: rgba(255, 255, 255, 0.08); }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-dropdown {
+		&__panel {
+			background: #161622 !important;
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.65);
+		}
+		&__text { color: #F8FAFC !important; }
+		&__item--divider { border-color: rgba(255, 255, 255, 0.08); }
+		&__item:active { background: rgba(255, 255, 255, 0.08); }
+	}
+}
+</style>

package/components/muzhiyu/mu-dropdown-top/mu-dropdown-top.vue

@@ -0,0 +1,243 @@
+<template>
+	<view v-if="visible" class="mu-dropdown-top" :class="[panelShow && 'mu-dropdown-top--open']" :style="containerStyle">
+		<!-- 遮罩层 -->
+		<view class="mu-dropdown-top__mask" @tap="handleClose"></view>
+
+		<!-- 向下滑出的面板 Panel -->
+		<view class="mu-dropdown-top__panel" :class="[panelShow && 'mu-dropdown-top__panel--show']" @tap.stop>
+			<slot>
+				<!-- 默认选项列表 -->
+				<view
+					v-for="(item, index) in items"
+					:key="index"
+					class="mu-dropdown-top__item"
+					:class="[isSelected(item, index) && 'mu-dropdown-top__item--active']"
+					@tap="handleClick(index, item)"
+				>
+					<text class="mu-dropdown-top__text" :style="getTextStyle(item, index)">{{ getItemText(item) }}</text>
+					<mu-icon v-if="isSelected(item, index)" name="check" :size="16" :color="activeColor || '#171717'" />
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-dropdown-top 顶端下拉菜单
+ * @description 从页面顶端/导航栏下方平滑滑出向下的全宽下拉筛选/菜单面板
+ * @property {boolean} show - 是否显示面板
+ * @property {Array} items - 菜单列表 [{label, value}]
+ * @property {string|number} value - 当前选中的值
+ * @property {number|string} top - 偏离顶部的高度 rpx/px
+ * @property {string} activeColor - 选中态高亮色彩
+ * @event {Function} select - 选中筛选项时触发
+ */
+import { ref, computed, watch } from "vue"
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	items: { type: Array, default: () => [] },
+	value: { type: [String, Number], default: "" },
+	top: { type: [Number, String], default: 0 },
+	activeColor: { type: String, default: "#171717" }
+})
+
+const emit = defineEmits(["click", "select", "close", "update:show", "update:value"])
+
+const visible = ref(false)
+const panelShow = ref(false)
+
+const containerStyle = computed(() => {
+	if (!props.top || props.top === 0 || props.top === "0") return { top: 0 }
+	const topVal = typeof props.top === "number" ? `${props.top}rpx` : props.top.includes("px") || props.top.includes("rpx") ? props.top : `${props.top}rpx`
+	return { top: topVal }
+})
+
+function getItemText(item) {
+	if (typeof item === "object" && item !== null) {
+		return item.text || item.label || String(item)
+	}
+	return String(item)
+}
+
+function getItemValue(item, index) {
+	if (typeof item === "object" && item !== null) {
+		return (item.value !== undefined ? item.value : (item.text !== undefined ? item.text : index))
+	}
+	return item
+}
+
+function isSelected(item, index) {
+	const val = getItemValue(item, index)
+	return props.value === val
+}
+
+function getTextStyle(item, index) {
+	if (isSelected(item, index) && props.activeColor && props.activeColor !== "#171717") {
+		return { color: props.activeColor, fontWeight: "800" }
+	}
+	return {}
+}
+
+function handleClick(index, item) {
+	const val = getItemValue(item, index)
+	emit("click", { index, item, value: val })
+	emit("select", item)
+	emit("update:value", val)
+	handleClose()
+}
+
+function handleClose() {
+	panelShow.value = false
+	emit("update:show", false)
+	setTimeout(() => {
+		visible.value = false
+		emit("close")
+	}, 250)
+}
+
+watch(
+	() => props.show,
+	(val) => {
+		if (val) {
+			visible.value = true
+			setTimeout(() => {
+				panelShow.value = true
+			}, 30)
+		} else {
+			panelShow.value = false
+			setTimeout(() => {
+				visible.value = false
+			}, 250)
+		}
+	},
+	{ immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-dropdown-top {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: $mu-z-popup;
+
+	&__mask {
+		position: fixed;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.45);
+		backdrop-filter: none !important;
+		opacity: 0;
+		transition: opacity 0.25s ease;
+	}
+
+	&--open &__mask {
+		opacity: 1;
+	}
+
+	&__panel {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: #FFFFFF !important;
+		border-radius: 0 0 32rpx 32rpx;
+		box-shadow: 0 16rpx 40rpx rgba(15, 23, 42, 0.12);
+		transform: translateY(-100%);
+		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+		overflow: hidden;
+		z-index: 2;
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 36rpx;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.7);
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		&:active {
+			background: rgba(99, 102, 241, 0.06);
+		}
+
+		&--active {
+			background: rgba(99, 102, 241, 0.06);
+
+			.mu-dropdown-top__text {
+				color: #171717;
+				font-weight: 800;
+			}
+		}
+	}
+
+	&__text {
+		font-size: 28rpx;
+		color: $mu-text-primary;
+		font-weight: 500;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-dropdown-top {
+		&__mask {
+			background: rgba(0, 0, 0, 0.65);
+		}
+		&__panel {
+			background: #161622 !important;
+			box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.65);
+		}
+		&__item {
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+		&__text {
+			color: #F8FAFC !important;
+		}
+		&__item--active {
+			background: rgba(255, 255, 255, 0.08);
+			.mu-dropdown-top__text {
+				color: #FFFFFF !important;
+			}
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-dropdown-top {
+		&__mask {
+			background: rgba(0, 0, 0, 0.65);
+		}
+		&__panel {
+			background: #161622 !important;
+			box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.65);
+		}
+		&__item {
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+		&__text {
+			color: #F8FAFC !important;
+		}
+		&__item--active {
+			background: rgba(255, 255, 255, 0.08);
+			.mu-dropdown-top__text {
+				color: #FFFFFF !important;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,217 @@
+<template>
+	<view class="mu-empty" :style="{ padding }">
+		<!-- 1. 自定义媒体/动图插槽或图片模式 -->
+		<view v-if="$slots.image || realImage" class="mu-empty__image-wrap">
+			<slot name="image">
+				<image
+					class="mu-empty__image"
+					:src="realImage"
+					:style="imageStyle"
+					mode="aspectFit"
+				/>
+			</slot>
+		</view>
+
+		<!-- 2. 极奢 3D 浮雕矢量 Icon 微章模式 -->
+		<view v-else class="mu-empty__badge-container">
+			<view class="mu-empty__badge" :style="badgeStyle">
+				<view class="mu-empty__halo" :style="{ background: iconColorComputed }"></view>
+				<mu-icon :name="iconName" :size="iconSize" :color="iconColorComputed" />
+			</view>
+		</view>
+
+		<!-- 3. 标题文案 -->
+		<text class="mu-empty__title">{{ displayTitle }}</text>
+		
+		<!-- 4. 副标题/详细说明 -->
+		<text v-if="subText || description" class="mu-empty__desc">{{ subText || description }}</text>
+
+		<!-- 5. 底部行动按钮或按钮插槽 -->
+		<view v-if="$slots.default || buttonText" class="mu-empty__action">
+			<slot>
+				<mu-button
+					v-if="buttonText"
+					type="primary"
+					size="small"
+					round
+					icon="refresh"
+					@click="onButtonClick"
+				>
+					{{ buttonText }}
+				</mu-button>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	// 场景预设: data(数据空) | search(搜索空) | cart(购物车空) | message(消息空) | network(无网络) | permission(无权限)
+	mode: { type: String, default: 'data' },
+	title: { type: String, default: '' },
+	description: { type: String, default: '' },
+	text: { type: String, default: '' },              // 兼容旧属性 text
+	subText: { type: String, default: '' },           // 兼容旧属性 subText
+	icon: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 44 },
+	iconColor: { type: String, default: '' },
+	image: { type: String, default: '' },             // 支持静态图 / GIF 动图 / 外部 URL
+	src: { type: String, default: '' },               // 兼容 src 别名
+	imageSize: { type: [Number, String], default: 160 },
+	buttonText: { type: String, default: '' },
+	padding: { type: String, default: '60rpx 0' }
+})
+
+const emit = defineEmits(['click-button'])
+
+// 场景预设映射
+const modeConfigs = {
+	data: { icon: 'inbox', title: '暂无相关数据', color: '#171717' },
+	search: { icon: 'search', title: '未搜索到相关结果', color: '#0EA5E9' },
+	cart: { icon: 'cart', title: '购物车是空的', color: '#F59E0B' },
+	message: { icon: 'message', title: '暂无新的消息通知', color: '#10B981' },
+	network: { icon: 'wifi', title: '网络连接已断开', color: '#F43F5E' },
+	permission: { icon: 'lock', title: '暂无访问或查看权限', color: '#8B5CF6' }
+}
+
+const currentConfig = computed(() => modeConfigs[props.mode] || modeConfigs.data)
+
+const iconName = computed(() => props.icon || currentConfig.value.icon)
+
+const iconColorComputed = computed(() => props.iconColor || currentConfig.value.color)
+
+const realImage = computed(() => props.image || props.src)
+
+const displayTitle = computed(() => {
+	if (props.title) return props.title
+	if (props.text) return props.text
+	return currentConfig.value.title
+})
+
+const imageStyle = computed(() => {
+	const sz = typeof props.imageSize === 'number' ? props.imageSize * 2 : props.imageSize
+	return {
+		width: sz + 'rpx',
+		height: sz + 'rpx'
+	}
+})
+
+const badgeStyle = computed(() => {
+	const c = iconColorComputed.value
+	return {
+		background: `linear-gradient(145deg, rgba(255,255,255,0.95), ${c}0D)`,
+		borderColor: `${c}30`,
+		boxShadow: `0 16rpx 36rpx -8rpx ${c}25`
+	}
+})
+
+function onButtonClick(e) {
+	emit('click-button', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+
+	&__image-wrap {
+		margin-bottom: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__image {
+		display: block;
+		max-width: 100%;
+	}
+
+	&__badge-container {
+		margin-bottom: 28rpx;
+	}
+
+	&__badge {
+		width: 140rpx;
+		height: 140rpx;
+		border-radius: 50%;
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+		&:hover {
+			transform: scale(1.05) translateY(-4rpx);
+		}
+	}
+
+	&__halo {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		filter: blur(16px);
+		opacity: 0.2;
+		z-index: -1;
+	}
+
+	&__title {
+		font-size: 28rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		text-align: center;
+		line-height: 1.4;
+	}
+
+	&__desc {
+		font-size: 24rpx;
+		color: #94A3B8;
+		margin-top: 8rpx;
+		text-align: center;
+		line-height: 1.4;
+		max-width: 480rpx;
+	}
+
+	&__action {
+		margin-top: 32rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-empty {
+		&__badge {
+			background: rgba(255, 255, 255, 0.05) !important;
+			border-color: rgba(255, 255, 255, 0.12) !important;
+			box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.3) !important;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-empty {
+		&__badge {
+			background: rgba(255, 255, 255, 0.05) !important;
+			border-color: rgba(255, 255, 255, 0.12) !important;
+			box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.3) !important;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+	}
+}
+</style>