Fix/统一修复modal样式失效 (#122)

之前遇到几次弹窗的样式不生效,bug 现在在画布agent的删除对话弹窗又出现了,
这个pr把类似的修改集中到最下层的UnifiedModal,适用于所有的modal,
一些特殊的modal有特殊处理.

画布agent的删除对话弹窗
![shotmd-1785399342.jpg](/attachments/d63d7dc6-bf7e-4f13-bfe8-bc4716cd798f)

---------

Co-authored-by: 段舒康 <kdletters@qq.com>
Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/122
Reviewed-by: 段舒康 <kdletters@qq.com>
Co-authored-by: 王德宇 <kvtodev@outlook.com>
Co-committed-by: 王德宇 <kvtodev@outlook.com>

src/components/common/CreativeImageInputPanel.test.tsx

@@ -289,6 +289,7 @@ test('creative image input panel confirms before removing uploaded image', () =>
 
   fireEvent.click(screen.getByRole('button', { name: '移除拼图图片' }));
   const dialog = screen.getByRole('dialog', { name: '移除拼图图片？' });
+  expect(dialog.parentElement?.className).toContain('platform-theme--light');
   expect(within(dialog).getByText('移除后需要重新上传图片。')).toBeTruthy();
   fireEvent.click(within(dialog).getByRole('button', { name: '移除' }));
   expect(onMainImageRemove).toHaveBeenCalledTimes(1);

src/components/common/LegalDocumentModal.tsx

@@ -88,9 +88,7 @@ export function LegalDocumentModal({
       size="md"
       closeLabel="关闭法律信息"
       zIndexClassName={zIndexClassName ?? 'z-[150]'}
-      overlayClassName={`platform-theme ${
-        platformTheme ? `platform-theme--${platformTheme}` : ''
-      }`}
+      portalTheme={platformTheme ?? 'auto'}
       panelClassName="platform-remap-surface rounded-t-[1.4rem] sm:rounded-[1.4rem]"
       headerClassName="items-center"
       bodyClassName="px-4 py-0 sm:px-5"

src/components/common/PlatformDangerConfirmDialog.test.tsx

@@ -24,6 +24,10 @@ test('renders a standard danger confirmation with cancel and confirm actions', (
 
   const dialog = screen.getByRole('dialog', { name: '删除作品' });
 
+  expect(dialog.parentElement?.className).toContain('platform-theme--light');
+  expect(dialog.parentElement?.className).toContain('z-[140]');
+  expect(dialog.className).toContain('platform-remap-surface');
+  expect(dialog.className).toContain('shadow-[0_24px_80px_rgba(0,0,0,0.55)]');
   expect(within(dialog).getByText('确认删除《潮雾列岛》吗？')).toBeTruthy();
   expect(within(dialog).getByText('删除后不可恢复。')).toBeTruthy();
 

src/components/common/PlatformDangerConfirmDialog.tsx

@@ -21,8 +21,13 @@ type PlatformDangerConfirmDialogProps = {
   panelClassName?: string;
   footerClassName?: string;
   confirmClassName?: string;
+  zIndexClassName?: string;
 };
 
+function joinClassNames(...classNames: Array<string | undefined>) {
+  return classNames.filter(Boolean).join(' ');
+}
+
 /**
  * 平台危险确认弹窗。
  * 统一承接需要“确认 / 取消 + 危险主动作”语义的标准弹窗壳层。
@@ -46,6 +51,7 @@ export function PlatformDangerConfirmDialog({
   panelClassName,
   footerClassName,
   confirmClassName,
+  zIndexClassName = 'z-[140]',
 }: PlatformDangerConfirmDialogProps) {
   return (
     <UnifiedConfirmDialog
@@ -65,9 +71,13 @@ export function PlatformDangerConfirmDialog({
       portal={portal}
       size={size}
       overlayClassName={overlayClassName}
-      panelClassName={panelClassName}
+      panelClassName={joinClassNames(
+        'platform-remap-surface shadow-[0_24px_80px_rgba(0,0,0,0.55)]',
+        panelClassName,
+      )}
       footerClassName={footerClassName}
       confirmClassName={confirmClassName}
+      zIndexClassName={zIndexClassName}
     >
       {children}
     </UnifiedConfirmDialog>

src/components/common/PlatformImagePreviewModal.test.tsx

@@ -103,6 +103,7 @@ test('renders full-screen image preview with zoom controls and dark backdrop', (
   expect(
     dialog.parentElement?.className.includes('!bg-black'),
   ).toBe(true);
+  expect(dialog.parentElement?.className).not.toContain('platform-theme--');
   expect(screen.getByRole('button', { name: '放大图片' })).toBeTruthy();
   expect(screen.getByRole('button', { name: '缩小图片' })).toBeTruthy();
   expect(screen.getByRole('button', { name: '重置图片缩放' })).toBeTruthy();

src/components/common/PlatformImagePreviewModal.tsx

@@ -243,6 +243,8 @@ export function PlatformImagePreviewModal({
       showHeader={false}
       showCloseButton={false}
       size="fullscreen"
+      // 全黑自绘查看器不需要平台变量；避免 light / dark remap 改写黑底、白字和暗色控件。
+      portalTheme="none"
       zIndexClassName={zIndexClassName}
       overlayClassName="!items-stretch !justify-stretch !bg-black !p-0 !backdrop-blur-none"
       panelClassName="platform-image-preview-modal !h-[100dvh] !max-h-none !max-w-none !rounded-none border-0 bg-black text-white shadow-none"

src/components/common/PlatformReportDialog.test.tsx

@@ -10,6 +10,10 @@ vi.mock('../../services/clipboard', () => ({
   copyTextToClipboard: vi.fn(),
 }));
 
+vi.mock('../auth/AuthUiContext', () => ({
+  useAuthUi: () => ({ platformTheme: 'dark' }),
+}));
+
 afterEach(() => {
   vi.clearAllMocks();
 });
@@ -31,6 +35,8 @@ test('renders report fields and copies the joined report lines', async () => {
   );
 
   const dialog = screen.getByRole('dialog', { name: '统一报告' });
+  expect(dialog.parentElement?.className).toContain('platform-theme--light');
+  expect(dialog.parentElement?.className).not.toContain('platform-theme--dark');
   expect(within(dialog).getByText('拼图草稿 puzzle-session-1')).toBeTruthy();
   expect(within(dialog).getByText('已完成')).toBeTruthy();
 

src/components/common/PlatformReportDialog.tsx

@@ -54,6 +54,8 @@ export function PlatformReportDialog({
       open={open}
       title={title}
       onClose={onClose}
+      // 报告中的二维码 / 扫码区固定使用浅色背景，保证对比度和识别率。
+      platformTheme="light"
       overlayClassName={overlayClassName}
       panelClassName={panelClassName}
       bodyClassName="space-y-3"

src/components/common/PlatformToolModalShell.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 
-import { useAuthUi } from '../auth/AuthUiContext';
 import { UnifiedModal } from './UnifiedModal';
 
 type PlatformToolModalShellProps = {
@@ -50,9 +49,6 @@ export function PlatformToolModalShell({
   bodyClassName,
   footerClassName,
 }: PlatformToolModalShellProps) {
-  const resolvedPlatformTheme =
-    useAuthUi()?.platformTheme ?? 'light';
-
   return (
     <UnifiedModal
       open={open}
@@ -68,7 +64,6 @@ export function PlatformToolModalShell({
       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,

src/components/common/PlatformUtilityInfoModal.test.tsx

@@ -1,10 +1,14 @@
 /* @vitest-environment jsdom */
 
 import { render, screen, within } from '@testing-library/react';
-import { expect, test } from 'vitest';
+import { expect, test, vi } from 'vitest';
 
 import { PlatformUtilityInfoModal } from './PlatformUtilityInfoModal';
 
+vi.mock('../auth/AuthUiContext', () => ({
+  useAuthUi: () => ({ platformTheme: 'dark' }),
+}));
+
 test('renders platform utility info modal shell with default platform styling', () => {
   render(
     <PlatformUtilityInfoModal
@@ -19,7 +23,7 @@ test('renders platform utility info modal shell with default platform styling',
   );
 
   const dialog = screen.getByRole('dialog', { name: '工具信息' });
-  expect(dialog.parentElement?.className).toContain('platform-theme--light');
+  expect(dialog.parentElement?.className).toContain('platform-theme--dark');
   expect(dialog.parentElement?.className).toContain('!items-center');
   expect(dialog.className).toContain('platform-remap-surface');
   expect(dialog.className).toContain('rounded-[1.5rem]');

src/components/common/PlatformUtilityInfoModal.tsx

@@ -29,7 +29,7 @@ export function PlatformUtilityInfoModal({
   onClose,
   children,
   footer,
-  platformTheme = 'light',
+  platformTheme,
   overlayClassName,
   panelClassName,
   bodyClassName,
@@ -41,11 +41,8 @@ export function PlatformUtilityInfoModal({
       title={title}
       onClose={onClose}
       size="sm"
-      overlayClassName={joinClassNames(
-        `platform-theme platform-theme--${platformTheme}`,
-        '!items-center',
-        overlayClassName,
-      )}
+      portalTheme={platformTheme}
+      overlayClassName={joinClassNames('!items-center', overlayClassName)}
       panelClassName={joinClassNames('platform-remap-surface', panelClassName)}
       bodyClassName={joinClassNames(
         'space-y-4 px-4 py-4 sm:px-5 sm:py-5',

src/components/common/PublishShareModal.test.tsx

@@ -29,6 +29,10 @@ vi.mock('../../services/clipboard', () => ({
   copyTextToClipboard: vi.fn(),
 }));
 
+vi.mock('../auth/AuthUiContext', () => ({
+  useAuthUi: () => ({ platformTheme: 'dark' }),
+}));
+
 const payload: PublishShareModalPayload = {
   title: '暖灯猫街',
   publicWorkCode: 'PZ-00000001',
@@ -119,7 +123,7 @@ describe('PublishShareModal', () => {
 
     const dialog = screen.getByRole('dialog', { name: '分享给朋友' });
     expect(dialog.parentElement?.className).toContain('!items-center');
-    expect(dialog.parentElement?.className).toContain('platform-theme--light');
+    expect(dialog.parentElement?.className).toContain('platform-theme--dark');
     expect(dialog.className).toContain('platform-modal-shell');
     expect(dialog.className).toContain('rounded-[1.75rem]');
     expect(dialog.getAttribute('style')).toBeNull();

src/components/common/PublishShareModal.tsx

@@ -10,7 +10,6 @@ import {
   openHostShare,
   openHostShareGrid,
 } from '../../services/host-bridge/hostBridge';
-import { useAuthUi } from '../auth/AuthUiContext';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import { PlatformUtilityInfoModal } from './PlatformUtilityInfoModal';
 import { downloadPublishShareCardImage } from './publishShareCardImage';
@@ -77,7 +76,6 @@ export function PublishShareModal({
   payload,
   onClose,
 }: PublishShareModalProps) {
-  const platformTheme = useAuthUi()?.platformTheme ?? 'light';
   const [copyState, setCopyState] = useState<ActionState>('idle');
   const [downloadState, setDownloadState] = useState<ActionState>('idle');
   const [gridState, setGridState] = useState<ActionState>('idle');
@@ -233,7 +231,6 @@ export function PublishShareModal({
       open={open && Boolean(payload)}
       title="分享给朋友"
       onClose={onClose}
-      platformTheme={platformTheme}
       panelClassName="rounded-[1.75rem]"
       footerClassName="border-t-0 px-4 pb-5 pt-0 sm:px-5"
       footer={

src/components/common/UnifiedConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 
 import { PlatformActionButton } from './PlatformActionButton';
-import { UnifiedModal } from './UnifiedModal';
+import { UnifiedModal, type UnifiedModalPortalTheme } from './UnifiedModal';
 
 type UnifiedConfirmDialogTone = 'primary' | 'danger';
 
@@ -24,6 +24,7 @@ type UnifiedConfirmDialogProps = {
   closeOnBackdrop?: boolean;
   showCloseButton?: boolean;
   portal?: boolean;
+  portalTheme?: UnifiedModalPortalTheme;
   size?: 'sm' | 'md';
   overlayClassName?: string;
   panelClassName?: string;
@@ -54,6 +55,7 @@ export function UnifiedConfirmDialog({
   closeOnBackdrop = true,
   showCloseButton = true,
   portal = true,
+  portalTheme = 'auto',
   size = 'sm',
   overlayClassName,
   panelClassName,
@@ -74,6 +76,7 @@ export function UnifiedConfirmDialog({
       closeOnBackdrop={closeOnBackdrop && !busy}
       showCloseButton={showCloseButton}
       portal={portal}
+      portalTheme={portalTheme}
       size={size}
       overlayClassName={overlayClassName}
       panelClassName={panelClassName}

src/components/common/UnifiedModal.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 
+import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
+import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformModalCloseButton } from './PlatformModalCloseButton';
 
 type UnifiedModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
@@ -18,6 +20,8 @@ type UnifiedModalCloseIcon = ComponentProps<
   typeof PlatformModalCloseButton
 >['icon'];
 
+export type UnifiedModalPortalTheme = PlatformTheme | 'auto' | 'none';
+
 type UnifiedModalProps = {
   open: boolean;
   title: string;
@@ -37,6 +41,7 @@ type UnifiedModalProps = {
   closeVariant?: UnifiedModalCloseVariant;
   closeIcon?: UnifiedModalCloseIcon;
   portal?: boolean;
+  portalTheme?: UnifiedModalPortalTheme;
   zIndexClassName?: string;
   overlayClassName?: string;
   overlayStyle?: CSSProperties;
@@ -63,6 +68,44 @@ function joinClassNames(
   return classNames.filter(Boolean).join(' ');
 }
 
+function resolvePortalOverlayClassName({
+  overlayClassName,
+  portalTheme,
+  contextualTheme,
+}: {
+  overlayClassName?: string;
+  portalTheme: UnifiedModalPortalTheme;
+  contextualTheme: PlatformTheme;
+}) {
+  if (portalTheme === 'none') {
+    return overlayClassName;
+  }
+
+  const classNames = overlayClassName?.split(/\s+/u).filter(Boolean) ?? [];
+  const explicitTheme = classNames.find(
+    (className): className is `platform-theme--${PlatformTheme}` =>
+      className === 'platform-theme--light' ||
+      className === 'platform-theme--dark',
+  );
+  const resolvedTheme =
+    portalTheme === 'auto'
+      ? ((explicitTheme?.replace('platform-theme--', '') as
+          PlatformTheme | undefined) ?? contextualTheme)
+      : portalTheme;
+  const remainingClassNames = classNames.filter(
+    (className) =>
+      className !== 'platform-theme' &&
+      className !== 'platform-theme--light' &&
+      className !== 'platform-theme--dark',
+  );
+
+  return joinClassNames(
+    'platform-theme',
+    `platform-theme--${resolvedTheme}`,
+    ...remainingClassNames,
+  );
+}
+
 function UnifiedModalContent({
   open,
   title,
@@ -91,7 +134,7 @@ function UnifiedModalContent({
   bodyClassName,
   footerClassName,
   panelStyle,
-}: Omit<UnifiedModalProps, 'portal'>) {
+}: Omit<UnifiedModalProps, 'portal' | 'portalTheme'>) {
   const generatedTitleId = useId();
   const descriptionId = useId();
   const titleId = titleIdProp ?? generatedTitleId;
@@ -231,10 +274,30 @@ function UnifiedModalContent({
  * 统一模态窗口外壳。
  * 业务组件只传入标题、内容和操作区；遮罩、无障碍属性、Escape 与移动端布局在这里收口。
  */
-export function UnifiedModal({ portal = true, ...props }: UnifiedModalProps) {
+export function UnifiedModal({
+  portal = true,
+  portalTheme = 'auto',
+  overlayClassName,
+  ...props
+}: UnifiedModalProps) {
+  const contextualTheme = useAuthUi()?.platformTheme ?? 'light';
+  const resolvedProps = {
+    ...props,
+    overlayClassName: portal
+      ? resolvePortalOverlayClassName({
+          overlayClassName,
+          portalTheme,
+          contextualTheme,
+        })
+      : overlayClassName,
+  };
+
   if (!portal || typeof document === 'undefined') {
-    return <UnifiedModalContent {...props} />;
+    return <UnifiedModalContent {...resolvedProps} />;
   }
 
-  return createPortal(<UnifiedModalContent {...props} />, document.body);
+  return createPortal(
+    <UnifiedModalContent {...resolvedProps} />,
+    document.body,
+  );
 }