From 7309865af05cfa8b7a26a39f45d780ab131304dc Mon Sep 17 00:00:00 2001
From: qiuchengw <qiuchengw@163.com>
Date: Wed, 24 Sep 2025 20:30:29 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=88=97?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=90=8E=E5=B7=A6=E4=BE=A7table=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E5=AF=B9=E9=BD=90=E5=88=97=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/App.vue                | 17 ++++++-----------
 src/components/TaskList.vue | 19 ++++++++++---------
 src/components/TaskRow.vue  |  2 +-
 src/styles/list.css         | 28 ++++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 747e26a..c749cb9 100644
--- a/demo/App.vue
+++ b/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为工作时间
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
index cad7656..d3ad37c 100644
--- a/src/components/TaskList.vue
+++ b/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) {
-    return columns.filter(col => col.visible !== false)
-  }
-
-  return columns
+  // 过滤出可见的列（visible !== false）
+  return columns.filter(col => col.visible !== false)
 })
 
 // 内部响应式任务列表
@@ -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">
diff --git a/src/components/TaskRow.vue b/src/components/TaskRow.vue
index 17dac0f..61c1d9f 100644
--- a/src/components/TaskRow.vue
+++ b/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">
diff --git a/src/styles/list.css b/src/styles/list.css
index d136f01..b14b3ca 100644
--- a/src/styles/list.css
+++ b/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;
 }