Gantt Lite（学生报告甘特图工具）

一个面向学生课程报告场景的轻量甘特图编辑器。
目标是：比办公软件更快上手、比纯 AI 出图更可控、可持续编辑与导出。

在线体验

• 在线地址：https://gantetu.vercel.app
• 仓库地址：https://github.com/chenpp604/gantt-for-students

产品预览

---

1. 已实现功能总览

• 横纵轴可调：时间粒度、日期范围、单元格宽度、任务行宽高
• 甘特条编辑：创建、拖拽、拉伸、改名、改色、删除
• 完成度：条内进度覆盖 + 百分比标签 + 工具栏滑杆
• 层级结构：母标题（group）/子标题（task）/折叠展开
• 管理增强：同组排序、跨组移动、母标题整组排序
• 模板中心：课程项目 / 敏捷 Sprint / 毕业设计 / 实验报告一键切换
• 交付体验：首次使用引导 + 演示模式（纯展示视图）
• 编辑效率：撤回 / 重做（按钮 + 快捷键）
• 本地可靠性：自动保存、保存状态提示、异常数据恢复
• 备份能力：JSON 导出/导入
• 报告导出：高清 PNG 导出（导出时自动隐藏操作按钮，只保留有效图形信息）

---

2. 快速开始

npm install
npm run dev

浏览器打开终端给出的地址（通常是 http://localhost:5173）。

生产构建：

npm run build
npm run preview

---

2.1 3 分钟上手

1. 在“模板中心”切换到你的场景（课程/敏捷/毕业/实验）。
2. 在子标题行双击网格，创建并拖拽甘特条。
3. 调整完成度后导出 PNG，直接贴进报告。

---

3. 功能使用说明（逐项可操作）

3.1 项目与基础配置

在页面顶部和控制区可以配置：

• 项目标题：用于页面展示和导出文件名
• 横轴粒度：按天 / 按周
• 开始日期、结束日期：控制时间范围
• X 轴时间单元格宽度：控制每个时间格子宽度
• Y 轴标签宽度、Y 轴行高：控制左侧任务区域与行高
• 任务名称字号、显示模式：贴边 / 居中 / 自动换行
• 撤回与重做：顶部按钮 撤回 / 重做

快捷键：

• Cmd/Ctrl + Z：撤回
• Cmd/Ctrl + Shift + Z：重做
• Ctrl + Y：重做（Windows 常用）

---

3.2 母标题与子标题（层级管理）

新增母标题

点击 + 新增母标题，输入名称（例如 Sprint 1）。

在母标题下新增子标题

在母标题行点击 +子标题。
子标题行才是实际可添加甘特条的任务行。

新增独立子标题

点击 + 新增独立子标题，可创建不隶属母标题的任务行。

折叠与展开

母标题左侧 ▼ / ▶ 可折叠或展开其子标题。

---

3.3 甘特条编辑

创建甘特条

在子标题行的网格中双击空白格，即可创建任务条。

调整位置与时长

• 拖拽任务条中部：移动时间区间
• 拖拽左右边缘：调整开始/结束时间

名称与颜色

• 双击任务条：修改任务名称
• 选中任务条后，在底部工具栏点击颜色圆点切换颜色

删除任务条

选中任务条后点击底部 删除任务条。

---

3.4 完成度管理

选中任务条后，底部工具栏会出现 完成度 编辑器：

• 滑杆输入（0~100）
• 数字输入（0~100）

甘特条会同步显示：

• 条内已完成覆盖层
• 百分比角标（如 65%）

---

3.5 管理化增强（排序与换组）

子标题同组排序

子标题行可用 上移 / 下移，仅在当前母标题组内排序。

子标题跨组移动

子标题行可用 换组↑ / 换组↓，快速切换到相邻母标题。

母标题整组排序

母标题可用 组上移 / 组下移，会连同其子标题整体移动。

母标题汇总信息

母标题名称右侧显示：

x 子标题 | y 条 | z%

分别表示：子标题数量、甘特条数量、平均完成度。

---

3.6 本地保存与数据安全

自动保存

所有编辑会自动保存到浏览器本地（防抖保存）。

保存状态提示

右上角显示：

• 保存中...
• 已保存
• 保存失败

并显示最近保存时间。

异常恢复

若检测到本地数据损坏，会自动回退到默认模板并提示。

---

3.7 JSON 备份与恢复

导出 JSON

点击 导出 JSON，下载当前项目完整数据备份。

导入 JSON

点击 导入 JSON，选择备份文件恢复项目内容。

恢复默认模板

点击 恢复默认模板，确认后重置当前项目（未导出改动会丢失）。

---

3.8 PNG 导出（报告场景）

导出步骤

1. 设置 导出宽度（默认 1600）
2. 点击 导出 PNG

导出内容规则

导出时会自动启用“纯图模式”，隐藏：

• 上移/下移/换组等操作按钮
• 折叠按钮
• 甘特条拉伸把手

只保留与报告有价值的图形信息（标题、任务层级、甘特条、进度、时间轴）。

---

3.9 交付体验功能

模板中心（切换即应用）

在控制区找到 模板中心 下拉框，可选择：

• 课程项目模板
• 敏捷 Sprint 模板
• 毕业设计模板
• 实验报告模板

下拉选择模板后会立即应用并刷新画布。
如果你希望在当前模板基础上重置到默认初始内容，可点击 重新应用模板（会弹确认框）。

首次使用引导

首次进入会弹出三步引导：

1. 在模板中心切换到目标场景（会自动应用）
2. 在子标题行双击创建甘特条
3. 调整进度并导出 PNG

后续可通过顶部 使用引导 按钮再次打开。

演示模式（课堂展示推荐）

点击顶部 进入演示模式，系统会隐藏操作性控件（与导出纯图一致），仅保留核心图形信息。
再次点击 退出演示模式 可恢复编辑控件。

---

4. 技术栈

• React + TypeScript + Vite
• dayjs
• html-to-image

---

5. 常见问题（FAQ）

数据保存在哪里？

当前保存在浏览器本地存储（localStorage）。

清理浏览器缓存会怎样？

本地数据可能被清除。建议在重要节点使用 导出 JSON 备份。

推荐用什么浏览器？

推荐 Chrome / Edge 最新版本，Safari 建议最新版。

能多人实时协作吗？

当前版本是本地单人编辑，不含实时协作。

---

6. 当前版本建议

如果用于课程报告，推荐流程：

1. 先建母标题（如 Sprint 1/2）
2. 再建子标题并填甘特条
3. 补完成度与颜色
4. 导出 PNG 贴入 Word
5. 同时导出 JSON 作为备份

---

7. 开源信息

• License: MIT（见 LICENSE）
• 贡献指南：见 CONTRIBUTING.md
• 版本记录：见 CHANGELOG.md