feat: global login dialog with useRequireAuth hook for 401 auth gating

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>
   )
 }

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 ? "已收藏" : "收藏"}

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()} />
+}

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 }
+}

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 }),
+}))