v1.4.2-patch.2 - bugfix: tasklist列宽度设置问题

Author: nelson820125

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.2-patch2] - 2025-11-11
+
+### Fixed
+- 缺陷修复：TaskList配置列宽无效的问题修复
+- Defect fix: Fixed the issue of invalid column width configuration in TaskList
+
 ## [1.4.2-patch1] - 2025-11-03
 
 ### Fixed

demo/App.vue

@@ -48,13 +48,13 @@ const toolbarConfig = {
 // TaskList列配置
 const availableColumns = ref<TaskListColumnConfig[]>([
   { key: 'predecessor', label: '前置任务', visible: true },
-  { key: 'assignee', label: '负责人', visible: true },
+  { key: 'assignee', label: '负责人', visible: true, width: 250 },
   { key: 'startDate', label: '开始日期', visible: true },
   { key: 'endDate', label: '结束日期', visible: true },
   { key: 'estimatedHours', label: '预估工时', visible: true },
   { key: 'actualHours', label: '实际工时', visible: true },
   { key: 'progress', label: '进度', visible: true },
-  { key: 'custom', label: '自定义列', visible: true, width: 120 }, // 添加默认宽度120px
+  { key: 'custom', label: '自定义列', visible: true, width: '30%' }, // 添加默认宽度120px
 ])
 
 // TaskList宽度配置

demo/version-history.json

@@ -276,5 +276,15 @@
       "Defect fix: Fixed the issue of infinite loop calls when updating child tasks after updating the parent task",
       "<span style=\"font-weight: bold; color: #f00;\">Special thanks to Ky1in666@github for their valuable use and feedback</span>"
     ]
+  },
+  {
+    "version": "1.4.2-patch2",
+    "date": "2025-11-11",
+    "notes": [
+      "缺陷修复：TaskList配置列宽无效的问题修复",
+      "<span style=\"font-weight: bold; color: #f00;\">特别感谢 @SHENGLONG749的使用及反馈的宝贵意见</span>",
+      "Defect fix: Fixed the issue of invalid column width configuration in TaskList",
+      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @SHENGLONG749 for their valuable use and feedback</span>"
+    ]
   }
 ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordium-gantt-vue3",
-  "version": "1.4.2-pacth.1",
+  "version": "1.4.2-patch.2",
   "type": "module",
   "main": "dist/jordium-gantt-vue3.cjs.js",
   "module": "dist/jordium-gantt-vue3.es.js",

src/components/GanttChart.vue

