11

src/components/TabBar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const tabs = [
+  { name: 'home', path: '/home', label: '首页', icon: '🏠' },
+  { name: 'material', path: '/material', label: '物资', icon: '📦' },
+  { name: 'inventory', path: '/inventory', label: '出入库', icon: '📥' },
+  { name: 'borrow', path: '/borrow', label: '借用', icon: '🤝' },
+  { name: 'history', path: '/history', label: '记录', icon: '📋' },
+]
+
+const active = computed(() => route.path)
+
+function go(path: string) {
+  if (route.path !== path) router.push(path)
+}
+</script>
+
+<template>
+  <nav class="mobile-tabbar">
+    <div
+      v-for="t in tabs"
+      :key="t.name"
+      class="tab-item"
+      :class="{ active: active.startsWith(t.path) }"
+      @click="go(t.path)"
+    >
+      <div class="icon">{{ t.icon }}</div>
+      <div class="label">{{ t.label }}</div>
+    </div>
+  </nav>
+</template>