From e8d3bb77c612fb10c6624175856fe02e2f6de4e4 Mon Sep 17 00:00:00 2001
From: qiuchengw <qiuchengw@163.com>
Date: Wed, 12 Nov 2025 08:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=91=A8=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=9C=88=E5=BC=80=E5=A7=8B=E5=88=86=E9=9A=94=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BD=BF=E7=94=A8canvas=E6=9B=BF=E4=BB=A3dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GanttLinks.vue | 41 +++++++++++++++++++++++++++++++++--
 src/components/Timeline.vue   | 29 ++-----------------------
 2 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/components/GanttLinks.vue b/src/components/GanttLinks.vue
index 2dd639f..fa99e48 100644
--- a/src/components/GanttLinks.vue
+++ b/src/components/GanttLinks.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted } from 'vue'
+import { ref, watch, nextTick, onMounted, computed } from 'vue'
 import type { Task } from '../models/classes/Task'
 import { getPredecessorIds } from '../utils/predecessorUtils'
 
@@ -11,6 +11,12 @@ interface TaskBarPosition {
   height: number
 }
 
+// 定义月份分隔线位置类型
+interface VerticalLine {
+  left: number
+  label?: string
+}
+
 // 定义 Props
 interface Props {
   tasks: Task[]
@@ -20,13 +26,24 @@ interface Props {
   highlightedTaskId: number | null
   highlightedTaskIds: Set<number>
   hoveredTaskId: number | null
+  // 月份分隔线配置
+  verticalLines?: VerticalLine[]
+  showVerticalLines?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  verticalLines: () => [],
+  showVerticalLines: true,
+})
 
 // Canvas 引用
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 
+// 当前主题（用于分隔线颜色）
+const isDarkTheme = computed(() => {
+  return document.documentElement.getAttribute('data-theme') === 'dark'
+})
+
 /**
  * 绘制关系线到 Canvas
  * 性能优势：相比 SVG 提升 18 倍渲染性能
@@ -52,6 +69,26 @@ const drawLinks = () => {
   // 清空画布
   ctx.clearRect(0, 0, rect.width, rect.height)
 
+  // 绘制月份分隔线（在关系线之前，作为背景）
+  if (props.showVerticalLines && props.verticalLines && props.verticalLines.length > 0) {
+    ctx.save()
+
+    // 使用与旗帜一致的主题色：浅色模式 #409eff，暗色模式 #66b1ff
+    const lineColor = isDarkTheme.value ? '#66b1ff' : '#409eff'
+    ctx.strokeStyle = lineColor
+    ctx.lineWidth = 1
+
+    // 绘制每条垂直线
+    for (const line of props.verticalLines) {
+      ctx.beginPath()
+      ctx.moveTo(line.left, 0)
+      ctx.lineTo(line.left, rect.height)
+      ctx.stroke()
+    }
+
+    ctx.restore()
+  }
+
   // 获取当前渲染的任务ID集合
   const currentTaskIds = new Set<number>()
   for (const task of props.tasks) {
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 5a04473..66f6f52 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -3283,6 +3283,8 @@ const handleAddSuccessor = (task: Task) => {
           :highlighted-task-id="highlightedTaskId"
           :highlighted-task-ids="highlightedTaskIds"
           :hovered-task-id="hoveredTaskId"
+          :vertical-lines="monthFirstVerticalLines"
+          :show-vertical-lines="currentTimeScale === TimelineScale.WEEK"
         />
 
         <!-- 年度视图今日标记线 -->
@@ -3295,17 +3297,6 @@ const handleAddSuccessor = (task: Task) => {
           }"
         ></div>
 
-        <!-- 月份1号竖直线（周视图） - 优化：使用预计算的位置数组 -->
-        <div
-          v-for="(line, index) in monthFirstVerticalLines"
-          :key="`vline-${index}`"
-          class="month-first-vertical-line"
-          :style="{
-            left: `${line.left}px`,
-            height: `${contentHeight}px`,
-          }"
-        ></div>
-
         <!-- 背景列 -->
         <div class="day-columns" :style="{ height: `${contentHeight}px` }">
           <!-- 小时视图背景列 -->
@@ -3874,22 +3865,6 @@ const handleAddSuccessor = (task: Task) => {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-/* 月份1号竖直线样式 */
-.month-first-vertical-line {
-  position: absolute;
-  top: 0;
-  width: 1px;
-  background-color: var(--gantt-primary, #409eff);
-  opacity: 0.6;
-  z-index: 5;
-  pointer-events: none;
-}
-
-/* 暗色主题下的竖直线 */
-:global(html[data-theme='dark']) .month-first-vertical-line {
-  background-color: var(--gantt-primary-light, #66b1ff);
-}
-
 /* 周视图背景列样式 */
 .month-week-columns {
   display: flex;