dev

frontendNew/src/components/AppNavBar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { computed } from "vue";
+import { Button } from "@/components/ui/button";
+
+const navs = [
+  { name: "首页", path: "/dcalc/home" },
+  { name: "助手导入", path: "/dcalc/dnfhelper" },
+  { name: "装备词典", path: "/dcalc/character/swordman_male/equipment" },
+  { name: "技能面板", path: "/dcalc/character/swordman_male/skill" },
+];
+
+const router = useRouter();
+const route = useRoute();
+
+const activePath = computed(() => {
+  // 只匹配主路径
+  const found = navs.find((n) => route.path.startsWith(n.path));
+  return found ? found.path : "";
+});
+
+function go(path: string) {
+  if (route.path !== path) router.push(path);
+}
+</script>
+
+<template>
+  <nav class="w-full flex items-center gap-2 px-4 py-2 border-b bg-background/80 sticky top-0 z-30">
+    <template v-for="nav in navs" :key="nav.path">
+      <Button
+        variant="ghost"
+        :class="activePath === nav.path ? 'text-primary font-bold' : 'text-muted-foreground'"
+        @click="go(nav.path)"
+      >
+        {{ nav.name }}
+      </Button>
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  backdrop-filter: blur(6px);
+}
+</style>