126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { Form, Input, Button, Card, message, Checkbox } from 'antd';
|
|
import { UserOutlined, LockOutlined, LoginOutlined } from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { authApi } from '@/services/api';
|
|
import './styles/Login.css';
|
|
import logo from '@/assets/img/logo.png?url';
|
|
import beian from '@/assets/img/beian.png?url';
|
|
|
|
function LoginPage() {
|
|
const [form] = Form.useForm();
|
|
const [loading, setLoading] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogin = async (values: { username: string; password: string; remember?: boolean }) => {
|
|
setLoading(true);
|
|
try {
|
|
await authApi.login(values.username, values.password);
|
|
|
|
if (values.remember) {
|
|
localStorage.setItem('rememberedUsername', values.username);
|
|
} else {
|
|
localStorage.removeItem('rememberedUsername');
|
|
}
|
|
|
|
message.success('登录成功！');
|
|
setTimeout(() => {
|
|
navigate('/admin/dashboard');
|
|
}, 500);
|
|
} catch (error: any) {
|
|
message.error(error.message || '登录失败，请重试');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="login-container">
|
|
<Card className="login-card" bordered={false}>
|
|
<div className="login-header">
|
|
<div className="login-logo">
|
|
<img src={logo} alt="Logo" style={{ height: '24px' }} />
|
|
</div>
|
|
<h1 className="login-title">
|
|
<LoginOutlined /> 用户登录
|
|
</h1>
|
|
<p className="login-subtitle">请输入您的账户信息</p>
|
|
</div>
|
|
|
|
<Form
|
|
form={form}
|
|
name="login"
|
|
onFinish={handleLogin}
|
|
autoComplete="off"
|
|
layout="vertical"
|
|
initialValues={{
|
|
remember: !!localStorage.getItem('rememberedUsername'),
|
|
username: localStorage.getItem('rememberedUsername') || '',
|
|
}}
|
|
>
|
|
<Form.Item
|
|
label="用户名"
|
|
name="username"
|
|
rules={[{ required: true, message: '请输入您的用户名' }]}
|
|
>
|
|
<Input
|
|
prefix={<UserOutlined />}
|
|
placeholder="请输入您的用户名"
|
|
size="large"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="密码"
|
|
name="password"
|
|
rules={[{ required: true, message: '请输入您的密码' }]}
|
|
>
|
|
<Input.Password
|
|
prefix={<LockOutlined />}
|
|
placeholder="请输入您的密码"
|
|
size="large"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item name="remember" valuePropName="checked">
|
|
<Checkbox>记住我</Checkbox>
|
|
</Form.Item>
|
|
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
loading={loading}
|
|
size="large"
|
|
block
|
|
icon={<LoginOutlined />}
|
|
>
|
|
登录系统
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<div className="login-footer">
|
|
浙江贝凡网络科技提供云和AI服务
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="copyright">
|
|
<p>
|
|
Copyright © 2026 浙江贝凡网络科技有限公司. All Rights Reserved. |
|
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
|
|
浙ICP备2025170226号-4
|
|
</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=33011002018371" target="_blank" rel="noopener noreferrer">
|
|
<img src={beian} alt="备案图标" style={{ height: '20px', marginRight: '5px', verticalAlign: 'middle' }} />
|
|
浙公网安备33011002018371号
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LoginPage; |