支持canvas links虚拟渲染，以支持超大宽度的视图（小时视图等）

src/components/GanttLinks.vue

@@ -23,6 +23,7 @@ interface Props {
   taskBarPositions: Record<number, TaskBarPosition>
   width: number
   height: number
+  offsetLeft?: number // Canvas 在全局坐标系中的偏移量（用于虚拟渲染）
   highlightedTaskId: number | null
   highlightedTaskIds: Set<number>
   hoveredTaskId: number | null
@@ -34,6 +35,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   verticalLines: () => [],
   showVerticalLines: true,
+  offsetLeft: 0,
 })
 
 // Canvas 引用
@@ -56,9 +58,6 @@ const drawLinks = () => {
   const canvas = canvasRef.value
   if (!canvas) return
 
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-
   // 适配高清屏（Retina）
   const dpr = window.devicePixelRatio || 1
   const rect = canvas.getBoundingClientRect()
@@ -66,11 +65,17 @@ const drawLinks = () => {
   // 设置实际像素尺寸
   canvas.width = rect.width * dpr
   canvas.height = rect.height * dpr
+  const ctx = canvas.getContext('2d', { alpha: true }) // 启用透明背景
+  if (!ctx) {
+    // eslint-disable-next-line no-console
+    console.error('❌ Canvas context 获取失败，可能是尺寸超限')
+    return
+  }
 
   // 缩放上下文以适配高清屏
   ctx.scale(dpr, dpr)
 
-  // 清空画布
+  // 清空画布（透明）
   ctx.clearRect(0, 0, rect.width, rect.height)
 
   // 绘制月份分隔线（在关系线之前，作为背景）
@@ -83,10 +88,15 @@ const drawLinks = () => {
     ctx.lineWidth = 1
 
     // 优化：一次性绘制所有垂直线，避免多次 stroke() 调用
+    // 虚拟渲染：减去偏移量，转换为 Canvas 局部坐标
     ctx.beginPath()
     for (const line of props.verticalLines) {
-      ctx.moveTo(line.left, 0)
-      ctx.lineTo(line.left, rect.height)
+      const localX = line.left - props.offsetLeft
+      // 只绘制在 Canvas 可见范围内的线
+      if (localX >= 0 && localX <= rect.width) {
+        ctx.moveTo(localX, 0)
+        ctx.lineTo(localX, rect.height)
+      }
     }
     ctx.stroke()
 
@@ -102,6 +112,10 @@ const drawLinks = () => {
   // 是否处于高亮模式
   const isHighlightMode = props.highlightedTaskId !== null
 
+  // 虚拟渲染：计算 Canvas 覆盖的范围
+  const canvasStartX = props.offsetLeft
+  const canvasEndX = props.offsetLeft + rect.width
+
   // 定义线条数据类型
   interface LineData {
     x1: number
@@ -122,16 +136,38 @@ const drawLinks = () => {
   const fadedLines: LineData[] = [] // 高亮模式下的普通线条（半透明）
 
   // 收集所有关系线数据并分组
+  let totalRelations = 0 // 总关系数
+  let culledRelations = 0 // 被裁剪的关系数
+  let drawnRelations = 0 // 实际绘制的关系数
+
   for (const task of props.tasks) {
     if (!task.predecessor || !props.taskBarPositions[task.id]) continue
 
     const predecessorIds = getPredecessorIds(task.predecessor)
 
     for (const predecessorId of predecessorIds) {
+      totalRelations++
+
       const fromBar = props.taskBarPositions[predecessorId]
       const toBar = props.taskBarPositions[task.id]
 
-      if (!fromBar || !toBar || !currentTaskIds.has(predecessorId)) continue
+      if (!fromBar || !toBar || !currentTaskIds.has(predecessorId)) {
+        culledRelations++
+        continue
+      }
+
+      // 虚拟渲染：跳过不在 Canvas 覆盖范围内的关系线
+      // 如果起点和终点都在 Canvas 外，跳过
+      const fromX = fromBar.left + fromBar.width
+      const toX = toBar.left
+      const lineMinX = Math.min(fromX, toX)
+      const lineMaxX = Math.max(fromX, toX)
+      if (lineMaxX < canvasStartX || lineMinX > canvasEndX) {
+        culledRelations++
+        continue // 完全在 Canvas 外，跳过
+      }
+
+      drawnRelations++
 
       // 判断高亮状态
       const fromIsPrimary = props.highlightedTaskId === predecessorId
@@ -149,11 +185,17 @@ const drawLinks = () => {
       const fromYOffset = fromIsPrimary ? -8 : fromIsHighlighted ? -5 : 0
       const toYOffset = toIsPrimary ? -8 : toIsHighlighted ? -5 : 0
 
-      // 计算坐标
-      const x1 = fromBar.left + fromBar.width
-      const y1 = fromBar.top + fromBar.height / 2 + fromYOffset
-      const x2 = toBar.left
-      const y2 = toBar.top + toBar.height / 2 + toYOffset
+      // 计算坐标（全局坐标）
+      const globalX1 = fromBar.left + fromBar.width
+      const globalY1 = fromBar.top + fromBar.height / 2 + fromYOffset
+      const globalX2 = toBar.left
+      const globalY2 = toBar.top + toBar.height / 2 + toYOffset
+
+      // 转换为 Canvas 局部坐标
+      const x1 = globalX1 - props.offsetLeft
+      const y1 = globalY1
+      const x2 = globalX2 - props.offsetLeft
+      const y2 = globalY2
 
       const c1x = x1 + 40
       const c1y = y1
@@ -329,6 +371,7 @@ watch(
     () => props.height,
     () => props.verticalLines,
     () => props.showVerticalLines,
+    () => props.offsetLeft, // 监听虚拟渲染的偏移量变化
   ],
   () => {
     // 使用 RAF 调度重绘，合并连续的多次变化为单次绘制
@@ -369,6 +412,7 @@ defineExpose({
       top: 0,
       width: `${width}px`,
       height: `${height}px`,
+      transform: `translateX(${offsetLeft}px)`,
       zIndex: highlightedTaskId !== null ? 1001 : 25,
       pointerEvents: 'none',
     }"
@@ -378,5 +422,7 @@ defineExpose({
 <style scoped>
 .gantt-links-canvas {
   display: block;
+  background: transparent; /* 确保背景透明 */
+  opacity: 1; /* 确保不透明度为 100% */
 }
 </style>

src/components/Timeline.vue

@@ -719,6 +719,11 @@ const debouncedUpdatePositions = debounce(() => {
   computeAllMilestonesPositions()
 }, 50)
 
+// 虚拟渲染：防抖更新 Canvas 位置（滚动时触发）
+const debouncedUpdateCanvasPosition = debounce(() => {
+  updateSvgSize() // 重新计算 Canvas 位置和尺寸
+}, 50)
+
 // 缓存时间轴数据的函数
 const getCachedTimelineData = (): unknown => {
   const scale = currentTimeScale.value
@@ -1932,15 +1937,46 @@ const svgHeight = ref(0)
 // Canvas 关系线尺寸（用于 GanttLinks 组件）
 const canvasWidth = ref(0)
 const canvasHeight = ref(0)
+const canvasOffsetLeft = ref(0) // Canvas 在全局坐标系中的偏移量
+
+// 虚拟渲染 Canvas 的安全宽度（防止超过浏览器限制）
+// 可根据实际需求调整：
+// - 5000: 最小内存 (~30MB)，适合低端设备，但滚动时更频繁更新
+// - 10000: 平衡选择 (~60MB)，覆盖小时视图 10 天，周视图 2 年
+const SAFE_CANVAS_WIDTH = 5000 // 平衡性能和覆盖范围
 
 function updateSvgSize() {
   if (bodyContentRef.value) {
-    svgWidth.value = bodyContentRef.value.offsetWidth
-    // 使用计算的内容高度，确保SVG覆盖所有任务行
-    svgHeight.value = contentHeight.value
+    // 获取 bodyContent 的总宽度和可视区域宽度
+    const totalWidth = bodyContentRef.value.offsetWidth
 
-    // 同步更新 Canvas 尺寸
-    canvasWidth.value = bodyContentRef.value.offsetWidth
+    // 使用已经维护的 timelineScrollLeft，而不是从 DOM 重新读取
+    // 因为 handleTimelineScroll 已经实时更新了这个值
+    const scrollLeft = timelineScrollLeft.value
+
+    // 虚拟渲染策略（统一模式）：
+    // Canvas 始终使用固定安全宽度，通过 offsetLeft 动态定位
+    canvasWidth.value = SAFE_CANVAS_WIDTH
+
+    // 计算 Canvas 覆盖的起始位置
+    // 策略：以当前滚动位置为基准，向左扩展 1/3，向右扩展 2/3
+    const bufferLeft = SAFE_CANVAS_WIDTH / 3
+    let idealOffsetLeft = Math.max(0, scrollLeft - bufferLeft)
+
+    // 确保 Canvas 不超出内容范围
+    // 1. 如果总宽度 <= Canvas 宽度，Canvas 从 0 开始
+    // 2. 如果总宽度 > Canvas 宽度，Canvas 不能超过右边界
+    if (totalWidth <= SAFE_CANVAS_WIDTH) {
+      idealOffsetLeft = 0
+    } else {
+      const maxOffsetLeft = totalWidth - SAFE_CANVAS_WIDTH
+      idealOffsetLeft = Math.min(idealOffsetLeft, maxOffsetLeft)
+    }
+
+    canvasOffsetLeft.value = idealOffsetLeft
+
+    svgWidth.value = canvasWidth.value
+    svgHeight.value = contentHeight.value
     canvasHeight.value = contentHeight.value
   }
 }
@@ -2373,6 +2409,9 @@ const handleTimelineScroll = (event: Event) => {
     isInitialLoad.value = false
   }
 
+  // 虚拟渲染：滚动时更新 Canvas 位置（防抖处理）
+  debouncedUpdateCanvasPosition()
+
   // 小时视图简化处理
   if (currentTimeScale.value === TimelineScale.HOUR) {
     isScrolling.value = true
@@ -3281,12 +3320,13 @@ const handleAddSuccessor = (task: Task) => {
     <!-- Timeline Body (Task Bar Area) -->
     <div class="timeline-body" @scroll="handleTimelineBodyScroll">
       <div ref="bodyContentRef" class="timeline-body-content">
-        <!-- 关系线组件（Canvas 渲染，性能提升 18 倍） -->
+        <!-- 关系线组件（Canvas 渲染，支持虚拟渲染） -->
         <GanttLinks
           :tasks="tasks"
           :task-bar-positions="taskBarPositions"
           :width="canvasWidth"
           :height="canvasHeight"
+          :offset-left="canvasOffsetLeft"
           :highlighted-task-id="highlightedTaskId"
           :highlighted-task-ids="highlightedTaskIds"
           :hovered-task-id="hoveredTaskId"