From 07754069c19c58b527a99784e4d89499994094ff Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Fri, 20 Feb 2026 18:50:46 +0800
Subject: [PATCH] feat: global login dialog with useRequireAuth hook for 401
 auth gating

---
 app/providers.tsx                  |  6 +++++-
 components/favorite-button.tsx     |  4 +++-
 components/global-login-dialog.tsx |  9 +++++++++
 lib/use-require-auth.ts            | 23 +++++++++++++++++++++++
 store/login-dialog.ts              | 13 +++++++++++++
 5 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 components/global-login-dialog.tsx
 create mode 100644 lib/use-require-auth.ts
 create mode 100644 store/login-dialog.ts

diff --git a/app/providers.tsx b/app/providers.tsx
index c8049ea..6a29d33 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -2,6 +2,7 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { useState } from "react"
+import { GlobalLoginDialog } from "@/components/global-login-dialog"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
 export function Providers({ children }: { children: React.ReactNode }) {
@@ -19,7 +20,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>{children}</TooltipProvider>
+      <TooltipProvider>
+        {children}
+        <GlobalLoginDialog />
+      </TooltipProvider>
     </QueryClientProvider>
   )
 }
diff --git a/components/favorite-button.tsx b/components/favorite-button.tsx
index 0cf7775..2738eeb 100644
--- a/components/favorite-button.tsx
+++ b/components/favorite-button.tsx
@@ -3,6 +3,7 @@
 import { Heart } from "lucide-react"
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
+import { useRequireAuth } from "@/lib/use-require-auth"
 
 interface FavoriteButtonProps {
   initialFavorited: boolean
@@ -10,13 +11,14 @@ interface FavoriteButtonProps {
 
 export function FavoriteButton({ initialFavorited }: FavoriteButtonProps) {
   const [favorited, setFavorited] = useState(initialFavorited)
+  const { requireAuth } = useRequireAuth()
 
   return (
     <Button
       variant={favorited ? "default" : "outline"}
       size="sm"
       className="gap-1.5"
-      onClick={() => setFavorited(!favorited)}
+      onClick={() => requireAuth(() => setFavorited(!favorited))}
     >
       <Heart className={`h-4 w-4 ${favorited ? "fill-current" : ""}`} />
       {favorited ? "已收藏" : "收藏"}
diff --git a/components/global-login-dialog.tsx b/components/global-login-dialog.tsx
new file mode 100644
index 0000000..5d2bc7d
--- /dev/null
+++ b/components/global-login-dialog.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import { LoginDialog } from "@/components/login-dialog"
+import { useLoginDialogStore } from "@/store/login-dialog"
+
+export function GlobalLoginDialog() {
+  const { open, closeLoginDialog } = useLoginDialogStore()
+  return <LoginDialog open={open} onOpenChange={(v) => !v && closeLoginDialog()} />
+}
diff --git a/lib/use-require-auth.ts b/lib/use-require-auth.ts
new file mode 100644
index 0000000..ce11ce0
--- /dev/null
+++ b/lib/use-require-auth.ts
@@ -0,0 +1,23 @@
+"use client"
+
+import { useCallback } from "react"
+import { useAuthStore } from "@/store/auth"
+import { useLoginDialogStore } from "@/store/login-dialog"
+
+export function useRequireAuth() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const openLoginDialog = useLoginDialogStore((s) => s.openLoginDialog)
+
+  const requireAuth = useCallback(
+    (action: () => void) => {
+      if (isAuthenticated) {
+        action()
+      } else {
+        openLoginDialog()
+      }
+    },
+    [isAuthenticated, openLoginDialog],
+  )
+
+  return { isAuthenticated, requireAuth }
+}
diff --git a/store/login-dialog.ts b/store/login-dialog.ts
new file mode 100644
index 0000000..5d10cb4
--- /dev/null
+++ b/store/login-dialog.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand"
+
+interface LoginDialogState {
+  open: boolean
+  openLoginDialog: () => void
+  closeLoginDialog: () => void
+}
+
+export const useLoginDialogStore = create<LoginDialogState>((set) => ({
+  open: false,
+  openLoginDialog: () => set({ open: true }),
+  closeLoginDialog: () => set({ open: false }),
+}))