组件属性 (Props)

EnhancedGanttChart (React)

完整的 React 组件属性列表：

基础属性

属性	类型	默认值	必填	说明
tasks	Task[]	[]	是	任务列表
dependencies	Dependency[]	[]	否	依赖关系列表
resources	Resource[]	[]	否	资源列表
viewMode	ViewMode	'week'	否	视图模式
startDate	Date	自动计算	否	甘特图开始日期
endDate	Date	自动计算	否	甘特图结束日期

尺寸配置

属性	类型	默认值	说明
columnWidth	number	60	列宽（像素）
rowHeight	number	44	行高（像素）
headerHeight	number	56	表头高度（像素）

功能开关

属性	类型	默认值	说明
enableDependencies	boolean	true	启用依赖关系
enableResources	boolean	false	启用资源视图
enableDragging	boolean	true	启用拖拽移动
enableResizing	boolean	true	启用调整大小
enableProgress	boolean	true	启用进度编辑
enableGrouping	boolean	false	启用任务分组
showWeekends	boolean	true	显示周末
showToday	boolean	true	显示今日线
showRowLines	boolean	true	显示行线
showColumnLines	boolean	true	显示列线
showResourceView	boolean	false	显示资源视图
virtualScrolling	boolean	false	启用虚拟滚动
visibleTaskCount	number	50	可见任务数量
bufferSize	number	10	缓冲区大小

回调函数

属性	类型	说明
onTaskClick	(task: Task, event: MouseEvent) => void	任务点击回调
onTaskDrag	(task: Task, event: MouseEvent, newStart: Date, newEnd: Date) => void	任务拖拽回调
onTaskDragStart	(task: Task) => void	拖拽开始回调
onTaskDragEnd	(task: Task) => void	拖拽结束回调
onTaskResize	(task: Task, newStart: Date, newEnd: Date) => void	任务调整大小回调
onTaskDoubleClick	(task: Task, event: MouseEvent) => void	任务双击回调
onDateChange	(startDate: Date, endDate: Date) => void	日期范围变化回调
onProgressChange	(task: Task, progress: number) => void	进度变化回调
onViewChange	(viewMode: ViewMode) => void	视图模式变化回调
onTaskToggle	(task: Task, collapsed: boolean) => void	任务折叠状态变化回调
onScroll	(scrollTop: number, scrollLeft: number) => void	滚动回调
onScrollBottom	() => void	滚动到底部回调

样式相关

属性	类型	默认值	说明
options	GanttChartOptions	{}	配置选项
locale	Locale	'zh-CN'	语言设置
modernUI	boolean	true	使用现代 UI 样式
showViewSwitcher	boolean	true	显示视图切换器
className	string	''	自定义类名
style	CSSProperties	{}	内联样式

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
}

ViewMode 类型

type ViewMode = 'day' | 'week' | 'month' | 'quarter' | 'year'

值	说明
day	日视图
week	周视图（默认）
month	月视图
quarter	季度视图
year	年视图

GanttChartOptions

interface GanttChartOptions {
  /** 主题设置 */
  theme?: 'light' | 'dark' | 'auto'
  
  /** 任务默认颜色 */
  taskDefaultColor?: string
  
  /** 是否显示提示 */
  showTooltip?: boolean
  
  /** 是否启用动画 */
  enableAnimations?: boolean
  
  /** 拖拽节流（毫秒） */
  dragThrottle?: number
  
  /** 最小任务时长（毫秒） */
  minTaskDuration?: number
  
  /** 最大任务时长（毫秒） */
  maxTaskDuration?: number
  
  /** 磁吸阈值（像素） */
  snapThreshold?: number
  
  /** 是否启用磁吸 */
  enableSnap?: boolean
  
  /** 辅助线颜色 */
  guideColor?: string
  
  /** 关键路径颜色 */
  criticalPathColor?: string
  
  /** 关键路径线宽 */
  criticalPathWidth?: number
}

使用示例

import React from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

function App() {
  return (
    <EnhancedGanttChart
      tasks={tasks}
      dependencies={dependencies}
      viewMode="week"
      columnWidth={80}
      rowHeight={50}
      headerHeight={60}
      enableDragging={true}
      enableResizing={true}
      enableProgress={true}
      enableDependencies={true}
      showToday={true}
      showWeekends={true}
      virtualScrolling={tasks.length > 100}
      onTaskClick={(task) => console.log("点击:", task)}
      onTaskDrag={(task, e, newStart, newEnd) => {
        console.log("拖拽:", task, newStart, newEnd)
      }}
      onProgressChange={(task, progress) => {
        console.log("进度:", task, progress)
      }}
      options={{
        theme: "auto",
        enableAnimations: true,
        enableSnap: true
      }}
    />
  )
}

相关链接

• 事件 (Events) - 事件监听
• 方法 (Methods) - 组件方法
• 数据类型 - 类型定义