46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<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>
|