update:Dialog替换

2026-08-26 16:48:19 +08:00
parent d7f3db1cc4
commit e326cc1a93
16 changed files with 738 additions and 675 deletions
@@ -1,25 +1,17 @@
-import { X } from "lucide-react";
 import { type Workspace } from "../../services/api";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Textarea } from "~/components/ui/textarea";
 import {
  formFieldClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
  modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
 } from "../platform/modalUi";

-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 =
@@ -30,7 +22,6 @@ export function ProjectEditDialog({
  editingProject,
  projectForm,
  saving,
-  onNotify,
  onChangeForm,
  onSubmit,
  onClose,
@@ -44,91 +35,78 @@ export function ProjectEditDialog({
  onSubmit: (event: React.FormEvent) => Promise<void> | void;
  onClose: () => void;
 }) {
-  if (!open) return null;
-
  return (
-    <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>
+    <AppFormDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="PROJECT"
+      title={editingProject ? "编辑项目" : "新建项目"}
+    >
+      <form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
+        {!editingProject && (
+          <label className={formFieldClass}>
+            <span>项目编码<span className="text-[#e74c3c]">*</span></span>
+            <Input
+              className={FORM_INPUT_CLASS}
+              autoFocus
+              value={projectForm.workspace_code}
+              onChange={(event) => onChangeForm({ ...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) => onChangeForm({ ...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) => onChangeForm({ ...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) => onChangeForm({ ...projectForm, description: event.target.value })}
+            placeholder="请输入项目描述（可选）"
+            rows={4}
+          />
+        </label>
+        <div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
          <Button
-            variant="ghost"
-            size="icon-sm"
+            variant="outline"
+            size="sm"
            type="button"
-            aria-label="关闭"
            onClick={() => onClose()}
-            className={CLOSE_BUTTON_CLASS}
+            className={dialogSecondaryButtonClass}
          >
-            <X size={16} />
+            取消
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            type="submit"
+            disabled={saving}
+            className={dialogPrimaryButtonClass}
+          >
+            {saving ? "保存中…" : "保存"}
          </Button>
        </div>
-        <form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
-          {!editingProject && (
-            <label className={formFieldClass}>
-              <span>项目编码<span className="text-[#e74c3c]">*</span></span>
-              <Input
-                className={FORM_INPUT_CLASS}
-                autoFocus
-                value={projectForm.workspace_code}
-                onChange={(event) => onChangeForm({ ...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) => onChangeForm({ ...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) => onChangeForm({ ...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) => onChangeForm({ ...projectForm, description: event.target.value })}
-              placeholder="请输入项目描述（可选）"
-              rows={4}
-            />
-          </label>
-          <div className={modalFooterClass}>
-            <Button
-              variant="outline"
-              size="sm"
-              type="button"
-              onClick={() => onClose()}
-              className={SECONDARY_BUTTON_CLASS}
-            >
-              取消
-            </Button>
-            <Button
-              variant="default"
-              size="sm"
-              type="submit"
-              disabled={saving}
-              className={PRIMARY_BUTTON_CLASS}
-            >
-              {saving ? "保存中…" : "保存"}
-            </Button>
-          </div>
-        </form>
-      </section>
-    </div>
+      </form>
+    </AppFormDialog>
  );
 }