0.3.4 小图标功能增加

wolai-frontend/src/app/(auth)/auth/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useConvexAuth } from "convex/react";
+import { useConvexAuth, useMutation, useQuery } from "convex/react";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { useState, useCallback, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { isConvexEnabled } from "@/lib/convex/enabled";
+import { api } from "@/lib/convex/api";
 
 type AuthStep = "signIn" | "signUp";
 
@@ -24,18 +25,24 @@ const TEST_CREDENTIALS = {
 export default function AuthPage() {
   const { isLoading, isAuthenticated } = useConvexAuth();
   const { signIn } = useAuthActions();
+  const setMyUsername = useMutation(api.users.setMyUsername);
   const router = useRouter();
 
+  const currentUser = useQuery(api.users.currentUser, isAuthenticated ? {} : "skip");
+
   useEffect(() => {
-    if (!isLoading && isAuthenticated) {
+    if (isLoading) return;
+    if (!isAuthenticated) return;
+    if (currentUser === undefined) return;
+    if (currentUser && currentUser.name) {
       router.replace("/");
     }
-  }, [isAuthenticated, isLoading, router]);
+  }, [currentUser, isAuthenticated, isLoading, router]);
 
   const [flow, setFlow] = useState<AuthStep>("signIn");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
+  const [username, setUsername] = useState("");
   const [message, setMessage] = useState<{
     type: "success" | "error" | "info";
     text: string;
@@ -46,17 +53,28 @@ export default function AuthPage() {
     setMessage(null);
 
     try {
+      if (flow === "signUp" && !username.trim()) {
+        setMessage({ type: "error", text: "用户名不能为空" });
+        return;
+      }
+
       const formData = new FormData();
       formData.append("email", email);
       formData.append("password", password);
-      if (flow === "signUp") {
-        formData.append("name", name);
-      }
       formData.append("flow", flow);
 
       const result = await signIn("password", formData);
 
       if (result.signingIn) {
+        if (flow === "signUp") {
+          try {
+            await setMyUsername({ username });
+          } catch (e: any) {
+            // 说明：注册已成功，但用户名可能重复；此时保持登录状态，转入“设置用户名”步骤继续处理。
+            setMessage({ type: "error", text: e?.message ?? "用户名设置失败，请重试" });
+            return;
+          }
+        }
         setMessage({ type: "success", text: flow === "signIn" ? "登录成功！" : "注册成功！" });
         setTimeout(() => router.push("/"), 500);
         return;
@@ -73,7 +91,7 @@ export default function AuthPage() {
     } catch (error: any) {
       setMessage({ type: "error", text: error.message || "操作失败，请重试" });
     }
-  }, [name, signIn, router]);
+  }, [router, setMyUsername, signIn, username]);
 
   const handleSubmit = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -104,7 +122,7 @@ export default function AuthPage() {
     );
   }
 
-  if (isAuthenticated) {
+  if (isAuthenticated && currentUser && currentUser.name) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50">
         <div className="text-center">
@@ -115,6 +133,75 @@ export default function AuthPage() {
     );
   }
 
+  if (isAuthenticated) {
+    if (currentUser === undefined) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+            <p className="text-gray-600">加载中...</p>
+          </div>
+        </div>
+      );
+    }
+
+    const saveUsername = async () => {
+      setMessage(null);
+      try {
+        await setMyUsername({ username });
+        setMessage({ type: "success", text: "用户名已保存！" });
+        router.replace("/");
+      } catch (error: any) {
+        setMessage({ type: "error", text: error.message || "保存失败，请重试" });
+      }
+    };
+
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+          <div>
+            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">设置用户名</h2>
+            <p className="mt-2 text-center text-sm text-gray-600">用于分享功能的用户查找（全局唯一）</p>
+          </div>
+
+          {message && (
+            <div className={`rounded-md p-4 ${
+              message.type === "success" ? "bg-green-50 text-green-800" :
+              message.type === "error" ? "bg-red-50 text-red-800" :
+              "bg-blue-50 text-blue-800"
+            }`}>
+              <p className="text-sm">{message.text}</p>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="sr-only">用户名</label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                autoComplete="username"
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                placeholder="用户名（2-32 位，不含空格）"
+              />
+            </div>
+            <button
+              type="button"
+              onClick={() => void saveUsername()}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              保存并继续
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
@@ -155,18 +242,19 @@ export default function AuthPage() {
             </div>
             {flow === "signUp" && (
               <div>
-                <label htmlFor="name" className="sr-only">姓名</label>
+                <label htmlFor="username" className="sr-only">用户名</label>
                 <input
-                  id="name"
-                  name="name"
+                  id="username"
+                  name="username"
                   type="text"
-                  autoComplete="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                  placeholder="姓名（可选）"
-                />
-              </div>
+                  autoComplete="username"
+                  required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="用户名（2-32 位，不含空格）"
+              />
+            </div>
             )}
             <div>
               <label htmlFor="password" className="sr-only">密码</label>