From 50ae46fe15da8d4f194b48e9a18938f6eabee3a7 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 20:16:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20AuthModal=20=E9=87=8D=E5=BC=80=E6=97=B6?=
 =?UTF-8?q?=E9=87=8D=E7=BD=AE=E8=A1=A8=E5=8D=95=20+=20=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E5=85=A5=E5=A4=B1=E8=B4=A5=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #13: useEffect 监听 open 变化时重置所有表单状态（用户名、密码、错误等）
- #14: handleJoin catch 中捕获错误消息并渲染到页面
---
 src/app/invite/[id]/page.tsx | 14 +++++++++++++-
 src/components/AuthModal.tsx | 11 ++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 817475a..15bed4c 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/src/app/invite/[id]/page.tsx
@@ -29,6 +29,7 @@ export default function InvitePage() {
   const [userCount, setUserCount] = useState(0);
   const [scene, setScene] = useState<SceneType>("eat");
   const [joining, setJoining] = useState(false);
+  const [joinError, setJoinError] = useState("");
 
   const sceneConfig = getSceneConfig(scene);
 
@@ -48,10 +49,12 @@ export default function InvitePage() {
 
   const handleJoin = async () => {
     setJoining(true);
+    setJoinError("");
     try {
       await joinRoom(roomId, getUserId());
       router.push(`/room/${roomId}`);
-    } catch {
+    } catch (e) {
+      setJoinError(e instanceof Error ? e.message : "加入失败，请重试");
       setJoining(false);
     }
   };
@@ -187,6 +190,15 @@ export default function InvitePage() {
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.3 }}
       >
+        {joinError && (
+          <motion.p
+            className="mb-3 text-center text-xs font-medium text-rose-400"
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            {joinError}
+          </motion.p>
+        )}
         <Button
           onClick={handleJoin}
           size="lg"
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 34a5ee8..d03e089 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { X, Eye, EyeOff } from "lucide-react";
 import { AVATARS } from "@/lib/avatars";
@@ -36,8 +36,17 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
     setAvatar(AVATARS[0].emoji);
     setShowPassword(false);
     setError("");
+    setLoading(false);
   };
 
+  useEffect(() => {
+    if (open) {
+      setTab(defaultTab);
+      resetForm();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
   const switchTab = (t: Tab) => {
     setTab(t);
     resetForm();