重新设计登录页面：采用分栏布局，左侧品牌展示区（深色背景+Logo+标语+色彩装饰），右侧登录表单区

web/src/components/auth/LoginForm.jsx

@@ -1077,34 +1077,58 @@ const LoginForm = () => {
     );
   };
 
-  return (
+  const brandTagline = t('统一 AI 模型网关，聚合全球顶尖大模型，一站接入即刻使用');
-    <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()}
 
-        {turnstileEnabled && (
+  return (
-          <div className='flex justify-center mt-6'>
+    <div className='flex min-h-screen'>
-            <Turnstile
+      {/* 左侧品牌展示区 */}
-              sitekey={turnstileSiteKey}
+      <div className='hidden lg:flex lg:w-1/2 relative overflow-hidden bg-zinc-900 flex-col items-center justify-center px-12'>
-              onVerify={(token) => {
+        <div
-                setTurnstileToken(token);
+          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>
   );