fix: replay pending action after login

components/auth-guard.tsx

@@ -32,7 +32,7 @@ export function AuthGuard({ children }: AuthGuardProps) {
   return (
     <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 text-center">
       <p className="text-sm text-muted-foreground">请先登录后继续访问此页面</p>
-      <Button onClick={openLoginDialog}>登录</Button>
+      <Button onClick={() => openLoginDialog()}>登录</Button>
     </div>
   )
 }

components/login-dialog.tsx

@@ -16,6 +16,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { currentUser } from "@/lib/mock"
 import { useAuthStore } from "@/store/auth"
+import { useLoginDialogStore } from "@/store/login-dialog"
 
 const loginSchema = z.object({
   phone: z.string().min(11, "请输入正确的手机号"),
@@ -30,6 +31,7 @@ interface LoginDialogProps {
 export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
   const router = useRouter()
   const { login } = useAuthStore()
+  const consumePendingAction = useLoginDialogStore((state) => state.consumePendingAction)
   const {
     register,
     handleSubmit,
@@ -41,6 +43,7 @@ export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
   const onSubmit = async (_data: z.infer<typeof loginSchema>) => {
     await new Promise((r) => setTimeout(r, 500))
     login(currentUser, ["consumer", "player", "owner"])
+    consumePendingAction()
     onOpenChange(false)
   }
 

lib/use-require-auth.ts

@@ -13,7 +13,7 @@ export function useRequireAuth() {
       if (isAuthenticated) {
         action()
       } else {
-        openLoginDialog()
+        openLoginDialog(action)
       }
     },
     [isAuthenticated, openLoginDialog],

store/login-dialog.ts

@@ -2,12 +2,20 @@ import { create } from "zustand"
 
 interface LoginDialogState {
   open: boolean
-  openLoginDialog: () => void
+  pendingAction: (() => void) | null
+  openLoginDialog: (action?: () => void) => void
   closeLoginDialog: () => void
+  consumePendingAction: () => void
 }
 
-export const useLoginDialogStore = create<LoginDialogState>((set) => ({
+export const useLoginDialogStore = create<LoginDialogState>((set, get) => ({
   open: false,
-  openLoginDialog: () => set({ open: true }),
+  pendingAction: null,
-  closeLoginDialog: () => set({ open: false }),
+  openLoginDialog: (action) => set({ open: true, pendingAction: action ?? null }),
+  closeLoginDialog: () => set({ open: false, pendingAction: null }),
+  consumePendingAction: () => {
+    const action = get().pendingAction
+    set({ pendingAction: null })
+    action?.()
+  },
 }))