652 lines
26 KiB
TypeScript
652 lines
26 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
// TODO: split file (>500 lines per CLAUDE.md 3.2.1 budget)
|
|
import { X } from "lucide-react";
|
|
import { ApiRequestError, type Employee, type Workspace, type WorkspaceMember } from "../../services/api";
|
|
import { useApi, useAuth } from "../../context/AuthContext";
|
|
import Icon from "../../components/common/Icon";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Textarea } from "~/components/ui/textarea";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "~/components/ui/table";
|
|
import { UserMultiSelect } from "./UserMultiSelect";
|
|
import {
|
|
formFieldClass,
|
|
modalBackdropClass,
|
|
modalCompactClass,
|
|
modalEyebrowClass,
|
|
modalFooterClass,
|
|
modalFormClass,
|
|
modalHeaderClass,
|
|
modalTitleClass,
|
|
} from "../platform/modalUi";
|
|
|
|
import "../../styles/admin.css";
|
|
|
|
const EMPTY_PROJECT_FORM = {
|
|
workspace_code: "",
|
|
workspace_name: "",
|
|
quota_bytes: 0,
|
|
description: "",
|
|
};
|
|
|
|
const CLOSE_BUTTON_CLASS =
|
|
"size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
|
|
const SECONDARY_BUTTON_CLASS =
|
|
"h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
|
|
const PRIMARY_BUTTON_CLASS =
|
|
"h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
|
|
const FORM_INPUT_CLASS =
|
|
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
|
|
const FORM_TEXTAREA_CLASS =
|
|
"min-h-[92px] w-full resize-y rounded-md border border-[#d6e0e9] bg-white px-[11px] py-2.5 text-xs leading-[1.55] text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)]";
|
|
|
|
export function ProjectManagementPage({
|
|
onNotify,
|
|
onConnectionChange,
|
|
}: {
|
|
onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
|
|
onConnectionChange: (online: boolean) => void;
|
|
}) {
|
|
const api = useApi();
|
|
const { user, refreshWorkspaces } = useAuth();
|
|
const [projects, setProjects] = useState<Workspace[]>([]);
|
|
const [projectLoading, setProjectLoading] = useState(true);
|
|
const [projectDialogOpen, setProjectDialogOpen] = useState(false);
|
|
const [projectForm, setProjectForm] = useState(EMPTY_PROJECT_FORM);
|
|
const [editingProject, setEditingProject] = useState<Workspace | null>(null);
|
|
const [importMemberDialogOpen, setImportMemberDialogOpen] = useState(false);
|
|
const [selectedProject, setSelectedProject] = useState<Workspace | null>(null);
|
|
const [availableUsers, setAvailableUsers] = useState<Employee[]>([]);
|
|
const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
|
|
const [projectSearchTerm, setProjectSearchTerm] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
const [membersDrawerOpen, setMembersDrawerOpen] = useState(false);
|
|
const [currentProjectMembers, setCurrentProjectMembers] = useState<WorkspaceMember[]>([]);
|
|
const [membersLoading, setMembersLoading] = useState(false);
|
|
|
|
const canManage = user?.role_code === "admin";
|
|
|
|
const loadProjects = async (): Promise<void> => {
|
|
setProjectLoading(true);
|
|
try {
|
|
const workspaceList = await api.listWorkspaces();
|
|
setProjects(workspaceList);
|
|
onConnectionChange(true);
|
|
} catch (error) {
|
|
onConnectionChange(false);
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof Error ? error.message : "项目列表加载失败",
|
|
});
|
|
} finally {
|
|
setProjectLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
void loadProjects();
|
|
}, []);
|
|
|
|
const openCreateProject = (): void => {
|
|
setEditingProject(null);
|
|
setProjectForm(EMPTY_PROJECT_FORM);
|
|
setProjectDialogOpen(true);
|
|
};
|
|
|
|
const openEditProject = (project: Workspace): void => {
|
|
setEditingProject(project);
|
|
setProjectForm({
|
|
workspace_code: project.workspace_code,
|
|
workspace_name: project.workspace_name,
|
|
quota_bytes: project.quota_bytes,
|
|
description: project.description ?? "",
|
|
});
|
|
setProjectDialogOpen(true);
|
|
};
|
|
|
|
const submitProject = async (event: React.FormEvent): Promise<void> => {
|
|
event.preventDefault();
|
|
if (!projectForm.workspace_name.trim()) {
|
|
onNotify({ tone: "error", message: "请输入项目名称" });
|
|
return;
|
|
}
|
|
if (!projectForm.workspace_code.trim() && !editingProject) {
|
|
onNotify({ tone: "error", message: "请输入项目编码" });
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
if (editingProject) {
|
|
const updated = await api.updateWorkspace(editingProject.workspace_id, {
|
|
workspace_name: projectForm.workspace_name.trim(),
|
|
quota_bytes: projectForm.quota_bytes,
|
|
description: projectForm.description.trim() || undefined,
|
|
});
|
|
setProjects((current) =>
|
|
current.map((p) => (p.workspace_id === updated.workspace_id ? updated : p))
|
|
);
|
|
onNotify({ tone: "success", message: "项目信息已更新" });
|
|
} else {
|
|
const generatedCode = projectForm.workspace_code.trim() || projectForm.workspace_name.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").slice(0, 32);
|
|
const created = await api.createWorkspace({
|
|
workspace_code: generatedCode,
|
|
workspace_name: projectForm.workspace_name.trim(),
|
|
quota_bytes: projectForm.quota_bytes,
|
|
description: projectForm.description.trim() || undefined,
|
|
});
|
|
setProjects((current) => [...current, created]);
|
|
void refreshWorkspaces();
|
|
onNotify({ tone: "success", message: "项目已创建" });
|
|
}
|
|
setProjectDialogOpen(false);
|
|
} catch (error) {
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof ApiRequestError ? error.message : (editingProject ? "更新项目失败" : "创建项目失败"),
|
|
});
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const deleteProject = async (project: Workspace): Promise<void> => {
|
|
if (!window.confirm(`确定要删除项目"${project.workspace_name}"吗？此操作将级联软删所有成员。`)) return;
|
|
try {
|
|
await api.deleteWorkspace(project.workspace_id);
|
|
setProjects((current) => current.filter((p) => p.workspace_id !== project.workspace_id));
|
|
onNotify({ tone: "success", message: "项目已删除" });
|
|
} catch (error) {
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof Error ? error.message : "删除项目失败",
|
|
});
|
|
}
|
|
};
|
|
|
|
const openImportMemberDialog = async (project: Workspace): Promise<void> => {
|
|
setSelectedProject(project);
|
|
setSelectedUserIds([]);
|
|
setImportMemberDialogOpen(true);
|
|
|
|
// 加载可用用户和项目成员
|
|
try {
|
|
const [allUsers, currentMembers] = await Promise.all([
|
|
api.listPlatformEmployees(),
|
|
api.listWorkspaceMembers(project.workspace_id),
|
|
]);
|
|
setAvailableUsers(allUsers);
|
|
setCurrentProjectMembers(currentMembers);
|
|
} catch (error) {
|
|
// 如果加载失败，仍显示所有用户
|
|
const allUsers = await api.listPlatformEmployees();
|
|
setAvailableUsers(allUsers);
|
|
setCurrentProjectMembers([]);
|
|
}
|
|
};
|
|
|
|
const openMembersDrawer = (project: Workspace): void => {
|
|
setSelectedProject(project);
|
|
setMembersDrawerOpen(true);
|
|
void loadProjectMembers(project.workspace_id);
|
|
};
|
|
|
|
const loadProjectMembers = async (workspaceId: string): Promise<void> => {
|
|
setMembersLoading(true);
|
|
try {
|
|
const members = await api.listWorkspaceMembers(workspaceId);
|
|
setCurrentProjectMembers(members);
|
|
} catch (error) {
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof Error ? error.message : "成员列表加载失败",
|
|
});
|
|
} finally {
|
|
setMembersLoading(false);
|
|
}
|
|
};
|
|
|
|
const removeMember = async (userId: string): Promise<void> => {
|
|
if (!selectedProject) return;
|
|
// 管理员不能被移除
|
|
const targetMember = currentProjectMembers.find((m) => m.user_id === userId);
|
|
if (targetMember?.role_code === "admin") {
|
|
onNotify({ tone: "error", message: "管理员不能被移除" });
|
|
return;
|
|
}
|
|
try {
|
|
await api.deleteWorkspaceMember(selectedProject.workspace_id, userId);
|
|
setCurrentProjectMembers((current) => current.filter((m) => m.user_id !== userId));
|
|
onNotify({ tone: "success", message: "成员已移除" });
|
|
} catch (error) {
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof ApiRequestError ? error.message : "移除成员失败",
|
|
});
|
|
}
|
|
};
|
|
|
|
const importMember = async (): Promise<void> => {
|
|
if (!selectedProject || selectedUserIds.length === 0) {
|
|
onNotify({ tone: "error", message: "请选择要添加的用户" });
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await Promise.all(
|
|
selectedUserIds.map((userId) =>
|
|
api.addWorkspaceMember(selectedProject.workspace_id, {
|
|
user_id: userId,
|
|
})
|
|
)
|
|
);
|
|
setImportMemberDialogOpen(false);
|
|
onNotify({ tone: "success", message: `已添加 ${selectedUserIds.length} 名成员` });
|
|
} catch (error) {
|
|
onNotify({
|
|
tone: "error",
|
|
message: error instanceof ApiRequestError ? error.message : "添加成员失败",
|
|
});
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="admin-page">
|
|
<div className="admin-toolbar">
|
|
<div className="admin-toolbar__search">
|
|
<Icon name="search" size={14} />
|
|
<input
|
|
type="text"
|
|
placeholder="请输入项目名称"
|
|
className="admin-toolbar__input"
|
|
value={projectSearchTerm}
|
|
onChange={(event) => setProjectSearchTerm(event.target.value)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="button"
|
|
disabled={!canManage}
|
|
onClick={openCreateProject}
|
|
className={PRIMARY_BUTTON_CLASS}
|
|
>
|
|
<Icon name="plus" size={15} />
|
|
新建项目
|
|
</Button>
|
|
</div>
|
|
|
|
{!canManage && <div className="admin-readonly">当前为开发人员，只能查看项目列表。</div>}
|
|
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
|
|
<colgroup>
|
|
<col style={{ width: "32%" }} />
|
|
<col style={{ width: "22%" }} />
|
|
<col style={{ width: "15%" }} />
|
|
<col style={{ width: "14%" }} />
|
|
<col style={{ width: "17%" }} />
|
|
</colgroup>
|
|
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
|
|
<TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
|
|
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">项目名称</TableHead>
|
|
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">项目编码</TableHead>
|
|
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">状态</TableHead>
|
|
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">配额</TableHead>
|
|
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{projectLoading ? (
|
|
<TableRow className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
|
|
<TableCell colSpan={5} className="p-0">
|
|
<p className="admin-empty">正在加载项目…</p>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : projects.length === 0 ? (
|
|
<TableRow className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
|
|
<TableCell colSpan={5} className="p-0">
|
|
<p className="admin-empty">暂无项目</p>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
projects
|
|
.filter((project) => {
|
|
const term = projectSearchTerm.toLowerCase().trim();
|
|
if (!term) return true;
|
|
return (
|
|
project.workspace_name.toLowerCase().includes(term) ||
|
|
project.workspace_code.toLowerCase().includes(term) ||
|
|
(project.description && project.description.toLowerCase().includes(term))
|
|
);
|
|
})
|
|
.map((project) => (
|
|
<TableRow key={project.workspace_id} className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
|
|
<TableCell className="p-3 px-4 align-middle">
|
|
<span className="employee-name">
|
|
<b className="avatar">{project.workspace_name.slice(0, 1)}</b>
|
|
<span>
|
|
<strong>{project.workspace_name}</strong>
|
|
<small>{project.description ?? "无描述"}</small>
|
|
</span>
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="p-3 px-4 align-middle"><code>{project.workspace_code}</code></TableCell>
|
|
<TableCell className="p-3 px-4 align-middle">
|
|
<span>
|
|
<span className={`status-pill is-${project.status}`}>
|
|
{project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"}
|
|
</span>
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="p-3 px-4 align-middle"><span>{project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"}</span></TableCell>
|
|
<TableCell className="p-3 px-4 align-middle">
|
|
<span className="employee-actions">
|
|
<button type="button" disabled={!canManage} onClick={() => openMembersDrawer(project)}>成员</button>
|
|
<button type="button" disabled={!canManage} onClick={() => openEditProject(project)}>编辑</button>
|
|
{/* <button type="button" disabled={!canManage} onClick={() => openImportMemberDialog(project)}>导入成员</button> */}
|
|
<button
|
|
type="button"
|
|
className="is-danger"
|
|
disabled={!canManage || project.status === "disabled"}
|
|
title={project.status === "disabled" ? "已删除的项目不能操作" : "删除项目"}
|
|
onClick={() => void deleteProject(project)}
|
|
>
|
|
删除
|
|
</button>
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{projectDialogOpen && (
|
|
<div className={modalBackdropClass} role="presentation">
|
|
<section className={modalCompactClass} role="dialog" aria-modal="true">
|
|
<div className={modalHeaderClass}>
|
|
<div>
|
|
<span className={modalEyebrowClass}>PROJECT</span>
|
|
<h2 className={modalTitleClass}>{editingProject ? "编辑项目" : "新建项目"}</h2>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
type="button"
|
|
aria-label="关闭"
|
|
onClick={() => setProjectDialogOpen(false)}
|
|
className={CLOSE_BUTTON_CLASS}
|
|
>
|
|
<X size={16} />
|
|
</Button>
|
|
</div>
|
|
<form className={modalFormClass} onSubmit={(event) => void submitProject(event)}>
|
|
{!editingProject && (
|
|
<label className={formFieldClass}>
|
|
<span>项目编码<span className="text-[#e74c3c]">*</span></span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
autoFocus
|
|
value={projectForm.workspace_code}
|
|
onChange={(event) => setProjectForm({ ...projectForm, workspace_code: event.target.value })}
|
|
placeholder="例如：model-development（小写字母、数字、连字符，3-32 字符）"
|
|
/>
|
|
</label>
|
|
)}
|
|
<label className={formFieldClass}>
|
|
<span>项目名称<span className="text-[#e74c3c]">*</span></span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
value={projectForm.workspace_name}
|
|
onChange={(event) => setProjectForm({ ...projectForm, workspace_name: event.target.value })}
|
|
placeholder="请输入项目名称"
|
|
/>
|
|
</label>
|
|
<label className={formFieldClass}>
|
|
<span>配额（字节）</span>
|
|
<Input
|
|
className={FORM_INPUT_CLASS}
|
|
type="number"
|
|
value={projectForm.quota_bytes}
|
|
onChange={(event) => setProjectForm({ ...projectForm, quota_bytes: parseInt(event.target.value) || 0 })}
|
|
placeholder="0 表示无配额限制"
|
|
/>
|
|
</label>
|
|
<label className={formFieldClass}>
|
|
<span>项目描述</span>
|
|
<Textarea
|
|
className={FORM_TEXTAREA_CLASS}
|
|
value={projectForm.description}
|
|
onChange={(event) => setProjectForm({ ...projectForm, description: event.target.value })}
|
|
placeholder="请输入项目描述（可选）"
|
|
rows={4}
|
|
/>
|
|
</label>
|
|
<div className={modalFooterClass}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => setProjectDialogOpen(false)}
|
|
className={SECONDARY_BUTTON_CLASS}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="submit"
|
|
disabled={saving}
|
|
className={PRIMARY_BUTTON_CLASS}
|
|
>
|
|
{saving ? "保存中…" : "保存"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
)}
|
|
|
|
{importMemberDialogOpen && (
|
|
<div className={modalBackdropClass} role="presentation">
|
|
<section className={modalCompactClass} role="dialog" aria-modal="true">
|
|
<div className={modalHeaderClass}>
|
|
<div>
|
|
<span className={modalEyebrowClass}>IMPORT MEMBER</span>
|
|
<h2 className={modalTitleClass}>导入成员到 {selectedProject?.workspace_name ?? "项目"}</h2>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
type="button"
|
|
aria-label="关闭"
|
|
onClick={() => setImportMemberDialogOpen(false)}
|
|
className={CLOSE_BUTTON_CLASS}
|
|
>
|
|
<X size={16} />
|
|
</Button>
|
|
</div>
|
|
<form className={modalFormClass}>
|
|
<label className={`${formFieldClass} pb-[120px]`}>
|
|
<span>选择用户<span className="text-[#e74c3c]">*</span></span>
|
|
<UserMultiSelect
|
|
users={availableUsers}
|
|
selectedUserIds={selectedUserIds}
|
|
onChange={setSelectedUserIds}
|
|
existingMemberIds={currentProjectMembers.map((m) => m.user_id)}
|
|
/>
|
|
</label>
|
|
<div className={modalFooterClass}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => setImportMemberDialogOpen(false)}
|
|
className={SECONDARY_BUTTON_CLASS}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="button"
|
|
disabled={saving || selectedUserIds.length === 0}
|
|
onClick={() => void importMember()}
|
|
className={PRIMARY_BUTTON_CLASS}
|
|
>
|
|
{saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
)}
|
|
|
|
{membersDrawerOpen && selectedProject && (
|
|
<>
|
|
<div className="drawer-overlay" onClick={() => setMembersDrawerOpen(false)} style={{
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0,0,0,0.3)",
|
|
zIndex: 99,
|
|
}} />
|
|
<aside className="drawer" style={{
|
|
position: "fixed",
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
width: 480,
|
|
backgroundColor: "#fff",
|
|
boxShadow: "-2px 0 8px rgba(0,0,0,0.1)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
zIndex: 100,
|
|
}}>
|
|
<div className="drawer__header" style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: "16px 20px",
|
|
borderBottom: "1px solid #e8e8e8",
|
|
}}>
|
|
<div>
|
|
<span className="modal__eyebrow" style={{ fontSize: 12, color: "#666" }}>MEMBERS</span>
|
|
<h3 style={{ margin: 0, fontSize: 18 }}>项目成员</h3>
|
|
<p style={{ margin: "4px 0 0", fontSize: 13, color: "#888" }}>{selectedProject.workspace_name}</p>
|
|
</div>
|
|
<button className="icon-button" type="button" onClick={() => setMembersDrawerOpen(false)}>
|
|
<Icon name="close" />
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{
|
|
padding: "12px 20px",
|
|
borderBottom: "1px solid #f0f0f0",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}>
|
|
<span style={{ fontSize: 14, color: "#666" }}>
|
|
共 {currentProjectMembers.length} 名成员
|
|
</span>
|
|
<button
|
|
className="primary-button"
|
|
type="button"
|
|
onClick={() => {
|
|
setMembersDrawerOpen(false);
|
|
openImportMemberDialog(selectedProject);
|
|
}}
|
|
style={{ fontSize: 13, padding: "6px 12px" }}
|
|
>
|
|
<Icon name="plus" size={14} /> 添加成员
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ flex: 1, overflow: "auto", padding: "12px 20px" }}>
|
|
{membersLoading ? (
|
|
<p style={{ textAlign: "center", color: "#999", padding: "40px 0" }}>加载中…</p>
|
|
) : currentProjectMembers.length === 0 ? (
|
|
<p style={{ textAlign: "center", color: "#999", padding: "40px 0" }}>暂无成员</p>
|
|
) : (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
{currentProjectMembers.map((member) => (
|
|
<div
|
|
key={member.user_id}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "6px",
|
|
border: "1px solid #e8e8e8",
|
|
borderRadius: 6,
|
|
backgroundColor: "#fafafa",
|
|
}}
|
|
>
|
|
<div
|
|
className="avatar"
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: "50%",
|
|
backgroundColor: "#1890ff",
|
|
color: "#fff",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
marginRight: 10,
|
|
}}
|
|
>
|
|
{member.display_name.slice(0, 1)}
|
|
</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 500, marginBottom: 2, fontSize: 13 }}>{member.display_name}</div>
|
|
<div style={{ fontSize: 11, color: "#888" }}>{member.username}</div>
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
|
{(() => {
|
|
const isAdmin = member.role_code === "admin";
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => void removeMember(member.user_id)}
|
|
style={{
|
|
padding: "3px 8px",
|
|
fontSize: 11,
|
|
color: isAdmin ? "#999" : "#ff4d4f",
|
|
border: "1px solid " + (isAdmin ? "#ddd" : "#ff4d4f"),
|
|
borderRadius: 4,
|
|
backgroundColor: "#fff",
|
|
cursor: isAdmin ? "not-allowed" : canManage ? "pointer" : "not-allowed",
|
|
}}
|
|
disabled={!canManage || isAdmin}
|
|
title={isAdmin ? "管理员不能被移除" : canManage ? "移除成员" : "无权限"}
|
|
>
|
|
移除
|
|
</button>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|