muzhiyu-ui 1.0.0

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

@@ -0,0 +1,206 @@
+<template>
+	<view class="mu-section" :style="{ marginTop: formattedMarginTop }">
+		<!-- 标头区域 -->
+		<view class="mu-section__header" :style="{ padding }" @tap="handleHeaderClick">
+			<!-- 左侧装饰竖线 / 极光的 Pill / 图标 -->
+			<view
+				v-if="type === 'line' && showLine"
+				class="mu-section__line"
+				:style="lineStyle"
+			></view>
+
+			<view v-else-if="type === 'pill'" class="mu-section__pill-dot" :style="pillStyle"></view>
+
+			<view v-if="icon" class="mu-section__icon">
+				<slot name="icon">
+					<mu-icon :name="icon" :size="iconSize" :color="iconColor || '#171717'" />
+				</slot>
+			</view>
+
+			<!-- 标题与副描述 -->
+			<view class="mu-section__title-wrap">
+				<text class="mu-section__title" :style="titleStyle">{{ title }}</text>
+				<text v-if="desc" class="mu-section__desc">{{ desc }}</text>
+			</view>
+
+			<!-- 右侧更多 / 操作按钮插槽 -->
+			<view v-if="rightText || arrow || $slots.right" class="mu-section__right mu-touchable-flat" @tap.stop="handleRightClick">
+				<slot name="right">
+					<text class="mu-section__right-text">{{ rightText }}</text>
+					<mu-icon v-if="arrow" name="chevron_right" :size="14" color="#94A3B8" style="margin-left: 4rpx;" />
+				</slot>
+			</view>
+		</view>
+
+		<!-- 板块内容主体 -->
+		<view v-if="$slots.default" class="mu-section__body">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	title: { type: String, default: '' },
+	desc: { type: String, default: '' },
+	rightText: { type: String, default: '' },
+	arrow: { type: Boolean, default: false },             // 右侧是否带右箭头
+	type: { type: String, default: 'line' },              // line (左侧竖条) | pill (圆点) | plain (无装饰)
+	showLine: { type: Boolean, default: true },
+	lineColor: { type: String, default: '' },
+	icon: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 20 },
+	iconColor: { type: String, default: '' },
+	padding: { type: String, default: '20rpx 0' },
+	marginTop: { type: [Number, String], default: '0' },
+	titleColor: { type: String, default: '' },
+	titleSize: { type: [Number, String], default: '' },
+	bold: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['click', 'click-right'])
+
+const formattedMarginTop = computed(() => {
+	if (typeof props.marginTop === 'number') return `${props.marginTop}rpx`
+	if (typeof props.marginTop === 'string' && props.marginTop) {
+		return props.marginTop.includes('rpx') || props.marginTop.includes('px') ? props.marginTop : `${props.marginTop}rpx`
+	}
+	return '0'
+})
+
+const lineStyle = computed(() => {
+	if (props.lineColor) {
+		return { background: props.lineColor }
+	}
+	return { background: '#171717' }
+})
+
+const pillStyle = computed(() => {
+	if (props.lineColor) {
+		return { background: props.lineColor }
+	}
+	return { background: 'linear-gradient(135deg, #171717, #EC4899)' }
+})
+
+const titleStyle = computed(() => {
+	const style = {
+		fontWeight: props.bold ? '800' : '600'
+	}
+	if (props.titleColor) style.color = props.titleColor
+	if (props.titleSize) {
+		style.fontSize = typeof props.titleSize === 'number' ? `${props.titleSize}rpx` : props.titleSize
+	}
+	return style
+})
+
+function handleHeaderClick(e) {
+	emit('click', e)
+}
+
+function handleRightClick(e) {
+	emit('click-right', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-section {
+	width: 100%;
+	box-sizing: border-box;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	&__line {
+		width: 8rpx;
+		height: 32rpx;
+		border-radius: 4rpx;
+		margin-right: 16rpx;
+		flex-shrink: 0;
+	}
+
+	&__pill-dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		margin-right: 16rpx;
+		flex-shrink: 0;
+		box-shadow: 0 0 12rpx rgba(99, 102, 241, 0.4);
+	}
+
+	&__icon {
+		margin-right: 14rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__title-wrap {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		align-items: baseline;
+		gap: 16rpx;
+	}
+
+	&__title {
+		font-size: 32rpx;
+		color: $mu-text-primary;
+		letter-spacing: -0.5rpx;
+		line-height: 1.3;
+	}
+
+	&__desc {
+		font-size: 22rpx;
+		color: #94A3B8;
+		font-weight: 500;
+		line-height: 1.3;
+	}
+
+	&__right {
+		margin-left: 20rpx;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		flex-shrink: 0;
+
+		&-text {
+			font-size: 24rpx;
+			color: #64748B;
+			font-weight: 600;
+		}
+	}
+
+	&__body {
+		width: 100%;
+		box-sizing: border-box;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-section {
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__right-text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-section {
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__right-text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>

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

@@ -0,0 +1,440 @@
+<template>
+	<view class="mu-select" :class="[
+		`mu-select--${shape}`,
+		`mu-select--label-${labelPosition}`,
+		disabled && 'mu-select--disabled',
+		error && 'mu-select--error',
+		filled && 'mu-select--filled'
+	]">
+		<!-- 标题 Label (包含必填红星与位置布局) -->
+		<view v-if="label || $slots.label" class="mu-select__label-box" :style="labelBoxStyle">
+			<text v-if="required" class="mu-select__required">*</text>
+			<slot name="label">
+				<text class="mu-select__label-text">{{ label }}</text>
+			</slot>
+		</view>
+
+		<!-- 下拉框主容器 Main Box -->
+		<view class="mu-select__main">
+			<view class="mu-select__wrap" @tap="toggleOpen">
+				<!-- 前缀图标与插槽 -->
+				<view v-if="prefixIcon || $slots.prefix" class="mu-select__prefix">
+					<slot name="prefix">
+						<mu-icon :name="prefixIcon" :size="16" color="#94A3B8" />
+					</slot>
+				</view>
+
+				<!-- 选中文本或 Placeholder -->
+				<text class="mu-select__text" :class="{ 'mu-select__text--placeholder': !selectedLabel }">
+					{{ selectedLabel || placeholder }}
+				</text>
+
+				<!-- 清除按钮 -->
+				<view v-if="clearable && selectedLabel" class="mu-select__clear" @tap.stop="onClear">
+					<mu-icon name="close" :size="12" color="#94A3B8" />
+				</view>
+
+				<!-- 右侧下拉箭头图标 -->
+				<view class="mu-select__arrow" :class="{ 'mu-select__arrow--active': isPickerOpen }">
+					<mu-icon name="chevron_down" :size="16" color="#94A3B8" />
+				</view>
+			</view>
+
+			<!-- 错误提示文本 -->
+			<text v-if="error" class="mu-select__error">{{ errorMessage }}</text>
+		</view>
+
+		<!-- 移动端底栏弹出选项 ActionSheet 面板 -->
+		<view v-if="isPickerOpen" class="mu-select__popup" @tap="closePicker">
+			<view class="mu-select__mask"></view>
+			<view class="mu-select__panel" @tap.stop>
+				<view class="mu-select__header">
+					<text class="mu-select__title">{{ title || label || '请选择' }}</text>
+					<view class="mu-select__close-icon" @tap="closePicker">
+						<mu-icon name="close" :size="16" color="#64748B" />
+					</view>
+				</view>
+
+				<!-- 隐藏硬边原生滚动条的平滑选项 Scroll 列表 -->
+				<scroll-view scroll-y :show-scrollbar="false" class="mu-select__options">
+					<view
+						v-for="(item, index) in options"
+						:key="index"
+						class="mu-select__option mu-touchable-flat"
+						:class="{
+							'mu-select__option--active': isSelected(item),
+							'mu-select__option--disabled': item.disabled
+						}"
+						@tap="handleSelectOption(item)"
+					>
+						<text class="mu-select__option-text">{{ getItemLabel(item) }}</text>
+						<mu-icon v-if="isSelected(item)" name="check" :size="16" color="#171717" />
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: [String, Number, Boolean], default: '' },
+	options: { type: Array, default: () => [] },          // 选项列表 [{ label: '苹果', value: 'apple' }] 或 ['苹果', '香蕉']
+	labelKey: { type: String, default: 'label' },
+	valueKey: { type: String, default: 'value' },
+	shape: { type: String, default: 'radius' },          // square (微直角) | radius (圆角) | round (全圆胶囊)
+	filled: { type: Boolean, default: false },            // 背景填充模式
+	label: { type: String, default: '' },
+	title: { type: String, default: '' },
+	labelPosition: { type: String, default: 'top' },     // top | left
+	labelWidth: { type: String, default: '' },
+	required: { type: Boolean, default: false },
+	placeholder: { type: String, default: '请选择' },
+	disabled: { type: Boolean, default: false },
+	clearable: { type: Boolean, default: false },
+	error: { type: Boolean, default: false },
+	errorMessage: { type: String, default: '' },
+	prefixIcon: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'clear'])
+
+const isPickerOpen = ref(false)
+
+const labelBoxStyle = computed(() => {
+	if (props.labelPosition === 'left' && props.labelWidth) {
+		return { width: props.labelWidth }
+	}
+	return {}
+})
+
+function getItemLabel(item) {
+	if (typeof item === 'object' && item !== null) {
+		return (item[props.labelKey] !== undefined ? item[props.labelKey] : (item.label !== undefined ? item.label : ''))
+	}
+	return item
+}
+
+function getItemValue(item) {
+	if (typeof item === 'object' && item !== null) {
+		return (item[props.valueKey] !== undefined ? item[props.valueKey] : (item.value !== undefined ? item.value : item))
+	}
+	return item
+}
+
+const selectedLabel = computed(() => {
+	if (props.modelValue === '' || props.modelValue === null || props.modelValue === undefined) {
+		return ''
+	}
+	const target = props.options.find(item => getItemValue(item) === props.modelValue)
+	if (target) return getItemLabel(target)
+	return String(props.modelValue)
+})
+
+function isSelected(item) {
+	return getItemValue(item) === props.modelValue
+}
+
+function toggleOpen() {
+	if (props.disabled) return
+	isPickerOpen.value = !isPickerOpen.value
+}
+
+function closePicker() {
+	isPickerOpen.value = false
+}
+
+function handleSelectOption(item) {
+	if (item.disabled) return
+	const val = getItemValue(item)
+	emit('update:modelValue', val)
+	emit('change', val, item)
+	closePicker()
+}
+
+function onClear() {
+	emit('update:modelValue', '')
+	emit('clear')
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-select {
+	margin-bottom: 24rpx;
+
+	&--disabled { opacity: $mu-opacity-disabled; }
+	&--error {
+		.mu-select__wrap {
+			border-color: $mu-error;
+			box-shadow: 0 0 14rpx rgba(244, 63, 94, 0.2);
+		}
+	}
+
+	/* Label 布局配置 */
+	&--label-top {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&--label-left {
+		display: flex;
+		align-items: center;
+		.mu-select__label-box {
+			margin-bottom: 0;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+			width: 140rpx;
+		}
+		.mu-select__main {
+			flex: 1;
+			min-width: 0;
+		}
+	}
+
+	&__label-box {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12rpx;
+	}
+
+	&__required {
+		color: #F43F5E;
+		font-size: 26rpx;
+		font-weight: 800;
+		margin-right: 6rpx;
+		line-height: 1;
+	}
+
+	&__label-text {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 700;
+		line-height: 1.4;
+	}
+
+	&__main {
+		width: 100%;
+	}
+
+	&__wrap {
+		display: flex;
+		align-items: center;
+		border: 1rpx solid $mu-border;
+		padding: 0 20rpx;
+		height: 68rpx;
+		background: #ffffff;
+		transition: all $mu-duration $mu-ease;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+
+	/* 填充背景模式 (:filled="true") */
+	&--filled &__wrap {
+		background: rgba(241, 245, 249, 0.6);
+		border-color: transparent;
+	}
+
+	/* 形态定义 (方形 / 柔和圆角 / 全圆胶囊) */
+	&--square &__wrap {
+		border-radius: 6rpx;
+	}
+	&--radius &__wrap {
+		border-radius: 12rpx;
+	}
+	&--round &__wrap {
+		border-radius: 999rpx;
+		padding: 0 28rpx;
+	}
+
+	&__prefix {
+		margin-right: 16rpx;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	&__text {
+		flex: 1;
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 500;
+
+		&--placeholder {
+			color: #94A3B8;
+			font-weight: 400;
+		}
+	}
+
+	&__clear {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: rgba(148, 163, 184, 0.15);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		margin-left: 12rpx;
+		flex-shrink: 0;
+	}
+
+	&__arrow {
+		margin-left: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: transform 0.25s $mu-ease;
+		flex-shrink: 0;
+
+		&--active {
+			transform: rotate(180deg);
+		}
+	}
+
+	&__error {
+		font-size: 22rpx;
+		color: $mu-error;
+		margin-top: 8rpx;
+		display: block;
+	}
+
+	/* 弹出选项 ActionSheet */
+	&__popup {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: $mu-z-modal;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
+	&__mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(15, 23, 42, 0.6);
+		backdrop-filter: none !important;
+	}
+
+	&__panel {
+		position: relative;
+		z-index: 10;
+		background: #FFFFFF;
+		border-radius: 32rpx 32rpx 0 0;
+		max-height: 65vh;
+		display: flex;
+		flex-direction: column;
+		backdrop-filter: none !important;
+		/* 平滑减速滑动，彻底消除向上回弹弹跳动效 */
+		animation: mu-slide-up 0.28s cubic-bezier(0.25, 1, 0.5, 1);
+	}
+
+	&__header {
+		padding: 32rpx 36rpx 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1rpx solid rgba(241, 245, 249, 0.9);
+	}
+
+	&__title {
+		font-size: 32rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+	}
+
+	&__close-icon {
+		padding: 8rpx;
+		cursor: pointer;
+	}
+
+	&__options {
+		max-height: 540rpx;
+		padding: 12rpx 0 32rpx;
+	}
+
+	&__option {
+		padding: 28rpx 36rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		transition: background 0.15s ease;
+
+		&:active {
+			background: rgba(241, 245, 249, 0.8);
+		}
+
+		&--active {
+			.mu-select__option-text {
+				color: $mu-primary;
+				font-weight: 800;
+			}
+		}
+
+		&--disabled {
+			opacity: 0.4;
+			pointer-events: none;
+		}
+
+		&-text {
+			font-size: 28rpx;
+			color: $mu-text-primary;
+			font-weight: 500;
+		}
+	}
+}
+
+@keyframes mu-slide-up {
+	from { transform: translateY(100%); }
+	to { transform: translateY(0); }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-select {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+		&__panel {
+			background: #14141E !important;
+			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+		}
+		&__header { border-bottom-color: rgba(255, 255, 255, 0.06); }
+		&__title { color: $mu-dark-text-primary; }
+		&__option-text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-select {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+		&__panel {
+			background: #14141E !important;
+			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+		}
+		&__header { border-bottom-color: rgba(255, 255, 255, 0.06); }
+		&__title { color: $mu-dark-text-primary; }
+		&__option-text { color: $mu-dark-text-primary; }
+	}
+}
+</style>