甘特图 — 道

工具简介

甘特图（Gantt Chart）是一种经典的项目管理可视化工具，由亨利·甘特（Henry Gantt）于1910年代发明。它以横向条形图的形式，直观展示项目的任务列表、时间跨度和进度状态。

为什么需要甘特图？

在项目管理中，我们常面临以下挑战：

• 任务繁杂：多个任务并行，起止时间各不相同
• 依赖关系：某些任务必须在其他任务完成后才能开始
• 进度追踪：需要随时了解每个任务的完成百分比
• 时间冲突：多个任务时间重叠，难以协调资源

甘特图通过时间轴 + 条形的组合，将以上信息浓缩在一张图中，让项目经理和团队成员能够一目了然地掌握项目全貌。

适用场景

场景	说明
软件开发	需求→设计→开发→测试→部署全生命周期管理
工程建筑	各施工阶段的计划与进度控制
活动策划	活动前各准备工作的时间节点管理
学习计划	课程/考试复习的时间安排
个人规划	日常任务、习惯养成的进度追踪

核心概念

• 任务 (Task)：甘特图中的最小单位，包含名称、开始时间、结束时间、进度
• 依赖 (Dependency)：任务间的先后关系，用箭头连接表示
• 进度 (Progress)：任务的完成百分比，在条形上用颜色深浅表示
• 视图模式 (View Mode)：时间轴的粒度，如按小时、天、周、月查看

甘特图 — 法

使用方法

快速开始

1. 打开甘特图工具，默认加载示例项目数据
2. 点击「示例」按钮可随时恢复示例数据
3. 点击「清空」可从零开始创建

创建任务

1. 点击「添加任务」按钮
2. 在弹出的对话框中填写：
   • 任务名称：必填，显示在图表条上
   • 开始/结束日期：必填，决定条形的位置和长度
   • 进度：0-100 的百分比值
   • 依赖任务ID：该任务依赖的前置任务编号（多个用逗号分隔）
   • 颜色：自定义条形颜色，便于区分不同类别
3. 点击「添加」完成

编辑任务

方式一：表格编辑

• 在下方任务列表中直接修改名称、日期、进度、依赖关系
• 点击颜色块可更换条形颜色

方式二：弹窗编辑

• 点击甘特图上任意任务条形，弹出详情窗口
• 点击弹窗中的「编辑」按钮进入编辑模式

方式三：拖拽操作

• 拖拽条形左右边缘：改变任务起止日期
• 拖拽条形中间：整体移动任务时间段
• 拖拽进度条手柄：调整任务完成百分比

视图切换

点击顶部的视图按钮切换时间粒度：

• 日：精确到每天，适合短期项目
• 周：按周显示，适合中期项目
• 月：按月显示，适合长期规划

依赖管理

1. 在添加/编辑任务时，填写「依赖任务ID」字段
2. 甘特图会自动绘制前置任务到当前任务的箭头连接
3. 拖拽前置任务时，依赖任务会自动联动调整

导入导出

• 导出：将当前所有任务保存为 JSON 文件，方便备份和分享
• 导入：从之前导出的 JSON 文件恢复任务数据

快捷键

快捷键	功能
Ctrl + Z	撤销上一步操作
Ctrl + Y	重做已撤销的操作

高级选项

在工具栏下方可调整：

• 周末高亮：在图表中高亮显示周六日
• 吸附粒度：拖拽时自动对齐到指定时间单位
• 线条样式：控制网格线的显示方式
• 弹窗触发：选择「点击」或「悬停」弹出任务详情

甘特图 — 术

技术架构

本工具基于 Frappe Gantt 开源甘特图库构建，使用 Vue 3 组合式 API 进行封装。

技术栈

层级	技术
甘特图引擎	Frappe Gantt v1.x（纯 JavaScript / SVG 渲染）
图标	@phosphor-icons/vue
数据格式	JSON（导入/导出）

数据模型

interface TaskData {
  id: string           // 唯一标识（数字递增）
  name: string         // 任务名称
  start: string        // 开始日期 (YYYY-MM-DD)
  end: string          // 结束日期 (YYYY-MM-DD)
  progress: number     // 进度 0-100
  dependencies?: string // 依赖任务ID，逗号分隔
  color?: string       // 条形颜色 (CSS颜色值)
  color_progress?: string // 进度条颜色
  custom_class?: string // 自定义CSS类名
}

组件架构

GanttChartPage.vue
├── 工具栏 (视图切换、添加、导入导出等)
├── 甘特图容器 (Frappe Gantt 实例)
├── 任务列表表格 (CRUD 操作)
├── 快捷操作提示 (键盘/鼠标)
└── 添加/编辑任务弹窗 (Modal)

状态管理

• 任务数据：使用 Vue ref 存储，变更时同步到 Gantt 实例
• 撤销/重做：基于快照栈（undoStack / redoStack），每次变更前保存数组拷贝
• 主题适配：通过 MutationObserver 监听 data-theme 属性变化

Frappe Gantt 配置

const defaultOptions = {
  view_mode: 'Day',          // 默认视图
  language: 'zh-CN',         // 中文本地化
  popup: customPopupHandler, // 自定义弹窗
  move_dependencies: true,   // 依赖联动
  infinite_padding: true,    // 无限滚动
  // 事件回调
  on_date_change: ...,
  on_progress_change: ...,
  on_view_change: ...,
}

核心功能实现

撤销/重做

• 在每次修改任务前，将当前任务数组深拷贝 push 到 undoStack
• 撤销时从 undoStack pop，当前数据 push 到 redoStack
• 重做时反向操作
• 限制堆栈大小（50），防止内存溢出

刷新机制

• 调用 ganttInstance.refresh(tasks) 全量刷新甘特图
• 调用 ganttInstance.update_task(id, changes) 增量更新单个任务

暗色模式

• 通过 CSS 选择器 [data-theme*='dark'] 覆盖甘特图样式
• MutationObserver 实时监听主题切换