feat: 新增鉴权

2026-05-22 22:38:01 +08:00
parent b02f15f735
commit 3857f77f8b
38 changed files with 1697 additions and 195 deletions
@@ -1,8 +1,17 @@
 <!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
 <script lang="ts" setup>
-import { Activity, LayoutDashboard, Moon, Search, Sun } from "lucide-vue-next";
+import {
+  Activity,
+  LayoutDashboard,
+  LogIn,
+  LogOut,
+  Moon,
+  Search,
+  Sun
+} from "lucide-vue-next";

 import { Button } from "@/components/ui/button";
+import { useAuthStore } from "@/stores/auth";

 /** 使用 VueUse 的 useColorMode 切换 dark/light，class 会挂到 <html> 上 */
 const colorMode = useColorMode();
@@ -12,6 +21,8 @@ function toggleColorMode() {
  colorMode.value = isDark.value ? "light" : "dark";
 }

+const authStore = useAuthStore();
+
 /** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
 const navItems = [
  {
@@ -33,6 +44,11 @@ const isActive = (to: string) => {
  if (to === "/") return route.path === "/";
  return route.path.startsWith(to);
 };
+
+const handleSignOut = async () => {
+  await authStore.signOut();
+  await navigateTo("/login");
+};
 </script>

 <template>
@@ -82,6 +98,29 @@ const isActive = (to: string) => {
          <Sun v-if="isDark" class="size-4" />
          <Moon v-else class="size-4" />
        </Button>
+
+        <!-- 已登录：显示邮箱和退出按钮；未登录：显示登录链接 -->
+        <template v-if="authStore.isOnline">
+          <span class="max-sm:hidden text-xs text-muted-foreground">
+            {{ authStore.user!.email }}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="退出登录"
+            @click="handleSignOut"
+          >
+            <LogOut class="size-4" />
+          </Button>
+        </template>
+        <template v-else>
+          <Button as-child variant="ghost" size="sm">
+            <NuxtLink to="/login" class="gap-2">
+              <LogIn class="size-4" />
+              <span>登录</span>
+            </NuxtLink>
+          </Button>
+        </template>
      </nav>
    </div>
  </header>