update:原生确认框替换为自定义弹窗

2026-09-01 17:23:31 +08:00
parent 149e85cf10
commit 026cd085c6
15 changed files with 452 additions and 83 deletions
@@ -0,0 +1,87 @@
+import { type FormEvent } from "react";
+import { Check, Loader2Icon } from "lucide-react";
+
+import { Button } from "~/components/ui/button";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import {
+  formFieldClass,
+  formInputClass,
+  modalFormClass,
+} from "~/features/platform/modalUi";
+
+import { useSchedulesStore } from "./state/useSchedulesStore";
+
+export function ScheduleRenameDialog() {
+  const renameTarget = useSchedulesStore((s) => s.renameTarget);
+  const renameName = useSchedulesStore((s) => s.renameName);
+  const busy = useSchedulesStore((s) => s.busy);
+  const setRenameName = useSchedulesStore((s) => s.setRenameName);
+  const closeRenameDialog = useSchedulesStore((s) => s.closeRenameDialog);
+
+  const renaming = busy === "rename-schedule";
+  const trimmed = renameName.trim();
+  const unchanged = Boolean(
+    renameTarget && trimmed === renameTarget.schedule_name,
+  );
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!renameTarget || !trimmed || unchanged) return;
+    void useSchedulesStore.getState().renameSchedule(renameTarget, trimmed);
+  };
+
+  return (
+    <AppFormDialog
+      open={renameTarget !== null}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) closeRenameDialog();
+      }}
+      eyebrow="SCHEDULE"
+      title="改名调度方案"
+      titleId="rename-schedule-title"
+    >
+      <form className={modalFormClass} onSubmit={handleSubmit}>
+        <label className={formFieldClass}>
+          <span>调度方案名称</span>
+          <input
+            className={formInputClass}
+            autoFocus
+            maxLength={255}
+            placeholder="请输入新的调度方案名称"
+            value={renameName}
+            onChange={(event) => setRenameName(event.target.value)}
+            onFocus={(event) => event.currentTarget.select()}
+          />
+        </label>
+        <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={renaming}
+            onClick={closeRenameDialog}
+            className={dialogSecondaryButtonClass}
+          >
+            取消
+          </Button>
+          <Button
+            type="submit"
+            variant="default"
+            size="sm"
+            disabled={renaming || !trimmed || unchanged}
+            className={dialogPrimaryButtonClass}
+          >
+            {renaming
+              ? <Loader2Icon className="size-4 animate-spin" />
+              : <Check size={15} />}
+            {renaming ? "正在保存…" : "保存"}
+          </Button>
+        </div>
+      </form>
+    </AppFormDialog>
+  );
+}