muzhiyu-ui 1.0.0

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

@@ -0,0 +1,125 @@
+<template>
+	<view class="mu-radio" :class="{ 'mu-radio--disabled': disabled }" @tap="handleClick">
+		<view class="mu-radio__icon" :class="{ 'mu-radio__icon--checked': isChecked, 'mu-radio__icon--disabled': disabled }">
+			<view v-if="isChecked" class="mu-radio__icon-inner"></view>
+		</view>
+		<view v-if="label || $slots.default" class="mu-radio__label" :class="{ 'mu-radio__label--disabled': disabled }">
+			<slot><text class="mu-radio__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: [String, Number, Boolean], default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const radioGroup = inject('mu-radio-group', inject('radioGroup', null))
+
+const isChecked = computed(() => {
+	if (radioGroup) {
+		const groupVal = radioGroup.modelValue ? radioGroup.modelValue.value : null
+		return groupVal === props.name
+	}
+	return props.modelValue === props.name
+})
+
+function handleClick() {
+	if (props.disabled) return
+	if (radioGroup) {
+		radioGroup.changeValue(props.name)
+	} else {
+		emit('update:modelValue', props.name)
+	}
+	emit('change', props.name)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-radio {
+	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: 50%;
+		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; }
+
+		&-inner {
+			width: 14rpx;
+			height: 14rpx;
+			border-radius: 50%;
+			background: #ffffff;
+			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+			animation: mu-radio-pop 0.2s $mu-ease-spring;
+		}
+	}
+	&__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;
+		}
+	}
+}
+
+@keyframes mu-radio-pop {
+	from { transform: scale(0); opacity: 0; }
+	to { transform: scale(1); opacity: 1; }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-radio {
+		&__icon {
+			background: $mu-dark-bg-base;
+			border-color: $mu-dark-border;
+		}
+		&__label-text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-radio {
+		&__icon {
+			background: $mu-dark-bg-base;
+			border-color: $mu-dark-border;
+		}
+		&__label-text { color: $mu-dark-text-primary; }
+	}
+}
+</style>

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

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

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

@@ -0,0 +1,103 @@
+<template>
+	<view class="mu-rate" :class="{ 'mu-rate--disabled': disabled || readonly }">
+		<view v-for="i in count" :key="i" class="mu-rate__star" @tap="handleClick(i)">
+			<view class="mu-rate__star-bg">
+				<mu-icon name="star" :size="size" :color="voidColor" />
+			</view>
+			<view class="mu-rate__star-active" :style="{ width: getStarWidth(i) }">
+				<mu-icon name="star" :size="size" :color="activeColor" />
+			</view>
+		</view>
+		<view v-if="showText" class="mu-rate__text">
+			<slot><text class="mu-rate__text-label">{{ currentText }}</text></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	value: { type: Number, default: 0 },
+	count: { type: Number, default: 5 },
+	size: { type: [Number, String], default: 32 },       // 优化移动端默认 32rpx 尺寸
+	activeColor: { type: String, default: '#F59E0B' }, // 琥珀高彩金
+	voidColor: { type: String, default: '#E2E8F0' },
+	disabled: { type: Boolean, default: false },
+	readonly: { type: Boolean, default: false },
+	allowHalf: { type: Boolean, default: false },
+	showText: { type: Boolean, default: false },
+	texts: { type: Array, default: () => ['很差', '较差', '一般', '满意', '非常满意'] }
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+function getStarWidth(i) {
+	const v = props.value
+	if (i <= v) return '100%'
+	if (props.allowHalf && i - 0.5 <= v) return '50%'
+	return '0%'
+}
+
+const currentText = computed(() => {
+	const idx = Math.ceil(props.value) - 1
+	return props.texts[idx] || ''
+})
+
+function handleClick(i) {
+	if (props.disabled || props.readonly) return
+	let val = i
+	if (props.allowHalf && val === props.value) val = i - 0.5
+	emit('change', val)
+	emit('update:value', val)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-rate {
+	display: inline-flex;
+	align-items: center;
+	&--disabled { opacity: 0.6; }
+	&__star {
+		position: relative;
+		margin-right: 12rpx;
+		cursor: pointer;
+		transition: transform $mu-duration $mu-ease-spring;
+		display: inline-flex;
+		&:active { transform: scale(1.2); }
+	}
+	&__star-bg { display: flex; }
+	&__star-active {
+		position: absolute;
+		top: 0;
+		left: 0;
+		overflow: hidden;
+		display: flex;
+		transition: width $mu-duration $mu-ease;
+	}
+	&__text {
+		margin-left: 16rpx;
+		&-label {
+			font-size: 26rpx;
+			font-weight: 700;
+			color: #F59E0B;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-rate {
+		&__text-label { color: #F59E0B; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-rate {
+		&__text-label { color: #F59E0B; }
+	}
+}
+</style>

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

@@ -0,0 +1,320 @@
+<template>
+	<view class="mu-search" :class="[disabled && 'mu-search--disabled']">
+		<view
+			class="mu-search__bar"
+			:class="[
+				isFocus && 'mu-search__bar--focus',
+				`mu-search__bar--${shape}`
+			]"
+			:style="barStyle"
+		>
+			<!-- 搜索图标 -->
+			<view class="mu-search__icon">
+				<slot name="icon">
+					<mu-icon name="search" :size="16" :color="isFocus ? '#171717' : '#94A3B8'" />
+				</slot>
+			</view>
+
+			<!-- 输入框 -->
+			<input
+				class="mu-search__input"
+				:value="modelValue"
+				:placeholder="placeholder"
+				:placeholder-style="placeholderStyle"
+				:disabled="disabled"
+				:focus="autofocus"
+				confirm-type="search"
+				@input="onInput"
+				@focus="onFocus"
+				@blur="onBlur"
+				@confirm="onSearch"
+			/>
+
+			<!-- 清除按钮 -->
+			<view
+				v-if="modelValue && clearable && !disabled"
+				class="mu-search__clear mu-touchable-flat"
+				@tap="handleClear"
+			>
+				<mu-icon name="close" :size="12" color="#94A3B8" />
+			</view>
+		</view>
+
+		<!-- 右侧动作按钮 (搜索/取消) -->
+		<view
+			v-if="showAction && (isFocus || alwaysShowAction || modelValue)"
+			class="mu-search__action mu-touchable-flat"
+			@tap="onActionClick"
+		>
+			<slot name="action">
+				<text class="mu-search__action-text">{{ actionText }}</text>
+			</slot>
+		</view>
+
+		<!-- 搜索联想建议下拉框 -->
+		<view v-if="showSuggest && suggestions.length && isFocus" class="mu-search__suggest">
+			<view
+				v-for="(item, i) in suggestions"
+				:key="i"
+				class="mu-search__suggest-item"
+				@tap="handleSuggest(item)"
+			>
+				<mu-icon name="search" :size="14" color="#94A3B8" style="margin-right: 12rpx;" />
+				<text class="mu-search__suggest-text">{{ item }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	value: { type: String, default: '' },              // 兼容旧属性 value
+	placeholder: { type: String, default: '搜索' },
+	disabled: { type: Boolean, default: false },
+	clearable: { type: Boolean, default: true },
+	showAction: { type: Boolean, default: false },
+	alwaysShowAction: { type: Boolean, default: false },
+	actionText: { type: String, default: '搜索' },
+	autofocus: { type: Boolean, default: false },
+	suggestions: { type: Array, default: () => [] },
+	shape: { type: String, default: 'round' },         // round | radius
+	background: { type: String, default: '' }
+})
+
+const emit = defineEmits(['input', 'change', 'search', 'focus', 'blur', 'clear', 'action-click', 'update:modelValue', 'update:value'])
+
+const isFocus = ref(false)
+
+const modelValue = computed({
+	get: () => props.modelValue || props.value,
+	set: (val) => {
+		emit('update:modelValue', val)
+		emit('update:value', val)
+	}
+})
+
+const showSuggest = computed(() => props.suggestions.length > 0)
+
+const placeholderStyle = computed(() => 'color: #94A3B8; font-size: 26rpx;')
+
+const barStyle = computed(() => {
+	const s = {}
+	if (props.background) s.background = props.background
+	return s
+})
+
+function onInput(e) {
+	const val = e.detail.value
+	modelValue.value = val
+	emit('input', val)
+	emit('change', val)
+}
+
+function onFocus() {
+	if (props.disabled) return
+	isFocus.value = true
+	emit('focus')
+}
+
+function onBlur() {
+	setTimeout(() => {
+		isFocus.value = false
+	}, 150)
+	emit('blur')
+}
+
+function onSearch() {
+	emit('search', modelValue.value)
+}
+
+function onActionClick() {
+	emit('action-click', modelValue.value)
+	onSearch()
+}
+
+function handleClear() {
+	modelValue.value = ''
+	emit('input', '')
+	emit('change', '')
+	emit('clear')
+}
+
+function handleSuggest(item) {
+	modelValue.value = item
+	emit('input', item)
+	emit('change', item)
+	emit('search', item)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-search {
+	display: flex;
+	align-items: center;
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+
+	&--disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	&__bar {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		height: 68rpx;
+		background: #F8FAFC;
+		border-radius: 999rpx;
+		padding: 0 20rpx;
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		transition: all 0.25s ease;
+		box-sizing: border-box;
+
+		&--radius {
+			border-radius: 12rpx;
+		}
+
+		&--focus {
+			border-color: #171717;
+			background: #ffffff;
+			box-shadow: 0 0 0 4rpx rgba(99, 102, 241, 0.12);
+		}
+	}
+
+	&__icon {
+		margin-right: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__input {
+		flex: 1;
+		height: 100%;
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		background: transparent;
+		border: none;
+		font-weight: 500;
+	}
+
+	&__clear {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: #E2E8F0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 10rpx;
+		flex-shrink: 0;
+
+		&:active {
+			opacity: 0.7;
+		}
+	}
+
+	&__action {
+		margin-left: 16rpx;
+		display: flex;
+		align-items: center;
+		height: 68rpx;
+		flex-shrink: 0;
+
+		&-text {
+			font-size: 26rpx;
+			color: #171717;
+			font-weight: 700;
+		}
+	}
+
+	&__suggest {
+		position: absolute;
+		top: calc(100% + 12rpx);
+		left: 0;
+		right: 0;
+		z-index: 99;
+		background: #ffffff;
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		border-radius: 20rpx;
+		box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.08);
+		overflow: hidden;
+
+		&-item {
+			padding: 20rpx 24rpx;
+			display: flex;
+			align-items: center;
+			border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+
+			&:last-child { border-bottom: none; }
+			&:active { background: #F8FAFC; }
+		}
+
+		&-text {
+			font-size: 26rpx;
+			color: $mu-text-primary;
+			font-weight: 500;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-search {
+		&__bar {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+			&--focus {
+				border-color: #171717;
+				background: $mu-dark-bg-base;
+				box-shadow: 0 0 0 4rpx rgba(99, 102, 241, 0.2);
+			}
+		}
+		&__input { color: $mu-dark-text-primary; }
+		&__clear { background: rgba(255, 255, 255, 0.15); }
+		&__suggest {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+			&-item {
+				border-color: rgba(255, 255, 255, 0.06);
+				&:active { background: rgba(255, 255, 255, 0.05); }
+			}
+			&-text { color: $mu-dark-text-primary; }
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-search {
+		&__bar {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+			&--focus {
+				border-color: #171717;
+				background: $mu-dark-bg-base;
+				box-shadow: 0 0 0 4rpx rgba(99, 102, 241, 0.2);
+			}
+		}
+		&__input { color: $mu-dark-text-primary; }
+		&__clear { background: rgba(255, 255, 255, 0.15); }
+		&__suggest {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+			&-item {
+				border-color: rgba(255, 255, 255, 0.06);
+				&:active { background: rgba(255, 255, 255, 0.05); }
+			}
+			&-text { color: $mu-dark-text-primary; }
+		}
+	}
+}
+</style>