dev

2026-05-04 01:47:53 +08:00
parent 71fc2afb57
commit 44c9df9b20
135 changed files with 9356 additions and 0 deletions
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { SidebarProps } from "@/components/ui/sidebar";
+
+import {
+  BookOpen,
+  Bot,
+  Command,
+  // Frame,
+  LifeBuoy,
+  // Map,
+  // PieChart,
+  Send,
+  // 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";
+
+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 data = {
+  user: {
+    name: "尚未绑定助手ID",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "计算器",
+      url: "#",
+      icon: Bot,
+      isActive: true,
+      onClick: () => {
+        console.log("Playground clicked");
+      },
+    },
+    {
+      title: "名望数据",
+      url: "#",
+      icon: SquareTerminal,
+      // items: [
+      //   {
+      //     title: "Genesis",
+      //     url: "#",
+      //   },
+      //   {
+      //     title: "Explorer",
+      //     url: "#",
+      //   },
+      //   {
+      //     title: "Quantum",
+      //     url: "#",
+      //   },
+      // ],
+    },
+    {
+      title: "职业数据",
+      url: "#",
+      icon: BookOpen,
+      // items: [
+      //   {
+      //     title: "Introduction",
+      //     url: "#",
+      //   },
+      //   {
+      //     title: "Get Started",
+      //     url: "#",
+      //   },
+      //   {
+      //     title: "Tutorials",
+      //     url: "#",
+      //   },
+      //   {
+      //     title: "Changelog",
+      //     url: "#",
+      //   },
+      // ],
+    },
+    // {
+    //   title: "Settings",
+    //   url: "#",
+    //   icon: Settings2,
+    //   items: [
+    //     {
+    //       title: "General",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Team",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Billing",
+    //       url: "#",
+    //     },
+    //     {
+    //       title: "Limits",
+    //       url: "#",
+    //     },
+    //   ],
+    // },
+  ],
+  navSecondary: [
+    {
+      title: "Colg",
+      url: "https://bbs.colg.cn",
+      icon: LifeBuoy,
+    },
+    {
+      title: "反馈",
+      url: "#",
+      icon: Send,
+    },
+  ],
+  // 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="#">
+                <div
+                  class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+                >
+                  <Command class="size-4" />
+                </div>
+                <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="data.user" />
+    </SidebarFooter>
+  </Sidebar>
+</template>