muzhiyu-ui 1.0.0

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

@@ -0,0 +1,330 @@
+<template>
+	<view class="mu-pagination" :class="[`mu-pagination--${mode}`, `mu-pagination--${shape}`]">
+		<!-- 移动端轻量模式 simple (上一页 1/10 下一页) -->
+		<template v-if="mode === 'simple'">
+			<view
+				class="mu-pagination__btn mu-pagination__prev mu-touchable-flat"
+				:class="[current <= 1 && 'mu-pagination__btn--disabled']"
+				@tap="goTo(current - 1)"
+			>
+				<mu-icon name="chevron_left" :size="14" :color="current <= 1 ? '#CBD5E1' : '#171717'" />
+				<text class="mu-pagination__btn-text">{{ prevText }}</text>
+			</view>
+
+			<view class="mu-pagination__simple-text">
+				<text class="mu-pagination__simple-current">{{ current }}</text>
+				<text class="mu-pagination__simple-sep">/</text>
+				<text class="mu-pagination__simple-total">{{ totalPage }}</text>
+			</view>
+
+			<view
+				class="mu-pagination__btn mu-pagination__next mu-touchable-flat"
+				:class="[current >= totalPage && 'mu-pagination__btn--disabled']"
+				@tap="goTo(current + 1)"
+			>
+				<text class="mu-pagination__btn-text">{{ nextText }}</text>
+				<mu-icon name="chevron_right" :size="14" :color="current >= totalPage ? '#CBD5E1' : '#171717'" />
+			</view>
+		</template>
+
+		<!-- 数字按钮页码模式 multi -->
+		<template v-else-if="mode === 'multi'">
+			<view
+				class="mu-pagination__btn mu-pagination__prev mu-touchable-flat"
+				:class="[current <= 1 && 'mu-pagination__btn--disabled']"
+				@tap="goTo(current - 1)"
+			>
+				<mu-icon name="chevron_left" :size="14" :color="current <= 1 ? '#CBD5E1' : '#64748B'" />
+			</view>
+
+			<view
+				v-for="(page, pi) in pages"
+				:key="pi"
+				class="mu-pagination__page"
+				:class="[
+					page === current && 'mu-pagination__page--active',
+					page === '...' && 'mu-pagination__page--ellipsis'
+				]"
+				@tap="page !== '...' && goTo(page)"
+			>
+				<text class="mu-pagination__page-text">{{ page }}</text>
+			</view>
+
+			<view
+				class="mu-pagination__btn mu-pagination__next mu-touchable-flat"
+				:class="[current >= totalPage && 'mu-pagination__btn--disabled']"
+				@tap="goTo(current + 1)"
+			>
+				<mu-icon name="chevron_right" :size="14" :color="current >= totalPage ? '#CBD5E1' : '#64748B'" />
+			</view>
+		</template>
+
+		<!-- 指示点模式 pointer (比如卡片/轮播辅助) -->
+		<template v-else-if="mode === 'pointer'">
+			<view
+				v-for="p in totalPage"
+				:key="p"
+				class="mu-pagination__pointer"
+				:class="[p === current && 'mu-pagination__pointer--active']"
+				@tap="goTo(p)"
+			></view>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	current: { type: Number, default: 1 },
+	modelValue: { type: Number, default: 0 },
+	total: { type: Number, default: 0 },
+	pageSize: { type: Number, default: 10 },
+	pageCount: { type: Number, default: 0 },            // 直接指定总页数
+	maxPages: { type: Number, default: 5 },             // 最多显示的页码数
+	mode: { type: String, default: 'multi' },           // multi (数字页码) | simple (移动端上一页/下一页) | pointer (圆点)
+	shape: { type: String, default: 'radius' },         // radius (微圆角) | circle (全圆)
+	prevText: { type: String, default: '上一页' },
+	nextText: { type: String, default: '下一页' }
+})
+
+const emit = defineEmits(['change', 'update:current', 'update:modelValue'])
+
+const current = computed({
+	get: () => props.modelValue || props.current || 1,
+	set: (val) => {
+		emit('update:current', val)
+		emit('update:modelValue', val)
+	}
+})
+
+const totalPage = computed(() => {
+	if (props.pageCount > 0) return props.pageCount
+	if (props.total > 0) return Math.ceil(props.total / props.pageSize)
+	return 1
+})
+
+const pages = computed(() => {
+	const tp = totalPage.value
+	const cp = current.value
+	const max = props.maxPages
+
+	if (tp <= max) return Array.from({ length: tp }, (_, i) => i + 1)
+
+	const result = [1]
+	let start = Math.max(2, cp - Math.floor(max / 2))
+	let end = Math.min(tp - 1, start + max - 3)
+
+	start = Math.max(2, end - (max - 3))
+
+	if (start > 2) result.push('...')
+	for (let i = start; i <= end; i++) result.push(i)
+	if (end < tp - 1) result.push('...')
+
+	result.push(tp)
+	return result
+})
+
+function goTo(page) {
+	if (typeof page !== 'number') return
+	if (page < 1 || page > totalPage.value || page === current.value) return
+	current.value = page
+	emit('change', { current: page, totalPage: totalPage.value })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	box-sizing: border-box;
+
+	/* 1. 移动端轻量模式 simple */
+	&--simple {
+		justify-content: space-between;
+		width: 100%;
+
+		.mu-pagination__btn {
+			height: 64rpx;
+			padding: 0 24rpx;
+			background: #F8FAFC;
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+			border-radius: 14rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 6rpx;
+
+			&-text {
+				font-size: 24rpx;
+				color: #171717;
+				font-weight: 700;
+			}
+		}
+
+		.mu-pagination__btn--disabled {
+			opacity: 0.5;
+			pointer-events: none;
+			.mu-pagination__btn-text {
+				color: #94A3B8;
+			}
+		}
+
+		.mu-pagination__simple-text {
+			font-size: 26rpx;
+			color: #64748B;
+			font-weight: 600;
+			font-variant-numeric: tabular-nums;
+		}
+
+		.mu-pagination__simple-current {
+			color: #171717;
+			font-weight: 800;
+			font-size: 28rpx;
+		}
+
+		.mu-pagination__simple-sep {
+			margin: 0 6rpx;
+			color: #CBD5E1;
+		}
+	}
+
+	/* 2. 数字页码模式 multi */
+	&--multi {
+		.mu-pagination__btn {
+			width: 64rpx;
+			height: 64rpx;
+			border-radius: 14rpx;
+			background: #F8FAFC;
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&--disabled {
+				opacity: 0.4;
+				pointer-events: none;
+			}
+		}
+
+		.mu-pagination__page {
+			min-width: 64rpx;
+			height: 64rpx;
+			padding: 0 12rpx;
+			border-radius: 14rpx;
+			background: #ffffff;
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+
+			&-text {
+				font-size: 24rpx;
+				color: $mu-text-primary;
+				font-weight: 600;
+				font-variant-numeric: tabular-nums;
+			}
+
+			&--active {
+				background: #171717;
+				border-color: transparent;
+				box-shadow: 0 4rpx 14rpx rgba(99, 102, 241, 0.3);
+
+				.mu-pagination__page-text {
+					color: #ffffff;
+					font-weight: 800;
+				}
+			}
+
+			&--ellipsis {
+				border: none;
+				background: transparent;
+				.mu-pagination__page-text {
+					color: #94A3B8;
+				}
+			}
+		}
+	}
+
+	/* 3. 圆角定义 */
+	&--circle {
+		.mu-pagination__btn, .mu-pagination__page {
+			border-radius: 999rpx !important;
+		}
+	}
+
+	/* 4. 指示点模式 pointer */
+	&--pointer {
+		gap: 12rpx;
+
+		.mu-pagination__pointer {
+			width: 12rpx;
+			height: 12rpx;
+			border-radius: 50%;
+			background: rgba(148, 163, 184, 0.3);
+			transition: all 0.25s ease;
+
+			&--active {
+				width: 32rpx;
+				border-radius: 6rpx;
+				background: #171717;
+			}
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-pagination {
+		&--simple {
+			.mu-pagination__btn {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+			}
+			.mu-pagination__simple-text { color: $mu-dark-text-secondary; }
+		}
+		&--multi {
+			.mu-pagination__btn, .mu-pagination__page {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+				&-text { color: $mu-dark-text-primary; }
+			}
+			.mu-pagination__page--active {
+				background: #171717;
+				border-color: transparent;
+				.mu-pagination__page-text { color: #ffffff; }
+			}
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-pagination {
+		&--simple {
+			.mu-pagination__btn {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+			}
+			.mu-pagination__simple-text { color: $mu-dark-text-secondary; }
+		}
+		&--multi {
+			.mu-pagination__btn, .mu-pagination__page {
+				background: $mu-dark-bg-base;
+				border-color: rgba(255, 255, 255, 0.08);
+				&-text { color: $mu-dark-text-primary; }
+			}
+			.mu-pagination__page--active {
+				background: #171717;
+				border-color: transparent;
+				.mu-pagination__page-text { color: #ffffff; }
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,119 @@
+<template>
+	<view class="mu-password-input">
+		<view class="mu-password-input__box" @tap="onFocus">
+			<view v-for="(item, i) in length" :key="i" class="mu-password-input__cell">
+				<view v-if="modelValue[i]" class="mu-password-input__dot" :class="{ 'mu-password-input__dot--square': !mask }">
+					<text v-if="!mask" class="mu-password-input__char">{{ modelValue[i] }}</text>
+				</view>
+				<view v-if="focused && i === modelValue.length" class="mu-password-input__cursor"></view>
+			</view>
+		</view>
+		<mu-keyboard v-if="!useSystemKeyboard" :show="focused" :maxlength="length"
+			v-model:value="innerValue" @close="focused = false" />
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-password-input 密码输入框
+ * @description 密码/验证码输入，带安全键盘
+ * @property {string} modelValue - 输入值
+ * @property {number} length - 输入长度 4|6
+ * @property {boolean} mask - 是否密文
+ * @property {boolean} useSystemKeyboard - 使用系统键盘
+ */
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	length: { type: Number, default: 6 },
+	mask: { type: Boolean, default: true },
+	useSystemKeyboard: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:modelValue', 'finish', 'focus'])
+const focused = ref(false)
+const innerValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (v) => { innerValue.value = v })
+watch(innerValue, (v) => {
+	emit('update:modelValue', v)
+	if (v.length >= props.length) emit('finish', v)
+})
+
+function onFocus() {
+	focused.value = true
+	emit('focus')
+}
+</script>
+
+<style lang="scss" scoped>
+.mu-password-input {
+	&__box {
+		display: flex; border: 1rpx solid $mu-border-color;
+		border-radius: $mu-radius-sm; overflow: hidden;
+		background: $mu-bg-base;
+	}
+	&__cell {
+		flex: 1; height: 96rpx;
+		display: flex; align-items: center; justify-content: center;
+		border-right: 1rpx solid $mu-border-light;
+		position: relative;
+		&:last-child { border-right: none; }
+	}
+	&__dot {
+		width: 20rpx; height: 20rpx; border-radius: 50%;
+		background: $mu-text-primary;
+		&--square {
+			width: auto; height: auto; background: none;
+			border-radius: 0;
+		}
+	}
+	&__char { font-size: $mu-font-xl; color: $mu-text-primary; font-weight: 600; }
+	&__cursor {
+		position: absolute; width: 2rpx; height: 40rpx;
+		background: $mu-primary;
+		animation: mu-blink 1s step-end infinite;
+	}
+}
+@keyframes mu-blink {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+.mu-dark, page.mu-dark {
+	.mu-password-input {
+		&__box {
+			background: rgba(24, 24, 34, 0.95);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__cell {
+			border-right-color: rgba(255, 255, 255, 0.08);
+		}
+		&__dot {
+			background: #F8FAFC;
+		}
+		&__char {
+			color: #F8FAFC;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-password-input {
+		&__box {
+			background: rgba(24, 24, 34, 0.95);
+			border-color: rgba(255, 255, 255, 0.12);
+		}
+		&__cell {
+			border-right-color: rgba(255, 255, 255, 0.08);
+		}
+		&__dot {
+			background: #F8FAFC;
+		}
+		&__char {
+			color: #F8FAFC;
+		}
+	}
+}
+</style>