核心概念
深入了解 GanttFlow 的核心概念，帮助你更好地使用组件。
任务 (Task)
任务是甘特图的基本单元，每个任务包含以下核心属性：
typescript
interface Task {
id: string // 唯一标识符（必填）
name: string // 任务名称（必填）
start: string | Date // 开始时间（必填）
end: string | Date // 结束时间（必填）
progress?: number // 进度 0-100（可选）
type?: 'task' | 'milestone' | 'project' // 任务类型
collapsed?: boolean // 是否折叠（用于父子任务）
dependencies?: string[] // 依赖任务 ID 列表
color?: string // 自定义颜色（支持 hex/rgb）
description?: string // 任务描述
assignees?: string[] // 分配的人员 ID
notes?: string // 备注信息
draggable?: boolean // 是否可拖拽
resizable?: boolean // 是否可调整大小
}任务类型
| 类型 | 说明 | 视觉效果 |
|---|---|---|
task | 普通任务（默认） | 圆角矩形条 |
milestone | 里程碑 | 菱形标记 |
project | 项目/分组 | 加粗的矩形条，带有展开/折叠按钮 |
任务示例
tsx
const tasks = [
// 普通任务
{
id: "task-1",
name: "后端开发",
start: "2023-03-01",
end: "2023-03-10",
progress: 60,
color: "#10b981"
},
// 里程碑
{
id: "milestone-1",
name: "Alpha 发布",
start: "2023-03-15",
end: "2023-03-15",
type: "milestone"
},
// 项目分组
{
id: "project-1",
name: "后端模块",
start: "2023-03-01",
end: "2023-03-20",
type: "project",
collapsed: false,
children: ["task-1", "task-2"]
}
]视图模式 (ViewMode)
GanttFlow 支持多种视图模式，适应不同的时间粒度需求：
typescript
type ViewMode = 'day' | 'week' | 'month' | 'quarter' | 'year'| 模式 | 说明 | 适用场景 |
|---|---|---|
day | 日视图 | 短期任务、每日工作安排 |
week | 周视图 | 中期项目规划（默认） |
month | 月视图 | 月度工作计划 |
quarter | 季度视图 | 季度规划、季度总结 |
year | 年视图 | 年度概览、长期规划 |
切换视图模式
tsx
// 通过 props
<EnhancedGanttChart viewMode="month" />
// 通过 ref 动态切换
ganttRef.current?.setViewMode('month')依赖关系 (Dependency)
任务之间可以建立多种依赖关系，确保任务按正确的顺序执行：
typescript
interface Dependency {
fromId: string // 源任务 ID（前置任务）
toId: string // 目标任务 ID（后续任务）
type: 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 |
关键路径
关键路径（Critical Path）是项目中最长的依赖链，决定了项目的最短完成时间：
tsx
<EnhancedGanttChart
tasks={tasks}
dependencies={dependencies}
enableCriticalPath={true}
criticalPathColor="#ef4444"
/>虚拟滚动
当任务数量超过 100 个时，强烈建议启用虚拟滚动：
tsx
<EnhancedGanttChart
tasks={largeTaskList}
virtualScrolling={true}
visibleTaskCount={50} // 可见区域任务数
bufferSize={10} // 上下缓冲区大小
/>性能对比
| 任务数量 | 无虚拟滚动 | 启用虚拟滚动 |
|---|---|---|
| 50 | ✅ 流畅 | ✅ 流畅 |
| 200 | ⚠️ 卡顿 | ✅ 流畅 |
| 500 | ❌ 明显卡顿 | ✅ 流畅 |
| 1000+ | ❌ 无法使用 | ✅ 流畅 |
主题系统
GanttFlow 内置完整的主题系统：
tsx
// 亮色主题
<EnhancedGanttChart options={{ theme: 'light' }} />
// 暗色主题
<EnhancedGanttChart options={{ theme: 'dark' }} />
// 自动跟随系统设置
<EnhancedGanttChart options={{ theme: 'auto' }} />详见 主题系统。
组件架构
┌─────────────────────────────────────────────────────┐
│ EnhancedGanttChart │
│ ┌─────────────┐ ┌─────────────────────────────┐ │
│ │ Header │ │ Time Header │ │
│ ├─────────────┤ ├─────────────────────────────┤ │
│ │ │ │ │ │
│ │ Task List │ │ Gantt Chart Area │ │
│ │ (左侧任务) │ │ (右侧时间轴图表) │ │
│ │ │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ Task Bars │ │ │
│ │ │ │ │ (任务条) │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ │ │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ Dependency Lines │ │ │
│ │ │ │ │ (依赖关系线) │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ │ │ │ │ │
│ └─────────────┘ └─────────────────────────────┘ │
└─────────────────────────────────────────────────────┘