muzhiyu-ui 1.0.0

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

@@ -0,0 +1,220 @@
+<template>
+	<!-- MuZhiYu Flat Alert Component -->
+	<view v-if="visible" class="mu-alert" :class="alertClass" :style="alertStyle">
+		<!-- 纯粹高清矢量 SVG 图标 -->
+		<view v-if="showIcon" class="mu-alert__icon">
+			<slot name="icon">
+				<mu-icon :name="computedIconName" :size="20" :color="iconColor" />
+			</slot>
+		</view>
+
+		<!-- 文本主体 -->
+		<view class="mu-alert__body">
+			<text v-if="title" class="mu-alert__title">{{ title }}</text>
+			<text class="mu-alert__desc"><slot>{{ description }}</slot></text>
+		</view>
+
+		<!-- 矢量 SVG 关闭按钮 -->
+		<view v-if="closable" class="mu-alert__close mu-touchable-flat" @tap="handleClose">
+			<mu-icon name="close" :size="14" color="currentColor" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	type: { type: String, default: 'info' },      // info | success | warning | error
+	variant: { type: String, default: 'glass' },  // glass | filled | plain
+	icon: { type: String, default: '' },         // 自定义矢量图标名称
+	title: { type: String, default: '' },
+	description: { type: String, default: '' },
+	closable: { type: Boolean, default: false },
+	showIcon: { type: Boolean, default: true },
+	margin: { type: String, default: '' },
+	round: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(true)
+
+const computedIconName = computed(() => {
+	if (props.icon) return props.icon
+	const map = {
+		info: 'info',
+		success: 'success',
+		warning: 'warning',
+		error: 'error'
+	}
+	return map[props.type] || 'info'
+})
+
+const alertClass = computed(() => [
+	`mu-alert--${props.type}`,
+	`mu-alert--${props.variant}`,
+	props.round && 'mu-alert--round'
+])
+
+const alertStyle = computed(() => ({
+	margin: props.margin || ''
+}))
+
+const iconColor = computed(() => {
+	if (props.variant === 'filled') return '#ffffff'
+	const map = {
+		info: '#0284C7',
+		success: '#059669',
+		warning: '#D97706',
+		error: '#E11D48'
+	}
+	return map[props.type] || '#171717'
+})
+
+function handleClose() {
+	visible.value = false
+	emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-alert {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	padding: $mu-space-4 $mu-space-5;
+	border-radius: $mu-radius-xl;
+	border: 1rpx solid transparent;
+	overflow: hidden;
+	box-shadow: none;
+	transition: all $mu-duration $mu-ease;
+
+	&--round {
+		border-radius: $mu-radius-full;
+	}
+
+	&__icon {
+		margin-right: $mu-space-3;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+		margin-top: 4rpx;
+		flex-shrink: 0;
+	}
+
+	&__body {
+		flex: 1;
+	}
+
+	&__title {
+		font-size: $mu-font-base;
+		font-weight: 800;
+		color: $mu-text-primary;
+		display: block;
+		margin-bottom: 4rpx;
+		letter-spacing: -0.3rpx;
+		line-height: 1.4;
+	}
+
+	&__desc {
+		font-size: $mu-font-sm;
+		color: $mu-text-secondary;
+		line-height: 1.5;
+		font-weight: 500;
+	}
+
+	&__close {
+		margin-left: $mu-space-3;
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		background: rgba(15, 23, 42, 0.05);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		margin-top: 4rpx;
+		color: $mu-text-secondary;
+		flex-shrink: 0;
+	}
+
+	/* ===== 1. Glass 极简纯色扁平样式 ===== */
+	&--info#{&}--glass {
+		background: rgba(56, 189, 248, 0.08);
+		border-color: rgba(56, 189, 248, 0.22);
+	}
+
+	&--success#{&}--glass {
+		background: rgba(16, 185, 129, 0.08);
+		border-color: rgba(16, 185, 129, 0.22);
+	}
+
+	&--warning#{&}--glass {
+		background: rgba(245, 158, 11, 0.08);
+		border-color: rgba(245, 158, 11, 0.22);
+	}
+
+	&--error#{&}--glass {
+		background: rgba(244, 63, 94, 0.08);
+		border-color: rgba(244, 63, 94, 0.22);
+	}
+
+	/* ===== 2. Filled 饱满纯色填充样式 (无对角渐变色差线) ===== */
+	&--info#{&}--filled {
+		background: #0284C7;
+		color: #ffffff;
+		border-color: #0284C7;
+		.mu-alert__title, .mu-alert__desc { color: #ffffff; }
+		.mu-alert__close { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
+	}
+	&--success#{&}--filled {
+		background: #059669;
+		color: #ffffff;
+		border-color: #059669;
+		.mu-alert__title, .mu-alert__desc { color: #ffffff; }
+		.mu-alert__close { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
+	}
+	&--warning#{&}--filled {
+		background: #D97706;
+		color: #ffffff;
+		border-color: #D97706;
+		.mu-alert__title, .mu-alert__desc { color: #ffffff; }
+		.mu-alert__close { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
+	}
+	&--error#{&}--filled {
+		background: #E11D48;
+		color: #ffffff;
+		border-color: #E11D48;
+		.mu-alert__title, .mu-alert__desc { color: #ffffff; }
+		.mu-alert__close { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-alert {
+		&--glass {
+			background: rgba(255, 255, 255, 0.04) !important;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__close { background: rgba(255, 255, 255, 0.1); color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-alert {
+		&--glass {
+			background: rgba(255, 255, 255, 0.04) !important;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__close { background: rgba(255, 255, 255, 0.1); color: $mu-dark-text-secondary; }
+	}
+}
+</style>

package/components/muzhiyu/mu-back-top/mu-back-top.vue

@@ -0,0 +1,161 @@
+<template>
+	<view v-show="show" class="mu-back-top" :style="positionStyle" @tap="handleClick">
+		<slot>
+			<view class="mu-back-top__inner" :style="{ background }">
+				<mu-icon :name="icon" :size="iconSize" :color="iconColor || '#171717'" />
+				<text v-if="text" class="mu-back-top__text" :style="{ color: textColor }">{{ text }}</text>
+			</view>
+		</slot>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-back-top 返回顶部
+ * @description 页面滑动时出现的悬浮返回顶部按钮
+ * @property {string} icon - 矢量图标名称 (默认 'arrow-up' 或 'chevron-up')
+ * @property {number|string} iconSize - 图标尺寸 (默认 22)
+ * @property {string} iconColor - 图标颜色
+ * @property {string} text - 辅助说明文本 (如 'TOP' 或 '顶部')
+ * @property {string} textColor - 文本色彩
+ * @property {string} background - 按钮背景色
+ * @property {number|string} bottom - 距离底部距离 rpx
+ * @property {number|string} right - 距离右侧距离 rpx
+ * @property {number} threshold - 触发显示的滚动高度 threshold (px)
+ * @property {number} duration - 滚动动画时长 ms
+ * @event {Function} click - 点击时触发
+ */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	text: { type: String, default: '' },
+	icon: { type: String, default: 'arrow-up' },
+	iconSize: { type: [Number, String], default: 22 },
+	iconColor: { type: String, default: '' },
+	textColor: { type: String, default: '' },
+	background: { type: String, default: '' },
+	bottom: { type: [Number, String], default: 120 },
+	right: { type: [Number, String], default: 40 },
+	threshold: { type: Number, default: 150 },
+	duration: { type: Number, default: 300 }
+})
+
+const emit = defineEmits(['click'])
+const show = ref(false)
+
+function formatPosUnit(val, defaultVal = '120rpx') {
+	if (typeof val === 'number') return `${val}rpx`
+	if (typeof val === 'string') {
+		if (val.endsWith('rpx') || val.endsWith('px')) return val
+		return `${val}rpx`
+	}
+	return defaultVal
+}
+
+const positionStyle = computed(() => ({
+	bottom: formatPosUnit(props.bottom, '120rpx'),
+	right: formatPosUnit(props.right, '40rpx')
+}))
+
+function onPageScroll(e) {
+	show.value = e.scrollTop >= props.threshold
+}
+
+function handleClick() {
+	uni.pageScrollTo({ scrollTop: 0, duration: props.duration })
+	emit('click')
+}
+
+// 页面滚动监听
+let pageObserver = null
+onMounted(() => {
+	// #ifdef H5
+	const handler = () => {
+		const st = document.documentElement.scrollTop || document.body.scrollTop
+		show.value = st >= props.threshold
+	}
+	window.addEventListener('scroll', handler, { passive: true })
+	pageObserver = { disconnect: () => window.removeEventListener('scroll', handler) }
+	// #endif
+})
+
+onUnmounted(() => {
+	if (pageObserver) pageObserver.disconnect()
+})
+
+defineExpose({ onPageScroll })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-back-top {
+	position: fixed;
+	z-index: $mu-z-fixed;
+	animation: mu-back-top-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+	cursor: pointer;
+
+	&__inner {
+		width: 88rpx;
+		height: 88rpx;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.92);
+		backdrop-filter: blur(20px);
+		box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.12);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+		transition: all 0.2s ease;
+
+		&:active {
+			transform: scale(0.92);
+			background: #F1F5F9;
+		}
+	}
+
+	&__text {
+		font-size: 18rpx;
+		color: #64748B;
+		font-weight: 700;
+		margin-top: 2rpx;
+		line-height: 1;
+	}
+}
+
+@keyframes mu-back-top-in {
+	from {
+		opacity: 0;
+		transform: translateY(20rpx) scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-back-top {
+		&__inner {
+			background: rgba(24, 24, 36, 0.95) !important;
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.6);
+		}
+		&__text { color: #94A3B8; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-back-top {
+		&__inner {
+			background: rgba(24, 24, 36, 0.95) !important;
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.6);
+		}
+		&__text { color: #94A3B8; }
+	}
+}
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+	<view class="mu-badge" :style="wrapStyle">
+		<slot></slot>
+		<view v-if="showBadge" class="mu-badge__dot" :class="dotClass" :style="dotStyle">
+			<text v-if="!actualIsDot" class="mu-badge__text">{{ displayCount }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	count: { type: [Number, String], default: 0 },
+	content: { type: [Number, String], default: '' },
+	max: { type: Number, default: 99 },
+	isDot: { type: Boolean, default: false },
+	dot: { type: Boolean, default: false },
+	hidden: { type: Boolean, default: false },
+	type: { type: String, default: 'error' },
+	background: { type: String, default: '' },
+	color: { type: String, default: '' },
+	offset: { type: Array, default: () => [0, 0] }
+})
+
+const actualCount = computed(() => {
+	if (props.content !== '' && props.content !== null && props.content !== undefined) return props.content
+	return props.count
+})
+
+const actualIsDot = computed(() => props.isDot || props.dot)
+
+const showBadge = computed(() => !props.hidden && (actualIsDot.value || (actualCount.value !== '' && actualCount.value !== null && actualCount.value !== undefined && actualCount.value !== 0 && actualCount.value !== '0')))
+
+const displayCount = computed(() => {
+	const c = actualCount.value
+	if (typeof c === 'number' && c > props.max) {
+		return `${props.max}+`
+	}
+	return c
+})
+
+const dotClass = computed(() => [
+	`mu-badge__dot--${props.type}`,
+	actualIsDot.value && 'mu-badge__dot--point'
+])
+
+const wrapStyle = computed(() => ({
+	position: 'relative',
+	display: 'inline-flex'
+}))
+
+const dotStyle = computed(() => {
+	const style = {
+		background: props.background || '',
+		color: props.color || ''
+	}
+	if (props.offset && props.offset.length === 2) {
+		if (props.offset[0]) style.top = `${-props.offset[0]}rpx`
+		if (props.offset[1]) style.right = `${-props.offset[1]}rpx`
+	}
+	return style
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-badge {
+	position: relative;
+	display: inline-flex;
+	vertical-align: middle;
+
+	&__dot {
+		position: absolute;
+		top: 0;
+		right: 0;
+		transform: translate(50%, -50%);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 28rpx;
+		min-width: 36rpx;
+		padding: 0 10rpx;
+		border-radius: 999rpx;
+		z-index: 10;
+		border: 2rpx solid #ffffff;
+		box-sizing: border-box;
+		white-space: nowrap;
+		text-align: center;
+
+		&--error {
+			background: #F43F5E;
+			box-shadow: 0 2rpx 8rpx rgba(244, 63, 94, 0.35);
+		}
+		&--warning {
+			background: #F59E0B;
+			box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.35);
+		}
+		&--success {
+			background: #10B981;
+			box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.35);
+		}
+		&--primary {
+			background: #171717;
+			box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.35);
+		}
+
+		&--point {
+			width: 14rpx;
+			min-width: 14rpx;
+			height: 14rpx;
+			padding: 0;
+			border-radius: 50%;
+		}
+	}
+
+	&__text {
+		font-size: 18rpx;
+		color: #ffffff;
+		font-weight: 800;
+		line-height: 24rpx;
+		height: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		padding: 0;
+		margin: 0;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-badge {
+		&__dot {
+			border-color: $mu-dark-bg-base;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-badge {
+		&__dot {
+			border-color: $mu-dark-bg-base;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+	<view class="mu-barcode" :style="{ width: width + 'px', height: height + 'px' }">
+		<canvas :canvas-id="canvasId" :id="canvasId" class="mu-barcode__canvas"
+			:style="{ width: width + 'px', height: height + 'px' }" />
+	</view>
+</template>
+
+<script setup>
+import { onMounted, watch, getCurrentInstance } from 'vue'
+const props = defineProps({
+	value: { type: String, default: '' },
+	width: { type: Number, default: 300 },
+	height: { type: Number, default: 80 },
+	foreground: { type: String, default: '#000000' },
+	background: { type: String, default: '#ffffff' },
+	showText: { type: Boolean, default: true },
+	fontSize: { type: Number, default: 12 }
+})
+const canvasId = 'mu-bar-' + Math.random().toString(36).slice(2, 8)
+const instance = getCurrentInstance()
+// Code128B encoding table
+const CODE128B = {
+	' ': 0, '!': 1, '"': 2, '#': 3, '$': 4, '%': 5, '&': 6, "'": 7,
+	'(': 8, ')': 9, '*': 10, '+': 11, ',': 12, '-': 13, '.': 14, '/': 15,
+	'0': 16, '1': 17, '2': 18, '3': 19, '4': 20, '5': 21, '6': 22, '7': 23,
+	'8': 24, '9': 25, ':': 26, ';': 27, '<': 28, '=': 29, '>': 30, '?': 31,
+	'@': 32, 'A': 33, 'B': 34, 'C': 35, 'D': 36, 'E': 37, 'F': 38, 'G': 39,
+	'H': 40, 'I': 41, 'J': 42, 'K': 43, 'L': 44, 'M': 45, 'N': 46, 'O': 47,
+	'P': 48, 'Q': 49, 'R': 50, 'S': 51, 'T': 52, 'U': 53, 'V': 54, 'W': 55,
+	'X': 56, 'Y': 57, 'Z': 58, '[': 59, '\\': 60, ']': 61, '^': 62, '_': 63,
+	'`': 64, 'a': 65, 'b': 66, 'c': 67, 'd': 68, 'e': 69, 'f': 70, 'g': 71,
+	'h': 72, 'i': 73, 'j': 74, 'k': 75, 'l': 76, 'm': 77, 'n': 78, 'o': 79,
+	'p': 80, 'q': 81, 'r': 82, 's': 83, 't': 84, 'u': 85, 'v': 86, 'w': 87,
+	'x': 88, 'y': 89, 'z': 90, '{': 91, '|': 92, '}': 93, '~': 94
+}
+const PATTERNS = [
+	'11011001100', '11001101100', '11001100110', '10010011000', '10010001100',
+	'10001001100', '10011001000', '10011000100', '10001100100', '11001001000',
+	'11001000100', '11000100100', '10110011100', '10011011100', '10011001110',
+	'10111001100', '10011101100', '10011100110', '11001110010', '11001011100',
+	'11001001110', '11011100100', '11001110100', '11101101110', '11101001100',
+	'11100101100', '11100100110', '11101100100', '11100110100', '11100110010',
+	'11011011000', '11011000110', '11000110110', '10100011000', '10001011000',
+	'10001000110', '10110001000', '10001101000', '10001100010', '11010001000',
+	'11000101000', '11000100010', '10110111000', '10110001110', '10001101110',
+	'10111011000', '10111000110', '10001110110', '11101110110', '11010001110',
+	'11000101110', '11011101000', '11011100010', '11011101110', '11101011000',
+	'11101000110', '11100010110', '11101101000', '11101100010', '11100011010',
+	'11101111010', '11001000010', '11110001010', '10100110000', '10100001100',
+	'10010110000', '10010000110', '10000101100', '10000100110', '10110010000',
+	'10110000100', '10011010000', '10011000010', '10000110100', '10000110010',
+	'11000010010', '11001010000', '11110111010', '11000010100', '10001111010',
+	'10100111100', '10010111100', '10010011110', '10111100100', '10011110100',
+	'10011110010', '11110100100', '11110010100', '11110010010', '11011011110',
+	'11011110110', '11110110110', '10101111000', '10100011110', '10001011110',
+	'10111101000', '10111100010', '11110101000', '11110100010', '10111011110',
+	'10111101110', '11101011110', '11110101110', '11010000100', '11010010000',
+	'11010011100', '1100011101011'
+]
+function generate() {
+	if (!props.value) return
+	const ctx = uni.createCanvasContext(canvasId, (instance && instance.proxy))
+	const text = props.value
+	const codes = [104] // Start Code B
+	let checksum = 104
+	for (let i = 0; i < text.length; i++) {
+		const code = (CODE128B[text[i]] !== undefined ? CODE128B[text[i]] : 0)
+		codes.push(code)
+		checksum += code * (i + 1)
+	}
+	codes.push(checksum % 103)
+	codes.push(106) // Stop
+	const binary = codes.map(c => PATTERNS[c]).join('')
+	const barWidth = props.width / binary.length
+	const barHeight = props.showText ? props.height - props.fontSize - 4 : props.height
+	ctx.setFillStyle(props.background)
+	ctx.fillRect(0, 0, props.width, props.height)
+	ctx.setFillStyle(props.foreground)
+	for (let i = 0; i < binary.length; i++) {
+		if (binary[i] === '1') {
+			ctx.fillRect(i * barWidth, 0, barWidth, barHeight)
+		}
+	}
+	if (props.showText) {
+		ctx.setFontSize(props.fontSize)
+		ctx.setFillStyle(props.foreground)
+		ctx.setTextAlign('center')
+		ctx.fillText(text, props.width / 2, props.height - 2)
+	}
+	ctx.draw()
+}
+onMounted(() => generate())
+watch(() => props.value, () => generate())
+</script>
+
+<style lang="scss" scoped>
+.mu-barcode {
+	&__canvas { display: block; }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+	<view class="mu-blank" :style="blankStyle">
+		<view class="mu-blank__content"><slot></slot></view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+	width: { type: [Number, String], default: 32 }, // 两侧留白 rpx
+	background: { type: String, default: '' }
+})
+const formattedPadding = computed(() => {
+	if (typeof props.width === 'number') return `${props.width}rpx`
+	if (typeof props.width === 'string') {
+		if (props.width.endsWith('rpx') || props.width.endsWith('px')) return props.width
+		return `${props.width}rpx`
+	}
+	return '32rpx'
+})
+const blankStyle = computed(() => ({
+	paddingLeft: formattedPadding.value,
+	paddingRight: formattedPadding.value,
+	background: props.background || ''
+}))
+</script>
+
+<style lang="scss" scoped>
+.mu-blank { box-sizing: border-box; width: 100%; }
+</style>