jordium-gantt-vue3

🌐 Languages: 📖 English Documentation | 📖 中文文档

现代化的 Vue 3 甘特图组件库，为项目管理和任务调度提供完整解决方案

🌐 在线体验

🎯 立即体验 Github在线Demo →

在线 Demo 包含完整功能展示：任务管理、里程碑、主题切换、国际化等

🎨 主题支持

亮色主题

暗色主题

🚀 插件特点

• 📊 完整功能: 任务管理、里程碑追踪、依赖关系、进度可视化
• 🎨 主题切换: 内置亮色/暗色主题，支持自定义主题变量
• 🖱️ 交互丰富: 拖拽调整、大小缩放、双击编辑、右键菜单
• 🌍 国际化: 内置中英文，支持自定义语言包
• 📱 响应式: 适配桌面和移动端，流畅的触控体验
• ⚡ 高性能: 虚拟滚动、懒加载、优化渲染
• 🔧 可扩展: 丰富的 API 接口，支持自定义组件和事件
• 💎 类型安全: 完整 TypeScript 支持，开发体验更佳

📦 安装

1# npm
2npm install jordium-gantt-vue3
3
4# yarn  
5yarn add jordium-gantt-vue3
6
7# pnpm
8pnpm add jordium-gantt-vue3

📄 许可证

MIT License © 2025 JORDIUM.COM

---

💡 徽章下载：

• npm 版本徽章：https://img.shields.io/npm/v/jordium-gantt-vue3.svg
• MIT 许可证徽章：https://img.shields.io/badge/license-MIT-blue.svg
• Vue 版本徽章：https://img.shields.io/badge/vue-3.x-green.svg
• TypeScript 徽章：https://img.shields.io/badge/typescript-5.x-blue.svg

📁 项目结构

jordium-gantt-vue3/
├── src/                      # 源码目录
│   ├── components/           # 核心组件
│   │   ├── GanttChart.vue   # 主入口组件
│   │   ├── TaskList.vue     # 任务列表
│   │   ├── Timeline.vue     # 时间轴
│   │   ├── TaskBar.vue      # 任务条
│   │   ├── MilestonePoint.vue # 里程碑
│   │   └── ...              # 其他组件
│   ├── models/              # 数据模型
│   │   ├── classes/         # 类定义
│   │   └── configs/         # 配置接口
│   ├── composables/         # 组合式函数
│   ├── styles/              # 样式文件
│   └── index.ts             # 导出入口
├── demo/                    # 开发演示
├── dist/                    # 构建产物
├── docs/                    # 文档
└── package.json

🔧 API 参考

GanttChart 属性

属性名	类型	默认值	说明
tasks	Task[]	[]	任务数据数组
milestones	Task[]	[]	里程碑数据数组
editComponent	any	-	自定义编辑组件
useDefaultDrawer	boolean	true	是否使用默认编辑抽屉
showToolbar	boolean	true	是否显示工具栏
toolbarConfig	ToolbarConfig	{}	工具栏配置
localeMessages	Partial<Messages['zh-CN']>	-	自定义多语言配置
onTaskDoubleClick	(task: Task) => void	-	任务双击事件回调
onTaskDelete	(task: Task) => void	-	任务删除事件回调
onTaskUpdate	(task: Task) => void	-	任务更新事件回调
onTaskAdd	(task: Task) => void	-	任务添加事件回调
onMilestoneSave	(milestone: Task) => void	-	里程碑保存事件回调
onMilestoneDelete	(milestoneId: number) => void	-	里程碑删除事件回调
onMilestoneIconChange	(milestoneId: number, icon: string) => void	-	里程碑图标变更事件回调
onAddTask	() => void	-	新增任务工具栏事件回调
onAddMilestone	() => void	-	新增里程碑工具栏事件回调
onTodayLocate	() => void	-	定位今天工具栏事件回调
onExportCsv	() => boolean | void	-	导出CSV工具栏事件回调
onExportPdf	() => void	-	导出PDF工具栏事件回调
onLanguageChange	(lang: 'zh-CN' | 'en-US') => void	-	语言切换工具栏事件回调
onThemeChange	(isDark: boolean) => void	-	主题切换工具栏事件回调
onFullscreenChange	(isFullscreen: boolean) => void	-	全屏切换工具栏事件回调

