v1.0.6 - TaskDrawer.Progressbar style update; story progress cal based on sub-tasks' progress;

CHANGELOG.md

@@ -5,6 +5,14 @@ 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.0.6] - 2025-07-03
+
+### Changed
+- 更新TaskDrawer组件的Progressbar样式
+- 可通过拖拽进度条和文本修改的方式更改任务的进度
+- Story进度根据子任务集进度改编重新计算
+- 同时保留Story进度单独的调整方式
+
 ## [1.0.5] - 2025-07-02
 
 ### Changed

demo/App.vue

@@ -113,14 +113,14 @@ const handleMilestoneDelete = async (milestoneId: number) => {
     window.dispatchEvent(
       new CustomEvent('milestone-deleted', {
         detail: { milestoneId },
-      })
+      }),
     )
 
     // 触发强制更新事件，确保Timeline重新渲染
     window.dispatchEvent(
       new CustomEvent('milestone-data-changed', {
         detail: { milestones: milestones.value },
-      })
+      }),
     )
   }
 
@@ -240,8 +240,6 @@ const handleTaskUpdate = (updatedTask: Task) => {
       showMessage(`就地更新失败，未找到任务，ID： ${updatedTask.id}`, 'warning', { closable: true })
     }
   }
-
-  showMessage('任务更新完成', 'success', { closable: false })
 }
 
 // 任务添加处理器
@@ -252,7 +250,7 @@ const handleTaskAdd = (newTask: Task) => {
     const maxId = Math.max(
       ...tasks.value.map(t => t.id || 0),
       ...milestones.value.map(m => m.id || 0),
-      0
+      0,
     )
     newTask.id = maxId + 1
   }
@@ -383,7 +381,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
       `开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
       `结束: ${oldTask.endDate} → ${newTask.endDate}`,
     'info',
-    { closable: true }
+    { closable: true },
   )
 }
 function handleMilestoneDragEnd(newMilestone) {
@@ -393,7 +391,7 @@ function handleMilestoneDragEnd(newMilestone) {
     `里程碑【${newMilestone.name}】\n` +
       `开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
     'info',
-    { closable: true }
+    { closable: true },
   )
 }
 

demo/version-history.json

@@ -105,5 +105,15 @@
     "version": "1.0.5",
     "date": "2025-07-02",
     "notes": ["更新README中所有NPM徽章CDN地址"]
+  },
+  {
+    "version": "1.0.6",
+    "date": "2025-07-03",
+    "notes": [
+      "更新TaskDrawer组件的Progressbar样式",
+      "可通过拖拽进度条和文本修改的方式更改任务的进度",
+      "Story进度根据子任务集进度改编重新计算",
+      "同时保留Story进度单独的调整方式"
+    ]
   }
 ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordium-gantt-vue3",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/jordium-gantt-vue3.cjs.js",
   "module": "dist/jordium-gantt-vue3.es.js",

packageDemo/App.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
+import GanttChart from '../src/components/GanttChart.vue'
+import TaskDrawer from '../src/components/TaskDrawer.vue'
+import MilestoneDialog from '../src/components/MilestoneDialog.vue'
 import demoData from './data.json'
 import packageInfo from '../package.json'
 // 导入主题变量
+import '../src/styles/theme-variables.css'
 import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
-import { GanttChart, TaskDrawer, MilestoneDialog, useMessage, Task } from 'jordium-gantt-vue3'
+import { useMessage } from '../src/composables/useMessage'
-import 'jordium-gantt-vue3/dist/jordium-gantt-vue3.css'
+import type { Task } from '../src/models/Task'
 
 const { showMessage } = useMessage()
 
@@ -236,8 +240,6 @@ const handleTaskUpdate = (updatedTask: Task) => {
       showMessage(`就地更新失败，未找到任务，ID： ${updatedTask.id}`, 'warning', { closable: true })
     }
   }
-
-  showMessage('任务更新完成', 'success', { closable: false })
 }
 
 // 任务添加处理器

packageDemo/data.json

@@ -20,7 +20,8 @@
           "progress": 100,
           "estimatedHours": 16,
           "actualHours": 15,