@@ -299,22 +299,45 @@ function onMouseDown(e: MouseEvent) {
   taskListBodyProposedWidth.value = window.innerWidth * 0.8 - 6 // 减去splitter宽度
 
   // 获取左侧面板的最小宽度
-  taskListBodyWidthLimit.value = Math.min(taskListBodyProposedWidth.value, taskListBodyWidth.value)
+  taskListBodyWidthLimit.value = Math.min(taskListBodyProposedWidth.value,
+    taskListBodyWidthLimit.value)
 
   // 广播拖拽开始事件，通知其他组件暂停悬停效果
   window.dispatchEvent(new CustomEvent('splitter-drag-start'))
 
-  // 在拖拽期间禁用页面选择
+  // 在拖拽期间禁用页面选择和所有指针事件
   document.body.style.userSelect = 'none'
   document.body.style.webkitUserSelect = 'none'
   document.body.style.cursor = 'col-resize'
+  document.body.style.pointerEvents = 'none' // 禁止所有指针事件
+
+  // 全局事件拦截器：在捕获阶段拦截所有事件（除了 mousemove 和 mouseup）
+  const blockAllEvents = (ev: Event) => {
+    if (ev.type !== 'mousemove' && ev.type !== 'mouseup') {
+      ev.preventDefault()
+      ev.stopPropagation()
+      ev.stopImmediatePropagation()
+    }
+  }
+
+  // 在捕获阶段添加事件监听，确保最先拦截
+  document.addEventListener('mousedown', blockAllEvents, { capture: true })
+  document.addEventListener('click', blockAllEvents, { capture: true })
+  document.addEventListener('dblclick', blockAllEvents, { capture: true })
+  document.addEventListener('mouseover', blockAllEvents, { capture: true })
+  document.addEventListener('mouseout', blockAllEvents, { capture: true })
+  document.addEventListener('mouseenter', blockAllEvents, { capture: true })
+  document.addEventListener('mouseleave', blockAllEvents, { capture: true })
+  document.addEventListener('wheel', blockAllEvents, { capture: true, passive: false })
+  document.addEventListener('contextmenu', blockAllEvents, { capture: true })
 
   function onMouseMove(ev: MouseEvent) {
     if (!dragging.value) return
 
-    // 阻止默认行为，防止滚动等
+    // 强制阻止所有默认行为和事件传播
     ev.preventDefault()
     ev.stopPropagation()
+    ev.stopImmediatePropagation()
 
     const delta = ev.clientX - startX
     const proposedWidth = startWidth + delta
@@ -327,13 +350,25 @@ function onMouseDown(e: MouseEvent) {
   function onMouseUp() {
     dragging.value = false
 
+    // 移除全局事件拦截器
+    document.removeEventListener('mousedown', blockAllEvents, { capture: true })
+    document.removeEventListener('click', blockAllEvents, { capture: true })
+    document.removeEventListener('dblclick', blockAllEvents, { capture: true })
+    document.removeEventListener('mouseover', blockAllEvents, { capture: true })
+    document.removeEventListener('mouseout', blockAllEvents, { capture: true })
+    document.removeEventListener('mouseenter', blockAllEvents, { capture: true })
+    document.removeEventListener('mouseleave', blockAllEvents, { capture: true })
+    document.removeEventListener('wheel', blockAllEvents, { capture: true })
+    document.removeEventListener('contextmenu', blockAllEvents, { capture: true })
+
     // 广播拖拽结束事件，通知其他组件恢复悬停效果
     window.dispatchEvent(new CustomEvent('splitter-drag-end'))
 
-    // 恢复页面选择和光标
+    // 恢复页面选择、光标和指针事件
     document.body.style.userSelect = ''
     document.body.style.webkitUserSelect = ''
     document.body.style.cursor = ''
+    document.body.style.pointerEvents = ''
 
     taskListBodyWidth.value = getTaskListMaxWidth() // TaskList默认宽度
     ganttPanelLeftMinWidth.value = getTaskListMinWidth() // 左侧面板最小宽度

src/components/TaskBar.vue

@@ -1572,7 +1572,6 @@ watch(
     const safeNewContainerWidth = newContainerWidth || 0
     const safeOldScrollLeft = oldScrollLeft || 0
     const safeOldContainerWidth = oldContainerWidth || 0
-
     // 如果容器宽度发生变化（包括Splitter拖拽、TaskList展开收起、窗口resize等）
     if (Math.abs(safeNewContainerWidth - safeOldContainerWidth) > 1 && safeOldContainerWidth > 0) {
       hasManualResize.value = true
@@ -1583,6 +1582,13 @@ watch(
         // computed会自动重新计算
       })
 
+      // 🔥 容器宽度变化时，标记初始化完成（修复 splitter 拖拽后半圆不显示的问题）
+      if (isInitializing.value) {
+        setTimeout(() => {
+          isInitializing.value = false
+        }, 300)
+      }
+
       // 延长禁用动画的时间，确保各种resize操作稳定
       setTimeout(() => {
         hasManualResize.value = false
@@ -1622,6 +1628,7 @@ watch(
       }, 200)
     }
   },
+  { immediate: true },
 )
 
 // 监听外部hideBubbles属性变化，确保Timeline的容器变化能及时反应

src/components/TaskList.vue

@@ -33,6 +33,37 @@ const hasRowSlot = computed(() => Boolean(slots['custom-task-content']))
 // 多语言支持
 const { t } = useI18n()
 
+// TaskList 容器引用
+const taskListRef = ref<HTMLElement | null>(null)
+
+// 获取列宽度样式（百分比转像素）
+const getColumnWidthStyle = (column: { width?: number | string }) => {
+  if (!column.width) return {}
+
+  let widthPx: string
+
+  // 如果是百分比，转换为像素
+  if (typeof column.width === 'string' && column.width.includes('%')) {
+    const containerWidth = taskListRef.value?.offsetWidth || 0
+    if (containerWidth > 0) {
+      const percentage = parseFloat(column.width) / 100
+      const pixels = Math.floor(containerWidth * percentage)
+      widthPx = `${pixels}px`
+    } else {
+      return {} // 容器宽度未知时返回空
+    }
+  } else {
+    // 像素值
+    widthPx = `${column.width}px`
+  }
+
+  return {
+    flex: `0 0 ${widthPx}`,
+    minWidth: widthPx,
+    maxWidth: widthPx,
+  }
+}
+
 // 计算可见的列配置
 const visibleColumns = computed(() => {
   const columns = props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS
@@ -385,7 +416,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="task-list">
+  <div ref="taskListRef" class="task-list">
     <div class="task-list-header">
       <!-- 任务名称列，始终显示 -->
       <div class="col col-name">
@@ -397,13 +428,13 @@ onUnmounted(() => {
         :key="column.key"
         class="col"
         :class="column.cssClass || `col-${column.key}`"
-        :style="column.width ? { width: column.width + 'px' } : undefined"
+        :style="getColumnWidthStyle(column)"
       >
         {{ (t as any)[column.key] || column.label }}
       </div>
     </div>
     <div class="task-list-body" @scroll="handleTaskListScroll">
-      <TaskRow
+            <TaskRow
         v-for="task in localTasks"
         :key="task.id"
         :task="task"
@@ -412,6 +443,7 @@ onUnmounted(() => {
         :hovered-task-id="hoveredTaskId"
         :on-hover="handleTaskRowHover"
         :columns="visibleColumns"
+        :get-column-width-style="getColumnWidthStyle"
         @toggle="toggleCollapse"
         @dblclick="handleTaskRowDoubleClick"
         @contextmenu="handleTaskRowContextMenu"

src/components/TaskRow.vue

@@ -35,6 +35,7 @@ interface Props {
   hoveredTaskId?: number | null
   onHover?: (taskId: number | null) => void
   columns: TaskListColumnConfig[]
+  getColumnWidthStyle?: (column: { width?: number | string }) => object
 }
 const props = defineProps<Props>()
 const emit = defineEmits([
@@ -410,6 +411,7 @@ onUnmounted(() => {
         :key="column.key"
         class="col"
         :class="column.cssClass || `col-${column.key}`"
+        :style="getColumnWidthStyle ? getColumnWidthStyle(column) : {}"
       >
         <!-- 里程碑分组显示空列 -->
         <template v-if="isMilestoneGroup">
@@ -476,6 +478,7 @@ onUnmounted(() => {
         :hovered-task-id="props.hoveredTaskId"
         :on-hover="props.onHover"
         :columns="props.columns"
+        :get-column-width-style="props.getColumnWidthStyle"
         @toggle="emit('toggle', $event)"
         @dblclick="emit('dblclick', $event)"
         @start-timer="emit('start-timer', $event)"

src/components/Timeline.vue

@@ -631,6 +631,7 @@ const timelineContainerWidth = ref(0)
 // 半圆气泡控制状态
 const hideBubbles = ref(true) // 初始时隐藏半圆，等待初始滚动完成
 const isInitialScrolling = ref(true) // 跟踪初始滚动状态
+let hideBubblesTimeout: number | null = null // 半圆显示恢复定时器
 
 // 虚拟滚动相关状态
 const HOUR_WIDTH = 40 // 每小时40px
@@ -945,6 +946,15 @@ const handleSplitterDragStart = () => {
 const handleSplitterDragEnd = () => {
   isSplitterDragging.value = false
 
+  // 拖拽结束后，手动触发一次容器宽度更新
+  const timelineContainer = document.querySelector('.timeline') as HTMLElement
+  if (timelineContainer) {
+    const newWidth = timelineContainer.clientWidth
+    if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
+      timelineContainerWidth.value = newWidth
+    }
+  }
+
   // Splitter拖拽结束后，强制重新计算半圆显示状态
   // 因为Timeline容器宽度可能发生了变化
   hideBubbles.value = true
@@ -964,9 +974,15 @@ const handleTimelineContainerResized = () => {
   taskBarPositions.value = {}
   taskBarRenderKey.value++
 
+  // 清除之前的定时器，避免多次触发冲突
+  if (hideBubblesTimeout) {
+    clearTimeout(hideBubblesTimeout)
+  }
+
   // 延迟恢复显示，确保容器变化完全生效
-  setTimeout(() => {
+  hideBubblesTimeout = setTimeout(() => {
     hideBubbles.value = false
+    hideBubblesTimeout = null
     // 再次更新SVG尺寸，确保关系线容器大小正确
     updateSvgSize()
   }, 300)
@@ -2053,9 +2069,15 @@ onMounted(() => {
             // 短时间隐藏后重新显示，让TaskBar重新计算边界
             hideBubbles.value = true
 
+            // 清除之前的定时器，避免多次触发冲突
+            if (hideBubblesTimeout) {
+              clearTimeout(hideBubblesTimeout)
+            }
+
             // 延迟恢复显示，确保宽度变化完全生效
-            setTimeout(() => {
+            hideBubblesTimeout = setTimeout(() => {
               hideBubbles.value = false
+              hideBubblesTimeout = null
             }, 300) // 增加到300ms，确保resize完全结束
           }
         }
@@ -2546,12 +2568,19 @@ watch(
 )
 
 // 监听滚动变化，重新计算里程碑位置
-watch([timelineScrollLeft, timelineContainerWidth], computeAllMilestonesPositions)
+watch([timelineScrollLeft, timelineContainerWidth], () => {
+  // 拖拽 splitter 时跳过计算
+  if (isSplitterDragging.value) return
+  computeAllMilestonesPositions()
+})
 
 // 监听容器宽度变化，重新计算时间线范围以填充容器
 watch(
   timelineContainerWidth,
   (newWidth, oldWidth) => {
+    // ⚠️ 拖拽 splitter 时跳过重新计算，避免频繁生成 timelineData
+    if (isSplitterDragging.value) return
+
     // 只在容器宽度从 0 变为有效值，或容器宽度发生显著变化时重新计算
     if (!oldWidth || oldWidth === 0 || Math.abs(newWidth - oldWidth) > 50) {
       if (newWidth > 0) {
@@ -2593,6 +2622,9 @@ watch(
 
 // 监听timelineData或容器宽度变化，强制TaskBar重新渲染以更新关系线位置
 watch([timelineData, timelineContainerWidth], () => {
+  // ⚠️ 拖拽 splitter 时跳过 TaskBar 重新渲染，避免频繁更新
+  if (isSplitterDragging.value) return
+
   // 清空位置信息
   taskBarPositions.value = {}
   // 更新渲染key强制TaskBar重新渲染

src/models/configs/TaskListConfig.ts

@@ -15,7 +15,7 @@ export interface TaskListColumnConfig {
   key: string // 用于国际化的key，也可以作为识别符
   label?: string // 显示标签
   cssClass?: string // CSS类名
-  width?: number // 可选的列宽度
+  width?: number | string // 列宽度，支持像素（120）或百分比（'15%'）
   visible?: boolean // 是否显示，默认true
 }