149 lines
3.8 KiB
Vue
149 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import type { SidebarProps } from "@/components/ui/sidebar";
|
|
|
|
import {
|
|
BookOpen,
|
|
Bot,
|
|
// Frame,
|
|
LifeBuoy,
|
|
// Map,
|
|
// PieChart,
|
|
Bell,
|
|
// Settings2,
|
|
SquareTerminal,
|
|
Moon,
|
|
Sun,
|
|
} from "lucide-vue-next";
|
|
|
|
import NavMain from "@/components/NavMain.vue";
|
|
// import NavProjects from "@/components/NavProjects.vue";
|
|
import NavSecondary from "@/components/NavSecondary.vue";
|
|
import NavUser from "@/components/NavUser.vue";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar";
|
|
import { useDnfHelperStore } from "@/stores/dnfhelper";
|
|
|
|
const props = withDefaults(defineProps<SidebarProps>(), {
|
|
collapsible: "icon",
|
|
});
|
|
|
|
const isDark = ref(document.documentElement.classList.contains("dark"));
|
|
|
|
const toggleDarkMode = () => {
|
|
isDark.value = !isDark.value;
|
|
document.documentElement.classList.toggle("dark", isDark.value);
|
|
};
|
|
|
|
const dnfHelperStore = useDnfHelperStore();
|
|
|
|
const userInfo = computed(() => {
|
|
const helper = dnfHelperStore.helperInfo;
|
|
const hasBind = !!helper?.id;
|
|
return {
|
|
name: helper?.name ?? "尚未绑定助手ID",
|
|
id: hasBind ? (helper?.id ?? "") : "前往计算器页绑定",
|
|
avatar: helper?.avatar ?? "",
|
|
};
|
|
});
|
|
|
|
const data = {
|
|
navMain: [
|
|
{
|
|
title: "计算器",
|
|
url: "/dcalc/dnfhelper",
|
|
icon: Bot,
|
|
},
|
|
{
|
|
title: "技能数据",
|
|
url: "/dcalc/character/swordman_male/skill",
|
|
icon: BookOpen,
|
|
},
|
|
{
|
|
title: "装备词典",
|
|
url: "/dcalc/character/swordman_male/equipment",
|
|
icon: SquareTerminal,
|
|
},
|
|
],
|
|
navSecondary: [
|
|
{
|
|
title: "Colg",
|
|
url: "https://bbs.colg.cn",
|
|
icon: LifeBuoy,
|
|
},
|
|
{
|
|
title: "反馈",
|
|
url: "#",
|
|
icon: Bell,
|
|
},
|
|
],
|
|
// projects: [
|
|
// {
|
|
// name: "Design Engineering",
|
|
// url: "#",
|
|
// icon: Frame,
|
|
// },
|
|
// {
|
|
// name: "Sales & Marketing",
|
|
// url: "#",
|
|
// icon: PieChart,
|
|
// },
|
|
// {
|
|
// name: "Travel",
|
|
// url: "#",
|
|
// icon: Map,
|
|
// },
|
|
// ],
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar class="h-svh" v-bind="props">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<div class="flex items-center gap-2 group-data-[collapsible=icon]:justify-center">
|
|
<SidebarMenuButton size="lg" as-child class="group-data-[collapsible=icon]:hidden">
|
|
<a href="#">
|
|
<img src="/favicon.ico" alt="DNF Tools" class="size-10 rounded-sm object-cover" />
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-medium">DNF Tools</span>
|
|
<span class="truncate text-xs">DNF工具集</span>
|
|
</div>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
<SidebarTrigger
|
|
class="h-8 w-8 shrink-0 border border-sidebar-border bg-sidebar-accent/40 hover:bg-sidebar-accent"
|
|
/>
|
|
</div>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<NavMain :items="data.navMain" />
|
|
<!-- <NavProjects :projects="data.projects" /> -->
|
|
<NavSecondary :items="data.navSecondary" class="mt-auto" />
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton @click="toggleDarkMode" :tooltip="isDark ? '切换浅色' : '切换深色'">
|
|
<Sun v-if="isDark" class="size-4" />
|
|
<Moon v-else class="size-4" />
|
|
<span>{{ isDark ? "浅色模式" : "深色模式" }}</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
<NavUser :user="userInfo" />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
</template>
|