From f7119489025299e35a43521ca5a38d94ecb52493 Mon Sep 17 00:00:00 2001
From: oudecheng <13802883547@139.com>
Date: Tue, 18 Aug 2026 23:00:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=94=BE=E5=A4=A7=E4=B8=8E=E5=B7=A5=E5=85=B7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=B5=AE=E5=B1=82=E8=A2=AB=E8=A6=86=E7=9B=96=E5=8F=8A?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E9=94=99=E4=B9=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

图片放大(ImageLightbox)与工具详情(ToolDetailModal)渲染在虚拟化消息行内，行元素的 transform 成为 fixed 后代的包含块，导致遮罩只覆盖行区域、工具栏定位偏移、其他内容叠在其上。

改用 createPortal 渲染到 document.body，并将 z-index 提升到 z-[10000] 超过下拉浮层 z-[9999]，恢复视口级覆盖与右上角按钮定位。
---
 web/src/components/Chat/MessageBubble.tsx   | 13 ++++++++++---
 web/src/components/Chat/ToolDetailModal.tsx | 11 ++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index 54214a3..5f7bc7d 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, memo } from 'react';
+import { createPortal } from 'react-dom';
 import {
   CheckCircle,
   ChevronRight,
@@ -319,9 +320,14 @@ function ImageLightbox({
     URL.revokeObjectURL(url);
   };
 
-  return (
+  // 必须 portal 到 body：本组件渲染在虚拟化消息行内，行元素带
+  // transform（translateY），transformed 祖先会成为 fixed 后代的包含块，
+  // 导致遮罩只覆盖该行区域、工具栏定位到行盒而非视口、其他行内容叠在
+  // 遮罩之上。portal 后 fixed/z-index 相对视口全局生效。
+  // z-[10000]：高于下拉选择器（z-[9999]）等全局浮层。
+  return createPortal(
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/85 backdrop-blur-sm animate-fade-in"
       onClick={onClose}
     >
       {/* 顶部工具栏 */}
@@ -349,7 +355,8 @@ function ImageLightbox({
         onClick={(e) => e.stopPropagation()}
         alt="图片预览"
       />
-    </div>
+    </div>,
+    document.body,
   );
 }
 
diff --git a/web/src/components/Chat/ToolDetailModal.tsx b/web/src/components/Chat/ToolDetailModal.tsx
index 01b8048..fbb089e 100644
--- a/web/src/components/Chat/ToolDetailModal.tsx
+++ b/web/src/components/Chat/ToolDetailModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { X, Terminal, Clock, Maximize2 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -65,9 +66,12 @@ export function ToolDetailModal({
           ? 'var(--accent-amber)'
           : 'var(--text-muted)';
 
-  return (
+  // portal 到 body：在虚拟化消息行内打开时，行元素的 transform 会成为
+  // fixed 后代的包含块，遮罩/定位全部失效（同 ImageLightbox）。
+  // z-[10000]：高于下拉选择器（z-[9999]）等全局浮层。
+  return createPortal(
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
       onClick={onClose}
     >
       {/* Modal container */}
@@ -145,6 +149,7 @@ export function ToolDetailModal({
           </span>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }