From 1bb93e0a5f302ccddf1372e933e2fc85f688a345 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Fri, 28 Aug 2026 11:24:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=81=E8=BD=AC=E6=A0=91):=20=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=89=93=E5=BC=80=E6=97=B6=E9=94=81=E5=AE=9A=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E6=BB=9A=E5=8A=A8=EF=BC=8C=E6=B6=88=E9=99=A4=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=A9=BF=E9=80=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 通用 Modal 打开时 body overflow=hidden，关闭时恢复
- 修复流转树宽屏弹窗滚动时背景看板跟随滚动的问题
- TaskFlowView 记录弹窗同步加锁(覆盖无外层弹窗的页面内打开场景)
---
 frontend/src/components/TaskTree/TaskFlowView.tsx   | 10 +++++++++-
 frontend/src/components/TaskTree/TaskTreeViewer.tsx | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TaskTree/TaskFlowView.tsx b/frontend/src/components/TaskTree/TaskFlowView.tsx
index 2f9fb00..e6bddc0 100644
--- a/frontend/src/components/TaskTree/TaskFlowView.tsx
+++ b/frontend/src/components/TaskTree/TaskFlowView.tsx
@@ -1,7 +1,7 @@
 /**
  * 流转树双模式可视化 — 焦点模式 + 全景模式
  */
-import { memo, useMemo, useState } from "react";
+import { memo, useMemo, useState, useEffect } from "react";
 import { FileText, X } from "lucide-react";
 import type { TaskResponse } from "../../types/api";
 import { TASK_STATUS } from "../../types/api";
@@ -154,6 +154,14 @@ export const TaskFlowView = memo(function TaskFlowView({ tasks, onAction, curren
   const [showFullMap, setShowFullMap] = useState(false);
   const [recordsTask, setRecordsTask] = useState<TaskResponse | null>(null);
 
+  // 🚀 记录弹窗打开时锁定背景滚动（防止滚动穿透），关闭时恢复
+  useEffect(() => {
+    if (!recordsTask) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = prev; };
+  }, [recordsTask]);
+
   // 数据分类 — 🚀 仅根级主干作为垂直时间线节点，子节点通过 childMap 分支递归渲染
   const { allMains, childMap } = useMemo(() => {
     ALL_TASKS.clear(); if (tasks.length) collectAll(tasks);
diff --git a/frontend/src/components/TaskTree/TaskTreeViewer.tsx b/frontend/src/components/TaskTree/TaskTreeViewer.tsx
index 9acf958..cb73063 100644
--- a/frontend/src/components/TaskTree/TaskTreeViewer.tsx
+++ b/frontend/src/components/TaskTree/TaskTreeViewer.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, memo } from "react";
+import { useState, useCallback, useMemo, useEffect, memo } from "react";
 import {
   Search,
   Loader2,
@@ -40,6 +40,14 @@ export const Modal = memo(function Modal({
   widthClass?: string;
   bodyClassName?: string;
 }) {
+  // 🚀 弹窗打开时锁定背景滚动（防止滚动穿透），关闭时恢复
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = prev; };
+  }, [open]);
+
   if (!open) return null;
 
   return (