muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-notice-bar/mu-notice-bar.vue

@@ -0,0 +1,284 @@
+<template>
+	<view
+		v-if="visible"
+		class="mu-notice-bar"
+		:class="[
+			`mu-notice-bar--${type}`,
+			round && 'mu-notice-bar--round'
+		]"
+		:style="customStyle"
+	>
+		<!-- 前缀图标 -->
+		<view v-if="icon !== 'none'" class="mu-notice-bar__icon">
+			<slot name="icon">
+				<mu-icon :name="icon || defaultIcon" :size="iconSize" :color="iconColorComputed" />
+			</slot>
+		</view>
+
+		<!-- 消息内容 -->
+		<view class="mu-notice-bar__content" :class="{ 'mu-notice-bar__content--scroll': scrollable }">
+			<text
+				class="mu-notice-bar__text"
+				:class="{ 'mu-notice-bar__text--scroll': scrollable }"
+				:style="textStyle"
+			>
+				{{ text }}
+			</text>
+		</view>
+
+		<!-- 右侧关闭按钮或 Slot -->
+		<view v-if="closable || $slots.action" class="mu-notice-bar__action">
+			<slot name="action">
+				<view v-if="closable" class="mu-notice-bar__close mu-touchable-flat" @tap="close">
+					<mu-icon name="close" :size="14" :color="iconColorComputed" />
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	text: { type: String, default: '' },
+	icon: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 16 },
+	type: { type: String, default: 'warning' },      // warning | primary | success | danger | info
+	closable: { type: Boolean, default: false },
+	scrollable: { type: Boolean, default: true },
+	round: { type: Boolean, default: false },
+	speed: { type: Number, default: 50 },             // 滚动速度 (px/s)
+	color: { type: String, default: '' },             // 自定义文字颜色
+	background: { type: String, default: '' }         // 自定义背景色
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(true)
+
+// 根据 type 计算默认图标
+const defaultIcon = computed(() => {
+	const map = {
+		warning: 'notification',
+		primary: 'sparkles',
+		success: 'check',
+		danger: 'info',
+		info: 'info'
+	}
+	return map[props.type] || 'notification'
+})
+
+// 图标及文字颜色控制
+const iconColorComputed = computed(() => {
+	if (props.color) return props.color
+	const colorMap = {
+		warning: '#D97706',
+		primary: '#4F46E5',
+		success: '#059669',
+		danger: '#DC2626',
+		info: '#475569'
+	}
+	return colorMap[props.type] || '#D97706'
+})
+
+const duration = computed(() => {
+	if (!props.text) return 10
+	return Math.max(5, Math.round((props.text.length * 14) / Math.max(props.speed, 1) * 10) / 10)
+})
+
+const customStyle = computed(() => {
+	const s = {}
+	if (props.background) s.background = props.background
+	if (props.color) s.color = props.color
+	return s
+})
+
+const textStyle = computed(() => {
+	const s = {}
+	if (props.color) s.color = props.color
+	if (props.scrollable) s.animationDuration = duration.value + 's'
+	return s
+})
+
+function close() {
+	visible.value = false
+	emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-notice-bar {
+	display: flex;
+	align-items: center;
+	padding: 14rpx 20rpx;
+	border-radius: 12rpx;
+	box-sizing: border-box;
+	min-height: 64rpx;
+	line-height: 1.3;
+	position: relative;
+	overflow: hidden;
+
+	&--round {
+		border-radius: 999rpx;
+	}
+
+	/* 主题变体 */
+	&--warning {
+		background: #FEF3C7;
+		border: 1rpx solid rgba(245, 158, 11, 0.3);
+		.mu-notice-bar__text { color: #D97706; }
+	}
+
+	&--primary {
+		background: #EEF2FF;
+		border: 1rpx solid rgba(99, 102, 241, 0.3);
+		.mu-notice-bar__text { color: #4F46E5; }
+	}
+
+	&--success {
+		background: #ECFDF5;
+		border: 1rpx solid rgba(16, 185, 129, 0.3);
+		.mu-notice-bar__text { color: #059669; }
+	}
+
+	&--danger {
+		background: #FEF2F2;
+		border: 1rpx solid rgba(244, 63, 94, 0.3);
+		.mu-notice-bar__text { color: #DC2626; }
+	}
+
+	&--info {
+		background: #F1F5F9;
+		border: 1rpx solid rgba(148, 163, 184, 0.3);
+		.mu-notice-bar__text { color: #475569; }
+	}
+
+	&__icon {
+		margin-right: 14rpx;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__content {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+
+		&--scroll {
+			mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
+		}
+	}
+
+	&__text {
+		font-size: 24rpx;
+		font-weight: 600;
+
+		&--scroll {
+			display: inline-block;
+			white-space: nowrap;
+			padding-left: 100%;
+			animation: mu-notice-scroll linear infinite;
+		}
+	}
+
+	&__action {
+		margin-left: 14rpx;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	&__close {
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.04);
+
+		&:active {
+			opacity: 0.7;
+		}
+	}
+}
+
+@keyframes mu-notice-scroll {
+	0% { transform: translateX(0); }
+	100% { transform: translateX(-100%); }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-notice-bar {
+		&--warning {
+			background: rgba(245, 158, 11, 0.15);
+			border-color: rgba(245, 158, 11, 0.3);
+			.mu-notice-bar__text { color: #FBBF24; }
+		}
+		&--primary {
+			background: rgba(99, 102, 241, 0.15);
+			border-color: rgba(99, 102, 241, 0.3);
+			.mu-notice-bar__text { color: #FFFFFF; }
+		}
+		&--success {
+			background: rgba(16, 185, 129, 0.15);
+			border-color: rgba(16, 185, 129, 0.3);
+			.mu-notice-bar__text { color: #34D399; }
+		}
+		&--danger {
+			background: rgba(244, 63, 94, 0.15);
+			border-color: rgba(244, 63, 94, 0.3);
+			.mu-notice-bar__text { color: #F87171; }
+		}
+		&--info {
+			background: rgba(148, 163, 184, 0.15);
+			border-color: rgba(148, 163, 184, 0.3);
+			.mu-notice-bar__text { color: #94A3B8; }
+		}
+		&__close {
+			background: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-notice-bar {
+		&--warning {
+			background: rgba(245, 158, 11, 0.15);
+			border-color: rgba(245, 158, 11, 0.3);
+			.mu-notice-bar__text { color: #FBBF24; }
+		}
+		&--primary {
+			background: rgba(99, 102, 241, 0.15);
+			border-color: rgba(99, 102, 241, 0.3);
+			.mu-notice-bar__text { color: #FFFFFF; }
+		}
+		&--success {
+			background: rgba(16, 185, 129, 0.15);
+			border-color: rgba(16, 185, 129, 0.3);
+			.mu-notice-bar__text { color: #34D399; }
+		}
+		&--danger {
+			background: rgba(244, 63, 94, 0.15);
+			border-color: rgba(244, 63, 94, 0.3);
+			.mu-notice-bar__text { color: #F87171; }
+		}
+		&--info {
+			background: rgba(148, 163, 184, 0.15);
+			border-color: rgba(148, 163, 184, 0.3);
+			.mu-notice-bar__text { color: #94A3B8; }
+		}
+		&__close {
+			background: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,202 @@
+<template>
+	<view
+		v-if="visible"
+		class="mu-notify"
+		:class="['mu-notify--' + currentType, 'mu-notify--' + currentPosition]"
+		:style="containerStyle"
+	>
+		<view class="mu-notify__content">
+			<view class="mu-notify__icon" v-if="hasIcon">
+				<mu-icon v-if="currentType === 'success'" name="check" :size="18" color="#ffffff" />
+				<mu-icon v-else-if="currentType === 'error'" name="close" :size="18" color="#ffffff" />
+				<mu-icon v-else-if="currentType === 'warning'" name="warning" :size="18" color="#ffffff" />
+				<mu-icon v-else-if="currentType === 'primary'" name="info" :size="18" color="#ffffff" />
+			</view>
+			<text class="mu-notify__text">{{ currentMessage }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-notify 消息通知组件
+ * @description 顶部或底部的全局消息通知，支持组件声明式使用与纯 JS 命令式 (mu.notify) 调用
+ */
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	type: { type: String, default: 'primary' }, // primary | success | warning | error
+	message: { type: String, default: '' },
+	position: { type: String, default: 'top' }, // top | bottom
+	duration: { type: Number, default: 3000 },
+	color: { type: String, default: '#ffffff' },
+	background: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:show', 'close', 'open'])
+
+const visible = ref(false)
+const currentMessage = ref('')
+const currentType = ref('primary')
+const currentPosition = ref('top')
+const currentDuration = ref(3000)
+const currentBackground = ref('')
+let timer = null
+
+const hasIcon = computed(() => ['primary', 'success', 'warning', 'error'].includes(currentType.value))
+
+const containerStyle = computed(() => {
+	const style = {}
+	if (currentBackground.value) style.background = currentBackground.value
+	return style
+})
+
+watch(() => props.show, (v) => {
+	if (v) {
+		show({
+			message: props.message,
+			type: props.type,
+			position: props.position,
+			duration: props.duration,
+			background: props.background
+		})
+	} else {
+		close()
+	}
+})
+
+
+
+function show(options) {
+	if (timer) {
+		clearTimeout(timer)
+		timer = null
+	}
+
+	// 快速连续触发时，先重置 visible 让 CSS 弹出动画重新播放，带来明显的连续响应体验
+	if (visible.value) {
+		visible.value = false
+		nextTick(() => {
+			applyAndShow(options)
+		})
+	} else {
+		applyAndShow(options)
+	}
+}
+
+function applyAndShow(options) {
+	if (typeof options === 'string') {
+		currentMessage.value = options
+		currentType.value = props.type || 'primary'
+		currentPosition.value = props.position || 'top'
+		currentDuration.value = props.duration || 3000
+		currentBackground.value = props.background || ''
+	} else if (options && typeof options === 'object') {
+		currentMessage.value = options.message || options.title || props.message || ''
+		currentType.value = options.type || props.type || 'primary'
+		currentPosition.value = options.position || props.position || 'top'
+		currentDuration.value = (options.duration !== undefined ? options.duration : (props.duration !== undefined ? props.duration : 3000))
+		currentBackground.value = options.background || props.background || ''
+	}
+
+	visible.value = true
+	emit('update:show', true)
+	emit('open')
+
+	if (currentDuration.value > 0) {
+		timer = setTimeout(() => { close() }, currentDuration.value)
+	}
+}
+
+function close() {
+	visible.value = false
+	emit('update:show', false)
+	emit('close')
+}
+
+// 注册全局 JS 事件总线
+onMounted(() => {
+	uni.$on('mu-notify-show', handleGlobalNotifyShow)
+	uni.$on('mu-notify-close', close)
+})
+
+onUnmounted(() => {
+	uni.$off('mu-notify-show', handleGlobalNotifyShow)
+	uni.$off('mu-notify-close', close)
+})
+
+function handleGlobalNotifyShow(options) {
+	show(options)
+}
+
+defineExpose({ show, open: show, close })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-notify {
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: $mu-z-toast;
+	padding: 24rpx 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 8rpx 32rpx rgba(15, 23, 42, 0.15);
+	animation: mu-notify-in 0.28s $mu-ease-spring;
+
+	&--top {
+		top: 0;
+		bottom: auto;
+	}
+
+	&--bottom {
+		top: auto;
+		bottom: 0;
+		padding-top: 20rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		animation-name: mu-notify-in-bottom;
+	}
+
+	&--primary { background: $mu-primary; }
+	&--success { background: $mu-success; }
+	&--warning { background: $mu-warning; }
+	&--error { background: $mu-error; }
+
+	&__content {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__icon {
+		margin-right: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__text {
+		color: #ffffff;
+		font-size: 28rpx;
+		font-weight: 600;
+		line-height: 1.4;
+		text-align: center;
+		word-break: break-all;
+	}
+}
+
+@keyframes mu-notify-in {
+	from { transform: translateY(-100%); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes mu-notify-in-bottom {
+	from { transform: translateY(100%); opacity: 0; }
+	to { transform: translateY(0); opacity: 1; }
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+	<view
+		v-if="visible"
+		class="mu-overlay"
+		:class="[animating && 'mu-overlay--show']"
+		:style="overlayStyle"
+		@tap="handleClick"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	zIndex: { type: [Number, String], default: 999 },
+	color: { type: String, default: 'rgba(15, 23, 42, 0.55)' },
+	blur: { type: [Number, String], default: 12 },             // 毛玻璃模糊度 (px)
+	transparent: { type: Boolean, default: false },           // 完全透明遮罩
+	duration: { type: Number, default: 300 },
+	closeable: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:show', 'click', 'close'])
+
+const visible = ref(false)
+const animating = ref(false)
+
+const overlayStyle = computed(() => {
+	const style = {
+		zIndex: props.zIndex,
+		transitionDuration: `${props.duration}ms`
+	}
+
+	if (props.transparent) {
+		style.background = 'transparent'
+		style.backdropFilter = 'none'
+	} else {
+		style.background = props.color
+		if (props.blur) {
+			const blurPx = typeof props.blur === 'number' ? `${props.blur}px` : props.blur
+			style.backdropFilter = `blur(${blurPx})`
+		}
+	}
+
+	return style
+})
+
+function handleClick(e) {
+	emit('click', e)
+	if (props.closeable) {
+		animating.value = false
+		emit('update:show', false)
+		setTimeout(() => {
+			visible.value = false
+			emit('close')
+		}, props.duration)
+	}
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		setTimeout(() => {
+			animating.value = true
+		}, 30)
+	} else {
+		animating.value = false
+		setTimeout(() => {
+			visible.value = false
+		}, props.duration)
+	}
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-overlay {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+
+	&--show {
+		opacity: 1;
+	}
+}
+</style>