From f97c0ab00c8ac78857f4afaa7ff4ab3eb945baf8 Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Wed, 27 May 2026 18:06:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BE=A7=E8=BE=B9=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=8E=9F=E5=A7=8B=E7=AE=80=E6=B4=81=E7=89=88?=
 =?UTF-8?q?=20+=20=E6=98=9F=E9=99=85=E6=BC=AB=E6=B8=B8=E6=B5=81=E6=98=9F?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SidePanel: 恢复 commit 46054c8 原始版（左38%暗色品牌区+右62%登录表单）
- 去掉深海鲸歌动画效果，回归简洁专业风格
- AppearanceSettings: 缩略图预览同步更新
- CosmosView: 流星方向从左上→右下改为右上→左下（符合真实流星观感）
---
 frontend/src/components/login/CosmosView.tsx |  30 +-
 frontend/src/components/login/SidePanel.tsx  | 319 +++++--------------
 frontend/src/pages/AppearanceSettings.tsx    |  41 ++-
 frontend/src/pages/LoginPage.tsx             |   2 +-
 4 files changed, 122 insertions(+), 270 deletions(-)

diff --git a/frontend/src/components/login/CosmosView.tsx b/frontend/src/components/login/CosmosView.tsx
index 09329f6..850c16e 100644
--- a/frontend/src/components/login/CosmosView.tsx
+++ b/frontend/src/components/login/CosmosView.tsx
@@ -9,8 +9,8 @@ const KEYFRAMES = `
 }
 
 @keyframes meteor-fly {
-  0% { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; }
-  100% { transform: translateX(600px) translateY(600px) rotate(-45deg); opacity: 0; }
+  0% { transform: translateX(0) translateY(0) rotate(-135deg); opacity: 1; }
+  100% { transform: translateX(-600px) translateY(600px) rotate(-135deg); opacity: 0; }
 }
 
 @keyframes planet-rotate {
@@ -37,9 +37,9 @@ const KEYFRAMES = `
 }
 
 @keyframes shooting-star {
-  0% { transform: translateX(0) translateY(0) rotate(-35deg) scaleX(1); opacity: 1; }
+  0% { transform: translateX(0) translateY(0) rotate(-125deg) scaleX(1); opacity: 1; }
   70% { opacity: 0.6; }
-  100% { transform: translateX(500px) translateY(500px) rotate(-35deg) scaleX(0.5); opacity: 0; }
+  100% { transform: translateX(-500px) translateY(500px) rotate(-125deg) scaleX(0.5); opacity: 0; }
 }
 `;
 
@@ -196,17 +196,17 @@ export default function CosmosView(): JSX.Element {
         />
       ))}
 
-      {/* ── 流星 ── */}
+      {/* ── 流星：从右上向左下飞，头部亮尾部暗 ── */}
       <div
         style={{
           position: 'absolute',
-          top: '8%',
-          left: '5%',
+          top: '5%',
+          right: '10%',
           width: 120,
           height: 2,
-          background: 'linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0))',
-          borderRadius: '0 50% 50% 0',
-          transform: 'rotate(-45deg)',
+          background: 'linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9))',
+          borderRadius: '50% 0 0 50%',
+          transform: 'rotate(-135deg)',
           animation: 'meteor-fly 4s ease-out infinite 2s',
           pointerEvents: 'none',
           filter: 'blur(0.5px)',
@@ -215,13 +215,13 @@ export default function CosmosView(): JSX.Element {
       <div
         style={{
           position: 'absolute',
-          top: '15%',
-          left: '25%',
+          top: '2%',
+          right: '30%',
           width: 80,
           height: 1.5,
-          background: 'linear-gradient(90deg, rgba(200,220,255,0.8), rgba(255,255,255,0))',
-          borderRadius: '0 50% 50% 0',
-          transform: 'rotate(-35deg)',
+          background: 'linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,0.8))',
+          borderRadius: '50% 0 0 50%',
+          transform: 'rotate(-125deg)',
           animation: 'shooting-star 5s ease-out infinite 7s',
           pointerEvents: 'none',
           filter: 'blur(0.3px)',
diff --git a/frontend/src/components/login/SidePanel.tsx b/frontend/src/components/login/SidePanel.tsx
index c1a4a3d..69fca83 100644
--- a/frontend/src/components/login/SidePanel.tsx
+++ b/frontend/src/components/login/SidePanel.tsx
@@ -1,240 +1,117 @@
 import { useLogin } from '@/hooks/useLogin';
 
+const features = ['SQL审核', '变更审批', '实时监控', '权限管理'];
+
 export default function SidePanel() {
   const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
 
-  /* 15 bioluminescent particles scattered across the deep-sea scene */
-  const biolumParticles = [
-    { top: '8%',  left: '20%', size: 4, color: 'rgba(6,182,212,0.4)',    delay: '0s',   dur: '4s' },
-    { top: '15%', left: '65%', size: 5, color: 'rgba(20,184,166,0.3)',   delay: '1.2s', dur: '5s' },
-    { top: '22%', left: '40%', size: 3, color: 'rgba(34,211,238,0.5)',   delay: '0.5s', dur: '3.5s' },
-    { top: '28%', left: '12%', size: 6, color: 'rgba(6,182,212,0.4)',    delay: '2.8s', dur: '4.5s' },
-    { top: '35%', left: '78%', size: 4, color: 'rgba(6,182,212,0.4)',    delay: '3.5s', dur: '3s' },
-    { top: '42%', left: '30%', size: 7, color: 'rgba(20,184,166,0.3)',   delay: '1s',   dur: '5.5s' },
-    { top: '48%', left: '55%', size: 3, color: 'rgba(34,211,238,0.5)',   delay: '4.2s', dur: '4s' },
-    { top: '55%', left: '18%', size: 5, color: 'rgba(6,182,212,0.4)',    delay: '0.8s', dur: '6s' },
-    { top: '60%', left: '70%', size: 4, color: 'rgba(6,182,212,0.4)',    delay: '5s',   dur: '3.5s' },
-    { top: '67%', left: '45%', size: 8, color: 'rgba(20,184,166,0.3)',   delay: '2s',   dur: '4.5s' },
-    { top: '73%', left: '25%', size: 3, color: 'rgba(6,182,212,0.4)',    delay: '6s',   dur: '5s' },
-    { top: '78%', left: '85%', size: 5, color: 'rgba(34,211,238,0.5)',   delay: '1.5s', dur: '3s' },
-    { top: '83%', left: '50%', size: 4, color: 'rgba(6,182,212,0.4)',    delay: '7s',   dur: '4.5s' },
-    { top: '88%', left: '15%', size: 6, color: 'rgba(6,182,212,0.4)',    delay: '3s',   dur: '5.5s' },
-    { top: '92%', left: '60%', size: 3, color: 'rgba(20,184,166,0.3)',   delay: '8s',   dur: '3.5s' },
-  ];
-
-  /* 5 ocean wave layers */
-  const waveLayers = [
-    { top: '20%', height: 80,  border: 'border-bottom', borderColor: 'rgba(6,182,212,0.06)',  anim: 'ocean-wave-1 12s ease-in-out infinite' },
-    { top: '30%', height: 100, border: 'border-bottom', borderColor: 'rgba(20,184,166,0.08)', anim: 'ocean-wave-2 15s ease-in-out infinite' },
-    { top: '45%', height: 120, border: 'border-top',    borderColor: 'rgba(6,182,212,0.10)',  anim: 'ocean-wave-3 18s ease-in-out infinite' },
-    { top: '60%', height: 90,  border: 'border-bottom', borderColor: 'rgba(20,184,166,0.06)', anim: 'ocean-wave-4 14s ease-in-out infinite' },
-    { top: '75%', height: 70,  border: 'border-top',    borderColor: 'rgba(6,182,212,0.04)',  anim: 'ocean-wave-5 20s ease-in-out infinite' },
-  ];
-
-  /* Feature pills */
-  const featurePills = ['安全审核', '变更管控', '权限隔离'];
-
   return (
-    <div className="flex min-h-screen">
-      {/* ========== Left 40% — Deep Sea Scene ========== */}
+    <div className="flex min-h-screen" style={{ background: 'var(--dg-bg-primary)', color: 'var(--dg-text-primary)' }}>
+      {/* Left Panel — 38% Brand Area */}
       <div
+        className="relative flex flex-col justify-between"
         style={{
-          position: 'relative',
-          width: '40%',
-          background: 'linear-gradient(180deg, #020810 0%, #041420 30%, #062030 60%, #041820 100%)',
+          width: '38%',
+          background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)',
+          padding: '56px 44px',
           overflow: 'hidden',
         }}
       >
-        {/* --- Deep-sea light shafts --- */}
+        {/* Subtle decorative gradient orb */}
         <div
           style={{
             position: 'absolute',
-            top: 0,
-            left: '25%',
-            width: 1,
-            height: '100%',
-            background: 'linear-gradient(to bottom, rgba(6,182,212,0.08), transparent)',
-            animation: 'ocean-lightshaft 5s ease-in-out 0s infinite',
-            zIndex: 1,
-          }}
-        />
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: '55%',
-            width: 2,
-            height: '100%',
-            background: 'linear-gradient(to bottom, rgba(6,182,212,0.06), transparent)',
-            animation: 'ocean-lightshaft 7s ease-in-out 2s infinite',
-            zIndex: 1,
-          }}
-        />
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: '78%',
-            width: 1,
-            height: '100%',
-            background: 'linear-gradient(to bottom, rgba(20,184,166,0.05), transparent)',
-            animation: 'ocean-lightshaft 4s ease-in-out 4s infinite',
-            zIndex: 1,
+            top: '-80px',
+            right: '-80px',
+            width: 280,
+            height: 280,
+            borderRadius: '50%',
+            background: 'radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%)',
+            filter: 'blur(30px)',
           }}
         />
 
-        {/* --- 5 Wave layers --- */}
-        {waveLayers.map((wave, i) => (
+        {/* Top brand section */}
+        <div style={{ position: 'relative', zIndex: 2 }}>
+          {/* Logo mark */}
           <div
-            key={`wave-${i}`}
             style={{
-              position: 'absolute',
-              top: wave.top,
-              left: '-50%',
-              width: '200%',
-              height: wave.height,
-              borderRadius: '50%',
-              [wave.border]: `1px solid ${wave.borderColor}`,
-              animation: wave.anim,
-              zIndex: 2,
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginBottom: 56,
             }}
-          />
-        ))}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <ellipse cx="12" cy="5" rx="9" ry="3" />
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+            </svg>
+          </div>
 
-        {/* --- 15 Bioluminescent particles --- */}
-        {biolumParticles.map((p, i) => (
-          <div
-            key={`biolum-${i}`}
-            style={{
-              position: 'absolute',
-              top: p.top,
-              left: p.left,
-              width: p.size,
-              height: p.size,
-              borderRadius: '50%',
-              background: p.color,
-              boxShadow: `0 0 ${p.size * 2}px ${p.color}`,
-              animation: `ocean-biolum-pulse ${p.dur} ease-in-out ${p.delay} infinite`,
-              zIndex: 3,
-            }}
-          />
-        ))}
-
-        {/* --- Brand content (left-aligned, bottom section) --- */}
-        <div
-          style={{
-            position: 'relative',
-            zIndex: 10,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-end',
-            height: '100%',
-            padding: '0 44px 56px',
-          }}
-        >
-          {/* Main title */}
-          <div style={{ fontSize: 42, fontWeight: 700, color: 'rgba(6,182,212,0.9)', marginBottom: 12, lineHeight: 1.2 }}>
-            SQL审核平台
-          </div>
-          {/* Subtitle */}
-          <div style={{ fontSize: 15, color: 'rgba(148,163,184,0.5)', marginBottom: 32 }}>
-            让数据安全如深海般沉静
-          </div>
-          {/* Feature pills */}
-          <div style={{ display: 'flex', gap: 10 }}>
-            {featurePills.map((pill) => (
-              <span
-                key={pill}
-                style={{
-                  padding: '4px 12px',
-                  borderRadius: 20,
-                  background: 'rgba(6,182,212,0.08)',
-                  color: 'rgba(6,182,212,0.5)',
-                  fontSize: 11,
-                }}
-              >
-                {pill}
-              </span>
-            ))}
+          {/* Stacked large text — left aligned */}
+          <div style={{ marginBottom: 24 }}>
+            <div style={{ fontSize: 52, fontWeight: 700, color: '#fff', lineHeight: 1.1, letterSpacing: '-1px' }}>
+              SQL审核
+            </div>
+            <div style={{ fontSize: 52, fontWeight: 700, color: '#fff', lineHeight: 1.1, letterSpacing: '-1px', marginTop: 4 }}>
+              平台
+            </div>
           </div>
+          <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 15, lineHeight: 1.6, maxWidth: 280 }}>
+            企业级数据库审核与合规管理解决方案，为团队提供安全可靠的数据管理体验。
+          </p>
         </div>
 
-        {/* --- Keyframes (ocean- prefix) --- */}
-        <style>{`
-          @keyframes ocean-wave-1 {
-            0%, 100% { transform: translateX(-30px); }
-            50%      { transform: translateX(30px); }
-          }
-          @keyframes ocean-wave-2 {
-            0%, 100% { transform: translateX(30px); }
-            50%      { transform: translateX(-30px); }
-          }
-          @keyframes ocean-wave-3 {
-            0%, 100% { transform: translateX(-20px); }
-            50%      { transform: translateX(20px); }
-          }
-          @keyframes ocean-wave-4 {
-            0%, 100% { transform: translateX(25px); }
-            50%      { transform: translateX(-25px); }
-          }
-          @keyframes ocean-wave-5 {
-            0%, 100% { transform: translateX(-30px); }
-            50%      { transform: translateX(30px); }
-          }
-
-          @keyframes ocean-biolum-pulse {
-            0%, 100% { opacity: 0.1; transform: scale(1); }
-            50%      { opacity: 0.6; transform: scale(1.5); }
-          }
-
-          @keyframes ocean-lightshaft {
-            0%, 100% { opacity: 0.3; }
-            50%      { opacity: 0.8; }
-          }
-        `}</style>
+        {/* Bottom feature pills */}
+        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+          {features.map((tag) => (
+            <span
+              key={tag}
+              style={{
+                padding: '6px 14px',
+                borderRadius: 20,
+                background: 'rgba(255,255,255,0.06)',
+                color: 'rgba(255,255,255,0.6)',
+                fontSize: 12,
+                fontWeight: 500,
+                letterSpacing: '0.3px',
+              }}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
       </div>
 
-      {/* ========== Right 60% — Login Form ========== */}
+      {/* Right Panel — 62% Login Form */}
       <div
         className="flex items-center justify-center"
-        style={{ width: '60%', background: '#060e18' }}
+        style={{ flex: 1, padding: 64 }}
       >
         <form
           onSubmit={handleLogin}
-          style={{
-            width: '100%',
-            maxWidth: 400,
-            display: 'flex',
-            flexDirection: 'column',
-            padding: '0 40px',
-          }}
+          style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column' }}
         >
-          {/* Form title */}
-          <h2 style={{ fontSize: 28, fontWeight: 700, marginBottom: 8, color: '#e2e8f0' }}>
+          <h2 style={{ fontSize: 30, fontWeight: 600, marginBottom: 8, color: 'var(--dg-text-primary)' }}>
             欢迎回来
           </h2>
-          <p style={{ fontSize: 14, color: 'rgba(148,163,184,0.5)', marginBottom: 40 }}>
-            登录你的工作空间
+          <p style={{ color: 'var(--dg-text-muted)', fontSize: 15, marginBottom: 44 }}>
+            登录以继续
           </p>
 
-          {/* Error message */}
           {error && (
-            <div style={{ color: '#f87171', marginBottom: 16 }}>
+            <div style={{ color: '#f87171', fontSize: 13, marginBottom: 16, padding: '10px 14px', background: 'rgba(248,113,113,0.08)', borderRadius: 8 }}>
               {error}
             </div>
           )}
 
-          {/* Username field */}
           <div style={{ marginBottom: 24 }}>
-            <label
-              style={{
-                display: 'block',
-                fontSize: 12,
-                color: 'rgba(6,182,212,0.5)',
-                marginBottom: 8,
-                fontWeight: 500,
-              }}
-            >
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
               用户名
             </label>
             <input
@@ -246,35 +123,20 @@ export default function SidePanel() {
               style={{
                 padding: '13px 16px',
                 borderRadius: 10,
-                background: 'rgba(6,30,50,0.6)',
-                border: '1px solid rgba(6,182,212,0.08)',
-                color: '#e2e8f0',
+                background: 'var(--dg-bg-secondary)',
+                border: 'none',
+                color: 'var(--dg-text-primary)',
                 fontSize: 14,
                 outline: 'none',
-                transition: 'border-color 0.3s, background 0.3s',
-              }}
-              onFocus={(e) => {
-                e.target.style.borderColor = 'rgba(6,182,212,0.3)';
-                e.target.style.background = 'rgba(6,30,50,0.8)';
-              }}
-              onBlur={(e) => {
-                e.target.style.borderColor = 'rgba(6,182,212,0.08)';
-                e.target.style.background = 'rgba(6,30,50,0.6)';
+                transition: 'background 0.2s',
               }}
+              onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
+              onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
             />
           </div>
 
-          {/* Password field */}
-          <div style={{ marginBottom: 32 }}>
-            <label
-              style={{
-                display: 'block',
-                fontSize: 12,
-                color: 'rgba(6,182,212,0.5)',
-                marginBottom: 8,
-                fontWeight: 500,
-              }}
-            >
+          <div style={{ marginBottom: 36 }}>
+            <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
               密码
             </label>
             <input
@@ -286,25 +148,18 @@ export default function SidePanel() {
               style={{
                 padding: '13px 16px',
                 borderRadius: 10,
-                background: 'rgba(6,30,50,0.6)',
-                border: '1px solid rgba(6,182,212,0.08)',
-                color: '#e2e8f0',
+                background: 'var(--dg-bg-secondary)',
+                border: 'none',
+                color: 'var(--dg-text-primary)',
                 fontSize: 14,
                 outline: 'none',
-                transition: 'border-color 0.3s, background 0.3s',
-              }}
-              onFocus={(e) => {
-                e.target.style.borderColor = 'rgba(6,182,212,0.3)';
-                e.target.style.background = 'rgba(6,30,50,0.8)';
-              }}
-              onBlur={(e) => {
-                e.target.style.borderColor = 'rgba(6,182,212,0.08)';
-                e.target.style.background = 'rgba(6,30,50,0.6)';
+                transition: 'background 0.2s',
               }}
+              onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
+              onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
             />
           </div>
 
-          {/* Submit button */}
           <button
             type="submit"
             disabled={loading || !username || !password}
@@ -319,8 +174,6 @@ export default function SidePanel() {
               cursor: loading || !username || !password ? 'not-allowed' : 'pointer',
               opacity: loading || !username || !password ? 0.5 : 1,
               transition: 'opacity 0.2s, transform 0.1s',
-              background: 'linear-gradient(135deg, #06b6d4, #14b8a6)',
-              boxShadow: '0 4px 20px rgba(6,182,212,0.2)',
             }}
           >
             {loading ? '登录中…' : '登录'}
diff --git a/frontend/src/pages/AppearanceSettings.tsx b/frontend/src/pages/AppearanceSettings.tsx
index 80b11b9..c760703 100644
--- a/frontend/src/pages/AppearanceSettings.tsx
+++ b/frontend/src/pages/AppearanceSettings.tsx
@@ -9,7 +9,7 @@ import { toast } from '@/hooks/useToast';
 const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; label: string }> = {
   split: { bg: 'linear-gradient(135deg, #080c14 0%, #0c1420 100%)', accent: '#00d4aa', label: '晶格科技' },
   centered: { bg: 'linear-gradient(180deg, #0a0a1a 0%, #1a1035 50%, #2d1810 100%)', accent: '#fbbf24', label: '晨曦微光' },
-  sidepanel: { bg: 'linear-gradient(180deg, #020810 0%, #062030 100%)', accent: '#06b6d4', label: '深海鲸歌' },
+  sidepanel: { bg: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)', accent: '#6366f1', label: '简洁专业' },
   fullimage: { bg: '#0d1117', accent: '#6366f1', label: 'GitHub/AWS' },
   minimal: { bg: 'linear-gradient(160deg, #0a0a1a 0%, #0f0a2a 40%, #150825 70%, #0a0a1a 100%)', accent: '#ec4899', label: 'Premium Dark' },
   aurora: { bg: 'linear-gradient(180deg, #050810 0%, #0a0e1a 30%, #0d1425 60%, #080c14 100%)', accent: '#10b981', label: '极光之境' },
@@ -178,28 +178,27 @@ export default function AppearanceSettings() {
                   )}
                   {opt.id === 'sidepanel' && (
                     <div className="absolute inset-0 flex">
-                      <div className="w-[38%] relative overflow-hidden" style={{ background: 'linear-gradient(180deg, #020810 0%, #062030 100%)' }}>
-                        {/* Wave lines */}
-                        {[25, 40, 55, 70].map(t => (
-                          <div key={t} className="absolute left-1/2 -translate-x-1/2 rounded-full" style={{ width: '120%', height: 20, top: `${t}%`, borderTop: '1px solid rgba(6,182,212,0.1)', borderRadius: '50%' }} />
-                        ))}
-                        {/* Biolum dots */}
-                        {[30, 50, 65].map(t => (
-                          <div key={t} className="absolute rounded-full" style={{ width: 3, height: 3, background: 'rgba(6,182,212,0.5)', top: `${t}%`, left: '30%', boxShadow: '0 0 4px rgba(6,182,212,0.4)' }} />
-                        ))}
-                        <div className="absolute bottom-2 left-2 flex flex-col gap-0.5">
-                          <div className="w-6 h-1 rounded-sm" style={{ background: 'rgba(6,182,212,0.5)' }} />
-                          <div className="flex gap-0.5">
-                            {['审核', '管控'].map(t => (
-                              <span key={t} className="px-1 rounded text-[5px]" style={{ background: 'rgba(6,182,212,0.1)', color: 'rgba(6,182,212,0.5)' }}>{t}</span>
-                            ))}
-                          </div>
+                      <div className="w-[38%] relative overflow-hidden flex flex-col justify-between p-1.5" style={{ background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)' }}>
+                        {/* Brand area */}
+                        <div className="flex flex-col gap-0.5">
+                          <div className="w-2.5 h-2.5 rounded-sm" style={{ background: 'linear-gradient(135deg, #6366f1, #8b5cf6)' }} />
+                          <div className="w-6 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.8)' }} />
+                          <div className="w-8 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.8)' }} />
+                          <div className="w-10 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
+                        </div>
+                        {/* Feature pills */}
+                        <div className="flex flex-wrap gap-0.5">
+                          {['SQL审核', '变更审批', '监控'].map(t => (
+                            <span key={t} className="px-0.5 rounded text-[4px]" style={{ background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.5)' }}>{t}</span>
+                          ))}
                         </div>
                       </div>
-                      <div className="flex-1 p-2 flex flex-col justify-center gap-1" style={{ background: '#060e18' }}>
-                        <div className="h-0.5 rounded-sm" style={{ background: 'rgba(6,182,212,0.1)' }} />
-                        <div className="h-0.5 rounded-sm" style={{ background: 'rgba(6,182,212,0.1)' }} />
-                        <div className="h-1 rounded-sm mt-0.5" style={{ background: '#06b6d4', opacity: 0.5 }} />
+                      <div className="flex-1 p-2 flex flex-col justify-center gap-0.5" style={{ background: 'var(--dg-bg-primary, #0a0a1a)' }}>
+                        <div className="w-4 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
+                        <div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
+                        <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
+                        <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
+                        <div className="w-full h-1 rounded-sm mt-0.5" style={{ background: '#6366f1', opacity: 0.5 }} />
                       </div>
                     </div>
                   )}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 3b08226..9945e13 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -28,7 +28,7 @@ const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
 export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }[] = [
   { id: 'split', name: '经典分屏', desc: '左黑右白，晶格科技感' },
   { id: 'centered', name: '居中卡片', desc: '黎明光柱，金色晨曦氛围' },
-  { id: 'sidepanel', name: '侧边面板', desc: '深海波浪，生物发光粒子' },
+  { id: 'sidepanel', name: '侧边面板', desc: '左品牌右登录，简洁专业' },
   { id: 'fullimage', name: '全屏背景', desc: '科技背景，毛玻璃卡片' },
   { id: 'minimal', name: '深蓝紫曲线', desc: '优雅暗黑，粉紫流动曲线' },
   { id: 'aurora', name: '极光之境', desc: '北极光动态渐变，紫绿流光' },