-          "type": "task"
+          "type": "task",
+          "parentId": 1
         },
         {
           "id": 3,
@@ -32,6 +33,7 @@
           "estimatedHours": 24,
           "actualHours": 28,
           "type": "story",
+          "parentId": 1,
           "children": [
             {
               "id": 4,
@@ -43,7 +45,8 @@
               "progress": 80,
               "estimatedHours": 8,
               "actualHours": 10,
-              "type": "task"
+              "type": "task",
+              "parentId": 3
             },
             {
               "id": 5,
@@ -55,7 +58,8 @@
               "progress": 0,
               "estimatedHours": 16,
               "actualHours": 0,
-              "type": "task"
+              "type": "task",
+              "parentId": 3
             }
           ],
           "collapsed": false
@@ -84,7 +88,8 @@
           "estimatedHours": 80,
           "actualHours": 35,
           "type": "task",
-          "predecessor": "5"
+          "predecessor": "5",
+          "parentId": 7
         },
         {
           "id": 11,
@@ -96,7 +101,8 @@
           "estimatedHours": 80,
           "actualHours": 0,
           "type": "task",
-          "predecessor": "5"
+          "predecessor": "5",
+          "parentId": 7
         },
         {
           "id": 12,
@@ -108,7 +114,8 @@
           "estimatedHours": 88,
           "actualHours": 0,
           "type": "task",
-          "predecessor": "5"
+          "predecessor": "5",
+          "parentId": 7
         }
       ],
       "collapsed": false
@@ -134,7 +141,8 @@
           "estimatedHours": 48,
           "actualHours": 0,
           "type": "task",
-          "predecessor": "7"
+          "predecessor": "7",
+          "parentId": 13
         },
         {
           "id": 15,
@@ -146,7 +154,8 @@
           "estimatedHours": 24,
           "actualHours": 0,
           "type": "task",
-          "predecessor": "7"
+          "predecessor": "7",
+          "parentId": 13
         }
       ],
       "collapsed": false

src/components/GanttChart.vue

