(null)
const ganttContainerWidth = ref(1920) // 默认使用常见的屏幕宽度作为初始值
-// 监听容器宽度变化
-const updateContainerWidth = () => {
- if (ganttRootRef.value) {
- const newWidth = ganttRootRef.value.clientWidth
- if (newWidth !== ganttContainerWidth.value) {
- ganttContainerWidth.value = newWidth
- // 容器宽度变化时，重新计算 TaskList 的宽度限制
- ganttPanelLeftMinWidth.value = getTaskListMinWidth()
- taskListBodyWidth.value = getTaskListMaxWidth()
- taskListBodyProposedWidth.value = getTaskListMaxWidth()
- taskListBodyWidthLimit.value = getTaskListMaxWidth()
+// ResizeObserver 用于监听容器宽度变化
+let ganttRootResizeObserver: ResizeObserver | null = null
- // 确保当前宽度在新的限制范围内
- const adjustedWidth = checkWidthLimits(leftPanelWidth.value)
- if (adjustedWidth !== leftPanelWidth.value) {
- leftPanelWidth.value = adjustedWidth
- }
+// 监听容器宽度变化
+const updateContainerWidth = (newWidth: number) => {
+ if (newWidth !== ganttContainerWidth.value) {
+ ganttContainerWidth.value = newWidth
+ // 容器宽度变化时，重新计算 TaskList 的宽度限制
+ ganttPanelLeftMinWidth.value = getTaskListMinWidth()
+ taskListBodyWidth.value = getTaskListMaxWidth()
+ taskListBodyProposedWidth.value = getTaskListMaxWidth()
+ taskListBodyWidthLimit.value = getTaskListMaxWidth()
+
+ // 确保当前宽度在新的限制范围内
+ const adjustedWidth = checkWidthLimits(leftPanelWidth.value)
+ if (adjustedWidth !== leftPanelWidth.value) {
+ leftPanelWidth.value = adjustedWidth
}
}
}
onMounted(() => {
- updateContainerWidth()
- // 监听窗口大小变化
- window.addEventListener('resize', updateContainerWidth)
+ if (ganttRootRef.value) {
+ // 使用 ResizeObserver 监听容器宽度变化，避免频繁读取 clientWidth
+ ganttRootResizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ // 使用 contentRect.width，避免强制重排
+ updateContainerWidth(entry.contentRect.width)
+ }
+ })
+ ganttRootResizeObserver.observe(ganttRootRef.value)
+ }
})
onUnmounted(() => {
- window.removeEventListener('resize', updateContainerWidth)
+ if (ganttRootResizeObserver) {
+ ganttRootResizeObserver.disconnect()
+ ganttRootResizeObserver = null
+ }
})
// TaskList最小宽度，支持通过taskListConfig配置（支持像素和百分比）
@@ -331,9 +341,11 @@ function onMouseDown(e: MouseEvent) {
document.addEventListener('wheel', blockAllEvents, { capture: true, passive: false })
document.addEventListener('contextmenu', blockAllEvents, { capture: true })
+ // ⚠️ 使用requestAnimationFrame节流，但移除阈值检测，确保每帧都更新
+ let rafId: number | null = null
+
function onMouseMove(ev: MouseEvent) {
if (!dragging.value) return
-
// 强制阻止所有默认行为和事件传播
ev.preventDefault()
ev.stopPropagation()
@@ -341,15 +353,29 @@ function onMouseDown(e: MouseEvent) {
const delta = ev.clientX - startX
const proposedWidth = startWidth + delta
-
- // 直接使用面板宽度限制检查，无需复杂的坐标计算
const finalWidth = checkWidthLimits(proposedWidth)
- leftPanelWidth.value = finalWidth
+
+ // 取消之前的帧请求
+ if (rafId !== null) {
+ cancelAnimationFrame(rafId)
+ }
+
+ // 在下一帧更新（节流到60fps，避免过度触发响应式系统）
+ rafId = requestAnimationFrame(() => {
+ leftPanelWidth.value = finalWidth
+ rafId = null
+ })
}
function onMouseUp() {
dragging.value = false
+ // 取消未完成的帧请求
+ if (rafId !== null) {
+ cancelAnimationFrame(rafId)
+ rafId = null
+ }
+
// 移除全局事件拦截器
document.removeEventListener('mousedown', blockAllEvents, { capture: true })
document.removeEventListener('click', blockAllEvents, { capture: true })
@@ -480,10 +506,8 @@ onMounted(() => {
// 监听右侧面板（timeline 的可视容器）的宽度
const rightPanel = document.querySelector('.gantt-panel-right')
if (rightPanel) {
- // 初始化宽度
- timelineContainerWidth.value = rightPanel.clientWidth
-
- // 使用 ResizeObserver 监听宽度变化
+ // 使用 ResizeObserver 自动更新宽度，避免直接读取clientWidth造成强制重排
+ // ResizeObserver 会在开始观察时立即触发一次回调，提供初始宽度
resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
timelineContainerWidth.value = entry.contentRect.width
@@ -2162,6 +2186,7 @@ function handleMilestoneDialogDelete(milestoneId: number) {
{
return new Date(now.getFullYear(), now.getMonth(), now.getDate())
}
+// 缓存今天的日期，避免频繁创建
+// 每分钟更新一次缓存（对于日期判断来说足够了）
+const cachedToday = ref(createLocalToday())
+let todayCacheTimer: number | null = null
+
+onMounted(() => {
+ // 每60秒更新一次今天的日期缓存
+ todayCacheTimer = window.setInterval(() => {
+ cachedToday.value = createLocalToday()
+ }, 60000)
+})
+
+onUnmounted(() => {
+ if (todayCacheTimer !== null) {
+ clearInterval(todayCacheTimer)
+ todayCacheTimer = null
+ }
+})
+
const formatDateToLocalString = (date: Date): string => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
@@ -223,7 +242,7 @@ const taskBarStyle = computed(() => {
const startDate = createLocalDate(currentStartDate)
const endDate = createLocalDate(currentEndDate)
- const baseStart = createLocalDate(props.startDate)
+ const baseStart = parsedBaseStartDate.value
if (!startDate || !endDate || !baseStart) {
return {
left: '0px',
@@ -392,6 +411,24 @@ const taskBarStyle = computed(() => {
}
})
+// 缓存 TaskBar 的位置信息，减少 DOM 读取频率
+const cachedPosition = ref({
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0,
+ timestamp: 0,
+})
+
+// 位置缓存有效期（毫秒）
+const POSITION_CACHE_TTL = 100 // 100ms 内使用缓存值
+
+// 缓存解析后的结束日期，避免在 taskStatus 中重复解析
+const parsedEndDate = computed(() => createLocalDate(props.task.endDate || ''))
+
+// 缓存解析后的基准开始日期
+const parsedBaseStartDate = computed(() => createLocalDate(props.startDate))
+
// 计算任务状态和颜色
const taskStatus = computed(() => {
// 父级任务(Story类型)使用与新建按钮一致的配色
@@ -404,8 +441,9 @@ const taskStatus = computed(() => {
}
}
- const today = createLocalToday()
- const endDate = createLocalDate(props.task.endDate || '')
+ // 使用缓存的今天日期，避免频繁创建日期对象
+ const today = cachedToday.value
+ const endDate = parsedEndDate.value
const progress = props.task.progress || 0
// 已完成
@@ -556,6 +594,8 @@ const handleMouseDown = (e: MouseEvent, type: 'drag' | 'resize-left' | 'resize-r
const timelineContainer = document.querySelector('.timeline') as HTMLElement
if (!timelineContainer || !barRef.value) return
+ // 在 mousedown 事件中读取位置是合理的（不是高频操作）
+ // 这个值用于计算拖拽偏移量，只在开始拖拽时读取一次
const barRect = barRef.value.getBoundingClientRect()
// 计算鼠标相对于TaskBar的位置
@@ -595,17 +635,57 @@ const handleAutoScroll = (event: CustomEvent) => {
}
}
+// 使用缓存机制减少 DOM 读取频率，但保证位置准确性
+let reportPositionScheduled = false
+
function reportBarPosition() {
- if (barRef.value) {
+ // 如果已经安排了本帧的位置报告，则跳过
+ if (reportPositionScheduled) return
+
+ reportPositionScheduled = true
+
+ requestAnimationFrame(() => {
+ reportPositionScheduled = false
+
+ if (!barRef.value) return
+
+ const now = Date.now()
+
+ // 如果缓存未过期，使用缓存值
+ if (now - cachedPosition.value.timestamp < POSITION_CACHE_TTL) {
+ emit('bar-mounted', {
+ id: props.task.id,
+ left: cachedPosition.value.left,
+ top: cachedPosition.value.top,
+ width: cachedPosition.value.width,
+ height: cachedPosition.value.height,
+ })
+ return
+ }
+
+ // 缓存过期或首次调用，读取 DOM 并更新缓存
+ // TaskBar 传递绝对位置（相对于视口），Timeline 会将其转换为相对位置
const rect = barRef.value.getBoundingClientRect()
- emit('bar-mounted', {
- id: props.task.id,
+
+ // 计算并缓存位置
+ const position = {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height,
+ }
+
+ // 更新缓存
+ cachedPosition.value = {
+ ...position,
+ timestamp: now,
+ }
+
+ emit('bar-mounted', {
+ id: props.task.id,
+ ...position,
})
- }
+ })
}
// 拖拽时的实时日期提示框状态
@@ -1123,8 +1203,20 @@ const handleMouseUp = () => {
onMounted(() => {
nextTick(() => {
reportBarPosition()
+
+ // 使用 ResizeObserver 监听任务名称宽度变化
if (taskBarNameRef.value) {
- nameTextWidth.value = taskBarNameRef.value.getBoundingClientRect().width
+ const nameResizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ nameTextWidth.value = entry.contentRect.width
+ }
+ })
+ nameResizeObserver.observe(taskBarNameRef.value)
+
+ // 组件卸载时清理
+ onUnmounted(() => {
+ nameResizeObserver.disconnect()
+ })
}
})
@@ -1395,7 +1487,7 @@ const stickyStyles = computed(() => {
} else if (nameNeedsRightSticky) {
const offset = rightBoundary - taskLeft - nameWidth
// name 右侧磁吸时应始终保持与右边框固定距离，需要减去右侧手柄宽度
- nameLeft = `${offset - handleWidth - 3}px` // 考虑手柄宽度 + 间距
+ nameLeft = `${offset - handleWidth - 10}px` // 考虑手柄宽度 + 间距
namePosition = 'absolute'
nameTop = '2px'
}
@@ -1431,7 +1523,7 @@ const stickyStyles = computed(() => {
progressTop = '18px'
} else if (progressNeedsRightSticky) {
const offset = rightBoundary - taskLeft - progressWidth
- // progress 右侧磁吸时应始终保持与右边框固定距离，需要减去右侧手柄宽度
+ // 右侧磁吸时应始终保持与右边框固定距离，需要减去右侧手柄宽度
progressLeft = `${offset - handleWidth - 3}px` // 考虑手柄宽度 + 间距
progressPosition = 'absolute'
progressTop = '18px'
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
index 555f8bb..e19d978 100644
--- a/src/components/TaskList.vue
+++ b/src/components/TaskList.vue
@@ -36,6 +36,12 @@ const { t } = useI18n()
// TaskList 容器引用
const taskListRef = ref(null)
+// 缓存容器宽度，避免频繁读取 offsetWidth 导致强制重排
+const cachedContainerWidth = ref(0)
+
+// 使用 ResizeObserver 监听容器宽度变化
+let containerResizeObserver: ResizeObserver | null = null
+
// 获取列宽度样式（百分比转像素）
const getColumnWidthStyle = (column: { width?: number | string }) => {
if (!column.width) return {}
@@ -44,7 +50,7 @@ const getColumnWidthStyle = (column: { width?: number | string }) => {
// 如果是百分比，转换为像素
if (typeof column.width === 'string' && column.width.includes('%')) {
- const containerWidth = taskListRef.value?.offsetWidth || 0
+ const containerWidth = cachedContainerWidth.value || 0
if (containerWidth > 0) {
const percentage = parseFloat(column.width) / 100
const pixels = Math.floor(containerWidth * percentage)
@@ -89,6 +95,14 @@ const handleSplitterDragStart = () => {
// 处理拖拽结束事件
const handleSplitterDragEnd = () => {
isSplitterDragging.value = false
+
+ // ⚠️ 拖拽结束后，手动更新一次容器宽度，触发列宽重新计算
+ if (taskListRef.value) {
+ const newWidth = taskListRef.value.offsetWidth
+ if (Math.abs(newWidth - cachedContainerWidth.value) > 1) {
+ cachedContainerWidth.value = newWidth
+ }
+ }
}
// 处理任务行悬停事件
@@ -386,6 +400,23 @@ const handleTaskDelete = (task: Task, deleteChildren?: boolean) => {
}
onMounted(async () => {
+ // 初始化 ResizeObserver 监听容器宽度变化
+ if (taskListRef.value) {
+ containerResizeObserver = new ResizeObserver((entries) => {
+ // ⚠️ 拖拽期间跳过更新，避免高频重新计算列宽
+ // TaskList的列宽不需要在拖拽期间实时更新，只需在拖拽结束后更新一次
+ if (isSplitterDragging.value) {
+ return
+ }
+
+ for (const entry of entries) {
+ // 使用 contentRect.width 避免强制重排
+ cachedContainerWidth.value = entry.contentRect.width
+ }
+ })
+ containerResizeObserver.observe(taskListRef.value)
+ }
+
window.addEventListener('task-updated', handleTaskUpdated as EventListener)
window.addEventListener('task-added', handleTaskAdded as EventListener)
window.addEventListener('request-task-list', handleRequestTaskList as EventListener)
@@ -401,6 +432,12 @@ onMounted(async () => {
})
onUnmounted(() => {
+ // 清理 ResizeObserver
+ if (containerResizeObserver) {
+ containerResizeObserver.disconnect()
+ containerResizeObserver = null
+ }
+
window.removeEventListener('task-updated', handleTaskUpdated as EventListener)
window.removeEventListener('task-added', handleTaskAdded as EventListener)
window.removeEventListener('request-task-list', handleRequestTaskList as EventListener)
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 46f890c..a989e5c 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -627,6 +627,7 @@ let scrollTimeout: number | null = null
// 粘性效果所需的滚动位置信息
const timelineScrollLeft = ref(0)
const timelineContainerWidth = ref(0)
+const timelineScrollWidth = ref(0) // 缓存scrollWidth，避免在滚动事件中频繁读取造成强制重排
// 半圆气泡控制状态
const hideBubbles = ref(true) // 初始时隐藏半圆，等待初始滚动完成
@@ -643,6 +644,9 @@ const timelineDataCache = new Map()
// 初始化状态
const isInitialLoad = ref(true)
+// 节流的容器宽度（用于虚拟滚动范围计算，避免每次微小变化都触发）
+const throttledContainerWidth = ref(0)
+
// 计算小时视图的可视区域范围
const visibleHourRange = computed(() => {
if (currentTimeScale.value !== TimelineScale.HOUR) {
@@ -650,7 +654,7 @@ const visibleHourRange = computed(() => {
}
const scrollLeft = timelineScrollLeft.value
- const containerWidth = timelineContainerWidth.value
+ const containerWidth = throttledContainerWidth.value || timelineContainerWidth.value
// 首次加载时，使用更大的初始渲染范围
if (isInitialLoad.value && scrollLeft === 0) {
@@ -734,17 +738,25 @@ const optimizedTimelineData = computed(() => {
if (currentTimeScale.value === TimelineScale.HOUR && Array.isArray(cachedData)) {
const { startHour, endHour } = visibleHourRange.value
- return (cachedData as any[])
- .map((day: any) => {
- // 计算当前天相对于时间线开始的小时偏移
- const dayStart = new Date(timelineConfig.value.startDate)
- dayStart.setHours(0, 0, 0, 0)
- const currentDay = new Date(day.year, day.month - 1, day.day)
- currentDay.setHours(0, 0, 0, 0)
- const daysDiff = Math.floor(
- (currentDay.getTime() - dayStart.getTime()) / (1000 * 60 * 60 * 24),
- )
- const totalHourOffset = daysDiff * 24
+ // 🚀 性能优化：只处理可见范围内的天数，而不是遍历全部365天
+ const dayStart = new Date(timelineConfig.value.startDate)
+ dayStart.setHours(0, 0, 0, 0)
+
+ // 计算可见范围对应的起始和结束天数
+ const startDay = Math.floor(startHour / 24)
+ const endDay = Math.ceil(endHour / 24)
+
+ // 只处理可见天数范围 + 少量缓冲
+ const visibleDays = (cachedData as any[]).slice(
+ Math.max(0, startDay - 1),
+ Math.min(cachedData.length, endDay + 1),
+ )
+
+ return visibleDays
+ .map((day: any, index: number) => {
+ // 使用相对于切片起始的索引计算偏移
+ const actualDayIndex = Math.max(0, startDay - 1) + index
+ const totalHourOffset = actualDayIndex * 24
// 计算当前天应该显示的小时范围
const dayStartHour = Math.max(0, startHour - totalHourOffset)
@@ -763,6 +775,7 @@ const optimizedTimelineData = computed(() => {
dayStartHour,
dayEndHour,
visibleRange: { startHour, endHour },
+ actualDayIndex,
},
}
})
@@ -813,9 +826,18 @@ const totalTimelineWidth = computed(() => {
return 0
})
+// 使用 watch 同步计算出的时间轴宽度到 scrollWidth 缓存
+// 避免读取 DOM 的 scrollWidth 属性
+// 注意：不使用 immediate: true，避免在初始化时出现函数未定义的问题
+// 会在 onMounted 中手动初始化一次
+watch(totalTimelineWidth, (newWidth) => {
+ timelineScrollWidth.value = newWidth
+})
+
// 容器高度状态管理
const timelineBodyHeight = ref(0)
let resizeObserver: ResizeObserver | null = null
+let containerResizeObserver: ResizeObserver | null = null
// 里程碑位置信息管理（用于推挤效果）
const milestonePositions = ref<
@@ -940,21 +962,15 @@ const getOtherMilestonesInfo = (currentId: number) => {
// 处理拖拽开始事件
const handleSplitterDragStart = () => {
isSplitterDragging.value = true
+
+ // ⚠️ 拖拽期间暂停ResizeObserver，避免高频触发
+ // ResizeObserver已经在回调中检查isSplitterDragging，这里作为双重保护
}
// 处理拖拽结束事件
const handleSplitterDragEnd = () => {
isSplitterDragging.value = false
- // 拖拽结束后，手动触发一次容器宽度更新
- const timelineContainer = document.querySelector('.timeline') as HTMLElement
- if (timelineContainer) {
- const newWidth = timelineContainer.clientWidth
- if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
- timelineContainerWidth.value = newWidth
- }
- }
-
// Splitter拖拽结束后，强制重新计算半圆显示状态
// 因为Timeline容器宽度可能发生了变化
hideBubbles.value = true
@@ -966,7 +982,6 @@ const handleSplitterDragEnd = () => {
// 处理Timeline容器resize事件（如TaskList切换等）
const handleTimelineContainerResized = () => {
// Timeline容器大小发生变化，需要强制重新计算半圆显示状态
-
// 立即隐藏半圆，让TaskBar重新计算边界
hideBubbles.value = true
@@ -1061,7 +1076,7 @@ const handleMilestoneUpdate = (updatedMilestone: Milestone) => {
}
// 生成时间轴数据
-const generateTimelineData = (): any => {
+function generateTimelineData(): any {
// 使用缓存版本提升性能
return getCachedTimelineData()
}
@@ -1072,7 +1087,7 @@ const clearTimelineCache = () => {
}
// 生成日视图时间轴数据 (原有逻辑)
-const generateDayTimelineData = () => {
+function generateDayTimelineData() {
const months: unknown[] = []
const currentDate = new Date(timelineConfig.value.startDate)
@@ -1113,7 +1128,7 @@ const generateDayTimelineData = () => {
}
// 判断是否为工作时间
-const isWorkingHour = (hour: number, dayOfWeek: number) => {
+function isWorkingHour(hour: number, dayOfWeek: number) {
// 周末（周六=6，周日=0）直接返回false，保持周末样式
if (dayOfWeek === 0 || dayOfWeek === 6) {
return false
@@ -1142,7 +1157,7 @@ const isWorkingHour = (hour: number, dayOfWeek: number) => {
}
// 生成小时视图时间轴数据
-const generateHourTimelineData = () => {
+function generateHourTimelineData() {
const days: unknown[] = []
const currentDate = new Date(timelineConfig.value.startDate)
@@ -1184,7 +1199,7 @@ const generateHourTimelineData = () => {
}
// 生成周视图时间轴数据
-const generateWeekTimelineData = () => {
+function generateWeekTimelineData() {
const allWeeks: unknown[] = []
// 首先生成所有周
const startDate = new Date(timelineConfig.value.startDate)
@@ -1251,7 +1266,7 @@ const generateWeekTimelineData = () => {
}
// 生成一周内的7个子列（用于精确定位）
-const generateSubDaysForWeek = (weekStart: Date) => {
+function generateSubDaysForWeek(weekStart: Date) {
const subDays = []
for (let i = 0; i < 7; i++) {
const date = new Date(weekStart)
@@ -1265,7 +1280,7 @@ const generateSubDaysForWeek = (weekStart: Date) => {
}
// 判断周是否包含今天
-const isWeekContainsToday = (weekStart: Date, weekEnd: Date) => {
+function isWeekContainsToday(weekStart: Date, weekEnd: Date) {
const today = new Date()
today.setHours(0, 0, 0, 0)
return today >= weekStart && today <= weekEnd
@@ -1400,7 +1415,7 @@ const updateTimeScale = (scale: TimelineScale) => {
}
// 判断是否为今天
-const isToday = (date: Date) => {
+function isToday(date: Date) {
const today = new Date()
return (
date.getDate() === today.getDate() &&
@@ -1632,11 +1647,17 @@ const scrollToTodayCenter = (retry = 0) => {
todayPosition = daysDiff * dayWidth.value
}
- // 优先查找 .timeline-body 作为滚动容器，否则回退到 .timeline
- const scrollContainer = document.querySelector('.timeline') as HTMLElement
+ // 使用缓存的 timelineContainer 和 containerWidth，避免 querySelector 和 clientWidth 读取造成强制重排
+ if (!timelineContainer.value) {
+ // 容器未准备好，递归重试
+ if (retry < 10) {
+ setTimeout(() => scrollToTodayCenter(retry + 1), 60)
+ }
+ return
+ }
- const containerWidth = scrollContainer.clientWidth
- // 若宽度为0，递归重试，最多10次
+ const containerWidth = timelineContainerWidth.value
+ // 若宽度为0，说明 ResizeObserver 还未触发，递归重试，最多10次
if (containerWidth === 0 && retry < 10) {
setTimeout(() => scrollToTodayCenter(retry + 1), 60)
return
@@ -1644,10 +1665,10 @@ const scrollToTodayCenter = (retry = 0) => {
// 计算将今日列置于中间的滚动位置
const centeredScrollPosition = todayPosition - containerWidth / 2 + 15
- if (typeof scrollContainer.scrollTo === 'function') {
- scrollContainer.scrollTo({ left: Math.max(0, centeredScrollPosition), behavior: 'smooth' })
+ if (typeof timelineContainer.value.scrollTo === 'function') {
+ timelineContainer.value.scrollTo({ left: Math.max(0, centeredScrollPosition), behavior: 'smooth' })
} else {
- scrollContainer.scrollLeft = Math.max(0, centeredScrollPosition)
+ timelineContainer.value.scrollLeft = Math.max(0, centeredScrollPosition)
}
// 滚动结束后延迟显示半圆，并标记初始化完成
@@ -1772,15 +1793,13 @@ const scrollToTasks = () => {
}
totalDays += day
- // 计算滚动位置（每个日期30px宽度）
- const timelinePanel = document.querySelector('.gantt-panel-right')
- const timelinePanelW = timelinePanel?.clientWidth
- const scrollPosition = (totalDays - 1) * 30 - (timelinePanelW ? timelinePanelW / 2 : 200)
+ // 使用缓存的容器宽度，避免强制重排
+ const containerWidth = timelineContainerWidth.value || 400 // 默认值以防还未初始化
+ const scrollPosition = (totalDays - 1) * 30 - containerWidth / 2
- // 滚动到指定位置
- const timeline = document.querySelector('.timeline')
- if (timeline) {
- timeline.scrollLeft = Math.max(0, scrollPosition)
+ // 使用缓存的 timelineContainer，避免 querySelector
+ if (timelineContainer.value) {
+ timelineContainer.value.scrollLeft = Math.max(0, scrollPosition)
}
}
@@ -1809,17 +1828,16 @@ const scrollToToday = () => {
// 计算今天在时间线中的像素位置（每天30px宽度）
const todayPosition = daysDiff * 30
- // 获取时间线容器宽度
- const timeline = document.querySelector('.timeline') as HTMLElement
- if (!timeline) return
+ // 使用缓存的 timelineContainer 和 containerWidth，避免强制重排
+ if (!timelineContainer.value) return
- const containerWidth = timeline.clientWidth
+ const containerWidth = timelineContainerWidth.value
// 计算居中滚动位置
const centeredScrollPosition = todayPosition - containerWidth / 2 + 15
// 滚动到指定位置，确保今日列在中间
- timeline.scrollTo({
+ timelineContainer.value.scrollTo({
left: Math.max(0, centeredScrollPosition),
behavior: 'smooth',
})
@@ -1878,12 +1896,17 @@ const bodyContentRef = ref(null)
const svgWidth = ref(0)
const svgHeight = ref(0)
+// ResizeObserver 用于监听 bodyContent 宽度变化
+let bodyContentResizeObserver: ResizeObserver | null = null
+
+// 缓存 bodyContent 的位置，避免频繁调用 getBoundingClientRect
+const bodyContentPosition = ref({ left: 0, top: 0, timestamp: 0 })
+const BODY_POSITION_CACHE_TTL = 100 // 100ms 缓存有效期
+
function updateSvgSize() {
- if (bodyContentRef.value) {
- svgWidth.value = bodyContentRef.value.offsetWidth
- // 使用计算的内容高度，确保SVG覆盖所有任务行
- svgHeight.value = contentHeight.value
- }
+ // 宽度已经通过 ResizeObserver 自动更新，这里只需要更新高度
+ // 使用计算的内容高度，确保SVG覆盖所有任务行
+ svgHeight.value = contentHeight.value
}
function handleBarMounted(payload: {
@@ -1894,11 +1917,33 @@ function handleBarMounted(payload: {
height: number
}) {
if (!bodyContentRef.value) return
- const baseRect = bodyContentRef.value.getBoundingClientRect()
+
+ const now = Date.now()
+ let baseLeft = 0
+ let baseTop = 0
+
+ // 检查缓存是否有效
+ if (now - bodyContentPosition.value.timestamp < BODY_POSITION_CACHE_TTL) {
+ // 使用缓存的位置
+ baseLeft = bodyContentPosition.value.left
+ baseTop = bodyContentPosition.value.top
+ } else {
+ // 缓存过期，读取 DOM 并更新缓存
+ const baseRect = bodyContentRef.value.getBoundingClientRect()
+ baseLeft = baseRect.left
+ baseTop = baseRect.top
+
+ bodyContentPosition.value = {
+ left: baseLeft,
+ top: baseTop,
+ timestamp: now,
+ }
+ }
+
// 统一坐标系：以bodyContent为基准
taskBarPositions.value[payload.id] = {
- left: payload.left - baseRect.left,
- top: payload.top - baseRect.top,
+ left: payload.left - baseLeft,
+ top: payload.top - baseTop,
width: payload.width,
height: payload.height,
}
@@ -1930,8 +1975,8 @@ const handleScrollToPosition = (targetScrollLeft: number) => {
// 开始自动滚动时隐藏半圆
hideBubbles.value = true
- // 确保滚动位置在有效范围内
- const maxScrollLeft = timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
+ // 使用缓存的值避免强制重排
+ const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
const clampedScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))
// 平滑滚动到目标位置
@@ -2001,6 +2046,9 @@ const links = computed(() => {
})
onMounted(() => {
+ // 初始化 timelineScrollWidth
+ timelineScrollWidth.value = totalTimelineWidth.value
+
// 等待下一帧，确保DOM和数据都已渲染
nextTick(() => {
setTimeout(() => {
@@ -2041,8 +2089,7 @@ onMounted(() => {
const timelineBody = document.querySelector('.timeline-body') as HTMLElement
const timelineContainer = document.querySelector('.timeline') as HTMLElement
if (timelineBody) {
- timelineBodyHeight.value = timelineBody.clientHeight
-
+ // 使用ResizeObserver自动更新高度，避免直接读取clientHeight造成强制重排
resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
timelineBodyHeight.value = entry.contentRect.height
@@ -2054,31 +2101,39 @@ onMounted(() => {
// 初始化滚动位置信息，使用正确的滚动容器
if (timelineContainer) {
- timelineScrollLeft.value = timelineContainer.scrollLeft
- timelineContainerWidth.value = timelineContainer.clientWidth
+ // 使用ResizeObserver自动更新容器宽度，避免直接读取clientWidth造成强制重排
+ // scrollLeft在第一次scroll事件时会自动更新，这里不需要初始化
// 为容器宽度变化创建独立的ResizeObserver
- const containerResizeObserver = new ResizeObserver(entries => {
+ containerResizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const newWidth = entry.contentRect.width
- // 当容器宽度发生变化时，立即更新宽度并重新计算半圆显示
+
+ // 当容器宽度发生变化时，立即更新宽度
+ // ⚠️ 即使在拖拽期间也要更新，因为TaskBar需要实时响应containerWidth变化
if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
timelineContainerWidth.value = newWidth
- // 对于容器宽度变化，我们需要立即重新计算半圆状态
- // 短时间隐藏后重新显示，让TaskBar重新计算边界
- hideBubbles.value = true
+ // scrollWidth 会在下一次滚动事件中自动更新
+ // 不在这里读取，避免触发强制重排
- // 清除之前的定时器，避免多次触发冲突
- if (hideBubblesTimeout) {
- clearTimeout(hideBubblesTimeout)
+ // ⚠️ 拖拽期间不触发半圆隐藏/显示动画，避免闪烁
+ if (!isSplitterDragging.value) {
+ // 对于容器宽度变化，我们需要立即重新计算半圆状态
+ // 短时间隐藏后重新显示，让TaskBar重新计算边界
+ hideBubbles.value = true
+
+ // 清除之前的定时器，避免多次触发冲突
+ if (hideBubblesTimeout) {
+ clearTimeout(hideBubblesTimeout)
+ }
+
+ // 延迟恢复显示，确保宽度变化完全生效
+ hideBubblesTimeout = setTimeout(() => {
+ hideBubbles.value = false
+ hideBubblesTimeout = null
+ }, 300) // 增加到300ms，确保resize完全结束
}
-
- // 延迟恢复显示，确保宽度变化完全生效
- hideBubblesTimeout = setTimeout(() => {
- hideBubbles.value = false
- hideBubblesTimeout = null
- }, 300) // 增加到300ms，确保resize完全结束
}
}
})
@@ -2088,6 +2143,16 @@ onMounted(() => {
if (!resizeObserver) {
resizeObserver = containerResizeObserver
}
+
+ // 监听bodyContent宽度变化，避免在updateSvgSize中读取offsetWidth造成强制重排
+ if (bodyContentRef.value) {
+ bodyContentResizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ svgWidth.value = entry.contentRect.width
+ }
+ })
+ bodyContentResizeObserver.observe(bodyContentRef.value)
+ }
}
})
@@ -2284,14 +2349,15 @@ const handleTimelineScroll = (event: Event) => {
const target = event.target as HTMLElement
if (!target) return
+ // 使用缓存的值避免强制重排，只读取scrollLeft（这是滚动事件必需的）
const scrollLeft = target.scrollLeft
- const scrollWidth = target.scrollWidth
- const clientWidth = target.clientWidth
+ const scrollWidth = timelineScrollWidth.value
+ const clientWidth = timelineContainerWidth.value
const maxScroll = scrollWidth - clientWidth
// 立即更新关键滚动位置信息（用于虚拟滚动）
timelineScrollLeft.value = scrollLeft
- timelineContainerWidth.value = clientWidth
+ // timelineContainerWidth 已经通过ResizeObserver更新，这里不需要再次赋值
// 标记初始化完成（第一次滚动后）
if (isInitialLoad.value && scrollLeft > 0) {
@@ -2349,7 +2415,8 @@ const startAutoScroll = (direction: 'left' | 'right') => {
if (!timelineContainer.value || !isAutoScrolling.value) return
const currentScrollLeft = timelineContainer.value.scrollLeft
- const maxScrollLeft = timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
+ // 使用缓存的值避免强制重排
+ const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
let newScrollLeft
if (direction === 'left') {
@@ -2404,8 +2471,7 @@ const handleDragBoundaryCheck = (event: CustomEvent) => {
startAutoScroll('left')
} else if (
relativeX >= containerRect.width - EDGE_SCROLL_ZONE &&
- timelineContainer.value.scrollLeft <
- timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
+ timelineContainer.value.scrollLeft < timelineScrollWidth.value - timelineContainerWidth.value
) {
// 检查是否在右边界滚动区域
startAutoScroll('right')
@@ -2442,6 +2508,12 @@ onUnmounted(() => {
resizeObserver = null
}
+ // 清理bodyContentResizeObserver
+ if (bodyContentResizeObserver) {
+ bodyContentResizeObserver.disconnect()
+ bodyContentResizeObserver = null
+ }
+
// 清理window事件监听器
window.removeEventListener('resize', updateSvgSize)
@@ -2580,7 +2652,6 @@ watch(
(newWidth, oldWidth) => {
// ⚠️ 拖拽 splitter 时跳过重新计算，避免频繁生成 timelineData
if (isSplitterDragging.value) return
-
// 只在容器宽度从 0 变为有效值，或容器宽度发生显著变化时重新计算
if (!oldWidth || oldWidth === 0 || Math.abs(newWidth - oldWidth) > 50) {
if (newWidth > 0) {
@@ -2620,9 +2691,11 @@ watch(
{ immediate: true },
)
-// 监听timelineData或容器宽度变化，强制TaskBar重新渲染以更新关系线位置
-watch([timelineData, timelineContainerWidth], () => {
- // ⚠️ 拖拽 splitter 时跳过 TaskBar 重新渲染，避免频繁更新
+// ⚠️ 监听timelineData变化，强制TaskBar重新渲染以更新关系线位置
+// 注意：只监听timelineData，不监听timelineContainerWidth
+// 因为TaskBar会通过computed自动响应containerWidth变化，不需要强制重新渲染
+watch(timelineData, () => {
+ // 拖拽 splitter 时跳过 TaskBar 重新渲染
if (isSplitterDragging.value) return
// 清空位置信息
@@ -2658,38 +2731,27 @@ watch(
const handleMilestoneClickLocate = (event: CustomEvent) => {
const { scrollLeft, smooth } = event.detail
- // 获取Timeline容器 - 尝试两个可能的滚动容器
- const timelineMain = document.querySelector('.timeline') as HTMLElement
- const timelineBody = document.querySelector('.timeline-body') as HTMLElement
-
- // 选择有滚动能力的容器
- let scrollContainer: HTMLElement | null = null
- if (timelineMain && timelineMain.scrollWidth > timelineMain.clientWidth) {
- scrollContainer = timelineMain
- } else if (timelineBody && timelineBody.scrollWidth > timelineBody.clientWidth) {
- scrollContainer = timelineBody
- }
-
- if (scrollContainer) {
- // 确保滚动位置在有效范围内
- const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
+ // 使用缓存的timelineContainer，避免querySelector
+ if (timelineContainer.value) {
+ // 使用缓存的值避免强制重排
+ const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
const targetScrollLeft = Math.min(Math.max(0, scrollLeft), maxScrollLeft)
if (smooth) {
// 平滑滚动
- scrollContainer.scrollTo({
+ timelineContainer.value.scrollTo({
left: targetScrollLeft,
behavior: 'smooth',
})
} else {
// 立即滚动
- scrollContainer.scrollLeft = targetScrollLeft
+ timelineContainer.value.scrollLeft = targetScrollLeft
}
}
}
// 生成月度视图时间轴数据
-const generateMonthTimelineData = () => {
+function generateMonthTimelineData() {
// 根据时间刻度动态调整时间范围
let startDate: Date, endDate: Date
@@ -2820,7 +2882,7 @@ const generateMonthTimelineData = () => {
}
// 生成季度视图时间轴数据
-const generateQuarterTimelineData = () => {
+function generateQuarterTimelineData() {
// 使用从 GanttChart 传入的日期范围（已包含正确的 buffer 和容器填充逻辑）
const startDate = timelineConfig.value.startDate
const endDate = timelineConfig.value.endDate
@@ -2865,14 +2927,14 @@ const generateQuarterTimelineData = () => {
}
// 判断季度是否包含今天
-const isQuarterContainsToday = (startDate: Date, endDate: Date) => {
+function isQuarterContainsToday(startDate: Date, endDate: Date) {
const today = new Date()
today.setHours(0, 0, 0, 0)
return today >= startDate && today <= endDate
}
// 生成年度视图时间轴数据
-const generateYearTimelineData = () => {
+function generateYearTimelineData() {
// 使用从 GanttChart 传入的日期范围（已包含正确的 buffer 和容器填充逻辑）
const startDate = timelineConfig.value.startDate
const endDate = timelineConfig.value.endDate
@@ -3557,7 +3619,7 @@ const handleAddSuccessor = (task: Task) => {
:container-width="timelineContainerWidth"
:hide-bubbles="hideBubbles"
:timeline-data="
- currentTimeScale === TimelineScale.HOUR ? optimizedTimelineData : timelineData
+ currentTimeScale === TimelineScale.HOUR ? [] : timelineData
"
:current-time-scale="currentTimeScale"
:task-bar-config="props.taskBarConfig"