fix: 功能展示风格提到第一位+比例优化 — 右侧400px更紧凑，左侧间距缩减，默认登录页改为sidepanel

frontend/src/components/login/SidePanel.tsx

@@ -30,28 +30,28 @@ export default function SidePanel() {
       </button>
 
       {/* 左侧 */}
-      <div className="flex-1 flex flex-col justify-center px-16 relative z-10">
-        <div className="mb-10">
-          <div className="flex items-center gap-3 mb-6">
-            <div className="w-12 h-12 rounded-xl dg-gradient-br flex items-center justify-center">
-              <Shield className="w-7 h-7 text-white" />
+      <div className="flex-1 flex flex-col justify-center px-12 relative z-10">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-5">
+            <div className="w-11 h-11 rounded-xl dg-gradient-br flex items-center justify-center">
+              <Shield className="w-6 h-6 text-white" />
             </div>
-            <h1 className="text-5xl font-bold dg-gradient-text">
+            <h1 className="text-4xl font-bold dg-gradient-text">
               SQL-Platform
             </h1>
           </div>
-          <p className="text-lg text-[var(--dg-text-secondary)] leading-relaxed">
-            企业级数据审核与变更管理平台<br />
-            支持多数据库类型，提供完善的 SQL 审核、审批流程和审计追踪
+          <p className="text-base text-[var(--dg-text-secondary)] leading-relaxed">
+            企业级数据审核与变更管理平台，支持多数据库类型，<br />
+            提供完善的 SQL 审核、审批流程和审计追踪
           </p>
         </div>
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-2 gap-3">
           {features.map((f, i) => (
-            <div key={i} className="flex items-start gap-3 p-4 rounded-xl bg-[var(--dg-bg-secondary)]/60 border border-[var(--dg-border)] hover:border-blue-500/50 hover:bg-[var(--dg-bg-secondary)] transition-all group">
-              <f.icon className="w-6 h-6 text-blue-400 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform" />
+            <div key={i} className="flex items-start gap-2.5 p-3 rounded-xl bg-[var(--dg-bg-secondary)]/60 border border-[var(--dg-border)] hover:border-blue-500/50 hover:bg-[var(--dg-bg-secondary)] transition-all group">
+              <f.icon className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform" />
               <div>
-                <h4 className="text-sm font-semibold mb-1">{f.title}</h4>
+                <h4 className="text-sm font-semibold mb-0.5">{f.title}</h4>
                 <p className="text-xs text-[var(--dg-text-secondary)]">{f.desc}</p>
               </div>
             </div>
@@ -60,7 +60,7 @@ export default function SidePanel() {
       </div>
 
       {/* 右侧 */}
-      <div className="w-[480px] flex flex-col justify-center px-16 bg-[var(--dg-bg-secondary)]/80 backdrop-blur-xl border-l border-[var(--dg-border)] relative z-10">
+      <div className="w-[400px] flex flex-col justify-center px-12 bg-[var(--dg-bg-secondary)]/80 backdrop-blur-xl border-l border-[var(--dg-border)] relative z-10">
         <div className="w-full max-w-sm mx-auto">
           <div className="flex items-center gap-2 mb-2">
             <Sparkles className="w-5 h-5 text-blue-400" />

frontend/src/pages/AppearanceSettings.tsx

@@ -193,7 +193,7 @@ export default function AppearanceSettings() {
                           </div>
                         </div>
                         {/* Right: login form */}
-                        <div className="w-[35%] p-1 flex flex-col justify-center gap-0.5" style={{ background: 'var(--dg-bg-secondary, rgba(255,255,255,0.03))' }}>
+                        <div className="w-[30%] p-1 flex flex-col justify-center gap-0.5" style={{ background: 'var(--dg-bg-secondary, rgba(255,255,255,0.03))' }}>
                           <div className="w-3 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
                           <div className="w-full h-0.5 rounded-sm" style={{ background: 'var(--dg-bg-tertiary, rgba(255,255,255,0.08))' }} />
                           <div className="w-full h-0.5 rounded-sm" style={{ background: 'var(--dg-bg-tertiary, rgba(255,255,255,0.08))' }} />

frontend/src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
+import SidePanel from '@/components/login/SidePanel';
 import SplitView from '@/components/login/SplitView';
 import CenteredCard from '@/components/login/CenteredCard';
-import SidePanel from '@/components/login/SidePanel';
 import FullImage from '@/components/login/FullImage';
 import MinimalDark from '@/components/login/MinimalDark';
 import AuroraView from '@/components/login/AuroraView';
@@ -10,12 +10,12 @@ import InkWashView from '@/components/login/InkWashView';
 import NeonCityView from '@/components/login/NeonCityView';
 import GradientMeshView from '@/components/login/GradientMeshView';
 
-export type LoginStyle = 'split' | 'centered' | 'sidepanel' | 'fullimage' | 'minimal' | 'aurora' | 'cosmos' | 'inkwash' | 'neoncity' | 'gradientmesh';
+export type LoginStyle = 'sidepanel' | 'split' | 'centered' | 'fullimage' | 'minimal' | 'aurora' | 'cosmos' | 'inkwash' | 'neoncity' | 'gradientmesh';
 
 const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
+  sidepanel: SidePanel,
   split: SplitView,
   centered: CenteredCard,
-  sidepanel: SidePanel,
   fullimage: FullImage,
   minimal: MinimalDark,
   aurora: AuroraView,
@@ -26,9 +26,9 @@ const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
 };
 
 export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }[] = [
+  { id: 'sidepanel', name: '功能展示', desc: '左品牌+功能卡片，右登录表单' },
   { id: 'split', name: '经典分屏', desc: '左黑右白，晶格科技感' },
   { id: 'centered', name: '居中卡片', desc: '黎明光柱，金色晨曦氛围' },
-  { id: 'sidepanel', name: '侧边面板', desc: '左品牌+功能卡片，右登录表单' },
   { id: 'fullimage', name: '全屏背景', desc: '科技背景，毛玻璃卡片' },
   { id: 'minimal', name: '深蓝紫曲线', desc: '优雅暗黑，粉紫流动曲线' },
   { id: 'aurora', name: '极光之境', desc: '北极光动态渐变，紫绿流光' },
@@ -39,7 +39,7 @@ export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }
 ];
 
 export default function LoginPage() {
-  const [style, setStyle] = useState<LoginStyle>('split');
+  const [style, setStyle] = useState<LoginStyle>('sidepanel');
   const [ready, setReady] = useState(false);
 
   useEffect(() => {
@@ -64,6 +64,6 @@ export default function LoginPage() {
 
   if (!ready) return null; // avoid flash
 
-  const Component = LOGIN_STYLES[style] || SplitView;
+  const Component = LOGIN_STYLES[style] || SidePanel;
   return <Component />;
 }