GanttChart 事件

事件名	参数	说明
taskbar-drag-end	task: Task	任务条拖拽结束
taskbar-resize-end	task: Task	任务条大小调整结束
milestone-drag-end	milestone: Task	里程碑拖拽结束

数据类型

核心类型 (src/models/classes)

Task 任务类型

1interface Task {
2  id: number                    // 任务唯一标识
3  name: string                  // 任务名称
4  predecessor?: string          // 前置任务ID
5  assignee?: string            // 负责人
6  startDate?: string           // 开始日期 (YYYY-MM-DD格式)
7  endDate?: string             // 结束日期 (YYYY-MM-DD格式)
8  progress?: number            // 完成进度 (0-100)
9  estimatedHours?: number      // 预估工时
10  actualHours?: number         // 实际工时
11  parentId?: number            // 上级任务ID
12  children?: Task[]            // 子任务数组（支持嵌套结构）
13  collapsed?: boolean          // 是否折叠子任务
14  isParent?: boolean           // 是否为父级任务
15  type?: string               // 任务类型 (task/story/bug/milestone)
16  description?: string         // 任务描述
17  icon?: string               // 任务图标
18  level?: number              // 任务层级
19}

Milestone 里程碑类型

1// 里程碑实际上是 Task 类型的特殊用法
2// 具有 type: 'milestone' 属性的 Task 对象
3interface Milestone extends Task {
4  type: 'milestone'            // 必须为 'milestone'
5  startDate: string           // 里程碑日期 (必填)
6  endDate?: string            // 结束日期 (可选，通常与startDate相同)
7}

Language 语言类型

1type Language = 'zh' | 'en'   // 支持的语言类型
2type Locale = 'zh-CN' | 'en-US' // 完整的语言区域标识

配置类型 (src/models/configs)

TimelineConfig 时间轴配置

1interface TimelineConfig {
2  startDate: Date              // 时间轴开始日期
3  endDate: Date                // 时间轴结束日期
4  zoomLevel: number            // 缩放级别
5}

ToolbarConfig 工具栏配置

1interface ToolbarConfig {
2  showAddTask?: boolean        // 是否显示新增任务按钮
3  showAddMilestone?: boolean   // 是否显示新增里程碑按钮
4  showTodayLocate?: boolean    // 是否显示定位今天按钮
5  showExportCsv?: boolean      // 是否显示导出CSV按钮
6  showExportPdf?: boolean      // 是否显示导出PDF按钮
7  showLanguage?: boolean       // 是否显示语言切换按钮
8  showTheme?: boolean          // 是否显示主题切换按钮
9  showFullscreen?: boolean     // 是否显示全屏切换按钮
10  showTimeScale?: boolean      // 是否显示时间刻度切换按钮组(日|周|月)
11}

组合式函数 (src/composables)

useI18n 国际化工具

1// 提供多语言支持
2const { 
3  locale,           // 当前语言
4  setLocale,        // 切换语言
5  t,               // 翻译函数
6  formatYearMonth  // 年月格式化
7} = useI18n()
8
9// 支持的语言
10type Locale = 'zh-CN' | 'en-US'

useMessage 消息提示工具

1// 提供全局消息提示
2const { showMessage } = useMessage()
3
4// 消息类型
5type MessageType = 'success' | 'error' | 'warning' | 'info'
6
7// 使用示例
8showMessage('操作成功', 'success')

💻 基本使用

简单示例

1<script setup lang="ts">
2import { ref } from 'vue'
3import { GanttChart } from 'jordium-gantt-vue3'
4import 'jordium-gantt-vue3/dist/style.css'
5
6const tasks = ref([
7  {
8    id: 1,
9    name: '项目启动',
10    startDate: '2025-01-01',
11    endDate: '2025-01-15',
12    progress: 80,
13    assignee: '张三'
14  },
15  {
16    id: 2,
17    name: '需求分析',
18    startDate: '2025-01-16',
19    endDate: '2025-01-30',
20    progress: 60,
21    assignee: '李四',
22    predecessor: '1'
23  }
24])
25
26const milestones = ref([
27  {
28    id: 1,
29    name: '项目里程碑',
30    startDate: '2025-01-31',
31    type: 'milestone'
32  }
33])
34</script>
35
36<template>
37  <div style="height: 600px;">
38    <GanttChart 
39      :tasks="tasks" 
40      :milestones="milestones"
41    />
42  </div>
43</template>

