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

feat: 登录页5种视觉大片级重设计 — 星河/极光/日月/星辰/流星

Browse Source 
5个登录组件全面升级为动态视觉效果:

1. SplitView — 星河流转: 深靛蓝渐变(#0f0c29→#302b63) + 3条CSS流星动画
   + 7个漂浮星辰光点 + 脉动光晕，底线输入框聚焦靛蓝

2. CenteredCard — 极光幻境: 深蓝黑底(#0a0a2e) + 3条流动极光色带
   (翠绿/靛蓝/紫) filter:blur(80px) 缓慢流动，毛玻璃居中卡片

3. SidePanel — 日月交替(重点重做): 暮光紫→夜空蓝渐变
   + 200px天体球(太阳金→月亮银蓝 8s循环) + 300px旋转轨道环
   + 6个轨道光点 + 3条流星 + 10个闪烁星点

4. FullImage — 星辰连线: 深海军蓝(#0a1628) + 33个随机星点
   + 6条星座连线 + 右上角蓝紫发光球 + 左下角暖色光球

5. MinimalDark — 流星雨: 深紫黑(#0c0a1a) + 6条流星动画
   + 10个静态星点 + 渐变菱形logo + 极简布局
This commit is contained in:
logan committed 2026-05-27 12:48:27 +08:00
1 parent 46054c8b2f
commit 1aa729b61b
5 files changed
+776 -432
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/login/SidePanel.tsx
+220 -71
View File
@@ -1,115 +1,262 @@
import { useLogin } from '@/hooks/useLogin';
const features = ['SQL审核', '变更审批', '实时监控', '权限管理'];
export default function SidePanel() {
const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
/* 6 orbit light-points evenly spaced at 60° intervals on a 300px ring (radius 150px) */
const orbitDots = [
{ angle: 0, size: 8, opacity: 0.9 },
{ angle: 60, size: 6, opacity: 0.6 },
{ angle: 120, size: 7, opacity: 0.75 },
{ angle: 180, size: 6, opacity: 0.5 },
{ angle: 240, size: 8, opacity: 0.8 },
{ angle: 300, size: 6, opacity: 0.55 },
];
/* Scattered twinkling stars */
const stars = [
{ top: '6%', left: '12%', size: 3, delay: '0s', dur: '3s' },
{ top: '14%', left: '72%', size: 2, delay: '1.2s', dur: '4s' },
{ top: '25%', left: '38%', size: 4, delay: '0.5s', dur: '3.5s' },
{ top: '18%', left: '55%', size: 2, delay: '2s', dur: '5s' },
{ top: '60%', left: '15%', size: 3, delay: '1s', dur: '4.5s' },
{ top: '70%', left: '80%', size: 2, delay: '0.3s', dur: '3.2s' },
{ top: '82%', left: '30%', size: 4, delay: '1.8s', dur: '3.8s' },
{ top: '45%', left: '8%', size: 2, delay: '2.5s', dur: '4.2s' },
{ top: '35%', left: '88%', size: 3, delay: '0.8s', dur: '3.6s' },
{ top: '90%', left: '65%', size: 2, delay: '1.5s', dur: '5.2s' },
];
return (
<div className="flex min-h-screen" style={{ background: 'var(--dg-bg-primary)', color: 'var(--dg-text-primary)' }}>
{/* Left Panel — 38% Brand Area */}
{/* ========== Left Panel — 40% Celestial Animation ========== */}
<div
className="relative flex flex-col justify-between"
style={{
width: '38%',
background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)',
padding: '56px 44px',
position: 'relative',
width: '40%',
background: 'linear-gradient(180deg, #1a0a2e 0%, #0f172a 100%)',
overflow: 'hidden',
}}
>
{/* Subtle decorative gradient orb */}
{/* --- Core Celestial Orb (200px, centered-upper) --- */}
<div
style={{
position: 'absolute',
top: '-80px',
right: '-80px',
width: 280,
height: 280,
top: '25%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 200,
height: 200,
zIndex: 2,
}}
>
{/* Main orb */}
<div
style={{
width: 200,
height: 200,
borderRadius: '50%',
animation: 'celestial-orb-color 8s ease-in-out infinite',
}}
/>
</div>
{/* --- Orbit Ring (300px, dashed) with 6 light dots --- */}
<div
style={{
position: 'absolute',
top: '25%',
left: '50%',
width: 300,
height: 300,
marginTop: -150,
marginLeft: -150,
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%)',
filter: 'blur(30px)',
border: '1px dashed rgba(255,255,255,0.1)',
animation: 'celestial-orbit-rotate 20s linear infinite',
zIndex: 3,
}}
>
{orbitDots.map((dot, i) => {
const rad = (dot.angle * Math.PI) / 180;
const r = 150; // radius of the 300px ring
const x = 150 + r * Math.cos(rad) - dot.size / 2;
const y = 150 + r * Math.sin(rad) - dot.size / 2;
return (
<div
key={i}
style={{
position: 'absolute',
left: x,
top: y,
width: dot.size,
height: dot.size,
borderRadius: '50%',
background: `rgba(255,255,255,${dot.opacity})`,
boxShadow: `0 0 6px rgba(255,255,255,${dot.opacity * 0.5})`,
}}
/>
);
})}
</div>
{/* --- 3 Meteors --- */}
{/* Meteor 1 */}
<div
style={{
position: 'absolute',
top: '8%',
left: '15%',
width: 2,
height: 60,
background: 'linear-gradient(to bottom right, rgba(255,255,255,0.9), transparent)',
borderRadius: 2,
transform: 'rotate(-45deg)',
animation: 'celestial-meteor-1 1.5s ease-in 3s infinite',
zIndex: 1,
}}
/>
{/* Meteor 2 */}
<div
style={{
position: 'absolute',
top: '5%',
left: '55%',
width: 1.5,
height: 50,
background: 'linear-gradient(to bottom right, rgba(255,255,255,0.7), transparent)',
borderRadius: 2,
transform: 'rotate(-40deg)',
animation: 'celestial-meteor-2 2s ease-in 7s infinite',
zIndex: 1,
}}
/>
{/* Meteor 3 */}
<div
style={{
position: 'absolute',
top: '20%',
left: '35%',
width: 1.5,
height: 55,
background: 'linear-gradient(to bottom right, rgba(255,255,255,0.8), transparent)',
borderRadius: 2,
transform: 'rotate(-50deg)',
animation: 'celestial-meteor-3 1.8s ease-in 11s infinite',
zIndex: 1,
}}
/>
{/* Top brand section */}
<div style={{ position: 'relative', zIndex: 2 }}>
{/* Logo mark */}
{/* --- Scattered Twinkling Stars --- */}
{stars.map((s, i) => (
<div
key={`star-${i}`}
style={{
width: 40,
height: 40,
borderRadius: 10,
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 56,
position: 'absolute',
top: s.top,
left: s.left,
width: s.size,
height: s.size,
borderRadius: '50%',
background: 'rgba(255,255,255,0.7)',
animation: `celestial-twinkle ${s.dur} ease-in-out ${s.delay} infinite`,
zIndex: 1,
}}
>
<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>
/>
))}
{/* 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>
{/* --- Bottom-left brand text --- */}
<div style={{ position: 'absolute', bottom: 48, left: 44, zIndex: 4 }}>
<div style={{ fontSize: 20, fontWeight: 600, color: 'rgba(255,255,255,0.7)', marginBottom: 6 }}>
SQL审核平台
</div>
<div style={{ fontSize: 13, color: 'rgba(255,255,255,0.3)' }}>
企业级数据库审核与合规管理
</div>
<p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 15, lineHeight: 1.6, maxWidth: 280 }}>
企业级数据库审核与合规管理解决方案，为团队提供安全可靠的数据管理体验。
</p>
</div>
{/* 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>
{/* --- Keyframes --- */}
<style>{`
/* Celestial orb: sun ↔ moon color cycle */
@keyframes celestial-orb-color {
0%, 100% {
background: radial-gradient(circle, #fbbf24, #f97316);
box-shadow: 0 0 60px rgba(251,191,36,0.4);
}
50% {
background: radial-gradient(circle, #e2e8f0, #93c5fd);
box-shadow: 0 0 60px rgba(147,197,253,0.4);
}
}
/* Orbit ring rotation */
@keyframes celestial-orbit-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Meteor 1 */
@keyframes celestial-meteor-1 {
0% { opacity: 0; transform: rotate(-45deg) translate(0, 0); }
10% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; transform: rotate(-45deg) translate(180px, 180px); }
}
/* Meteor 2 */
@keyframes celestial-meteor-2 {
0% { opacity: 0; transform: rotate(-40deg) translate(0, 0); }
10% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; transform: rotate(-40deg) translate(160px, 160px); }
}
/* Meteor 3 */
@keyframes celestial-meteor-3 {
0% { opacity: 0; transform: rotate(-50deg) translate(0, 0); }
10% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; transform: rotate(-50deg) translate(170px, 170px); }
}
/* Star twinkle */
@keyframes celestial-twinkle {
0%, 100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
`}</style>
</div>
{/* Right Panel — 62% Login Form */}
{/* ========== Right Panel — 60% Login Form ========== */}
<div
className="flex items-center justify-center"
style={{ flex: 1, padding: 64 }}
style={{ width: '60%', background: 'var(--dg-bg-primary)' }}
>
<form
onSubmit={handleLogin}
style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column' }}
style={{ width: '100%', maxWidth: 400, display: 'flex', flexDirection: 'column' }}
>
<h2 style={{ fontSize: 30, fontWeight: 600, marginBottom: 8, color: 'var(--dg-text-primary)' }}>
<h2 style={{ fontSize: 30, fontWeight: 700, marginBottom: 8, color: 'var(--dg-text-primary)' }}>
欢迎回来
</h2>
<p style={{ color: 'var(--dg-text-muted)', fontSize: 15, marginBottom: 44 }}>
<p style={{ color: 'var(--dg-text-muted)', fontSize: 15, marginBottom: 40 }}>
登录以继续
</p>
{error && (
<div style={{ color: '#f87171', fontSize: 13, marginBottom: 16, padding: '10px 14px', background: 'rgba(248,113,113,0.08)', borderRadius: 8 }}>
<div style={{
color: '#f87171',
fontSize: 13,
marginBottom: 16,
padding: '10px 14px',
background: 'rgba(248,113,113,0.08)',
borderRadius: 10,
}}>
{error}
</div>
)}
{/* Username */}
<div style={{ marginBottom: 24 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
用户名
@@ -128,14 +275,15 @@ export default function SidePanel() {
color: 'var(--dg-text-primary)',
fontSize: 14,
outline: 'none',
transition: 'background 0.2s',
transition: 'background 0.3s',
}}
onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
/>
</div>
<div style={{ marginBottom: 36 }}>
{/* Password */}
<div style={{ marginBottom: 32 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
密码
</label>
@@ -153,13 +301,14 @@ export default function SidePanel() {
color: 'var(--dg-text-primary)',
fontSize: 14,
outline: 'none',
transition: 'background 0.2s',
transition: 'background 0.3s',
}}
onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
/>
</div>
{/* Submit */}
<button
type="submit"
disabled={loading || !username || !password}