muzhiyu-ui 1.0.0

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

@@ -0,0 +1,317 @@
+<template>
+	<view class="mu-card" :class="cardClass" :style="cardStyle" @tap="handleClick">
+		<!-- 顶置媒体封面图片 -->
+		<view v-if="cover" class="mu-card__cover" :style="{ height: coverHeight }">
+			<image class="mu-card__cover-img" :src="cover" mode="aspectFill" />
+			<view v-if="coverTag" class="mu-card__cover-tag">{{ coverTag }}</view>
+		</view>
+
+		<!-- 头部 Header -->
+		<view v-if="title || subtitle || icon || $slots.header || $slots.extra || extra" class="mu-card__header">
+			<slot name="header">
+				<view class="mu-card__header-left">
+					<!-- 图标微光徽章 -->
+					<view v-if="icon || $slots.icon" class="mu-card__icon-badge" :style="iconBadgeStyle">
+						<slot name="icon">
+							<mu-icon :name="icon" :size="18" :color="iconColor || '#171717'" />
+						</slot>
+					</view>
+					<view class="mu-card__header-title-box">
+						<text v-if="title" class="mu-card__title">{{ title }}</text>
+						<text v-if="subtitle" class="mu-card__subtitle">{{ subtitle }}</text>
+					</view>
+				</view>
+				<view v-if="extra || $slots.extra" class="mu-card__header-extra">
+					<slot name="extra">
+						<view class="mu-card__extra-pill">
+							<text class="mu-card__extra-text">{{ extra }}</text>
+						</view>
+					</slot>
+				</view>
+			</slot>
+		</view>
+
+		<!-- 主体 Body -->
+		<view class="mu-card__body" :style="{ padding: bodyPadding }">
+			<slot></slot>
+		</view>
+
+		<!-- 底部 Footer -->
+		<view v-if="$slots.footer" class="mu-card__footer">
+			<slot name="footer"></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	title: { type: String, default: '' },
+	subtitle: { type: String, default: '' },
+	icon: { type: String, default: '' },
+	iconColor: { type: String, default: '' },
+	iconBg: { type: String, default: '' },
+	extra: { type: String, default: '' },
+	cover: { type: String, default: '' },
+	coverTag: { type: String, default: '' },
+	coverHeight: { type: String, default: '320rpx' },
+	variant: { type: String, default: 'flat' },         // flat | elevated | glass | plain
+	bodyPadding: { type: String, default: '32rpx' },
+	radius: { type: String, default: '' },
+	border: { type: Boolean, default: true },
+	hoverable: { type: Boolean, default: false },
+	background: { type: String, default: '' },
+	margin: { type: String, default: '0' }
+})
+
+const emit = defineEmits(['click'])
+
+const cardClass = computed(() => [
+	`mu-card--${props.variant}`,
+	props.border && 'mu-card--bordered',
+	props.hoverable && 'mu-card--hoverable'
+])
+
+const cardStyle = computed(() => ({
+	...(props.background ? { background: props.background } : {}),
+	...(props.radius ? { borderRadius: props.radius } : {}),
+	...(props.margin ? { margin: props.margin } : {})
+}))
+
+const iconBadgeStyle = computed(() => {
+	if (props.iconBg) return { background: props.iconBg, borderColor: 'transparent' }
+	return {}
+})
+
+function handleClick(e) {
+	emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-card {
+	position: relative;
+	background: rgba(255, 255, 255, 0.92);
+	border-radius: $mu-radius-xl;
+	overflow: hidden;
+	transition: all $mu-duration $mu-ease-spring;
+	box-sizing: border-box;
+
+	/* 纤细边框与双层内发光 */
+	&--bordered {
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		box-shadow: inset 0 1rpx 0 0 rgba(255, 255, 255, 0.9);
+	}
+
+	/* 1. Flat 扁平双层包裹模式 */
+	&--flat {
+		box-shadow: 0 4rpx 16rpx -2rpx rgba(15, 23, 42, 0.04);
+	}
+
+	/* 2. Glass 毛玻璃模式 */
+	&--glass {
+		background: rgba(255, 255, 255, 0.75);
+		backdrop-filter: blur(20px);
+		border: 1rpx solid rgba(255, 255, 255, 0.95);
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(15, 23, 42, 0.06);
+	}
+
+	/* 3. Elevated 悬浮光晕模式 */
+	&--elevated {
+		box-shadow: 0 12rpx 36rpx -6rpx rgba(15, 23, 42, 0.08), 0 4rpx 12rpx -2rpx rgba(15, 23, 42, 0.04);
+		border-color: rgba(226, 232, 240, 0.6);
+	}
+
+	/* 4. Plain 极简纯色模式 */
+	&--plain {
+		background: #ffffff;
+		border-color: $mu-border-light;
+		box-shadow: none;
+	}
+
+	/* 触控阻尼响应 */
+	&--hoverable:active {
+		transform: scale(0.982);
+		opacity: 0.96;
+	}
+
+	/* 顶置封面图 */
+	&__cover {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		background: rgba(241, 245, 249, 0.5);
+
+		&-img {
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+
+		&-tag {
+			position: absolute;
+			top: 20rpx;
+			right: 20rpx;
+			padding: 6rpx 18rpx;
+			border-radius: $mu-radius-full;
+			background: rgba(15, 23, 42, 0.65);
+			backdrop-filter: blur(12px);
+			color: #ffffff;
+			font-size: 20rpx;
+			font-weight: 700;
+			border: 1rpx solid rgba(255, 255, 255, 0.3);
+		}
+	}
+
+	/* 头部 Header */
+	&__header {
+		padding: 28rpx 32rpx;
+		border-bottom: 1rpx solid rgba(241, 245, 249, 0.9);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&-left {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			min-width: 0;
+		}
+
+		&-title-box {
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+		}
+
+		&-extra {
+			margin-left: 20rpx;
+			flex-shrink: 0;
+		}
+	}
+
+	/* 图标光晕微章 */
+	&__icon-badge {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 18rpx;
+		background: rgba(99, 102, 241, 0.08);
+		border: 1rpx solid rgba(99, 102, 241, 0.18);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+	}
+
+	&__title {
+		font-size: 30rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+		letter-spacing: -0.4rpx;
+		line-height: 1.35;
+	}
+
+	&__subtitle {
+		font-size: 22rpx;
+		color: $mu-text-tertiary;
+		margin-top: 4rpx;
+		font-weight: 500;
+	}
+
+	/* 右上角 Extra 胶囊按钮 */
+	&__extra-pill {
+		padding: 8rpx 20rpx;
+		border-radius: $mu-radius-full;
+		background: rgba(99, 102, 241, 0.06);
+		border: 1rpx solid rgba(99, 102, 241, 0.15);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__extra-text {
+		font-size: 22rpx;
+		color: $mu-primary;
+		font-weight: 700;
+	}
+
+	/* 主体 Body */
+	&__body {
+		box-sizing: border-box;
+	}
+
+	/* 底部 Footer */
+	&__footer {
+		padding: 24rpx 32rpx;
+		border-top: 1rpx solid rgba(241, 245, 249, 0.9);
+		background: rgba(248, 250, 252, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-card {
+		background: rgba(18, 18, 24, 0.88);
+		border-color: rgba(255, 255, 255, 0.08);
+
+		&--glass {
+			background: rgba(18, 18, 24, 0.75);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__header {
+			border-bottom-color: rgba(255, 255, 255, 0.06);
+		}
+		&__icon-badge {
+			background: rgba(255, 255, 255, 0.06);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__subtitle { color: $mu-dark-text-secondary; }
+		&__extra-pill {
+			background: rgba(255, 255, 255, 0.08);
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+		&__footer {
+			border-top-color: rgba(255, 255, 255, 0.06);
+			background: rgba(255, 255, 255, 0.02);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-card {
+		background: rgba(18, 18, 24, 0.88);
+		border-color: rgba(255, 255, 255, 0.08);
+
+		&--glass {
+			background: rgba(18, 18, 24, 0.75);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__header {
+			border-bottom-color: rgba(255, 255, 255, 0.06);
+		}
+		&__icon-badge {
+			background: rgba(255, 255, 255, 0.06);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__subtitle { color: $mu-dark-text-secondary; }
+		&__extra-pill {
+			background: rgba(255, 255, 255, 0.08);
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+		&__footer {
+			border-top-color: rgba(255, 255, 255, 0.06);
+			background: rgba(255, 255, 255, 0.02);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,336 @@
+<template>
+	<view v-if="visible" class="mu-cascader" :class="[panelShow && 'mu-cascader--open']">
+		<!-- 遮罩层 -->
+		<view class="mu-cascader__mask" @tap="handleClose"></view>
+
+		<!-- 底部面板 Panel -->
+		<view class="mu-cascader__panel" :class="[panelShow && 'mu-cascader__panel--show']" @tap.stop>
+			<!-- 头部 Header -->
+			<view class="mu-cascader__header">
+				<text class="mu-cascader__title">{{ title }}</text>
+				<view class="mu-cascader__close mu-touchable-flat" @tap="handleClose">
+					<mu-icon name="close" :size="16" color="#94A3B8" />
+				</view>
+			</view>
+
+			<!-- 级联 Tab 选项卡组 -->
+			<scroll-view scroll-x class="mu-cascader__tabs-scroll" :show-scrollbar="false">
+				<view class="mu-cascader__tabs">
+					<view
+						v-for="(tab, i) in tabs"
+						:key="i"
+						class="mu-cascader__tab"
+						:class="[activeTab === i && 'mu-cascader__tab--active']"
+						@tap="switchTab(i)"
+					>
+						<text class="mu-cascader__tab-text">{{ tab || placeholder[i] || '请选择' }}</text>
+						<view v-if="activeTab === i" class="mu-cascader__tab-line"></view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<!-- 选项列表 scroll-view -->
+			<scroll-view scroll-y class="mu-cascader__options">
+				<view
+					v-for="(opt, oi) in currentOptions"
+					:key="oi"
+					class="mu-cascader__option"
+					:class="[isSelected(opt, activeTab) && 'mu-cascader__option--active']"
+					@tap="selectOption(opt, oi)"
+				>
+					<text class="mu-cascader__option-text">{{ getField(opt, 'label') }}</text>
+					<mu-icon v-if="isSelected(opt, activeTab)" name="check" :size="16" color="#171717" />
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	modelValue: { type: Array, default: () => [] },
+	value: { type: Array, default: () => [] },
+	options: { type: Array, default: () => [] },
+	title: { type: String, default: '请选择' },
+	fieldNames: { type: Object, default: () => ({ label: 'label', value: 'value', children: 'children' }) }
+})
+
+const emit = defineEmits(['change', 'close', 'update:show', 'update:modelValue', 'update:value'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+const activeTab = ref(0)
+const selectedPath = ref([])
+const placeholder = ['请选择', '请选择', '请选择', '请选择']
+
+function getField(obj, field) {
+	if (!obj) return ''
+	const key = props.fieldNames[field] || field
+	return obj[key]
+}
+
+const currentOptions = computed(() => {
+	let list = props.options
+	for (let i = 0; i < activeTab.value; i++) {
+		const selectedVal = selectedPath.value[i]
+		const selectedOpt = list.find(o => getField(o, 'value') === selectedVal)
+		if (selectedOpt && getField(selectedOpt, 'children')) {
+			list = getField(selectedOpt, 'children')
+		} else {
+			return []
+		}
+	}
+	return list || []
+})
+
+const tabs = computed(() => {
+	const result = []
+	let list = props.options
+
+	for (let i = 0; i < selectedPath.value.length; i++) {
+		const val = selectedPath.value[i]
+		const opt = list.find(o => getField(o, 'value') === val)
+		if (opt) {
+			result.push(getField(opt, 'label'))
+			const children = getField(opt, 'children')
+			if (children && children.length) {
+				list = children
+			} else {
+				return result
+			}
+		}
+	}
+
+	result.push('')
+	return result
+})
+
+function isSelected(opt, level) {
+	return selectedPath.value[level] === getField(opt, 'value')
+}
+
+function switchTab(i) {
+	activeTab.value = i
+}
+
+function selectOption(opt) {
+	const val = getField(opt, 'value')
+	selectedPath.value = selectedPath.value.slice(0, activeTab.value)
+	selectedPath.value.push(val)
+
+	const children = getField(opt, 'children')
+	if (children && children.length) {
+		activeTab.value++
+	} else {
+		emit('change', [...selectedPath.value])
+		emit('update:modelValue', [...selectedPath.value])
+		emit('update:value', [...selectedPath.value])
+		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
+		const initVal = props.modelValue.length ? props.modelValue : props.value
+		selectedPath.value = [...initVal]
+		activeTab.value = selectedPath.value.length > 0 ? selectedPath.value.length - 1 : 0
+		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-cascader {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-popup;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	box-sizing: border-box;
+
+	&__mask {
+		position: absolute;
+		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: relative;
+		background: #ffffff;
+		border-radius: 32rpx 32rpx 0 0;
+		max-height: 75vh;
+		display: flex;
+		flex-direction: column;
+		transform: translateY(100%);
+		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+		z-index: 2;
+		overflow: hidden;
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 32rpx;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+	}
+
+	&__title {
+		font-size: 30rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+		letter-spacing: -0.5rpx;
+	}
+
+	&__close {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
+		background: #F1F5F9;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__tabs-scroll {
+		width: 100%;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+		background: #F8FAFC;
+	}
+
+	&__tabs {
+		display: flex;
+		padding: 0 24rpx;
+		white-space: nowrap;
+	}
+
+	&__tab {
+		position: relative;
+		padding: 24rpx 20rpx;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		&-text {
+			font-size: 26rpx;
+			color: #64748B;
+			font-weight: 600;
+			transition: color 0.2s ease;
+		}
+
+		&--active &-text {
+			color: #171717;
+			font-weight: 800;
+		}
+
+		&-line {
+			position: absolute;
+			bottom: 0;
+			left: 20rpx;
+			right: 20rpx;
+			height: 5rpx;
+			background: #171717;
+			border-radius: 3rpx;
+		}
+	}
+
+	&__options {
+		flex: 1;
+		max-height: 55vh;
+	}
+
+	&__option {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 32rpx;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:active {
+			background: rgba(99, 102, 241, 0.04);
+		}
+
+		&--active {
+			background: rgba(99, 102, 241, 0.06);
+
+			.mu-cascader__option-text {
+				color: #171717;
+				font-weight: 800;
+			}
+		}
+
+		&-text {
+			font-size: 28rpx;
+			color: $mu-text-primary;
+			font-weight: 500;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-cascader {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #14141E !important; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__close { background: rgba(255, 255, 255, 0.1); }
+		&__tabs-scroll { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
+		&__tab-text { color: $mu-dark-text-secondary; }
+		&__tab--active .mu-cascader__tab-text { color: #FFFFFF; }
+		&__option-text { color: $mu-dark-text-primary; }
+		&__option--active { background: rgba(99, 102, 241, 0.15); .mu-cascader__option-text { color: #FFFFFF; } }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-cascader {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #14141E !important; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__close { background: rgba(255, 255, 255, 0.1); }
+		&__tabs-scroll { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
+		&__tab-text { color: $mu-dark-text-secondary; }
+		&__tab--active .mu-cascader__tab-text { color: #FFFFFF; }
+		&__option-text { color: $mu-dark-text-primary; }
+		&__option--active { background: rgba(99, 102, 241, 0.15); .mu-cascader__option-text { color: #FFFFFF; } }
+	}
+}
+</style>