继续收口认证入口弹窗壳层
新增 PlatformAuthModalShell 统一认证白底弹窗壳层 登录入口和邀请码弹窗复用共享认证壳层 补充认证壳层和 AuthGate 接入测试 同步 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
59
src/components/auth/PlatformAuthModalShell.tsx
Normal file
59
src/components/auth/PlatformAuthModalShell.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import type { 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;
|
||||
zIndexClassName?: string;
|
||||
panelClassName?: string;
|
||||
bodyClassName?: string;
|
||||
};
|
||||
|
||||
function joinClassNames(...classNames: Array<string | false | null | undefined>) {
|
||||
return classNames.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
/**
|
||||
* 认证入口弹窗共享壳层。
|
||||
* 这里只统一主题遮罩、auth card、标题栏和关闭按钮,登录 / 邀请码表单状态仍留在各自业务组件。
|
||||
*/
|
||||
export function PlatformAuthModalShell({
|
||||
title,
|
||||
platformTheme,
|
||||
onClose,
|
||||
children,
|
||||
closeLabel,
|
||||
zIndexClassName = 'z-[120]',
|
||||
panelClassName,
|
||||
bodyClassName = '!p-0',
|
||||
}: PlatformAuthModalShellProps) {
|
||||
return (
|
||||
<UnifiedModal
|
||||
open
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
closeLabel={closeLabel}
|
||||
closeVariant="platformIcon"
|
||||
closeOnBackdrop
|
||||
closeOnEscape={false}
|
||||
portal={false}
|
||||
size="sm"
|
||||
zIndexClassName={zIndexClassName}
|
||||
overlayClassName={`platform-theme platform-theme--${platformTheme} !px-3 !py-4 text-[var(--platform-text-strong)] sm:!p-4`}
|
||||
panelClassName={joinClassNames(
|
||||
'platform-auth-card !rounded-[2rem] sm:!rounded-[2rem]',
|
||||
panelClassName,
|
||||
)}
|
||||
headerClassName="!items-center !px-5 !py-4"
|
||||
titleClassName="text-lg font-semibold text-[var(--platform-text-strong)]"
|
||||
bodyClassName={bodyClassName}
|
||||
>
|
||||
{children}
|
||||
</UnifiedModal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user