From 818b75b6914b033564cd62f1b55dc641a80daba0 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Thu, 23 Jul 2026 08:45:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(overlay):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=B5=AE=E7=AA=97=E4=B8=8E=E5=BC=B9=E5=B1=82=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一分离窗口、弹出层和弹窗的层级常量
- 将浮动窗口通过 Portal 挂载到 body 并隔离 AntD 弹层
- 补充右键菜单和分离窗口层级回归测试
---
 .../DataGridLegacyCellContextMenu.tsx         |  3 +-
 frontend/src/components/DataGridShell.tsx     |  3 +-
 .../src/components/FloatingAIChatWindow.tsx   | 16 +++++--
 .../components/FloatingQueryResultWindows.tsx | 21 ++++++---
 .../components/FloatingWorkbenchWindows.tsx   | 21 ++++++---
 frontend/src/components/Sidebar.tsx           |  3 +-
 frontend/src/components/TableOverview.tsx     |  3 +-
 .../components/resultDiff/ResultDiffPanel.tsx | 21 ++++++---
 frontend/src/utils/detachedWindow.test.ts     | 15 +++++--
 frontend/src/utils/detachedWindow.ts          |  4 +-
 frontend/src/utils/overlayZIndex.test.ts      | 44 +++++++++++++++++--
 frontend/src/utils/overlayZIndex.ts           | 11 ++---
 .../resultDiff/detachedBoundsMemory.test.ts   |  2 +
 .../utils/resultDiff/detachedBoundsMemory.ts  |  3 +-
 14 files changed, 133 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/DataGridLegacyCellContextMenu.tsx b/frontend/src/components/DataGridLegacyCellContextMenu.tsx
