feat: 完成整体内容开发

2026-05-22 16:27:35 +08:00
parent 5e05bf4f63
commit d3cb786edb
72 changed files with 2410 additions and 29 deletions
@@ -0,0 +1,72 @@
+<!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
+<script lang="ts" setup>
+import { Activity, BookOpenText, LayoutDashboard, Search } from "lucide-vue-next";
+
+import { Button } from "@/components/ui/button";
+
+/** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
+const navItems = [
+  {
+    label: "答题",
+    to: "/",
+    icon: Search
+  },
+  {
+    label: "Dashboard",
+    to: "/dashboard",
+    icon: LayoutDashboard
+  },
+  {
+    label: "文档",
+    to: "/docs",
+    icon: BookOpenText
+  }
+];
+
+const route = useRoute();
+
+/** 当前路由高亮，Dashboard 的子路径也归到 Dashboard 导航项 */
+const isActive = (to: string) => {
+  if (to === "/") return route.path === "/";
+  return route.path.startsWith(to);
+};
+</script>
+
+<template>
+  <header class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+    <div
+      class="mx-auto flex min-h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 md:px-6"
+    >
+      <NuxtLink to="/" class="flex min-w-0 items-center gap-3">
+        <span
+          class="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-primary text-primary-foreground"
+        >
+          <Activity class="size-5" />
+        </span>
+        <span class="min-w-0">
+          <span class="block truncate text-base font-semibold text-foreground">
+            OCS AI 答题服务
+          </span>
+          <span class="block truncate text-xs text-muted-foreground">
+            Nuxt API Runtime
+          </span>
+        </span>
+      </NuxtLink>
+
+      <nav class="flex shrink-0 items-center gap-1 overflow-x-auto">
+        <Button
+          v-for="item in navItems"
+          :key="item.to"
+          as-child
+          :variant="isActive(item.to) ? 'secondary' : 'ghost'"
+          size="sm"
+        >
+          <NuxtLink :to="item.to" class="gap-2">
+            <component :is="item.icon" class="size-4" />
+            <span>{{ item.label }}</span>
+          </NuxtLink>
+        </Button>
+      </nav>
+    </div>
+  </header>
+</template>