98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { Form, Input, Button, Card, message, theme } from 'antd'
|
|
import { UserOutlined, LockOutlined } from '@ant-design/icons'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useUserStore } from '@/store/user'
|
|
|
|
// ---- 私有类型 ----
|
|
interface LoginFormValues {
|
|
phone: string
|
|
password: string
|
|
}
|
|
|
|
function LoginPage() {
|
|
const [loading, setLoading] = useState(false)
|
|
const navigate = useNavigate()
|
|
const { token } = theme.useToken()
|
|
const storeLogin = useUserStore(s => s.login)
|
|
|
|
const handleFinish = async (values: LoginFormValues) => {
|
|
setLoading(true)
|
|
try {
|
|
const result = await storeLogin(values)
|
|
if (result === true) {
|
|
message.success('登录成功')
|
|
navigate('/', { replace: true })
|
|
} else {
|
|
message.error(result || '登录失败，请检查账号密码')
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: token.colorBgLayout,
|
|
}}
|
|
>
|
|
<Card
|
|
style={{ width: 400, boxShadow: token.boxShadowSecondary }}
|
|
variant="borderless"
|
|
>
|
|
{/* 标题 */}
|
|
<div style={{ textAlign: 'center', marginBottom: 32 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 28,
|
|
fontWeight: 700,
|
|
color: token.colorPrimary,
|
|
marginBottom: 8,
|
|
}}
|
|
>
|
|
SmartServe
|
|
</div>
|
|
<div style={{ color: token.colorTextSecondary }}>请登录您的账号</div>
|
|
</div>
|
|
|
|
<Form<LoginFormValues>
|
|
layout="vertical"
|
|
onFinish={handleFinish}
|
|
autoComplete="off"
|
|
size="large"
|
|
>
|
|
<Form.Item
|
|
name="phone"
|
|
rules={[
|
|
{ required: true, message: '请输入手机号码' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
|
|
]}
|
|
>
|
|
<Input prefix={<UserOutlined />} placeholder="手机号码" maxLength={11} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="password"
|
|
rules={[{ required: true, message: '请输入密码' }]}
|
|
>
|
|
<Input.Password prefix={<LockOutlined />} placeholder="密码" />
|
|
</Form.Item>
|
|
|
|
<Form.Item style={{ marginBottom: 0 }}>
|
|
<Button type="primary" htmlType="submit" block loading={loading}>
|
|
登录
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LoginPage
|