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
This commit is contained in:
Jason
2025-10-18 23:28:33 +08:00
parent 08eed46919
commit 9d6ccb6d15
3 changed files with 35 additions and 7 deletions

View File

@@ -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>
);

View File

@@ -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>
);

View File

@@ -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>
);