From 872c204e8065ac85262f8d11f7088d0076e129fc Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Wed, 27 May 2026 16:25:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20SplitView=20=E5=B7=A6=E9=BB=91=E5=8F=B3?=
 =?UTF-8?q?=E7=99=BD+=E5=B7=A6=E4=BE=A7=E6=96=87=E5=AD=97=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E9=86=92=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 右侧改为纯白背景(#fff)，输入框浅灰底+深色文字+青绿聚焦边框
- 左侧品牌内容从底部移至垂直居中位置
- 输入框从底线风格改为圆角卡片风格，匹配白色面板
---
 frontend/src/components/login/SplitView.tsx | 52 ++++++++++-----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/login/SplitView.tsx b/frontend/src/components/login/SplitView.tsx
index 5114bfd..f82b9ed 100644
--- a/frontend/src/components/login/SplitView.tsx
+++ b/frontend/src/components/login/SplitView.tsx
@@ -23,24 +23,24 @@ const LATTICE_NODES = [
   { top: '52%', left: '57%', size: 5, delay: 0.35, duration: 2.5 },
 ];
 
-const INPUT_STYLE: React.CSSProperties = {
-  padding: '12px 0',
-  background: 'transparent',
-  border: 'none',
-  borderBottom: '1px solid rgba(148,163,184,0.15)',
-  borderRadius: 0,
-  color: '#e2e8f0',
+const INPUT_STYLE_LIGHT: React.CSSProperties = {
+  padding: '12px 16px',
+  background: '#f8fafc',
+  border: '1px solid #e2e8f0',
+  borderRadius: 10,
+  color: '#1e293b',
   fontSize: 14,
   outline: 'none',
   width: '100%',
-  transition: 'border-color 0.3s',
+  transition: 'border-color 0.3s, box-shadow 0.3s',
 };
 
-const LABEL_STYLE: React.CSSProperties = {
+const LABEL_STYLE_LIGHT: React.CSSProperties = {
   display: 'block',
   fontSize: 12,
-  color: 'rgba(148,163,184,0.5)',
+  color: '#64748b',
   marginBottom: 8,
+  fontWeight: 500,
 };
 
 export default function SplitView() {
@@ -57,8 +57,8 @@ export default function SplitView() {
           width: '55%',
           background: '#080c14',
           display: 'flex',
-          alignItems: 'flex-end',
-          padding: '0 56px 80px 56px',
+          alignItems: 'center',
+          padding: '0 56px',
         }}
       >
         {/* ── Perspective Grid ── */}
@@ -204,7 +204,7 @@ export default function SplitView() {
         className="flex items-center justify-center"
         style={{
           width: '45%',
-          background: '#0c1017',
+          background: '#ffffff',
           padding: 48,
         }}
       >
@@ -212,40 +212,40 @@ export default function SplitView() {
           onSubmit={handleLogin}
           style={{ width: '100%', maxWidth: 360, display: 'flex', flexDirection: 'column' }}
         >
-          <h2 style={{ fontSize: 24, fontWeight: 600, color: '#e2e8f0', marginBottom: 8 }}>
+          <h2 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
             登录
           </h2>
-          <p style={{ color: 'rgba(148,163,184,0.6)', fontSize: 14, marginBottom: 40 }}>
+          <p style={{ color: '#94a3b8', fontSize: 14, marginBottom: 40 }}>
             访问你的工作空间
           </p>
 
-          {error && <div style={{ color: '#f87171', fontSize: 13, marginBottom: 16 }}>{error}</div>}
+          {error && <div style={{ color: '#ef4444', fontSize: 13, marginBottom: 16 }}>{error}</div>}
 
-          <div style={{ marginBottom: 28 }}>
-            <label style={LABEL_STYLE}>用户名</label>
+          <div style={{ marginBottom: 24 }}>
+            <label style={LABEL_STYLE_LIGHT}>用户名</label>
             <input
               type="text"
               placeholder="请输入用户名"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               className="w-full"
-              style={INPUT_STYLE}
-              onFocus={(e) => { e.target.style.borderBottomColor = '#00d4aa'; }}
-              onBlur={(e) => { e.target.style.borderBottomColor = 'rgba(148,163,184,0.15)'; }}
+              style={INPUT_STYLE_LIGHT}
+              onFocus={(e) => { e.target.style.borderColor = '#00d4aa'; e.target.style.boxShadow = '0 0 0 3px rgba(0,212,170,0.1)'; }}
+              onBlur={(e) => { e.target.style.borderColor = '#e2e8f0'; e.target.style.boxShadow = 'none'; }}
             />
           </div>
 
-          <div style={{ marginBottom: 36 }}>
-            <label style={LABEL_STYLE}>密码</label>
+          <div style={{ marginBottom: 32 }}>
+            <label style={LABEL_STYLE_LIGHT}>密码</label>
             <input
               type="password"
               placeholder="请输入密码"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               className="w-full"
-              style={INPUT_STYLE}
-              onFocus={(e) => { e.target.style.borderBottomColor = '#00d4aa'; }}
-              onBlur={(e) => { e.target.style.borderBottomColor = 'rgba(148,163,184,0.15)'; }}
+              style={INPUT_STYLE_LIGHT}
+              onFocus={(e) => { e.target.style.borderColor = '#00d4aa'; e.target.style.boxShadow = '0 0 0 3px rgba(0,212,170,0.1)'; }}
+              onBlur={(e) => { e.target.style.borderColor = '#e2e8f0'; e.target.style.boxShadow = 'none'; }}
             />
           </div>