67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Card, Form, Input, Button, Typography, message, Space } from 'antd'
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons'
|
|
import { useAuth } from '../store/auth'
|
|
|
|
export default function Login() {
|
|
const { login } = useAuth()
|
|
const navigate = useNavigate()
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const onFinish = async (values: { username: string; password: string }) => {
|
|
setLoading(true)
|
|
try {
|
|
await login(values.username, values.password)
|
|
message.success('登录成功')
|
|
navigate('/')
|
|
} catch (e) {
|
|
message.error(e instanceof Error ? e.message : '登录失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
|
|
}}
|
|
>
|
|
<Card style={{ width: 400, boxShadow: '0 8px 32px rgba(0,0,0,0.3)' }}>
|
|
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<Typography.Title level={3} style={{ marginBottom: 4 }}>
|
|
游戏皮肤供货平台
|
|
</Typography.Title>
|
|
<Typography.Text type="secondary">登录后台管理</Typography.Text>
|
|
</div>
|
|
<Form layout="vertical" onFinish={onFinish} initialValues={{ username: 'admin', password: 'admin123' }}>
|
|
<Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
|
|
<Input prefix={<UserOutlined />} placeholder="用户名" size="large" />
|
|
</Form.Item>
|
|
<Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
|
|
<Input.Password prefix={<LockOutlined />} placeholder="密码" size="large" />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button type="primary" htmlType="submit" loading={loading} block size="large">
|
|
登录
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
<Typography.Paragraph type="secondary" style={{ fontSize: 12, marginBottom: 0, textAlign: 'center' }}>
|
|
商户账号请联系平台管理员创建
|
|
</Typography.Paragraph>
|
|
<Typography.Paragraph type="secondary" style={{ fontSize: 12, marginBottom: 0, textAlign: 'center' }}>
|
|
默认管理员：admin / admin123
|
|
</Typography.Paragraph>
|
|
</Space>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|