63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import type { Workspace } from "../../services/api";
|
|
import { Checkbox } from "~/components/ui/checkbox";
|
|
import { formFieldClass } from "../platform/modalUi";
|
|
|
|
const CHECKBOX_CLASS =
|
|
"size-[16px] shrink-0 rounded-[3px] border-[#cdd9e4] bg-white data-checked:border-[#1277d3] data-checked:bg-[#1277d3] data-checked:text-white";
|
|
|
|
/** 新建用户时可选加入的项目列表（多选，非必填）。 */
|
|
export function CreateUserProjectField({
|
|
projects,
|
|
loading,
|
|
selectedIds,
|
|
onToggle,
|
|
}: {
|
|
projects: Workspace[];
|
|
loading: boolean;
|
|
selectedIds: string[];
|
|
onToggle: (workspaceId: string) => void;
|
|
}) {
|
|
return (
|
|
<div className={formFieldClass}>
|
|
<span>
|
|
加入项目
|
|
<span className="ml-1 font-normal text-[#8a9aab]">（可选）</span>
|
|
</span>
|
|
<div className="max-h-[140px] overflow-auto rounded-md border border-[#d6e0e9] bg-white px-2.5 py-2">
|
|
{loading ? (
|
|
<p className="m-0 py-2 text-center text-[12px] text-[#8a9aab]">加载项目中…</p>
|
|
) : projects.length === 0 ? (
|
|
<p className="m-0 py-2 text-center text-[12px] text-[#8a9aab]">暂无可用项目</p>
|
|
) : (
|
|
<div className="flex flex-col gap-1.5">
|
|
{projects.map((project) => {
|
|
const checked = selectedIds.includes(project.workspace_id);
|
|
return (
|
|
<label
|
|
key={project.workspace_id}
|
|
className="flex cursor-pointer items-center gap-2 rounded px-1 py-1 hover:bg-[#f5f8fb]"
|
|
>
|
|
<Checkbox
|
|
checked={checked}
|
|
onCheckedChange={() => onToggle(project.workspace_id)}
|
|
className={CHECKBOX_CLASS}
|
|
/>
|
|
<span className="min-w-0 truncate text-[12px] text-[#283a4e]">
|
|
{project.workspace_name}
|
|
<span className="ml-1.5 text-[11px] text-[#8a9aab]">
|
|
{project.workspace_code}
|
|
</span>
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="m-0 text-[11px] leading-snug text-[#8a9aab]">
|
|
未加入任何项目时，该用户将无法登录。
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|