调试

demo/App.vue

@@ -172,14 +172,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 },
-      }),
+      })
     )
   }
 
@@ -273,7 +273,7 @@ const handleTaskUpdate = (updatedTask: Task) => {
         showMessage(
           formatTranslation('newParentTaskNotFound', { parentId: taskToAdd.parentId }),
           'warning',
-          { closable: true },
+          { closable: true }
         )
         tasks.value.push(taskToAdd)
       }
@@ -321,7 +321,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
   }
@@ -416,7 +416,7 @@ const handleStoryDeleteWithChildren = (storyToDelete: Task) => {
           'success',
           {
             closable: false,
-          },
+          }
         )
         return true
       }
@@ -478,7 +478,7 @@ const handleStoryDeleteOnly = (storyToDelete: Task) => {
           'success',
           {
             closable: false,
-          },
+          }
         )
         return true
       }
@@ -552,7 +552,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
       `开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
       `结束: ${oldTask.endDate} → ${newTask.endDate}`,
     'info',
-    { closable: true },
+    { closable: true }
   )
 }
 function handleMilestoneDragEnd(newMilestone) {
@@ -562,7 +562,7 @@ function handleMilestoneDragEnd(newMilestone) {
     `里程碑【${newMilestone.name}】\n` +
       `开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
     'info',
-    { closable: true },
+    { closable: true }
   )
 }
 
@@ -629,7 +629,7 @@ function onTimerStarted(task: Task) {
   showMessage(
     `Demo 任务【${task.name}】\n开始计时：${new Date(task.timerStartTime).toLocaleString()}\n计时说明：${task.timerStartDesc ? task.timerStartDesc : ''}`,
     'info',
-    { closable: true },
+    { closable: true }
   )
 }
 function onTimerStopped(task: Task) {
@@ -643,6 +643,10 @@ function onTimerStopped(task: Task) {
   }
   showMessage(msg, 'info', { closable: true })
 }
+
+function taskDebug(item: any) {
+  console.log('Task Debug:', item)
+}
 </script>
 
 <template>
@@ -679,17 +683,33 @@ function onTimerStopped(task: Task) {
     <VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" />
 
     <!-- TaskList配置面板 - 可折叠 -->
-    <div class="config-panel" :class="{ 'collapsed': isConfigPanelCollapsed }">
+    <div class="config-panel" :class="{ collapsed: isConfigPanelCollapsed }">
       <div class="config-header" @click="toggleConfigPanel">
         <h3 class="config-title">
-          <svg class="config-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg
+            class="config-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor" />
           </svg>
           TaskList 配置
         </h3>
-        <button class="collapse-button" :class="{ 'collapsed': isConfigPanelCollapsed }">
+        <button class="collapse-button" :class="{ collapsed: isConfigPanelCollapsed }">
-          <svg class="collapse-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg
-            <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            class="collapse-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 10l5 5 5-5"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
       </div>
@@ -700,7 +720,12 @@ function onTimerStopped(task: Task) {
           <!-- 宽度配置区域 -->
           <div class="config-section">
             <h4 class="section-title">
-              <svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                class="section-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <rect
                   x="3"
                   y="6"
@@ -710,7 +735,12 @@ function onTimerStopped(task: Task) {
                   stroke-width="2"
                   fill="none"
                 />
-                <path d="M8 12h8M8 9l-2 3 2 3M16 9l2 3-2 3" stroke="currentColor" stroke-width="1.5" fill="none"/>
+                <path
+                  d="M8 12h8M8 9l-2 3 2 3M16 9l2 3-2 3"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  fill="none"
+                />
               </svg>
               宽度设置
             </h4>
@@ -757,7 +787,12 @@ function onTimerStopped(task: Task) {
           <!-- 列配置区域 -->
           <div class="config-section">
             <h4 class="section-title">
-              <svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                class="section-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor" />
               </svg>
               列显示
@@ -814,8 +849,8 @@ function onTimerStopped(task: Task) {
         @task-added="e => showMessage(`Demo 任务[${e.task.name}] 已创建`, 'info')"
         @task-updated="e => showMessage(`Demo 任务[${e.task.name}] 已更新`, 'info')"
       >
-        <template #custom-task-content="{ task, type }">
+        <template #custom-task-content="item">
-          <HtmlContent :task="task" :type="type" />
+          <HtmlContent :item="taskDebug(item)" :task="item.task" :type="item.type" />
         </template>
       </GanttChart>
     </div>
@@ -1038,7 +1073,7 @@ function onTimerStopped(task: Task) {
   border-color: var(--gantt-primary-color, #409eff);
 }
 
-.column-control input[type="checkbox"] {
+.column-control input[type='checkbox'] {
   width: 16px;
   height: 16px;
   cursor: pointer;

demo/HtmlContent.vue

@@ -3,7 +3,7 @@ import type { Task } from '../src/models/Task'
 
 interface Props {
   task: Task,
-  type: 'task-row' | 'task-bar'
+  type: string, // 'task-row' | 'task-bar'
 }
 const props = withDefaults(defineProps<Props>(), {
 })