一个功能强大的纯前端甘特图（横道图）管理工具，支持项目任务的可视化管理、拖拽编辑、Excel导入导出等完整功能。

• ✅ 添加任务 - 创建新的项目任务，设置名称、时间、分组、颜色
• ✅ 编辑任务 - 修改已有任务的详细信息
• ✅ 删除任务 - 删除不需要的任务（支持批量删除）
• ✅ 复制任务 - 快速复制现有任务创建相似任务

• ✅ 智能时间计算 - 自动计算结束时间，根据开始时间和持续时间
• ✅ 拖拽调整 - 通过拖拽任务条调整任务开始时间
• ✅ 调整持续时间 - 拖拽任务条左右边缘调整持续时间
• ✅ 批量移动 - 选中多个任务后左移/右移调整时间

• ✅ 横向缩放 - 放大/缩小时间轴横向显示比例
• ✅ 纵向缩放 - 调整任务行高度
• ✅ 任务移动 - 上/下移动任务调整显示顺序
• ✅ 视图切换 - 年月日视图 ↔ 工程图视图
• ✅ 全局缩放 - 整体放大/缩小整个横道图

• ✅ 分组创建 - 创建自定义任务分组
• ✅ 分组删除 - 删除不需要的分组
• ✅ 批量分组 - 将选中的任务批量更改分组
• ✅ 颜色标记 - 为不同分组或任务设置不同颜色

• ✅ Excel导出 - 将任务数据导出为Excel文件
• ✅ Excel导入 - 从Excel文件导入任务数据
• ✅ 项目信息 - 实时显示开工时间、竣工时间、总工期

• ✅ Ctrl + A - 全选所有任务
• ✅ Ctrl + C - 复制选中的任务
• ✅ Ctrl + V - 粘贴复制的任务

1. 双击 index.html 文件，在浏览器中打开即可使用
2. 无需安装任何软件，纯前端实现

# 使用Python启动本地服务器
python -m http.server 8000

# 或使用Node.js
npx http-server

# 然后访问 http://localhost:8000

项目已配置为CodeNB开发环境，直接启动容器即可：

# 在CodeNB平台中打开项目
# 系统会自动构建Docker环境并启动服务

1. 点击工具栏的"添加"按钮
2. 填写任务信息：
   • 分组名：选择或创建分组
   • 工作名称：输入任务名称
   • 持续时间：输入任务天数
   • 开始时间：选择开始日期
   • 颜色：选择任务条颜色
3. 点击"确定"保存

1. 点击选中要编辑的任务（可按住Ctrl多选）
2. 点击"编辑"按钮（或直接双击任务行）
3. 修改任务信息
4. 点击"确定"保存

方法1：拖拽任务条

• 鼠标按住任务条拖拽到新的位置

方法2：拖拽边缘调整

• 鼠标放在任务条左/右边缘，出现双向箭头后拖拽调整持续时间

方法3：精确移动

• 选中任务后，点击工具栏的"左移"/"右移"按钮，按标尺步长移动

1. 点击"分组"按钮
2. 在弹窗中可以：
   • 输入新名称后点击"添加分组"
   • 点击分组右侧的"删除"删除分组
   • 选择分组后点击"更改选中任务分组"批量修改

导出Excel：

1. 点击"导出"按钮
2. 浏览器会自动下载Excel文件

导入Excel：

1. 准备Excel文件，包含以下列：
   • 分组名
   • 工作名称
   • 持续时间
   • 开始时间
   • 结束时间
2. 点击"导入"按钮选择文件

• 标尺步长：设置时间轴每一刻度对应的天数（默认5天）
• 横向拉伸/缩短：调整时间轴横向显示比例
• 纵向拉伸/缩短：调整任务行高度
• 上移/下移：移动选中任务的位置
• 左移/右移：按刻度移动选中的任务时间
• 添加/编辑/删除：任务CRUD操作
• 复制：复制选中的任务到剪贴板
• 分组：打开分组管理弹窗
• 颜色：打开颜色选择弹窗
• 导出/导入：Excel文件操作
• 放大/缩小：整体缩放横道图
• 年月日/工程图：切换时间轴显示模式

年月日模式：

• 显示为单行，按照标尺步长显示数字（0,5,10,15...）

工程图模式：

