feat: 登录页3种风格全新重设计 — 数据晶格/晨曦微光/深海鲸歌
- SplitView: 晶格矩阵透视网格+19脉动节点+青绿微光, Tron科技感 - CenteredCard: 黎明渐变+10条金色光柱+地平线光晕+星点残留 - SidePanel: 深海渐变+5层波浪线+15生物发光粒子+3深海光柱 - AppearanceSettings: 预览颜色+缩略图同步更新 - LoginPage: 风格描述文案更新
This commit is contained in:
logan committed
1 parent
439eb6d6d7
commit
03bf7c92a9
5 files changed
+562
-489
No files matched your search
@@ -7,9 +7,9 @@ import { toast } from '@/hooks/useToast';
|
||||
|
||||
// Login style preview color themes (independent from app theme)
|
||||
const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; label: string }> = {
|
||||
split: { bg: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)', accent: '#6366f1', label: 'Linear/Notion' },
|
||||
centered: { bg: 'radial-gradient(ellipse at 50% 40%, #0a0a1a 0%, #1a0a2e 100%)', accent: '#8b5cf6', label: 'Stripe/Vercel' },
|
||||
sidepanel: { bg: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)', accent: '#6366f1', label: 'Slack/Figma' },
|
||||
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: '深海鲸歌' },
|
||||
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' },
|
||||
};
|
||||
@@ -141,42 +141,60 @@ export default function AppearanceSettings() {
|
||||
{opt.id === 'split' && (
|
||||
<>
|
||||
<div className="absolute inset-0 flex">
|
||||
<div className="flex-1 p-2 flex flex-col justify-center gap-1">
|
||||
<div className="w-6 h-1.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
|
||||
<div className="w-8 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.15)' }} />
|
||||
{/* Grid lines preview */}
|
||||
<div className="flex-1 relative overflow-hidden" style={{ background: '#080c14' }}>
|
||||
<div className="absolute inset-0" style={{ backgroundImage: 'linear-gradient(rgba(0,212,170,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,170,0.08) 1px, transparent 1px)', backgroundSize: '10px 10px' }} />
|
||||
{[20, 45, 70].map(t => <div key={t} className="absolute rounded-full" style={{ width: 3, height: 3, background: '#00d4aa', top: `${t}%`, left: `${30 + t * 0.5}%`, boxShadow: '0 0 4px #00d4aa' }} />)}
|
||||
<div className="absolute bottom-2 left-2 flex flex-col gap-0.5">
|
||||
<div className="w-5 h-1 rounded-sm" style={{ background: 'rgba(226,232,240,0.4)' }} />
|
||||
<div className="w-7 h-0.5 rounded-sm" style={{ background: 'rgba(0,212,170,0.3)' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/5 bg-[var(--dg-bg-secondary)] p-2 flex flex-col justify-center gap-1">
|
||||
<div className="h-0.5 rounded-sm bg-[var(--dg-bg-hover)]" />
|
||||
<div className="h-0.5 rounded-sm bg-[var(--dg-bg-hover)]" />
|
||||
<div className="h-1 rounded-sm mt-0.5" style={{ background: preview.accent, opacity: 0.6 }} />
|
||||
<div className="w-2/5 p-2 flex flex-col justify-center gap-1" style={{ background: '#0c1017' }}>
|
||||
<div className="h-0.5 rounded-sm" style={{ background: 'rgba(148,163,184,0.15)' }} />
|
||||
<div className="h-0.5 rounded-sm" style={{ background: 'rgba(148,163,184,0.15)' }} />
|
||||
<div className="h-1 rounded-sm mt-0.5" style={{ background: '#00d4aa', opacity: 0.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{opt.id === 'centered' && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-3/4 rounded-lg p-2 flex flex-col items-center gap-1" style={{ background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<div className="w-4 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.4)' }} />
|
||||
<div className="w-6 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.15)' }} />
|
||||
<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: preview.accent, opacity: 0.5 }} />
|
||||
<div className="absolute inset-0 flex items-center justify-center" style={{ background: 'linear-gradient(180deg, #0a0a1a 0%, #1a1035 50%, #2d1810 100%)' }}>
|
||||
{/* Dawn rays */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-3/4" style={{ background: 'radial-gradient(ellipse at 50% 100%, rgba(251,191,36,0.12), transparent 70%)' }} />
|
||||
<div className="w-3/4 rounded-lg p-2 flex flex-col items-center gap-1 relative" style={{ background: 'rgba(10,10,26,0.6)', backdropFilter: 'blur(4px)', border: '1px solid rgba(251,191,36,0.1)' }}>
|
||||
<div className="w-4 h-1 rounded-sm" style={{ background: 'rgba(251,191,36,0.5)' }} />
|
||||
<div className="w-6 h-0.5 rounded-sm" style={{ background: 'rgba(251,191,36,0.2)' }} />
|
||||
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
|
||||
<div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
|
||||
<div className="w-full h-1 rounded-sm mt-0.5" style={{ background: '#fbbf24', opacity: 0.5 }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{opt.id === 'sidepanel' && (
|
||||
<div className="absolute inset-0 flex">
|
||||
<div className="w-[38%] p-2 flex flex-col justify-end gap-1" style={{ background: preview.bg }}>
|
||||
<div className="flex flex-wrap gap-0.5">
|
||||
{['SQL', 'DDL', 'ACL'].map(t => (
|
||||
<span key={t} className="px-1 rounded text-[5px]" style={{ background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.5)' }}>{t}</span>
|
||||
))}
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex-1 bg-[var(--dg-bg-primary)] p-2 flex flex-col justify-center gap-1">
|
||||
<div className="h-0.5 rounded-sm bg-[var(--dg-bg-hover)]" />
|
||||
<div className="h-0.5 rounded-sm bg-[var(--dg-bg-hover)]" />
|
||||
<div className="h-1 rounded-sm mt-0.5" style={{ background: preview.accent, opacity: 0.5 }} />
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user