k88936
bd4baf66b1
在UnifiedModal集中解析Portal主题并支持显式覆盖 梳理危险确认、图片预览、报告和工具弹窗的主题边界 修复固定浅色画布弹窗与Agent菜单的主题回归 将相关公共组件测试纳入默认Vitest收集范围 同步Platform UI Kit、画布Agent与共享记忆文档
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
import { UnifiedModal } from './UnifiedModal';
|
|
|
|
type PlatformToolModalShellProps = {
|
|
open: boolean;
|
|
title: string;
|
|
ariaLabel?: string;
|
|
description?: ReactNode;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
onClose: () => void;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
|
|
closeLabel?: string;
|
|
closeDisabled?: boolean;
|
|
closeOnBackdrop?: boolean;
|
|
closeOnEscape?: boolean;
|
|
zIndexClassName?: string;
|
|
panelClassName?: string;
|
|
titleClassName?: string;
|
|
bodyClassName?: string;
|
|
footerClassName?: string;
|
|
};
|
|
|
|
function joinClassNames(...classNames: Array<string | false | null | undefined>) {
|
|
return classNames.filter(Boolean).join(' ');
|
|
}
|
|
|
|
/**
|
|
* 结果页 / 工具页里的白底 portal 弹窗壳。
|
|
* 这里只收口平台主题 overlay、白底 panel 和标准 header/body/footer 节奏，不吸收各玩法正文与动作语义。
|
|
*/
|
|
export function PlatformToolModalShell({
|
|
open,
|
|
title,
|
|
ariaLabel,
|
|
description,
|
|
children,
|
|
footer,
|
|
onClose,
|
|
size = 'xl',
|
|
closeLabel,
|
|
closeDisabled = false,
|
|
closeOnBackdrop = true,
|
|
closeOnEscape = true,
|
|
zIndexClassName = 'z-[140]',
|
|
panelClassName,
|
|
titleClassName,
|
|
bodyClassName,
|
|
footerClassName,
|
|
}: PlatformToolModalShellProps) {
|
|
return (
|
|
<UnifiedModal
|
|
open={open}
|
|
title={title}
|
|
// 某些工具弹窗标题会直接显示当前关卡/物品名，但读屏和测试更适合使用稳定的弹窗语义名。
|
|
ariaLabel={ariaLabel}
|
|
description={description}
|
|
onClose={onClose}
|
|
footer={footer}
|
|
size={size}
|
|
closeLabel={closeLabel ?? `关闭${ariaLabel ?? title}`}
|
|
closeDisabled={closeDisabled}
|
|
closeOnBackdrop={closeOnBackdrop}
|
|
closeOnEscape={closeOnEscape}
|
|
zIndexClassName={zIndexClassName}
|
|
panelClassName={joinClassNames(
|
|
'platform-remap-surface shadow-[0_24px_80px_rgba(0,0,0,0.55)]',
|
|
panelClassName,
|
|
)}
|
|
headerClassName="!items-center !px-5 !py-4"
|
|
titleClassName={titleClassName}
|
|
bodyClassName={joinClassNames(
|
|
'!px-5 !py-4 sm:!px-5 sm:!py-4',
|
|
bodyClassName,
|
|
)}
|
|
footerClassName={joinClassNames(
|
|
'!px-5 !py-4 sm:!px-5 sm:!py-4',
|
|
footerClassName,
|
|
)}
|
|
>
|
|
{children}
|
|
</UnifiedModal>
|
|
);
|
|
}
|