• 两行显示：上行显示月份（2025/08），下行显示日期（2,4,6,8...）

• HTML5 - 页面结构
• CSS3 - 样式和动画
• JavaScript (ES6+) - 核心逻辑
• SheetJS (xlsx) - Excel文件处理

📂 横道图管理系统
├── 📄 index.html      # 主页面
├── 📄 style.css       # 样式文件
├── 📄 script.js       # JavaScript核心逻辑
├── 📄 demo.html       # 演示说明页面
├── 📄 readme.md       # 使用说明
└── 📄 CLAUDE.md       # 开发文档

class GanttChart {
    - tasks: 任务数组
    - groups: 分组数组
    - selectedTasks: 选中的任务索引
    - scaleStep: 标尺步长
    - horizontalScale: 横向缩放比例
    - verticalScale: 纵向缩放比例
    - viewMode: 视图模式（date/project）
    - zoomLevel: 整体缩放级别
}

Task = {
    group: string,      // 分组名
    name: string,       // 工作名称
    duration: number,   // 持续时间（天）
    startDate: string,  // 开始日期（YYYY-MM-DD）
    endDate: string,    // 结束日期（YYYY-MM-DD）
    color: string       // 任务条颜色（#RRGGBB）
}

1. 添加3个任务：
   • 需求分析（10天）
   • 系统设计（15天）
   • 开发实现（30天）
2. 拖拽调整时间关系
3. 导出Excel查看结果

1. 创建分组：前端、后端、测试
2. 添加任务到不同分组
3. 设置不同颜色
4. 切换工程图视图查看

1. 准备Excel文件：

   | 分组名 | 工作名称 | 持续时间 | 开始时间   | 结束时间   |
   |--------|----------|----------|------------|------------|
   | 规划   | 项目启动 | 5        | 2025-01-01 | 2025-01-05 |
   | 规划   | 需求收集 | 10       | 2025-01-06 | 2025-01-15 |
   

2. 点击"导入"选择文件
3. 查看生成的横道图

在 script.js 中修改构造函数：

constructor() {
    this.tasks = [];
    this.groups = ['规划', '设计', '开发', '测试'];
    this.selectedTasks = new Set();
    this.scaleStep = 5;  // 修改默认标尺步长
    this.horizontalScale = 1;
    this.verticalScale = 1;
    this.viewMode = 'date'; // 修改默认视图模式
    this.zoomLevel = 1;
}

在 script.js 中修改颜色配置：

// 默认颜色
const defaultColors = [
    '#4285f4', '#34a853', '#fbbc05', '#ea4335',
    '#9c27b0', '#00bcd4', '#ff9800', '#795548'
];

在 style.css 中调整：

.task-bar {
    height: 24px;  /* 修改任务条高度 */
    /* ... */
}

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+

A：确保Excel文件包含"分组名、工作名称、持续时间、开始时间、结束时间"这些列，日期格式为YYYY-MM-DD。

A：点击任务行选中后，确保鼠标在任务条上（蓝色/彩色条）再拖拽。移动时鼠标指针会变为手型。

A：创建第一个任务后，选中它点击"复制"按钮，然后重复点击"粘贴"（或Ctrl+V），最后逐个编辑调整。

A：项目信息根据所有任务自动计算。确保所有任务都有正确的开始/结束时间。

A：定期点击"导出"按钮将数据保存为Excel文件，需要时可以"导入"恢复。

• 支持任务依赖关系设置
• 添加里程碑标记功能
• 支持任务进度百分比显示
• 添加任务描述和附件
• 支持多人协作编辑
• 添加打印预览功能
• 支持JSON格式导入导出

• 代码行数：约1000行JavaScript + 500行CSS
• 功能点数：26个工具按钮，支持完整CRUD操作
• 浏览器兼容性：现代浏览器全兼容
• 响应式设计：支持PC和移动端
• 零依赖：仅需xlsx库支持Excel功能

点击下方链接立即开始管理您的项目：

🚀 打开横道图系统

或查看演示说明： 📖 查看功能演示

详细技术文档请查看：CLAUDE.md

欢迎提交Issue和Pull Request来改进这个项目！

本项目采用 MIT 许可证。详见项目说明。

---

最后更新：2025-10-29 | 版本：v1.0.0 | 作者：浮浮酱 (幽浮喵)