甘特图视图
甘特图视图以时间线方式展示任务的起止时间和依赖关系，帮助你直观把握项目进度、识别关键路径和发现时间冲突。
进入甘特图视图
启动 Web 界面后，点击顶部导航栏的「甘特图」标签，即可进入甘特图视图。首次进入时，系统会自动解析所有任务的日期数据并渲染时间线。
页面布局
甘特图视图采用左右双栏布局：
- 左侧任务列表：固定宽度的表格，展示任务 ID、标题、时间列和操作按钮
- 右侧时间线区域：动态渲染的任务条和依赖箭头，顶部有时间轴刻度
左右两栏的滚动事件双向同步，上下滚动时始终保持对齐。
时间粒度切换
时间线顶部提供五级粒度切换按钮：
| 粒度 | 适用场景 | 特点 |
|---|---|---|
| 日 | 查看近期密集的开发任务安排 | 单天多任务水平错位显示，避免重叠 |
| 周 | 迭代进度回顾 | 适合 Sprint 或周会场景 |
| 月 | 月度项目回顾 | 平衡细节与全景 |
| 季度 | 中长期项目概览 | 大跨度时间窗口 |
| 年 | 年度项目大局 | 最宏观视角 |
切换粒度时，任务条的位置和宽度会自动重新计算，确保在当前尺度下清晰可见。
任务时间解析
甘特图不依赖任务必须填写计划日期。系统按以下规则自动解析每条任务的有效起止时间：
开始时间
- 若任务填写了
plannedStart→ 优先使用计划开始时间 - 若无计划开始时间 → 使用任务创建日期（
createdDate的日期部分）
结束时间
- 若任务填写了
plannedEnd→ 优先使用计划结束时间 - 若无计划结束时间但有
updatedDate→ 使用更新日期的日期部分 - 若仅有创建日期 → 启用最小宽度回退
提示：想让任务在甘特图上显示精确的时间范围，请在任务编辑页面的「计划日期」字段填写
plannedStart和plannedEnd。
最小宽度回退
对于只有创建时间、没有计划日期的任务，系统会赋予一个最小视觉宽度，防止它们在时间线上压缩成不可见的细线：
- 日视图：最小约 4 小时的视觉宽度，同天的多个任务会自动水平错位，避免完全重叠
- 周/月视图：最小 1 天的宽度
- 季度/年视图：固定 8 像素的色块宽度，确保在宏观视角下仍然可见
这些任务在左侧列表中以 * 标记，悬停时会提示「回退渲染」。
任务条交互
悬停查看详情
将鼠标悬停在任意任务条上，会弹出提示框显示：
- 任务 ID 和标题
- 解析后的开始时间和结束时间
- 是否为回退渲染（仅有创建时间的任务）
点击高亮依赖链
点击任务条后，该任务的整个依赖链会被高亮：
- 前驱任务（该任务依赖谁）和后继任务（谁依赖该任务）保持正常亮度
- 其他无关任务和箭头淡化至 30% 透明度
- 再次点击任务条或点击空白处取消高亮
这在复杂项目中快速定位上下游影响范围时非常有用。
打开任务详情
- 点击左侧列表的「详情」按钮：打开熟悉的任务编辑模态框，可修改任务字段、日期和依赖关系
- 点击右侧任务条：高亮依赖链（如上所述）
依赖箭头
任务之间的依赖关系通过 SVG 贝塞尔曲线箭头可视化：
- 箭头从前驱任务的结束位置指向后继任务的开始位置
- 多个依赖自动错位，减少线条缠绕
- 箭头会随时间粒度切换自适应缩放
- 依赖箭头同样参与「点击高亮」交互
注意：甘特图视图目前只展示依赖关系的可视化，不支持拖拽调整任务时间。修改任务日期请通过左侧「详情」按钮进入任务编辑页面。
列表排序
左侧任务列表的前四列（ID、标题、开始时间、结束时间）支持点击排序：
- 每列表头右侧显示双箭头图标（↑/↓）
- 未激活时为灰色，升序时左箭头高亮，降序时右箭头高亮
- 点击切换升序/降序，点击其他列则按新列排序
- 三种状态外框宽度一致，切换时不引起表头抖动
排序后，右侧甘特条会按新的任务顺序重新布局，但时间位置保持不变。
时间线平移
在时间线区域按住鼠标左右拖拽，即可平移时间轴查看更多日期：
- 向左拖拽查看更早的时间
- 向右拖拽查看更晚的时间
- 平移操作平滑流畅，无页面刷新
暗黑模式支持
甘特图视图完全适配暗黑模式：
- 任务条、时间轴刻度、依赖箭头均使用 Tailwind CSS
dark:变体 - 悬停提示框、高亮状态在暗色背景下依然清晰可辨
- 切换系统主题或手动切换后无需刷新页面
跟踪甘特图
跟踪甘特图在同一行上同时展示计划时间范围和实际任务进度，帮助你直观追踪偏差。
双层渲染
每个任务行绘制两个独立定位的元素，z 轴叠加：
- 底层实际条：状态色实心填充
- In Progress → 蓝色
- Done / Completed → 绿色
- To Do → 灰色
- Blocked → 红色
- Cancelled → 浅灰色
- 上层计划边框：60° 斜线填充框（两层边框：2px 阴影层 + 1px 最终线）
偏差场景
| 偏差场景 | 条件 | 视觉表现 |
|---|---|---|
| 早开始 | actualStart < plannedStart | 实际条从计划框左侧提前开始；左侧溢出为纯色 |
| 正常 | actualStart = plannedStart，actualEnd ≤ plannedEnd | 实际条在框内延伸；重叠区颜色+斜线，未到达尾部纯斜线 |
| 延期 | actualEnd > plannedEnd | 实际条超出计划框右侧；右侧溢出为纯色 |
左侧时间列
工具栏提供 showPlanTime 和 showActualTime 开关：
- Actual Start / Actual End：始终显示实际时间，按
actualStart→actualEnd→createdDate/updatedDate优先级解析 - Planned Start / Planned End：计划时间列，仅在
showPlanTime开启时显示
智能依赖箭头
跟踪模式下，依赖箭头的连接点综合考虑实际时间与计划时间：
- 若实际开始早于计划开始，箭头连接到更早的实际位置
- 若实际结束早于计划开始（罕见），回退到计划结束以保持依赖链连贯
- 箭头颜色统一使用灰色，避免与状态色实际条冲突
交互增强
- 悬停 Tooltip：同时展示计划时间范围、实际时间范围和 fallback 指示器
- 图例：工具栏显示图例说明 — 状态色条=实际、斜线框=计划、箭头=依赖、琥珀色
*=估计时间 - 点击高亮：计划边框层一同参与高亮/淡化
- 默认排序 ID 降序，默认视图日视图
- 加载自动选中首个任务，切换视图自动滚动到选中任务
日期字段建议
为了让甘特图发挥最大价值，建议为关键任务填写计划日期：
| 字段 | 作用 | 填写建议 |
|---|---|---|
plannedStart |
任务计划开始时间 | 任务预计启动日期 |
plannedEnd |
任务计划结束时间 | 任务预计完成日期 |
dueDate |
任务截止日期 | 与 plannedEnd 区分：截止日期是硬性约束，计划结束是预期完成时间 |
actualStart |
实际开始时间 | 系统自动填充，可手动修正 |
actualEnd |
实际结束时间 | 系统自动填充，可手动修正 |
在任务编辑页面的「计划日期」区域可直接填写这些字段。填写后，甘特图会自动使用更精确的时间范围，不再依赖创建日期的回退渲染。