first commit

src/components/BottomDock.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// 使用路由信息来高亮当前 Tab，而不是从父组件传递状态
+const route = useRoute()
+const router = useRouter()
+
+const currentTab = computed(() => route.name)
+
+const goTab = (name) => {
+  if (route.name === name) return
+  router.push({ name })
+}
+
+const openAdd = () => {
+  router.push({ name: 'add' })
+}
+</script>
+
+<template>
+  <div
+    class="absolute bottom-6 left-4 right-4 h-[72px] bg-white/90 backdrop-blur-md rounded-[24px] shadow-2xl shadow-stone-200/50 flex items-center justify-between px-2 z-20 border border-white/50"
+  >
+    <button
+      class="flex-1 flex flex-col items-center gap-1 transition group"
+      @click="goTab('home')"
+    >
+      <div
+        class="p-2 rounded-xl transition-all duration-300"
+        :class="currentTab === 'home' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
+      >
+        <i class="text-2xl" :class="currentTab === 'home' ? 'ph-fill ph-house' : 'ph ph-house'" />
+      </div>
+    </button>
+
+    <button
+      class="flex-1 flex flex-col items-center gap-1 transition group"
+      @click="goTab('list')"
+    >
+      <div
+        class="p-2 rounded-xl transition-all duration-300"
+        :class="currentTab === 'list' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
+      >
+        <i class="text-2xl" :class="currentTab === 'list' ? 'ph-fill ph-scroll' : 'ph ph-scroll'" />
+      </div>
+    </button>
+
+    <!-- 中间主操作按钮：跳转到新增记录路由 -->
+    <div class="relative -top-6">
+      <button
+        class="w-16 h-16 bg-gradient-warm rounded-[22px] flex items-center justify-center text-white shadow-xl shadow-orange-300/60 hover:scale-105 active:scale-95 transition-all duration-300 border-[6px] border-[#fffaf8]"
+        @click="openAdd"
+      >
+        <i class="ph-bold ph-plus text-2xl" />
+      </button>
+    </div>
+
+    <button
+      class="flex-1 flex flex-col items-center gap-1 transition group"
+      @click="goTab('analysis')"
+    >
+      <div
+        class="p-2 rounded-xl transition-all duration-300"
+        :class="currentTab === 'analysis' ? 'text-purple-600 bg-purple-50' : 'text-stone-400 bg-transparent'"
+      >
+        <i
+          class="text-2xl"
+          :class="currentTab === 'analysis' ? 'ph-fill ph-chat-teardrop-text' : 'ph ph-chat-teardrop-text'"
+        />
+      </div>
+    </button>
+
+    <button
+      class="flex-1 flex flex-col items-center gap-1 transition group"
+      @click="goTab('settings')"
+    >
+      <div
+        class="p-2 rounded-xl transition-all duration-300"
+        :class="currentTab === 'settings' ? 'text-stone-800 bg-stone-100' : 'text-stone-400 bg-transparent'"
+      >
+        <i class="text-2xl" :class="currentTab === 'settings' ? 'ph-fill ph-gear' : 'ph ph-gear'" />
+      </div>
+    </button>
+  </div>
+</template>