muzhiyu-ui 1.0.0

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

@@ -0,0 +1,264 @@
+<template>
+	<view class="mu-code-input">
+		<!-- 原生隐藏输入框 (普通模式下软键盘唤起) -->
+		<input
+			v-if="!useVirtualKeyboard && mode !== 'car'"
+			class="mu-code-input__hidden-input"
+			:type="mode === 'password' ? 'password' : 'text'"
+			:maxlength="computedLength"
+			:value="modelValue"
+			:focus="autoFocus"
+			@input="onNativeInput"
+		/>
+
+		<!-- 拆分展示的多格 Box 区域 -->
+		<view class="mu-code-input__boxes" @tap="focusInput">
+			<view
+				v-for="i in computedLength"
+				:key="i"
+				class="mu-code-input__box"
+				:class="[
+					`mu-code-input__box--${shape}`,
+					mode === 'car' && i === 8 && 'mu-code-input__box--new-energy',
+					getValueChar(i - 1) && 'mu-code-input__box--filled',
+					isCurrentFocus(i - 1) && 'mu-code-input__box--focus'
+				]"
+			>
+				<!-- 已填写的字符 (加密● 或 原样文字) -->
+				<text v-if="getValueChar(i - 1)" class="mu-code-input__text">
+					{{ (mask || mode === 'password') ? '●' : getValueChar(i - 1) }}
+				</text>
+
+				<!-- 车牌号第 8 位新能源特殊提示图标 -->
+				<view v-else-if="mode === 'car' && i === 8" class="mu-code-input__new-energy-badge">
+					<text class="mu-code-input__new-energy-plus">+</text>
+					<text class="mu-code-input__new-energy-text">新能源</text>
+				</view>
+
+				<!-- 聚焦闪烁光标 -->
+				<view v-else-if="isCurrentFocus(i - 1)" class="mu-code-input__cursor"></view>
+			</view>
+		</view>
+
+		<!-- 虚拟键盘弹出控制 -->
+		<mu-keyboard
+			v-model:show="showVirtualKeyboard"
+			v-model:value="innerKeyboardValue"
+			:mode="computedKeyboardMode"
+			:maxlength="computedLength"
+			:title="keyboardTitle || (mode === 'car' ? '请输入车牌号码' : '请输入验证码')"
+			@change="onKeyboardChange"
+			@finish="onKeyboardFinish"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	mode: { type: String, default: 'code' },           // code (验证码) | password (密码框) | car (车牌号输入框)
+	length: { type: Number, default: 0 },              // 验证码位数 (code/password 默认 4/6, car 默认 8)
+	shape: { type: String, default: 'radius' },        // square (微直角) | radius (圆角) | round (圆圈) | underline (下划线)
+	mask: { type: Boolean, default: false },         // 是否加密隐藏数字
+	autoFocus: { type: Boolean, default: false },
+	useVirtualKeyboard: { type: Boolean, default: false }, // 是否使用自定义底部虚拟键盘
+	keyboardTitle: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'finish'])
+
+const showVirtualKeyboard = ref(false)
+const innerKeyboardValue = ref(props.modelValue || '')
+
+watch(() => props.modelValue, (val) => {
+	innerKeyboardValue.value = val || ''
+})
+
+const computedLength = computed(() => {
+	if (props.length > 0) return props.length
+	if (props.mode === 'car') return 8
+	return 4
+})
+
+const computedKeyboardMode = computed(() => {
+	if (props.mode === 'car') return 'car'
+	if (props.mode === 'password') return 'number'
+	return 'number'
+})
+
+function getValueChar(index) {
+	return (props.modelValue || '').charAt(index) || ''
+}
+
+function isCurrentFocus(index) {
+	const len = (props.modelValue || '').length
+	return len === index
+}
+
+function focusInput() {
+	if (props.useVirtualKeyboard || props.mode === 'car') {
+		showVirtualKeyboard.value = true
+	}
+}
+
+function onNativeInput(e) {
+	let val = e.detail.value || ''
+	if (val.length > computedLength.value) {
+		val = val.slice(0, computedLength.value)
+	}
+	emit('update:modelValue', val)
+	emit('change', val)
+	if (val.length === computedLength.value) {
+		emit('finish', val)
+	}
+}
+
+function onKeyboardChange(val) {
+	emit('update:modelValue', val)
+	emit('change', val)
+	if (val.length === computedLength.value) {
+		emit('finish', val)
+		showVirtualKeyboard.value = false
+	}
+}
+
+function onKeyboardFinish(val) {
+	emit('finish', val)
+	showVirtualKeyboard.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-code-input {
+	position: relative;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+
+	&__hidden-input {
+		position: absolute;
+		top: 0;
+		left: -100vw;
+		width: 200vw;
+		height: 100%;
+		opacity: 0;
+		z-index: 1;
+	}
+
+	&__boxes {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 14rpx;
+		width: 100%;
+	}
+
+	&__box {
+		flex: 1;
+		height: 96rpx;
+		background: rgba(255, 255, 255, 0.95);
+		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-box-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-cursor-blink 1s infinite;
+	}
+}
+
+@keyframes mu-cursor-blink {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+@keyframes mu-box-pulse {
+	0%, 100% { border-color: $mu-primary; }
+	50% { border-color: rgba(99, 102, 241, 0.4); }
+}
+
+.mu-dark, page.mu-dark {
+	.mu-code-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-code-input {
+		&__box {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+	}
+}
+</style>

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

@@ -0,0 +1,316 @@
+<template>
+	<view class="mu-collapse" :class="[`mu-collapse--${variant}`, bordered && 'mu-collapse--bordered']">
+		<view
+			v-for="(item, index) in items"
+			:key="index"
+			class="mu-collapse__item"
+			:class="[
+				isOpen(index) && 'mu-collapse__item--open',
+				item.disabled && 'mu-collapse__item--disabled'
+			]"
+		>
+			<!-- 头部 Header -->
+			<view class="mu-collapse__header mu-touchable-flat" @tap="toggle(index)">
+				<!-- 左侧 Icon 图标 -->
+				<view v-if="item.icon || $slots[`icon-${index}`]" class="mu-collapse__icon">
+					<slot :name="`icon-${index}`">
+						<mu-icon :name="item.icon" :size="18" :color="isOpen(index) ? '#171717' : '#64748B'" />
+					</slot>
+				</view>
+
+				<!-- 标题 -->
+				<view class="mu-collapse__title">
+					<slot :name="`title-${index}`" :item="item" :is-open="isOpen(index)">
+						<text class="mu-collapse__title-text" :class="{ 'mu-collapse__title-text--active': isOpen(index) }">
+							{{ item.title }}
+						</text>
+					</slot>
+				</view>
+
+				<!-- 右侧数值或插槽 -->
+				<view v-if="item.value || $slots[`right-${index}`]" class="mu-collapse__right">
+					<slot :name="`right-${index}`">
+						<text class="mu-collapse__value">{{ item.value }}</text>
+					</slot>
+				</view>
+
+				<!-- 旋转箭头 -->
+				<view class="mu-collapse__arrow" :class="{ 'mu-collapse__arrow--open': isOpen(index) }">
+					<mu-icon name="chevron_right" :size="16" :color="isOpen(index) ? '#171717' : '#94A3B8'" />
+				</view>
+			</view>
+
+			<!-- 内容展开区域 Body -->
+			<view v-show="isOpen(index)" class="mu-collapse__body">
+				<view class="mu-collapse__content">
+					<slot :name="`content-${index}`" :item="item">
+						<text class="mu-collapse__content-text">{{ item.content }}</text>
+					</slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	modelValue: { type: [Number, String, Array], default: -1 },
+	activeIndex: { type: [Number, String, Array], default: -1 }, // 兼容旧属性
+	accordion: { type: Boolean, default: false },               // 手风琴单开模式
+	bordered: { type: Boolean, default: true },
+	variant: { type: String, default: 'card' }                  // card (卡片分隔) | line (连贯下划线)
+})
+
+const emit = defineEmits(['change', 'update:modelValue', 'update:activeIndex'])
+
+const activeList = ref([])
+
+function init() {
+	const currentVal = props.modelValue !== -1 ? props.modelValue : props.activeIndex
+	if (Array.isArray(currentVal)) {
+		activeList.value = [...currentVal]
+	} else if (currentVal >= 0 && currentVal !== '' && currentVal !== null) {
+		activeList.value = [Number(currentVal)]
+	} else {
+		activeList.value = []
+	}
+}
+
+init()
+
+watch(() => [props.modelValue, props.activeIndex], init)
+
+function isOpen(index) {
+	return activeList.value.includes(index)
+}
+
+function toggle(index) {
+	if ((props.items[index] && props.items[index].disabled)) return
+
+	if (props.accordion) {
+		activeList.value = isOpen(index) ? [] : [index]
+	} else {
+		const i = activeList.value.indexOf(index)
+		if (i >= 0) {
+			activeList.value.splice(i, 1)
+		} else {
+			activeList.value.push(index)
+		}
+	}
+
+	const res = props.accordion ? ((activeList.value[0] !== undefined ? activeList.value[0] : -1)) : [...activeList.value]
+	emit('change', res)
+	emit('update:modelValue', res)
+	emit('update:activeIndex', res)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-collapse {
+	width: 100%;
+	box-sizing: border-box;
+
+	/* 1. 卡片形态 (card) */
+	&--card {
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+
+		.mu-collapse__item {
+			background: #ffffff;
+			border: 1rpx solid rgba(226, 232, 240, 0.8);
+			border-radius: 20rpx;
+			overflow: hidden;
+			transition: all 0.25s ease;
+			box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.03);
+
+			&--open {
+				border-color: rgba(99, 102, 241, 0.3);
+				box-shadow: 0 6rpx 20rpx -4rpx rgba(99, 102, 241, 0.1);
+			}
+		}
+
+		.mu-collapse__header {
+			padding: 24rpx 28rpx;
+		}
+
+		.mu-collapse__content {
+			padding: 0 28rpx 28rpx 28rpx;
+		}
+	}
+
+	/* 2. 下划线连贯形态 (line) */
+	&--line {
+		background: #ffffff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+
+		.mu-collapse__item {
+			border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+
+		.mu-collapse__header {
+			padding: 26rpx 28rpx;
+		}
+
+		.mu-collapse__content {
+			padding: 0 28rpx 24rpx 28rpx;
+		}
+	}
+
+	&__item {
+		&--disabled {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		background: transparent;
+		box-sizing: border-box;
+	}
+
+	&__icon {
+		margin-right: 18rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__title {
+		flex: 1;
+		min-width: 0;
+
+		&-text {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: $mu-text-primary;
+			transition: color 0.2s ease;
+
+			&--active {
+				color: #171717;
+			}
+		}
+	}
+
+	&__right {
+		margin-left: 16rpx;
+		flex-shrink: 0;
+	}
+
+	&__value {
+		font-size: 24rpx;
+		color: #94A3B8;
+	}
+
+	&__arrow {
+		margin-left: 16rpx;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+		&--open {
+			transform: rotate(90deg);
+		}
+	}
+
+	&__body {
+		overflow: hidden;
+	}
+
+	&__content {
+		&-text {
+			font-size: 26rpx;
+			color: #64748B;
+			line-height: 1.6;
+			word-break: break-all;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-collapse {
+		&--card {
+			.mu-collapse__item {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+
+				&--open {
+					border-color: rgba(99, 102, 241, 0.4);
+					box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.3);
+				}
+			}
+		}
+
+		&--line {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+
+			.mu-collapse__item {
+				border-color: rgba(255, 255, 255, 0.06);
+			}
+		}
+
+		&__title-text {
+			color: $mu-dark-text-primary;
+			&--active { color: #FFFFFF; }
+		}
+
+		&__content-text {
+			color: $mu-dark-text-secondary;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-collapse {
+		&--card {
+			.mu-collapse__item {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+
+				&--open {
+					border-color: rgba(99, 102, 241, 0.4);
+					box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.3);
+				}
+			}
+		}
+
+		&--line {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+
+			.mu-collapse__item {
+				border-color: rgba(255, 255, 255, 0.06);
+			}
+		}
+
+		&__title-text {
+			color: $mu-dark-text-primary;
+			&--active { color: #FFFFFF; }
+		}
+
+		&__content-text {
+			color: $mu-dark-text-secondary;
+		}
+	}
+}
+</style>