批量优化

uniapp/components/MainTabbar.vue

@@ -0,0 +1,93 @@
+<template>
+	<view class="app-tabbar">
+		<view class="tabbar-inner">
+			<view
+				v-for="tab in tabs"
+				:key="tab.name"
+				class="tab-item"
+				:class="{ active: current === tab.name }"
+				@tap="onChange(tab.name)"
+			>
+				<FaIcon
+					:name="tab.icon"
+					:color="current === tab.name ? '#3973ff' : '#8a94ad'"
+					:size="20"
+				/>
+				<text class="tab-text">{{ tab.text }}</text>
+			</view>
+		</view>
+		<view class="safe-area" />
+	</view>
+</template>
+
+<script setup>
+/**
+ * 主 tabbar —— 工作台 / 应用 / 我的。
+ * 仅这三个页面使用；子系统内部页面请用 AppTabbar（带 group 参数）。
+ */
+const props = defineProps({
+	current: {
+		type: String,
+		default: 'dashboard'
+	}
+})
+
+const tabs = [
+	{ name: 'dashboard', text: '工作台', icon: 'grip' },
+	{ name: 'features', text: '应用', icon: 'th-large' },
+	{ name: 'profile', text: '我的', icon: 'user' }
+]
+
+const routes = {
+	dashboard: '/pages/dashboard/dashboard',
+	features: '/pages/features/features',
+	profile: '/pages/profile/profile'
+}
+
+function onChange(name) {
+	if (name === props.current) return
+	uni.redirectTo({ url: routes[name] })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/src/styles/theme.scss';
+
+.app-tabbar {
+	flex-shrink: 0;
+	background: $color-card;
+	border-top: 1rpx solid $color-border;
+	box-shadow: $shadow-header;
+}
+
+.tabbar-inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	padding: 10rpx 0 6rpx;
+}
+
+.tab-item {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4rpx;
+	padding: 8rpx 0;
+
+	&.active .tab-text {
+		color: $color-primary;
+		font-weight: 600;
+	}
+}
+
+.tab-text {
+	font-size: 22rpx;
+	color: $color-text-muted;
+}
+
+.safe-area {
+	height: constant(safe-area-inset-bottom);
+	height: env(safe-area-inset-bottom);
+}
+</style>