kdletters
ed2c386603
账号设置弹窗复用认证壳层并保留 direct mode 唯一 dialog 语义 拼图运行态新增本地弹窗壳层收口确认设置退出失败和通关结算 抓大鹅与跳一跳结算弹窗提取本地结算结构并补测试 拼图 onboarding 登录保存覆盖层迁入 UnifiedModal 更新 PlatformUiKit 收口文档和 Hermes 决策记录
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
||
|
||
import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
|
||
import { UnifiedModal } from '../common/UnifiedModal';
|
||
|
||
type PlatformAuthModalShellProps = {
|
||
title: string;
|
||
platformTheme: PlatformTheme;
|
||
onClose: () => void;
|
||
children: ReactNode;
|
||
closeLabel: string;
|
||
size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
|
||
showHeader?: boolean;
|
||
overlaySpacing?: 'default' | 'none';
|
||
zIndexClassName?: string;
|
||
overlayClassName?: string;
|
||
overlayStyle?: CSSProperties;
|
||
authCardClassName?: string;
|
||
panelClassName?: string;
|
||
bodyClassName?: string;
|
||
panelStyle?: CSSProperties;
|
||
};
|
||
|
||
function joinClassNames(...classNames: Array<string | false | null | undefined>) {
|
||
return classNames.filter(Boolean).join(' ');
|
||
}
|
||
|
||
/**
|
||
* 认证入口弹窗共享壳层。
|
||
* 这里只统一主题遮罩、auth card、标题栏和关闭按钮，登录 / 邀请码表单状态仍留在各自业务组件。
|
||
*/
|
||
export function PlatformAuthModalShell({
|
||
title,
|
||
platformTheme,
|
||
onClose,
|
||
children,
|
||
closeLabel,
|
||
size = 'sm',
|
||
showHeader = true,
|
||
overlaySpacing = 'default',
|
||
zIndexClassName = 'z-[120]',
|
||
overlayClassName,
|
||
overlayStyle,
|
||
authCardClassName = 'platform-auth-card !rounded-[2rem] sm:!rounded-[2rem]',
|
||
panelClassName,
|
||
bodyClassName = '!p-0',
|
||
panelStyle,
|
||
}: PlatformAuthModalShellProps) {
|
||
return (
|
||
<UnifiedModal
|
||
open
|
||
title={title}
|
||
onClose={onClose}
|
||
closeLabel={closeLabel}
|
||
closeVariant="platformIcon"
|
||
closeOnBackdrop
|
||
closeOnEscape={false}
|
||
portal={false}
|
||
size={size}
|
||
showHeader={showHeader}
|
||
zIndexClassName={zIndexClassName}
|
||
overlayClassName={joinClassNames(
|
||
`platform-theme platform-theme--${platformTheme} text-[var(--platform-text-strong)]`,
|
||
overlaySpacing === 'default' && '!px-3 !py-4 sm:!p-4',
|
||
overlayClassName,
|
||
)}
|
||
overlayStyle={overlayStyle}
|
||
panelClassName={joinClassNames(
|
||
authCardClassName,
|
||
panelClassName,
|
||
)}
|
||
headerClassName="!items-center !px-5 !py-4"
|
||
titleClassName="text-lg font-semibold text-[var(--platform-text-strong)]"
|
||
bodyClassName={bodyClassName}
|
||
panelStyle={panelStyle}
|
||
>
|
||
{children}
|
||
</UnifiedModal>
|
||
);
|
||
}
|