update:Dialog替换

frontend/app/features/platform/CreateFolderModal.tsx

@@ -1,19 +1,16 @@
 import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
+import {
+  AppFormDialog,
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "~/components/common/AppFormDialog";
+import { Button } from "~/components/ui/button";
 import {
   destinationChipClass,
   formFieldClass,
   formInputClass,
-  iconButtonClass,
-  modalBackdropClass,
-  modalCompactClass,
-  modalEyebrowClass,
-  modalFooterClass,
   modalFormClass,
-  modalHeaderClass,
-  modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "./modalUi";
 
 type CreateFolderModalProps = {
@@ -35,26 +32,16 @@ export function CreateFolderModal({
   onSubmit,
   onClose,
 }: CreateFolderModalProps) {
-  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}>WORKSPACE</span>
-            <h2 className={modalTitleClass}>新建文件夹</h2>
-          </div>
-          <button
-            className={iconButtonClass}
-            type="button"
-            aria-label="关闭"
-            onClick={onClose}
-          >
-            <Icon name="close" />
-          </button>
-        </div>
-        <form className={modalFormClass} onSubmit={onSubmit}>
+    <AppFormDialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) onClose();
+      }}
+      eyebrow="WORKSPACE"
+      title="新建文件夹"
+    >
+      <form className={modalFormClass} onSubmit={onSubmit}>
           <div className={destinationChipClass}>
             <Icon name="folder" size={16} />
             创建到：{parentPath || "个人根目录"}
@@ -70,27 +57,30 @@ export function CreateFolderModal({
               onChange={(event) => onNameChange(event.target.value)}
             />
           </label>
-          <div className={modalFooterClass}>
-            <button
-              className={secondaryButtonClass}
+          <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="outline"
+              size="sm"
               type="button"
               onClick={onClose}
+              className={dialogSecondaryButtonClass}
             >
               取消
-            </button>
-            <button
-              className={primaryButtonClass}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
               type="submit"
               disabled={busy || !name.trim()}
+              className={dialogPrimaryButtonClass}
             >
               {busy
                 ? <span className="button-spinner" />
                 : <Icon name="folder" size={16} />}
               {busy ? "正在创建…" : "创建文件夹"}
-            </button>
+            </Button>
           </div>
         </form>
-      </section>
-    </div>
+    </AppFormDialog>
   );
 }