v1.0.10 - Bugfix: timeline scroll issue

This commit is contained in:
LINING-PC\lining
2025-07-06 11:33:41 +08:00
parent af4a35254f
commit 11ee864d36
+21 -15
View File
@@ -864,8 +864,7 @@ onMounted(() => {
updateSvgSize() updateSvgSize()
}, 200) }, 200)
window.addEventListener('resize', updateSvgSize) window.addEventListener('resize', updateSvgSize)
// 监听时间轴滚动事件 // 注意:Timeline滚动事件已在模板中通过@scroll="handleTimelineScroll"绑定,无需重复监听
window.addEventListener('scroll', handleTimelineScroll as EventListener)
}) })
// 处理TaskList垂直滚动同步 // 处理TaskList垂直滚动同步
@@ -878,6 +877,23 @@ const handleTaskListVerticalScroll = (event: CustomEvent) => {
} }
} }
// 处理Timeline body的垂直滚动同步
const handleTimelineBodyScroll = (event: Event) => {
const target = event.target as HTMLElement
if (!target) return
const scrollTop = target.scrollTop
// 同步垂直滚动到TaskList
if (scrollTop >= 0) {
window.dispatchEvent(
new CustomEvent('timeline-vertical-scroll', {
detail: { scrollTop },
}),
)
}
}
// 监听任务数量变化,更新SVG尺寸 // 监听任务数量变化,更新SVG尺寸
watch( watch(
() => tasks.value.length, () => tasks.value.length,
@@ -973,13 +989,12 @@ const handleMouseUp = () => {
document.removeEventListener('mouseup', handleMouseUp) document.removeEventListener('mouseup', handleMouseUp)
} }
// 检测滚动状态 // 检测滚动状态(主要处理水平滚动)
const handleTimelineScroll = (event: Event) => { const handleTimelineScroll = (event: Event) => {
const target = event.target as HTMLElement const target = event.target as HTMLElement
if (!target) return if (!target) return
const scrollLeft = target.scrollLeft const scrollLeft = target.scrollLeft
const scrollTop = target.scrollTop
const scrollWidth = target.scrollWidth const scrollWidth = target.scrollWidth
const clientWidth = target.clientWidth const clientWidth = target.clientWidth
const maxScroll = scrollWidth - clientWidth const maxScroll = scrollWidth - clientWidth
@@ -998,15 +1013,6 @@ const handleTimelineScroll = (event: Event) => {
isScrolledLeft.value = scrollLeft > 20 // 距离左边超过20px isScrolledLeft.value = scrollLeft > 20 // 距离左边超过20px
isScrolledRight.value = scrollLeft < maxScroll - 20 // 距离右边超过20px isScrolledRight.value = scrollLeft < maxScroll - 20 // 距离右边超过20px
// 同步垂直滚动到TaskList
if (scrollTop >= 0) {
window.dispatchEvent(
new CustomEvent('timeline-vertical-scroll', {
detail: { scrollTop },
}),
)
}
// 设置滚动状态 // 设置滚动状态
isScrolling.value = true isScrolling.value = true
if (target && 'classList' in target && typeof target.classList.add === 'function') { if (target && 'classList' in target && typeof target.classList.add === 'function') {
@@ -1047,7 +1053,7 @@ onUnmounted(() => {
) )
window.removeEventListener('milestone-click-locate', handleMilestoneClickLocate as EventListener) window.removeEventListener('milestone-click-locate', handleMilestoneClickLocate as EventListener)
window.removeEventListener('resize', updateSvgSize) window.removeEventListener('resize', updateSvgSize)
window.removeEventListener('scroll', handleTimelineScroll as EventListener) // 注意:Timeline滚动事件通过模板@scroll绑定,会自动清理
// 清理ResizeObserver // 清理ResizeObserver
if (resizeObserver) { if (resizeObserver) {
@@ -1207,7 +1213,7 @@ const handleMilestoneClickLocate = (event: CustomEvent) => {
</div> </div>
<!-- Timeline Body (Task Bar Area) --> <!-- Timeline Body (Task Bar Area) -->
<div class="timeline-body"> <div class="timeline-body" @scroll="handleTimelineBodyScroll">
<div ref="bodyContentRef" class="timeline-body-content"> <div ref="bodyContentRef" class="timeline-body-content">
<!-- SVG关系线层 --> <!-- SVG关系线层 -->
<svg <svg