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