muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-color-picker/mu-color-picker.vue

@@ -0,0 +1,466 @@
+<template>
+	<view class="mu-color-picker">
+		<!-- 触发按钮 Preview -->
+		<view
+			v-if="mode === 'popup'"
+			class="mu-color-picker__trigger"
+			@tap="openPopup"
+		>
+			<view class="mu-color-picker__preview-dot" :style="{ background: currentValue }"></view>
+			<text class="mu-color-picker__value-text">{{ currentValue }}</text>
+			<mu-icon name="arrow_right" :size="16" color="#94A3B8" />
+		</view>
+
+		<!-- 内嵌面板 / 弹出面板 -->
+		<view
+			v-if="mode === 'inline' || (mode === 'popup' && popupShow)"
+			class="mu-color-picker__panel"
+			:class="[mode === 'popup' && 'mu-color-picker__panel--popup']"
+		>
+			<!-- 1. 彩色 Hue 光谱点选色滑块 (彩虹色盘) -->
+			<view class="mu-color-picker__section-title">点选彩虹光谱色</view>
+			<view
+				class="mu-color-picker__hue-bar"
+				id="hueBar"
+				@touchstart="onHueStart"
+				@touchmove="onHueMove"
+				@mousedown="onHueMouseDown"
+			>
+				<view
+					class="mu-color-picker__hue-handle"
+					:style="{ left: `${huePercent}%` }"
+				></view>
+			</view>
+
+			<!-- 2. 灰阶/明度点选滑块 -->
+			<view class="mu-color-picker__section-title" style="margin-top: 20rpx;">明度调节</view>
+			<view
+				class="mu-color-picker__light-bar"
+				id="lightBar"
+				:style="lightBarBackgroundStyle"
+				@touchstart="onLightStart"
+				@touchmove="onLightMove"
+				@mousedown="onLightMouseDown"
+			>
+				<view
+					class="mu-color-picker__hue-handle"
+					:style="{ left: `${lightPercent}%` }"
+				></view>
+			</view>
+
+			<!-- 3. 预设调色板 (Presets Palette) -->
+			<view class="mu-color-picker__section-title" style="margin-top: 24rpx;">预设配色盘</view>
+			<view class="mu-color-picker__presets">
+				<view
+					v-for="(c, i) in presetColors"
+					:key="i"
+					class="mu-color-picker__preset-item"
+					:class="[c.toLowerCase() === currentValue.toLowerCase() && 'mu-color-picker__preset-item--active']"
+					:style="{ background: c }"
+					@tap="selectPresetColor(c)"
+				>
+					<mu-icon v-if="c.toLowerCase() === currentValue.toLowerCase()" name="check" :size="14" color="#FFFFFF" />
+				</view>
+			</view>
+
+			<!-- 4. HEX 实时输入框与预览 HEX 块 -->
+			<view class="mu-color-picker__footer">
+				<view class="mu-color-picker__current-badge" :style="{ background: currentValue }"></view>
+				<view class="mu-color-picker__input-box">
+					<text class="mu-color-picker__hash">#</text>
+					<input
+						class="mu-color-picker__input"
+						:value="hexValue"
+						maxlength="6"
+						@input="onHexInput"
+					/>
+				</view>
+
+				<view v-if="mode === 'popup'" class="mu-color-picker__confirm-btn" @tap="confirm">
+					<text class="mu-color-picker__confirm-text">确定</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, getCurrentInstance, onUnmounted } from 'vue'
+
+const props = defineProps({
+	value: { type: String, default: '#171717' },
+	mode: { type: String, default: 'inline' },            // inline | popup
+	presetColors: {
+		type: Array,
+		default: () => [
+			'#171717', '#4F46E5', '#3B82F6', '#10B981', '#F59E0B', '#EF4444',
+			'#EC4899', '#8B5CF6', '#14B8A6', '#0F172A', '#64748B', '#FFFFFF'
+		]
+	}
+})
+
+const emit = defineEmits(['change', 'update:value', 'confirm'])
+
+const instance = getCurrentInstance()
+const popupShow = ref(false)
+const currentValue = ref(props.value || '#171717')
+const huePercent = ref(50)
+const lightPercent = ref(50)
+
+const isDraggingHue = ref(false)
+const isDraggingLight = ref(false)
+
+const hexValue = computed(() => {
+	return currentValue.value.replace('#', '').toUpperCase()
+})
+
+const lightBarBackgroundStyle = computed(() => {
+	const baseColor = hslToHex(huePercent.value * 3.6, 100, 50)
+	return {
+		background: `linear-gradient(to right, #000000, ${baseColor}, #FFFFFF)`
+	}
+})
+
+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 openPopup() {
+	popupShow.value = true
+}
+
+function selectPresetColor(c) {
+	currentValue.value = c
+	emit('change', c)
+	emit('update:value', c)
+}
+
+function onHexInput(e) {
+	const val = e.detail.value.replace(/[^0-9a-fA-F]/g, '')
+	if (val.length === 6) {
+		const hex = '#' + val
+		currentValue.value = hex
+		emit('change', hex)
+		emit('update:value', hex)
+	}
+}
+
+function handleHueEvent(e) {
+	const clientX = getClientX(e)
+	const query = uni.createSelectorQuery().in(instance)
+	query.select('#hueBar').boundingClientRect(rect => {
+		if (rect && rect.width) {
+			const x = Math.max(0, Math.min(rect.width, clientX - rect.left))
+			huePercent.value = (x / rect.width) * 100
+			updateColorFromHsl()
+		}
+	}).exec()
+}
+
+function handleLightEvent(e) {
+	const clientX = getClientX(e)
+	const query = uni.createSelectorQuery().in(instance)
+	query.select('#lightBar').boundingClientRect(rect => {
+		if (rect && rect.width) {
+			const x = Math.max(0, Math.min(rect.width, clientX - rect.left))
+			lightPercent.value = (x / rect.width) * 100
+			updateColorFromHsl()
+		}
+	}).exec()
+}
+
+function onHueStart(e) { handleHueEvent(e) }
+function onHueMove(e) { handleHueEvent(e) }
+
+function onLightStart(e) { handleLightEvent(e) }
+function onLightMove(e) { handleLightEvent(e) }
+
+// H5 Mouse events
+function onHueMouseDown(e) {
+	isDraggingHue.value = true
+	handleHueEvent(e)
+	// #ifdef H5
+	window.addEventListener('mousemove', onHueMouseMove)
+	window.addEventListener('mouseup', onMouseUp)
+	// #endif
+}
+
+function onHueMouseMove(e) {
+	if (isDraggingHue.value) handleHueEvent(e)
+}
+
+function onLightMouseDown(e) {
+	isDraggingLight.value = true
+	handleLightEvent(e)
+	// #ifdef H5
+	window.addEventListener('mousemove', onLightMouseMove)
+	window.addEventListener('mouseup', onMouseUp)
+	// #endif
+}
+
+function onLightMouseMove(e) {
+	if (isDraggingLight.value) handleLightEvent(e)
+}
+
+function onMouseUp() {
+	isDraggingHue.value = false
+	isDraggingLight.value = false
+	// #ifdef H5
+	window.removeEventListener('mousemove', onHueMouseMove)
+	window.removeEventListener('mousemove', onLightMouseMove)
+	window.removeEventListener('mouseup', onMouseUp)
+	// #endif
+}
+
+function updateColorFromHsl() {
+	const h = huePercent.value * 3.6
+	const l = lightPercent.value
+	const hex = hslToHex(h, 100, l)
+	currentValue.value = hex
+	emit('change', hex)
+	emit('update:value', hex)
+}
+
+function hslToHex(h, s, l) {
+	l /= 100
+	const a = (s * Math.min(l, 1 - l)) / 100
+	const f = n => {
+		const k = (n + h / 30) % 12
+		const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+		return Math.round(255 * color).toString(16).padStart(2, '0')
+	}
+	return `#${f(0)}${f(8)}${f(4)}`.toUpperCase()
+}
+
+function confirm() {
+	popupShow.value = false
+	emit('confirm', currentValue.value)
+}
+
+watch(() => props.value, (v) => {
+	if (v) currentValue.value = v
+})
+
+onUnmounted(() => {
+	// #ifdef H5
+	window.removeEventListener('mousemove', onHueMouseMove)
+	window.removeEventListener('mousemove', onLightMouseMove)
+	window.removeEventListener('mouseup', onMouseUp)
+	// #endif
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-color-picker {
+	width: 100%;
+	box-sizing: border-box;
+
+	&__trigger {
+		display: flex;
+		align-items: center;
+		padding: 16rpx 24rpx;
+		background: #FFFFFF;
+		border: 1rpx solid #E2E8F0;
+		border-radius: 20rpx;
+		cursor: pointer;
+		box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
+	}
+
+	&__preview-dot {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		box-shadow: inset 0 0 0 2rpx rgba(0, 0, 0, 0.1);
+		margin-right: 16rpx;
+	}
+
+	&__value-text {
+		flex: 1;
+		font-size: 26rpx;
+		font-weight: 800;
+		color: #0F172A;
+		letter-spacing: 1rpx;
+	}
+
+	&__panel {
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		padding: 28rpx;
+		border: 1rpx solid #E2E8F0;
+		box-shadow: 0 8rpx 32rpx rgba(15, 23, 42, 0.06);
+		box-sizing: border-box;
+
+		&--popup {
+			margin-top: 16rpx;
+		}
+	}
+
+	&__section-title {
+		font-size: 22rpx;
+		font-weight: 700;
+		color: #64748B;
+		display: block;
+		margin-bottom: 12rpx;
+	}
+
+	/* 彩虹 Hue 滑块 */
+	&__hue-bar {
+		position: relative;
+		width: 100%;
+		height: 36rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
+		cursor: pointer;
+		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
+		touch-action: none;
+	}
+
+	/* 明度调节滑块 */
+	&__light-bar {
+		position: relative;
+		width: 100%;
+		height: 36rpx;
+		border-radius: 999rpx;
+		cursor: pointer;
+		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
+		touch-action: none;
+	}
+
+	&__hue-handle {
+		position: absolute;
+		top: 50%;
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
+		background: #FFFFFF;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+		transform: translate(-50%, -50%);
+		border: 4rpx solid #FFFFFF;
+		pointer-events: none;
+	}
+
+	&__presets {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		gap: 16rpx;
+		margin-top: 12rpx;
+	}
+
+	&__preset-item {
+		height: 64rpx;
+		border-radius: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		box-shadow: inset 0 0 0 2rpx rgba(0, 0, 0, 0.08);
+
+		&--active {
+			box-shadow: 0 0 0 4rpx #171717;
+		}
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		margin-top: 28rpx;
+		padding-top: 20rpx;
+		border-top: 1rpx solid #F1F5F9;
+	}
+
+	&__current-badge {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 16rpx;
+		box-shadow: inset 0 0 0 2rpx rgba(0, 0, 0, 0.1);
+	}
+
+	&__input-box {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		height: 64rpx;
+		background: #F8FAFC;
+		border-radius: 16rpx;
+		padding: 0 20rpx;
+		border: 1rpx solid #E2E8F0;
+	}
+
+	&__hash {
+		font-size: 26rpx;
+		font-weight: 800;
+		color: #64748B;
+		margin-right: 8rpx;
+	}
+
+	&__input {
+		flex: 1;
+		font-size: 26rpx;
+		font-weight: 800;
+		color: #0F172A;
+		letter-spacing: 1rpx;
+	}
+
+	&__confirm-btn {
+		padding: 12rpx 32rpx;
+		background: #171717;
+		border-radius: 999rpx;
+		box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.3);
+		cursor: pointer;
+	}
+
+	&__confirm-text {
+		font-size: 24rpx;
+		font-weight: 800;
+		color: #FFFFFF;
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-color-picker {
+		&__trigger {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__value-text { color: $mu-dark-text-primary; }
+		&__panel {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__section-title { color: $mu-dark-text-secondary; }
+		&__input-box {
+			background: rgba(255, 255, 255, 0.05);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__input { color: $mu-dark-text-primary; }
+		&__footer { border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-color-picker {
+		&__trigger {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__value-text { color: $mu-dark-text-primary; }
+		&__panel {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__section-title { color: $mu-dark-text-secondary; }
+		&__input-box {
+			background: rgba(255, 255, 255, 0.05);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__input { color: $mu-dark-text-primary; }
+		&__footer { border-color: rgba(255, 255, 255, 0.08); }
+	}
+}
+</style>

package/components/muzhiyu/mu-config/index.js

@@ -0,0 +1,34 @@
+/**
+ * MuZhiYuUI 全局配置
+ * 用于组件主题定制和全局参数
+ */
+
+const config = {
+	// 品牌主色
+	primaryColor: '#1677FF',
+	// 语义色
+	successColor: '#52C41A',
+	warningColor: '#FAAD14',
+	errorColor: '#FF4D4F',
+	infoColor: '#1677FF',
+	// 文本色
+	textPrimary: '#1A1A1A',
+	textSecondary: '#595959',
+	textTertiary: '#8C8C8C',
+	textDisabled: '#BFBFBF',
+	// 背景色
+	bgBase: '#FFFFFF',
+	bgGray: '#FAFAFA',
+	// 边框色
+	borderColor: '#E8E8E8',
+	// 圆角
+	radiusSm: '4px',
+	radiusMd: '6px',
+	radiusLg: '8px',
+	// 动画时长
+	duration: 200,
+	// 弹窗遮罩透明度
+	maskOpacity: 0.45
+}
+
+export default config

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

@@ -0,0 +1,54 @@
+<template>
+	<view
+		class="mu-config-provider"
+		:class="[computedTheme === 'dark' && 'mu-dark']"
+		:style="providerStyle"
+	>
+		<slot></slot>
+		<mu-toast />
+	</view>
+</template>
+
+<script setup>
+import { computed, provide } from 'vue'
+import MuToast from '../mu-toast/mu-toast.vue'
+
+const props = defineProps({
+	theme: { type: String, default: 'light' }, // light | dark
+	primaryColor: { type: String, default: '#171717' },
+	zIndex: { type: Number, default: 1000 },
+	unit: { type: String, default: 'rpx' }
+})
+
+const computedTheme = computed(() => props.theme)
+const computedPrimary = computed(() => props.primaryColor)
+
+provide('muConfig', {
+	theme: computedTheme,
+	primaryColor: computedPrimary,
+	zIndex: computed(() => props.zIndex),
+	unit: computed(() => props.unit)
+})
+
+const providerStyle = computed(() => {
+	const style = {}
+	if (props.primaryColor) {
+		style['--mu-primary'] = props.primaryColor
+	}
+	return style
+})
+</script>
+
+<style lang="scss">
+.mu-config-provider {
+	width: 100%;
+	min-height: 100%;
+	box-sizing: border-box;
+	transition: background-color 0.3s ease, color 0.3s ease;
+
+	&.mu-dark {
+		background-color: #08080C;
+		color: #E2E8F0;
+	}
+}
+</style>