LoginClient 细节调整

frontend/components/auth/LoginClient.tsx

@@ -235,10 +235,9 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
     }
   };
 
-  if (mode === "signup") {
   return (
     <div className="flex min-h-screen w-full flex-col lg:flex-row bg-[#f8fafc] font-sans text-slate-900">
-        {/* Left Dark Column */}
+      {/* Left Column (Shared Dark Column with Illustrative Widget) */}
       <div className="relative flex flex-col justify-between bg-[#0b0f19] p-8 text-white lg:w-[480px] xl:w-[540px] shrink-0 overflow-hidden border-r border-white/5">
         {/* Ambient Glows */}
         <div className="absolute -left-20 -top-20 h-80 w-80 rounded-full bg-blue-600/15 blur-[100px] pointer-events-none" />
@@ -248,7 +247,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
 
         <div className="relative z-10 flex flex-col gap-12">
           <Link href="/" className="flex items-center hover:opacity-90">
-              <img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
+            <img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain brightness-0 invert" />
           </Link>
 
           <div className="mt-8 space-y-6">
@@ -321,133 +320,31 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
         </div>
       </div>
 
-        {/* Right White Column (Signup Form) */}
+      {/* Right Column (Forms) */}
-        <div className="flex flex-1 flex-col items-center justify-center p-8 bg-white">
+      <div className="flex flex-1 flex-col justify-between p-6 sm:p-8 bg-white min-h-[calc(100vh-100px)] lg:min-h-screen">
-          <div className="w-full max-w-[400px]">
+        {/* Top bar switch */}
-            <h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
+        <div className="flex justify-end items-center gap-3">
-              {copy.signUpTitle}
+          <span className="text-xs text-slate-500">
-            </h1>
+            {isLogin ? copy.newToPoly : copy.alreadyHave}
-            <p className="text-xs text-slate-500 mb-6">
-              {copy.subtitle}
-            </p>
-
-            <form onSubmit={(event) => void onEmailSubmit(event)} className="space-y-4">
-              <div className="space-y-1.5">
-                <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
-                  {copy.workEmail}
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                  <input
-                    type="email"
-                    required
-                    value={email}
-                    onChange={(event) => setEmail(event.target.value)}
-                    placeholder="yourname@email.com"
-                    className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
-                  {copy.password}
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    required
-                    minLength={6}
-                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                    placeholder={copy.passwordSignupPlaceholder}
-                    className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-10 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
-                  >
-                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                  </button>
-                </div>
-              </div>
-
-              <p className="text-[11px] leading-5 text-slate-500 mt-2">
-                {copy.termsAgreement}
-              </p>
-
-              <button
-                type="submit"
-                disabled={loading}
-                className="flex w-full items-center justify-center rounded-lg bg-blue-600 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50"
-              >
-                {copy.signupSubmit}
-              </button>
-            </form>
-
-            <div className="my-5 flex items-center">
-              <div className="h-px flex-grow bg-slate-200" />
-              <span className="px-3 text-[10px] font-semibold uppercase text-slate-400">
-                {isEn ? "or" : "或"}
           </span>
-              <div className="h-px flex-grow bg-slate-200" />
-            </div>
-
           <button
             type="button"
-              onClick={() => void onGoogleSignIn()}
+            onClick={() => {
-              disabled={loading}
+              setErrorText("");
-              className="flex w-full items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 disabled:opacity-50"
+              setInfoText("");
-            >
+              setMode(isLogin ? "signup" : "login");
-              <Chrome className="mr-2 h-4 w-4 text-blue-600" />
+            }}
-              {copy.googleOneClick}
-            </button>
-
-            {errorText ? <p className="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">{errorText}</p> : null}
-            {infoText ? <p className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">{infoText}</p> : null}
-
-            <p className="mt-6 text-center text-xs text-slate-500">
-              {copy.alreadyHave}{" "}
-              <button
-                type="button"
-                onClick={() => setMode("login")}
-                className="font-bold text-blue-600 hover:underline"
-              >
-                {copy.login}
-              </button>
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-h-screen w-full flex-col bg-[#f8fafc] font-sans text-slate-900">
-      {/* Top Header */}
-      <header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6">
-        <Link href="/" className="flex items-center hover:opacity-90">
-          <img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
-        </Link>
-        <div className="flex items-center gap-3">
-          <span className="text-xs text-slate-500 hidden sm:inline">{copy.newToPoly}</span>
-          <button
-            type="button"
-            onClick={() => setMode("signup")}
             className="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-bold text-slate-700 shadow-sm transition hover:border-slate-400 hover:text-slate-950"
           >
-            {copy.signup}
+            {isLogin ? copy.signup : copy.login}
           </button>
         </div>
-      </header>
 
-      {/* Main Login Card Area */}
+        {/* Center Form Card */}
-      <main className="flex flex-1 items-center justify-center p-6">
+        <div className="flex flex-1 items-center justify-center my-8">
-        <div className="w-full max-w-[400px] rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_12px_40px_rgba(15,23,42,0.06)]">
+          <div className="w-full max-w-[400px]">
             <h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
-            {copy.welcomeBack}
+              {isLogin ? copy.welcomeBack : copy.signUpTitle}
             </h1>
             <p className="text-xs text-slate-500 mb-6">
               {copy.subtitle}
@@ -495,7 +392,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
                     minLength={6}
                     value={password}
                     onChange={(event) => setPassword(event.target.value)}
-                  placeholder={copy.passwordLoginPlaceholder}
+                    placeholder={isLogin ? copy.passwordLoginPlaceholder : copy.passwordSignupPlaceholder}
                     className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-10 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                   />
                   <button
@@ -508,12 +405,18 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
                 </div>
               </div>
 
+              {!isLogin && (
+                <p className="text-[11px] leading-5 text-slate-500 mt-2">
+                  {copy.termsAgreement}
+                </p>
+              )}
+
               <button
                 type="submit"
                 disabled={loading}
                 className="flex w-full items-center justify-center rounded-lg bg-[#11161d] py-3 text-sm font-bold text-white shadow-sm transition hover:bg-[#1f2937] disabled:opacity-50 mt-6"
               >
-              {copy.loginSubmit}
+                {isLogin ? (isEn ? "Sign In" : "开启天气决策之旅") : (isEn ? "Sign Up" : "立即创建账号")}
               </button>
             </form>
 
@@ -544,7 +447,13 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
               <p className="mt-2 text-center text-xs text-slate-500">{copy.resendVerify}</p>
             ) : null}
           </div>
-      </main>
+        </div>
+
+        {/* Footer */}
+        <div className="text-[10px] text-slate-400 text-center">
+          © {new Date().getFullYear()} PolyWeather. All rights reserved.
+        </div>
+      </div>
     </div>
   );
 }