抽取保存结果弹窗操作底栏

统一关闭与重试按钮的布局和样式
This commit is contained in:
2026-09-18 17:17:45 +08:00
parent 2142027f85
commit d46cdfb282
@@ -67,16 +67,8 @@ function GeneratedNotice({
</code>
<div className="mt-5">
<UiEditorCopyPathButton relativePath={relativePath} />
<div className="mt-3 flex justify-end">
<button
type="button"
className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
onClick={onClose}
>
</button>
</div>
</div>
<NoticeFooter onClose={onClose} />
</>
);
}
@@ -91,15 +83,7 @@ function SimpleNotice({
return (
<>
<h2 className="m-0 text-base font-semibold">{title}</h2>
<div className="mt-5 flex justify-end">
<button
type="button"
className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
onClick={onClose}
>
</button>
</div>
<NoticeFooter onClose={onClose} />
</>
);
}
@@ -117,7 +101,29 @@ function FailureNotice({
<p className="mt-3 whitespace-pre-line text-sm leading-6 text-red-700">
{notice.message}
</p>
<div className="mt-5 flex flex-wrap justify-end gap-2">
<NoticeFooter
onClose={onClose}
onRetry={notice.onRetry}
retryLabel={notice.retryLabel}
/>
</>
);
}
function NoticeFooter({
onClose,
onRetry,
retryLabel = '重试',
}: {
onClose: () => void;
onRetry?: () => void;
retryLabel?: string;
}) {
return (
<div
className={`mt-5 flex justify-end ${onRetry ? 'flex-wrap gap-2' : ''}`}
>
{onRetry ? (
<button
type="button"
className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
@@ -125,20 +131,18 @@ function FailureNotice({
>
</button>
{notice.onRetry ? (
<button
type="button"
className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
onClick={() => {
onClose();
notice.onRetry?.();
}}
>
{notice.retryLabel ?? '重试'}
</button>
) : null}
</div>
</>
) : null}
<button
type="button"
className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
onClick={() => {
onClose();
onRetry?.();
}}
>
{onRetry ? retryLabel : '关闭'}
</button>
</div>
);
}