修复泥点弹窗透明问题
为泥点消耗确认弹窗补齐平台主题作用域和模态面板样式 让平台状态弹窗合并默认主题遮罩,避免自定义遮罩覆盖主题变量 补充弹窗默认样式测试和团队排障记录
This commit is contained in:
@@ -51,3 +51,27 @@ test('supports extra detail copy and close button override', () => {
|
||||
expect(within(dialog).getByText('本次会覆盖当前待确认素材。')).toBeTruthy();
|
||||
expect(screen.queryByRole('button', { name: '关闭' })).toBeNull();
|
||||
});
|
||||
|
||||
test('applies the stronger default overlay and panel chrome', () => {
|
||||
render(
|
||||
<PlatformMudPointConfirmDialog
|
||||
open
|
||||
points={10}
|
||||
onClose={() => {}}
|
||||
onConfirm={() => {}}
|
||||
portal={false}
|
||||
/>,
|
||||
);
|
||||
|
||||
const dialog = screen.getByRole('dialog', { name: '确认消耗泥点' });
|
||||
const overlay = dialog.parentElement as HTMLElement;
|
||||
|
||||
expect(overlay.className).toContain('platform-modal-backdrop');
|
||||
expect(overlay.className).toContain('platform-theme--light');
|
||||
expect(overlay.className).toContain('!bg-black/45');
|
||||
expect(dialog.className).toContain('platform-modal-shell');
|
||||
expect(dialog.className).toContain('max-w-xs');
|
||||
expect(dialog.className).toContain(
|
||||
'shadow-[0_24px_70px_rgba(15,23,42,0.22)]',
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { UnifiedConfirmDialog } from './UnifiedConfirmDialog';
|
||||
|
||||
type PlatformMudPointConfirmDialogProps = {
|
||||
@@ -19,6 +20,14 @@ type PlatformMudPointConfirmDialogProps = {
|
||||
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 泥点”的标准确认壳层,业务侧只保留点数与确认动作。
|
||||
@@ -39,6 +48,8 @@ export function PlatformMudPointConfirmDialog({
|
||||
overlayClassName,
|
||||
panelClassName,
|
||||
}: PlatformMudPointConfirmDialogProps) {
|
||||
const resolvedPlatformTheme = useAuthUi()?.platformTheme ?? 'light';
|
||||
|
||||
return (
|
||||
<UnifiedConfirmDialog
|
||||
open={open}
|
||||
@@ -52,8 +63,12 @@ export function PlatformMudPointConfirmDialog({
|
||||
showCloseButton={showCloseButton}
|
||||
portal={portal}
|
||||
size={size}
|
||||
overlayClassName={overlayClassName}
|
||||
panelClassName={panelClassName}
|
||||
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>
|
||||
|
||||
@@ -21,6 +21,7 @@ test('renders result state with description and primary action', () => {
|
||||
);
|
||||
|
||||
const dialog = screen.getByRole('dialog', { name: '支付成功' });
|
||||
const overlay = dialog.parentElement as HTMLElement;
|
||||
const badge = dialog.querySelector('.platform-icon-badge');
|
||||
const action = screen.getByRole('button', { name: '知道了' });
|
||||
const visibleDescription = dialog.querySelector(
|
||||
@@ -28,6 +29,8 @@ test('renders result state with description and primary action', () => {
|
||||
);
|
||||
|
||||
expect(dialog).toBeTruthy();
|
||||
expect(overlay.className).toContain('platform-theme--light');
|
||||
expect(overlay.className).toContain('platform-profile-modal-overlay');
|
||||
expect(visibleDescription?.textContent).toBe('账户状态已刷新');
|
||||
expect(badge?.className).toContain('text-[var(--platform-success-text)]');
|
||||
expect(action.className).toContain('platform-primary-button');
|
||||
@@ -97,6 +100,27 @@ test('supports custom badge icon label and action button styling', () => {
|
||||
expect(action.className).toContain('bg-slate-950');
|
||||
});
|
||||
|
||||
test('keeps default theme classes when callers customize the overlay', () => {
|
||||
render(
|
||||
<PlatformStatusDialog
|
||||
status="error"
|
||||
title="发布失败"
|
||||
description="图片生成失败"
|
||||
onClose={vi.fn()}
|
||||
overlayClassName="bg-slate-950/58 custom-overlay"
|
||||
action={{ label: '知道了', onClick: vi.fn(), surface: 'platform' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
const dialog = screen.getByRole('dialog', { name: '发布失败' });
|
||||
const overlay = dialog.parentElement as HTMLElement;
|
||||
|
||||
expect(overlay.className).toContain('platform-theme--light');
|
||||
expect(overlay.className).toContain('platform-profile-modal-overlay');
|
||||
expect(overlay.className).toContain('bg-slate-950/58');
|
||||
expect(overlay.className).toContain('custom-overlay');
|
||||
});
|
||||
|
||||
test('supports header notice layout with body content and close button', () => {
|
||||
const onClose = vi.fn();
|
||||
|
||||
|
||||
@@ -64,11 +64,15 @@ type PlatformStatusVisualConfig = {
|
||||
};
|
||||
|
||||
const DEFAULT_OVERLAY_CLASS =
|
||||
'platform-profile-modal-overlay bg-slate-950/72 backdrop-blur-xl';
|
||||
'platform-theme platform-theme--light platform-profile-modal-overlay bg-slate-950/72 backdrop-blur-xl';
|
||||
const DEFAULT_PANEL_CLASS =
|
||||
'platform-remap-surface !max-w-sm rounded-[1.4rem]';
|
||||
const DEFAULT_BODY_CLASS = 'px-5 pb-5 pt-6 text-center';
|
||||
|
||||
function joinClassNames(...classNames: Array<string | undefined>) {
|
||||
return classNames.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
function getStatusVisualConfig(
|
||||
status: PlatformStatusDialogStatus,
|
||||
): PlatformStatusVisualConfig {
|
||||
@@ -119,7 +123,7 @@ export function PlatformStatusDialog({
|
||||
closeLabel,
|
||||
closeDisabled = false,
|
||||
zIndexClassName = 'z-[90]',
|
||||
overlayClassName = DEFAULT_OVERLAY_CLASS,
|
||||
overlayClassName,
|
||||
panelClassName = DEFAULT_PANEL_CLASS,
|
||||
bodyClassName = DEFAULT_BODY_CLASS,
|
||||
iconClassName,
|
||||
@@ -144,7 +148,10 @@ export function PlatformStatusDialog({
|
||||
portal={false}
|
||||
size="sm"
|
||||
zIndexClassName={zIndexClassName}
|
||||
overlayClassName={overlayClassName}
|
||||
overlayClassName={joinClassNames(
|
||||
DEFAULT_OVERLAY_CLASS,
|
||||
overlayClassName,
|
||||
)}
|
||||
panelClassName={panelClassName}
|
||||
bodyClassName={bodyClassName}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user