84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
|
import { useState } from 'react';
|
|||
|
|
import { useNavigate } from 'react-router-dom';
|
|||
|
|
import { useLogin } from '@/hooks/useAuth';
|
|||
|
|
import { Button } from '@/components/Button';
|
|||
|
|
import { Input } from '@/components/Input';
|
|||
|
|
import { Card } from '@/components/Card';
|
|||
|
|
|
|||
|
|
export default function LoginPage() {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const login = useLogin();
|
|||
|
|
const [username, setUsername] = useState('');
|
|||
|
|
const [password, setPassword] = useState('');
|
|||
|
|
const [error, setError] = useState('');
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
setError('');
|
|||
|
|
|
|||
|
|
if (!username || !password) {
|
|||
|
|
setError('请输入用户名和密码');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await login.mutateAsync({ username, password });
|
|||
|
|
navigate('/dashboard');
|
|||
|
|
} catch (err: any) {
|
|||
|
|
setError(err.message || '登录失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-100 px-4">
|
|||
|
|
<Card className="w-full max-w-md">
|
|||
|
|
<div className="mb-8 text-center">
|
|||
|
|
<h1 className="text-3xl font-bold text-gray-900">图片分析系统</h1>
|
|||
|
|
<p className="mt-2 text-sm text-gray-600">登录以继续</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|||
|
|
{error && (
|
|||
|
|
<div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">
|
|||
|
|
{error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Input
|
|||
|
|
label="用户名"
|
|||
|
|
type="text"
|
|||
|
|
value={username}
|
|||
|
|
onChange={(e) => setUsername(e.target.value)}
|
|||
|
|
placeholder="请输入用户名"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Input
|
|||
|
|
label="密码"
|
|||
|
|
type="password"
|
|||
|
|
value={password}
|
|||
|
|
onChange={(e) => setPassword(e.target.value)}
|
|||
|
|
placeholder="请输入密码"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
type="submit"
|
|||
|
|
className="w-full"
|
|||
|
|
loading={login.isPending}
|
|||
|
|
>
|
|||
|
|
登录
|
|||
|
|
</Button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div className="mt-6 text-center text-sm text-gray-600">
|
|||
|
|
还没有账号？{' '}
|
|||
|
|
<a href="/register" className="text-blue-600 hover:underline">
|
|||
|
|
立即注册
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|