k88936
e6b3199490
之前遇到几次弹窗的样式不生效,bug 现在在画布agent的删除对话弹窗又出现了, 这个pr把类似的修改集中到最下层的UnifiedModal,适用于所有的modal, 一些特殊的modal有特殊处理. 画布agent的删除对话弹窗  --------- Co-authored-by: 段舒康 <kdletters@qq.com> Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/122 Reviewed-by: 段舒康 <kdletters@qq.com> Co-authored-by: 王德宇 <kvtodev@outlook.com> Co-committed-by: 王德宇 <kvtodev@outlook.com>
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>
|
|
);
|
|
}
|