muzhiyu-ui 1.0.0

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

@@ -0,0 +1,429 @@
+<template>
+	<view v-if="visible" class="mu-calendar" :class="[panelShow && 'mu-calendar--open']">
+		<!-- 遮罩层 -->
+		<view class="mu-calendar__mask" @tap="handleClose"></view>
+
+		<!-- 底部面板 Panel -->
+		<view class="mu-calendar__panel" :class="[panelShow && 'mu-calendar__panel--show']" @tap.stop>
+			<!-- 头部 Header -->
+			<view class="mu-calendar__header">
+				<text class="mu-calendar__title">{{ title }}</text>
+				<view class="mu-calendar__close mu-touchable-flat" @tap="handleClose">
+					<mu-icon name="close" :size="16" color="#94A3B8" />
+				</view>
+			</view>
+
+			<!-- 星期标头 -->
+			<view class="mu-calendar__weekdays">
+				<text v-for="(w, wi) in weekdays" :key="wi" class="mu-calendar__weekday" :class="{ 'mu-calendar__weekday--weekend': wi === 0 || wi === 6 }">
+					{{ w }}
+				</text>
+			</view>
+
+			<!-- 日历滚动区 -->
+			<scroll-view scroll-y class="mu-calendar__body">
+				<view v-for="(month, mi) in monthList" :key="mi" class="mu-calendar__month">
+					<view class="mu-calendar__month-title">
+						<text class="mu-calendar__month-text">{{ month.year }}年{{ month.month }}月</text>
+					</view>
+
+					<view class="mu-calendar__days">
+						<view
+							v-for="(day, di) in month.days"
+							:key="di"
+							class="mu-calendar__day"
+							:class="getDayClasses(day)"
+							@tap="selectDay(day)"
+						>
+							<template v-if="day.day">
+								<view class="mu-calendar__day-inner">
+									<text class="mu-calendar__day-text">{{ day.day }}</text>
+									<text v-if="getDaySubText(day)" class="mu-calendar__sub-text">{{ getDaySubText(day) }}</text>
+								</view>
+							</template>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<!-- 底部确认按钮 -->
+			<view v-if="showConfirm" class="mu-calendar__footer">
+				<mu-button type="primary" block size="medium" @click="handleConfirm">
+					{{ confirmText }}
+				</mu-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	modelValue: { type: [String, Array], default: '' },
+	defaultDate: { type: [String, Array], default: '' },
+	title: { type: String, default: '选择日期' },
+	type: { type: String, default: 'single' },             // single (单选) | range (范围选) | multiple (多选)
+	minDate: { type: String, default: '' },
+	maxDate: { type: String, default: '' },
+	maxMonth: { type: Number, default: 6 },
+	showConfirm: { type: Boolean, default: true },
+	confirmText: { type: String, default: '确定' }
+})
+
+const emit = defineEmits(['confirm', 'change', 'close', 'update:show', 'update:modelValue'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+const selected = ref([])
+
+const todayStr = computed(() => {
+	const now = new Date()
+	return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+})
+
+const startDateObj = computed(() => {
+	const d = props.minDate ? new Date(props.minDate) : new Date()
+	return { year: d.getFullYear(), month: d.getMonth() + 1 }
+})
+
+const monthList = computed(() => {
+	const list = []
+	let y = startDateObj.value.year
+	let m = startDateObj.value.month
+
+	for (let i = 0; i < props.maxMonth; i++) {
+		const firstDay = new Date(y, m - 1, 1).getDay()
+		const totalDays = new Date(y, m, 0).getDate()
+		const days = []
+
+		for (let j = 0; j < firstDay; j++) days.push({ day: 0, date: '' })
+
+		for (let d = 1; d <= totalDays; d++) {
+			const dateStr = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`
+			days.push({ day: d, date: dateStr, year: y, month: m })
+		}
+
+		list.push({ year: y, month: m, days })
+		m++
+		if (m > 12) { m = 1; y++ }
+	}
+	return list
+})
+
+function isDayDisabled(day) {
+	if (!day.date) return true
+	if (props.minDate && day.date < props.minDate) return true
+	if (props.maxDate && day.date > props.maxDate) return true
+	return false
+}
+
+function getDayClasses(day) {
+	if (!day.day) return ['mu-calendar__day--empty']
+	if (isDayDisabled(day)) return ['mu-calendar__day--disabled']
+
+	const cls = []
+	const isSel = selected.value.includes(day.date)
+
+	if (isSel) cls.push('mu-calendar__day--selected')
+
+	if (props.type === 'range' && selected.value.length === 2) {
+		if (day.date === selected.value[0]) cls.push('mu-calendar__day--start')
+		if (day.date === selected.value[1]) cls.push('mu-calendar__day--end')
+		if (day.date > selected.value[0] && day.date < selected.value[1]) {
+			cls.push('mu-calendar__day--between')
+		}
+	}
+
+	return cls
+}
+
+function getDaySubText(day) {
+	if (!day.day) return ''
+	if (props.type === 'range' && selected.value.length >= 1) {
+		if (day.date === selected.value[0]) return '开始'
+		if (day.date === selected.value[1]) return '结束'
+	}
+	if (day.date === todayStr.value) return '今天'
+	return ''
+}
+
+function selectDay(day) {
+	if (!day.day || isDayDisabled(day)) return
+
+	if (props.type === 'single') {
+		selected.value = [day.date]
+		if (!props.showConfirm) {
+			handleConfirm()
+		}
+	} else if (props.type === 'range') {
+		if (selected.value.length === 0 || selected.value.length === 2) {
+			selected.value = [day.date]
+		} else {
+			const start = selected.value[0]
+			selected.value = day.date >= start ? [start, day.date] : [day.date, start]
+			if (!props.showConfirm && selected.value.length === 2) {
+				handleConfirm()
+			}
+		}
+	} else if (props.type === 'multiple') {
+		const idx = selected.value.indexOf(day.date)
+		if (idx >= 0) selected.value.splice(idx, 1)
+		else selected.value.push(day.date)
+	}
+
+	const res = props.type === 'single' ? selected.value[0] : [...selected.value]
+	emit('change', res)
+}
+
+function handleConfirm() {
+	const res = props.type === 'single' ? (selected.value[0] || '') : [...selected.value]
+	emit('confirm', res)
+	emit('update:modelValue', res)
+	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 || props.defaultDate
+		if (initVal) {
+			selected.value = Array.isArray(initVal) ? [...initVal] : [initVal]
+		} else {
+			selected.value = []
+		}
+		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-calendar {
+	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: blur(8px);
+		opacity: 0;
+		transition: opacity 0.25s ease;
+	}
+
+	&--open &__mask {
+		opacity: 1;
+	}
+
+	&__panel {
+		position: relative;
+		background: #ffffff;
+		border-radius: 32rpx 32rpx 0 0;
+		max-height: 80vh;
+		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;
+	}
+
+	&__weekdays {
+		display: flex;
+		padding: 16rpx 0;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+		background: #F8FAFC;
+	}
+
+	&__weekday {
+		flex: 1;
+		text-align: center;
+		font-size: 22rpx;
+		color: #64748B;
+		font-weight: 700;
+
+		&--weekend {
+			color: #F43F5E;
+		}
+	}
+
+	&__body {
+		flex: 1;
+		max-height: 58vh;
+	}
+
+	&__month-title {
+		padding: 24rpx 32rpx 12rpx;
+	}
+
+	&__month-text {
+		font-size: 26rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+	}
+
+	&__days {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 12rpx;
+	}
+
+	&__day {
+		width: calc(100% / 7);
+		height: 90rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		box-sizing: border-box;
+
+		&--empty { pointer-events: none; }
+		&--disabled {
+			opacity: 0.35;
+			pointer-events: none;
+		}
+
+		&-inner {
+			width: 72rpx;
+			height: 72rpx;
+			border-radius: 50%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.2s ease;
+		}
+
+		&-text {
+			font-size: 26rpx;
+			font-weight: 600;
+			color: $mu-text-primary;
+			line-height: 1;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.mu-calendar__sub-text {
+			font-size: 16rpx;
+			color: #94A3B8;
+			margin-top: 4rpx;
+			line-height: 1;
+		}
+
+		&--selected .mu-calendar__day-inner,
+		&--start .mu-calendar__day-inner,
+		&--end .mu-calendar__day-inner {
+			background: #171717 !important;
+			box-shadow: 0 4rpx 14rpx rgba(99, 102, 241, 0.35) !important;
+			border-radius: 50% !important;
+
+			.mu-calendar__day-text, .mu-calendar__sub-text {
+				color: #ffffff !important;
+				font-weight: 800 !important;
+			}
+		}
+
+		&--between {
+			background: rgba(99, 102, 241, 0.12);
+
+			.mu-calendar__day-text {
+				color: #171717;
+				font-weight: 700;
+			}
+		}
+	}
+
+	&__footer {
+		padding: 20rpx 32rpx;
+		border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		background: #ffffff;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-calendar {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: $mu-dark-bg-base; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__close { background: rgba(255, 255, 255, 0.1); }
+		&__weekdays { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
+		&__weekday { color: $mu-dark-text-secondary; }
+		&__month-text { color: $mu-dark-text-primary; }
+		&__day-text { color: $mu-dark-text-primary; }
+		&__day--between { background: rgba(99, 102, 241, 0.2); .mu-calendar__day-text { color: #FFFFFF; } }
+		&__footer { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-calendar {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: $mu-dark-bg-base; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__close { background: rgba(255, 255, 255, 0.1); }
+		&__weekdays { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
+		&__weekday { color: $mu-dark-text-secondary; }
+		&__month-text { color: $mu-dark-text-primary; }
+		&__day-text { color: $mu-dark-text-primary; }
+		&__day--between { background: rgba(99, 102, 241, 0.2); .mu-calendar__day-text { color: #FFFFFF; } }
+		&__footer { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+</style>

package/components/muzhiyu/mu-car-input/mu-car-input.vue

@@ -0,0 +1,209 @@
+<template>
+	<view class="mu-car-input">
+		<!-- 8 位车牌号分割输入框 (前 7 位燃油车，第 8 位新能源) -->
+		<view class="mu-car-input__boxes" @tap="focusInput">
+			<view
+				v-for="i in 8"
+				:key="i"
+				class="mu-car-input__box"
+				:class="[
+					`mu-car-input__box--${shape}`,
+					i === 8 && 'mu-car-input__box--new-energy',
+					getValueChar(i - 1) && 'mu-car-input__box--filled',
+					isCurrentFocus(i - 1) && 'mu-car-input__box--focus'
+				]"
+			>
+				<!-- 已选车牌字符 -->
+				<text v-if="getValueChar(i - 1)" class="mu-car-input__text">
+					{{ getValueChar(i - 1) }}
+				</text>
+
+				<!-- 第 8 位新能源专属绿色徽章提示 -->
+				<view v-else-if="i === 8" class="mu-car-input__new-energy-badge">
+					<text class="mu-car-input__new-energy-plus">+</text>
+					<text class="mu-car-input__new-energy-text">新能源</text>
+				</view>
+
+				<!-- 当前聚焦输入光标 -->
+				<view v-else-if="isCurrentFocus(i - 1)" class="mu-car-input__cursor"></view>
+			</view>
+		</view>
+
+		<!-- 自动联动弹起的车牌号专用键盘 -->
+		<mu-keyboard
+			v-model:show="showKeyboard"
+			v-model:value="innerValue"
+			mode="car"
+			:maxlength="8"
+			:title="keyboardTitle || '请输入车牌号码'"
+			@change="onKeyboardChange"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	shape: { type: String, default: 'radius' },        // square (微直角) | radius (圆角) | round (全圆) | underline (下划线)
+	disabled: { type: Boolean, default: false },
+	autoFocus: { type: Boolean, default: false },
+	keyboardTitle: { type: String, default: '请输入车牌号码' }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'finish'])
+
+const showKeyboard = ref(props.autoFocus)
+const innerValue = ref(props.modelValue || '')
+
+watch(() => props.modelValue, (val) => {
+	innerValue.value = val || ''
+})
+
+function getValueChar(index) {
+	return (props.modelValue || '').charAt(index) || ''
+}
+
+function isCurrentFocus(index) {
+	const len = (props.modelValue || '').length
+	return len === index
+}
+
+function focusInput() {
+	if (props.disabled) return
+	showKeyboard.value = true
+}
+
+function onKeyboardChange(val) {
+	innerValue.value = val
+	emit('update:modelValue', val)
+	emit('change', val)
+	if (val.length >= 7) {
+		emit('finish', val)
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-car-input {
+	position: relative;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+
+	&__boxes {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12rpx;
+		width: 100%;
+	}
+
+	&__box {
+		flex: 1;
+		height: 96rpx;
+		background: #ffffff;
+		border: 2rpx solid $mu-border;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s $mu-ease;
+		box-sizing: border-box;
+
+		&--square { border-radius: 8rpx; }
+		&--radius { border-radius: 16rpx; }
+		&--round { border-radius: 50%; max-width: 88rpx; }
+		&--underline {
+			border: none;
+			border-bottom: 4rpx solid $mu-border;
+			background: transparent;
+			border-radius: 0;
+		}
+
+		/* 新能源插槽 */
+		&--new-energy {
+			border-style: dashed;
+			border-color: #10B981;
+			background: rgba(16, 185, 129, 0.04);
+		}
+
+		&--filled {
+			border-color: $mu-primary;
+			background: #ffffff;
+		}
+
+		&--focus {
+			border-color: $mu-primary;
+			box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.3);
+			animation: mu-car-pulse 1.5s infinite ease-in-out;
+		}
+	}
+
+	&__text {
+		font-size: 36rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+	}
+
+	&__new-energy-badge {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	&__new-energy-plus {
+		font-size: 22rpx;
+		color: #10B981;
+		font-weight: 800;
+	}
+
+	&__new-energy-text {
+		font-size: 16rpx;
+		color: #10B981;
+		font-weight: 700;
+		margin-top: 4rpx;
+	}
+
+	&__cursor {
+		width: 4rpx;
+		height: 36rpx;
+		background: $mu-primary;
+		animation: mu-car-blink 1s infinite;
+	}
+}
+
+@keyframes mu-car-blink {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+@keyframes mu-car-pulse {
+	0%, 100% { border-color: $mu-primary; }
+	50% { border-color: rgba(99, 102, 241, 0.4); }
+}
+
+.mu-dark, page.mu-dark {
+	.mu-car-input {
+		&__box {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-car-input {
+		&__box {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+	}
+}
+</style>