index dda612cc..c8afbc00 100644
--- a/frontend/src/components/DataGridLegacyCellContextMenu.tsx
+++ b/frontend/src/components/DataGridLegacyCellContextMenu.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { CopyOutlined, EditOutlined, UndoOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { t } from '../i18n';
+import { APP_POPUP_Z_INDEX } from '../utils/overlayZIndex';
 
 interface CellContextMenuState {
   visible: boolean;
@@ -125,7 +126,7 @@ const DataGridLegacyCellContextMenu: React.FC<DataGridLegacyCellContextMenuProps
         position: 'fixed',
         left: cellContextMenu.x,
         top: cellContextMenu.y,
-        zIndex: 10000,
+        zIndex: APP_POPUP_Z_INDEX,
         background: bgContextMenu,
         border: darkMode ? '1px solid #303030' : '1px solid #d9d9d9',
         borderRadius: 4,
diff --git a/frontend/src/components/DataGridShell.tsx b/frontend/src/components/DataGridShell.tsx
index 847a71fb..19148410 100644
--- a/frontend/src/components/DataGridShell.tsx
+++ b/frontend/src/components/DataGridShell.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import { createPortal } from 'react-dom';
+import { APP_POPUP_Z_INDEX } from '../utils/overlayZIndex';
 
 import Modal from './common/ResizableDraggableModal';
 import ImportPreviewModal from './ImportPreviewModal';
@@ -882,7 +883,7 @@ const renderDataTableView = () => (
                     position: 'fixed',
                     left: cellContextMenu.x,
                     top: cellContextMenu.y,
-                    zIndex: 10000,
+                    zIndex: APP_POPUP_Z_INDEX,
                 }}
                 onClick={(e) => e.stopPropagation()}
             >
diff --git a/frontend/src/components/FloatingAIChatWindow.tsx b/frontend/src/components/FloatingAIChatWindow.tsx
index b885df83..4ce6c191 100644
--- a/frontend/src/components/FloatingAIChatWindow.tsx
+++ b/frontend/src/components/FloatingAIChatWindow.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Button, Spin } from 'antd';
+import { createPortal } from 'react-dom';
+import { Button, ConfigProvider, Spin } from 'antd';
 import { useStore } from '../store';
 import { t } from '../i18n';
 import {
@@ -10,6 +11,7 @@ import {
 } from '../utils/detachedWindow';
 import type { OverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
 import { hasNativeDetachedWindowManager } from '../utils/nativeDetachedWindowHost';
+import { APP_POPUP_Z_INDEX } from '../utils/overlayZIndex';
 import { useManagedPointerInteraction } from '../hooks/useManagedPointerInteraction';
 import AIPanelErrorBoundary from './ai/AIPanelErrorBoundary';
 
@@ -129,8 +131,9 @@ const FloatingAIChatWindow: React.FC<FloatingAIChatWindowProps> = ({
   const isDark = theme === 'dark';
   const bounds = windowState;
 
-  return (
-    <div className="gn-detached-ai-chat-layer" aria-label={t('ai_chat.detached.window_aria')}>
+  const floatingWindow = (
+    <ConfigProvider theme={{ token: { zIndexPopupBase: APP_POPUP_Z_INDEX } }}>
+      <div className="gn-detached-ai-chat-layer" aria-label={t('ai_chat.detached.window_aria')}>
       <style>{`
         .gn-detached-ai-chat-layer {
           position: fixed;
@@ -293,8 +296,13 @@ const FloatingAIChatWindow: React.FC<FloatingAIChatWindowProps> = ({
           onPointerDown={(event) => startInteraction(event, 'resize-se', bounds)}
         />
       </div>
-    </div>
+      </div>
+    </ConfigProvider>
   );
+
+  return typeof document === 'undefined'
+    ? floatingWindow
+    : createPortal(floatingWindow, document.body);
 };
 
 export default FloatingAIChatWindow;
diff --git a/frontend/src/components/FloatingQueryResultWindows.tsx b/frontend/src/components/FloatingQueryResultWindows.tsx
index ca40b2db..c0f02a51 100644
--- a/frontend/src/components/FloatingQueryResultWindows.tsx
+++ b/frontend/src/components/FloatingQueryResultWindows.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Button, Tooltip } from 'antd';
+import { createPortal } from 'react-dom';
+import { Button, ConfigProvider, Tooltip } from 'antd';
 import { CloseOutlined, CompressOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
 import { t } from '../i18n';
@@ -12,6 +13,10 @@ import {
   DEFAULT_DETACHED_WINDOW_MIN_WIDTH,
   DETACHED_WINDOW_VIEWPORT_PADDING,
 } from '../utils/detachedWindow';
+import {
+  APP_DETACHED_WINDOW_Z_INDEX_BASE,
+  APP_POPUP_Z_INDEX,
+} from '../utils/overlayZIndex';
 import { useManagedPointerInteraction } from '../hooks/useManagedPointerInteraction';
 
 const createLazyDetachedResultDataGrid = () => React.lazy(() => import('./DataGrid'));
@@ -148,14 +153,15 @@ const FloatingQueryResultWindows: React.FC = () => {
 
   const isDark = theme === 'dark';
 
-  return (
-    <div className="gn-detached-result-layer" aria-label={t('query_editor.results_panel.detached.title', { index: '' })}>
+  const floatingWindows = (
+    <ConfigProvider theme={{ token: { zIndexPopupBase: APP_POPUP_Z_INDEX } }}>
+      <div className="gn-detached-result-layer" aria-label={t('query_editor.results_panel.detached.title', { index: '' })}>
       <style>{`
         .gn-detached-result-layer {
           position: fixed;
           inset: 0;
           pointer-events: none;
-          z-index: 1210;
+          z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};
         }
         .gn-detached-result-window {
           position: fixed;
@@ -343,8 +349,13 @@ const FloatingQueryResultWindows: React.FC = () => {
           </div>
         );
       })}
-    </div>
+      </div>
+    </ConfigProvider>
   );
+
+  return typeof document === 'undefined'
+    ? floatingWindows
+    : createPortal(floatingWindows, document.body);
 };
 
 export default FloatingQueryResultWindows;
diff --git a/frontend/src/components/FloatingWorkbenchWindows.tsx b/frontend/src/components/FloatingWorkbenchWindows.tsx
index 1cee2cf4..f2c7ee6f 100644
--- a/frontend/src/components/FloatingWorkbenchWindows.tsx
+++ b/frontend/src/components/FloatingWorkbenchWindows.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Button, Tooltip } from 'antd';
+import { createPortal } from 'react-dom';
+import { Button, ConfigProvider, Tooltip } from 'antd';
 import { CloseOutlined, CompressOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
 import { t } from '../i18n';
@@ -18,6 +19,10 @@ import WorkbenchTabContent from './WorkbenchTabContent';
 import { hasNativeDetachedWindowManager } from '../utils/nativeDetachedWindowHost';
 import { useWorkbenchTabs } from '../hooks/useWorkbenchTabs';
 import { useManagedPointerInteraction } from '../hooks/useManagedPointerInteraction';
+import {
+  APP_DETACHED_WINDOW_Z_INDEX_BASE,
+  APP_POPUP_Z_INDEX,
+} from '../utils/overlayZIndex';
 
 const getTabKindLabel = (type: string): string => {
   if (type === 'query') return t('tab_manager.kind_badge.query');
@@ -184,14 +189,15 @@ const FloatingWorkbenchWindows: React.FC = () => {
 
   const isDark = theme === 'dark';
 
-  return (
-    <div className="gn-detached-window-layer" aria-label={t('tab_manager.detached.title_fallback')}>
+  const floatingWindows = (
+    <ConfigProvider theme={{ token: { zIndexPopupBase: APP_POPUP_Z_INDEX } }}>
+      <div className="gn-detached-window-layer" aria-label={t('tab_manager.detached.title_fallback')}>
       <style>{`
         .gn-detached-window-layer {
           position: fixed;
           inset: 0;
           pointer-events: none;
-          z-index: 1200;
+          z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};
         }
         .gn-detached-window {
           position: fixed;
@@ -368,8 +374,13 @@ const FloatingWorkbenchWindows: React.FC = () => {
           />
         </div>
       ))}
-    </div>
+      </div>
+    </ConfigProvider>
   );
+
+  return typeof document === 'undefined'
+    ? floatingWindows
+    : createPortal(floatingWindows, document.body);
 };
 
 export default FloatingWorkbenchWindows;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index a65c2313..5ee335ee 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -71,6 +71,7 @@ export {
 import React, { useEffect, useState, useMemo, useRef, useCallback, useDeferredValue } from 'react';
 import { createPortal } from 'react-dom';
 import { Tree, message, Dropdown, MenuProps, Input, Button, Form, Popover, Radio, Select, Tooltip } from 'antd';
+import { APP_POPUP_Z_INDEX } from '../utils/overlayZIndex';
 	import {
 	  CaretDownFilled,
 	  DatabaseOutlined,
@@ -3369,7 +3370,7 @@ const Sidebar: React.FC<{
                     position: 'fixed',
                     left: contextMenu.x,
                     top: contextMenu.y,
-                    zIndex: 10000,
+                    zIndex: APP_POPUP_Z_INDEX,
                     width: contextMenu.overlayStyle?.width ?? SIDEBAR_CONTEXT_MENU_FALLBACK_WIDTH,
                     maxWidth: contextMenu.overlayStyle?.maxWidth ?? 'calc(100vw - 24px)',
                     ['--gn-v2-context-menu-max-height' as any]: `${contextMenu.maxHeight ?? SIDEBAR_CONTEXT_MENU_FALLBACK_HEIGHT}px`,
diff --git a/frontend/src/components/TableOverview.tsx b/frontend/src/components/TableOverview.tsx
index c59d0fe9..2614a87a 100644
--- a/frontend/src/components/TableOverview.tsx
+++ b/frontend/src/components/TableOverview.tsx
@@ -31,6 +31,7 @@ import { extractTableNameFromMetadataRow } from '../utils/tableMetadataRows';
 import { V2TableContextMenuView, type V2TableContextMenuActionKey } from './V2TableContextMenu';
 import { showSQLExportOptionsDialog } from './SQLExportOptionsDialog';
 import { confirmCopyTable } from './tableCopyAction';
+import { APP_POPUP_Z_INDEX } from '../utils/overlayZIndex';
 
 interface TableOverviewProps {
     tab: TabData;
@@ -1606,7 +1607,7 @@ const TableOverview: React.FC<TableOverviewProps> = ({ tab }) => {
                         position: 'fixed',
                         left: v2ContextMenu.x,
                         top: v2ContextMenu.y,
-                        zIndex: 10000,
+                        zIndex: APP_POPUP_Z_INDEX,
                         width: OVERVIEW_CONTEXT_MENU_WIDTH,
                         maxWidth: 'calc(100vw - 24px)',
                         ['--gn-v2-context-menu-max-height' as any]: `${v2ContextMenu.maxHeight}px`,
diff --git a/frontend/src/components/resultDiff/ResultDiffPanel.tsx b/frontend/src/components/resultDiff/ResultDiffPanel.tsx
index ceaf0365..b5a83a23 100644
--- a/frontend/src/components/resultDiff/ResultDiffPanel.tsx
+++ b/frontend/src/components/resultDiff/ResultDiffPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Button, Drawer, Empty, Pagination, Select, Space, Table, Tag, Tooltip, Typography, message } from 'antd';
+import { Button, ConfigProvider, Drawer, Empty, Pagination, Select, Space, Table, Tag, Tooltip, Typography, message } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import {
   CloseOutlined,
@@ -36,6 +36,10 @@ import {
   DEFAULT_DETACHED_WINDOW_MIN_WIDTH,
   DETACHED_WINDOW_VIEWPORT_PADDING,
 } from '../../utils/detachedWindow';
+import {
+  APP_DETACHED_WINDOW_Z_INDEX_BASE,
+  APP_POPUP_Z_INDEX,
+} from '../../utils/overlayZIndex';
 import { useManagedPointerInteraction } from '../../hooks/useManagedPointerInteraction';
 import {
   loadResultDiffDetachedBoundsMemory,
@@ -79,7 +83,7 @@ type FloatingBounds = {
   zIndex: number;
 };
 
-const initialFloatingBounds = (zIndex = 1320): FloatingBounds =>
+const initialFloatingBounds = (zIndex = APP_DETACHED_WINDOW_Z_INDEX_BASE + 1): FloatingBounds =>
   resolveResultDiffDetachedBounds(loadResultDiffDetachedBoundsMemory(), zIndex);
 
 const ResultDiffPanel: React.FC<ResultDiffPanelProps> = ({
@@ -707,13 +711,14 @@ const ResultDiffPanel: React.FC<ResultDiffPanelProps> = ({
 
   const floatingWindow = detached && typeof document !== 'undefined'
     ? createPortal(
-      <div className="gn-result-diff-floating-layer" aria-label={titleText}>
+      <ConfigProvider theme={{ token: { zIndexPopupBase: APP_POPUP_Z_INDEX } }}>
+        <div className="gn-result-diff-floating-layer" aria-label={titleText}>
         <style>{`
           .gn-result-diff-floating-layer {
             position: fixed;
             inset: 0;
             pointer-events: none;
-            z-index: 1320;
+            z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};
           }
           .gn-result-diff-floating-window {
             position: fixed;
@@ -782,7 +787,10 @@ const ResultDiffPanel: React.FC<ResultDiffPanelProps> = ({
             height: bounds.height,
             zIndex: bounds.zIndex,
           }}
-          onMouseDown={() => setBounds((prev) => ({ ...prev, zIndex: Math.max(prev.zIndex, 1320) + 1 }))}
+          onMouseDown={() => setBounds((prev) => ({
+            ...prev,
+            zIndex: Math.max(prev.zIndex, APP_DETACHED_WINDOW_Z_INDEX_BASE) + 1,
+          }))}
         >
           <div
             className="gn-result-diff-floating-header"
@@ -811,7 +819,8 @@ const ResultDiffPanel: React.FC<ResultDiffPanelProps> = ({
             onPointerDown={(event) => startFloatingDrag(event, 'resize-se')}
           />
         </div>
-      </div>,
+        </div>
+      </ConfigProvider>,
       document.body,
     )
     : null;
diff --git a/frontend/src/utils/detachedWindow.test.ts b/frontend/src/utils/detachedWindow.test.ts
index c4a88a8e..36b5fd5e 100644
--- a/frontend/src/utils/detachedWindow.test.ts
+++ b/frontend/src/utils/detachedWindow.test.ts
@@ -13,11 +13,19 @@ import {
   shouldDetachAtScreenPoint,
   toAIChatDetachedBoundsMemory,
 } from './detachedWindow';
+import {
+  APP_DETACHED_WINDOW_Z_INDEX_BASE,
+  APP_POPUP_Z_INDEX,
+} from './overlayZIndex';
 
 describe('detachedWindow helpers', () => {
   it('computes next z-index above existing windows', () => {
-    expect(nextDetachedZIndex([])).toBe(1201);
-    expect(nextDetachedZIndex([{ zIndex: 1300 }, { zIndex: 1250 }])).toBe(1301);
+    expect(nextDetachedZIndex([])).toBe(APP_DETACHED_WINDOW_Z_INDEX_BASE + 1);
+    expect(nextDetachedZIndex([
+      { zIndex: APP_DETACHED_WINDOW_Z_INDEX_BASE + 100 },
+      { zIndex: APP_DETACHED_WINDOW_Z_INDEX_BASE + 50 },
+    ])).toBe(APP_DETACHED_WINDOW_Z_INDEX_BASE + 101);
+    expect(nextDetachedZIndex([])).toBeLessThan(APP_POPUP_Z_INDEX);
   });
 
   it('detaches only when vertical drag exceeds threshold', () => {
@@ -30,7 +38,8 @@ describe('detachedWindow helpers', () => {
     const bounds = createDefaultDetachedBounds([]);
     expect(bounds.width).toBeGreaterThan(0);
     expect(bounds.height).toBeGreaterThan(0);
-    expect(bounds.zIndex).toBeGreaterThan(1200);
+    expect(bounds.zIndex).toBeGreaterThan(APP_DETACHED_WINDOW_Z_INDEX_BASE);
+    expect(bounds.zIndex).toBeLessThan(APP_POPUP_Z_INDEX);
   });
 
   it('resolves floating window titles with object labels', () => {
diff --git a/frontend/src/utils/detachedWindow.ts b/frontend/src/utils/detachedWindow.ts
index ec6f0196..8f308194 100644
--- a/frontend/src/utils/detachedWindow.ts
+++ b/frontend/src/utils/detachedWindow.ts
@@ -1,3 +1,5 @@
+import { APP_DETACHED_WINDOW_Z_INDEX_BASE } from './overlayZIndex';
+
 export type DetachedWindowBounds = {
   x: number;
   y: number;
@@ -86,7 +88,7 @@ export const clamp = (value: number, min: number, max: number): number =>
   Math.min(Math.max(value, min), max);
 
 export const nextDetachedZIndex = (windows: Array<{ zIndex?: number }>): number => {
-  let max = 1200;
+  let max = APP_DETACHED_WINDOW_Z_INDEX_BASE;
   for (const windowState of windows) {
     const z = Number(windowState?.zIndex);
     if (Number.isFinite(z) && z > max) {
diff --git a/frontend/src/utils/overlayZIndex.test.ts b/frontend/src/utils/overlayZIndex.test.ts
index f2f5127f..67ef5611 100644
--- a/frontend/src/utils/overlayZIndex.test.ts
+++ b/frontend/src/utils/overlayZIndex.test.ts
@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import {
   APP_COMMAND_PALETTE_Z_INDEX,
+  APP_DETACHED_WINDOW_Z_INDEX_BASE,
   APP_FOREGROUND_MODAL_Z_INDEX,
   APP_NESTED_MODAL_Z_INDEX,
   APP_OVERLAY_Z_INDEX_BASE,
@@ -28,6 +29,14 @@ const connectionModalSource = readSource('../components/ConnectionModal.tsx');
 const redisViewerSource = readSource('../components/RedisViewer.tsx');
 const resultDiffPanelSource = readSource('../components/resultDiff/ResultDiffPanel.tsx');
 const sidebarSearchPanelSource = readSource('../components/sidebar/SidebarSearchPanel.tsx');
+const floatingAIChatSource = readSource('../components/FloatingAIChatWindow.tsx');
+const floatingWorkbenchSource = readSource('../components/FloatingWorkbenchWindows.tsx');
+const floatingQueryResultSource = readSource('../components/FloatingQueryResultWindows.tsx');
+const detachedWindowSource = readSource('./detachedWindow.ts');
+const legacyGridContextMenuSource = readSource('../components/DataGridLegacyCellContextMenu.tsx');
+const dataGridShellSource = readSource('../components/DataGridShell.tsx');
+const sidebarSource = readSource('../components/Sidebar.tsx');
+const tableOverviewSource = readSource('../components/TableOverview.tsx');
 const v2ThemeSource = readSource('../v2-theme.css');
 
 const collectRuntimeSources = (directory: string): string[] => readdirSync(directory).flatMap((entry) => {
@@ -94,9 +103,10 @@ afterEach(() => {
 });
 
 describe('application overlay z-index policy', () => {
-  it('keeps root, popup, and foreground modal layers ordered', () => {
+  it('keeps root dialogs, floating windows, popups, and foreground dialogs ordered', () => {
     expect(APP_OVERLAY_Z_INDEX_BASE).toBe(10_000);
-    expect(APP_POPUP_Z_INDEX).toBeGreaterThan(APP_OVERLAY_Z_INDEX_BASE);
+    expect(APP_DETACHED_WINDOW_Z_INDEX_BASE).toBeGreaterThan(APP_OVERLAY_Z_INDEX_BASE);
+    expect(APP_POPUP_Z_INDEX).toBeGreaterThan(APP_DETACHED_WINDOW_Z_INDEX_BASE);
     expect(APP_FOREGROUND_MODAL_Z_INDEX).toBeGreaterThan(APP_POPUP_Z_INDEX);
     expect(APP_NESTED_MODAL_Z_INDEX).toBeGreaterThan(APP_FOREGROUND_MODAL_Z_INDEX);
     expect(APP_COMMAND_PALETTE_Z_INDEX).toBeGreaterThan(APP_NESTED_MODAL_Z_INDEX);
@@ -110,7 +120,7 @@ describe('application overlay z-index policy', () => {
     expect(configSpy).toHaveBeenCalledWith({
       theme: {
         token: {
-          zIndexPopupBase: APP_OVERLAY_Z_INDEX_BASE,
+          zIndexPopupBase: APP_POPUP_Z_INDEX,
         },
       },
     });
@@ -168,6 +178,34 @@ describe('application overlay z-index policy', () => {
     expect(resultDiffPanelSource).not.toContain('zIndex: 10050');
   });
 
+  it('keeps every in-WebView floating window above root dialogs with usable portaled popups', () => {
+    expect(detachedWindowSource).toContain('let max = APP_DETACHED_WINDOW_Z_INDEX_BASE;');
+    for (const source of [
+      floatingAIChatSource,
+      floatingWorkbenchSource,
+      floatingQueryResultSource,
+    ]) {
+      expect(source).toContain("import { createPortal } from 'react-dom';");
+      expect(source).toContain('zIndexPopupBase: APP_POPUP_Z_INDEX');
+      expect(source).toContain('document.body');
+    }
+    expect(floatingWorkbenchSource).toContain('z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};');
+    expect(floatingQueryResultSource).toContain('z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};');
+    expect(resultDiffPanelSource).toContain('z-index: ${APP_DETACHED_WINDOW_Z_INDEX_BASE};');
+    expect(resultDiffPanelSource).toContain('zIndexPopupBase: APP_POPUP_Z_INDEX');
+  });
+
+  it('routes body-level context menus through the shared popup layer', () => {
+    for (const source of [
+      legacyGridContextMenuSource,
+      dataGridShellSource,
+      sidebarSource,
+      tableOverviewSource,
+    ]) {
+      expect(source).toContain('zIndex: APP_POPUP_Z_INDEX');
+    }
+  });
+
   it('portals the command palette above modal stacking contexts', () => {
     expect(sidebarSearchPanelSource).toContain("import { createPortal } from 'react-dom';");
     expect(sidebarSearchPanelSource).toContain('style={{ zIndex: APP_COMMAND_PALETTE_Z_INDEX }}');
diff --git a/frontend/src/utils/overlayZIndex.ts b/frontend/src/utils/overlayZIndex.ts
index b1b5b809..339af621 100644
--- a/frontend/src/utils/overlayZIndex.ts
+++ b/frontend/src/utils/overlayZIndex.ts
@@ -1,16 +1,17 @@
 import { ConfigProvider } from 'antd';
 
 export const APP_OVERLAY_Z_INDEX_BASE = 10_000;
-export const APP_POPUP_Z_INDEX = APP_OVERLAY_Z_INDEX_BASE + 50;
-export const APP_FOREGROUND_MODAL_Z_INDEX = APP_OVERLAY_Z_INDEX_BASE + 100;
-export const APP_NESTED_MODAL_Z_INDEX = APP_FOREGROUND_MODAL_Z_INDEX + 100;
-export const APP_COMMAND_PALETTE_Z_INDEX = APP_NESTED_MODAL_Z_INDEX + 100;
+export const APP_DETACHED_WINDOW_Z_INDEX_BASE = APP_OVERLAY_Z_INDEX_BASE + 1_000;
+export const APP_POPUP_Z_INDEX = APP_OVERLAY_Z_INDEX_BASE + 9_000;
+export const APP_FOREGROUND_MODAL_Z_INDEX = APP_OVERLAY_Z_INDEX_BASE + 10_000;
+export const APP_NESTED_MODAL_Z_INDEX = APP_FOREGROUND_MODAL_Z_INDEX + 1_000;
+export const APP_COMMAND_PALETTE_Z_INDEX = APP_NESTED_MODAL_Z_INDEX + 1_000;
 
 export const configureAntdStaticOverlayLayer = (): void => {
   ConfigProvider.config({
     theme: {
       token: {
-        zIndexPopupBase: APP_OVERLAY_Z_INDEX_BASE,
+        zIndexPopupBase: APP_POPUP_Z_INDEX,
       },
     },
   });
diff --git a/frontend/src/utils/resultDiff/detachedBoundsMemory.test.ts b/frontend/src/utils/resultDiff/detachedBoundsMemory.test.ts
index f2ea7a41..c955b6e9 100644
--- a/frontend/src/utils/resultDiff/detachedBoundsMemory.test.ts
+++ b/frontend/src/utils/resultDiff/detachedBoundsMemory.test.ts
@@ -4,6 +4,7 @@ import {
   resolveResultDiffDetachedBounds,
   saveResultDiffDetachedBoundsMemory,
 } from './detachedBoundsMemory';
+import { APP_DETACHED_WINDOW_Z_INDEX_BASE } from '../overlayZIndex';
 
 describe('resultDiff detachedBoundsMemory', () => {
   beforeEach(() => {
@@ -46,5 +47,6 @@ describe('resultDiff detachedBoundsMemory', () => {
     const resolved = resolveResultDiffDetachedBounds(null);
     expect(resolved.width).toBeGreaterThan(0);
     expect(resolved.height).toBeGreaterThan(0);
+    expect(resolved.zIndex).toBe(APP_DETACHED_WINDOW_Z_INDEX_BASE + 1);
   });
 });
diff --git a/frontend/src/utils/resultDiff/detachedBoundsMemory.ts b/frontend/src/utils/resultDiff/detachedBoundsMemory.ts
index 6060713a..5ff7b87b 100644
--- a/frontend/src/utils/resultDiff/detachedBoundsMemory.ts
+++ b/frontend/src/utils/resultDiff/detachedBoundsMemory.ts
@@ -6,6 +6,7 @@ import {
   DEFAULT_DETACHED_WINDOW_WIDTH,
   DETACHED_WINDOW_VIEWPORT_PADDING,
 } from '../detachedWindow';
+import { APP_DETACHED_WINDOW_Z_INDEX_BASE } from '../overlayZIndex';
 
 const STORAGE_KEY = 'gonavi.resultDiff.detachedBounds.v1';
 
@@ -62,7 +63,7 @@ export const saveResultDiffDetachedBoundsMemory = (
 /** 按当前视口校正记忆的位置与尺寸，避免移出屏幕 */
 export const resolveResultDiffDetachedBounds = (
   memory?: ResultDiffDetachedBoundsMemory | null,
-  zIndex = 1320,
+  zIndex = APP_DETACHED_WINDOW_Z_INDEX_BASE + 1,
 ): {
   x: number;
   y: number;