[开源]一款专业项目进度管理工具，开源免费的在线甘特图制作平台

艺齐飞

发布于 2025-11-30 11:05:56

6890

文章被收录于专栏：一飞开源一飞开源

一飞开源，介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！

一、开源项目简介

⭐ StarGantt 星甘

开源免费的在线甘特图制作平台

StarGantt（星甘）是一款基于 Vue3 + Element Plus 开发的专业项目进度管理工具，致力于打造开源免费的在线甘特图制作平台。无论你是项目经理、产品经理，还是需要管理个人项目的自由职业者，StarGantt 都能为你提供专业、直观的项目可视化管理体验。

二、开源协议

使用GPL-2.0开源协议

三、界面展示

四、功能概述

星甘StarGantt是一款开源免费的在线甘特图制作平台，致力于打造专业的项目进度管理平台。无论你是项目经理、产品经理，还是需要管理个人项目的自由职业者，都值得试试这款工具。

✨ 核心特性

专业的甘特图功能

多视图模式 - 支持日视图、周视图、月视图、季度视图，满足不同项目周期需求
任务依赖管理 - 支持前置任务设置，自动生成和可视化依赖关系线
拖拽操作 - 支持任务拖拽调整时间、重新排序，操作简单直观

强大的任务管理

丰富的任务属性 - 任务名称、开始时间、工期、完成进度、负责人、相关方
状态管理 - 未开始、进行中、已完成、已暂停、已取消等多种状态
任务分组 - 支持父任务和子任务的层级结构
自定义字段 - 灵活的字段显示/隐藏配置
任务搜索 - 快速定位和筛选任务

现代化的用户界面

类 Outlook 设计 - 借鉴 Microsoft Outlook 的设计语言，专业且易用
响应式布局 - 自适应不同屏幕尺寸
暗色模式 - 支持明暗主题切换（计划中）
多语言支持 - 中英文界面切换（计划中）

实用辅助功能

数据导出 - 支持导出 Excel 格式，方便汇报和备份
多项目管理 - 支持创建和管理多个项目，快速切换
项目收藏 - 收藏重要项目，方便快速访问
权限管理 - 支持用户登录和权限控制

使用场景

StarGantt 适用于多种项目管理场景：

软件开发项目 - 需求分析 → 设计 → 开发 → 测试 → 上线的完整流程管理
产品规划 - 产品路线图、功能迭代计划、发布时间规划
活动策划 - 从前期准备到活动执行的全流程规划
工程项目 - 建筑、装修等需要严格时间控制的项目
学习计划 - 考研、考证等长期学习目标的时间规划
个人事务 - 旅行规划、婚礼筹备等个人项目管理

五、技术选型

快速开始

环境要求

Node.js >= 16.0.0
npm >= 7.0.0

安装

# 克隆项目
git clone StarGantt
# 进入项目目录
cd StarGantt
# 安装依赖
npm install

开发

# 启动开发服务器
npm run dev
# 访问 http://localhost:3000

构建

# 构建生产环境
npm run build

技术栈

前端框架Vue 3 - 渐进式 JavaScript 框架
UI 组件库Element Plus - 基于 Vue 3 的组件库
甘特图引擎DHTMLX Gantt - 专业的甘特图库
状态管理Pinia - Vue 官方推荐的状态管理库
路由管理Vue Router - Vue 官方路由解决方案
HTTP 客户端Axios - 基于 Promise 的 HTTP 库
日期处理Day.js - 轻量级日期处理库
Excel 导出SheetJS - 强大的 Excel 处理库
构建工具Vite - 下一代前端构建工具

项目结构

StarGantt/
├── public/                 # 静态资源
│   ├── favicon.ico
│   └── ...
├── src/
│   ├── api/               # API 接口定义
│   ├── components/        # 公共组件
│   │   ├── GanttChart.vue    # 甘特图核心组件
│   │   ├── LoginModal.vue    # 登录模态框
│   │   └── ...
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia 状态管理
│   ├── services/          # 业务服务层
│   ├── utils/             # 工具函数
│   ├── styles/            # 全局样式
│   ├── views/             # 页面视图
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML 模板
├── vite.config.js         # Vite 配置
├── package.json           # 项目依赖
└── README.md              # 项目文档