v1.8.0 - Add actual Taskbar component

2026-01-17 18:03:19 +08:00
parent 9fc10b2851
commit 90f0f5bc60
23 changed files with 1445 additions and 127 deletions
@@ -25,6 +25,9 @@ const { locale: demoLocale, messages: demoMessages, setLocale: setDemoLocale, fo
 // Tool Settings 多语言
 const ts = computed(() => demoMessages.value.toolSettings || {})

+// TaskBar Config 多语言
+const taskBarConfigMessages = computed(() => demoMessages.value.taskBarConfig || {})
+
 // GanttChart ref
 const gantt = ref<InstanceType<typeof import('../src/components/GanttChart.vue').default> | null>(null)

@@ -242,6 +245,13 @@ const taskBarOptions = ref({
  dragDelayTime: 150, // 拖拽延迟时间（毫秒）
 })

+// 自定义任务状态背景色
+const showActualTaskBar = ref(true)
+const pendingTaskBackgroundColor = ref('#409eff')
+const delayTaskBackgroundColor = ref('#f56c6c')
+const completeTaskBackgroundColor = ref('#909399')
+const ongoingTaskBackgroundColor = ref('#e6a23c')
+
 const taskBarConfig = computed<TaskBarConfig>(() => ({
  showAvatar: taskBarOptions.value.showAvatar,
  showTitle: taskBarOptions.value.showTitle,
@@ -1302,6 +1312,53 @@ const handleCustomMenuAction = (action: string, task: Task) => {
                      <input v-model="taskBarOptions.showProgress" type="checkbox" />
                      <span class="taskbar-label">{{ t.taskBarConfig.display.showProgress }}</span>
                    </label>
+                    <label class="taskbar-control">
+                      <input v-model="showActualTaskBar" type="checkbox" />
+                      <span class="taskbar-label">{{ taskBarConfigMessages.display?.showActualTaskBar }}</span>
+                    </label>
+                  </div>
+
+                  <!-- 自定义任务状态背景色 -->
+                  <div class="color-config-group">
+                    <h6 class="color-config-title">{{ taskBarConfigMessages.colorConfig?.title }}</h6>
+                    <div class="color-inputs-row">
+                      <div class="color-input-item">
+                        <label class="color-label">{{ taskBarConfigMessages.colorConfig?.pendingTask }}</label>
+                        <input
+                          v-model="pendingTaskBackgroundColor"
+                          type="text"
+                          class="color-input"
+                          placeholder="#409eff"
+                        />
+                      </div>
+                      <div class="color-input-item">
+                        <label class="color-label">{{ taskBarConfigMessages.colorConfig?.delayTask }}</label>
+                        <input
+                          v-model="delayTaskBackgroundColor"
+                          type="text"
+                          class="color-input"
+                          placeholder="#f56c6c"
+                        />
+                      </div>
+                      <div class="color-input-item">
+                        <label class="color-label">{{ taskBarConfigMessages.colorConfig?.completeTask }}</label>
+                        <input
+                          v-model="completeTaskBackgroundColor"
+                          type="text"
+                          class="color-input"
+                          placeholder="#909399"
+                        />
+                      </div>
+                      <div class="color-input-item">
+                        <label class="color-label">{{ taskBarConfigMessages.colorConfig?.ongoingTask }}</label>
+                        <input
+                          v-model="ongoingTaskBackgroundColor"
+                          type="text"
+                          class="color-input"
+                          placeholder="#e6a23c"
+                        />
+                      </div>
+                    </div>
                  </div>
                </div>

@@ -1324,11 +1381,11 @@ const handleCustomMenuAction = (action: string, task: Task) => {
                      <label class="taskbar-control">
                        <input v-model="enableTaskRowMove" type="checkbox" />
                        <span class="taskbar-label">
-                          启用TaskRow拖拽移动
+                          {{ taskBarConfigMessages.enableTaskRowMove?.label }}
                        </span>
                      </label>
                      <span class="control-hint">
-                        允许通过拖拽TaskRow来调整任务的层级和顺序
+                        {{ taskBarConfigMessages.enableTaskRowMove?.hint }}
                      </span>
                    </div>
                    <div class="control-row">
@@ -1819,12 +1876,16 @@ const handleCustomMenuAction = (action: string, task: Task) => {
        :allow-drag-and-resize="allowDragAndResize"
        :enable-task-row-move="enableTaskRowMove"
        :assignee-options="assigneeOptions"
-        :task-list-row-class-name="getTaskRowClassName"
-        :task-list-row-style="getTaskRowStyle"
        :on-export-csv="handleCustomCsvExport"
        :on-language-change="handleLanguageChange"
        :on-theme-change="handleThemeChange"
        :task-list-column-render-mode="taskListColumnRenderMode"
+        :show-actual-taskbar="showActualTaskBar"
+        :enable-task-bar-tooltip="true"
+        :pending-task-background-color="pendingTaskBackgroundColor"
+        :delay-task-background-color="delayTaskBackgroundColor"
+        :complete-task-background-color="completeTaskBackgroundColor"
+        :ongoing-task-background-color="ongoingTaskBackgroundColor"
        @milestone-saved="handleMilestoneSaved"
        @milestone-deleted="handleMilestoneDeleted"
        @milestone-icon-changed="handleMilestoneIconChanged"
@@ -2528,6 +2589,62 @@ const handleCustomMenuAction = (action: string, task: Task) => {
  color: var(--gantt-primary-color, #409eff);
 }

+/* 自定义颜色配置组 */
+.color-config-group {
+  margin-top: 16px;
+  padding: 12px;
+  background: var(--gantt-bg-tertiary, #fafafa);
+  border-radius: 8px;
+  border: 1px solid var(--gantt-border-color, #e4e7ed);
+}
+
+.color-config-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gantt-text-secondary, #606266);
+  margin: 0 0 12px 0;
+}
+
+.color-inputs-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: nowrap;
+}
+
+.color-input-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.color-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gantt-text-secondary, #606266);
+}
+
+.color-input {
+  padding: 6px 10px;
+  font-size: 13px;
+  border: 1px solid var(--gantt-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--gantt-bg-primary, #ffffff);
+  color: var(--gantt-text-primary, #333);
+  transition: all 0.2s ease;
+}
+
+.color-input:focus {
+  outline: none;
+  border-color: var(--gantt-primary-color, #409eff);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.color-input::placeholder {
+  color: var(--gantt-text-placeholder, #c0c4cc);
+}
+
 /* TaskBar 高级配置样式 */
 .taskbar-advanced-controls {
  display: flex;
@@ -27,21 +27,25 @@
          "description": "评估ADX-2024在健康志愿者和患者中的安全性、耐受性和药代动力学特征",
          "custom": "test11111",
          "priority": "高",
+          "barColor": "#7B3FF2",
          "children": [
            {
              "id": 1101,
              "name": "试验方案设计与<span style='font-weight: bold;color:red;'>伦理审查</span>",
              "assignee": "方案设计师 李明",
-              "avatar": "50-1.jpg",
+              "avatar": ["50-1.jpg", "50-2.jpg"],
              "startDate": "2025-01-01",
              "endDate": "2025-02-28",
+              "actualStartDate": "2025-01-03",
+              "actualEndDate": "2025-02-25",
              "progress": 100,
              "estimatedHours": 464,
              "actualHours": 480,
              "type": "task",
              "parentId": 1100,
              "description": "完成I期试验方案设计、伦理委员会审批及监管部门申报",
-              "custom": "test11111"
+              "custom": "test11111",
+              "barColor": "#2E7D6B"
            },
            {
              "id": 1102,
@@ -50,6 +54,8 @@
              "avatar": "50-2.jpg",
              "startDate": "2025-03-01",
              "endDate": "2025-04-30",
+              "actualStartDate": "2025-03-05",
+              "actualEndDate": "2025-04-28",
              "progress": 90,
              "estimatedHours": 1392.5,
              "actualHours": 1250.25,
@@ -57,15 +63,17 @@
              "predecessor": [1101],
              "parentId": 1100,
              "description": "招募24名健康志愿者，完成医学筛选和入组评估",
-              "custom": "test11111"
+              "custom": "test11111",
+              "barColor": "#FF4D4F"
            },
            {
              "id": 1103,
              "name": "药物给药与安全性监测",
              "assignee": "临床医生 Dr. Liu",
-              "avatar": "50-3.jpg",
+              "avatar": ["50-3.jpg", "50-2.jpg"],
              "startDate": "2025-05-01",
              "endDate": "2025-08-31",
+              "actualStartDate": "2025-05-10",
              "progress": 40,
              "estimatedHours": 3400,
              "actualHours": 1687,
@@ -73,7 +81,8 @@
              "predecessor": [1102],
              "parentId": 1100,
              "description": "按照剂量递增方案给药，密切监测不良反应和药代动力学参数",
-              "custom": "test11111"
+              "custom": "test11111",
+              "barColor": "#7B3FF2"
            }
          ],
          "collapsed": false
@@ -91,14 +100,16 @@
          "parentId": 1000,
          "description": "在目标患者群体中评估ADX-2024的初步疗效和进一步的安全性",
          "custom": "test11111",
+          "barColor": "#3F6DF6",
          "children": [
            {
              "id": 1201,
              "name": "多中心试验<span style='font-weight: bold; color: blue;'>启动</span>",
              "assignee": "项目经理 王芳",
-              "avatar": "50-10.jpg",
+              "avatar": ["50-10.jpg", "50-2.jpg"],
              "startDate": "2025-09-01",
              "endDate": "2025-11-30",
+              "actualStartDate": "2025-09-01",
              "progress": 25,
              "estimatedHours": 2160,
              "actualHours": 324,
@@ -106,13 +117,14 @@
              "predecessor": [1103],
              "parentId": 1200,
              "description": "启动5个临床中心，完成研究者培训和质量体系建立",
-              "custom": "test11111"
+              "custom": "test11111",
+              "barColor": "#3F6DF6"
            },
            {
              "id": 1202,
              "name": "患者入组与随机化",
              "assignee": "数据管理员 陈静",
-              "avatar": "50-6.jpg",
+              "avatar": ["50-6.jpg", "50-10.jpg"],
              "startDate": "2025-12-01",
              "endDate": "2026-03-31",
              "progress": 0,
@@ -138,7 +150,8 @@
              "predecessor": [1202],
              "parentId": 1200,
              "description": "定期评估患者疗效指标，收集安全性数据，进行中期分析",
-              "custom": "test11111"
+              "custom": "test11111",
+              "barColor": "#FFA43A"
            }
          ],
          "collapsed": false
@@ -111,5 +111,21 @@
        "false": "False"
      }
    }
+  },
+  "taskBarConfig": {
+    "display": {
+      "showActualTaskBar": "Show Actual TaskBar"
+    },
+    "colorConfig": {
+      "title": "Custom Task Status Background Colors",
+      "pendingTask": "Pending Task",
+      "delayTask": "Overdue Task",
+      "completeTask": "Completed Task",
+      "ongoingTask": "Ongoing Task"
+    },
+    "enableTaskRowMove": {
+      "label": "Enable TaskRow Drag and Drop",
+      "hint": "Allow dragging TaskRow to adjust task hierarchy and order"
+    }
  }
 }
@@ -111,5 +111,21 @@
        "false": "假"
      }
    }
+  },
+  "taskBarConfig": {
+    "display": {
+      "showActualTaskBar": "显示实际TaskBar"
+    },
+    "colorConfig": {
+      "title": "自定义任务状态背景色",
+      "pendingTask": "待处理任务",
+      "delayTask": "逾期任务",
+      "completeTask": "已完成任务",
+      "ongoingTask": "进行中任务"
+    },
+    "enableTaskRowMove": {
+      "label": "启用TaskRow拖拽移动",
+      "hint": "允许通过拖拽TaskRow来调整任务的层级和顺序"
+    }
  }
 }
@@ -27,11 +27,114 @@ interface LocaleMessages {
      task: string
    }
  }
+  taskBarConfig: {
+    display: {
+      showActualTaskBar: string
+    }
+    colorConfig: {
+      title: string
+      pendingTask: string
+      delayTask: string
+      completeTask: string
+      ongoingTask: string
+    }
+    enableTaskRowMove: {
+      label: string
+      hint: string
+    }
+  }
+  toolSettings: {
+    title: string
+    currentStatus: {
+      title: string
+      fullscreen: string
+      expandAll: string
+      locale: string
+      timeScale: string
+      theme: string
+      controlMode: string
+      active: string
+      inactive: string
+      expanded: string
+      collapsed: string
+    }
+    controlMode: {
+      title: string
+      expose: string
+      props: string
+      exposeHint: string
+      propsHint: string
+    }
+    exposeMethods: {
+      sectionTitle: string
+      fullscreen: {
+        title: string
+        enter: string
+        exit: string
+        toggle: string
+      }
+      expand: {
+        title: string
+        all: string
+        none: string
+        toggle: string
+      }
+      timeScale: {
+        title: string
+        hour: string
+        day: string
+        week: string
+        month: string
+        quarter: string
+        year: string
+        zoomIn: string
+        zoomOut: string
+      }
+      locale: {
+        title: string
+        zhCN: string
+        enUS: string
+      }
+      theme: {
+        title: string
+        light: string
+        dark: string
+      }
+      navigation: {
+        title: string
+        today: string
+        taskIdPlaceholder: string
+        go: string
+      }
+    }
+    propsControl: {
+      sectionTitle: string
+      locale: {
+        title: string
+      }
+      theme: {
+        title: string
+      }
+      timeScale: {
+        title: string
+      }
+      fullscreen: {
+        title: string
+        true: string
+        false: string
+      }
+      expandAll: {
+        title: string
+        true: string
+        false: string
+      }
+    }
+  }
 }

 const localeMessages: Record<LocaleKey, LocaleMessages> = {
-  'zh-CN': zhCN,
-  'en-US': enUS,
+  'zh-CN': zhCN as any,
+  'en-US': enUS as any,
 }

 const currentLocale = ref<LocaleKey>('zh-CN')
@@ -466,5 +466,31 @@
      "🎉 Added: New property in GanttChart - enableLinkAnchor to control the relationship line anchor points of Taskbar",
      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to YQ6494@gitee for their use and suggestions</span>"
    ]
+  },
+  {
+    "version": "1.8.0",
+    "date": "2026-01-17",
+    "notes": [
+      "🎉 新增：GanttChart允许展示实际Taskbar",
+      "🎉 新增：TaskDrawer增加实际开始日期和实际结束日期的属性",
+      "🎉 新增：TaskDrawer增加当前Task状态：待处理、进行中、已完成、已逾期",
+      "🎉 新增：GanttChart增加Taskbar不同状态下背景色预设属性pendingTaskBackgroundColor、delayTaskBackgroundColor、completeTaskBackgroundColor、ongoingTaskBackgroundColor",
+      "🎉 新增：Task对象增加barColor属性，允许自定义对应Taskbar的背景色，优先级高于GanttChart预设背景色",
+      "🎉 新增：Taskbar增加气泡提示框",
+      "🎉 新增：GanttChart增加showActualTaskbar属性用于控制是否展示实际Taskbar，默认值为false，需要时手动打开",
+      "🎉 新增：GanttChart增加enableTaskbarTooltip属性用于控制是否展示Taskbar的气泡提示框，默认值为true，需要时手动关闭",
+      "🎉 优化：Task对象assignee以及avatar属性允许接收数组，标记多为负责人",
+      "<span style=\"font-weight: bold; color: #f00;\">特别感谢 yunlbs/fhjfhj/jakepan@gitee的使用及建议</span>",
+      "🎉 Added: GanttChart allows displaying actual Taskbar",
+      "🎉 Added: TaskDrawer adds properties for actual start date and actual end date",
+      "🎉 Added: TaskDrawer adds current Task status: Pending, Ongoing, Completed, Overdue",
+      "🎉 Added: GanttChart adds preset background color properties for Taskbar in different statuses: pendingTaskBackgroundColor, delayTaskBackgroundColor, completeTaskBackgroundColor, ongoingTaskBackgroundColor",
+      "🎉 Added: Task object adds barColor property to allow customization of the corresponding Taskbar background color, with higher priority than GanttChart preset background colors",
+      "🎉 Added: Taskbar adds tooltip",
+      "🎉 Added: GanttChart adds showActualTaskbar property to control whether to show actual Taskbar",
+      "🎉 Added: GanttChart adds enableTaskbarTooltip property to control whether to show Taskbar tooltip",
+      "🎉 Optimized: The assignee and avatar properties of the Task object now accept arrays to mark multiple assignees",
+      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to yunlbs/fhjfhj/jakepan@gitee for their use and suggestions</span>"
+    ]
  }
 ]