refactor(frontend): 重构状态管理使用Zustand替代Context API
feat(auth): 添加账户锁定功能及自动解锁机制 feat(user): 在用户模型中添加lockedUntil字段 feat(api): 实现账户锁定逻辑和剩余尝试次数提示 perf(3d): 优化3D场景状态管理性能 perf(floorplan): 优化平面图状态管理性能 chore(deps): 添加zustand依赖 chore(config): 更新安全配置锁定时间为3分钟 docs: 更新部分组件注释 style: 调整登录页面样式
This commit is contained in:
zhang1106
+276
-548
@@ -1,16 +1,12 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { version as appVersion } from '../../package.json';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Card,
|
||||
message,
|
||||
Typography,
|
||||
Divider,
|
||||
Space,
|
||||
Alert,
|
||||
Row,
|
||||
Col,
|
||||
} from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
@@ -20,18 +16,20 @@ import {
|
||||
SafetyCertificateOutlined,
|
||||
CloudServerOutlined,
|
||||
ArrowLeftOutlined,
|
||||
DashboardOutlined,
|
||||
SecurityScanOutlined,
|
||||
ApiOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { authAPI } from '../api';
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
import './Login.css';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const Login = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isFirstUser, setIsFirstUser] = useState(false);
|
||||
const [registerMode, setRegisterMode] = useState(false);
|
||||
const [unlockMode, setUnlockMode] = useState(false);
|
||||
const { login, register, checkAdmin } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -44,61 +42,30 @@ const Login = () => {
|
||||
const response = await checkAdmin();
|
||||
if (response.success) {
|
||||
setIsFirstUser(!response.data.hasAdmin);
|
||||
if (!response.data.hasAdmin) {
|
||||
setRegisterMode(true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 静默处理：登录页调用 check-admin 失败是正常的（未登录状态）
|
||||
// 不显示错误信息，避免触发 401 重定向循环
|
||||
console.log('检查管理员状态:', error);
|
||||
console.error('检查管理员状态失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishLogin = async values => {
|
||||
const onFinishLogin = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await login(values.username, values.password);
|
||||
if (result.success) {
|
||||
message.success('登录成功');
|
||||
navigate('/');
|
||||
navigate('/dashboard');
|
||||
} else {
|
||||
if (result.code === 'PENDING_APPROVAL') {
|
||||
message.warning('账户待审核，请联系管理员激活');
|
||||
} else {
|
||||
message.error(result.message || '登录失败');
|
||||
}
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(error || '登录失败');
|
||||
message.error('登录失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishUnlock = async values => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await authAPI.unlock(values);
|
||||
if (response.success) {
|
||||
message.success('解锁成功，请重新登录');
|
||||
setUnlockMode(false);
|
||||
} else {
|
||||
message.error(response.message || '解锁失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(error || '解锁失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishRegister = async values => {
|
||||
if (values.password !== values.confirmPassword) {
|
||||
message.error('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
const onFinishRegister = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await register({
|
||||
@@ -108,552 +75,313 @@ const Login = () => {
|
||||
phone: values.phone,
|
||||
realName: values.realName,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
message.success(result.isFirstUser ? '管理员账号创建成功' : '注册成功，请等待管理员审核');
|
||||
if (result.isFirstUser) {
|
||||
message.success('注册成功，已为您创建管理员账户');
|
||||
navigate('/');
|
||||
} else if (result.pendingApproval) {
|
||||
message.success('注册成功，请等待管理员审核');
|
||||
setRegisterMode(false);
|
||||
navigate('/dashboard');
|
||||
} else {
|
||||
message.success('注册成功');
|
||||
navigate('/');
|
||||
setRegisterMode(false);
|
||||
}
|
||||
} else {
|
||||
message.error(result.message || '注册失败');
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(error || '注册失败');
|
||||
message.error('注册失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 左侧宣传区域组件
|
||||
const LeftPanel = () => (
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: '60px',
|
||||
color: '#fff',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* 背景装饰 */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '600px',
|
||||
height: '600px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
top: '-200px',
|
||||
left: '-200px',
|
||||
filter: 'blur(60px)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '400px',
|
||||
height: '400px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.08)',
|
||||
bottom: '-100px',
|
||||
right: '-100px',
|
||||
filter: 'blur(40px)',
|
||||
}}
|
||||
/>
|
||||
const features = [
|
||||
{ icon: <DashboardOutlined />, title: '实时监控', desc: '3D可视化机房全景', color: '#14b8a6' },
|
||||
{ icon: <SecurityScanOutlined />, title: '安全可靠', desc: '多重权限防护', color: '#3b82f6' },
|
||||
{ icon: <ApiOutlined />, title: '极速响应', desc: '毫秒级数据采集', color: '#8b5cf6' },
|
||||
];
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '20px',
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '40px',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255,255,255,0.3)',
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={{ fontSize: '40px', color: '#fff' }} />
|
||||
</div>
|
||||
const stats = [
|
||||
{ value: '99.9%', label: '可用性', icon: '↑' },
|
||||
{ value: '24/7', label: '监控', icon: '●' },
|
||||
{ value: '<100ms', label: '响应', icon: '⚡' },
|
||||
];
|
||||
|
||||
<Title
|
||||
level={1}
|
||||
style={{
|
||||
color: '#fff',
|
||||
fontSize: '48px',
|
||||
fontWeight: 700,
|
||||
marginBottom: '24px',
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
IDC设备
|
||||
<br />
|
||||
管理系统
|
||||
</Title>
|
||||
|
||||
<Paragraph
|
||||
style={{
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
fontSize: '18px',
|
||||
lineHeight: 1.8,
|
||||
maxWidth: '480px',
|
||||
marginBottom: '48px',
|
||||
}}
|
||||
>
|
||||
专业的数据中心设备管理平台，提供机房、机柜、设备的全生命周期管理，
|
||||
助力企业实现高效的IT资产管理。
|
||||
</Paragraph>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={8} sm={8} md={8}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '32px', fontWeight: 700, marginBottom: '8px' }}>99.9%</div>
|
||||
<div style={{ fontSize: '13px', opacity: 0.8 }}>系统稳定性</div>
|
||||
const RackVisual = () => (
|
||||
<div className="rack-visual">
|
||||
<div className="rack-visual__header">
|
||||
<span className="rack-visual__title">机房概览</span>
|
||||
<span className="rack-visual__badge">3 在线</span>
|
||||
</div>
|
||||
<div className="rack-visual__body">
|
||||
{[1, 2, 3].map((rack) => (
|
||||
<div key={rack} className="rack-unit" style={{ animationDelay: `${rack * 0.1}s` }}>
|
||||
<div className="rack-unit__header">
|
||||
<span className="rack-unit__id">{rack.toString().padStart(2, '0')}</span>
|
||||
<span className="rack-unit__status" />
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={8} sm={8} md={8}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '32px', fontWeight: 700, marginBottom: '8px' }}>24/7</div>
|
||||
<div style={{ fontSize: '13px', opacity: 0.8 }}>全天候监控</div>
|
||||
<div className="rack-unit__slots">
|
||||
{[1, 2, 3, 4, 5].map((slot) => (
|
||||
<div
|
||||
key={slot}
|
||||
className={`rack-unit__slot rack-unit__slot--${slot <= (4 - rack + 1) ? 'on' : 'off'}`}
|
||||
style={{ animationDelay: `${(rack * 5 + slot) * 0.03}s` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={8} sm={8} md={8}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '32px', fontWeight: 700, marginBottom: '8px' }}>100%</div>
|
||||
<div style={{ fontSize: '13px', opacity: 0.8 }}>数据安全</div>
|
||||
<div className="rack-unit__load">
|
||||
<div className="rack-unit__load-bar" style={{ width: `${25 + rack * 18}%` }} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 获取标题和副标题
|
||||
const getHeaderContent = () => {
|
||||
if (isFirstUser) {
|
||||
return {
|
||||
title: '创建管理员账户',
|
||||
subtitle: '首次使用，请创建系统管理员账户',
|
||||
};
|
||||
}
|
||||
if (unlockMode) {
|
||||
return {
|
||||
title: '账户解锁',
|
||||
subtitle: '输入账户信息以解锁账户',
|
||||
};
|
||||
}
|
||||
if (registerMode) {
|
||||
return {
|
||||
title: '注册新账户',
|
||||
subtitle: '填写信息完成账户注册',
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: '欢迎回来',
|
||||
subtitle: '请登录您的账户以继续',
|
||||
};
|
||||
};
|
||||
|
||||
const headerContent = getHeaderContent();
|
||||
|
||||
return (
|
||||
<Row style={{ minHeight: '100vh', overflow: 'hidden' }}>
|
||||
{/* 左侧区域 - 桌面端显示 */}
|
||||
<Col
|
||||
xs={0}
|
||||
sm={0}
|
||||
md={0}
|
||||
lg={12}
|
||||
xl={14}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)',
|
||||
}}
|
||||
>
|
||||
<LeftPanel />
|
||||
</Col>
|
||||
<div className="login-container">
|
||||
<div className="login-bg-decoration">
|
||||
<div className="decoration-circle decoration-circle--1" />
|
||||
<div className="decoration-circle decoration-circle--2" />
|
||||
<div className="decoration-circle decoration-circle--3" />
|
||||
<div className="decoration-grid" />
|
||||
<div className="decoration-wave" />
|
||||
</div>
|
||||
|
||||
{/* 右侧登录区域 */}
|
||||
<Col
|
||||
xs={24}
|
||||
sm={24}
|
||||
md={24}
|
||||
lg={12}
|
||||
xl={10}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#f8fafc',
|
||||
padding: '24px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* 移动端背景 */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '200px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'none',
|
||||
}}
|
||||
className="mobile-bg"
|
||||
/>
|
||||
<div className="login-wrapper">
|
||||
<div className="login-card">
|
||||
<div className="login-card__brand">
|
||||
<div className="brand-header">
|
||||
<div className="brand-logo">
|
||||
<CloudServerOutlined />
|
||||
<div className="logo-pulse" />
|
||||
</div>
|
||||
<div className="brand-title-section">
|
||||
<h1 className="brand-title">
|
||||
<span className="brand-title__main">IDC</span>
|
||||
<span className="brand-title__sub">机柜管理系统</span>
|
||||
</h1>
|
||||
<p className="brand-desc">智能数据中心基础设施管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: registerMode ? 520 : 440,
|
||||
borderRadius: '24px',
|
||||
boxShadow: '0 25px 80px rgba(0,0,0,0.15), 0 10px 30px rgba(0,0,0,0.1)',
|
||||
background: '#fff',
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}}
|
||||
bodyStyle={{ padding: '48px' }}
|
||||
>
|
||||
{/* 返回按钮 */}
|
||||
{(registerMode || unlockMode) && !isFirstUser && (
|
||||
<Button
|
||||
type="link"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => {
|
||||
setRegisterMode(false);
|
||||
setUnlockMode(false);
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '24px',
|
||||
left: '24px',
|
||||
color: '#667eea',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
)}
|
||||
<RackVisual />
|
||||
|
||||
{/* 头部 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '32px' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
borderRadius: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 20px',
|
||||
boxShadow: '0 8px 24px rgba(102, 126, 234, 0.35)',
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={{ fontSize: '32px', color: '#fff' }} />
|
||||
<div className="brand-stats">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="stat-card">
|
||||
<span className="stat-value">{stat.value}</span>
|
||||
<span className="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="brand-features">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="brand-feature"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
<div
|
||||
className="feature-icon"
|
||||
style={{ background: `linear-gradient(135deg, ${feature.color}15, ${feature.color}10)`, color: feature.color }}
|
||||
>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="feature-content">
|
||||
<span className="feature-title">{feature.title}</span>
|
||||
<span className="feature-desc">{feature.desc}</span>
|
||||
</div>
|
||||
<div className="feature-arrow">→</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="brand-footer">
|
||||
<span className="footer-trust">
|
||||
<span className="trust-icon">🛡️</span>
|
||||
企业级安全认证
|
||||
</span>
|
||||
<span className="footer-version">v{appVersion}</span>
|
||||
</div>
|
||||
<Title
|
||||
level={3}
|
||||
style={{
|
||||
fontSize: '28px',
|
||||
fontWeight: 700,
|
||||
color: '#1e293b',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
{headerContent.title}
|
||||
</Title>
|
||||
<Text style={{ fontSize: '15px', color: '#64748b' }}>{headerContent.subtitle}</Text>
|
||||
</div>
|
||||
|
||||
{/* 首次使用提示 */}
|
||||
{isFirstUser && (
|
||||
<Alert
|
||||
message="欢迎使用IDC设备管理系统"
|
||||
description="您是第一个用户，系统将自动为您分配管理员权限。"
|
||||
type="success"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px', borderRadius: '12px' }}
|
||||
/>
|
||||
)}
|
||||
<div className="login-card__divider" />
|
||||
|
||||
{/* 解锁模式提示 */}
|
||||
{unlockMode && (
|
||||
<Alert
|
||||
message="账户解锁说明"
|
||||
description="当您的账户连续5次登录失败后会被锁定，请输入正确的用户名和密码进行解锁。"
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: '24px', borderRadius: '12px' }}
|
||||
/>
|
||||
)}
|
||||
<div className="login-card__form">
|
||||
<div className="form-header">
|
||||
<Title level={2} className="form-title">
|
||||
{isFirstUser ? '初始化系统' : '欢迎回来'}
|
||||
</Title>
|
||||
<Text className="form-subtitle">
|
||||
{isFirstUser
|
||||
? '创建管理员账号以开始使用系统'
|
||||
: '请登录您的账号继续访问'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 表单 */}
|
||||
<Form
|
||||
name={unlockMode ? 'unlock' : registerMode ? 'register' : 'login'}
|
||||
size="large"
|
||||
onFinish={unlockMode ? onFinishUnlock : registerMode ? onFinishRegister : onFinishLogin}
|
||||
layout="vertical"
|
||||
requiredMark={false}
|
||||
>
|
||||
{registerMode ? (
|
||||
<>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' },
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入用户名"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="realName"
|
||||
label="真实姓名"
|
||||
rules={[{ required: true, message: '请输入真实姓名' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={
|
||||
<SafetyCertificateOutlined
|
||||
style={{ color: '#94a3b8', fontSize: '18px' }}
|
||||
/>
|
||||
}
|
||||
placeholder="请输入真实姓名"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
prefix={<MailOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入邮箱"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name="phone" label="手机号">
|
||||
<Input
|
||||
prefix={<PhoneOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入手机号（可选）"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ min: 6, message: '密码长度不能少于6个字符' },
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入密码"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
dependencies={['password']}
|
||||
rules={[
|
||||
{ required: true, message: '请确认密码' },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请再次输入密码"
|
||||
style={{ borderRadius: '12px', height: '48px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入用户名"
|
||||
style={{ borderRadius: '12px', height: '52px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
style={{ marginBottom: '8px' }}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined style={{ color: '#94a3b8', fontSize: '18px' }} />}
|
||||
placeholder="请输入密码"
|
||||
style={{ borderRadius: '12px', height: '52px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{!registerMode && !unlockMode && (
|
||||
<div style={{ textAlign: 'right', marginBottom: '24px' }}>
|
||||
<Button type="link" style={{ color: '#667eea', padding: 0 }}>
|
||||
忘记密码？
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{isFirstUser && (
|
||||
<Alert
|
||||
className="form-alert"
|
||||
message="系统初始化"
|
||||
description="首次使用需要创建管理员账号"
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
)}
|
||||
|
||||
<Form.Item style={{ marginTop: '32px', marginBottom: '16px' }}>
|
||||
{registerMode && !isFirstUser && (
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
block
|
||||
style={{
|
||||
height: '52px',
|
||||
fontSize: '16px',
|
||||
fontWeight: 600,
|
||||
borderRadius: '12px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 24px rgba(102, 126, 234, 0.35)',
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => {
|
||||
setRegisterMode(false);
|
||||
}}
|
||||
className="back-button"
|
||||
>
|
||||
{registerMode ? '立即注册' : unlockMode ? '立即解锁' : '登 录'}
|
||||
返回登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{/* 底部切换 */}
|
||||
{!isFirstUser && (
|
||||
<div style={{ textAlign: 'center', marginTop: '24px' }}>
|
||||
{!unlockMode && !registerMode && (
|
||||
<Space split={<Divider type="vertical" />} size="large">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => setRegisterMode(true)}
|
||||
style={{ color: '#64748b', fontWeight: 500 }}
|
||||
<Form
|
||||
name={registerMode ? 'register' : 'login'}
|
||||
layout="vertical"
|
||||
onFinish={registerMode ? onFinishRegister : onFinishLogin}
|
||||
size="large"
|
||||
className="login-form"
|
||||
>
|
||||
{registerMode && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="realName"
|
||||
label="真实姓名"
|
||||
rules={[{ required: true, message: '请输入真实姓名' }]}
|
||||
>
|
||||
注册新账户
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => setUnlockMode(true)}
|
||||
style={{ color: '#64748b', fontWeight: 500 }}
|
||||
<Input
|
||||
placeholder="请输入真实姓名"
|
||||
className="login-input"
|
||||
prefix={<UserOutlined className="input-icon" />}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
>
|
||||
账户解锁
|
||||
</Button>
|
||||
</Space>
|
||||
<Input
|
||||
placeholder="请输入用户名"
|
||||
className="login-input"
|
||||
prefix={<UserOutlined className="input-icon" />}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入邮箱"
|
||||
className="login-input"
|
||||
prefix={<MailOutlined className="input-icon" />}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="手机号"
|
||||
rules={[{ required: true, message: '请输入手机号' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入手机号"
|
||||
className="login-input"
|
||||
prefix={<PhoneOutlined className="input-icon" />}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(registerMode || unlockMode) && (
|
||||
<Text style={{ color: '#64748b' }}>
|
||||
已有账户？{' '}
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
setRegisterMode(false);
|
||||
setUnlockMode(false);
|
||||
}}
|
||||
style={{ color: '#667eea', fontWeight: 600, padding: 0 }}
|
||||
>
|
||||
立即登录
|
||||
</Button>
|
||||
</Text>
|
||||
<Form.Item
|
||||
name="username"
|
||||
label={isFirstUser ? '管理员账号' : '用户名'}
|
||||
rules={[{ required: true, message: isFirstUser ? '请设置管理员账号' : '请输入用户名' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined className="input-icon" />}
|
||||
placeholder={isFirstUser ? '请设置管理员账号' : '请输入用户名'}
|
||||
className="login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label={isFirstUser ? '管理员密码' : '密码'}
|
||||
rules={[
|
||||
{ required: true, message: isFirstUser ? '请设置管理员密码' : '请输入密码' },
|
||||
{ min: 6, message: '密码长度不能少于6位' },
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined className="input-icon" />}
|
||||
placeholder={isFirstUser ? '请设置管理员密码' : '请输入密码'}
|
||||
className="login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{registerMode && (
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
dependencies={['password']}
|
||||
rules={[
|
||||
{ required: true, message: '请确认密码' },
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined className="input-icon" />}
|
||||
placeholder="请确认密码"
|
||||
className="login-input"
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item className="submit-item">
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
className="submit-button"
|
||||
>
|
||||
{registerMode ? '立即注册' : '登 录'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{!isFirstUser && !registerMode && (
|
||||
<div className="form-actions">
|
||||
<Button type="link" className="action-link" onClick={() => setRegisterMode(true)}>
|
||||
<SafetyCertificateOutlined /> 立即注册
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-footer">
|
||||
<span>IDC Management System</span>
|
||||
<span className="footer-dot" />
|
||||
<span>v{appVersion}</span>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 移动端底部版权 */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '24px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
textAlign: 'center',
|
||||
color: '#94a3b8',
|
||||
fontSize: '13px',
|
||||
display: 'none',
|
||||
}}
|
||||
className="mobile-footer"
|
||||
>
|
||||
© 2024 IDC设备管理系统. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
{/* 响应式样式 */}
|
||||
<style>{`
|
||||
@media (max-width: 991px) {
|
||||
.mobile-bg {
|
||||
display: block !important;
|
||||
}
|
||||
.mobile-footer {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.ant-card-body {
|
||||
padding: 32px 24px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
export default Login;
|
||||
Reference in New Issue
Block a user