From a13dff84ba8b0796c49d3e03aad386ec87204e44 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Tue, 26 May 2026 00:37:18 +0800
Subject: [PATCH] =?UTF-8?q?LoginClient=20=E7=BB=86=E8=8A=82=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/auth/LoginClient.tsx | 365 +++++++++--------------
 1 file changed, 137 insertions(+), 228 deletions(-)

diff --git a/frontend/components/auth/LoginClient.tsx b/frontend/components/auth/LoginClient.tsx
index f4590c1d..8b2448b9 100644
--- a/frontend/components/auth/LoginClient.tsx
+++ b/frontend/components/auth/LoginClient.tsx
@@ -235,97 +235,116 @@ 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 */}
-        <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" />
-          <div className="absolute right-0 bottom-0 h-[300px] w-[300px] rounded-full bg-indigo-500/10 blur-[120px] pointer-events-none" />
-          {/* Grid overlay */}
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
+  return (
+    <div className="flex min-h-screen w-full flex-col lg:flex-row bg-[#f8fafc] font-sans text-slate-900">
+      {/* 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" />
+        <div className="absolute right-0 bottom-0 h-[300px] w-[300px] rounded-full bg-indigo-500/10 blur-[120px] pointer-events-none" />
+        {/* Grid overlay */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
 
-          <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" />
-            </Link>
+        <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 brightness-0 invert" />
+          </Link>
 
-            <div className="mt-8 space-y-6">
-              <h2 className="text-3xl font-black leading-[1.2] tracking-tight">
-                {isEn ? (
-                  <>
-                    Weather intelligence and risk management{" "}
-                    <span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
-                      simplified.
-                    </span>
-                  </>
-                ) : (
-                  <>
-                    天气信息与风险管理{" "}
-                    <span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
-                      化繁为简。
-                    </span>
-                  </>
-                )}
-              </h2>
-              <p className="text-sm leading-7 text-slate-400 max-w-md">
-                {copy.desc}
-              </p>
-            </div>
-          </div>
-
-          {/* Sleek Terminal Preview Widget */}
-          <div className="relative z-10 my-8 rounded-xl border border-white/10 bg-white/[0.02] p-5 backdrop-blur-md shadow-2xl max-w-sm">
-            <div className="flex items-center justify-between border-b border-white/10 pb-3 mb-4">
-              <div className="flex items-center gap-2">
-                <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
-                <span className="font-mono text-[10px] uppercase tracking-wider text-slate-400">
-                  {isEn ? "Runway 02L Settlement" : "跑道 02L 官方结算"}
-                </span>
-              </div>
-              <span className="font-mono text-[9px] font-black text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">LIVE</span>
-            </div>
-            
-            <div className="space-y-3 font-mono text-[11px]">
-              <div className="flex justify-between">
-                <span className="text-slate-400">{isEn ? "Current Temp:" : "当前气温:"}</span>
-                <span className="font-bold text-white">28.8°C</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-slate-400">{isEn ? "UMA Threshold:" : "UMA 结算阈值:"}</span>
-                <span className="font-bold text-rose-400">30.0°C</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-slate-400">{isEn ? "Model Probability:" : "模型预测概率:"}</span>
-                <span className="font-bold text-blue-400">88.5%</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-slate-400">{isEn ? "Market Price:" : "市场买卖价差:"}</span>
-                <span className="font-bold text-white">$10.00</span>
-              </div>
-            </div>
-
-            {/* Sparkline visualization */}
-            <div className="mt-4 pt-3 border-t border-white/5">
-              <div className="flex items-end justify-between gap-1.5 h-12">
-                {[30, 45, 38, 52, 68, 85, 78, 92, 88].map((h, i) => (
-                  <div 
-                    key={i} 
-                    className="flex-1 rounded-t bg-gradient-to-t from-blue-600/30 to-blue-500/90 transition-all duration-300" 
-                    style={{ height: `${h}%` }} 
-                  />
-                ))}
-              </div>
-            </div>
+          <div className="mt-8 space-y-6">
+            <h2 className="text-3xl font-black leading-[1.2] tracking-tight">
+              {isEn ? (
+                <>
+                  Weather intelligence and risk management{" "}
+                  <span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
+                    simplified.
+                  </span>
+                </>
+              ) : (
+                <>
+                  天气信息与风险管理{" "}
+                  <span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
+                    化繁为简。
+                  </span>
+                </>
+              )}
+            </h2>
+            <p className="text-sm leading-7 text-slate-400 max-w-md">
+              {copy.desc}
+            </p>
           </div>
         </div>
 
-        {/* Right White Column (Signup Form) */}
-        <div className="flex flex-1 flex-col items-center justify-center p-8 bg-white">
+        {/* Sleek Terminal Preview Widget */}
+        <div className="relative z-10 my-8 rounded-xl border border-white/10 bg-white/[0.02] p-5 backdrop-blur-md shadow-2xl max-w-sm">
+          <div className="flex items-center justify-between border-b border-white/10 pb-3 mb-4">
+            <div className="flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+              <span className="font-mono text-[10px] uppercase tracking-wider text-slate-400">
+                {isEn ? "Runway 02L Settlement" : "跑道 02L 官方结算"}
+              </span>
+            </div>
+            <span className="font-mono text-[9px] font-black text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">LIVE</span>
+          </div>
+          
+          <div className="space-y-3 font-mono text-[11px]">
+            <div className="flex justify-between">
+              <span className="text-slate-400">{isEn ? "Current Temp:" : "当前气温:"}</span>
+              <span className="font-bold text-white">28.8°C</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-slate-400">{isEn ? "UMA Threshold:" : "UMA 结算阈值:"}</span>
+              <span className="font-bold text-rose-400">30.0°C</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-slate-400">{isEn ? "Model Probability:" : "模型预测概率:"}</span>
+              <span className="font-bold text-blue-400">88.5%</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-slate-400">{isEn ? "Market Price:" : "市场买卖价差:"}</span>
+              <span className="font-bold text-white">$10.00</span>
+            </div>
+          </div>
+
+          {/* Sparkline visualization */}
+          <div className="mt-4 pt-3 border-t border-white/5">
+            <div className="flex items-end justify-between gap-1.5 h-12">
+              {[30, 45, 38, 52, 68, 85, 78, 92, 88].map((h, i) => (
+                <div 
+                  key={i} 
+                  className="flex-1 rounded-t bg-gradient-to-t from-blue-600/30 to-blue-500/90 transition-all duration-300" 
+                  style={{ height: `${h}%` }} 
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Column (Forms) */}
+      <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">
+        {/* Top bar switch */}
+        <div className="flex justify-end items-center gap-3">
+          <span className="text-xs text-slate-500">
+            {isLogin ? copy.newToPoly : copy.alreadyHave}
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              setErrorText("");
+              setInfoText("");
+              setMode(isLogin ? "signup" : "login");
+            }}
+            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"
+          >
+            {isLogin ? copy.signup : copy.login}
+          </button>
+        </div>
+
+        {/* Center Form Card */}
+        <div className="flex flex-1 items-center justify-center my-8">
           <div className="w-full max-w-[400px]">
             <h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
-              {copy.signUpTitle}
+              {isLogin ? copy.welcomeBack : copy.signUpTitle}
             </h1>
             <p className="text-xs text-slate-500 mb-6">
               {copy.subtitle}
@@ -350,9 +369,21 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
               </div>
 
               <div className="space-y-1.5">
-                <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
-                  {copy.password}
-                </label>
+                <div className="flex justify-between items-center">
+                  <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
+                    {copy.password}
+                  </label>
+                  {isLogin && !resetSent ? (
+                    <button
+                      type="button"
+                      onClick={() => void onResetPassword()}
+                      disabled={loading}
+                      className="text-xs text-slate-500 hover:text-blue-600 transition-colors"
+                    >
+                      {copy.reset}
+                    </button>
+                  ) : null}
+                </div>
                 <div className="relative">
                   <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                   <input
@@ -361,7 +392,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
                     minLength={6}
                     value={password}
                     onChange={(event) => setPassword(event.target.value)}
-                    placeholder={copy.passwordSignupPlaceholder}
+                    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
@@ -374,16 +405,18 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
                 </div>
               </div>
 
-              <p className="text-[11px] leading-5 text-slate-500 mt-2">
-                {copy.termsAgreement}
-              </p>
+              {!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-blue-600 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50"
+                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.signupSubmit}
+                {isLogin ? (isEn ? "Sign In" : "开启天气决策之旅") : (isEn ? "Sign Up" : "立即创建账号")}
               </button>
             </form>
 
@@ -407,144 +440,20 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
 
             {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>
+            {errorText && isLogin && errorText.includes("Invalid login") ? (
+              <p className="mt-2 text-center text-xs text-slate-500">{copy.loginFailedHint}</p>
+            ) : null}
+            {infoText === copy.signupCheckEmail ? (
+              <p className="mt-2 text-center text-xs text-slate-500">{copy.resendVerify}</p>
+            ) : null}
           </div>
         </div>
+
+        {/* Footer */}
+        <div className="text-[10px] text-slate-400 text-center">
+          © {new Date().getFullYear()} PolyWeather. All rights reserved.
+        </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}
-          </button>
-        </div>
-      </header>
-
-      {/* Main Login Card Area */}
-      <main className="flex flex-1 items-center justify-center p-6">
-        <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)]">
-          <h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
-            {copy.welcomeBack}
-          </h1>
-          <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">
-              <div className="flex justify-between items-center">
-                <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
-                  {copy.password}
-                </label>
-                {isLogin && !resetSent ? (
-                  <button
-                    type="button"
-                    onClick={() => void onResetPassword()}
-                    disabled={loading}
-                    className="text-xs text-slate-500 hover:text-blue-600 transition-colors"
-                  >
-                    {copy.reset}
-                  </button>
-                ) : null}
-              </div>
-              <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.passwordLoginPlaceholder}
-                  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>
-
-            <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}
-            </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()}
-            disabled={loading}
-            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"
-          >
-            <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}
-          {errorText && isLogin && errorText.includes("Invalid login") ? (
-            <p className="mt-2 text-center text-xs text-slate-500">{copy.loginFailedHint}</p>
-          ) : null}
-          {infoText === copy.signupCheckEmail ? (
-            <p className="mt-2 text-center text-xs text-slate-500">{copy.resendVerify}</p>
-          ) : null}
-        </div>
-      </main>
     </div>
   );
 }