feat: add four new student modules (rotation, skill-video, exam-prep, academic) with backend APIs and frontend pages; add exam-prep question history with DB persistence
This commit is contained in:
freedakgmail
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 登录 / 注册页。
|
||||
*
|
||||
* 支持两种模式切换：登录与注册。注册时可选择角色（学生/导师/管理员），便于演示三端。
|
||||
* 成功后依据角色跳转到对应工作台。错误信息取自后端统一错误体。
|
||||
*/
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { homeForRole } from '@/components/app-shell';
|
||||
import { ErrorBanner } from '@/components/ui';
|
||||
import { ApiError } from '@/lib/api';
|
||||
import { useAuth } from '@/lib/auth-context';
|
||||
import { ROLE_LABELS, Role } from '@/lib/types';
|
||||
|
||||
/** 内置测试账户（与后端 SEED_TEST_ACCOUNTS 一致），用于一键登录。 */
|
||||
const TEST_ACCOUNTS: {
|
||||
username: string;
|
||||
password: string;
|
||||
role: Role;
|
||||
}[] = [
|
||||
{ username: 'student', password: 'student123', role: Role.Student },
|
||||
{ username: 'mentor', password: 'mentor123', role: Role.Mentor },
|
||||
{ username: 'admin', password: 'admin123', role: Role.Administrator },
|
||||
];
|
||||
|
||||
export default function LoginPage() {
|
||||
const { user, loading, login, register } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const [role, setRole] = useState<Role>(Role.Student);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [quickRole, setQuickRole] = useState<Role | null>(null);
|
||||
|
||||
// 已登录则直接跳转。
|
||||
useEffect(() => {
|
||||
if (!loading && user) {
|
||||
router.replace(homeForRole(user.role));
|
||||
}
|
||||
}, [loading, user, router]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const u =
|
||||
mode === 'login'
|
||||
? await login(username, password)
|
||||
: await register({ username, password, role, displayName });
|
||||
router.replace(homeForRole(u.role));
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(err.body.message ?? '操作失败');
|
||||
} else {
|
||||
setError('网络错误，请确认后端服务已启动');
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
/** 一键登录某测试账户。 */
|
||||
async function quickLogin(acct: (typeof TEST_ACCOUNTS)[number]) {
|
||||
setError(null);
|
||||
setQuickRole(acct.role);
|
||||
try {
|
||||
const u = await login(acct.username, acct.password);
|
||||
router.replace(homeForRole(u.role));
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(
|
||||
`${ROLE_LABELS[acct.role]}测试账户登录失败：${err.body.message ?? ''}`,
|
||||
);
|
||||
} else {
|
||||
setError('网络错误，请确认后端服务已启动');
|
||||
}
|
||||
setQuickRole(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-brand-50 to-slate-100 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-6 text-center">
|
||||
<h1 className="text-2xl font-bold text-brand-700">
|
||||
医科高校 AI 学习中心
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
学习 · 对练 · 画像 · 科研 · 协同
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="mb-5 grid grid-cols-2 gap-2 rounded-lg bg-slate-100 p-1">
|
||||
{(['login', 'register'] as const).map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => {
|
||||
setMode(m);
|
||||
setError(null);
|
||||
}}
|
||||
className={`rounded-md py-2 text-sm font-medium transition ${
|
||||
mode === m
|
||||
? 'bg-white text-brand-700 shadow-sm'
|
||||
: 'text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{m === 'login' ? '登录' : '注册'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="至少 3 个字符"
|
||||
autoComplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
className="input"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="至少 8 个字符"
|
||||
autoComplete={
|
||||
mode === 'login' ? 'current-password' : 'new-password'
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mode === 'register' && (
|
||||
<>
|
||||
<div>
|
||||
<label className="label">展示名</label>
|
||||
<input
|
||||
className="input"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder="如：张三"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">角色</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{Object.values(Role).map((r) => (
|
||||
<button
|
||||
type="button"
|
||||
key={r}
|
||||
onClick={() => setRole(r)}
|
||||
className={`rounded-lg border px-3 py-2 text-sm transition ${
|
||||
role === r
|
||||
? 'border-brand-500 bg-brand-50 text-brand-700'
|
||||
: 'border-slate-300 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{ROLE_LABELS[r]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && <ErrorBanner message={error} />}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary w-full"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting
|
||||
? '处理中…'
|
||||
: mode === 'login'
|
||||
? '登录'
|
||||
: '注册并登录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-5 border-t border-slate-100 pt-4">
|
||||
<p className="mb-2 text-center text-xs text-slate-400">
|
||||
测试账户 · 一键登录
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{TEST_ACCOUNTS.map((acct) => (
|
||||
<button
|
||||
key={acct.role}
|
||||
type="button"
|
||||
onClick={() => quickLogin(acct)}
|
||||
disabled={quickRole !== null}
|
||||
className="flex flex-col items-center rounded-lg border border-slate-200 px-2 py-2 text-center transition hover:border-brand-400 hover:bg-brand-50 disabled:opacity-60"
|
||||
>
|
||||
<span className="text-sm font-medium text-slate-700">
|
||||
{ROLE_LABELS[acct.role]}
|
||||
</span>
|
||||
<span className="mt-0.5 text-[11px] text-slate-400">
|
||||
{quickRole === acct.role ? '登录中…' : acct.username}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-center text-[11px] text-slate-300">
|
||||
口令：student123 / mentor123 / admin123
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-center text-xs text-slate-400">
|
||||
后端服务默认运行于 http://localhost:3000
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user