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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user