@@ -902,13 +902,72 @@ const handleMilestoneSave = (milestone: Task) => {
 // 处理任务更新事件
 const handleTaskUpdate = (event: CustomEvent) => {
   const updatedTask = event.detail
-  if (props.onTaskUpdate && typeof props.onTaskUpdate === 'function') {
+
+  // 如果更新的是task类型且有parentId，需要同时更新对应的story进度
+  if (updatedTask.type === 'task' && updatedTask.parentId) {
+    const updatedStory = calculateStoryProgress(updatedTask.parentId, updatedTask)
+
+    // 先调用外部的任务更新处理器更新子任务
+    if (props.onTaskUpdate && typeof props.onTaskUpdate === 'function') {
+      props.onTaskUpdate(updatedTask)
+    }
+
+    // 如果story进度有变化，也更新story
+    if (updatedStory && props.onTaskUpdate && typeof props.onTaskUpdate === 'function') {
+      props.onTaskUpdate(updatedStory)
+    }
+  } else if (props.onTaskUpdate && typeof props.onTaskUpdate === 'function') {
+    // 普通任务更新
     props.onTaskUpdate(updatedTask)
   }
+
   // 关键：任务更新后强制刷新Timeline时间轴
   updateTaskTrigger.value++
 }
 
+// 计算story的进度（根据其下所有task的进度计算）
+const calculateStoryProgress = (storyId: number, updatedTask?: Task): Task | null => {
+  // 获取所有任务的扁平列表
+  const allTasks = [...(props.tasks || [])]
+  const flatTasks: Task[] = []
+
+  const flattenTasks = (tasks: Task[]) => {
+    tasks.forEach(task => {
+      flatTasks.push(task)
+      if (task.children && task.children.length > 0) {
+        flattenTasks(task.children)
+      }
+    })
+  }
+
+  flattenTasks(allTasks)
+
+  // 找到对应的story
+  const storyTask = flatTasks.find(task => task.id === storyId && task.type === 'story')
+  if (!storyTask) return null
+
+  // 获取该story下所有的task
+  let childTasks = flatTasks.filter(task => task.parentId === storyId && task.type === 'task')
+  if (childTasks.length === 0) return null
+
+  // 如果有正在更新的task，使用最新的数据替换旧数据
+  if (updatedTask && updatedTask.type === 'task' && updatedTask.parentId === storyId) {
+    childTasks = childTasks.map(task => (task.id === updatedTask.id ? updatedTask : task))
+  }
+
+  // 计算平均进度
+  const totalProgress = childTasks.reduce((sum, task) => sum + (task.progress || 0), 0)
+  const avgProgress = Math.round(totalProgress / childTasks.length)
+
+  // 如果进度有变化，返回更新后的story
+  if (storyTask.progress !== avgProgress) {
+    return { ...storyTask, progress: avgProgress }
+  }
+
+  // 进度没有变化，返回null
+  return null
+}
+
 // 处理任务添加事件
 const handleTaskAdd = (event: CustomEvent) => {
   const newTask = event.detail

src/components/MilestonePoint.vue

@@ -27,7 +27,19 @@ const dragStartLeft = ref(0)
 const tempMilestoneData = ref<{ startDate?: string } | null>(null)
 
 // 双击事件处理
-const handleDoubleClick = () => {
+const handleDoubleClick = (e: MouseEvent) => {
+  // 阻止事件冒泡和默认行为
+  e.preventDefault()
+  e.stopPropagation()
+
+  // 清理任何可能残留的拖拽状态
+  isDragging.value = false
+  tempMilestoneData.value = null
+
+  // 移除可能残留的事件监听器
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+
   if (props.milestone) {
     emit('milestone-double-click', props.milestone)
   } else {
@@ -57,10 +69,11 @@ const formatDateToLocalString = (date: Date): string => {
 
 // 拖拽事件处理
 const handleMouseDown = (e: MouseEvent) => {
+  // 如果正在双击过程中，不启动拖拽
   e.preventDefault()
   e.stopPropagation()
 
-  isDragging.value = true
+  // 设置拖拽状态，但不立即开始拖拽
   dragStartX.value = e.clientX
   dragStartLeft.value = parseInt(milestoneStyle.value.left)
   tempMilestoneData.value = null
@@ -71,8 +84,12 @@ const handleMouseDown = (e: MouseEvent) => {
 }
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (isDragging.value) {
+  const deltaX = e.clientX - dragStartX.value
-    const deltaX = e.clientX - dragStartX.value
+
+  // 只有在真正移动了一定距离后才开始拖拽（避免意外触发）
+  if (Math.abs(deltaX) > 3) {
+    isDragging.value = true
+
     const newLeft = Math.max(0, dragStartLeft.value + deltaX)
     const newStartDate = addDaysToLocalDate(props.startDate, newLeft / props.dayWidth)
 
@@ -84,17 +101,21 @@ const handleMouseMove = (e: MouseEvent) => {
 }
 
 const handleMouseUp = () => {
-  // 如果有临时数据，说明发生了拖拽，提交数据更新
+  // 只有在真正拖拽了（有临时数据）且状态为拖拽中时才触发更新
-  if (tempMilestoneData.value && props.milestone) {
+  if (isDragging.value && tempMilestoneData.value && props.milestone) {
     const updatedMilestone = {
       ...props.milestone,
       ...tempMilestoneData.value,
     }
     emit('update:milestone', updatedMilestone)
-    emit('drag-end', updatedMilestone) // 新增
+    emit('drag-end', updatedMilestone)
-    tempMilestoneData.value = null
   }
+
+  // 重置所有拖拽状态
   isDragging.value = false
+  tempMilestoneData.value = null
+
+  // 移除事件监听器
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
 }
@@ -144,6 +165,11 @@ const milestoneIcon = computed(() => {
 
 // 组件销毁时清理事件监听器
 onUnmounted(() => {
+  // 清理拖拽状态
+  isDragging.value = false
+  tempMilestoneData.value = null
+
+  // 移除事件监听器
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
 })

src/components/TaskBar.vue

@@ -306,11 +306,17 @@ watch(
 const handleTaskBarDoubleClick = (e: MouseEvent) => {
   // 阻止事件冒泡，避免触发拖拽等其他事件
   e.stopPropagation()
+  e.preventDefault()
 
-  // 如果正在拖拽或调整大小，不触发双击事件
+  // 清理任何可能残留的拖拽状态和临时数据
-  if (isDragging.value || isResizingLeft.value || isResizingRight.value) {
+  isDragging.value = false
-    return
+  isResizingLeft.value = false
-  }
+  isResizingRight.value = false
+  tempTaskData.value = null
+
+  // 移除可能残留的事件监听器
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
 
   // 优先调用外部传入的双击处理器
   if (props.onDoubleClick && typeof props.onDoubleClick === 'function') {

src/components/TaskDrawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from '../composables/useI18n'
+import { useMessage } from '../composables/useMessage'
 import DatePicker from './DatePicker.vue'
 import GanttConfirmDialog from './GanttConfirmDialog.vue'
 import type { Task } from '../models/classes/Task'
@@ -28,6 +29,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { showMessage } = useMessage()
 
 const submitting = ref(false)
 const isVisible = ref(props.visible)
@@ -55,7 +57,7 @@ const allTasks = ref<Task[]>([])
 // 获取可作为前置任务的任务列表（只包含type="task"的任务，且不包含当前任务）
 const availablePredecessorTasks = computed(() => {
   return allTasks.value.filter(
-    task => task.type === 'task' && task.id !== props.task?.id // 排除当前任务自己
+    task => task.type === 'task' && task.id !== props.task?.id, // 排除当前任务自己
   )
 })
 
@@ -65,7 +67,7 @@ const availableParentTasks = computed(() => {
     .filter(
       task =>
         task.id !== props.task?.id && // 排除当前任务自己
-        (task.type === 'story' || task.type === 'task') // 只显示story和task类型
+        (task.type === 'story' || task.type === 'task'), // 只显示story和task类型
     )
     .map(task => ({
       ...task,
@@ -191,7 +193,7 @@ watch(
       // 抽屉显示时重新请求任务数据，确保前置任务列表是最新的
       window.dispatchEvent(new CustomEvent('request-task-list'))
     }
-  }
+  },
 )
 
 // 监听 isVisible 变化，同步到父组件
@@ -278,8 +280,7 @@ const handleSubmit = async () => {
     showMessage(props.isEdit ? t.value.taskUpdateSuccess : t.value.taskCreateSuccess, 'success')
     handleClose()
   } catch (error) {
-    // 记录异常，保证 lint 通过
+    // 处理错误但不在控制台输出
-    console.error(error)
     showMessage(t.value.operationFailed, 'error')
   } finally {
     submitting.value = false
@@ -327,42 +328,13 @@ onUnmounted(() => {
   window.removeEventListener('task-list-updated', handleTasksChanged as EventListener)
 })
 
-// 简单的消息提示函数
-const showMessage = (message: string, type: 'success' | 'error') => {
-  // 创建消息元素
-  const messageEl = document.createElement('div')
-  messageEl.className = `message ${type}`
-  messageEl.textContent = message
-  messageEl.style.cssText = `
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 12px 20px;
-    border-radius: 4px;
-    color: white;
-    font-size: 14px;
-    z-index: 9999;
-    background: ${type === 'success' ? '#67c23a' : '#f56c6c'};
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  `
-
-  document.body.appendChild(messageEl)
-
-  // 3秒后自动移除
-  setTimeout(() => {
-    if (messageEl.parentNode) {
-      document.body.removeChild(messageEl)
-    }
-  }, 3000)
-}
-
 // 监听 formData.progress 变化，同步更新显示值
 watch(
   () => formData.progress,
   newValue => {
     progressDisplayValue.value = (newValue || 0).toString()
   },
-  { immediate: true }
+  { immediate: true },
 )
 </script>
 

src/composables/useMessage.ts

@@ -31,6 +31,10 @@ function getContainer() {
   return container
 }
 
+// 防重复消息队列，存储最近的消息内容和时间
+const recentMessages = new Map<string, number>()
+const DUPLICATE_THRESHOLD = 1000 // 1秒内相同消息视为重复
+
 export function useMessage() {
   /**
    * @param message 消息内容
@@ -38,12 +42,32 @@ export function useMessage() {
    * @param options 可选项：
    *   - duration: 自动关闭的毫秒数（默认3000，0表示不自动关闭）
    *   - closable: 是否显示关闭按钮（true=手动关闭，false=自动关闭）
+   *   - allowDuplicate: 是否允许重复消息（默认false）
    */
   const showMessage = (
     message: string,
     type: MessageType = 'success',
-    options?: { duration?: number; closable?: boolean },
+    options?: { duration?: number; closable?: boolean; allowDuplicate?: boolean },
   ) => {
+    // 防重复检查
+    const now = Date.now()
+    const messageKey = `${type}:${message}`
+    const lastTime = recentMessages.get(messageKey)
+
+    if (!options?.allowDuplicate && lastTime && now - lastTime < DUPLICATE_THRESHOLD) {
+      // 重复消息，忽略
+      return
+    }
+
+    // 记录消息时间
+    recentMessages.set(messageKey, now)
+
+    // 清理过期的消息记录
+    for (const [key, time] of recentMessages.entries()) {
+      if (now - time > DUPLICATE_THRESHOLD * 2) {
+        recentMessages.delete(key)
+      }
+    }
     const messageEl = document.createElement('div')
     messageEl.className = `message ${type}`
     messageEl.textContent = message