收口危险操作确认弹窗

新增 PlatformDangerConfirmDialog 统一承接危险确认壳层
迁移平台入口删除作品确认复用共享危险确认弹窗
迁移 RPG 结果页重新生成确认复用共享危险确认弹窗
补充共享组件测试并更新 PlatformUiKit 收口文档与决策记录
This commit is contained in:
2026-06-10 22:17:13 +08:00
parent 40ff21f493
commit 4ef805282d
6 changed files with 154 additions and 10 deletions

View File

@@ -0,0 +1,68 @@
/* @vitest-environment jsdom */
import { fireEvent, render, screen, within } from '@testing-library/react';
import { expect, test, vi } from 'vitest';
import { PlatformDangerConfirmDialog } from './PlatformDangerConfirmDialog';
test('renders a standard danger confirmation with cancel and confirm actions', () => {
const onClose = vi.fn();
const onConfirm = vi.fn();
render(
<PlatformDangerConfirmDialog
open
title="删除作品"
description="确认删除《潮雾列岛》吗?"
onClose={onClose}
onConfirm={onConfirm}
confirmLabel="确认删除"
>
</PlatformDangerConfirmDialog>,
);
const dialog = screen.getByRole('dialog', { name: '删除作品' });
expect(within(dialog).getByText('确认删除《潮雾列岛》吗?')).toBeTruthy();
expect(within(dialog).getByText('删除后不可恢复。')).toBeTruthy();
fireEvent.click(within(dialog).getByRole('button', { name: '取消' }));
expect(onClose).toHaveBeenCalledTimes(1);
fireEvent.click(within(dialog).getByRole('button', { name: '确认删除' }));
expect(onConfirm).toHaveBeenCalledTimes(1);
});
test('forwards busy state and custom busy label for destructive actions', () => {
const onClose = vi.fn();
const onConfirm = vi.fn();
render(
<PlatformDangerConfirmDialog
open
title="删除作品"
onClose={onClose}
onConfirm={onConfirm}
confirmLabel="确认删除"
busyConfirmLabel="删除中"
busy
closeOnBackdrop={false}
>
</PlatformDangerConfirmDialog>,
);
const dialog = screen.getByRole('dialog', { name: '删除作品' });
const confirmButton = within(dialog).getByRole('button', { name: '删除中' });
const cancelButton = within(dialog).getByRole('button', { name: '取消' });
expect((confirmButton as HTMLButtonElement).disabled).toBe(true);
expect((cancelButton as HTMLButtonElement).disabled).toBe(true);
fireEvent.click(confirmButton);
fireEvent.click(cancelButton);
expect(onClose).not.toHaveBeenCalled();
expect(onConfirm).not.toHaveBeenCalled();
});

View File

@@ -0,0 +1,78 @@
import type { ReactNode } from 'react';
import { UnifiedConfirmDialog } from './UnifiedConfirmDialog';
type PlatformDangerConfirmDialogProps = {
open: boolean;
title: string;
onClose: () => void;
onConfirm?: () => void;
description?: ReactNode;
children?: ReactNode;
confirmLabel?: string;
busy?: boolean;
busyConfirmLabel?: string;
cancelLabel?: string;
closeOnBackdrop?: boolean;
showCloseButton?: boolean;
portal?: boolean;
size?: 'sm' | 'md';
variant?: 'platform' | 'pixel';
overlayClassName?: string;
panelClassName?: string;
footerClassName?: string;
confirmClassName?: string;
};
/**
* 平台危险确认弹窗。
* 统一承接需要“确认 / 取消 + 危险主动作”语义的标准弹窗壳层。
*/
export function PlatformDangerConfirmDialog({
open,
title,
onClose,
onConfirm,
description,
children,
confirmLabel = '确认',
busy = false,
busyConfirmLabel,
cancelLabel = '取消',
closeOnBackdrop = true,
showCloseButton = true,
portal = true,
size = 'sm',
variant = 'platform',
overlayClassName,
panelClassName,
footerClassName,
confirmClassName,
}: PlatformDangerConfirmDialogProps) {
return (
<UnifiedConfirmDialog
open={open}
title={title}
description={description}
onClose={onClose}
onConfirm={onConfirm}
confirmLabel={confirmLabel}
busy={busy}
busyConfirmLabel={busyConfirmLabel}
cancelLabel={cancelLabel}
closeOnBackdrop={closeOnBackdrop}
showCloseButton={showCloseButton}
showCancel
confirmTone="danger"
portal={portal}
size={size}
variant={variant}
overlayClassName={overlayClassName}
panelClassName={panelClassName}
footerClassName={footerClassName}
confirmClassName={confirmClassName}
>
{children}
</UnifiedConfirmDialog>
);
}