Files
Genarrative/src/components/common/PlatformMudPointConfirmDialog.tsx
T
kdletters 93e4522b65 修复泥点弹窗透明问题
为泥点消耗确认弹窗补齐平台主题作用域和模态面板样式

让平台状态弹窗合并默认主题遮罩,避免自定义遮罩覆盖主题变量

补充弹窗默认样式测试和团队排障记录
2026-06-12 15:24:28 +08:00

80 lines
2.2 KiB
TypeScript

import type { ReactNode } from 'react';
import { useAuthUi } from '../auth/AuthUiContext';
import { UnifiedConfirmDialog } from './UnifiedConfirmDialog';
type PlatformMudPointConfirmDialogProps = {
open: boolean;
points: number;
onClose: () => void;
onConfirm: () => void;
confirmDisabled?: boolean;
confirmLabel?: string;
title?: string;
description?: ReactNode;
children?: ReactNode;
showCloseButton?: boolean;
portal?: boolean;
size?: 'sm' | 'md';
overlayClassName?: string;
panelClassName?: string;
};
const DEFAULT_OVERLAY_CLASS_NAME = 'platform-modal-backdrop z-[80] !bg-black/45';
const DEFAULT_PANEL_CLASS_NAME =
'platform-modal-shell platform-remap-surface max-w-xs rounded-[1.35rem] shadow-[0_24px_70px_rgba(15,23,42,0.22)]';
function joinClassNames(...classNames: Array<string | undefined>) {
return classNames.filter(Boolean).join(' ');
}
/**
* 平台泥点消耗确认弹窗。
* 统一承接“确认消耗泥点 + 消耗 N 泥点”的标准确认壳层,业务侧只保留点数与确认动作。
*/
export function PlatformMudPointConfirmDialog({
open,
points,
onClose,
onConfirm,
confirmDisabled = false,
confirmLabel = '确定',
title = '确认消耗泥点',
description,
children,
showCloseButton = true,
portal = true,
size = 'sm',
overlayClassName,
panelClassName,
}: PlatformMudPointConfirmDialogProps) {
const resolvedPlatformTheme = useAuthUi()?.platformTheme ?? 'light';
return (
<UnifiedConfirmDialog
open={open}
title={title}
description={description}
onClose={onClose}
onConfirm={onConfirm}
confirmLabel={confirmLabel}
confirmDisabled={confirmDisabled}
showCancel
showCloseButton={showCloseButton}
portal={portal}
size={size}
overlayClassName={joinClassNames(
`platform-theme platform-theme--${resolvedPlatformTheme}`,
DEFAULT_OVERLAY_CLASS_NAME,
overlayClassName,
)}
panelClassName={joinClassNames(DEFAULT_PANEL_CLASS_NAME, panelClassName)}
>
<div className="space-y-2">
<div className="font-semibold">消耗 {points} 泥点</div>
{children}
</div>
</UnifiedConfirmDialog>
);
}