muzhiyu-ui 1.0.0

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

@@ -0,0 +1,193 @@
+<template>
+	<view class="mu-input-number" :class="{ 'mu-input-number--disabled': disabled }">
+		<!-- 减号按钮 -->
+		<view
+			class="mu-input-number__btn mu-input-number__btn--minus mu-touchable-flat"
+			:class="{ 'mu-input-number__btn--disabled': disabled || currentValue <= min }"
+			@tap="handleMinus"
+		>
+			<mu-icon name="minus" :size="12" :color="disabled || currentValue <= min ? '#94A3B8' : 'currentColor'" />
+		</view>
+
+		<!-- 输入/显示数字框 -->
+		<view class="mu-input-number__input-wrap">
+			<input v-if="editable" class="mu-input-number__input" type="number"
+				:value="String(currentValue)" :disabled="disabled"
+				@blur="onBlur" @input="onInput" />
+			<text v-else class="mu-input-number__display">{{ currentValue }}</text>
+		</view>
+
+		<!-- 加号按钮 -->
+		<view
+			class="mu-input-number__btn mu-input-number__btn--plus mu-touchable-flat"
+			:class="{ 'mu-input-number__btn--disabled': disabled || currentValue >= max }"
+			@tap="handlePlus"
+		>
+			<mu-icon name="plus" :size="12" :color="disabled || currentValue >= max ? '#94A3B8' : 'currentColor'" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: [Number, String], default: 1 },
+	value: { type: [Number, String], default: null },   // 兼容写 :value 的旧语法
+	min: { type: Number, default: 0 },
+	max: { type: Number, default: 9999 },
+	step: { type: Number, default: 1 },
+	disabled: { type: Boolean, default: false },
+	editable: { type: Boolean, default: false },
+	decimal: { type: Number, default: 0 }
+})
+
+const emit = defineEmits(['change', 'update:modelValue', 'update:value'])
+
+const currentValue = ref(Number((props.modelValue !== undefined ? props.modelValue : (props.value !== undefined ? props.value : 1))))
+
+watch(() => props.modelValue, (v) => {
+	if (v !== undefined && v !== null) currentValue.value = Number(v)
+})
+watch(() => props.value, (v) => {
+	if (v !== undefined && v !== null) currentValue.value = Number(v)
+})
+
+function clamp(val) {
+	let v = Number(val)
+	if (isNaN(v)) v = props.min
+	v = Math.max(props.min, Math.min(props.max, v))
+	if (props.decimal > 0) v = Number(v.toFixed(props.decimal))
+	return v
+}
+
+function setValue(v) {
+	const result = clamp(v)
+	currentValue.value = result
+	emit('change', result)
+	emit('update:modelValue', result)
+	emit('update:value', result)
+}
+
+function handleMinus() {
+	if (!props.disabled && currentValue.value > props.min) {
+		setValue(currentValue.value - props.step)
+	}
+}
+
+function handlePlus() {
+	if (!props.disabled && currentValue.value < props.max) {
+		setValue(currentValue.value + props.step)
+	}
+}
+
+function onBlur(e) {
+	setValue(e.detail.value)
+}
+
+function onInput(e) {
+	const v = Number(e.detail.value)
+	if (!isNaN(v)) currentValue.value = v
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-input-number {
+	display: inline-flex;
+	align-items: center;
+	background: rgba(241, 245, 249, 0.7);
+	border-radius: 12rpx;
+	padding: 4rpx;
+	border: 1rpx solid rgba(226, 232, 240, 0.8);
+	box-sizing: border-box;
+
+	&--disabled {
+		opacity: $mu-opacity-disabled;
+		pointer-events: none;
+	}
+
+	&__btn {
+		width: 48rpx;
+		height: 48rpx;
+		border-radius: 8rpx;
+		background: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2rpx 6rpx rgba(15, 23, 42, 0.08);
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:active {
+			background: rgba(241, 245, 249, 0.9);
+			transform: scale(0.95);
+		}
+
+		&--disabled {
+			background: transparent;
+			box-shadow: none;
+			cursor: not-allowed;
+		}
+	}
+
+	&__input-wrap {
+		min-width: 68rpx;
+		padding: 0 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__input {
+		width: 68rpx;
+		height: 48rpx;
+		text-align: center;
+		font-size: 26rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		background: transparent;
+	}
+
+	&__display {
+		font-size: 26rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		text-align: center;
+	}
+}
+
+
+.mu-dark, page.mu-dark {
+	.mu-input-number {
+		background: rgba(30, 30, 42, 0.9);
+		border-color: rgba(255, 255, 255, 0.1);
+		color: #F8FAFC;
+		&__btn {
+			background: rgba(45, 45, 60, 0.9);
+			color: #F8FAFC;
+			box-shadow: none !important;
+		}
+		&__display, &__input {
+			color: #F8FAFC !important;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-input-number {
+		background: rgba(30, 30, 42, 0.9);
+		border-color: rgba(255, 255, 255, 0.1);
+		color: #F8FAFC;
+		&__btn {
+			background: rgba(45, 45, 60, 0.9);
+			color: #F8FAFC;
+			box-shadow: none !important;
+		}
+		&__display, &__input {
+			color: #F8FAFC !important;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,415 @@
+<template>
+	<view v-if="visible" class="mu-keyboard" @tap="handleClose">
+		<view class="mu-keyboard__mask"></view>
+		<view class="mu-keyboard__panel" :class="{ 'mu-keyboard__panel--show': panelShow }" @tap.stop>
+			<!-- 顶部工具栏 Toolbar -->
+			<view v-if="showToolbar" class="mu-keyboard__toolbar">
+				<text class="mu-keyboard__cancel" @tap="handleClose">完成</text>
+				<text class="mu-keyboard__title">{{ title || computedDefaultTitle }}</text>
+				<view class="mu-keyboard__close" @tap="handleClose">
+					<mu-icon name="close" :size="16" color="#64748B" />
+				</view>
+			</view>
+
+			<!-- 键盘按键主容器 Keys Area -->
+			<view class="mu-keyboard__keys" :class="[mode === 'car' && 'mu-keyboard__keys--car']">
+				<!-- 车牌号模式: 省份简称键盘 (第1位) -->
+				<template v-if="mode === 'car' && currentCarPage === 'province'">
+					<view v-for="(row, ri) in carProvinces" :key="'prov-' + ri" class="mu-keyboard__row">
+						<view
+							v-for="(item, ki) in row"
+							:key="'prov-item-' + ki"
+							class="mu-keyboard__key"
+							:class="[item === 'del' && 'mu-keyboard__key--action']"
+							@tap="handleKey(item)"
+						>
+							<text v-if="item === 'del'" class="mu-keyboard__key-del">⌫</text>
+							<text v-else class="mu-keyboard__key-text">{{ item }}</text>
+						</view>
+					</view>
+				</template>
+
+				<!-- 车牌号模式: 数字字母键盘 (第2~8位) -->
+				<template v-else-if="mode === 'car' && currentCarPage === 'letter'">
+					<view v-for="(row, ri) in carLetters" :key="'let-' + ri" class="mu-keyboard__row">
+						<view
+							v-for="(item, ki) in row"
+							:key="'let-item-' + ki"
+							class="mu-keyboard__key"
+							:class="[
+								(item === 'del' || item === '省') && 'mu-keyboard__key--action',
+								item === '0' && 'mu-keyboard__key--wide'
+							]"
+							@tap="handleKey(item)"
+						>
+							<text v-if="item === 'del'" class="mu-keyboard__key-del">⌫</text>
+							<text v-else-if="item === '省'" class="mu-keyboard__key-tag">省份</text>
+							<text v-else class="mu-keyboard__key-text">{{ item }}</text>
+						</view>
+					</view>
+				</template>
+
+				<!-- 标准数字 / 身份证键盘 (Standard Numeric / ID Card) -->
+				<template v-else>
+					<view v-for="(row, ri) in standardKeys" :key="'std-' + ri" class="mu-keyboard__row">
+						<view
+							v-for="(key, ki) in row"
+							:key="'std-key-' + ki"
+							class="mu-keyboard__key"
+							:class="[
+								key === '0' && 'mu-keyboard__key--wide',
+								(key === 'del' || key === '.' || key === 'X') && 'mu-keyboard__key--action'
+							]"
+							@tap="handleKey(key)"
+						>
+							<text v-if="key === 'del'" class="mu-keyboard__key-del">⌫</text>
+							<text v-else class="mu-keyboard__key-text">{{ key }}</text>
+						</view>
+					</view>
+				</template>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	title: { type: String, default: '' },
+	value: { type: String, default: '' },
+	mode: { type: String, default: 'number' },              // number | idcard | car
+	maxlength: { type: Number, default: 0 },
+	decimal: { type: Boolean, default: false },
+	showToolbar: { type: Boolean, default: true },
+	extraKey: { type: String, default: '' }
+})
+
+const emit = defineEmits(['input', 'change', 'close', 'update:show', 'update:value', 'delete', 'confirm'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+
+// 车牌号当前子页面: 'province' (省份) | 'letter' (字母数字)
+const carStepManual = ref('')
+const currentCarPage = computed(() => {
+	if (carStepManual.value) return carStepManual.value
+	if (!props.value || props.value.length === 0) return 'province'
+	return 'letter'
+})
+
+// 车牌号 - 省份简称矩阵 (31个省份及直辖市)
+const carProvinces = [
+	['京', '津', '沪', '渝', '冀', '豫', '云', '辽'],
+	['黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣'],
+	['鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽'],
+	['贵', '粤', '青', '藏', '川', '宁', '琼', 'del']
+]
+
+// 车牌号 - 数字与英文字母矩阵
+const carLetters = [
+	['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+	['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '港'],
+	['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '澳'],
+	['省', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '领', '使', 'del']
+]
+
+// 标准 9 宫格 / 身份证数字按键矩阵
+const standardKeys = computed(() => {
+	const rows = [
+		['1', '2', '3'],
+		['4', '5', '6'],
+		['7', '8', '9']
+	]
+	let bottomExtra = ''
+	if (props.mode === 'idcard') {
+		bottomExtra = 'X'
+	} else if (props.decimal) {
+		bottomExtra = '.'
+	} else if (props.extraKey) {
+		bottomExtra = props.extraKey
+	}
+
+	rows.push([bottomExtra, '0', 'del'])
+	return rows
+})
+
+const computedDefaultTitle = computed(() => {
+	if (props.mode === 'car') return '请输入车牌号码'
+	if (props.mode === 'idcard') return '请输入身份证号码'
+	return '安全数字键盘'
+})
+
+function handleKey(key) {
+	if (!key) return
+
+	// 切换回省份选择
+	if (key === '省') {
+		carStepManual.value = 'province'
+		return
+	}
+
+	// 删除按键
+	if (key === 'del') {
+		const v = props.value.slice(0, -1)
+		emit('change', v)
+		emit('update:value', v)
+		emit('delete')
+		if (props.mode === 'car' && v.length === 0) {
+			carStepManual.value = 'province'
+		}
+		return
+	}
+
+	// 最大长度防御判断
+	const max = props.maxlength > 0 ? props.maxlength : (props.mode === 'car' ? 8 : (props.mode === 'idcard' ? 18 : 0))
+	if (max > 0 && props.value.length >= max) return
+
+	const v = props.value + key
+	emit('change', v)
+	emit('update:value', v)
+	emit('input', key)
+
+	// 车牌号模式下，录入首个省份字后自动切换到数字字母页
+	if (props.mode === 'car' && currentCarPage.value === 'province') {
+		carStepManual.value = 'letter'
+	}
+}
+
+function handleClose() {
+	panelShow.value = false
+	emit('update:show', false)
+	emit('confirm', props.value)
+	setTimeout(() => {
+		visible.value = false
+		emit('close')
+	}, 300)
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		carStepManual.value = ''
+		setTimeout(() => { panelShow.value = true }, 20)
+	} else {
+		panelShow.value = false
+		setTimeout(() => { visible.value = false }, 300)
+	}
+})
+
+watch(() => props.value, (val) => {
+	if (!val || val.length === 0) {
+		carStepManual.value = 'province'
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-keyboard {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-popup;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.4);
+		backdrop-filter: blur(2px);
+	}
+
+	&__panel {
+		position: relative;
+		background: #F1F5F9;
+		padding-bottom: max(env(safe-area-inset-bottom), 16rpx);
+		transform: translateY(100%);
+		transition: transform 0.3s $mu-ease;
+		border-top-left-radius: 32rpx;
+		border-top-right-radius: 32rpx;
+		overflow: hidden;
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 24rpx 32rpx;
+		background: #FFFFFF;
+		border-bottom: 1rpx solid #E2E8F0;
+	}
+
+	&__cancel {
+		font-size: 28rpx;
+		color: $mu-primary;
+		font-weight: 700;
+		cursor: pointer;
+	}
+
+	&__title {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 700;
+	}
+
+	&__close {
+		width: 44rpx;
+		height: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+	}
+
+	&__keys {
+		padding: 16rpx;
+		box-sizing: border-box;
+
+		&--car {
+			padding: 12rpx 8rpx;
+		}
+	}
+
+	&__row {
+		display: flex;
+		gap: 12rpx;
+		margin-bottom: 12rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&__key {
+		flex: 1;
+		height: 96rpx;
+		background: #FFFFFF;
+		border-radius: 14rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
+		transition: all 0.15s ease;
+
+		&:active {
+			background: #E2E8F0;
+			transform: scale(0.96);
+		}
+
+		&--wide {
+			flex: 2;
+		}
+
+		&--action {
+			background: #CBD5E1;
+			box-shadow: none;
+
+			&:active {
+				background: #94A3B8;
+			}
+		}
+
+		&-text {
+			font-size: 32rpx;
+			color: #0F172A;
+			font-weight: 600;
+		}
+
+		&-tag {
+			font-size: 24rpx;
+			color: #334155;
+			font-weight: 700;
+		}
+
+		&-del {
+			font-size: 36rpx;
+			color: #334155;
+		}
+	}
+}
+
+/* 车牌号专用小紧凑按键 */
+.mu-keyboard__keys--car {
+	.mu-keyboard__row {
+		gap: 8rpx;
+		margin-bottom: 10rpx;
+	}
+
+	.mu-keyboard__key {
+		height: 84rpx;
+		border-radius: 10rpx;
+
+		&-text {
+			font-size: 28rpx;
+			font-weight: 600;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-keyboard {
+		&__panel {
+			background: #0F172A;
+		}
+		&__toolbar {
+			background: #1E293B;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__title {
+			color: $mu-dark-text-primary;
+		}
+		&__key {
+			background: #1E293B;
+			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
+
+			&:active { background: #334155; }
+
+			&--action {
+				background: #334155;
+				&:active { background: #475569; }
+			}
+
+			&-text { color: $mu-dark-text-primary; }
+			&-tag, &-del { color: $mu-dark-text-primary; }
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-keyboard {
+		&__panel {
+			background: #0F172A;
+		}
+		&__toolbar {
+			background: #1E293B;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__title {
+			color: $mu-dark-text-primary;
+		}
+		&__key {
+			background: #1E293B;
+			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
+
+			&:active { background: #334155; }
+
+			&--action {
+				background: #334155;
+				&:active { background: #475569; }
+			}
+
+			&-text { color: $mu-dark-text-primary; }
+			&-tag, &-del { color: $mu-dark-text-primary; }
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,89 @@
+<template>
+	<view class="mu-list" :class="{ 'mu-list--bordered': bordered, 'mu-list--card': card }">
+		<view v-if="header || $slots.header" class="mu-list__header">
+			<slot name="header"><text class="mu-list__header-text">{{ header }}</text></slot>
+		</view>
+		<view class="mu-list__body">
+			<slot></slot>
+		</view>
+		<view v-if="footer || $slots.footer" class="mu-list__footer">
+			<slot name="footer"><text class="mu-list__footer-text">{{ footer }}</text></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+defineProps({
+	header: { type: String, default: '' },
+	footer: { type: String, default: '' },
+	bordered: { type: Boolean, default: false },
+	card: { type: Boolean, default: false }
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-list {
+	background: #ffffff;
+	border-radius: 16rpx;
+	overflow: hidden;
+
+	&--bordered {
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+	}
+
+	&--card {
+		margin: 0 4rpx;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.03);
+	}
+
+	&__header {
+		padding: 20rpx 28rpx 12rpx;
+		background: transparent;
+
+		&-text {
+			font-size: 24rpx;
+			color: #94A3B8;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.5rpx;
+		}
+	}
+
+	&__body {
+		position: relative;
+	}
+
+	&__footer {
+		padding: 12rpx 28rpx 20rpx;
+		background: transparent;
+
+		&-text {
+			font-size: 22rpx;
+			color: #94A3B8;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-list {
+		background: $mu-dark-bg-base;
+		&--bordered { border-color: rgba(255, 255, 255, 0.08); }
+		&__header-text { color: $mu-dark-text-secondary; }
+		&__footer-text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-list {
+		background: $mu-dark-bg-base;
+		&--bordered { border-color: rgba(255, 255, 255, 0.08); }
+		&__header-text { color: $mu-dark-text-secondary; }
+		&__footer-text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>