fix(流转树): 弹窗打开时锁定背景滚动,消除滚动穿透

- 通用 Modal 打开时 body overflow=hidden,关闭时恢复
- 修复流转树宽屏弹窗滚动时背景看板跟随滚动的问题
- TaskFlowView 记录弹窗同步加锁(覆盖无外层弹窗的页面内打开场景)
This commit is contained in:
2026-08-28 11:24:59 +08:00
parent ddb1b4364b
commit 1bb93e0a5f
2 changed files with 18 additions and 2 deletions

View File

@ -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);