muzhiyu-ui 1.0.0

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

@@ -0,0 +1,228 @@
+<template>
+	<view class="mu-slider" :class="{ 'mu-slider--disabled': disabled }">
+		<view
+			class="mu-slider__track"
+			id="sliderTrack"
+			ref="trackRef"
+			@touchstart="onTouchStart"
+			@touchmove="onTouchMove"
+			@touchend="onTouchEnd"
+			@mousedown="onMouseDown"
+		>
+			<view class="mu-slider__bar" :style="{ width: percent + '%' }"></view>
+			<view class="mu-slider__thumb" :style="{ left: percent + '%' }">
+				<view v-if="showValue" class="mu-slider__tooltip">{{ modelValue }}</view>
+			</view>
+		</view>
+		<text v-if="showValueText" class="mu-slider__value">{{ modelValue }}</text>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: Number, default: 0 },
+	min: { type: Number, default: 0 },
+	max: { type: Number, default: 100 },
+	step: { type: Number, default: 1 },
+	disabled: { type: Boolean, default: false },
+	showValue: { type: Boolean, default: false },
+	showValueText: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'drag-start', 'drag-end'])
+
+const instance = getCurrentInstance()
+const trackLeft = ref(0)
+const trackWidth = ref(0)
+const isDragging = ref(false)
+
+const percent = computed(() => {
+	const range = props.max - props.min
+	if (range <= 0) return 0
+	return Math.min(100, Math.max(0, ((props.modelValue - props.min) / range) * 100))
+})
+
+function updateTrackRect(callback) {
+	// #ifndef APP-NVUE
+	const query = uni.createSelectorQuery().in(instance)
+	query.select('#sliderTrack').boundingClientRect(data => {
+		if (data) {
+			trackLeft.value = data.left
+			trackWidth.value = data.width
+			if (callback) callback()
+		}
+	}).exec()
+	// #endif
+}
+
+function getClientX(e) {
+	if (e.touches && e.touches[0]) return e.touches[0].clientX
+	if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].clientX
+	if (e.clientX !== undefined) return e.clientX
+	return 0
+}
+
+function getValueFromX(clientX) {
+	if (trackWidth.value <= 0) return props.modelValue
+	let diff = clientX - trackLeft.value
+	diff = Math.max(0, Math.min(diff, trackWidth.value))
+	const ratio = diff / trackWidth.value
+	let val = props.min + ratio * (props.max - props.min)
+	if (props.step > 0) {
+		val = Math.round((val - props.min) / props.step) * props.step + props.min
+	}
+	return Math.min(props.max, Math.max(props.min, val))
+}
+
+function handleStart(e) {
+	if (props.disabled) return
+	isDragging.value = true
+	updateTrackRect(() => {
+		const clientX = getClientX(e)
+		const val = getValueFromX(clientX)
+		emit('drag-start', props.modelValue)
+		emit('update:modelValue', val)
+		emit('change', val)
+	})
+}
+
+function handleMove(e) {
+	if (props.disabled || !isDragging.value) return
+	const clientX = getClientX(e)
+	const val = getValueFromX(clientX)
+	emit('update:modelValue', val)
+	emit('change', val)
+}
+
+function handleEnd() {
+	if (props.disabled || !isDragging.value) return
+	isDragging.value = false
+	emit('drag-end', props.modelValue)
+}
+
+function onTouchStart(e) { handleStart(e) }
+function onTouchMove(e) { handleMove(e) }
+function onTouchEnd() { handleEnd() }
+
+// H5 Mouse event handlers for desktop support
+function onMouseDown(e) {
+	handleStart(e)
+	// #ifdef H5
+	window.addEventListener('mousemove', onMouseMove)
+	window.addEventListener('mouseup', onMouseUp)
+	// #endif
+}
+
+function onMouseMove(e) {
+	handleMove(e)
+}
+
+function onMouseUp() {
+	handleEnd()
+	// #ifdef H5
+	window.removeEventListener('mousemove', onMouseMove)
+	window.removeEventListener('mouseup', onMouseUp)
+	// #endif
+}
+
+onMounted(() => {
+	setTimeout(() => {
+		updateTrackRect()
+	}, 100)
+})
+
+onUnmounted(() => {
+	// #ifdef H5
+	window.removeEventListener('mousemove', onMouseMove)
+	window.removeEventListener('mouseup', onMouseUp)
+	// #endif
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-slider {
+	display: flex;
+	align-items: center;
+	gap: 24rpx;
+	padding: 20rpx 0;
+	width: 100%;
+	box-sizing: border-box;
+
+	&--disabled { opacity: $mu-opacity-disabled; }
+
+	&__track {
+		flex: 1;
+		height: 12rpx;
+		background: $mu-border;
+		border-radius: $mu-radius-full;
+		position: relative;
+		cursor: pointer;
+		touch-action: none;
+	}
+	&__bar {
+		height: 100%;
+		background: $mu-primary-gradient;
+		border-radius: $mu-radius-full;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+	&__thumb {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		background: #ffffff;
+		border: 4rpx solid $mu-primary;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.2);
+		z-index: 1;
+		cursor: grab;
+		transition: transform 0.15s ease;
+
+		&:active {
+			transform: translate(-50%, -50%) scale(1.2);
+		}
+	}
+	&__tooltip {
+		position: absolute;
+		bottom: 52rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		background: rgba(15, 23, 42, 0.88);
+		color: #ffffff;
+		font-size: 22rpx;
+		font-weight: 700;
+		padding: 4rpx 14rpx;
+		border-radius: 8rpx;
+		pointer-events: none;
+		white-space: nowrap;
+	}
+	&__value {
+		font-size: 26rpx;
+		font-weight: 700;
+		color: $mu-text-secondary;
+		min-width: 48rpx;
+		text-align: right;
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-slider {
+		&__track { background: rgba(255, 255, 255, 0.12); }
+		&__value { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-slider {
+		&__track { background: rgba(255, 255, 255, 0.12); }
+		&__value { color: $mu-dark-text-secondary; }
+	}
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+	<view v-if="hasSlot" class="mu-space" :class="spaceClasses" :style="containerStyle">
+		<slot></slot>
+	</view>
+	<view v-else class="mu-space-block" :style="blockStyle"></view>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+
+const slots = useSlots()
+
+const props = defineProps({
+	height: { type: [Number, String], default: '' },
+	size: { type: [Number, String], default: 20 },
+	direction: { type: String, default: 'row' },
+	dir: { type: String, default: '' },
+	align: { type: String, default: 'center' },
+	wrap: { type: Boolean, default: true },
+	block: { type: Boolean, default: false }
+})
+
+const hasSlot = computed(() => !!slots.default)
+
+const computedDirection = computed(() => props.dir || props.direction || 'row')
+
+const computedGap = computed(() => {
+	const val = props.height !== '' ? props.height : props.size
+	if (val === 'small' || val === 'sm') return '12rpx'
+	if (val === 'medium' || val === 'md') return '20rpx'
+	if (val === 'large' || val === 'lg') return '32rpx'
+	if (typeof val === 'number') return `${val}rpx`
+	if (typeof val === 'string') {
+		if (val.endsWith('rpx') || val.endsWith('px') || val.endsWith('%') || val.endsWith('rem')) return val
+		return `${val}rpx`
+	}
+	return '20rpx'
+})
+
+const spaceClasses = computed(() => [
+	`mu-space--${computedDirection.value}`,
+	props.wrap && 'mu-space--wrap',
+	props.block && 'mu-space--block'
+])
+
+const containerStyle = computed(() => ({
+	gap: computedGap.value,
+	alignItems: props.align === 'start' ? 'flex-start' : (props.align === 'end' ? 'flex-end' : props.align)
+}))
+
+const blockStyle = computed(() => {
+	if (computedDirection.value === 'column' || computedDirection.value === 'vertical') {
+		return { height: computedGap.value, width: '100%' }
+	}
+	return { height: computedGap.value, width: '100%' }
+})
+</script>
+
+<style lang="scss" scoped>
+.mu-space {
+	display: inline-flex;
+	box-sizing: border-box;
+
+	&--row {
+		flex-direction: row;
+	}
+	&--column {
+		flex-direction: column;
+	}
+	&--wrap {
+		flex-wrap: wrap;
+	}
+	&--block {
+		display: flex;
+		width: 100%;
+	}
+}
+
+.mu-space-block {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,311 @@
+<template>
+	<view class="mu-steps" :class="{ 'mu-steps--vertical': direction === 'vertical' }">
+		<view
+			v-for="(item, index) in displaySteps"
+			:key="index"
+			class="mu-steps__item"
+			:class="[
+				`mu-steps__item--${getStatus(index)}`,
+				!showNumber && 'mu-steps__item--dot-mode'
+			]"
+		>
+			<view class="mu-steps__indicator">
+				<!-- 圆点指示器 -->
+				<view
+					class="mu-steps__dot"
+					:class="[
+						isFinished(index) && 'mu-steps__dot--finish',
+						isProcess(index) && 'mu-steps__dot--process',
+						!showNumber && 'mu-steps__dot--point-only'
+					]"
+					:style="getDotStyle(index)"
+				>
+					<template v-if="showNumber">
+						<mu-icon v-if="isFinished(index)" name="check" :size="12" color="#ffffff" />
+						<text v-else class="mu-steps__num">{{ getDisplayNumber(index) }}</text>
+					</template>
+					<view v-else class="mu-steps__inner-point"></view>
+				</view>
+
+				<!-- 连接线 -->
+				<view
+					v-if="index < displaySteps.length - 1"
+					class="mu-steps__line"
+					:class="{ 'mu-steps__line--finish': isLineFinished(index) }"
+					:style="getLineStyle(index)"
+				></view>
+			</view>
+
+			<!-- 步骤内容 -->
+			<view class="mu-steps__content">
+				<text class="mu-steps__title" :style="getTitleStyle(index)">{{ getItemTitle(item) }}</text>
+				<text v-if="getItemTime(item)" class="mu-steps__time">{{ getItemTime(item) }}</text>
+				<text v-if="getItemDesc(item)" class="mu-steps__desc">{{ getItemDesc(item) }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	steps: { type: Array, default: () => [] },
+	items: { type: Array, default: () => [] },
+	current: { type: Number, default: 0 },
+	direction: { type: String, default: 'horizontal' },
+	activeColor: { type: String, default: '#171717' },     // 主主题色/黑金
+	reverse: { type: Boolean, default: false },           // 是否倒序展示时间线（最新在上/最前）
+	showNumber: { type: Boolean, default: true }          // 是否显示圆点内部数字
+})
+
+const rawSteps = computed(() => {
+	if (props.steps && props.steps.length) return props.steps
+	return props.items || []
+})
+
+const displaySteps = computed(() => {
+	if (props.reverse) {
+		return [...rawSteps.value].reverse()
+	}
+	return rawSteps.value
+})
+
+function isProcess(index) {
+	if (props.reverse) {
+		return index === 0
+	}
+	return index === props.current
+}
+
+function isFinished(index) {
+	if (props.reverse) {
+		return index > 0
+	}
+	return index < props.current
+}
+
+function isLineFinished(index) {
+	if (props.reverse) {
+		return true
+	}
+	return index < props.current
+}
+
+function getStatus(index) {
+	if (isProcess(index)) return 'process'
+	if (isFinished(index)) return 'finish'
+	return 'wait'
+}
+
+function getDisplayNumber(index) {
+	if (props.reverse) {
+		return displaySteps.value.length - index
+	}
+	return index + 1
+}
+
+function getDotStyle(index) {
+	const active = isProcess(index) || isFinished(index)
+	if (active && props.activeColor && props.activeColor !== '#171717') {
+		return { background: props.activeColor, borderColor: 'transparent' }
+	}
+	return {}
+}
+
+function getLineStyle(index) {
+	const active = isLineFinished(index)
+	if (active && props.activeColor && props.activeColor !== '#171717') {
+		return { background: props.activeColor }
+	}
+	return {}
+}
+
+function getTitleStyle(index) {
+	const active = isProcess(index) || isFinished(index)
+	if (active && props.activeColor && props.activeColor !== '#171717') {
+		return { color: props.activeColor }
+	}
+	return {}
+}
+
+function getItemTitle(item) {
+	if (typeof item === 'object' && item !== null) {
+		return item.title || item.name || String(item)
+	}
+	return String(item)
+}
+
+function getItemDesc(item) {
+	if (typeof item === 'object' && item !== null) {
+		return item.desc || item.description || ''
+	}
+	return ''
+}
+
+function getItemTime(item) {
+	if (typeof item === 'object' && item !== null) {
+		return item.time || item.date || ''
+	}
+	return ''
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-steps {
+	display: flex;
+	width: 100%;
+
+	&--vertical {
+		flex-direction: column;
+		.mu-steps__item {
+			flex-direction: row;
+			align-items: flex-start;
+			padding-bottom: 32rpx;
+		}
+		.mu-steps__indicator {
+			flex-direction: column;
+			width: auto;
+			margin-right: 24rpx;
+		}
+		.mu-steps__line {
+			width: 2rpx;
+			height: 100%;
+			min-height: 48rpx;
+			margin: 8rpx 0;
+		}
+		.mu-steps__content {
+			margin-top: 0;
+			text-align: left;
+		}
+	}
+
+	&__item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: relative;
+
+		&--process .mu-steps__dot {
+			background: #171717;
+			color: #ffffff;
+			border-color: transparent;
+			box-shadow: 0 4rpx 14rpx rgba(23, 23, 23, 0.25);
+		}
+		&--process .mu-steps__title { color: #171717; font-weight: 800; }
+
+		&--finish .mu-steps__dot {
+			background: #171717;
+			color: #ffffff;
+			border-color: transparent;
+		}
+		&--finish .mu-steps__title { color: #171717; font-weight: 700; }
+
+		&--wait .mu-steps__dot { background: rgba(241, 245, 249, 0.8); color: #94A3B8; border: 1rpx solid $mu-border; }
+		&--wait .mu-steps__title { color: #94A3B8; }
+	}
+
+	&__indicator {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		position: relative;
+	}
+
+	&__dot {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		transition: all 0.2s ease;
+		z-index: 2;
+
+		&--point-only {
+			width: 20rpx;
+			height: 20rpx;
+			margin: 12rpx 0;
+
+			.mu-steps__inner-point {
+				width: 8rpx;
+				height: 8rpx;
+				border-radius: 50%;
+				background: #ffffff;
+			}
+		}
+	}
+
+	&__num {
+		font-size: 22rpx;
+		font-weight: 700;
+	}
+
+	&__line {
+		flex: 1;
+		height: 4rpx;
+		background: rgba(226, 232, 240, 0.8);
+
+		&--finish {
+			background: #171717;
+		}
+	}
+
+	&__content {
+		margin-top: 12rpx;
+		text-align: center;
+	}
+
+	&__title {
+		font-size: 24rpx;
+		color: $mu-text-primary;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	&__time {
+		font-size: 20rpx;
+		color: #94A3B8;
+		margin-top: 2rpx;
+		display: block;
+	}
+
+	&__desc {
+		font-size: 22rpx;
+		color: #64748B;
+		margin-top: 6rpx;
+		display: block;
+		line-height: 1.4;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-steps {
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: #94A3B8; }
+		&__line { background: rgba(255, 255, 255, 0.1); }
+		&--wait .mu-steps__dot { background: rgba(255, 255, 255, 0.06); border-color: $mu-dark-border; }
+		&--process .mu-steps__dot, &--finish .mu-steps__dot { background: #ffffff !important; color: #171717 !important; }
+		&--process .mu-steps__title, &--finish .mu-steps__title { color: #ffffff !important; }
+		&__line--finish { background: #ffffff !important; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-steps {
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: #94A3B8; }
+		&__line { background: rgba(255, 255, 255, 0.1); }
+		&--wait .mu-steps__dot { background: rgba(255, 255, 255, 0.06); border-color: $mu-dark-border; }
+		&--process .mu-steps__dot, &--finish .mu-steps__dot { background: #ffffff !important; color: #171717 !important; }
+		&--process .mu-steps__title, &--finish .mu-steps__title { color: #ffffff !important; }
+		&__line--finish { background: #ffffff !important; }
+	}
+}
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+	<view class="mu-sticky" :style="stickyStyle">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-sticky 粘性布局组件
+ * @description 滚动到设定的顶部阈值时自动吸顶悬浮，向下滚动自动复位 (全端原生 CSS Sticky 极致性能支持)
+ */
+import { computed } from 'vue'
+
+const props = defineProps({
+	top: { type: [Number, String], default: 0 },         // 距离顶部的吸顶距离 (支持 0, '20rpx', '10px' 等)
+	zIndex: { type: [Number, String], default: 99 },     // 层级
+	disabled: { type: Boolean, default: false },        // 是否禁用吸顶
+	bgColor: { type: String, default: '' }              // 吸顶背景色
+})
+
+const formattedTop = computed(() => {
+	if (typeof props.top === 'number') return `${props.top}rpx`
+	return props.top || '0rpx'
+})
+
+const stickyStyle = computed(() => {
+	if (props.disabled) return {}
+	
+	const style = {
+		position: 'sticky',
+		zIndex: props.zIndex
+	}
+
+	// #ifndef H5
+	style.top = formattedTop.value
+	// #endif
+
+	// #ifdef H5
+	style.top = `calc(var(--window-top, 0px) + ${formattedTop.value})`
+	// #endif
+
+	if (props.bgColor) {
+		style.backgroundColor = props.bgColor
+	}
+	return style
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-sticky {
+	position: sticky;
+	width: 100%;
+	box-sizing: border-box;
+}
+</style>