muzhiyu-ui 1.0.0

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

@@ -0,0 +1,368 @@
+<template>
+	<view
+		class="mu-cell-wrapper"
+		:class="[swipe && 'mu-cell-wrapper--swipe']"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+	>
+		<!-- 单元格滑动平移卡片 -->
+		<view
+			class="mu-cell"
+			:class="cellClasses"
+			:style="[cellStyle, swipeContentStyle]"
+			@tap="handleClick"
+		>
+			<view class="mu-cell__body">
+				<!-- 左侧图标/图片/插槽 -->
+				<view v-if="$slots.icon || icon" class="mu-cell__icon">
+					<slot name="icon">
+						<mu-icon
+							v-if="isVectorIcon(icon)"
+							:name="icon"
+							:size="iconSize || 20"
+							:color="iconColor || '#64748B'"
+						/>
+						<image v-else class="mu-cell__icon-img" :src="icon" mode="aspectFit" />
+					</slot>
+				</view>
+
+				<!-- 中间标题与副说明 -->
+				<view class="mu-cell__content">
+					<view class="mu-cell__title">
+						<slot><text class="mu-cell__title-text">{{ title }}</text></slot>
+					</view>
+					<view v-if="label || $slots.label" class="mu-cell__label">
+						<slot name="label"><text class="mu-cell__label-text">{{ label }}</text></slot>
+					</view>
+				</view>
+
+				<!-- 右侧自定义插槽 (支持绑定/授权手机号按钮、开关、文案等) -->
+				<view class="mu-cell__right" @tap.stop>
+					<slot name="right">
+						<slot name="value">
+							<text v-if="value" class="mu-cell__value">{{ value }}</text>
+						</slot>
+						<view v-if="arrow" class="mu-cell__arrow" @tap="handleClick">
+							<mu-icon name="chevron_right" :size="16" color="#94A3B8" />
+						</view>
+					</slot>
+				</view>
+			</view>
+
+			<!-- 底部分隔线 -->
+			<view v-if="divider && !noBorder" class="mu-cell__border"></view>
+
+			<!-- 右侧躲藏在屏幕外面的滑动多按钮区 -->
+			<view v-if="swipe" class="mu-cell__swipe-actions" :style="swipeActionsStyle">
+				<view
+					v-for="(act, ai) in normalizedSwipeActions"
+					:key="ai"
+					class="mu-cell__swipe-btn mu-touchable-flat"
+					:style="{ background: act.bg || act.color || '#F43F5E', width: `${buttonWidth}rpx` }"
+					@tap.stop="handleSwipeBtnClick(ai, act)"
+				>
+					<text class="mu-cell__swipe-text">{{ act.text || '删除' }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	title: { type: String, default: '' },
+	label: { type: String, default: '' },
+	value: { type: String, default: '' },
+	icon: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 20 },
+	iconColor: { type: String, default: '' },
+	arrow: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	required: { type: Boolean, default: false },
+	divider: { type: Boolean, default: true },
+	noBorder: { type: Boolean, default: false },
+	center: { type: Boolean, default: false },
+	background: { type: String, default: '' },
+	padding: { type: String, default: '' },
+	url: { type: String, default: '' },
+
+	// 左滑扩展
+	swipe: { type: Boolean, default: false },
+	swipeActions: { type: Array, default: () => [] },
+	buttonWidth: { type: Number, default: 130 }         // 每个左滑按钮宽度(rpx)
+})
+
+const emit = defineEmits(['click', 'click-swipe', 'delete'])
+
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const swipeOffset = ref(0)
+const isSwiping = ref(false)
+
+const normalizedSwipeActions = computed(() => {
+	if (props.swipeActions && props.swipeActions.length) {
+		return props.swipeActions
+	}
+	return [{ text: '删除', bg: '#F43F5E' }]
+})
+
+// 计算所有滑动按钮的总展开宽度 (rpx)
+const maxSwipeOffset = computed(() => {
+	return normalizedSwipeActions.value.length * props.buttonWidth
+})
+
+const cellClasses = computed(() => ({
+	'mu-cell--disabled': props.disabled,
+	'mu-cell--center': props.center,
+	'mu-cell--required': props.required,
+	'mu-cell--clickable': props.arrow || props.url
+}))
+
+const cellStyle = computed(() => {
+	const s = {}
+	if (props.background) s.background = props.background
+	if (props.padding) s.padding = props.padding
+	return s
+})
+
+const swipeContentStyle = computed(() => {
+	if (!props.swipe) return {}
+	return {
+		transform: `translateX(-${swipeOffset.value}rpx)`,
+		transition: isSwiping.value ? 'none' : 'transform 0.25s cubic-bezier(0.25, 1, 0.5, 1)'
+	}
+})
+
+const swipeActionsStyle = computed(() => ({
+	width: `${maxSwipeOffset.value}rpx`
+}))
+
+function isVectorIcon(iconStr) {
+	if (!iconStr) return false
+	return !iconStr.includes('/') && !/\.(png|jpg|jpeg|gif|svg|webp)$/i.test(iconStr)
+}
+
+function onTouchStart(e) {
+	if (!props.swipe || !e || !e.touches || !e.touches[0]) return
+	const touch = e.touches[0]
+	touchStartX.value = touch.clientX
+	touchStartY.value = touch.clientY
+	isSwiping.value = true
+}
+
+function onTouchMove(e) {
+	if (!props.swipe || !e || !e.touches || !e.touches[0]) return
+	const touch = e.touches[0]
+	const diffX = touchStartX.value - touch.clientX
+	const diffY = Math.abs(touchStartY.value - touch.clientY)
+
+	// 垂直滚动优先避让
+	if (diffY > Math.abs(diffX)) return
+
+	if (diffX > 0) {
+		swipeOffset.value = Math.min(maxSwipeOffset.value, diffX * 1.5)
+	} else if (swipeOffset.value > 0) {
+		swipeOffset.value = Math.max(0, maxSwipeOffset.value + diffX * 1.5)
+	}
+}
+
+function onTouchEnd() {
+	if (!props.swipe) return
+	isSwiping.value = false
+	if (swipeOffset.value > maxSwipeOffset.value / 3) {
+		swipeOffset.value = maxSwipeOffset.value
+	} else {
+		swipeOffset.value = 0
+	}
+}
+
+function handleSwipeBtnClick(index, act) {
+	emit('click-swipe', { index, action: act })
+	if (act.text === '删除' || act.type === 'danger') {
+		emit('delete', { index, action: act })
+	}
+	swipeOffset.value = 0
+}
+
+function handleClick(e) {
+	if (props.disabled) return
+	if (swipeOffset.value > 0) {
+		swipeOffset.value = 0
+		return
+	}
+	if (props.url) {
+		uni.navigateTo({ url: props.url })
+	}
+	emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-cell-wrapper {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	&--swipe {
+		display: flex;
+	}
+}
+
+.mu-cell {
+	position: relative;
+	width: 100%;
+	background: $mu-bg-base;
+	transition: background $mu-duration $mu-ease;
+	box-sizing: border-box;
+
+	&--clickable {
+		cursor: pointer;
+		&:active {
+			background: rgba(0, 0, 0, 0.03);
+		}
+	}
+
+	&--disabled { opacity: 0.45; pointer-events: none; }
+	&--center .mu-cell__body { align-items: center; }
+
+	&--required .mu-cell__title-text::before {
+		content: '*';
+		color: $mu-danger;
+		margin-right: 6rpx;
+		font-size: 26rpx;
+		font-weight: 700;
+	}
+
+	display: flex;
+	flex-direction: column;
+
+	&__body {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 28rpx;
+		flex: 1;
+		min-height: 92rpx;
+		box-sizing: border-box;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+
+		&-img {
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 8rpx;
+		}
+	}
+
+	&__content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__title {
+		&-text {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: $mu-text-primary;
+			line-height: 1.4;
+		}
+	}
+
+	&__label {
+		margin-top: 4rpx;
+		&-text {
+			font-size: 22rpx;
+			color: #94A3B8;
+			line-height: 1.3;
+		}
+	}
+
+	&__right {
+		display: flex;
+		align-items: center;
+		margin-left: 20rpx;
+		flex-shrink: 0;
+	}
+
+	&__value {
+		font-size: 26rpx;
+		color: #64748B;
+		font-weight: 400;
+	}
+
+	&__arrow {
+		margin-left: 8rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__border {
+		position: absolute;
+		bottom: 0;
+		left: 28rpx;
+		right: 0;
+		height: 0;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+	}
+
+	/* 隐藏在视口最右侧外的滑动多按钮区 */
+	&__swipe-actions {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		transform: translateX(100%);
+		display: flex;
+		align-items: stretch;
+		z-index: 5;
+	}
+
+	&__swipe-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		height: 100%;
+	}
+
+	&__swipe-text {
+		font-size: 24rpx;
+		font-weight: 800;
+		color: #ffffff;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-cell {
+		background: $mu-dark-bg-base;
+		&--clickable:active { background: rgba(255, 255, 255, 0.05); }
+		&__title-text { color: $mu-dark-text-primary; }
+		&__value { color: $mu-dark-text-secondary; }
+		&__border { border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-cell {
+		background: $mu-dark-bg-base;
+		&--clickable:active { background: rgba(255, 255, 255, 0.05); }
+		&__title-text { color: $mu-dark-text-primary; }
+		&__value { color: $mu-dark-text-secondary; }
+		&__border { border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+	<view class="mu-checkbox" :class="{ 'mu-checkbox--disabled': disabled }" @tap="handleClick">
+		<view class="mu-checkbox__icon" :class="{ 'mu-checkbox__icon--checked': isChecked, 'mu-checkbox__icon--disabled': disabled }">
+			<mu-icon v-if="isChecked" name="check" :size="12" color="#ffffff" />
+		</view>
+		<view v-if="label || $slots.default" class="mu-checkbox__label" :class="{ 'mu-checkbox__label--disabled': disabled }">
+			<slot><text class="mu-checkbox__label-text">{{ label }}</text></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+	name: { type: [String, Number, Boolean], default: '' },
+	label: { type: String, default: '' },
+	disabled: { type: Boolean, default: false },
+	modelValue: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const checkboxGroup = inject('mu-checkbox-group', inject('checkboxGroup', null))
+
+const isChecked = computed(() => {
+	if (checkboxGroup) {
+		const groupVal = checkboxGroup.modelValue ? checkboxGroup.modelValue.value || [] : []
+		return groupVal.includes(props.name)
+	}
+	return props.modelValue
+})
+
+function handleClick() {
+	if (props.disabled) return
+	if (checkboxGroup) {
+		const groupVal = checkboxGroup.modelValue ? (checkboxGroup.modelValue.value || []) : []
+		const arr = Array.isArray(groupVal) ? [...groupVal] : []
+		const idx = arr.indexOf(props.name)
+		if (idx > -1) arr.splice(idx, 1)
+		else arr.push(props.name)
+		checkboxGroup.changeValue(arr)
+	} else {
+		emit('update:modelValue', !props.modelValue)
+	}
+	emit('change', !isChecked.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-checkbox {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	padding: 10rpx 0;
+	transition: opacity $mu-duration $mu-ease;
+
+	&--disabled { opacity: $mu-opacity-disabled; cursor: not-allowed; }
+
+	&__icon {
+		width: 34rpx;
+		height: 34rpx;
+		border-radius: 8rpx;
+		border: 2rpx solid $mu-border;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all $mu-duration $mu-ease;
+		flex-shrink: 0;
+		background: $mu-bg-base;
+
+		&--checked {
+			border-color: transparent;
+			background: $mu-primary-gradient;
+			box-shadow: none;
+		}
+		&--disabled { border-color: $mu-text-disabled; }
+	}
+	&__label {
+		margin-left: 14rpx;
+		display: inline-flex;
+		align-items: center;
+		&--disabled { color: $mu-text-disabled; }
+		&-text {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: $mu-text-primary;
+			line-height: 1;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-checkbox {
+		&__icon {
+			background: $mu-dark-bg-base;
+			border-color: $mu-dark-border;
+		}
+		&__label-text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-checkbox {
+		&__icon {
+			background: $mu-dark-bg-base;
+			border-color: $mu-dark-border;
+		}
+		&__label-text { color: $mu-dark-text-primary; }
+	}
+}
+</style>

package/components/muzhiyu/mu-checkbox-group/mu-checkbox-group.vue

@@ -0,0 +1,40 @@
+<template>
+	<view class="mu-checkbox-group" :class="{ 'mu-checkbox-group--horizontal': direction === 'horizontal' }">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-checkbox-group 复选框组
+ * @description 包裹多个 mu-checkbox，管理选中数组
+ * @property {Array} modelValue - 当前选中值数组
+ * @property {string} direction - 排列方向 horizontal|vertical
+ * @property {number} max - 最多可选数量
+ */
+import { provide, toRefs } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: Array, default: () => [] },
+	direction: { type: String, default: 'vertical' },
+	max: { type: Number, default: 0 }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+provide('mu-checkbox-group', {
+	modelValue: toRefs(props).modelValue,
+	changeValue(arr) {
+		if (props.max > 0 && arr.length > props.max) return
+		emit('update:modelValue', arr)
+		emit('change', arr)
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.mu-checkbox-group {
+	display: flex; flex-direction: column; gap: 8rpx;
+	&--horizontal { flex-direction: row; flex-wrap: wrap; gap: 24rpx; }
+}
+</style>