rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 侧边面板恢复 commit 35a014e 原始设计 — 左品牌+6功能卡片，右登录表单，白色主题友好

Browse Source
This commit is contained in:
logan committed 2026-05-27 18:15:18 +08:00
1 parent b4fa60bc68
commit f8b2266542
3 files changed
+115 -72
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/AppearanceSettings.tsx
+23 -18
View File
@@ -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, #111827 0%, #1f2937 100%)', accent: '#6366f1', label: '经典侧边' },
sidepanel: { bg: 'linear-gradient(135deg, rgba(88,166,255,0.08), rgba(137,87,229,0.08))', accent: '#3b82f6', 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: '极光之境' },
@@ -177,23 +177,28 @@ export default function AppearanceSettings() {
</div>
)}
{opt.id === 'sidepanel' && (
<div className="absolute inset-0 flex">
<div className="w-[40%] relative overflow-hidden flex flex-col items-center justify-center" style={{ background: 'linear-gradient(135deg, #111827, #1f2937)' }}>
{/* Decorative circles */}
<div className="absolute" style={{ top: '15%', left: '10%', width: 16, height: 16, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
<div className="absolute" style={{ bottom: '20%', right: '10%', width: 24, height: 24, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />
<div className="absolute" style={{ top: '55%', left: '55%', width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
{/* Logo + text */}
<div className="w-3 h-3 rounded-sm mb-1" style={{ background: '#6366f1' }} />
<div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.7)' }} />
<div className="w-12 h-0.5 rounded-sm mt-0.5" style={{ background: 'rgba(255,255,255,0.3)' }} />
</div>
<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.1)' }} />
<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 className="absolute inset-0">
<div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 20% 20%, rgba(88,166,255,0.08), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(137,87,229,0.08), transparent 50%)' }} />
<div className="absolute inset-0 flex">
{/* Left: brand + feature cards */}
<div className="flex-1 p-1.5 flex flex-col justify-center gap-0.5">
<div className="flex items-center gap-0.5 mb-0.5">
<div className="w-2 h-2 rounded-sm" style={{ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)' }} />
<div className="w-6 h-0.5 rounded-sm" style={{ background: 'var(--dg-text-secondary, rgba(255,255,255,0.5))' }} />
</div>
<div className="grid grid-cols-2 gap-0.5">
{[0,1,2,3].map(i => (
<div key={i} className="h-2 rounded-sm" style={{ background: 'var(--dg-bg-tertiary, rgba(255,255,255,0.05))' }} />
))}
</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-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))' }} />
<div className="w-full h-0.5 rounded-sm mt-0.5" style={{ background: '#3b82f6', opacity: 0.5 }} />
</div>
</div>
</div>
)}