扩展状态弹窗承接提示类 notice
扩展 PlatformStatusDialog 支持标题栏提示与关闭路径 PlatformEntryFlowShellImpl 改用共享状态弹窗承接泥点提示与作品不可用提示 RpgCreationEntityEditorShared 改用共享状态弹窗承接编辑器提示 补充状态弹窗与编辑器提示测试并更新文档记录
This commit is contained in:
@@ -96,3 +96,37 @@ test('supports custom badge icon label and action button styling', () => {
|
||||
expect(action.className).toContain('border-slate-950');
|
||||
expect(action.className).toContain('bg-slate-950');
|
||||
});
|
||||
|
||||
test('supports header notice layout with body content and close button', () => {
|
||||
const onClose = vi.fn();
|
||||
|
||||
render(
|
||||
<PlatformStatusDialog
|
||||
status="error"
|
||||
title="泥点不足"
|
||||
description="当前表单不会丢失,关闭后可继续编辑或补足泥点再继续。"
|
||||
onClose={onClose}
|
||||
showHeader
|
||||
showCloseButton
|
||||
closeOnBackdrop
|
||||
action={{ label: '知道了', onClick: onClose, surface: 'platform' }}
|
||||
>
|
||||
本次需要 6 泥点,当前 5 泥点。
|
||||
</PlatformStatusDialog>,
|
||||
);
|
||||
|
||||
const dialog = screen.getByRole('dialog', { name: '泥点不足' });
|
||||
|
||||
expect(
|
||||
dialog.querySelector('.mt-4.text-xl.font-black.text-\\[var\\(--platform-text-strong\\)\\]'),
|
||||
).toBeNull();
|
||||
expect(screen.getByText('本次需要 6 泥点,当前 5 泥点。')).toBeTruthy();
|
||||
expect(
|
||||
screen.getByText(
|
||||
'当前表单不会丢失,关闭后可继续编辑或补足泥点再继续。',
|
||||
),
|
||||
).toBeTruthy();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '关闭' }));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -39,8 +39,15 @@ type PlatformStatusDialogProps = {
|
||||
status: PlatformStatusDialogStatus;
|
||||
title: string;
|
||||
description?: ReactNode;
|
||||
children?: ReactNode;
|
||||
onClose: () => void;
|
||||
action?: PlatformStatusDialogAction;
|
||||
showHeader?: boolean;
|
||||
showBodyTitle?: boolean;
|
||||
showCloseButton?: boolean;
|
||||
closeOnBackdrop?: boolean;
|
||||
closeOnEscape?: boolean;
|
||||
closeLabel?: string;
|
||||
closeDisabled?: boolean;
|
||||
zIndexClassName?: string;
|
||||
overlayClassName?: string;
|
||||
@@ -101,8 +108,15 @@ export function PlatformStatusDialog({
|
||||
status,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
onClose,
|
||||
action,
|
||||
showHeader = false,
|
||||
showBodyTitle,
|
||||
showCloseButton = false,
|
||||
closeOnBackdrop = false,
|
||||
closeOnEscape = false,
|
||||
closeLabel,
|
||||
closeDisabled = false,
|
||||
zIndexClassName = 'z-[90]',
|
||||
overlayClassName = DEFAULT_OVERLAY_CLASS,
|
||||
@@ -114,24 +128,26 @@ export function PlatformStatusDialog({
|
||||
}: PlatformStatusDialogProps) {
|
||||
const visualConfig = getStatusVisualConfig(status);
|
||||
const badgeIcon = icon ?? visualConfig.icon;
|
||||
const shouldRenderBodyTitle = showBodyTitle ?? !showHeader;
|
||||
|
||||
return (
|
||||
<UnifiedModal
|
||||
open={open}
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
showHeader={false}
|
||||
showCloseButton={false}
|
||||
showHeader={showHeader}
|
||||
showCloseButton={showCloseButton}
|
||||
closeLabel={closeLabel}
|
||||
closeDisabled={closeDisabled}
|
||||
closeOnBackdrop={false}
|
||||
closeOnEscape={false}
|
||||
closeOnBackdrop={closeOnBackdrop}
|
||||
closeOnEscape={closeOnEscape}
|
||||
portal={false}
|
||||
size="sm"
|
||||
zIndexClassName={zIndexClassName}
|
||||
overlayClassName={overlayClassName}
|
||||
panelClassName={panelClassName}
|
||||
bodyClassName={bodyClassName}
|
||||
>
|
||||
>
|
||||
<PlatformIconBadge
|
||||
icon={badgeIcon}
|
||||
label={iconLabel}
|
||||
@@ -145,9 +161,16 @@ export function PlatformStatusDialog({
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
/>
|
||||
<div className="mt-4 text-xl font-black text-[var(--platform-text-strong)]">
|
||||
{title}
|
||||
</div>
|
||||
{shouldRenderBodyTitle ? (
|
||||
<div className="mt-4 text-xl font-black text-[var(--platform-text-strong)]">
|
||||
{title}
|
||||
</div>
|
||||
) : null}
|
||||
{children ? (
|
||||
<div className="mt-3 text-sm font-semibold leading-6 text-[var(--platform-text-base)]">
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
{description ? (
|
||||
<div className="mt-3 text-sm font-semibold leading-6 text-[var(--platform-text-soft)]">
|
||||
{description}
|
||||
|
||||
Reference in New Issue
Block a user