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, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import type { Provider, CustomEndpoint } from "@/types"; import type { Provider, CustomEndpoint } from "@/types";
import type { AppType } from "@/lib/api"; import type { AppType } from "@/lib/api";
import { import {
@@ -153,8 +155,18 @@ export function AddProviderDialog({
submitLabel={t("common.add", { defaultValue: "添加" })} submitLabel={t("common.add", { defaultValue: "添加" })}
onSubmit={handleSubmit} onSubmit={handleSubmit}
onCancel={() => onOpenChange(false)} onCancel={() => onOpenChange(false)}
showButtons={false}
/> />
</div> </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> </DialogContent>
</Dialog> </Dialog>
); );

View File

@@ -4,9 +4,11 @@ import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import type { Provider } from "@/types"; import type { Provider } from "@/types";
import { import {
ProviderForm, ProviderForm,
@@ -83,8 +85,18 @@ export function EditProviderDialog({
websiteUrl: provider.websiteUrl, websiteUrl: provider.websiteUrl,
settingsConfig: provider.settingsConfig, settingsConfig: provider.settingsConfig,
}} }}
showButtons={false}
/> />
</div> </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> </DialogContent>
</Dialog> </Dialog>
); );

View File

@@ -53,6 +53,7 @@ interface ProviderFormProps {
websiteUrl?: string; websiteUrl?: string;
settingsConfig?: Record<string, unknown>; settingsConfig?: Record<string, unknown>;
}; };
showButtons?: boolean;
} }
export function ProviderForm({ export function ProviderForm({
@@ -61,6 +62,7 @@ export function ProviderForm({
onSubmit, onSubmit,
onCancel, onCancel,
initialData, initialData,
showButtons = true,
}: ProviderFormProps) { }: ProviderFormProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const isEditMode = Boolean(initialData); const isEditMode = Boolean(initialData);
@@ -445,7 +447,7 @@ export function ProviderForm({
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6"> <form id="provider-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
{/* 预设供应商选择(仅新增模式显示) */} {/* 预设供应商选择(仅新增模式显示) */}
{!initialData && ( {!initialData && (
<ProviderPresetSelector <ProviderPresetSelector
@@ -549,12 +551,14 @@ export function ProviderForm({
/> />
)} )}
<div className="flex justify-end gap-2"> {showButtons && (
<Button variant="outline" type="button" onClick={onCancel}> <div className="flex justify-end gap-2">
{t("common.cancel", { defaultValue: "取消" })} <Button variant="outline" type="button" onClick={onCancel}>
</Button> {t("common.cancel", { defaultValue: "取消" })}
<Button type="submit">{submitLabel}</Button> </Button>
</div> <Button type="submit">{submitLabel}</Button>
</div>
)}
</form> </form>
</Form> </Form>
); );