550 lines
20 KiB
TypeScript
550 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useRef } from "react";
|
||
import { useAuth } from "@/hooks/use-auth";
|
||
import { useActiveClass } from "@/hooks/use-active-class";
|
||
import { fetchAPI, putAPI, postAPI, deleteAPI, uploadAPI } from "@/lib/api";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { ErrorState } from "@/components/error-state";
|
||
import { Pagination } from "@/components/pagination";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog";
|
||
import { ConfirmDialog } from "@/components/confirm-dialog";
|
||
import { toast } from "sonner";
|
||
import type { UserListItem, RosterEntry } from "@/lib/types";
|
||
import { USER_STATUS, ROLES } from "@/lib/constants";
|
||
|
||
export default function MembersPage() {
|
||
const { user } = useAuth();
|
||
const { activeClassId } = useActiveClass();
|
||
|
||
// Tab state
|
||
const [activeTab, setActiveTab] = useState<"members" | "roster">("roster");
|
||
|
||
// Members state
|
||
const [members, setMembers] = useState<UserListItem[]>([]);
|
||
const [membersLoading, setMembersLoading] = useState(true);
|
||
const [membersError, setMembersError] = useState<string | null>(null);
|
||
const [membersPage, setMembersPage] = useState(1);
|
||
const [membersTotalPages, setMembersTotalPages] = useState(1);
|
||
const [filter, setFilter] = useState("all");
|
||
|
||
// Roster state
|
||
const [roster, setRoster] = useState<RosterEntry[]>([]);
|
||
const [rosterLoading, setRosterLoading] = useState(true);
|
||
const [rosterError, setRosterError] = useState<string | null>(null);
|
||
const [rosterPage, setRosterPage] = useState(1);
|
||
const [rosterTotalPages, setRosterTotalPages] = useState(1);
|
||
const [inviteCode, setInviteCode] = useState("");
|
||
const [importOpen, setImportOpen] = useState(false);
|
||
const [importText, setImportText] = useState("");
|
||
const [importing, setImporting] = useState(false);
|
||
const [clearTarget, setClearTarget] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const isSuperAdmin = user?.role === "super_admin";
|
||
|
||
// Load members
|
||
const loadMembers = async () => {
|
||
if (!activeClassId) {
|
||
setMembersLoading(false);
|
||
return;
|
||
}
|
||
setMembersLoading(true);
|
||
setMembersError(null);
|
||
try {
|
||
const res = await fetchAPI<any>(`/api/classes/${activeClassId}/members`, {
|
||
page: String(membersPage),
|
||
page_size: "20",
|
||
});
|
||
setMembers(res.items || []);
|
||
setMembersTotalPages(res.total_pages || 1);
|
||
} catch (err: any) {
|
||
setMembersError(err.message || "加载失败");
|
||
} finally {
|
||
setMembersLoading(false);
|
||
}
|
||
};
|
||
|
||
// Load roster
|
||
const loadRoster = async () => {
|
||
if (!activeClassId) {
|
||
setRosterLoading(false);
|
||
return;
|
||
}
|
||
setRosterLoading(true);
|
||
setRosterError(null);
|
||
try {
|
||
const [rosterRes, codeRes] = await Promise.all([
|
||
fetchAPI<any>(`/api/classes/${activeClassId}/roster`, {
|
||
page: String(rosterPage),
|
||
page_size: "50",
|
||
}),
|
||
fetchAPI<any>(`/api/classes/${activeClassId}/invite-code`),
|
||
]);
|
||
setRoster(rosterRes.items || []);
|
||
setRosterTotalPages(rosterRes.total_pages || 1);
|
||
setInviteCode(codeRes.invite_code || "");
|
||
} catch (err: any) {
|
||
setRosterError(err.message || "加载失败");
|
||
} finally {
|
||
setRosterLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!activeClassId) return;
|
||
if (activeTab === "members") loadMembers();
|
||
else loadRoster();
|
||
}, [activeClassId, activeTab, membersPage, rosterPage]);
|
||
|
||
// Member actions
|
||
const handleStatusChange = async (
|
||
userId: number,
|
||
newStatus: string,
|
||
role?: string
|
||
) => {
|
||
try {
|
||
await putAPI(`/api/users/${userId}/status`, {
|
||
status: newStatus,
|
||
role: role || undefined,
|
||
});
|
||
toast.success(
|
||
`已更新状态为 ${USER_STATUS[newStatus as keyof typeof USER_STATUS] || newStatus}`
|
||
);
|
||
loadMembers();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "操作失败");
|
||
}
|
||
};
|
||
|
||
const handleRoleChange = async (userId: number, newRole: string) => {
|
||
try {
|
||
await putAPI(`/api/users/${userId}/status`, {
|
||
status: "approved",
|
||
role: newRole,
|
||
});
|
||
toast.success(
|
||
`角色已更新为 ${ROLES[newRole as keyof typeof ROLES] || newRole}`
|
||
);
|
||
loadMembers();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "操作失败");
|
||
}
|
||
};
|
||
|
||
const getStatusBadge = (status: string) => {
|
||
const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
|
||
approved: "default",
|
||
disabled: "secondary",
|
||
};
|
||
return (
|
||
<Badge variant={variants[status] || "secondary"}>
|
||
{USER_STATUS[status as keyof typeof USER_STATUS] || status}
|
||
</Badge>
|
||
);
|
||
};
|
||
|
||
// Roster actions
|
||
const handleCopyCode = () => {
|
||
navigator.clipboard.writeText(inviteCode);
|
||
toast.success("邀请码已复制");
|
||
};
|
||
|
||
const handleRegenerateCode = async () => {
|
||
try {
|
||
const res = await postAPI<any>(`/api/classes/${activeClassId}/invite-code/regenerate`);
|
||
setInviteCode(res.invite_code);
|
||
toast.success("邀请码已重新生成");
|
||
} catch (err: any) {
|
||
toast.error(err.message || "操作失败");
|
||
}
|
||
};
|
||
|
||
const handleTextImport = async () => {
|
||
if (!importText.trim()) return;
|
||
setImporting(true);
|
||
try {
|
||
// Parse text: each line is "学号 姓名" or "学号,姓名" or "学号\t姓名"
|
||
const entries: { student_id: string; name: string }[] = [];
|
||
const lines = importText.trim().split("\n");
|
||
for (const line of lines) {
|
||
const parts = line.trim().split(/[,\t，\s]+/);
|
||
if (parts.length >= 2) {
|
||
entries.push({ student_id: parts[0], name: parts.slice(1).join("") });
|
||
}
|
||
}
|
||
if (entries.length === 0) {
|
||
toast.error("未解析到有效数据，每行格式：学号 姓名");
|
||
return;
|
||
}
|
||
const res = await postAPI<any>(`/api/classes/${activeClassId}/roster/import`, {
|
||
entries,
|
||
});
|
||
toast.success(res.message);
|
||
setImportOpen(false);
|
||
setImportText("");
|
||
loadRoster();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "导入失败");
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
};
|
||
|
||
const handleFileUpload = async () => {
|
||
const fileInput = fileInputRef.current;
|
||
if (!fileInput?.files?.length) return;
|
||
setImporting(true);
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append("file", fileInput.files[0]);
|
||
const res = await uploadAPI(`/api/classes/${activeClassId}/roster/upload`, formData);
|
||
toast.success((res as any).message);
|
||
setImportOpen(false);
|
||
if (fileInput) fileInput.value = "";
|
||
loadRoster();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "上传失败");
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteRoster = async (rosterId: number) => {
|
||
try {
|
||
await deleteAPI(`/api/classes/${activeClassId}/roster/${rosterId}`);
|
||
toast.success("已删除");
|
||
loadRoster();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "删除失败");
|
||
}
|
||
};
|
||
|
||
const handleClearRoster = async () => {
|
||
try {
|
||
const res = await postAPI<any>(`/api/classes/${activeClassId}/roster/clear`);
|
||
toast.success(res.message);
|
||
setClearTarget(false);
|
||
loadRoster();
|
||
} catch (err: any) {
|
||
toast.error(err.message || "操作失败");
|
||
}
|
||
};
|
||
|
||
const filteredMembers =
|
||
filter === "all" ? members : members.filter((m) => m.status === filter);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h1 className="text-2xl font-bold">成员与花名册</h1>
|
||
<p className="text-gray-500 mt-1">管理班级花名册、邀请码和已注册成员</p>
|
||
</div>
|
||
|
||
{!activeClassId ? (
|
||
<div className="text-center py-12 text-gray-400">
|
||
{isSuperAdmin ? "请在顶部选择一个班级" : "您尚未分配班级"}
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* Tab switcher */}
|
||
<div className="flex gap-2 border-b pb-2">
|
||
<Button
|
||
variant={activeTab === "roster" ? "default" : "ghost"}
|
||
size="sm"
|
||
onClick={() => setActiveTab("roster")}
|
||
>
|
||
花名册
|
||
</Button>
|
||
<Button
|
||
variant={activeTab === "members" ? "default" : "ghost"}
|
||
size="sm"
|
||
onClick={() => setActiveTab("members")}
|
||
>
|
||
成员管理
|
||
</Button>
|
||
</div>
|
||
|
||
{activeTab === "roster" && (
|
||
<div className="space-y-4">
|
||
{/* Invite code section */}
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-500">班级邀请码</p>
|
||
<p className="text-2xl font-mono font-bold tracking-widest mt-1">
|
||
{inviteCode || "—"}
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button variant="outline" size="sm" onClick={handleCopyCode}>
|
||
复制
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={handleRegenerateCode}>
|
||
重新生成
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-gray-400 mt-2">
|
||
将此邀请码分享给学生，学生注册时输入邀请码+学号即可加入班级
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Import actions */}
|
||
<div className="flex gap-2">
|
||
<Dialog open={importOpen} onOpenChange={(open) => { setImportOpen(open); if (!open) setImportText(""); }}>
|
||
<DialogTrigger>
|
||
<Button>导入花名册</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>导入花名册</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 pt-2">
|
||
<div>
|
||
<Label>文本输入（每行：学号 姓名，用空格或逗号分隔）</Label>
|
||
<Textarea
|
||
placeholder={"24001 张三\n24002 李四\n24003 王五"}
|
||
value={importText}
|
||
onChange={(e) => setImportText(e.target.value)}
|
||
rows={6}
|
||
className="mt-2 font-mono text-sm"
|
||
/>
|
||
<Button
|
||
onClick={handleTextImport}
|
||
disabled={importing || !importText.trim()}
|
||
className="mt-2 w-full"
|
||
>
|
||
{importing ? "导入中..." : "从文本导入"}
|
||
</Button>
|
||
</div>
|
||
<div className="relative">
|
||
<div className="absolute inset-0 flex items-center">
|
||
<span className="w-full border-t" />
|
||
</div>
|
||
<div className="relative flex justify-center text-xs uppercase">
|
||
<span className="bg-white px-2 text-gray-400">或</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<Label>上传 CSV / Excel 文件</Label>
|
||
<p className="text-xs text-gray-400 mt-1">
|
||
CSV 需含 student_id(学号) 和 name(姓名) 列；Excel 需含「学号」「姓名」列
|
||
</p>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept=".csv,.xlsx,.xls"
|
||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-medium file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200 mt-2"
|
||
/>
|
||
<Button
|
||
onClick={handleFileUpload}
|
||
disabled={importing}
|
||
className="mt-2 w-full"
|
||
variant="outline"
|
||
>
|
||
{importing ? "上传中..." : "上传文件"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setClearTarget(true)}
|
||
disabled={roster.filter((r) => r.status === "unregistered").length === 0}
|
||
>
|
||
清除未注册
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Roster list */}
|
||
{rosterLoading ? (
|
||
<div className="animate-pulse space-y-2">
|
||
{[1, 2, 3].map((i) => (
|
||
<Card key={i}>
|
||
<CardContent className="p-4">
|
||
<div className="h-12 bg-gray-200 rounded" />
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
) : rosterError ? (
|
||
<ErrorState message={rosterError} onRetry={loadRoster} />
|
||
) : roster.length === 0 ? (
|
||
<div className="text-center py-12 text-gray-400">
|
||
暂无花名册数据，点击「导入花名册」添加
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{roster.map((r) => (
|
||
<Card key={r.id}>
|
||
<CardContent className="p-4 flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">{r.name}</p>
|
||
<p className="text-sm text-gray-500">{r.student_id}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant={r.status === "registered" ? "default" : "outline"}>
|
||
{r.status === "registered" ? "已注册" : "未注册"}
|
||
</Badge>
|
||
{r.status === "unregistered" && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-red-500"
|
||
onClick={() => handleDeleteRoster(r.id)}
|
||
>
|
||
删除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<Pagination
|
||
page={rosterPage}
|
||
totalPages={rosterTotalPages}
|
||
onPageChange={setRosterPage}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === "members" && (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-lg font-semibold">已注册成员</h2>
|
||
<Select value={filter} onValueChange={(v) => v && setFilter(v)}>
|
||
<SelectTrigger className="w-32">
|
||
<SelectValue>
|
||
{filter === "all"
|
||
? "全部"
|
||
: USER_STATUS[filter as keyof typeof USER_STATUS] || filter}
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
<SelectItem value="approved">已通过</SelectItem>
|
||
<SelectItem value="disabled">已禁用</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{membersLoading ? (
|
||
<div className="animate-pulse space-y-2">
|
||
{[1, 2, 3].map((i) => (
|
||
<Card key={i}>
|
||
<CardContent className="p-4">
|
||
<div className="h-12 bg-gray-200 rounded" />
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
) : membersError ? (
|
||
<ErrorState message={membersError} onRetry={loadMembers} />
|
||
) : filteredMembers.length === 0 ? (
|
||
<div className="text-center py-8 text-gray-400">没有符合条件的成员</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{filteredMembers.map((m) => (
|
||
<Card key={m.id}>
|
||
<CardContent className="p-4 flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">{m.name}</p>
|
||
<p className="text-sm text-gray-500">
|
||
{m.email}
|
||
{m.student_id ? ` · ${m.student_id}` : ""}
|
||
{m.company ? ` · ${m.company}` : ""}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Select
|
||
value={m.role}
|
||
onValueChange={(v) => v && handleRoleChange(m.id, v)}
|
||
>
|
||
<SelectTrigger className="w-28 h-7 text-xs">
|
||
<SelectValue>
|
||
{ROLES[m.role as keyof typeof ROLES] || m.role}
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="student">同学</SelectItem>
|
||
<SelectItem value="class_admin">班级管理员</SelectItem>
|
||
{isSuperAdmin && (
|
||
<SelectItem value="super_admin">超级管理员</SelectItem>
|
||
)}
|
||
</SelectContent>
|
||
</Select>
|
||
{getStatusBadge(m.status)}
|
||
{m.status === "approved" && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-red-500"
|
||
onClick={() => handleStatusChange(m.id, "disabled")}
|
||
>
|
||
禁用
|
||
</Button>
|
||
)}
|
||
{m.status === "disabled" && (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleStatusChange(m.id, "approved")}
|
||
>
|
||
启用
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<Pagination
|
||
page={membersPage}
|
||
totalPages={membersTotalPages}
|
||
onPageChange={setMembersPage}
|
||
/>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
<ConfirmDialog
|
||
open={clearTarget}
|
||
onOpenChange={(open) => { if (!open) setClearTarget(false); }}
|
||
title="清除未注册花名册"
|
||
description="确定清除所有未注册的花名册条目？此操作不可恢复。"
|
||
confirmText="清除"
|
||
variant="destructive"
|
||
onConfirm={handleClearRoster}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|