fix：修复列配置后左侧table无法对齐列的问题

demo/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, computed, 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'
@@ -39,7 +39,8 @@ const toolbarConfig = {
   showTheme: true,
   showFullscreen: true,
   showTimeScale: true, // 控制日|周|月时间刻度按钮组的可见性
-  timeScaleDimensions: ['hour', 'day', 'week', 'month', 'quarter', 'year'], // 设置时间刻度按钮的展示维度，包含所有时间维度
+  timeScaleDimensions: ['week', 'month', 'quarter', 'year'], // 设置时间刻度按钮的展示维度，包含所有时间维度
+  defaultTimeScale: 'week',
 }
 
 // TaskList列配置
@@ -53,9 +54,9 @@ const availableColumns = ref<TaskListColumnConfig[]>([
   { key: 'progress', label: '进度', visible: true },
 ])
 
-const taskListConfig = ref<TaskListConfig>({
+const taskListConfig = computed<TaskListConfig>(() => ({
   columns: availableColumns.value,
-})
+}))
 
 // 切换列显示状态
 const toggleColumn = (columnKey: string, event: Event) => {
@@ -65,14 +66,8 @@ const toggleColumn = (columnKey: string, event: Event) => {
   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为工作时间
   afternoon: { start: 13, end: 17 }, // 下午13:00-17:00为工作时间

src/components/TaskList.vue

@@ -39,13 +39,9 @@ const { t } = useI18n()
 // 计算可见的列配置
 const visibleColumns = computed(() => {
   const columns = props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS
-  const showAllColumns = props.taskListConfig?.showAllColumns ?? true
 
-  if (!showAllColumns) {
+  // 过滤出可见的列（visible !== false）
-    return columns.filter(col => col.visible !== false)
+  return columns.filter(col => col.visible !== false)
-  }
-
-  return columns
 })
 
 // 内部响应式任务列表
@@ -400,14 +396,19 @@ onUnmounted(() => {
 <template>
   <div class="task-list">
     <div class="task-list-header">
+      <!-- 任务名称列，始终显示 -->
+      <div class="col col-name">
+        {{ (t as any).taskName || '任务名称' }}
+      </div>
+      <!-- 可配置的其他列 -->
       <div
         v-for="column in visibleColumns"
-        :key="column.type"
+        :key="column.key"
         class="col"
-        :class="column.cssClass"
+        :class="column.cssClass || `col-${column.key}`"
         :style="column.width ? { width: column.width + 'px' } : undefined"
       >
-        {{ (t as any)[column.key] }}
+        {{ column.label || (t as any)[column.key] }}
       </div>
     </div>
     <div class="task-list-body" @scroll="handleTaskListScroll">

src/components/TaskRow.vue

@@ -392,7 +392,7 @@ onUnmounted(() => {
         v-for="column in columns"
         :key="column.key"
         class="col"
-        :class="`col-${column.key}`"
+        :class="column.cssClass || `col-${column.key}`"
       >
         <!-- 里程碑分组显示空列 -->
         <template v-if="isMilestoneGroup">

src/styles/list.css

@@ -51,6 +51,34 @@
   max-width: 100px;
 }
 
+/* 基于 key 的 CSS 类名（备用） */
+.col-taskName {
+  flex: 2 0 300px;
+  min-width: 300px;
+  max-width: 300px;
+  justify-content: flex-start;
+}
+
+.col-predecessor {
+  flex: 1 0 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.col-startDate,
+.col-endDate {
+  flex: 1.2 0 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+
+.col-estimatedHours,
+.col-actualHours {
+  flex: 1 0 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
 .col:last-child {
   border-right: none;
 }