fix: 侧边面板恢复更早版本 (commit 8aaf227) — 左40%渐变+装饰圆圈+Database图标+主题切换按钮
This commit is contained in:
logan committed
1 parent
f97c0ab00c
commit
b4fa60bc68
3 files changed
+59
-175
No files matched your search
@@ -1,180 +1,69 @@
|
||||
import { useLogin } from '@/hooks/useLogin';
|
||||
|
||||
const features = ['SQL审核', '变更审批', '实时监控', '权限管理'];
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
import { Sun, Moon, Database } from 'lucide-react';
|
||||
|
||||
export default function SidePanel() {
|
||||
const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
|
||||
const { toggleTheme, isDark } = useTheme();
|
||||
|
||||
return (
|
||||
<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={{
|
||||
width: '38%',
|
||||
background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)',
|
||||
padding: '56px 44px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
<div style={{ display: 'flex', minHeight: '100vh', background: 'var(--dg-bg-primary)', color: 'var(--dg-text-primary)' }}>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
style={{ position: 'fixed', top: 20, right: 20, zIndex: 50, background: 'var(--dg-bg-tertiary)', border: 'none', borderRadius: 8, padding: 8, cursor: 'pointer', color: 'var(--dg-text-secondary)' }}
|
||||
>
|
||||
{/* Subtle decorative gradient orb */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
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)',
|
||||
}}
|
||||
/>
|
||||
{isDark ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
|
||||
{/* Top brand section */}
|
||||
<div style={{ position: 'relative', zIndex: 2 }}>
|
||||
{/* Logo mark */}
|
||||
<div
|
||||
style={{
|
||||
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>
|
||||
{/* Left Panel — 40% */}
|
||||
<div
|
||||
className="dg-gradient-br"
|
||||
style={{ width: '40%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: 48, position: 'relative', overflow: 'hidden' }}
|
||||
>
|
||||
{/* Decorative circles */}
|
||||
<div style={{ position: 'absolute', top: '15%', left: '10%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
|
||||
<div style={{ position: 'absolute', bottom: '20%', right: '15%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />
|
||||
<div style={{ position: 'absolute', top: '55%', left: '60%', width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
|
||||
<div style={{ position: 'absolute', top: '30%', right: '30%', width: 12, height: 12, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
|
||||
<div style={{ position: 'absolute', bottom: '40%', left: '25%', width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }} />
|
||||
|
||||
{/* 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 }}>
|
||||
企业级数据库审核与合规管理解决方案，为团队提供安全可靠的数据管理体验。
|
||||
<div style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 320 }}>
|
||||
<Database size={40} style={{ color: '#fff', marginBottom: 20 }} />
|
||||
<h1 style={{ fontSize: 26, fontWeight: 700, color: '#fff', marginBottom: 12 }}>SQL审核平台</h1>
|
||||
<p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, lineHeight: 1.6 }}>
|
||||
为团队提供智能 SQL 审核、实时合规监控与数据库安全保障。
|
||||
</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>
|
||||
</div>
|
||||
|
||||
{/* Right Panel — 62% Login Form */}
|
||||
<div
|
||||
className="flex items-center justify-center"
|
||||
style={{ flex: 1, padding: 64 }}
|
||||
>
|
||||
<form
|
||||
onSubmit={handleLogin}
|
||||
style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<h2 style={{ fontSize: 30, fontWeight: 600, marginBottom: 8, color: 'var(--dg-text-primary)' }}>
|
||||
欢迎回来
|
||||
</h2>
|
||||
<p style={{ color: 'var(--dg-text-muted)', fontSize: 15, marginBottom: 44 }}>
|
||||
登录以继续
|
||||
</p>
|
||||
{/* Right Panel — Login Form */}
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48 }}>
|
||||
<form onSubmit={handleLogin} style={{ width: '100%', maxWidth: 360, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||
<h2 style={{ fontSize: 22, fontWeight: 600, marginBottom: 4 }}>欢迎回来</h2>
|
||||
<p style={{ color: 'var(--dg-text-muted)', fontSize: 14, marginBottom: 8 }}>登录以访问控制台</p>
|
||||
|
||||
{error && (
|
||||
<div style={{ color: '#f87171', fontSize: 13, marginBottom: 16, padding: '10px 14px', background: 'rgba(248,113,113,0.08)', borderRadius: 8 }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{error && <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div>}
|
||||
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
|
||||
用户名
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full"
|
||||
style={{
|
||||
padding: '13px 16px',
|
||||
borderRadius: 10,
|
||||
background: 'var(--dg-bg-secondary)',
|
||||
border: 'none',
|
||||
color: 'var(--dg-text-primary)',
|
||||
fontSize: 14,
|
||||
outline: 'none',
|
||||
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>
|
||||
|
||||
<div style={{ marginBottom: 36 }}>
|
||||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full"
|
||||
style={{
|
||||
padding: '13px 16px',
|
||||
borderRadius: 10,
|
||||
background: 'var(--dg-bg-secondary)',
|
||||
border: 'none',
|
||||
color: 'var(--dg-text-primary)',
|
||||
fontSize: 14,
|
||||
outline: 'none',
|
||||
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>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="用户名"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !username || !password}
|
||||
className="dg-gradient-bg w-full"
|
||||
style={{
|
||||
padding: '13px 20px',
|
||||
borderRadius: 10,
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: 15,
|
||||
cursor: loading || !username || !password ? 'not-allowed' : 'pointer',
|
||||
opacity: loading || !username || !password ? 0.5 : 1,
|
||||
transition: 'opacity 0.2s, transform 0.1s',
|
||||
}}
|
||||
className="dg-gradient-bg"
|
||||
style={{ padding: '10px 14px', borderRadius: 8, border: 'none', color: '#fff', fontWeight: 600, fontSize: 14, cursor: loading || !username || !password ? 'not-allowed' : 'pointer', opacity: loading || !username || !password ? 0.6 : 1 }}
|
||||
>
|
||||
{loading ? '登录中…' : '登录'}
|
||||
</button>
|
||||
|
||||
Reference in new issue
Block a user