i#ICZHVS 增加task内容支持自定义渲染

demo/App.vue

@@ -8,6 +8,7 @@ import packageInfo from '../package.json'
 // 导入主题变量
 import '../src/styles/theme-variables.css'
 import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
+import HtmlContent from './HtmlContent.vue'
 import { useMessage } from '../src/composables/useMessage'
 import { useI18n } from '../src/composables/useI18n'
 import { getPredecessorIds, predecessorIdsToString } from '../src/utils/predecessorUtils'
@@ -666,7 +667,11 @@ function onTimerStopped(task: Task) {
         @task-deleted="e => showMessage(`Demo 任务[${e.task.name}] 已删除`, 'info')"
         @task-added="e => showMessage(`Demo 任务[${e.task.name}] 已创建`, 'info')"
         @task-updated="e => showMessage(`Demo 任务[${e.task.name}] 已更新`, 'info')"
-      />
+      >
+        <template #custom-task-content="{ task, type }">
+          <HtmlContent :task="task" :type="type" />
+        </template>
+      </GanttChart>
     </div>
     <div class="license-info">
       <p>MIT License @JORDIUM.COM</p>

demo/HtmlContent.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Task } from '../src/models/Task'
+
+interface Props {
+  task: Task,
+  type: 'task-row' | 'task-bar'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: '#409eff',
+  progress: 0,
+})
+console.error("props", props)
+function handleButtonClick() {
+  alert('hello')
+}
+</script>
+
+<template>
+  <div class="html-content-card" :style="{ borderColor: color }">
+    <div v-if="type==='task-row'" class="task-row" v-html="task.name" />
+    <div v-else-if="type==='task-bar'" class="task-bar" v-html="task.name" />
+  </div>
+</template>
+
+<style scoped>
+.html-content-card {
+  display: inline-block;
+}
+
+.task-row {
+  flex: 1;
+  padding: 0 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-bar {
+  flex: 1;
+  padding: 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn {
+  height: 20px;
+  margin-left: 20px;
+}
+</style>

demo/data.json

@@ -27,7 +27,7 @@
           "children": [
             {
               "id": 1101,
-              "name": "试验方案设计与伦理审查",
+              "name": "试验方案设计与<span style='font-weight: bold;color:red;'>伦理审查</span>",
               "assignee": "方案设计师 李明",
               "startDate": "2025-01-01",
               "endDate": "2025-02-28",
@@ -84,7 +84,7 @@
           "children": [
             {
               "id": 1201,
-              "name": "多中心试验启动",
+              "name": "多中心试验<span style='font-weight: bold; color: blue;'>启动</span>",
               "assignee": "项目经理 王芳",
               "startDate": "2025-09-01",
               "endDate": "2025-11-30",