From dd1b881cf1ed69896a23cc7c602e13097ce6ec2b Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Mon, 29 Jun 2026 17:05:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=EF=BC=9A=E9=87=87=E7=94=A8=E5=88=86?=
 =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E5=B7=A6=E4=BE=A7=E5=93=81?=
 =?UTF-8?q?=E7=89=8C=E5=B1=95=E7=A4=BA=E5=8C=BA=EF=BC=88=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF+Logo+=E6=A0=87=E8=AF=AD+=E8=89=B2=E5=BD=A9?=
 =?UTF-8?q?=E8=A3=85=E9=A5=B0=EF=BC=89=EF=BC=8C=E5=8F=B3=E4=BE=A7=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E8=A1=A8=E5=8D=95=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/auth/LoginForm.jsx | 76 ++++++++++++++++++---------
 1 file changed, 50 insertions(+), 26 deletions(-)

diff --git a/web/src/components/auth/LoginForm.jsx b/web/src/components/auth/LoginForm.jsx
index a5227d3..f9361c3 100644
--- a/web/src/components/auth/LoginForm.jsx
+++ b/web/src/components/auth/LoginForm.jsx
@@ -1077,34 +1077,58 @@ const LoginForm = () => {
     );
   };
 
-  return (
-    <div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
-      {/* 背景模糊晕染球 */}
-      <div
-        className='blur-ball blur-ball-indigo'
-        style={{ top: '-80px', right: '-80px', transform: 'none' }}
-      />
-      <div
-        className='blur-ball blur-ball-teal'
-        style={{ top: '50%', left: '-120px' }}
-      />
-      <div className='w-full max-w-sm mt-[60px]'>
-        {showEmailLogin || !hasOAuthLoginOptions
-          ? renderEmailLoginForm()
-          : renderOAuthOptions()}
-        {renderWeChatLoginModal()}
-        {render2FAModal()}
+  const brandTagline = t('统一 AI 模型网关，聚合全球顶尖大模型，一站接入即刻使用');
 
-        {turnstileEnabled && (
-          <div className='flex justify-center mt-6'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
+  return (
+    <div className='flex min-h-screen'>
+      {/* 左侧品牌展示区 */}
+      <div className='hidden lg:flex lg:w-1/2 relative overflow-hidden bg-zinc-900 flex-col items-center justify-center px-12'>
+        <div
+          className='blur-ball blur-ball-indigo'
+          style={{ top: '-120px', right: '-120px', width: '400px', height: '400px' }}
+        />
+        <div
+          className='blur-ball blur-ball-teal'
+          style={{ bottom: '-80px', left: '-80px', width: '350px', height: '350px' }}
+        />
+        <div className='relative z-10 text-center max-w-md'>
+          <img src={logo} alt='Logo' className='w-20 h-20 rounded-2xl mx-auto mb-8 shadow-2xl' />
+          <h1 className='text-4xl font-bold text-white mb-4 tracking-tight'>{systemName}</h1>
+          <p className='text-lg text-zinc-400 leading-relaxed'>{brandTagline}</p>
+          <div className='mt-12 flex gap-3 justify-center'>
+            <div className='w-12 h-1 rounded-full bg-emerald-400' />
+            <div className='w-8 h-1 rounded-full bg-blue-400' />
+            <div className='w-8 h-1 rounded-full bg-violet-400' />
+            <div className='w-6 h-1 rounded-full bg-amber-400' />
           </div>
-        )}
+        </div>
+      </div>
+
+      {/* 右侧登录表单区 */}
+      <div className='flex-1 flex items-center justify-center bg-white dark:bg-zinc-950 px-4 sm:px-6 lg:px-8 py-12'>
+        <div className='w-full max-w-sm'>
+          {/* 移动端显示 logo */}
+          <div className='lg:hidden flex items-center justify-center gap-2 mb-8'>
+            <img src={logo} alt='Logo' className='w-8 h-8 rounded-full' />
+            <span className='text-lg font-semibold'>{systemName}</span>
+          </div>
+          {showEmailLogin || !hasOAuthLoginOptions
+            ? renderEmailLoginForm()
+            : renderOAuthOptions()}
+          {renderWeChatLoginModal()}
+          {render2FAModal()}
+
+          {turnstileEnabled && (
+            <div className='flex justify-center mt-6'>
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );