GanttFlow 简介
GanttFlow 是一款功能强大、高性能的甘特图组件库，同时支持 React 和 Vue 两大主流框架。提供流畅的拖拽体验、强大的性能优化和丰富的主题定制能力。
特性亮点
| 特性 | 说明 |
|---|---|
| 🚀 高性能 | 虚拟滚动和智能缓存，轻松处理数千条任务 |
| ⚛️ 双框架 | 同时支持 React 18+ 和 Vue 3+ |
| 📊 多视图 | 日/周/月/季/年视图一键切换 |
| 🔄 流畅交互 | 拖拽任务、调整时长、磁吸辅助线 |
| 🎨 主题定制 | 内置亮色/暗色主题，支持完全自定义 |
| 📱 响应式 | 完美适配桌面和移动设备 |
| 🌍 国际化 | 支持多语言，开箱即用 |
技术架构
GanttFlow 采用现代化的技术栈构建：
- TypeScript - 完整的类型定义，提供最佳开发体验
- 虚拟滚动 - 基于 Vue React 的虚拟列表技术
- CSS 变量 - 灵活的主题定制系统
- 零外部依赖 - 轻量打包，无冗余依赖
安装
bash
npm install @agions/gantt-flowbash
yarn add @agions/gantt-flowbash
pnpm add @agions/gantt-flow环境要求
| 要求 | 版本 |
|---|---|
| Node.js | >= 18.0.0 |
| React | >= 16.8.0 (推荐 18+) |
| Vue | >= 3.0.0 |
| TypeScript | >= 5.0+ |
核心概念
深入了解 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 | 项目/分组 | 加粗的矩形条，带有展开/折叠按钮 |
视图模式 (ViewMode)
GanttFlow 支持多种视图模式，适应不同的时间粒度需求：
typescript
type ViewMode = 'day' | 'week' | 'month' | 'quarter' | 'year'| 模式 | 说明 | 适用场景 |
|---|---|---|
day | 日视图 | 短期任务、每日工作安排 |
week | 周视图 | 中期项目规划（默认） |
month | 月视图 | 月度工作计划 |
quarter | 季度视图 | 季度规划、季度总结 |
year | 年视图 | 年度概览、长期规划 |
依赖关系 (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+ | ❌ 无法使用 | ✅ 流畅 |
组件架构
┌─────────────────────────────────────────────────────┐
│ EnhancedGanttChart │
│ ┌─────────────┐ ┌─────────────────────────────┐ │
│ │ Header │ │ Time Header │ │
│ ├─────────────┤ ├─────────────────────────────┤ │
│ │ │ │ │ │
│ │ Task List │ │ Gantt Chart Area │ │
│ │ (左侧任务) │ │ (右侧时间轴图表) │ │
│ │ │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ Task Bars │ │ │
│ │ │ │ │ (任务条) │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ │ │ │ │ │
│ │ │ │ ┌─────────────────────┐ │ │
│ │ │ │ │ Dependency Lines │ │ │
│ │ │ │ │ (依赖关系线) │ │ │
│ │ │ │ └─────────────────────┘ │ │
│ │ │ │ │ │
│ └─────────────┘ └─────────────────────────────┘ │
└─────────────────────────────────────────────────────┘