332 lines
18 KiB
TypeScript
332 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { Building2, KeyRound, Loader2, Pencil, Plus, RefreshCw, ShieldCheck, Trash2, UserPlus } from "lucide-react";
|
|
import { AccountSecurityPanel } from "@/components/account-security-panel";
|
|
|
|
type Role = "super_admin" | "organization_admin" | "user";
|
|
type Status = "active" | "disabled";
|
|
|
|
type Organization = { id: string; name: string; status: Status };
|
|
type Member = {
|
|
id: string;
|
|
phone: string;
|
|
displayName: string;
|
|
role: Role;
|
|
organizationId: string | null;
|
|
status: Status;
|
|
createdAt: string;
|
|
lastLoginAt: string | null;
|
|
lockedUntil: string | null;
|
|
};
|
|
|
|
type AccountPayload = {
|
|
currentOrganizationId: string | null;
|
|
organizations: Organization[];
|
|
members: Member[];
|
|
canManageOrganizations: boolean;
|
|
canAssignOrganizationAdmin: boolean;
|
|
};
|
|
|
|
type AccountManagerProps = {
|
|
canManageAccounts: boolean;
|
|
};
|
|
|
|
const roleLabels: Record<Role, string> = {
|
|
super_admin: "超级管理员",
|
|
organization_admin: "组织管理员",
|
|
user: "普通用户"
|
|
};
|
|
|
|
export function AccountManager({ canManageAccounts }: AccountManagerProps) {
|
|
const [payload, setPayload] = useState<AccountPayload | null>(null);
|
|
const [loading, setLoading] = useState(canManageAccounts);
|
|
const [saving, setSaving] = useState(false);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedOrganizationId, setSelectedOrganizationId] = useState("");
|
|
const [form, setForm] = useState({ phone: "", displayName: "", password: "", role: "user" as Role });
|
|
const [organizationName, setOrganizationName] = useState("");
|
|
|
|
const selectedOrganization = useMemo(
|
|
() => payload?.organizations.find((organization) => organization.id === selectedOrganizationId),
|
|
[payload?.organizations, selectedOrganizationId]
|
|
);
|
|
const members = payload?.members || [];
|
|
|
|
async function loadAccounts(organizationId = selectedOrganizationId) {
|
|
if (!canManageAccounts) return;
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const query = organizationId ? `?organizationId=${encodeURIComponent(organizationId)}` : "";
|
|
const response = await fetch(`/api/admin/accounts${query}`, { cache: "no-store" });
|
|
const next = await response.json() as AccountPayload & { error?: string };
|
|
if (!response.ok) throw new Error(next.error || "账号列表加载失败。");
|
|
setPayload(next);
|
|
setSelectedOrganizationId(next.currentOrganizationId || "");
|
|
} catch (requestError) {
|
|
setError(requestError instanceof Error ? requestError.message : String(requestError));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (canManageAccounts) void loadAccounts();
|
|
else setLoading(false);
|
|
}, [canManageAccounts]);
|
|
|
|
async function createUser(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setSaving(true);
|
|
setMessage(null);
|
|
setError(null);
|
|
try {
|
|
const response = await fetch("/api/admin/accounts", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
phone: form.phone,
|
|
displayName: form.displayName,
|
|
password: form.password,
|
|
role: form.role,
|
|
organizationId: selectedOrganization?.id
|
|
})
|
|
});
|
|
const result = await response.json().catch(() => ({})) as { error?: string };
|
|
if (!response.ok) throw new Error(result.error || "账号创建失败。");
|
|
setMessage("账号已创建。");
|
|
setForm({ phone: "", displayName: "", password: "", role: "user" });
|
|
await loadAccounts(selectedOrganization?.id || "");
|
|
} catch (requestError) {
|
|
setError(requestError instanceof Error ? requestError.message : String(requestError));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function createOrganization(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (!organizationName.trim()) return;
|
|
setSaving(true);
|
|
setMessage(null);
|
|
setError(null);
|
|
try {
|
|
const response = await fetch("/api/admin/organizations", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name: organizationName })
|
|
});
|
|
const result = await response.json().catch(() => ({})) as { error?: string };
|
|
if (!response.ok) throw new Error(result.error || "组织创建失败。");
|
|
setOrganizationName("");
|
|
setMessage("组织已创建。");
|
|
await loadAccounts();
|
|
} catch (requestError) {
|
|
setError(requestError instanceof Error ? requestError.message : String(requestError));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function renameOrganization(organization: Organization) {
|
|
const name = window.prompt("请输入新的组织名称", organization.name)?.trim();
|
|
if (!name || name === organization.name) return;
|
|
await mutateOrganization("PATCH", { organizationId: organization.id, name }, "组织名称已更新。");
|
|
}
|
|
|
|
async function toggleOrganization(organization: Organization) {
|
|
const status: Status = organization.status === "active" ? "disabled" : "active";
|
|
await mutateOrganization("PATCH", { organizationId: organization.id, status }, status === "active" ? "组织已启用。" : "组织已停用。登录和新账号创建会受到限制。");
|
|
}
|
|
|
|
async function deleteOrganization(organization: Organization) {
|
|
if (!window.confirm(`确定删除“${organization.name}”吗？只有没有任何账号的组织才可以删除。`)) return;
|
|
await mutateOrganization("DELETE", { organizationId: organization.id }, "组织已删除。");
|
|
}
|
|
|
|
async function mutateOrganization(method: string, body: Record<string, unknown>, successMessage: string) {
|
|
setError(null);
|
|
setMessage(null);
|
|
try {
|
|
const response = await fetch("/api/admin/organizations", {
|
|
method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body)
|
|
});
|
|
const result = await response.json().catch(() => ({})) as { error?: string };
|
|
if (!response.ok) throw new Error(result.error || "组织操作失败。");
|
|
setMessage(successMessage);
|
|
if (method === "DELETE") {
|
|
setSelectedOrganizationId("");
|
|
await loadAccounts("");
|
|
} else {
|
|
await loadAccounts(selectedOrganizationId);
|
|
}
|
|
} catch (requestError) {
|
|
setError(requestError instanceof Error ? requestError.message : String(requestError));
|
|
}
|
|
}
|
|
|
|
async function changeStatus(member: Member) {
|
|
const nextStatus: Status = member.status === "active" ? "disabled" : "active";
|
|
await mutateMember("PUT", { userId: member.id, status: nextStatus }, nextStatus === "active" ? "账号已启用。" : "账号已停用。");
|
|
}
|
|
|
|
async function resetPassword(member: Member) {
|
|
const password = window.prompt(`为 ${member.displayName} 设置新密码（至少 8 位）`);
|
|
if (!password) return;
|
|
await mutateMember("POST", { userId: member.id, newPassword: password }, "密码已重置。", "/api/admin/accounts/password");
|
|
}
|
|
|
|
async function changeRole(member: Member, nextRole: Role) {
|
|
await mutateMember("PATCH", { userId: member.id, role: nextRole }, "账号角色已更新。");
|
|
}
|
|
|
|
async function deleteMember(member: Member) {
|
|
if (!window.confirm(`确定彻底删除“${member.displayName}”吗？素材和任务会转移到组织归档账号，用量记录保留。`)) return;
|
|
await mutateMember("DELETE", { userId: member.id }, "账号已删除。");
|
|
}
|
|
|
|
async function mutateMember(method: string, body: Record<string, unknown>, successMessage: string, endpoint = "/api/admin/accounts") {
|
|
setError(null);
|
|
setMessage(null);
|
|
try {
|
|
const response = await fetch(endpoint, {
|
|
method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body)
|
|
});
|
|
const result = await response.json().catch(() => ({})) as { error?: string };
|
|
if (!response.ok) throw new Error(result.error || "操作失败。");
|
|
setMessage(successMessage);
|
|
await loadAccounts(selectedOrganizationId);
|
|
} catch (requestError) {
|
|
setError(requestError instanceof Error ? requestError.message : String(requestError));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="account-directory">
|
|
<header className="account-directory-head">
|
|
<div className="account-directory-intro">
|
|
<h1>账户与访问</h1>
|
|
</div>
|
|
</header>
|
|
|
|
{message ? <div className="account-feedback success" role="status">{message}</div> : null}
|
|
{error ? <div className="account-feedback error" role="alert">{error}</div> : null}
|
|
|
|
<section className="account-workspace" aria-label="账户工作区">
|
|
<AccountSecurityPanel />
|
|
|
|
{canManageAccounts ? (
|
|
<>
|
|
<section className="account-management-section" aria-labelledby="account-management-title">
|
|
<div className="account-workspace-heading">
|
|
<div>
|
|
<h2 id="account-management-title">组织与成员管理</h2>
|
|
</div>
|
|
<ShieldCheck aria-hidden="true" />
|
|
</div>
|
|
|
|
<div className="account-management-grid">
|
|
<div className="account-management-form">
|
|
<div className="account-subsection-heading">
|
|
<h3>创建账号</h3>
|
|
</div>
|
|
<form className="account-form-grid" onSubmit={createUser}>
|
|
<label className="field"><span>手机号</span><input inputMode="tel" value={form.phone} onChange={(event) => setForm((current) => ({ ...current, phone: event.target.value }))} placeholder="请输入手机号" /></label>
|
|
<label className="field"><span>显示名称</span><input value={form.displayName} onChange={(event) => setForm((current) => ({ ...current, displayName: event.target.value }))} placeholder="请输入名称" /></label>
|
|
<label className="field"><span>初始密码</span><input type="password" autoComplete="new-password" value={form.password} onChange={(event) => setForm((current) => ({ ...current, password: event.target.value }))} placeholder="至少 8 位" /></label>
|
|
{payload?.canAssignOrganizationAdmin ? <label className="field"><span>角色</span><select value={form.role} onChange={(event) => setForm((current) => ({ ...current, role: event.target.value as Role }))}><option value="user">普通用户</option><option value="organization_admin">组织管理员</option><option value="super_admin">超级管理员</option></select></label> : null}
|
|
<label className="field account-form-wide"><span>组织</span><select value={selectedOrganization?.id || ""} onChange={(event) => { setSelectedOrganizationId(event.target.value); void loadAccounts(event.target.value); }} disabled={!payload?.canManageOrganizations && Boolean(selectedOrganization)}><option value="">{payload?.canManageOrganizations ? "全平台 / 未归属" : "选择组织"}</option>{payload?.organizations.map((organization) => <option key={organization.id} value={organization.id}>{organization.name}</option>)}</select></label>
|
|
<button className="button primary account-create-submit account-form-wide" type="submit" disabled={saving || loading || (form.role !== "super_admin" && !selectedOrganization?.id) || !form.phone || !form.displayName || !form.password}><UserPlus size={17} />{saving ? "创建中" : "创建账号"}</button>
|
|
</form>
|
|
</div>
|
|
|
|
{payload?.canManageOrganizations ? (
|
|
<div className="account-management-form account-organization-form">
|
|
<div className="account-subsection-heading">
|
|
<h3>组织目录</h3>
|
|
</div>
|
|
<form className="account-department-form" onSubmit={createOrganization}>
|
|
<label className="field"><span>新组织名称</span><input value={organizationName} onChange={(event) => setOrganizationName(event.target.value)} placeholder="例如：华东运营组" /></label>
|
|
<button className="button secondary" type="submit" disabled={saving || !organizationName.trim()}><Plus size={17} />创建组织</button>
|
|
</form>
|
|
<div className="account-org-list">{payload.organizations.map((organization) => (
|
|
<div className="account-org-item" key={organization.id}>
|
|
<div><strong>{organization.name}</strong><small className={organization.status === "active" ? "org-active" : "org-disabled"}>{organization.status === "active" ? "启用" : "停用"}</small></div>
|
|
<div className="account-org-actions">
|
|
<button className="icon-button" type="button" onClick={() => void renameOrganization(organization)} title="重命名" aria-label={`重命名 ${organization.name}`}><Pencil size={15} /></button>
|
|
<button className="icon-button" type="button" onClick={() => void toggleOrganization(organization)} title={organization.status === "active" ? "停用组织" : "启用组织"} aria-label={`${organization.status === "active" ? "停用" : "启用"} ${organization.name}`}><RefreshCw size={15} /></button>
|
|
<button className="icon-button danger-icon" type="button" onClick={() => void deleteOrganization(organization)} title="删除组织" aria-label={`删除 ${organization.name}`}><Trash2 size={15} /></button>
|
|
</div>
|
|
</div>
|
|
))}</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="account-members-panel" aria-labelledby="account-members-title">
|
|
<div className="account-panel-heading account-members-heading">
|
|
<div>
|
|
<h2 id="account-members-title">{selectedOrganization?.name || "全平台账号"}</h2>
|
|
</div>
|
|
<div className="account-members-tools">
|
|
<label className="account-filter-field">
|
|
<span>组织</span>
|
|
<select value={selectedOrganization?.id || ""} onChange={(event) => { setSelectedOrganizationId(event.target.value); void loadAccounts(event.target.value); }} disabled={!payload?.canManageOrganizations && Boolean(selectedOrganization)} aria-label="按组织筛选账号">
|
|
<option value="">{payload?.canManageOrganizations ? "全平台" : "当前组织"}</option>
|
|
{payload?.organizations.map((organization) => <option key={organization.id} value={organization.id}>{organization.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<button className="icon-button" type="button" onClick={() => void loadAccounts(selectedOrganizationId)} title="刷新账号列表" aria-label="刷新账号列表"><RefreshCw size={17} /></button>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? <AccountLoading /> : members.length ? (
|
|
<div className="account-table" role="table" aria-label="账号列表">
|
|
<div className="account-row account-head" role="row"><span role="columnheader">账号</span><span role="columnheader">角色</span><span role="columnheader">状态</span><span role="columnheader">操作</span></div>
|
|
{members.map((member) => (
|
|
<div className="account-row" role="row" key={member.id}>
|
|
<div className="account-member-identity" role="cell">
|
|
<span className="account-avatar" aria-hidden="true">{accountInitial(member.displayName)}</span>
|
|
<div className="account-member-main"><strong>{member.displayName}</strong><small>{member.phone}</small></div>
|
|
</div>
|
|
<div className="account-role-cell" role="cell">{payload?.canAssignOrganizationAdmin ? <select className="account-status-select" value={member.role} onChange={(event) => void changeRole(member, event.target.value as Role)} aria-label={`${member.displayName}的角色`}><option value="user">{roleLabels.user}</option><option value="organization_admin">{roleLabels.organization_admin}</option><option value="super_admin">{roleLabels.super_admin}</option></select> : <span>{roleLabels[member.role]}</span>}</div>
|
|
<div role="cell"><span className={`account-status-badge ${member.status === "active" ? "active" : "disabled"}`}>{member.status === "active" ? "启用" : "停用"}</span></div>
|
|
<div className="account-row-actions" role="cell">
|
|
<button className="icon-button" type="button" onClick={() => void resetPassword(member)} title="重置密码" aria-label={`重置 ${member.displayName} 密码`}><KeyRound size={16} /></button>
|
|
<button className="icon-button" type="button" onClick={() => void changeStatus(member)} title={member.status === "active" ? "停用" : "启用"} aria-label={`${member.status === "active" ? "停用" : "启用"} ${member.displayName}`}><RefreshCw size={16} /></button>
|
|
<button className="icon-button danger-icon" type="button" onClick={() => void deleteMember(member)} title="彻底删除" aria-label={`删除 ${member.displayName}`}><Trash2 size={16} /></button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : <div className="account-empty">当前组织还没有账号。</div>}
|
|
</section>
|
|
</>
|
|
) : null}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AccountLoading() {
|
|
return (
|
|
<div className="account-loading" role="status" aria-live="polite">
|
|
<div className="account-skeleton-list" aria-hidden="true">
|
|
<span /><span /><span />
|
|
</div>
|
|
<span>正在加载账号</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function accountInitial(value: string) {
|
|
return value.trim().slice(0, 2) || "账";
|
|
}
|