v1.0.10 - Bugfix: timeline scroll issue
This commit is contained in:
+21
-15
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user