muzhiyu-ui 1.0.0

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

@@ -0,0 +1,382 @@
+<template>
+	<view class="mu-tabbar" :class="[
+		fixed && 'mu-tabbar--fixed',
+		`mu-tabbar--${mode}`
+	]">
+		<!-- raised 模式：凹弧缺口底栏 -->
+		<template v-if="mode === 'raised'">
+			<view class="mu-tabbar__raised-bar">
+				<!-- 左半栏 -->
+				<view class="mu-tabbar__raised-half mu-tabbar__raised-half--left">
+					<view
+						v-for="(item, index) in leftItems"
+						:key="index"
+						class="mu-tabbar__item mu-touchable-flat"
+						:class="{ 'mu-tabbar__item--active': index === current }"
+						@tap="handleClick(index)"
+					>
+						<mu-badge :count="item.badge" :is-dot="item.dot">
+							<mu-icon v-if="isVectorIcon(item)" :name="getIconName(item, index === current)" :size="22" :color="index === current ? (activeColor || '#171717') : '#94A3B8'" />
+							<image v-else-if="item.icon" class="mu-tabbar__icon" :src="index === current ? (item.selectedIcon || item.icon) : item.icon" mode="aspectFit" />
+						</mu-badge>
+						<text class="mu-tabbar__text" :style="{ color: index === current ? (activeColor || '#171717') : '#64748B' }">{{ item.text }}</text>
+					</view>
+				</view>
+
+				<!-- 中间凹弧缺口区 -->
+				<view class="mu-tabbar__notch">
+					<!-- 凹弧背景：左弧 + 缺口 + 右弧 -->
+					<view class="mu-tabbar__notch-bg">
+						<view class="mu-tabbar__notch-curve mu-tabbar__notch-curve--left"></view>
+						<view class="mu-tabbar__notch-hole"></view>
+						<view class="mu-tabbar__notch-curve mu-tabbar__notch-curve--right"></view>
+					</view>
+					<!-- 凸起圆形按钮 -->
+					<view class="mu-tabbar__raised-btn" :style="raisedBtnStyle" @tap="handleClick(raisedIndex)">
+						<mu-icon v-if="isVectorIcon(raisedItem)" :name="getIconName(raisedItem, raisedIndex === current)" :size="26" color="#FFFFFF" />
+					</view>
+				</view>
+
+				<!-- 右半栏 -->
+				<view class="mu-tabbar__raised-half mu-tabbar__raised-half--right">
+					<view
+						v-for="(item, index) in rightItems"
+						:key="raisedIndex + 1 + index"
+						class="mu-tabbar__item mu-touchable-flat"
+						:class="{ 'mu-tabbar__item--active': (raisedIndex + 1 + index) === current }"
+						@tap="handleClick(raisedIndex + 1 + index)"
+					>
+						<mu-badge :count="item.badge" :is-dot="item.dot">
+							<mu-icon v-if="isVectorIcon(item)" :name="getIconName(item, (raisedIndex + 1 + index) === current)" :size="22" :color="(raisedIndex + 1 + index) === current ? (activeColor || '#171717') : '#94A3B8'" />
+							<image v-else-if="item.icon" class="mu-tabbar__icon" :src="(raisedIndex + 1 + index) === current ? (item.selectedIcon || item.icon) : item.icon" mode="aspectFit" />
+						</mu-badge>
+						<text class="mu-tabbar__text" :style="{ color: (raisedIndex + 1 + index) === current ? (activeColor || '#171717') : '#64748B' }">{{ item.text }}</text>
+					</view>
+				</view>
+			</view>
+		</template>
+
+		<!-- normal / island 模式 -->
+		<template v-else>
+			<view class="mu-tabbar__bar" :style="barStyle">
+				<view
+					v-for="(item, index) in items"
+					:key="index"
+					class="mu-tabbar__item mu-touchable-flat"
+					:class="{ 'mu-tabbar__item--active': index === current }"
+					@tap="handleClick(index)"
+				>
+					<mu-badge :count="item.badge" :is-dot="item.dot">
+						<mu-icon v-if="isVectorIcon(item)" :name="getIconName(item, index === current)" :size="22" :color="index === current ? (activeColor || '#171717') : '#94A3B8'" />
+						<image v-else-if="item.icon" class="mu-tabbar__icon" :src="index === current ? (item.selectedIcon || item.icon) : item.icon" mode="aspectFit" />
+					</mu-badge>
+					<text class="mu-tabbar__text" :style="{ color: index === current ? (activeColor || '#171717') : '#64748B' }">{{ item.text }}</text>
+				</view>
+			</view>
+		</template>
+	</view>
+	<!-- 占位垫高 -->
+	<view v-if="fixed" class="mu-tabbar__placeholder" :class="[`mu-tabbar__placeholder--${mode}`]"></view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	current: { type: Number, default: 0 },
+	fixed: { type: Boolean, default: true },
+	mode: { type: String, default: 'normal' },       // normal | island | raised
+	background: { type: String, default: '' },
+	activeColor: { type: String, default: '' },
+	raisedColor: { type: String, default: '' }
+})
+
+const emit = defineEmits(['change'])
+
+const barStyle = computed(() => {
+	if (props.background) return { background: props.background }
+	return {}
+})
+
+const raisedBtnStyle = computed(() => {
+	const bg = props.raisedColor || props.activeColor || '#171717'
+	return { background: `linear-gradient(135deg, ${bg}, ${adjustColor(bg, 30)})` }
+})
+
+// 找到 raised: true 的项索引
+const raisedIndex = computed(() => {
+	const idx = props.items.findIndex(i => i.raised)
+	return idx >= 0 ? idx : Math.floor(props.items.length / 2)
+})
+
+const raisedItem = computed(() => props.items[raisedIndex.value] || {})
+const leftItems = computed(() => props.items.slice(0, raisedIndex.value))
+const rightItems = computed(() => props.items.slice(raisedIndex.value + 1))
+
+function adjustColor(hex, amount) {
+	try {
+		let c = hex.replace('#', '')
+		if (c.length === 3) c = c.split('').map(ch => ch + ch).join('')
+		const num = parseInt(c, 16)
+		let r = Math.min(255, (num >> 16) + amount)
+		let g = Math.min(255, ((num >> 8) & 0x00FF) + amount)
+		let b = Math.min(255, (num & 0x0000FF) + amount)
+		return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`
+	} catch { return hex }
+}
+
+function isVectorIcon(item) {
+	const iconStr = item.icon || ''
+	if (!iconStr) return false
+	return !iconStr.includes('/') && !/\.(png|jpg|jpeg|gif|svg|webp)$/i.test(iconStr)
+}
+
+function getIconName(item, isSelected) {
+	if (isSelected && item.selectedIcon) return item.selectedIcon
+	return item.icon || 'home'
+}
+
+function handleClick(index) {
+	if (index !== props.current) emit('change', index)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-tabbar {
+	width: 100%;
+	z-index: $mu-z-fixed;
+
+	&--fixed {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		box-sizing: border-box;
+	}
+
+	/* ========== 普通贴底 (normal) ========== */
+	&--normal &__bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		height: 100rpx;
+		background: #ffffff;
+		border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	/* ========== 悬浮浮岛 (island) ========== */
+	&--island {
+		&.mu-tabbar--fixed {
+			bottom: 24rpx;
+			padding: 0 24rpx;
+			pointer-events: none;
+		}
+	}
+	&--island &__bar {
+		pointer-events: auto;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		height: 104rpx;
+		background: rgba(255, 255, 255, 0.92);
+		backdrop-filter: blur(24px);
+		border-radius: 999rpx;
+		border: 1rpx solid rgba(255, 255, 255, 0.8);
+		box-shadow: 0 16rpx 40rpx -8rpx rgba(15, 23, 42, 0.15);
+		margin: 0 auto;
+		max-width: 680rpx;
+		padding: 0 12rpx;
+		box-sizing: border-box;
+	}
+
+	/* ========== 异形凹弧缺口 (raised) ========== */
+	&__raised-bar {
+		display: flex;
+		align-items: stretch;
+		height: 100rpx;
+		background: #ffffff;
+		border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		position: relative;
+	}
+
+	&__raised-half {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+	}
+
+	/* 凹弧缺口容器 */
+	&__notch {
+		width: 140rpx;
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+	}
+
+	/* 凹弧背景形状 */
+	&__notch-bg {
+		position: absolute;
+		top: -1rpx;
+		left: 0;
+		right: 0;
+		height: 52rpx;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	/* 左右两侧的凹弧圆角 */
+	&__notch-curve {
+		width: 24rpx;
+		height: 24rpx;
+		background: transparent;
+		position: relative;
+		overflow: hidden;
+
+		&--left {
+			border-bottom-right-radius: 24rpx;
+			box-shadow: 10rpx 10rpx 0 0 #ffffff;
+			margin-top: 0;
+		}
+		&--right {
+			border-bottom-left-radius: 24rpx;
+			box-shadow: -10rpx 10rpx 0 0 #ffffff;
+			margin-top: 0;
+		}
+	}
+
+	/* 中间圆弧缺口（透明让出空间） */
+	&__notch-hole {
+		flex: 1;
+		background: transparent;
+	}
+
+	/* 凸起圆形按钮 */
+	&__raised-btn {
+		width: 104rpx;
+		height: 104rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 8rpx 28rpx -4rpx rgba(99, 102, 241, 0.5);
+		margin-top: -52rpx;
+		border: 6rpx solid #ffffff;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 10;
+		transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+
+	/* ========== 通用 ========== */
+	&__item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		height: 100%;
+		cursor: pointer;
+
+		&--active .mu-tabbar__text { font-weight: 800; }
+	}
+
+	&__icon-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 4rpx;
+	}
+
+	&__icon { width: 44rpx; height: 44rpx; display: block; }
+
+	&__badge {
+		position: absolute;
+		top: -8rpx;
+		right: -20rpx;
+		min-width: 32rpx;
+		height: 32rpx;
+		border-radius: 999rpx;
+		background: #F43F5E;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8rpx;
+		box-sizing: border-box;
+
+		&-text { font-size: 18rpx; color: #FFFFFF; font-weight: 700; line-height: 1; }
+	}
+
+	&__dot {
+		position: absolute;
+		top: -2rpx;
+		right: -6rpx;
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		background: #F43F5E;
+	}
+
+	&__text {
+		font-size: 20rpx;
+		font-weight: 600;
+		line-height: 1;
+		transition: color 0.2s ease;
+	}
+
+	&__placeholder {
+		&--normal, &--raised { height: calc(100rpx + env(safe-area-inset-bottom, 0px)); }
+		&--island { height: 152rpx; }
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-tabbar {
+		&--normal &__bar,
+		&__raised-bar {
+			background: rgba(18, 18, 24, 0.98);
+			border-top-color: rgba(255, 255, 255, 0.08);
+		}
+		&--island &__bar {
+			background: rgba(18, 18, 24, 0.92);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__notch-curve--left { box-shadow: 10rpx 10rpx 0 0 rgba(18, 18, 24, 0.98); }
+		&__notch-curve--right { box-shadow: -10rpx 10rpx 0 0 rgba(18, 18, 24, 0.98); }
+		&__raised-btn { border-color: rgba(18, 18, 24, 0.98); }
+		&__text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-tabbar {
+		&--normal &__bar,
+		&__raised-bar {
+			background: rgba(18, 18, 24, 0.98);
+			border-top-color: rgba(255, 255, 255, 0.08);
+		}
+		&--island &__bar {
+			background: rgba(18, 18, 24, 0.92);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+		&__notch-curve--left { box-shadow: 10rpx 10rpx 0 0 rgba(18, 18, 24, 0.98); }
+		&__notch-curve--right { box-shadow: -10rpx 10rpx 0 0 rgba(18, 18, 24, 0.98); }
+		&__raised-btn { border-color: rgba(18, 18, 24, 0.98); }
+		&__text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>