96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Form, Input, Button, Card, message } from 'antd';
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { adminAuthService, type LoginRequest } from '../../services/adminAuthService';
|
|
import { useAuthStore } from '../../stores/authStore';
|
|
|
|
const AdminLogin = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const navigate = useNavigate();
|
|
const setAuth = useAuthStore((state) => state.setAuth);
|
|
|
|
const onFinish = async (values: LoginRequest) => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await adminAuthService.login(values);
|
|
setAuth(
|
|
{
|
|
id: response.userId,
|
|
username: response.username,
|
|
role: response.role,
|
|
},
|
|
response.accessToken
|
|
);
|
|
localStorage.setItem('adminToken', response.accessToken);
|
|
message.success('登录成功');
|
|
navigate('/admin/dashboard');
|
|
} catch (error) {
|
|
message.error(error instanceof Error ? error.message : '登录失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
minHeight: '100vh',
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
}}>
|
|
<Card
|
|
title="运营管理系统后台"
|
|
style={{
|
|
width: 400,
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
}}
|
|
>
|
|
<Form
|
|
name="login"
|
|
onFinish={onFinish}
|
|
autoComplete="off"
|
|
size="large"
|
|
>
|
|
<Form.Item
|
|
name="username"
|
|
rules={[{ required: true, message: '请输入用户名' }]}
|
|
>
|
|
<Input
|
|
prefix={<UserOutlined />}
|
|
placeholder="用户名"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="password"
|
|
rules={[
|
|
{ required: true, message: '请输入密码' },
|
|
{ min: 6, message: '密码长度至少为6位' }
|
|
]}
|
|
>
|
|
<Input.Password
|
|
prefix={<LockOutlined />}
|
|
placeholder="密码"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
loading={loading}
|
|
block
|
|
>
|
|
登录
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminLogin;
|