update: replace table component

2026-09-02 10:10:41 +08:00
parent c2f153cabd
commit 2a81b98309
8 changed files with 459 additions and 321 deletions
@@ -0,0 +1,102 @@
+import { X } from "lucide-react";
+import { type Employee, type Workspace } from "../../services/api";
+import { Button } from "~/components/ui/button";
+import {
+  formFieldClass,
+  modalBackdropClass,
+  modalCompactClass,
+  modalEyebrowClass,
+  modalFooterClass,
+  modalFormClass,
+  modalHeaderClass,
+  modalTitleClass,
+} from "../platform/modalUi";
+import { UserMultiSelect } from "./UserMultiSelect";
+
+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]";
+
+export function ImportMemberDialog({
+  open,
+  selectedProject,
+  availableUsers,
+  selectedUserIds,
+  existingMemberIds,
+  saving,
+  onNotify,
+  onChangeSelectedUserIds,
+  onSubmit,
+  onClose,
+}: {
+  open: boolean;
+  selectedProject: Workspace | null;
+  availableUsers: Employee[];
+  selectedUserIds: string[];
+  existingMemberIds: string[];
+  saving: boolean;
+  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
+  onChangeSelectedUserIds: (ids: string[]) => void;
+  onSubmit: () => Promise<void> | void;
+  onClose: () => void;
+}) {
+  if (!open || !selectedProject) return null;
+
+  return (
+    <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={() => onClose()}
+            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={onChangeSelectedUserIds}
+              existingMemberIds={existingMemberIds}
+            />
+          </label>
+          <div className={modalFooterClass}>
+            <Button
+              variant="outline"
+              size="sm"
+              type="button"
+              onClick={() => onClose()}
+              className={SECONDARY_BUTTON_CLASS}
+            >
+              取消
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              type="button"
+              disabled={saving || selectedUserIds.length === 0}
+              onClick={() => void onSubmit()}
+              className={PRIMARY_BUTTON_CLASS}
+            >
+              {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
+            </Button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}