数据类型

GanttFlow 使用 TypeScript 编写，提供完整的类型定义。

Task

任务是最基本的单元。

interface Task {
  /** 唯一标识 */
  id: string
  
  /** 任务名称 */
  name: string
  
  /** 开始时间 */
  start: string | Date
  
  /** 结束时间 */
  end: string | Date
  
  /** 进度 (0-100) */
  progress?: number
  
  /** 任务类型 */
  type?: 'task' | 'milestone' | 'project'
  
  /** 是否折叠 */
  collapsed?: boolean
  
  /** 父任务 ID（用于层级结构） */
  parentId?: string
  
  /** 依赖任务 ID 列表 */
  dependencies?: string[]
  
  /** 自定义颜色 */
  color?: string
  
  /** 任务描述 */
  description?: string
  
  /** 分配的资源 ID */
  assignees?: string[]
  
  /** 备注 */
  notes?: string
  
  /** 是否可拖拽 */
  draggable?: boolean
  
  /** 是否可调整大小 */
  resizable?: boolean
  
  /** 自定义数据 */
  [key: string]: any
}

任务类型详解

类型	说明	视觉效果
task	普通任务（默认）	圆角矩形条
milestone	里程碑	菱形标记
project	项目/分组	加粗的矩形条，带有展开/折叠按钮

Dependency

依赖关系定义任务之间的关联。

interface Dependency {
  /** 源任务 ID（前置任务） */
  fromId: string
  
  /** 目标任务 ID（后续任务） */
  toId: string
  
  /** 依赖类型 */
  type: DependencyType
}

DependencyType

type DependencyType = 
  | 'finish_to_start'  // FS: A 结束后 B 开始
  | 'start_to_start'   // SS: A 开始后 B 开始
  | 'finish_to_finish' // FF: A 结束后 B 结束
  | 'start_to_finish'  // SF: A 开始后 B 结束

依赖类型图解

类型	说明	示意图
finish_to_start	完成-开始（最常用）	A ████→ ████ B
start_to_start	开始-开始	A ████ ⟷ B
finish_to_finish	完成-结束	A ████ ←▸ ████ B
start_to_finish	开始-结束	A ████ ⟵ B

Resource

资源表示任务执行者或所需资源。

interface Resource {
  /** 资源 ID */
  id: string
  
  /** 资源名称 */
  name: string
  
  /** 资源类型 */
  type?: 'person' | 'equipment' | 'material'
  
  /** 资源图标 URL */
  avatar?: string
  
  /** 资源颜色 */
  color?: string
  
  /** 资源容量 (0-100%) */
  capacity?: number
  
  /** 邮箱 */
  email?: string
  
  /** 电话 */
  phone?: string
  
  /** 自定义数据 */
  [key: string]: any
}

ViewMode

视图模式决定甘特图的显示精度。

type ViewMode = 
  | 'day'     // 日视图
  | 'week'    // 周视图（默认）
  | 'month'   // 月视图
  | 'quarter' // 季度视图
  | 'year'    // 年视图

模式	说明	适用场景
day	日视图	短期任务、每日工作安排
week	周视图	中期项目规划
month	月视图	月度工作计划
quarter	季度视图	季度规划
year	年视图	年度概览

GanttChartOptions

组件配置选项。

interface GanttChartOptions {
  // ========== 基础配置 ==========
  tasks?: Task[]
  resources?: Resource[]
  dependencies?: Dependency[]
  startDate?: Date
  endDate?: Date
  viewMode?: ViewMode
  
  // ========== 尺寸配置 ==========
  columnWidth?: number
  rowHeight?: number
  headerHeight?: number
  
  // ========== 功能开关 ==========
  enableDependencies?: boolean
  enableResources?: boolean
  enableDragging?: boolean
  enableResizing?: boolean
  enableProgress?: boolean
  enableGrouping?: boolean
  showWeekends?: boolean
  showToday?: boolean
  showRowLines?: boolean
  showColumnLines?: boolean
  showResourceView?: boolean
  virtualScrolling?: boolean
  visibleTaskCount?: number
  bufferSize?: number
  
