muzhiyu-ui 1.0.0

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

@@ -0,0 +1,324 @@
+<template>
+	<view class="mu-fab-container">
+		<!-- 暗化遮罩层 -->
+		<view
+			v-if="mask && isOpen"
+			class="mu-fab-mask"
+			:style="{ zIndex: zIndex - 1 }"
+			@tap="close"
+		></view>
+
+		<!-- 悬浮主容器 -->
+		<view
+			class="mu-fab"
+			:class="[
+				`mu-fab--${placement}`
+			]"
+			:style="fabContainerStyle"
+		>
+			<!-- 展开的菜单子项列表 -->
+			<view
+				v-if="isOpen && items.length"
+				class="mu-fab__actions"
+				:class="[`mu-fab__actions--${placement}`]"
+			>
+				<view
+					v-for="(item, index) in items"
+					:key="index"
+					class="mu-fab__action-item mu-touchable-flat"
+					@tap.stop="handleItemClick(index, item)"
+				>
+					<text v-if="item.text" class="mu-fab__action-text">{{ item.text }}</text>
+					<view
+						class="mu-fab__action-btn"
+						:style="{ background: item.bgColor || item.bg || '#FFFFFF' }"
+					>
+						<mu-icon
+							v-if="item.icon"
+							:name="item.icon"
+							:size="20"
+							:color="item.iconColor || item.color || '#171717'"
+						/>
+						<text v-else class="mu-fab__action-label">{{ item.label || '' }}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 悬浮主按钮 -->
+			<view
+				class="mu-fab__main-btn"
+				:class="[isOpen && 'mu-fab__main-btn--open']"
+				:style="mainBtnStyle"
+				@tap.stop="handleClick"
+			>
+				<slot>
+					<view
+						class="mu-fab__icon-box"
+						:class="[isOpen && 'mu-fab__icon-box--rotate']"
+					>
+						<mu-icon
+							:name="isOpen ? (activeIcon || 'plus') : icon"
+							:size="iconSize"
+							color="#FFFFFF"
+						/>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	placement: { type: String, default: 'bottom-right' }, // bottom-right | bottom-left | top-right | top-left
+	offset: { type: Array, default: () => [60, 40] },     // [bottom/top, right/left] rpx
+	icon: { type: String, default: 'plus' },             // 主图标
+	activeIcon: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 24 },
+	bgColor: { type: String, default: '' },
+	size: { type: [Number, String], default: 104 },      // 主按钮尺寸 (rpx)
+	autoClose: { type: Boolean, default: true },
+	mask: { type: Boolean, default: true },              // 是否开启展开遮罩
+	zIndex: { type: Number, default: 999 }
+})
+
+const emit = defineEmits(['click', 'item-click', 'open', 'close', 'change'])
+
+const isOpen = ref(false)
+
+const fabContainerStyle = computed(() => {
+	const [offsetV, offsetH] = props.offset || [60, 40]
+	const style = {
+		position: 'fixed',
+		zIndex: props.zIndex
+	}
+
+	if (props.placement.includes('bottom')) {
+		style.bottom = `calc(${offsetV}rpx + env(safe-area-inset-bottom))`
+	} else {
+		style.top = `calc(${offsetV}rpx + env(safe-area-inset-top))`
+	}
+
+	if (props.placement.includes('right')) {
+		style.right = `${offsetH}rpx`
+	} else {
+		style.left = `${offsetH}rpx`
+	}
+
+	return style
+})
+
+const mainBtnStyle = computed(() => {
+	const sz = typeof props.size === 'number' ? `${props.size}rpx` : props.size
+	const style = {
+		width: sz,
+		height: sz
+	}
+	if (props.bgColor) {
+		style.background = props.bgColor
+	}
+	return style
+})
+
+function handleClick() {
+	if (props.items.length) {
+		if (isOpen.value) close()
+		else open()
+	} else {
+		emit('click')
+	}
+}
+
+function open() {
+	isOpen.value = true
+	emit('open')
+	emit('change', true)
+}
+
+function close() {
+	isOpen.value = false
+	emit('close')
+	emit('change', false)
+}
+
+function handleItemClick(index, item) {
+	emit('item-click', { index, item })
+	if (props.autoClose) {
+		close()
+	}
+}
+
+defineExpose({ open, close, isOpen })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-fab-mask {
+	position: fixed;
+	inset: 0;
+	background: rgba(15, 23, 42, 0.45);
+	backdrop-filter: blur(6px);
+	animation: mu-fab-fade 0.2s ease;
+}
+
+.mu-fab {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	box-sizing: border-box;
+
+	&--bottom-right {
+		align-items: flex-end;
+	}
+
+	&--bottom-left {
+		align-items: flex-start;
+	}
+
+	&--top-right {
+		flex-direction: column-reverse;
+		align-items: flex-end;
+	}
+
+	&--top-left {
+		flex-direction: column-reverse;
+		align-items: flex-start;
+	}
+
+	&__main-btn {
+		border-radius: 50%;
+		background: #171717;
+		box-shadow: 0 12rpx 36rpx rgba(99, 102, 241, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+		box-sizing: border-box;
+
+		&:active {
+			transform: scale(0.92);
+		}
+
+		&--open {
+			background: linear-gradient(135deg, #1E293B, #0F172A);
+			box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.5);
+		}
+	}
+
+	&__icon-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+		&--rotate {
+			transform: rotate(135deg);
+		}
+	}
+
+	&__actions {
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
+		margin-bottom: 24rpx;
+		animation: mu-fab-slide 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+		&--top-right, &--top-left {
+			margin-bottom: 0;
+			margin-top: 24rpx;
+		}
+	}
+
+	&__action-item {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	&__action-text {
+		font-size: 24rpx;
+		font-weight: 700;
+		color: #0F172A;
+		margin-right: 16rpx;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		padding: 8rpx 20rpx;
+		border-radius: 999rpx;
+		box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.1);
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		white-space: nowrap;
+	}
+
+	&__action-btn {
+		width: 84rpx;
+		height: 84rpx;
+		border-radius: 50%;
+		background: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.12);
+		border: 1rpx solid rgba(226, 232, 240, 0.9);
+		box-sizing: border-box;
+	}
+
+	&__action-label {
+		font-size: 24rpx;
+		color: #0F172A;
+		font-weight: 800;
+	}
+}
+
+@keyframes mu-fab-fade {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes mu-fab-slide {
+	from {
+		opacity: 0;
+		transform: translateY(30rpx) scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-fab {
+		&__action-text {
+			background: $mu-dark-bg-base;
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__action-btn {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__action-label { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-fab {
+		&__action-text {
+			background: $mu-dark-bg-base;
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__action-btn {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__action-label { color: $mu-dark-text-primary; }
+	}
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+	<view class="mu-footer" :style="{ padding }">
+		<slot>
+			<text class="mu-footer__text">{{ text }}</text>
+		</slot>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	text: { type: String, default: '' },
+	padding: { type: String, default: '40rpx 0' }
+})
+</script>
+
+<style lang="scss" scoped>
+.mu-footer {
+	display: flex; align-items: center; justify-content: center; flex-direction: column;
+	&__text { font-size: $mu-font-xs; color: $mu-text-tertiary; text-align: center; line-height: $mu-line-height; }
+}
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+	<view class="mu-form" :class="[`mu-form--label-${labelPosition}`, inline && 'mu-form--inline']">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+import { provide, computed, reactive, watch } from 'vue'
+
+const props = defineProps({
+	model: { type: Object, default: () => ({}) },
+	rules: { type: Object, default: () => ({}) },
+	labelWidth: { type: String, default: '160rpx' },
+	labelPosition: { type: String, default: 'left' },     // left | top
+	inline: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	showMessage: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['validate'])
+
+// 响应式向下注入表单配置
+const formState = reactive({
+	model: computed(() => props.model),
+	rules: computed(() => props.rules),
+	labelWidth: computed(() => props.labelWidth),
+	labelPosition: computed(() => props.labelPosition),
+	disabled: computed(() => props.disabled)
+})
+
+provide('muForm', formState)
+provide('mu-form', formState) // 兼容性 key
+
+/**
+ * 内置常用校验器
+ */
+const BUILTIN_PATTERNS = {
+	phone: /^1[3-9]\d{9}$/,
+	email: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+	idcard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+	url: /^https?:\/\/.+/
+}
+
+/**
+ * 校验单个字段
+ */
+function validateField(field) {
+	const value = props.model[field]
+	const ruleArr = props.rules[field]
+	if (!ruleArr) return { isValid: true, error: null }
+
+	const rules = Array.isArray(ruleArr) ? ruleArr : [ruleArr]
+
+	for (const rule of rules) {
+		// 1. required 必填校验
+		if (rule.required && (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0))) {
+			return { isValid: false, error: { field, message: rule.message || `${field}不能为空` } }
+		}
+
+		// 如果未填且非必填，跳过后续格式校验
+		if (!rule.required && (value === undefined || value === null || value === '')) {
+			continue
+		}
+
+		// 2. type 内置类型正则 (phone | email | idcard | url)
+		if (rule.type && BUILTIN_PATTERNS[rule.type]) {
+			if (!BUILTIN_PATTERNS[rule.type].test(String(value))) {
+				return { isValid: false, error: { field, message: rule.message || `${field}格式不正确` } }
+			}
+		}
+
+		// 3. pattern 自定义正则表达式
+		if (rule.pattern && rule.pattern instanceof RegExp) {
+			if (!rule.pattern.test(String(value))) {
+				return { isValid: false, error: { field, message: rule.message || `${field}格式不符合要求` } }
+			}
+		}
+
+		// 4. min / max 长度或数值校验
+		if (rule.min !== undefined && String(value).length < rule.min) {
+			return { isValid: false, error: { field, message: rule.message || `${field}长度不能少于${rule.min}位` } }
+		}
+		if (rule.max !== undefined && String(value).length > rule.max) {
+			return { isValid: false, error: { field, message: rule.message || `${field}长度不能超过${rule.max}位` } }
+		}
+
+		// 5. validator 自定义函数校验
+		if (rule.validator && typeof rule.validator === 'function') {
+			const result = rule.validator(value, props.model)
+			if (result !== true && typeof result === 'string') {
+				return { isValid: false, error: { field, message: result } }
+			} else if (result === false) {
+				return { isValid: false, error: { field, message: rule.message || `${field}校验不通过` } }
+			}
+		}
+	}
+
+	return { isValid: true, error: null }
+}
+
+/**
+ * 校验全量表单 (支持 Promise / Callback 两种风格)
+ */
+function validate(callback) {
+	return new Promise((resolve) => {
+		const errors = []
+
+		for (const field of Object.keys(props.rules)) {
+			const res = validateField(field)
+			if (!res.isValid && res.error) {
+				errors.push(res.error)
+			}
+		}
+
+		const isValid = errors.length === 0
+
+		// 弹出错误轻提示 Toast
+		if (props.showMessage && errors.length > 0) {
+			uni.showToast({ title: errors[0].message, icon: 'none' })
+		}
+
+		emit('validate', isValid, errors)
+
+		if (typeof callback === 'function') {
+			callback(isValid, errors)
+		}
+
+		resolve(isValid)
+	})
+}
+
+/**
+ * 重置表单模型
+ */
+function resetFields() {
+	for (const key of Object.keys(props.model)) {
+		const original = props.model[key]
+		if (Array.isArray(original)) {
+			props.model[key] = []
+		} else if (typeof original === 'number') {
+			props.model[key] = 0
+		} else if (typeof original === 'boolean') {
+			props.model[key] = false
+		} else {
+			props.model[key] = ''
+		}
+	}
+}
+
+defineExpose({
+	validate,
+	validateField,
+	resetFields
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-form {
+	width: 100%;
+
+	&--inline {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+		align-items: center;
+	}
+}
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+	<view
+		class="mu-grid"
+		:class="[
+			border && mode !== 'card' && 'mu-grid--border'
+		]"
+		:style="gridStyle"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+import { computed, provide } from 'vue'
+
+const props = defineProps({
+	columns: { type: [Number, String], default: 4 },      // 列数 (默认 4)
+	border: { type: Boolean, default: true },             // 是否显示分割线 (默认开启)
+	square: { type: Boolean, default: false },            // 是否正方形单格
+	gutter: { type: [Number, String], default: 0 },       // 格子间距 (rpx)
+	clickable: { type: Boolean, default: true },          // 是否开启点击反馈
+	background: { type: String, default: '' },
+	mode: { type: String, default: 'normal' }             // normal (普通) | card (Bento 悬浮卡片)
+})
+
+provide('muGrid', {
+	columns: computed(() => Number(props.columns) || 4),
+	border: computed(() => props.border),
+	square: computed(() => props.square),
+	gutter: computed(() => Number(props.gutter) || 0),
+	clickable: computed(() => props.clickable),
+	mode: computed(() => props.mode)
+})
+
+const gridStyle = computed(() => {
+	const style = {
+		display: 'flex',
+		flexWrap: 'wrap',
+		boxSizing: 'border-box'
+	}
+	const g = Number(props.gutter) || 0
+	if (g > 0) {
+		const halfG = g / 2
+		style.marginLeft = `-${halfG}rpx`
+		style.marginRight = `-${halfG}rpx`
+		style.width = 'auto'
+	} else {
+		style.width = '100%'
+		if (props.border && props.mode !== 'card') {
+			style.background = props.background || '#ffffff'
+		}
+	}
+
+	if (props.background && !style.background) {
+		style.background = props.background
+	}
+	return style
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-grid {
+	position: relative;
+	box-sizing: border-box;
+
+	&--border {
+		border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		border-left: 1rpx solid rgba(226, 232, 240, 0.8);
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-grid {
+		&--border {
+			border-top-color: rgba(255, 255, 255, 0.12);
+			border-left-color: rgba(255, 255, 255, 0.12);
+			background: $mu-dark-bg-base !important;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-grid {
+		&--border {
+			border-top-color: rgba(255, 255, 255, 0.12);
+			border-left-color: rgba(255, 255, 255, 0.12);
+			background: $mu-dark-bg-base !important;
+		}
+	}
+}
+</style>