From 8ca16c74bcddd45f25750f7a21cd351c838b19b9 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Fri, 19 Jun 2026 22:12:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(roundtable):=20=E4=BC=9A=E5=95=86=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=89=E6=AD=A5=E5=90=84=E5=B8=AD=E4=BD=8D=E4=BA=A7=E7=89=A9?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E7=BB=8F=20portal=20=E6=8C=82=20body?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8=E8=A2=AB=E9=A1=B6?=
 =?UTF-8?q?=E6=A0=8F=E7=9B=96=E4=BD=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页面 <main> 的 `relative z-0` 新建层叠上下文，把内部 fixed 弹窗困在 z-0 层级，
被会商页头(z-40)/全局顶栏(z-45)盖住标题栏。ContentModal 与 ArtifactPreviewModal
改用 createPortal 挂到 document.body，脱离该上下文后正常盖在顶栏之上。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/ArtifactPreviewModal.tsx                  | 8 ++++++--
 .../roundtable-planning/components/Step3SummaryMode.tsx  | 9 +++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend-web/src/roundtable-planning/components/ArtifactPreviewModal.tsx b/frontend-web/src/roundtable-planning/components/ArtifactPreviewModal.tsx
index 1073a515..04beb374 100644
--- a/frontend-web/src/roundtable-planning/components/ArtifactPreviewModal.tsx
+++ b/frontend-web/src/roundtable-planning/components/ArtifactPreviewModal.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 import type { ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -214,7 +215,9 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
     [content],
   );
 
-  return (
+  // 经 portal 挂到 body：脱离会商页 <main>(`relative z-0`) 的层叠上下文，
+  // 否则 fixed 弹窗会被会商页头(z-40)/全局顶栏(z-45)盖住顶部。
+  return createPortal(
     <div
       className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-6"
       onMouseDown={(e) => {
@@ -287,6 +290,7 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 };
diff --git a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
index b6a900f3..e16151cf 100644
--- a/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step3SummaryMode.tsx
@@ -10,6 +10,7 @@
  * 互不影响（report 画 HTML 看板，summary 写 Markdown 报告 + 问答）。
  */
 import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+import { createPortal } from "react-dom";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import {
@@ -1005,7 +1006,10 @@ function ContentModal({
   onClose: () => void;
   headerAction?: React.ReactNode;
 }) {
-  return (
+  // 经 portal 挂到 body：页面 <main> 是 `relative z-0`（浅蓝主题层叠基线），会把
+  // 内部 fixed 弹窗困在 z-0 层叠上下文里，被会商页头(z-40)/全局顶栏(z-45)盖住顶部。
+  // 挂到 body 后脱离该上下文，z-50 才真正盖在顶栏之上，弹窗标题栏正常显示。
+  return createPortal(
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[1px] p-4"
       onClick={onClose}
@@ -1029,7 +1033,8 @@ function ContentModal({
         </div>
         <div className="flex-1 overflow-y-auto p-5">{children}</div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }