支持配置左侧table 列显示

demo/App.vue

@@ -13,6 +13,7 @@ import { useMessage } from '../src/composables/useMessage'
 import { useI18n } from '../src/composables/useI18n'
 import { getPredecessorIds, predecessorIdsToString } from '../src/utils/predecessorUtils'
 import type { Task } from '../src/models/Task'
+import type { TaskListConfig, TaskListColumnConfig } from '../src/models/configs/TaskListConfig'
 
 const { showMessage } = useMessage()
 const { t, formatTranslation } = useI18n()
@@ -41,6 +42,36 @@ const toolbarConfig = {
   timeScaleDimensions: ['hour', 'day', 'week', 'month', 'quarter', 'year'], // 设置时间刻度按钮的展示维度，包含所有时间维度
 }
 
+// TaskList列配置
+const availableColumns = ref<TaskListColumnConfig[]>([
+  { key: 'predecessor', label: '前置任务', visible: true },
+  { key: 'assignee', label: '负责人', visible: true },
+  { 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 },
+])
+
+const taskListConfig = ref<TaskListConfig>({
+  columns: availableColumns.value,
+})
+
+// 切换列显示状态
+const toggleColumn = (columnKey: string, event: Event) => {
+  const target = event.target as HTMLInputElement
+  const visible = target?.checked ?? false
+
+  const column = availableColumns.value.find(col => col.key === columnKey)
+  if (column) {
+    column.visible = visible
+    // 更新taskListConfig以触发响应式更新
+    taskListConfig.value = {
+      columns: [...availableColumns.value],
+    }
+  }
+}
+
 // 工作时间配置示例
 const workingHoursConfig = {
   morning: { start: 8, end: 11 }, // 上午8:00-11:59为工作时间
@@ -632,11 +663,34 @@ function onTimerStopped(task: Task) {
       </div>
     </h1>
     <VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" />
+
+    <!-- TaskList列配置面板 -->
+    <div class="config-panel">
+      <h3 class="config-title">
+        <svg class="config-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 15l3-3H9l3 3z" fill="currentColor"/>
+          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"/>
+        </svg>
+        TaskList 列配置
+      </h3>
+      <div class="column-controls">
+        <label v-for="column in availableColumns" :key="column.key" class="column-control">
+          <input
+            type="checkbox"
+            :checked="column.visible"
+            @change="toggleColumn(column.key, $event)"
+          />
+          <span class="column-label">{{ column.label }}</span>
+        </label>
+      </div>
+    </div>
+
     <div class="gantt-wrapper">
       <GanttChart
         :tasks="tasks"
         :milestones="milestones"
         :toolbar-config="toolbarConfig"
+        :task-list-config="taskListConfig"
         :working-hours="workingHoursConfig"
         :on-add-task="handleAddTask"
         :on-add-milestone="handleAddMilestone"
@@ -700,6 +754,79 @@ function onTimerStopped(task: Task) {
   flex-direction: column;
 }
 
+/* TaskList列配置面板样式 */
+.config-panel {
+  background: var(--gantt-bg-primary, #ffffff);
+  border: 1px solid var(--gantt-border-color, #e4e7ed);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.config-panel:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.config-title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gantt-text-primary, #333);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--gantt-primary-color, #409eff);
+}
+
+.column-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.column-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  background: var(--gantt-bg-secondary, #f8f9fa);
+  border: 1px solid transparent;
+}
+
+.column-control:hover {
+  background: var(--gantt-hover-bg, #e8f4fd);
+  border-color: var(--gantt-primary-color, #409eff);
+}
+
+.column-control input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--gantt-primary-color, #409eff);
+}
+
+.column-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gantt-text-primary, #333);
+  user-select: none;
+  transition: color 0.2s ease;
+}
+
+.column-control:hover .column-label {
+  color: var(--gantt-primary-color, #409eff);
+}
+
 .page-title {
   margin: 20px 0;
   font-size: 1.8rem;
@@ -821,6 +948,32 @@ function onTimerStopped(task: Task) {
   color: #e5e5e5 !important;
 }
 
+/* 暗色主题下的配置面板样式 */
+:global(html[data-theme='dark']) .config-panel {
+  background: var(--gantt-bg-primary, #2d3748);
+  border-color: var(--gantt-border-color, #4a5568);
+}
+
+:global(html[data-theme='dark']) .config-title {
+  color: var(--gantt-text-primary, #e2e8f0);
+}
+
+:global(html[data-theme='dark']) .column-control {
+  background: var(--gantt-bg-secondary, #1a202c);
+}
+
+:global(html[data-theme='dark']) .column-control:hover {
+  background: var(--gantt-hover-bg, #2d3748);
+}
+
+:global(html[data-theme='dark']) .column-label {
+  color: var(--gantt-text-primary, #e2e8f0);
+}
+
+:global(html[data-theme='dark']) .column-control:hover .column-label {
+  color: var(--gantt-primary-color, #66b3ff);
+}
+
 /* 暗黑模式下的版本标签 */
 :global(html[data-theme='dark']) .version-badge {
   background: linear-gradient(135deg, #1a73e8 0%, #00bcd4 50%, #3f51b5 100%);