105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { Lock, User } from 'lucide-react';
|
|
import { api } from '../lib/api';
|
|
|
|
interface LoginProps {
|
|
onLogin: () => void;
|
|
}
|
|
|
|
export default function Login({ onLogin }: LoginProps) {
|
|
const [username, setUsername] = useState('admin');
|
|
const [password, setPassword] = useState('123456');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
await api.login(username, password);
|
|
onLogin();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '登录失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-neutral-50 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="w-full max-w-md"
|
|
>
|
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-neutral-200">
|
|
<div className="bg-slate-950 p-8 text-white text-center">
|
|
<div className="inline-flex items-center justify-center w-24 h-24 mb-4">
|
|
<img
|
|
src="/logo.png"
|
|
alt="模型逆向系统"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
</div>
|
|
<h1 className="px-2 text-3xl font-bold leading-tight">基于模型逆向体素化及DICOM分割标注系统</h1>
|
|
<p className="mt-3 text-lg font-semibold text-slate-300">模型逆向系统</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-neutral-700 block mb-1">账号</label>
|
|
<div className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
|
|
<User size={18} />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 bg-neutral-50 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
|
|
placeholder="请输入账号"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-neutral-700 block mb-1">密码</label>
|
|
<div className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
|
|
<Lock size={18} />
|
|
</span>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 bg-neutral-50 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
|
|
placeholder="请输入密码"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
{loading ? (
|
|
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
) : (
|
|
'立即登录'
|
|
)}
|
|
</button>
|
|
{error && (
|
|
<p className="text-sm text-rose-600 text-center font-medium">{error}</p>
|
|
)}
|
|
</form>
|
|
</div>
|
|
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|