muzhiyu-ui 1.0.0

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

@@ -0,0 +1,298 @@
+<template>
+	<view v-if="visible" class="mu-modal" :class="{ 'mu-modal--visible': visible, 'mu-modal--no-mask': !mask }" @tap="onMaskTap">
+		<!-- 全屏半透明模糊遮罩 -->
+		<view v-if="mask" class="mu-modal__mask"></view>
+		
+		<!-- 中央对话框容器 -->
+		<view class="mu-modal__body" :class="[`mu-modal--${size}`]" @tap.stop>
+			<!-- 可选右上角关闭图标 (主要用于无底部按钮弹窗) -->
+			<view v-if="closable" class="mu-modal__close-btn mu-touchable-flat" @tap="handleCancel">
+				<mu-icon name="close" :size="16" color="currentColor" />
+			</view>
+
+			<view v-if="title" class="mu-modal__header">
+				<text class="mu-modal__title">{{ title }}</text>
+			</view>
+			<view class="mu-modal__content">
+				<slot>
+					<text class="mu-modal__text">{{ content }}</text>
+				</slot>
+			</view>
+			
+			<!-- 底部按钮区 (支持双按键、单确定、单取消、无按键) -->
+			<view v-if="showFooter && (showCancel || showConfirm)" class="mu-modal__footer">
+				<view
+					v-if="showCancel"
+					class="mu-modal__btn mu-modal__btn--cancel"
+					:class="{ 'mu-modal__btn--single': !showConfirm }"
+					:style="{ color: cancelColor || '' }"
+					@tap="handleCancel"
+				>
+					<text>{{ cancelText }}</text>
+				</view>
+				<view
+					v-if="showConfirm"
+					class="mu-modal__btn mu-modal__btn--confirm"
+					:class="{ 'mu-modal__btn--single': !showCancel }"
+					:style="{ color: confirmColor || '#171717' }"
+					@tap="handleConfirm"
+				>
+					<text>{{ confirmText }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-modal 对话框
+ * @description 弹出式确认/提示对话框组件，支持黑金高定主题、定制按钮颜色与自定义插槽
+ * @property {boolean} show - 是否显示对话框
+ * @property {string} title - 弹窗标题
+ * @property {string} content - 提示内容文本
+ * @property {boolean} mask - 是否显示背板遮罩
+ * @property {boolean} showCancel - 是否显示取消按钮
+ * @property {boolean} showConfirm - 是否显示确认按钮
+ * @property {string} cancelText - 取消按钮文字
+ * @property {string} confirmText - 确认按钮文字
+ * @property {string} cancelColor - 取消按钮颜色
+ * @property {string} confirmColor - 确认按钮颜色 (如危险红色 '#F43F5E')
+ * @property {boolean} showFooter - 是否显示底部按钮栏
+ * @property {boolean} closable - 是否显示右上角关闭图标
+ * @property {boolean} maskClosable - 点击遮罩层是否自动关闭
+ * @property {string} size - 弹窗尺寸 ('small' | 'medium' | 'large')
+ * @event {Function} cancel - 点击取消按钮时触发
+ * @event {Function} confirm - 点击确认按钮时触发
+ */
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	title: { type: String, default: '' },
+	content: { type: String, default: '' },
+	mask: { type: Boolean, default: true },
+	showCancel: { type: Boolean, default: true },
+	showConfirm: { type: Boolean, default: true },
+	cancelText: { type: String, default: '取消' },
+	confirmText: { type: String, default: '确定' },
+	cancelColor: { type: String, default: '' },
+	confirmColor: { type: String, default: '' },
+	showFooter: { type: Boolean, default: true },
+	closable: { type: Boolean, default: false },
+	maskClosable: { type: Boolean, default: false },
+	size: { type: String, default: 'medium' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'update:show'])
+
+const visible = ref(props.show)
+
+watch(() => props.show, (val) => { visible.value = val })
+watch(visible, (val) => { emit('update:show', val) })
+
+function handleCancel() { emit('cancel'); visible.value = false }
+function handleConfirm() { emit('confirm'); visible.value = false }
+function onMaskTap() { if (props.mask && props.maskClosable) visible.value = false }
+
+defineExpose({
+	show: () => { visible.value = true },
+	close: () => { visible.value = false }
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: $mu-z-modal;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	visibility: hidden;
+	transition: all $mu-duration-slow $mu-ease;
+
+	&--visible {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&--no-mask {
+		pointer-events: none;
+	}
+
+	&__mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(15, 23, 42, 0.65);
+		backdrop-filter: blur(16px);
+	}
+
+	&__body {
+		position: relative;
+		z-index: 10;
+		pointer-events: auto;
+		background: #FFFFFF;
+		border-radius: $mu-radius-2xl;
+		overflow: hidden;
+		animation: mu-modal-spring 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		width: 620rpx;
+		border: 1rpx solid rgba(255, 255, 255, 0.12);
+		box-shadow: 0 32rpx 64rpx -12rpx rgba(15, 23, 42, 0.3);
+		backdrop-filter: blur(24px);
+
+		&.mu-modal--small { width: 500rpx; }
+		&.mu-modal--large { width: 720rpx; }
+	}
+
+	&__close-btn {
+		position: absolute;
+		top: 24rpx;
+		right: 24rpx;
+		width: 48rpx;
+		height: 48rpx;
+		border-radius: 50%;
+		background: rgba(15, 23, 42, 0.05);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		z-index: 20;
+		color: $mu-text-tertiary;
+	}
+
+	&__header {
+		padding: 44rpx 40rpx 16rpx;
+		text-align: center;
+	}
+
+	&__title {
+		font-size: 34rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+		letter-spacing: -0.5rpx;
+	}
+
+	&__content {
+		padding: 24rpx 40rpx 40rpx;
+		min-height: 100rpx;
+		text-align: center;
+	}
+
+	&__text {
+		font-size: 28rpx;
+		color: $mu-text-secondary;
+		line-height: 1.6;
+		font-weight: 500;
+	}
+
+	&__footer {
+		display: flex;
+		border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		background: rgba(248, 250, 252, 0.5);
+	}
+
+	&__btn {
+		flex: 1;
+		height: 96rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 30rpx;
+		font-weight: 700;
+		cursor: pointer;
+		transition: background 0.2s ease;
+
+		&:active {
+			background: rgba(241, 245, 249, 0.9);
+		}
+
+		&--cancel {
+			color: $mu-text-secondary;
+			border-right: 1rpx solid rgba(226, 232, 240, 0.8);
+		}
+
+		&--confirm {
+			color: #171717;
+		}
+
+		&--single {
+			border-right: none !important;
+		}
+	}
+}
+
+@keyframes mu-modal-spring {
+	0% { opacity: 0; transform: scale(0.88) translateY(20rpx); }
+	100% { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-modal {
+		&__body {
+			background: rgba(18, 18, 24, 0.92);
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.5);
+		}
+		&__close-btn {
+			background: rgba(255, 255, 255, 0.1);
+			color: $mu-dark-text-secondary;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__text { color: $mu-dark-text-secondary; }
+		&__footer {
+			border-top-color: rgba(255, 255, 255, 0.08);
+			background: rgba(255, 255, 255, 0.02);
+		}
+		&__btn--cancel {
+			color: $mu-dark-text-secondary;
+			border-right-color: rgba(255, 255, 255, 0.08);
+		}
+		&__btn--confirm {
+			color: #FFFFFF !important;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-modal {
+		&__body {
+			background: rgba(18, 18, 24, 0.92);
+			border-color: rgba(255, 255, 255, 0.12);
+			box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.5);
+		}
+		&__close-btn {
+			background: rgba(255, 255, 255, 0.1);
+			color: $mu-dark-text-secondary;
+		}
+		&__title { color: $mu-dark-text-primary; }
+		&__text { color: $mu-dark-text-secondary; }
+		&__footer {
+			border-top-color: rgba(255, 255, 255, 0.08);
+			background: rgba(255, 255, 255, 0.02);
+		}
+		&__btn--cancel {
+			color: $mu-dark-text-secondary;
+			border-right-color: rgba(255, 255, 255, 0.08);
+		}
+		&__btn--confirm {
+			color: #FFFFFF !important;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,223 @@
+<template>
+	<view class="mu-navbar" :class="{ 'mu-navbar--fixed': fixed, 'mu-navbar--transparent': transparent }" :style="navbarStyle">
+		<!-- 1. 系统状态栏动态占位 Height (iPhone 刘海/灵动岛/Android 动态状态栏) -->
+		<view class="mu-navbar__status" :style="{ height: statusBarHeight + 'px' }"></view>
+
+		<!-- 2. 导航栏核心内容 Header Content (微信小程序胶囊自动留白避让) -->
+		<view class="mu-navbar__content" :style="contentStyle">
+			<!-- 左侧返回按钮或自定义左插槽 -->
+			<view v-if="isBack" class="mu-navbar__left" @tap="handleBack">
+				<view class="mu-navbar__back-btn mu-touchable-flat">
+					<mu-icon name="arrow_left" :size="20" :color="color || defaultIconColor" />
+				</view>
+			</view>
+			<view v-else class="mu-navbar__left">
+				<slot name="left"></slot>
+			</view>
+
+			<!-- 中间标题 (绝对中心精确居中) -->
+			<view class="mu-navbar__title" :style="titleStyle">
+				<text class="mu-navbar__title-text" :style="textStyle">{{ title }}</text>
+			</view>
+
+			<!-- 右侧功能区域与插槽 (自动预留小程序胶囊右侧间距) -->
+			<view class="mu-navbar__right">
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+
+	<!-- 3. 固定模式 (fixed="true") 下的页面内容自适应下占位节点 -->
+	<view v-if="fixed && isPlaceholder" :style="{ height: totalHeaderHeight + 'px' }"></view>
+
+	<!-- 全局封装 Toast 弹窗挂载点 -->
+	<mu-toast />
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import MuToast from '../mu-toast/mu-toast.vue'
+
+const props = defineProps({
+	title: { type: String, default: '' },
+	fixed: { type: Boolean, default: true },
+	isBack: { type: Boolean, default: true },
+	transparent: { type: Boolean, default: false },
+	background: { type: String, default: '' },
+	color: { type: String, default: '' },
+	isPlaceholder: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['back'])
+
+const statusBarHeight = ref(0)
+const navContentHeight = ref(44)
+const menuButtonWidth = ref(0)
+const menuButtonRightGap = ref(12)
+
+onMounted(() => {
+	try {
+		const sysInfo = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync()
+		statusBarHeight.value = sysInfo.statusBarHeight || 0
+
+		// #ifdef MP
+		if (uni.getMenuButtonBoundingClientRect) {
+			const menuButton = uni.getMenuButtonBoundingClientRect()
+			if (menuButton && menuButton.height > 0) {
+				navContentHeight.value = (menuButton.top - statusBarHeight.value) * 2 + menuButton.height
+				menuButtonWidth.value = menuButton.width || 87
+				const winWidth = sysInfo.windowWidth || 375
+				menuButtonRightGap.value = Math.max(10, winWidth - (menuButton.right || winWidth))
+			}
+		}
+		// #endif
+	} catch (e) {
+		statusBarHeight.value = 0
+		navContentHeight.value = 44
+	}
+})
+
+const totalHeaderHeight = computed(() => statusBarHeight.value + navContentHeight.value)
+
+const navbarStyle = computed(() => ({
+	background: props.transparent ? 'transparent' : (props.background || '')
+}))
+
+const contentStyle = computed(() => {
+	const style = {
+		height: `${navContentHeight.value}px`
+	}
+	if (menuButtonWidth.value > 0) {
+		style.paddingRight = `${menuButtonWidth.value + menuButtonRightGap.value + 8}px`
+	}
+	return style
+})
+
+const titleStyle = computed(() => {
+	if (menuButtonWidth.value > 0) {
+		const sideSpace = menuButtonWidth.value + menuButtonRightGap.value + 16
+		return {
+			left: `${sideSpace}px`,
+			right: `${sideSpace}px`
+		}
+	}
+	return {}
+})
+
+const defaultIconColor = computed(() => props.color || '#0F172A')
+
+const textStyle = computed(() => (props.color ? { color: props.color } : {}))
+
+function handleBack() {
+	emit('back')
+	const pages = getCurrentPages()
+	if (pages && pages.length > 1) {
+		uni.navigateBack()
+	} else {
+		uni.switchTab({ url: '/pages/index/index' })
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-navbar {
+	width: 100%;
+	z-index: $mu-z-fixed;
+	background: #FFFFFF;
+	border-bottom: 1rpx solid $mu-border-light;
+
+	&--fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
+	&--transparent {
+		background: transparent !important;
+		backdrop-filter: none !important;
+		border-bottom-color: transparent !important;
+	}
+
+	&__content {
+		display: flex;
+		align-items: center;
+		padding: 0 24rpx;
+		position: relative;
+		box-sizing: border-box;
+	}
+
+	&__left {
+		min-width: 80rpx;
+		display: flex;
+		align-items: center;
+		z-index: 10;
+	}
+
+	&__back-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 8rpx 16rpx 8rpx 0;
+		cursor: pointer;
+		transition: opacity 0.2s ease;
+
+		&:active {
+			opacity: 0.7;
+		}
+	}
+
+	&__title {
+		position: absolute;
+		left: 100rpx;
+		right: 100rpx;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+
+		&-text {
+			font-size: 32rpx;
+			color: $mu-text-primary;
+			font-weight: 800;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&__right {
+		min-width: 80rpx;
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		z-index: 10;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-navbar {
+		background: #14141E !important;
+		border-bottom-color: rgba(255, 255, 255, 0.08);
+
+		&__title-text { color: #F8FAFC !important; }
+		&__back-btn :deep(.mu-icon) { color: #F8FAFC !important; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-navbar {
+		background: #14141E !important;
+		border-bottom-color: rgba(255, 255, 255, 0.08);
+
+		&__title-text { color: #F8FAFC !important; }
+		&__back-btn :deep(.mu-icon) { color: #F8FAFC !important; }
+	}
+}
+</style>

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

@@ -0,0 +1,107 @@
+<template>
+	<view class="mu-nomore" :class="[`mu-nomore--${type}`]">
+		<!-- 左侧分割线或圆点 -->
+		<view v-if="type === 'line'" class="mu-nomore__line mu-nomore__line--left"></view>
+		<view v-else-if="type === 'dot'" class="mu-nomore__dot"></view>
+
+		<!-- 提示内容区 -->
+		<view class="mu-nomore__content">
+			<slot>
+				<view class="mu-nomore__inner">
+					<mu-icon v-if="icon" :name="icon" :size="14" color="#94A3B8" style="margin-right: 6rpx;" />
+					<text class="mu-nomore__text" :style="{ color }">{{ text }}</text>
+				</view>
+			</slot>
+		</view>
+
+		<!-- 右侧分割线或圆点 -->
+		<view v-if="type === 'line'" class="mu-nomore__line mu-nomore__line--right"></view>
+		<view v-else-if="type === 'dot'" class="mu-nomore__dot"></view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	text: { type: String, default: '没有更多了' },
+	type: { type: String, default: 'line' },             // line (细线) | dot (两端圆点) | plain (纯文本)
+	color: { type: String, default: '' },
+	icon: { type: String, default: '' }
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-nomore {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 32rpx 0;
+	box-sizing: border-box;
+
+	&__line {
+		flex: 1;
+		height: 1rpx;
+		background: linear-gradient(to right, transparent, rgba(226, 232, 240, 0.8));
+
+		&--right {
+			background: linear-gradient(to left, transparent, rgba(226, 232, 240, 0.8));
+		}
+	}
+
+	&__dot {
+		width: 8rpx;
+		height: 8rpx;
+		border-radius: 50%;
+		background: #CBD5E1;
+		margin: 0 16rpx;
+	}
+
+	&__content {
+		padding: 0 24rpx;
+		flex-shrink: 0;
+	}
+
+	&__inner {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__text {
+		font-size: 22rpx;
+		color: #94A3B8;
+		font-weight: 500;
+		letter-spacing: 1rpx;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-nomore {
+		&__line {
+			background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12));
+			&--right {
+				background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.12));
+			}
+		}
+		&__dot { background: rgba(255, 255, 255, 0.2); }
+		&__text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-nomore {
+		&__line {
+			background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12));
+			&--right {
+				background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.12));
+			}
+		}
+		&__dot { background: rgba(255, 255, 255, 0.2); }
+		&__text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>