v1.4.2-patch.3 - 性能优化

Author: nelson820125

demo/data.json

@@ -31,7 +31,7 @@
               "id": 1101,
               "name": "试验方案设计与<span style='font-weight: bold;color:red;'>伦理审查</span>",
               "assignee": "方案设计师 李明",
-              "avatar": "https://i.pravatar.cc/150?img=1",
+              "avatar": "https://i.pravatar.cc/50?img=1",
               "startDate": "2025-01-01",
               "endDate": "2025-02-28",
               "progress": 100,
@@ -46,7 +46,7 @@
               "id": 1102,
               "name": "受试者招募与筛选",
               "assignee": "招募专员 张丽",
-              "avatar": "https://i.pravatar.cc/150?img=5",
+              "avatar": "https://i.pravatar.cc/50?img=5",
               "startDate": "2025-03-01",
               "endDate": "2025-04-30",
               "progress": 90,
@@ -62,7 +62,7 @@
               "id": 1103,
               "name": "药物给药与安全性监测",
               "assignee": "临床医生 Dr. Liu",
-              "avatar": "https://i.pravatar.cc/150?img=8",
+              "avatar": "https://i.pravatar.cc/50?img=8",
               "startDate": "2025-05-01",
               "endDate": "2025-08-31",
               "progress": 40,
@@ -95,7 +95,7 @@
               "id": 1201,
               "name": "多中心试验<span style='font-weight: bold; color: blue;'>启动</span>",
               "assignee": "项目经理 王芳",
-              "avatar": "https://i.pravatar.cc/150?img=10",
+              "avatar": "https://i.pravatar.cc/50?img=10",
               "startDate": "2025-09-01",
               "endDate": "2025-11-30",
               "progress": 25,
@@ -111,7 +111,7 @@
               "id": 1202,
               "name": "患者入组与随机化",
               "assignee": "数据管理员 陈静",
-              "avatar": "https://i.pravatar.cc/150?img=20",
+              "avatar": "https://i.pravatar.cc/50?img=20",
               "startDate": "2025-12-01",
               "endDate": "2026-03-31",
               "progress": 0,
@@ -127,7 +127,7 @@
               "id": 1203,
               "name": "疗效评估与数据收集",
               "assignee": "统计师 赵磊",
-              "avatar": "https://i.pravatar.cc/150?img=15",
+              "avatar": "https://i.pravatar.cc/50?img=15",
               "startDate": "2026-01-01",
               "endDate": "2026-08-31",
               "progress": 0,

src/components/GanttChart.vue

@@ -136,35 +136,45 @@ interface Props {
 const ganttRootRef = ref<HTMLElement | null>(null)
 const ganttContainerWidth = ref(1920) // 默认使用常见的屏幕宽度作为初始值
 
+// ResizeObserver 用于监听容器宽度变化
+let ganttRootResizeObserver: ResizeObserver | null = null
+
 // 监听容器宽度变化
-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()
+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
-      }
+    // 确保当前宽度在新的限制范围内
+    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,25 +341,41 @@ 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()
     ev.stopImmediatePropagation()
 
     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) {
       <div
         v-if="isTaskListVisible"
         class="gantt-panel gantt-panel-left"
+        :class="{ dragging: dragging }"
         :style="{ width: leftPanelWidth + 'px' }"
       >
         <TaskList
@@ -2317,6 +2342,12 @@ function handleMilestoneDialogDelete(milestoneId: number) {
 .gantt-panel-left {
   /* width 由js控制 */
   min-width: 320px;
+  /* ⚠️ 拖拽时禁用transition，提升响应速度 */
+  transition: none;
+}
+
+.gantt-panel-left:not(.dragging) {
+  /* 非拖拽时保留平滑过渡效果（如toggle时） */
   transition: width 0.1s;
 }
 

src/components/TaskBar.vue

@@ -119,6 +119,25 @@ const createLocalToday = (): Date => {
   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'