muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-bottom-nav/mu-bottom-nav.vue

@@ -0,0 +1,331 @@
+<template>
+	<view class="mu-bottom-nav" :class="[fixed && 'mu-bottom-nav--fixed']" :style="{ background }">
+		<!-- 默认插槽：完全自定义底部栏内容 -->
+		<slot v-if="$slots.default || type === 'custom'"></slot>
+
+		<!-- 1. 电商 / 交易工具栏模式 (type="action") -->
+		<template v-else-if="type === 'action'">
+			<!-- 左侧小图标组 -->
+			<view class="mu-bottom-nav__icons">
+				<view
+					v-for="(item, index) in items"
+					:key="index"
+					class="mu-bottom-nav__icon-item mu-touchable-flat"
+					@tap="handleIconClick(index, item)"
+				>
+					<mu-badge :count="item.badge" :is-dot="item.dot">
+						<mu-icon v-if="item.icon" :name="item.icon" :size="20" :color="item.active ? (item.activeColor || '#171717') : '#64748B'" />
+						<image v-else-if="item.img" class="mu-bottom-nav__img" :src="item.img" mode="aspectFit" />
+					</mu-badge>
+					<text class="mu-bottom-nav__text" :style="{ color: item.active ? (item.activeColor || '#171717') : '#64748B' }">{{ item.text }}</text>
+				</view>
+			</view>
+
+			<!-- 右侧按钮组 -->
+			<view class="mu-bottom-nav__btns">
+				<view
+					v-for="(btn, bi) in buttons"
+					:key="bi"
+					class="mu-bottom-nav__btn mu-touchable-flat"
+					:class="[
+						btn.type && `mu-bottom-nav__btn--${btn.type}`,
+						buttons.length === 1 && 'mu-bottom-nav__btn--single'
+					]"
+					:style="getButtonStyle(btn, bi)"
+					@tap="handleButtonClick(bi, btn)"
+				>
+					<text class="mu-bottom-nav__btn-text">{{ btn.text }}</text>
+				</view>
+			</view>
+		</template>
+
+		<!-- 2. 社交 / 资讯互动模式 (type="bar") -->
+		<template v-else-if="type === 'bar'">
+			<view class="mu-bottom-nav__input-box mu-touchable-flat" @tap="handleInputTap">
+				<mu-icon name="edit" :size="14" color="#94A3B8" style="margin-right: 12rpx;" />
+				<text class="mu-bottom-nav__input-placeholder">{{ placeholder }}</text>
+			</view>
+
+			<view class="mu-bottom-nav__actions">
+				<view
+					v-for="(act, ai) in actions"
+					:key="ai"
+					class="mu-bottom-nav__action-item mu-touchable-flat"
+					@tap="handleActionClick(ai, act)"
+				>
+					<mu-badge :count="act.badge" :is-dot="act.dot">
+						<mu-icon :name="act.icon" :size="22" :color="act.active ? (act.activeColor || '#F43F5E') : '#64748B'" />
+					</mu-badge>
+					<text v-if="act.count !== undefined" class="mu-bottom-nav__action-count" :class="[act.active && 'mu-bottom-nav__action-count--active']">
+						{{ act.count }}
+					</text>
+				</view>
+			</view>
+		</template>
+
+		<!-- 3. 经典均匀导航栏模式 (type="nav") -->
+		<template v-else>
+			<view
+				v-for="(item, index) in items"
+				:key="index"
+				class="mu-bottom-nav__item mu-touchable-flat"
+				:class="[current === index && 'mu-bottom-nav__item--active']"
+				@tap="handleClick(index, item)"
+			>
+				<mu-badge :count="item.badge" :is-dot="item.dot">
+					<mu-icon v-if="item.icon" :name="item.icon" :size="22" :color="current === index ? '#171717' : '#94A3B8'" />
+					<image v-else-if="item.img" class="mu-bottom-nav__img" :src="item.img" mode="aspectFit" />
+				</mu-badge>
+				<text class="mu-bottom-nav__text" :class="{ 'mu-bottom-nav__text--active': current === index }">{{ item.text }}</text>
+			</view>
+		</template>
+	</view>
+
+	<!-- 安全区底部占位块 -->
+	<view v-if="fixed" class="mu-bottom-nav__placeholder"></view>
+</template>
+
+<script setup>
+const props = defineProps({
+	type: { type: String, default: 'action' },           // action (电商交易工具栏) | bar (社交评论互动) | nav (均匀导航) | custom (自由自定义)
+	items: { type: Array, default: () => [] },
+	buttons: { type: Array, default: () => [] },          // type="action" 时的右侧大按钮
+	actions: { type: Array, default: () => [] },          // type="bar" 时的右侧互动图标组
+	placeholder: { type: String, default: '写下你的精彩评论...' },
+	current: { type: Number, default: 0 },
+	fixed: { type: Boolean, default: true },
+	background: { type: String, default: '' }
+})
+
+const emit = defineEmits(['change', 'click-icon', 'click-button', 'click-action', 'click-input'])
+
+function getButtonStyle(btn, index) {
+	if (btn.color) return { background: btn.color }
+
+	// 默认双胶囊按钮优雅渐变配色
+	if (props.buttons.length === 2) {
+		if (index === 0) return { background: '#F59E0B' }
+		if (index === 1) return { background: '#171717' }
+	}
+	return { background: '#171717' }
+}
+
+function handleClick(index, item) {
+	emit('change', { index, item })
+}
+
+function handleIconClick(index, item) {
+	emit('click-icon', { index, item })
+}
+
+function handleButtonClick(index, btn) {
+	emit('click-button', { index, btn })
+}
+
+function handleActionClick(index, act) {
+	emit('click-action', { index, act })
+}
+
+function handleInputTap() {
+	emit('click-input')
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-bottom-nav {
+	width: 100%;
+	height: 108rpx;
+	background: rgba(255, 255, 255, 0.92);
+	backdrop-filter: blur(20px);
+	border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+	display: flex;
+	align-items: center;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	z-index: $mu-z-fixed;
+
+	&--fixed {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	/* ========== 1. type="action" 电商交易模式 ========== */
+	&__icons {
+		display: flex;
+		align-items: center;
+		margin-right: 24rpx;
+	}
+
+	&__icon-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 0 16rpx;
+		cursor: pointer;
+	}
+
+	&__icon-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__img {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	&__badge {
+		position: absolute;
+		top: -8rpx;
+		right: -16rpx;
+		min-width: 28rpx;
+		height: 28rpx;
+		border-radius: 999rpx;
+		background: #F43F5E;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 6rpx;
+
+		&-text {
+			font-size: 16rpx;
+			font-weight: 800;
+			color: #ffffff;
+			line-height: 1;
+		}
+	}
+
+	&__text {
+		font-size: 20rpx;
+		color: #64748B;
+		font-weight: 600;
+		margin-top: 4rpx;
+		line-height: 1;
+
+		&--active {
+			color: #171717;
+			font-weight: 800;
+		}
+	}
+
+	&__btns {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 12rpx;
+	}
+
+	&__btn {
+		flex: 1;
+		height: 76rpx;
+		border-radius: 38rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.08);
+
+		&-text {
+			font-size: 26rpx;
+			font-weight: 800;
+			color: #ffffff;
+			letter-spacing: -0.5rpx;
+		}
+
+		&--single {
+			width: 100%;
+		}
+	}
+
+	/* ========== 2. type="bar" 社交评论互动模式 ========== */
+	&__input-box {
+		flex: 1;
+		height: 72rpx;
+		border-radius: 36rpx;
+		background: #F1F5F9;
+		display: flex;
+		align-items: center;
+		padding: 0 24rpx;
+		margin-right: 20rpx;
+		cursor: pointer;
+	}
+
+	&__input-placeholder {
+		font-size: 24rpx;
+		color: #94A3B8;
+		font-weight: 500;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 28rpx;
+	}
+
+	&__action-item {
+		display: flex;
+		align-items: center;
+		gap: 6rpx;
+		cursor: pointer;
+	}
+
+	&__action-count {
+		font-size: 22rpx;
+		color: #64748B;
+		font-weight: 700;
+
+		&--active {
+			color: #F43F5E;
+		}
+	}
+
+	/* ========== 3. type="nav" 经典均匀导航模式 ========== */
+	&__item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		cursor: pointer;
+	}
+
+	&__placeholder {
+		height: calc(108rpx + env(safe-area-inset-bottom, 0px));
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-bottom-nav {
+		background: rgba(18, 18, 24, 0.95);
+		border-top-color: rgba(255, 255, 255, 0.08);
+
+		&__text { color: $mu-dark-text-secondary; }
+		&__input-box { background: rgba(255, 255, 255, 0.08); }
+		&__input-placeholder { color: rgba(255, 255, 255, 0.4); }
+		&__action-count { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-bottom-nav {
+		background: rgba(18, 18, 24, 0.95);
+		border-top-color: rgba(255, 255, 255, 0.08);
+
+		&__text { color: $mu-dark-text-secondary; }
+		&__input-box { background: rgba(255, 255, 255, 0.08); }
+		&__input-placeholder { color: rgba(255, 255, 255, 0.4); }
+		&__action-count { color: $mu-dark-text-secondary; }
+	}
+}
+</style>

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

@@ -0,0 +1,316 @@
+<template>
+	<view class="mu-bubble">
+		<!-- 触发节点插槽 -->
+		<view class="mu-bubble__trigger" @tap.stop="toggle">
+			<slot name="trigger">
+				<view class="mu-bubble__default-trigger">
+					<text class="mu-bubble__trigger-text">触发气泡</text>
+				</view>
+			</slot>
+		</view>
+
+		<!-- 气泡弹出主体 -->
+		<view
+			v-if="innerVisible"
+			class="mu-bubble__wrapper"
+			:class="[
+				`mu-bubble__wrapper--${placement}`,
+				`mu-bubble__wrapper--${theme}`,
+				animating && 'mu-bubble__wrapper--show'
+			]"
+			:style="wrapperStyle"
+			@tap.stop
+		>
+			<!-- 45度 旋转小尖角箭头 -->
+			<view
+				v-if="showArrow"
+				class="mu-bubble__arrow"
+				:class="[
+					`mu-bubble__arrow--${placement}`,
+					`mu-bubble__arrow--${theme}`
+				]"
+			></view>
+
+			<!-- 气泡内容容器 -->
+			<view class="mu-bubble__body" :class="[`mu-bubble__body--${theme}`]">
+				<slot>
+					<text class="mu-bubble__content-text">{{ content }}</text>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	visible: { type: Boolean, default: false },
+	placement: { type: String, default: 'top' },        // top | bottom | left | right
+	theme: { type: String, default: 'dark' },           // dark | light
+	content: { type: String, default: '' },             // 快捷提示文本
+	trigger: { type: String, default: 'click' },
+	showArrow: { type: Boolean, default: true },        // 是否显示箭头
+	width: { type: String, default: '' },
+	offset: { type: Array, default: () => [0, 0] }
+})
+
+const emit = defineEmits(['update:visible', 'show', 'hide', 'change'])
+
+const innerVisible = ref(false)
+const animating = ref(false)
+
+const wrapperStyle = computed(() => {
+	const style = {}
+	if (props.width) style.width = props.width
+	if (props.offset && props.offset.length === 2) {
+		if (props.offset[0]) style.marginTop = `${props.offset[0]}rpx`
+		if (props.offset[1]) style.marginLeft = `${props.offset[1]}rpx`
+	}
+	return style
+})
+
+function toggle(e) {
+	if (e && e.stopPropagation) e.stopPropagation()
+	if (props.trigger === 'click') {
+		if (innerVisible.value) hide()
+		else show()
+	}
+}
+
+function show() {
+	innerVisible.value = true
+	setTimeout(() => {
+		animating.value = true
+		emit('update:visible', true)
+		emit('show')
+		emit('change', true)
+	}, 30)
+}
+
+function hide() {
+	animating.value = false
+	setTimeout(() => {
+		innerVisible.value = false
+		emit('update:visible', false)
+		emit('hide')
+		emit('change', false)
+	}, 200)
+}
+
+function handleClickOutside() {
+	if (innerVisible.value && props.trigger === 'click') {
+		hide()
+	}
+}
+
+watch(() => props.visible, (val) => {
+	if (val) show()
+	else hide()
+})
+
+onMounted(() => {
+	// #ifdef H5
+	setTimeout(() => {
+		document.addEventListener('click', handleClickOutside)
+	}, 100)
+	// #endif
+})
+
+onUnmounted(() => {
+	// #ifdef H5
+	document.removeEventListener('click', handleClickOutside)
+	// #endif
+})
+
+defineExpose({ show, hide, toggle })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-bubble {
+	position: relative;
+	display: inline-flex;
+	vertical-align: middle;
+
+	&__trigger {
+		display: inline-flex;
+		cursor: pointer;
+	}
+
+	&__default-trigger {
+		padding: 12rpx 24rpx;
+		background: #F1F5F9;
+		border-radius: 12rpx;
+		display: inline-flex;
+		align-items: center;
+
+		&-text {
+			font-size: 24rpx;
+			color: #0F172A;
+			font-weight: 600;
+		}
+	}
+
+	&__wrapper {
+		position: absolute;
+		z-index: $mu-z-popup;
+		opacity: 0;
+		transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		pointer-events: none;
+		white-space: nowrap;
+
+		&--show {
+			opacity: 1;
+			pointer-events: auto;
+		}
+
+		/* 4 向定位 */
+		&--top {
+			bottom: 100%;
+			left: 50%;
+			transform: translateX(-50%) scale(0.85);
+			margin-bottom: 16rpx;
+			&.mu-bubble__wrapper--show { transform: translateX(-50%) scale(1); }
+		}
+		&--bottom {
+			top: 100%;
+			left: 50%;
+			transform: translateX(-50%) scale(0.85);
+			margin-top: 16rpx;
+			&.mu-bubble__wrapper--show { transform: translateX(-50%) scale(1); }
+		}
+		&--left {
+			right: 100%;
+			top: 50%;
+			transform: translateY(-50%) scale(0.85);
+			margin-right: 16rpx;
+			&.mu-bubble__wrapper--show { transform: translateY(-50%) scale(1); }
+		}
+		&--right {
+			left: 100%;
+			top: 50%;
+			transform: translateY(-50%) scale(0.85);
+			margin-left: 16rpx;
+			&.mu-bubble__wrapper--show { transform: translateY(-50%) scale(1); }
+		}
+	}
+
+	/* 尖角指示器 */
+	&__arrow {
+		position: absolute;
+		width: 14rpx;
+		height: 14rpx;
+		transform: rotate(45deg);
+		z-index: 2;
+
+		&--dark {
+			background: rgba(15, 23, 42, 0.92);
+		}
+
+		&--light {
+			background: rgba(255, 255, 255, 0.95);
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+		}
+
+		&--top {
+			bottom: -7rpx;
+			left: 50%;
+			margin-left: -7rpx;
+		}
+
+		&--bottom {
+			top: -7rpx;
+			left: 50%;
+			margin-left: -7rpx;
+		}
+
+		&--left {
+			right: -7rpx;
+			top: 50%;
+			margin-top: -7rpx;
+		}
+
+		&--right {
+			left: -7rpx;
+			top: 50%;
+			margin-top: -7rpx;
+		}
+	}
+
+	&__body {
+		padding: 16rpx 24rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		white-space: nowrap;
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		&--dark {
+			background: rgba(15, 23, 42, 0.92);
+			backdrop-filter: blur(16px);
+			box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.25);
+
+			.mu-bubble__content-text {
+				color: #ffffff;
+				font-size: 24rpx;
+				font-weight: 600;
+			}
+		}
+
+		&--light {
+			background: rgba(255, 255, 255, 0.95);
+			backdrop-filter: blur(16px);
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+			box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.1);
+
+			.mu-bubble__content-text {
+				color: #0F172A;
+				font-size: 24rpx;
+				font-weight: 600;
+			}
+		}
+	}
+
+	&__content-text {
+		line-height: 1.4;
+		display: inline-block;
+		white-space: nowrap;
+		word-break: keep-all;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-bubble {
+		&__body--light {
+			background: rgba(30, 41, 59, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+			.mu-bubble__content-text { color: $mu-dark-text-primary; }
+		}
+		&__arrow--light {
+			background: rgba(30, 41, 59, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-bubble {
+		&__body--light {
+			background: rgba(30, 41, 59, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+			.mu-bubble__content-text { color: $mu-dark-text-primary; }
+		}
+		&__arrow--light {
+			background: rgba(30, 41, 59, 0.95);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+</style>