Add authenticated login and SSO protection

components/app-shell.tsx

@@ -6,11 +6,15 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   Archive,
+  LogIn,
+  LogOut,
   Settings,
-  Sparkles
+  Sparkles,
+  UserCircle
 } from "lucide-react";
 import clsx from "clsx";
 import { revealChildren, runScopedMotion } from "@/lib/ui/motion";
+import type { AuthUser } from "@/lib/auth/session";
 
 const nav = [
   { href: "/create", label: "创作", icon: Sparkles },
@@ -18,45 +22,76 @@ const nav = [
   { href: "/settings", label: "设置", icon: Settings }
 ];
 
-export function AppShell({ children }: { children: React.ReactNode }) {
+export function AppShell({
+  children,
+  user,
+  authRequired
+}: {
+  children: React.ReactNode;
+  user?: AuthUser | null;
+  authRequired?: boolean;
+}) {
   const pathname = usePathname();
   const shellRef = useRef<HTMLDivElement | null>(null);
+  const isAuthPage = pathname.startsWith("/auth");
 
   useEffect(() => {
     return runScopedMotion(shellRef, (scope) => revealChildren(scope, "[data-shell-animate]"));
   }, []);
 
   return (
-    <div className="app-shell" ref={shellRef}>
-      <a className="skip-link" href="#main-content">跳到主要内容</a>
-      <header className="topbar" data-shell-animate>
-        <Link className="brand" href="/create" aria-label="智念AIGC平台">
-          <span className="brand-mark" aria-hidden="true">
-            <Image className="brand-logo-img" src="/logo/zhinian-logo.png" alt="" width={124} height={28} priority />
-          </span>
-          <div>
-            <div className="brand-title">智念AIGC平台</div>
-          </div>
-        </Link>
-        <nav className="nav top-nav" aria-label="主导航">
-          {nav.map((item) => {
-            const Icon = item.icon;
-            const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={clsx("nav-link", active && "active")}
-                aria-current={active ? "page" : undefined}
-              >
-                <Icon aria-hidden="true" />
-                <span>{item.label}</span>
+    <div className={clsx("app-shell", isAuthPage && "auth-shell")} ref={shellRef}>
+      {!isAuthPage ? <a className="skip-link" href="#main-content">跳到主要内容</a> : null}
+      {!isAuthPage ? (
+        <header className="topbar" data-shell-animate>
+          <Link className="brand" href="/create" aria-label="智念AIGC平台">
+            <span className="brand-mark" aria-hidden="true">
+              <Image className="brand-logo-img" src="/logo/zhinian-logo.png" alt="" width={124} height={28} priority />
+            </span>
+            <div>
+              <div className="brand-title">智念AIGC平台</div>
+            </div>
+          </Link>
+          <nav className="nav top-nav" aria-label="主导航">
+            {nav.map((item) => {
+              const Icon = item.icon;
+              const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={clsx("nav-link", active && "active")}
+                  aria-current={active ? "page" : undefined}
+                >
+                  <Icon aria-hidden="true" />
+                  <span>{item.label}</span>
+                </Link>
+              );
+            })}
+          </nav>
+          <div className="topbar-account">
+            {user ? (
+              <>
+                <span className="account-chip" title={user.username || user.subject}>
+                  <UserCircle aria-hidden="true" />
+                  <span>{user.displayName}</span>
+                </span>
+                <form action="/api/auth/logout" method="post">
+                  <button className="icon-button logout-button" type="submit" aria-label="退出登录" title="退出登录">
+                    <LogOut aria-hidden="true" />
+                  </button>
+                </form>
+              </>
+            ) : authRequired ? (
+              <Link className="nav-link login-link" href="/auth/login">
+                <LogIn aria-hidden="true" />
+                <span>登录</span>
               </Link>
-            );
-          })}
-        </nav>
-      </header>
-      <main className="main" id="main-content" tabIndex={-1}>{children}</main>
+            ) : null}
+          </div>
+        </header>
+      ) : null}
+      <main className={clsx("main", isAuthPage && "auth-main")} id="main-content" tabIndex={-1}>{children}</main>
     </div>
   );
 }