HQY

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

hqy 发表于2025-11-04 23:08:39 浏览5 评论0

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

一、开源项目简介

⭐ 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              # 项目文档