三页面重设计与移动端适配;接入 PWA 与构建分包

src/layouts/MobileTabBar.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { findNavItem, mobileMoreNames, mobileTabNames, navIcon } from './navItems'
+
+/** 移动端底部导航:高频四项直达 + 「更多」唤起抽屉(设计稿 ①) */
+const emit = defineEmits<{ more: [] }>()
+
+const route = useRoute()
+const router = useRouter()
+
+const tabs = mobileTabNames.map((name) => {
+  const item = findNavItem(name)
+  return { ...item, icon: navIcon(item.iconPaths, 'h-[22px] w-[22px] flex-none') }
+})
+
+const moreIcon = navIcon(
+  '<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>',
+  'h-[22px] w-[22px] flex-none',
+)
+
+const activeName = computed(() => {
+  const current = String(route.name)
+  return tabs.find((t) => t.activeNames.includes(current))?.name ?? ''
+})
+
+/** 当前路由属「更多」内页面时高亮更多槽 */
+const moreActive = computed(() => {
+  const current = String(route.name)
+  return mobileMoreNames.some((n) => findNavItem(n).activeNames.includes(current))
+})
+
+function go(name: string) {
+  if (name !== String(route.name)) void router.push({ name })
+}
+</script>
+
+<template>
+  <nav
+    class="fixed inset-x-0 bottom-0 z-30 border-t border-line bg-bg px-1 pt-1.5"
+    style="padding-bottom: env(safe-area-inset-bottom)"
+  >
+    <div class="flex">
+      <button
+        v-for="t in tabs"
+        :key="t.name"
+        class="flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-md pb-1"
+        :class="activeName === t.name ? 'text-accent' : 'text-ink-3'"
+        @click="go(t.name)"
+      >
+        <component :is="t.icon" />
+        <span class="text-[10px] font-medium">{{ t.label }}</span>
+      </button>
+      <button
+        class="flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-md pb-1"
+        :class="moreActive ? 'text-accent' : 'text-ink-3'"
+        @click="emit('more')"
+      >
+        <component :is="moreIcon" />
+        <span class="text-[10px] font-medium">更多</span>
+      </button>
+    </div>
+  </nav>
+</template>