From 253ed21fd25c42ab983116904769ed90adce6927 Mon Sep 17 00:00:00 2001
From: qiuchengw <qiuchengw@163.com>
Date: Wed, 24 Sep 2025 19:55:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4timeline=20scale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GanttChart.vue       |  9 ++++
 src/components/GanttToolbar.vue     | 76 +++++++++++++++++++++--------
 src/components/TaskRow.vue          |  2 +-
 src/models/configs/ToolbarConfig.ts |  5 +-
 4 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index f774baf..55c477a 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -117,6 +117,15 @@ const timelineRef = ref<InstanceType<typeof Timeline> | null>(null)
 // 时间刻度状态
 const currentTimeScale = ref<TimelineScale>(TimelineScale.DAY)
 
+watch(
+  () => timelineRef.value,
+  newTimeline => {
+    if (newTimeline) {
+      newTimeline.updateTimeScale(currentTimeScale.value)
+    }
+  },
+)
+
 // TaskList的固定总长度（所有列的最小宽度之和 + 边框等额外空间）
 // 列宽: 300+120+120+140+140+100+100+100 = 1120px
 // 边框: 7个列间边框 * 1px = 7px
diff --git a/src/components/GanttToolbar.vue b/src/components/GanttToolbar.vue
index e2805d9..ada324a 100644
--- a/src/components/GanttToolbar.vue
+++ b/src/components/GanttToolbar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useI18n } from '../composables/useI18n'
 import type { ToolbarConfig } from '../models/configs/ToolbarConfig'
 import { TimelineScale } from '../models/types/TimelineScale'
@@ -266,6 +266,44 @@ const handleFullscreenToggle = () => {
   }
 }
 
+// 时间刻度配置映射
+const timeScaleMap = {
+  hour: { value: TimelineScale.HOUR, label: () => t('timeScaleHour') },
+  day: { value: TimelineScale.DAY, label: () => t('timeScaleDay') },
+  week: { value: TimelineScale.WEEK, label: () => t('timeScaleWeek') },
+  month: { value: TimelineScale.MONTH, label: () => t('timeScaleMonth') },
+  quarter: { value: TimelineScale.QUARTER, label: () => t('timeScaleQuarter') },
+  year: { value: TimelineScale.YEAR, label: () => t('timeScaleYear') },
+}
+
+type TimeScaleKey = keyof typeof timeScaleMap
+const defaultScaleKeys: TimeScaleKey[] = ['hour', 'day', 'week', 'month', 'year']
+
+// 获取可用的时间刻度维度
+const availableTimeScales = computed<TimeScaleKey[]>(() => {
+  const configured = props.config?.timeScaleDimensions as TimeScaleKey[] | undefined
+  const normalized = (configured ?? defaultScaleKeys).filter(
+    (scale): scale is TimeScaleKey => scale in timeScaleMap,
+  )
+  return normalized.length > 0 ? normalized : [...defaultScaleKeys]
+})
+
+// 根据配置解析默认时间刻度
+const resolvedDefaultScaleKey = computed<TimeScaleKey>(() => {
+  const keys = availableTimeScales.value
+  const candidate = props.config?.defaultTimeScale as TimeScaleKey | undefined
+
+  if (candidate && keys.includes(candidate)) {
+    return candidate
+  }
+
+  if (keys.includes('day')) {
+    return 'day'
+  }
+
+  return keys[0] ?? 'day'
+})
+
 // 时间刻度切换处理
 const handleTimeScaleChange = (scale: TimelineScale) => {
   currentTimeScale.value = scale
@@ -277,28 +315,26 @@ const handleTimeScaleChange = (scale: TimelineScale) => {
   }
 }
 
-// 获取可用的时间刻度维度
-const availableTimeScales = computed(() => {
-  const defaultScales = ['hour', 'day', 'week', 'month', 'year'] as const
-  return props.config?.timeScaleDimensions || defaultScales
-})
-
-// 时间刻度配置映射
-const timeScaleMap = {
-  hour: { value: TimelineScale.HOUR, label: () => t('timeScaleHour') },
-  day: { value: TimelineScale.DAY, label: () => t('timeScaleDay') },
-  week: { value: TimelineScale.WEEK, label: () => t('timeScaleWeek') },
-  month: { value: TimelineScale.MONTH, label: () => t('timeScaleMonth') },
-  quarter: { value: TimelineScale.QUARTER, label: () => t('timeScaleQuarter') },
-  year: { value: TimelineScale.YEAR, label: () => t('timeScaleYear') },
-}
+// 监听配置变化并应用默认时间刻度
+let hasAppliedConfigScale = false
+watch(
+  () => resolvedDefaultScaleKey.value,
+  newKey => {
+    const targetScale = timeScaleMap[newKey].value
+    if (currentTimeScale.value !== targetScale || !hasAppliedConfigScale) {
+      hasAppliedConfigScale = true
+      handleTimeScaleChange(targetScale)
+    }
+  },
+  { immediate: true },
+)
 
 // 获取当前时间刻度对应的字符串键
-const currentTimeScaleKey = computed(() => {
-  const entry = Object.entries(timeScaleMap).find(
-    ([, config]) => config.value === currentTimeScale.value,
+const currentTimeScaleKey = computed<TimeScaleKey>(() => {
+  const matchedKey = availableTimeScales.value.find(
+    scaleKey => timeScaleMap[scaleKey].value === currentTimeScale.value,
   )
-  return entry ? entry[0] : 'day'
+  return matchedKey ?? resolvedDefaultScaleKey.value
 })
 
 // 计算分段控制器滑块位置
diff --git a/src/components/TaskRow.vue b/src/components/TaskRow.vue
index 387160b..1544c1d 100644
--- a/src/components/TaskRow.vue
+++ b/src/components/TaskRow.vue
@@ -438,7 +438,7 @@ onUnmounted(() => {
         @add-successor="emit('add-successor', $event)"
         @delete="handleTaskDelete"
       >
-        <template v-if="hasContentSlot" #custom-task-content="childScope">
+        <template v-if="hasContentSlot" #custom-task-content="childScope: any">
           <slot name="custom-task-content" v-bind="childScope" />
         </template>
       </TaskRow>
diff --git a/src/models/configs/ToolbarConfig.ts b/src/models/configs/ToolbarConfig.ts
index 9410422..6e34e54 100644
--- a/src/models/configs/ToolbarConfig.ts
+++ b/src/models/configs/ToolbarConfig.ts
@@ -1,3 +1,5 @@
+import type { TimelineScale } from '../types/TimelineScale'
+
 // ToolbarConfig 类型定义
 export interface ToolbarConfig {
   showAddTask?: boolean
@@ -9,5 +11,6 @@ export interface ToolbarConfig {
   showTheme?: boolean
   showFullscreen?: boolean
   showTimeScale?: boolean // 显示时间刻度按钮组
-  timeScaleDimensions?: ('hour' | 'day' | 'week' | 'month' | 'year')[] // 设置时间刻度按钮的展示维度
+  timeScaleDimensions?: TimelineScale[] // 设置时间刻度按钮的展示维度
+  defaultTimeScale?: TimelineScale // 默认选中的时间刻度
 }