  // ========== 主题配置 ==========
  theme?: 'light' | 'dark' | 'auto'
  
  // ========== 国际化 ==========
  locale?: Locale
  
  // ========== 交互配置 ==========
  enableAnimations?: boolean
  enableSnap?: boolean
  snapThreshold?: number
  dragThrottle?: number
  
  // ========== 样式配置 ==========
  taskDefaultColor?: string
  guideColor?: string
  criticalPathColor?: string
  criticalPathWidth?: number
  
  // ========== 约束配置 ==========
  minTaskDuration?: number
  maxTaskDuration?: number
  weekendSkip?: boolean
  snapToWeekends?: boolean
}

ExportOptions

导出配置选项。

interface ExportOptions {
  /** 背景颜色 */
  backgroundColor?: string
  
  /** 内边距（像素） */
  padding?: number
  
  /** 图片清晰度 (1-3) */
  scale?: number
  
  /** 图片质量 (0-1) */
  quality?: number
  
  /** 导出格式 */
  format?: 'png' | 'jpeg' | 'pdf'
  
  /** 文件名前缀 */
  filename?: string
  
  /** 是否包含表头 */
  includeHeader?: boolean
  
  /** 是否包含图例 */
  includeLegend?: boolean
  
  /** 是否包含今日线 */
  includeTodayLine?: boolean
  
  /** 是否包含网格线 */
  includeGridLines?: boolean
  
  /** Excel 特定：是否包含依赖关系 */
  includeDependencies?: boolean
  
  /** Excel 特定：是否包含进度 */
  includeProgress?: boolean
  
  /** Excel 特定：是否包含资源 */
  includeResources?: boolean
  
  /** Excel 特定：日期格式 */
  dateFormat?: string
}

Locale

国际化配置。

interface Locale {
  // ========== 任务相关 ==========
  task?: string
  tasks?: string
  milestone?: string
  project?: string
  
  // ========== 时间相关 ==========
  today?: string
  week?: string
  month?: string
  quarter?: string
  year?: string
  day?: string
  weekend?: string
  
  // ========== 操作相关 ==========
  unplanned?: string
  export?: string
  undo?: string
  redo?: string
  fitToScreen?: string
  zoomIn?: string
  zoomOut?: string
  
  // ========== 状态相关 ==========
  noData?: string
  loading?: string
  
  // ========== 资源相关 ==========
  assignee?: string
  assignees?: string
  resource?: string
  
  // ========== 进度相关 ==========
  progress?: string
  completed?: string
  inProgress?: string
  notStarted?: string
  overdue?: string
  
  // ========== 日期格式 ==========
  dateFormat?: string
  weekNames?: string[]
  monthNames?: string[]
  dayNames?: string[]
}

GanttStats

统计信息类型。

interface GanttStats {
  totalTasks: number
  completedTasks: number
  inProgressTasks: number
  notStartedTasks: number
  overdueTasks: number
  totalProgress: number
  startDate: Date
  endDate: Date
  duration: number  // 天数
}

ScrollOptions

滚动选项。

interface ScrollOptions {
  /** 是否平滑滚动 */
  smooth?: boolean
  
  /** 滚动动画时长（毫秒） */
  duration?: number
  
  /** 水平对齐 */
  align?: 'left' | 'center' | 'right'
  
  /** 垂直对齐 */
  verticalAlign?: 'top' | 'middle' | 'bottom'
}

DragOptions

拖拽选项。

interface DragOptions {
  /** 拖拽类型 */
  type?: 'move' | 'resize-start' | 'resize-end' | 'progress'
  
  /** 原始任务数据 */
  task: Task
  
  /** 原始开始时间 */
  originalStart: Date
  
  /** 原始结束时间 */
  originalEnd: Date
  
  /** 是否取消拖拽 */
  cancel?: boolean
}

工具类型

PartialTask

部分任务更新类型。

type PartialTask = Partial<Omit<Task, 'id'>>

TaskId

任务 ID 类型。

type TaskId = string

DateValue

日期值类型。

type DateValue = string | Date

相关链接

• 组件属性 - Props 参考
• 事件 - 事件参考
• 方法 - 方法参考