fix: 侧边面板恢复原始简洁版 + 星际漫游流星方向修正
- SidePanel: 恢复 commit 46054c8 原始版（左38%暗色品牌区+右62%登录表单）
- 去掉深海鲸歌动画效果，回归简洁专业风格
- AppearanceSettings: 缩略图预览同步更新
- CosmosView: 流星方向从左上→右下改为右上→左下（符合真实流星观感）
This commit is contained in:
logan committed
1 parent
bf5c077b5b
commit
f97c0ab00c
4 files changed
+122
-270
No files matched your search
@@ -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)',
|
||||
|
||||
@@ -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 ? '登录中…' : '登录'}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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: '北极光动态渐变，紫绿流光' },
|
||||
|
||||
Reference in new issue
Block a user