bugfix: 一些bug修复

2026-05-22 17:45:58 +08:00
parent c286db68b1
commit b02f15f735
12 changed files with 115 additions and 304 deletions
@@ -1,14 +1,17 @@
 <!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
 <script lang="ts" setup>
-import {
-  Activity,
-  BookOpenText,
-  LayoutDashboard,
-  Search
-} from "lucide-vue-next";
+import { Activity, LayoutDashboard, Moon, Search, Sun } from "lucide-vue-next";

 import { Button } from "@/components/ui/button";

+/** 使用 VueUse 的 useColorMode 切换 dark/light，class 会挂到 <html> 上 */
+const colorMode = useColorMode();
+const isDark = computed(() => colorMode.value === "dark");
+
+function toggleColorMode() {
+  colorMode.value = isDark.value ? "light" : "dark";
+}
+
 /** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
 const navItems = [
  {
@@ -20,11 +23,6 @@ const navItems = [
    label: "Dashboard",
    to: "/dashboard",
    icon: LayoutDashboard
-  },
-  {
-    label: "文档",
-    to: "/docs",
-    icon: BookOpenText
  }
 ];

@@ -73,6 +71,17 @@ const isActive = (to: string) => {
            <span>{{ item.label }}</span>
          </NuxtLink>
        </Button>
+
+        <!-- 深色/浅色主题切换按钮 -->
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="切换主题"
+          @click="toggleColorMode"
+        >
+          <Sun v-if="isDark" class="size-4" />
+          <Moon v-else class="size-4" />
+        </Button>
      </nav>
    </div>
  </header>