From 9d6ccb6d15223455f7a80f4234bf6c5bb16052a4 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 18 Oct 2025 23:28:33 +0800
Subject: [PATCH] refactor: move provider form buttons to DialogFooter for
 consistency

Restructure AddProviderDialog and EditProviderDialog to follow the
standardized dialog layout pattern with buttons in DialogFooter.

Changes:
- Add DialogFooter to AddProviderDialog and EditProviderDialog
- Add `showButtons` prop to ProviderForm (default: true for backward compatibility)
- Add `id="provider-form"` to form element for external form submission
- Move Cancel and Submit buttons from ProviderForm to DialogFooter
- Use `form="provider-form"` attribute on DialogFooter buttons to trigger submission

Benefits:
- Consistent dialog footer appearance across all dialogs
- Proper spacing and alignment with other modal dialogs
- Better visual hierarchy with separated content and action areas
- Maintains backward compatibility for ProviderForm usage elsewhere

All provider dialogs now follow the unified pattern:
- DialogHeader: Title and description
- Content area: flex-1 overflow-y-auto px-6 py-4
- DialogFooter: Action buttons with standard styling
---
 src/components/providers/AddProviderDialog.tsx | 12 ++++++++++++
 .../providers/EditProviderDialog.tsx           | 12 ++++++++++++
 .../providers/forms/ProviderForm.tsx           | 18 +++++++++++-------
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/providers/AddProviderDialog.tsx b/src/components/providers/AddProviderDialog.tsx
index aedc51a..45cf329 100644
--- a/src/components/providers/AddProviderDialog.tsx
+++ b/src/components/providers/AddProviderDialog.tsx
@@ -4,9 +4,11 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 import type { Provider, CustomEndpoint } from "@/types";
 import type { AppType } from "@/lib/api";
 import {
@@ -153,8 +155,18 @@ export function AddProviderDialog({
             submitLabel={t("common.add", { defaultValue: "添加" })}
             onSubmit={handleSubmit}
             onCancel={() => onOpenChange(false)}
+            showButtons={false}
           />
         </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel", { defaultValue: "取消" })}
+          </Button>
+          <Button type="submit" form="provider-form">
+            {t("common.add", { defaultValue: "添加" })}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/providers/EditProviderDialog.tsx b/src/components/providers/EditProviderDialog.tsx
index a4eae0b..e2410f6 100644
--- a/src/components/providers/EditProviderDialog.tsx
+++ b/src/components/providers/EditProviderDialog.tsx
@@ -4,9 +4,11 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 import type { Provider } from "@/types";
 import {
   ProviderForm,
@@ -83,8 +85,18 @@ export function EditProviderDialog({
               websiteUrl: provider.websiteUrl,
               settingsConfig: provider.settingsConfig,
             }}
+            showButtons={false}
           />
         </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel", { defaultValue: "取消" })}
+          </Button>
+          <Button type="submit" form="provider-form">
+            {t("common.save", { defaultValue: "保存" })}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/providers/forms/ProviderForm.tsx b/src/components/providers/forms/ProviderForm.tsx
index e14505e..b5a6f4c 100644
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -53,6 +53,7 @@ interface ProviderFormProps {
     websiteUrl?: string;
     settingsConfig?: Record<string, unknown>;
   };
+  showButtons?: boolean;
 }
 
 export function ProviderForm({
@@ -61,6 +62,7 @@ export function ProviderForm({
   onSubmit,
   onCancel,
   initialData,
+  showButtons = true,
 }: ProviderFormProps) {
   const { t } = useTranslation();
   const isEditMode = Boolean(initialData);
@@ -445,7 +447,7 @@ export function ProviderForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+      <form id="provider-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
         {/* 预设供应商选择（仅新增模式显示） */}
         {!initialData && (
           <ProviderPresetSelector
@@ -549,12 +551,14 @@ export function ProviderForm({
           />
         )}
 
-        <div className="flex justify-end gap-2">
-          <Button variant="outline" type="button" onClick={onCancel}>
-            {t("common.cancel", { defaultValue: "取消" })}
-          </Button>
-          <Button type="submit">{submitLabel}</Button>
-        </div>
+        {showButtons && (
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" type="button" onClick={onCancel}>
+              {t("common.cancel", { defaultValue: "取消" })}
+            </Button>
+            <Button type="submit">{submitLabel}</Button>
+          </div>
+        )}
       </form>
     </Form>
   );