kdletters
ffcffef6d2
新增 PlatformToolModalShell 承接白底工具弹窗壳层和固定可访问名称 新增 PlatformSegmentedTabPresets 沉淀频道下划线、创作 pill rail 与二列 option segment 迁移拼图、抓大鹅、历史素材弹窗和首页 / 作品架 / 充值切换的重复组件写法 同步 PlatformUiKit 文档和 Hermes 决策记录
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
import { useAuthUi } from '../auth/AuthUiContext';
|
|
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) {
|
|
const resolvedPlatformTheme =
|
|
useAuthUi()?.platformTheme ?? 'light';
|
|
|
|
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}
|
|
overlayClassName={`platform-theme platform-theme--${resolvedPlatformTheme}`}
|
|
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>
|
|
);
|
|
}
|