logan
14e394fb09
- 新增 5 种登录页组件: SplitView/CenteredCard/SidePanel/FullImage/MinimalDark - 提取 useLogin hook 共享登录逻辑 - LoginPage 改为风格分发器, localStorage(login-style) 控制渲染 - SettingsPage 新增外观设置 tab: 主题切换 + 登录风格选择器(含缩略图预览) - AppearanceSettings 组件: 5 种风格卡片式切换 - 文档全面更新为 Go/Gin 架构: - ARCHITECTURE.md: Go 项目结构/handler/GORM 模型/中间件/LDAP/驱动矩阵 - FEATURES.md: v0.3.1 功能清单含登录主题系统 - ROADMAP.md: Python→Go 迁移历史 + Sprint 计划
56 lines
2.7 KiB
TypeScript
56 lines
2.7 KiB
TypeScript
import { useLogin } from '@/hooks/useLogin';
|
|
import { useTheme } from '@/hooks/useTheme';
|
|
import { Sun, Moon, Database } from 'lucide-react';
|
|
|
|
export default function MinimalDark() {
|
|
const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
|
|
const { toggleTheme, isDark } = useTheme();
|
|
|
|
return (
|
|
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, 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)' }}
|
|
>
|
|
{isDark ? <Sun size={18} /> : <Moon size={18} />}
|
|
</button>
|
|
|
|
<div style={{ width: '100%', maxWidth: 320, textAlign: 'center' }}>
|
|
<Database size={36} className="dg-gradient-text" style={{ marginBottom: 16, display: 'inline-block' }} />
|
|
<h1 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>
|
|
<span className="dg-gradient-text">SQL Audit Platform</span>
|
|
</h1>
|
|
<p style={{ color: 'var(--dg-text-muted)', fontSize: 13, marginBottom: 36 }}>Secure database auditing & compliance</p>
|
|
|
|
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
|
{error && <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div>}
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-secondary)', border: 'none', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-secondary)', border: 'none', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !username || !password}
|
|
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, marginTop: 8 }}
|
|
>
|
|
{loading ? 'Signing in…' : 'Sign in'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|