fix(roundtable): 会商第三步各席位产物弹窗经 portal 挂 body,修复顶部被顶栏盖住
页面 <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>
This commit is contained in:
1 parent
60626c384a
commit
8ca16c74bc
2 files changed
+13
-4
No files matched your search
@@ -1,4 +1,5 @@
|
|||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
@@ -214,7 +215,9 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
|
|||||||
[content],
|
[content],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
// 经 portal 挂到 body:脱离会商页 <main>(`relative z-0`) 的层叠上下文,
|
||||||
|
// 否则 fixed 弹窗会被会商页头(z-40)/全局顶栏(z-45)盖住顶部。
|
||||||
|
return createPortal(
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-6"
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-6"
|
||||||
onMouseDown={(e) => {
|
onMouseDown={(e) => {
|
||||||
@@ -287,6 +290,7 @@ export const ArtifactPreviewModal: React.FC<ArtifactPreviewModalProps> = ({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -10,6 +10,7 @@
|
|||||||
* 互不影响(report 画 HTML 看板,summary 写 Markdown 报告 + 问答)。
|
* 互不影响(report 画 HTML 看板,summary 写 Markdown 报告 + 问答)。
|
||||||
*/
|
*/
|
||||||
import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
|
import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import {
|
import {
|
||||||
@@ -1005,7 +1006,10 @@ function ContentModal({
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
headerAction?: React.ReactNode;
|
headerAction?: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
// 经 portal 挂到 body:页面 <main> 是 `relative z-0`(浅蓝主题层叠基线),会把
|
||||||
|
// 内部 fixed 弹窗困在 z-0 层叠上下文里,被会商页头(z-40)/全局顶栏(z-45)盖住顶部。
|
||||||
|
// 挂到 body 后脱离该上下文,z-50 才真正盖在顶栏之上,弹窗标题栏正常显示。
|
||||||
|
return createPortal(
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[1px] p-4"
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[1px] p-4"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
@@ -1029,7 +1033,8 @@ function ContentModal({
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex-1 overflow-y-auto p-5">{children}</div>
|
<div className="flex-1 overflow-y-auto p-5">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user