feat: 极简暗色替换为深蓝紫曲线风格 — 粉紫流动曲线优雅暗黑

MinimalDark.tsx 全面重写:
- 背景: 深蓝紫渐变(#0a0a1a→#0f0a2a→#150825)代替纯黑
- 7条流动曲线: 粉紫/靛蓝/青色渐变彩带 + blur效果 + 缓慢浮动动画
- 5个脉动装饰点: 粉色/紫色/靛蓝不同delay闪烁
- 2个发光球: 右上紫色光球 + 左下粉色光球
- 毛玻璃居中卡片: backdrop-blur + 半透明边框
- 粉紫渐变logo(#ec4899→#a855f7) + 紫色聚焦高亮
- 按钮粉紫渐变发光阴影

LoginPage + AppearanceSettings 描述和缩略图同步更新
This commit is contained in:
logan committed 2026-05-27 13:06:17 +08:00
1 parent 1aa729b61b
commit 439eb6d6d7
3 files changed
+211 -166

No files matched your search

+16 -8
View File
@@ -11,7 +11,7 @@ const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; lab
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' },
fullimage: { bg: '#0d1117', accent: '#6366f1', label: 'GitHub/AWS' },
minimal: { bg: '#0a0a0a', accent: '#8b5cf6', label: 'Apple/Linear' },
minimal: { bg: 'linear-gradient(160deg, #0a0a1a 0%, #0f0a2a 40%, #150825 70%, #0a0a1a 100%)', accent: '#ec4899', label: 'Premium Dark' },
};
export default function AppearanceSettings() {
@@ -199,13 +199,21 @@ export default function AppearanceSettings() {
</div>
)}
{opt.id === 'minimal' && (
<div className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 p-2">
<div className="w-2 h-2 rounded-full" style={{ background: `linear-gradient(135deg, ${preview.accent}, #a855f7)` }} />
<div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.15)' }} />
<div className="w-6 h-px my-1" style={{ background: 'rgba(255,255,255,0.1)' }} />
<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-0.5 rounded-sm mt-0.5" style={{ background: preview.accent, opacity: 0.4 }} />
<div className="absolute inset-0" style={{ background: 'linear-gradient(160deg, #0a0a1a, #0f0a2a, #150825)' }}>
{/* Flowing curve ribbons */}
<div className="absolute" style={{ top: '15%', left: '-20%', width: '140%', height: '40%', background: 'linear-gradient(135deg, rgba(236,72,153,0.2), rgba(168,85,247,0.15))', borderRadius: '50%', filter: 'blur(8px)', transform: 'rotate(-12deg)' }} />
<div className="absolute" style={{ top: '35%', left: '-10%', width: '120%', height: '30%', background: 'linear-gradient(135deg, rgba(129,140,248,0.15), rgba(192,132,252,0.1))', borderRadius: '50%', filter: 'blur(6px)', transform: 'rotate(5deg)' }} />
<div className="absolute" style={{ top: '55%', left: '5%', width: '90%', height: '15%', background: 'linear-gradient(90deg, transparent, rgba(244,114,182,0.2), rgba(192,132,252,0.15), transparent)', borderRadius: '50%', filter: 'blur(4px)', transform: 'rotate(-8deg)' }} />
{/* Center card */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', backdropFilter: 'blur(4px)' }}>
<div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
<div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.12)' }} />
<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: 'linear-gradient(90deg, #ec4899, #a855f7)', opacity: 0.5 }} />
</div>
</div>
</div>
)}
</div>
+1 -1
View File
@@ -20,7 +20,7 @@ export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }
{ id: 'centered', name: '居中卡片', desc: '渐变背景,居中登录卡片' },
{ id: 'sidepanel', name: '侧边面板', desc: '左侧品牌面板 + 右侧表单' },
{ id: 'fullimage', name: '全屏背景', desc: '科技背景,毛玻璃卡片' },
{ id: 'minimal', name: '极简暗色', desc: '极致简约,纯暗色风格' },
{ id: 'minimal', name: '深蓝紫曲线', desc: '优雅暗黑,粉紫流动曲线' },
];
export default function LoginPage() {