自定义事件处理

1<script setup lang="ts">
2import { GanttChart } from 'jordium-gantt-vue3'
3
4// 自定义双击处理
5const handleTaskDoubleClick = (task) => {
6  console.log('双击任务:', task)
7  // 打开自定义编辑界面
8  router.push(`/task/${task.id}/edit`)
9}
10
11// 自定义删除处理
12const handleTaskDelete = async (task) => {
13  const confirmed = await showConfirm(`确定删除任务 "${task.name}" 吗？`)
14  if (confirmed) {
15    await api.deleteTask(task.id)
16    // 刷新任务列表
17    refreshTasks()
18  }
19}
20
21// 监听拖拽事件
22const handleTaskDragEnd = (task) => {
23  console.log('任务拖拽结束:', task)
24  // 保存任务时间变更
25  api.updateTask(task)
26}
27</script>
28
29<template>
30  <GanttChart
31    :tasks="tasks"
32    :on-task-double-click="handleTaskDoubleClick"
33    :on-task-delete="handleTaskDelete"
34    :use-default-drawer="false"
35    @taskbar-drag-end="handleTaskDragEnd"
36  />
37</template>

主题和国际化

1<script setup lang="ts">
2import { ref } from 'vue'
3import { GanttChart } from 'jordium-gantt-vue3'
4
5// 工具栏配置
6const toolbarConfig = {
7  showLanguage: true,
8  showTheme: true,
9  showAddTask: true,
10  showAddMilestone: true,
11  showTodayLocate: true,
12  showExportCsv: true,
13  showExportPdf: true,
14  showFullscreen: true,
15  showTimeScale: true  // 控制日|周|月时间刻度按钮组的可见性
16}
17
18// 自定义多语言配置
19const customLocaleMessages = {
20  taskName: '自定义任务名称',
21  addTask: '自定义新增任务'
22}
23
24// 处理工具栏事件
25const handleLanguageChange = (lang) => {
26  console.log('语言切换到:', lang)
27}
28
29const handleThemeChange = (isDark) => {
30  console.log('主题切换到:', isDark ? '暗色' : '亮色')
31}
32</script>
33
34<template>
35  <GanttChart
36    :tasks="tasks"
37    :milestones="milestones"
38    :toolbar-config="toolbarConfig"
39    :locale-messages="customLocaleMessages"
40    :on-language-change="handleLanguageChange"
41    :on-theme-change="handleThemeChange"
42  />
43</template>

🤝 贡献与合作

参与贡献

我们欢迎社区贡献！如果你想参与项目开发：

1. Fork 本仓库
2. 创建 你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交 你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送 到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

报告问题

如果你发现了 bug 或有功能建议：

• 📬 提交 Github Issue
• 📬 提交 Gitee Issue
• 📧 发送邮件至：ning.li@jordium.com / nelson820125@gmail.com / lining820125@163.com

商业合作

我们提供专业的技术支持和定制开发服务：

• 🏢 企业定制: 根据业务需求定制系统开发
• 💼 技术咨询: 业务及架构设计解决方案咨询

联系方式：

• 📧 商务邮箱：ning.li@jordium.com / nelson820125@gmail.com

开发环境

1# 克隆项目
2git clone https://github.com/nelson820125/jordium-gantt-vue3.git
3
4# 安装依赖
5npm install
6
7# 启动开发服务器
8npm run dev
9
10# 构建库文件
11npm run build:lib
12
13# 运行测试
14npm run test

---

🔗 相关链接

• GitHub 仓库
• 更新日志

💡 提示: 如果这个项目对你有帮助，请给我们一个 ⭐ Star！