logan
746a000e8a
1. 主题系统扩展 (5套主题) - ocean-deep(深海蓝) / light-professional(明亮白) / midnight-purple(午夜紫) - pine-green(松林绿) / orange-vitality(活力橙) - useTheme hook 重写支持5主题 + 向后兼容 - AppearanceSettings 5主题预览卡片 2. 设计体系 (index.css) - 按钮系统: dg-btn-primary/secondary/ghost/danger + 尺寸变体 - 徽章系统: dg-badge-* (8色) - 卡片/表格: dg-card-section, dg-table-row, dg-table-header - 状态点: dg-status-dot-* (4色) - 动效关键帧: slideInLeft, scaleIn 3. 菜单重组 (menu.ts) - 5分组: 概览/数据源/工单/权限/系统 - 6个图标更新: Code2/FileEdit/ShieldCheck/FolderLock/ScrollText/Timer - 新增 permission 权限码字段 4. Layout 侧边栏增强 - 左侧渐变指示条 + 发光效果 - hover 微动画 + 图标变色 - 面包屑导航头部 - 主题切换循环5主题 5. 核心页面优化 - TicketsPage: 设计系统类 + 颜色对齐 - QueriesPage: 去Card依赖 + dg-table/dg-btn统一 - Breadcrumb组件 + useBreadcrumb hook
63 lines
3.0 KiB
TypeScript
63 lines
3.0 KiB
TypeScript
import { useLogin } from '@/hooks/useLogin';
|
|
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
|
|
export default function CenteredCard() {
|
|
const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isDark = THEME_OPTIONS.find(o => o.id === theme)?.isDark ?? true;
|
|
|
|
return (
|
|
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, position: 'relative' }}>
|
|
{/* Gradient background */}
|
|
<div className="dg-gradient-br" style={{ position: 'fixed', inset: 0, zIndex: 0 }} />
|
|
|
|
{/* Theme toggle */}
|
|
<button
|
|
onClick={toggleTheme}
|
|
style={{ position: 'fixed', top: 20, right: 20, zIndex: 50, background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 8, padding: 8, cursor: 'pointer', color: '#fff', backdropFilter: 'blur(4px)' }}
|
|
>
|
|
{isDark ? <Sun size={18} /> : <Moon size={18} />}
|
|
</button>
|
|
|
|
{/* Card */}
|
|
<div style={{ position: 'relative', zIndex: 10, width: '100%', maxWidth: 400, background: 'var(--dg-bg-primary)', borderRadius: 14, padding: '40px 32px', boxShadow: '0 8px 32px rgba(0,0,0,0.3)' }}>
|
|
<div style={{ textAlign: 'center', marginBottom: 32 }}>
|
|
<h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 6 }}>
|
|
<span className="dg-gradient-text">SQL审核平台</span>
|
|
</h1>
|
|
<p style={{ color: 'var(--dg-text-muted)', fontSize: 14 }}>登录您的账号</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
{error && <div style={{ color: '#f87171', fontSize: 13, textAlign: 'center' }}>{error}</div>}
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="用户名"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
style={{ padding: '11px 14px', borderRadius: 8, background: 'var(--dg-bg-secondary)', 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: '11px 14px', borderRadius: 8, background: 'var(--dg-bg-secondary)', 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"
|
|
style={{ padding: '11px 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: 4 }}
|
|
>
|
|
{loading ? '登录中…' : '登录'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|