update:新建用户可选角色、项目

2026-08-31 16:19:53 +08:00
parent a4dd317828
commit 20eadb953b
3 changed files with 362 additions and 134 deletions
@@ -0,0 +1,62 @@
+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>
+  );
+}