支持设置默认timeline scale

This commit is contained in:
qiuchengw
2025-09-24 19:55:26 +08:00
parent 8803d34c6e
commit 253ed21fd2
4 changed files with 70 additions and 22 deletions

View File

@@ -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

View File

@@ -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
})
// 计算分段控制器滑块位置

View File

@@ -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>

View File

@@ -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 // 默认选中的时间刻度
}