muzhiyu-ui 1.0.0

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

@@ -0,0 +1,281 @@
+<template>
+	<view class="mu-swipe-cell" :class="[disabled && 'mu-swipe-cell--disabled']">
+		<view
+			class="mu-swipe-cell__wrapper"
+			:style="wrapperStyle"
+			@touchstart="onTouchStart"
+			@touchmove="onTouchMove"
+			@touchend="onTouchEnd"
+		>
+			<!-- 左侧侧滑区 -->
+			<view
+				v-if="$slots.left || leftActions.length"
+				class="mu-swipe-cell__left"
+				:style="leftStyle"
+				@tap.stop
+			>
+				<slot name="left">
+					<view
+						v-for="(act, i) in leftActions"
+						:key="'left-' + i"
+						class="mu-swipe-cell__action mu-touchable-flat"
+						:style="getActionStyle(act)"
+						@tap="handleActionClick(act, i, 'left')"
+					>
+						<mu-icon v-if="act.icon" :name="act.icon" :size="18" :color="act.color || '#FFFFFF'" style="margin-right: 6rpx;" />
+						<text class="mu-swipe-cell__action-text" :style="{ color: act.color || '#FFFFFF' }">{{ act.text }}</text>
+					</view>
+				</slot>
+			</view>
+
+			<!-- 中间主体内容区 -->
+			<view class="mu-swipe-cell__content" @tap="handleContentClick">
+				<slot></slot>
+			</view>
+
+			<!-- 右侧侧滑区 -->
+			<view
+				v-if="$slots.right || rightActions.length"
+				class="mu-swipe-cell__right"
+				:style="rightStyle"
+				@tap.stop
+			>
+				<slot name="right">
+					<view
+						v-for="(act, i) in rightActions"
+						:key="'right-' + i"
+						class="mu-swipe-cell__action mu-touchable-flat"
+						:style="getActionStyle(act)"
+						@tap="handleActionClick(act, i, 'right')"
+					>
+						<mu-icon v-if="act.icon" :name="act.icon" :size="18" :color="act.color || '#FFFFFF'" style="margin-right: 6rpx;" />
+						<text class="mu-swipe-cell__action-text" :style="{ color: act.color || '#FFFFFF' }">{{ act.text }}</text>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	leftActions: { type: Array, default: () => [] },
+	rightActions: { type: Array, default: () => [] },
+	buttonWidth: { type: [Number, String], default: 130 }, // 单个按钮默认宽度(rpx)
+	disabled: { type: Boolean, default: false },
+	autoClose: { type: Boolean, default: true },
+	threshold: { type: Number, default: 0.3 }              // 触发展开阈值比例 (0.3 代表滑动达到 30% 释放即自动开)
+})
+
+const emit = defineEmits(['open', 'close', 'click-action', 'click'])
+
+const offset = ref(0)
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const isSwiping = ref(false)
+const openedPosition = ref('')                         // '' | 'left' | 'right'
+
+// 计算侧滑最大展开距离 (rpx)
+const maxLeftOffset = computed(() => {
+	if (props.leftActions && props.leftActions.length) {
+		return props.leftActions.reduce((total, item) => {
+			const w = item.width ? parseSize(item.width) : parseSize(props.buttonWidth)
+			return total + w
+		}, 0)
+	}
+	return 260
+})
+
+const maxRightOffset = computed(() => {
+	if (props.rightActions && props.rightActions.length) {
+		return props.rightActions.reduce((total, item) => {
+			const w = item.width ? parseSize(item.width) : parseSize(props.buttonWidth)
+			return total + w
+		}, 0)
+	}
+	return 260
+})
+
+const wrapperStyle = computed(() => ({
+	transform: `translateX(${offset.value}rpx)`,
+	transition: isSwiping.value ? 'none' : 'transform 0.25s cubic-bezier(0.25, 1, 0.5, 1)'
+}))
+
+const leftStyle = computed(() => ({
+	width: `${maxLeftOffset.value}rpx`
+}))
+
+const rightStyle = computed(() => ({
+	width: `${maxRightOffset.value}rpx`
+}))
+
+function parseSize(val) {
+	if (typeof val === 'number') return val
+	if (typeof val === 'string') {
+		const num = parseInt(val)
+		return isNaN(num) ? 130 : num
+	}
+	return 130
+}
+
+function getActionStyle(act) {
+	const w = act.width ? parseSize(act.width) : parseSize(props.buttonWidth)
+	return {
+		width: `${w}rpx`,
+		background: act.bg || act.bgColor || act.color || '#F43F5E'
+	}
+}
+
+function onTouchStart(e) {
+	if (props.disabled || !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.disabled || !e || !e.touches || !e.touches[0]) return
+	const touch = e.touches[0]
+	const diffX = (touch.clientX - touchStartX.value) * 2 // 转换为 rpx 缩放比例
+	const diffY = Math.abs(touch.clientY - touchStartY.value) * 2
+
+	// 纵向滚动避让
+	if (diffY > Math.abs(diffX)) return
+
+	let newOffset = 0
+	if (openedPosition.value === 'left') {
+		newOffset = maxLeftOffset.value + diffX
+	} else if (openedPosition.value === 'right') {
+		newOffset = -maxRightOffset.value + diffX
+	} else {
+		newOffset = diffX
+	}
+
+	// 阻尼约束
+	if (newOffset > 0) {
+		if (!props.leftActions.length && !hasSlot('left')) return
+		offset.value = Math.min(maxLeftOffset.value * 1.2, newOffset)
+	} else if (newOffset < 0) {
+		if (!props.rightActions.length && !hasSlot('right')) return
+		offset.value = Math.max(-maxRightOffset.value * 1.2, newOffset)
+	}
+}
+
+function hasSlot(name) {
+	return false // 辅助防报错
+}
+
+function onTouchEnd() {
+	if (props.disabled) return
+	isSwiping.value = false
+
+	if (offset.value > maxLeftOffset.value * props.threshold) {
+		open('left')
+	} else if (offset.value < -maxRightOffset.value * props.threshold) {
+		open('right')
+	} else {
+		close()
+	}
+}
+
+function open(position = 'right') {
+	openedPosition.value = position
+	if (position === 'left') {
+		offset.value = maxLeftOffset.value
+	} else {
+		offset.value = -maxRightOffset.value
+	}
+	emit('open', position)
+}
+
+function close() {
+	openedPosition.value = ''
+	offset.value = 0
+	emit('close')
+}
+
+function handleActionClick(action, index, position) {
+	emit('click-action', { action, index, position })
+	if (props.autoClose) {
+		close()
+	}
+}
+
+function handleContentClick(e) {
+	if (openedPosition.value) {
+		close()
+		return
+	}
+	emit('click', e)
+}
+
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-swipe-cell {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	&--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	&__wrapper {
+		position: relative;
+		width: 100%;
+		display: flex;
+		align-items: stretch;
+		box-sizing: border-box;
+	}
+
+	&__content {
+		width: 100%;
+		flex-shrink: 0;
+		box-sizing: border-box;
+	}
+
+	&__left {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 100%;
+		display: flex;
+		align-items: stretch;
+		z-index: 2;
+	}
+
+	&__right {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 100%;
+		display: flex;
+		align-items: stretch;
+		z-index: 2;
+	}
+
+	&__action {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		box-sizing: border-box;
+		cursor: pointer;
+
+		&-text {
+			font-size: 26rpx;
+			font-weight: 700;
+			white-space: nowrap;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,107 @@
+<template>
+	<view class="mu-swiper" :style="{ height: formattedHeight }">
+		<swiper class="mu-swiper__inner" :current="current" :interval="interval" :duration="duration"
+			:autoplay="autoplay" :circular="loop" :indicator-dots="false"
+			@change="onChange">
+			<swiper-item v-for="(item, i) in list" :key="i" @tap="onTap(i)">
+				<slot :item="item" :index="i">
+					<view class="mu-swiper__item">
+						<image class="mu-swiper__image" :src="typeof item === 'string' ? item : (item && item.image ? item.image : '')" :mode="imageMode" />
+						<view v-if="item && item.title" class="mu-swiper__title">
+							<text class="mu-swiper__title-text">{{ item.title }}</text>
+						</view>
+					</view>
+				</slot>
+			</swiper-item>
+		</swiper>
+		<view v-if="indicator && list && list.length" class="mu-swiper__indicator">
+			<view v-for="(item, i) in list" :key="i" class="mu-swiper__dot"
+				:class="{ 'mu-swiper__dot--active': i === activeIndex }"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-swiper 轮播图
+ * @description 循环轮播展示图片或内容
+ * @property {Array} list - 数据列表（字符串为图片URL，对象可插槽）
+ * @property {number|string} current - 当前索引
+ * @property {number|string} height - 高度rpx
+ * @property {number} interval - 自动播放间隔ms
+ * @property {number} duration - 切换动画时长ms
+ * @property {boolean} autoplay - 自动播放
+ * @property {boolean} loop - 循环播放
+ * @property {boolean} indicator - 显示指示器
+ * @property {string} imageMode - 图片裁剪模式
+ */
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	list: { type: Array, default: () => [] },
+	current: { type: Number, default: 0 },
+	height: { type: [Number, String], default: 360 },
+	interval: { type: Number, default: 3000 },
+	duration: { type: Number, default: 300 },
+	autoplay: { type: Boolean, default: true },
+	loop: { type: Boolean, default: true },
+	indicator: { type: Boolean, default: true },
+	imageMode: { type: String, default: 'aspectFill' }
+})
+
+const emit = defineEmits(['change', 'click'])
+const activeIndex = ref(props.current)
+
+const formattedHeight = computed(() => {
+	if (typeof props.height === 'number') return `${props.height}rpx`
+	if (typeof props.height === 'string') {
+		if (props.height.endsWith('rpx') || props.height.endsWith('px')) return props.height
+		return `${props.height}rpx`
+	}
+	return '360rpx'
+})
+
+watch(() => props.current, (v) => { activeIndex.value = v })
+
+function onChange(e) {
+	const cur = e.detail ? e.detail.current : 0
+	activeIndex.value = cur
+	emit('change', cur)
+}
+
+function onTap(index) {
+	emit('click', index)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-swiper {
+	position: relative; width: 100%; overflow: hidden;
+	border-radius: $mu-radius-md;
+	&__inner { width: 100%; height: 100%; }
+	&__item { position: relative; width: 100%; height: 100%; }
+	&__image { width: 100%; height: 100%; }
+	&__title {
+		position: absolute; left: 0; right: 0; bottom: 0;
+		padding: $mu-space-3 $mu-space-4;
+		background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
+		&-text { font-size: $mu-font-sm; color: #fff; }
+	}
+	&__indicator {
+		position: absolute; bottom: 16rpx; left: 50%;
+		transform: translateX(-50%);
+		display: flex; gap: 8rpx; z-index: 2;
+	}
+	&__dot {
+		width: 12rpx; height: 12rpx; border-radius: 50%;
+		background: rgba(255, 255, 255, 0.5);
+		transition: all $mu-duration $mu-ease;
+		&--active {
+			width: 32rpx; border-radius: 6rpx;
+			background: #fff;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+	<view class="mu-switch" :class="{ 'mu-switch--on': modelValue, 'mu-switch--disabled': disabled }" @tap="toggle">
+		<view class="mu-switch__track" :style="trackStyle">
+			<view class="mu-switch__thumb" :style="{ transform: modelValue ? 'translateX(38rpx)' : 'translateX(0)' }"></view>
+		</view>
+		<text v-if="label" class="mu-switch__label">{{ label }}</text>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	label: { type: String, default: '' },
+	activeColor: { type: String, default: '' },
+	inactiveColor: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const trackStyle = computed(() => {
+	if (props.modelValue) {
+		return { background: props.activeColor || '' }
+	} else {
+		return { background: props.inactiveColor || '' }
+	}
+})
+
+function toggle() {
+	if (props.disabled) return
+	const val = !props.modelValue
+	emit('update:modelValue', val)
+	emit('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-switch {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+
+	&--disabled { opacity: $mu-opacity-disabled; cursor: not-allowed; }
+
+	&__track {
+		width: 84rpx;
+		height: 46rpx;
+		border-radius: $mu-radius-full;
+		position: relative;
+		background: $mu-border;
+		transition: all $mu-duration $mu-ease;
+		padding: 4rpx;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+	}
+
+	&--on &__track {
+		background: $mu-primary-gradient;
+		box-shadow: 0 4rpx 14rpx rgba(99, 102, 241, 0.3);
+	}
+
+	&__thumb {
+		width: 38rpx;
+		height: 38rpx;
+		border-radius: 50%;
+		background: #ffffff;
+		box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.2);
+		transition: transform $mu-duration $mu-ease-spring;
+	}
+
+	&__label {
+		margin-left: 16rpx;
+		font-size: 28rpx;
+		font-weight: 600;
+		color: $mu-text-primary;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-switch {
+		&__track { background: rgba(255, 255, 255, 0.12); }
+		&__label { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-switch {
+		&__track { background: rgba(255, 255, 255, 0.12); }
+		&__label { color: $mu-dark-text-primary; }
+	}
+}
+</style>