Jordium GanttChart 是一个基于 Vue 3 的甘特图组件,主要用于项目管理、生产排程(APS)、资源调度等中后台系统。
在 v1.7.1 版本中,组件围绕一个核心目标进行了升级:
让甘特图从“功能可用”,进化为“系统级可控组件”。
✨ 本次更新重点
一句话总结:
Props 负责状态,Expose 负责行为,组件职责更清晰。
🧩 一、核心能力 Props 化(状态驱动)
GanttChart 新增以下 Props,用于外部统一控制组件状态:
locale
theme
timeScale
fullscreen
expandAll
适合场景:
- 多语言系统统一切换
- 全局主题控制(亮 / 暗)
- 工具栏切换时间维度
- 外部按钮控制全屏
- 项目结构一键展开 / 收起
👉 甘特图不再是「自己维护状态的组件」,而是可以被上层系统托管。
🎮 二、Expose API(行为驱动)
在 Props 之外,通过 defineExpose 提供一组 imperative API,解决复杂交互场景。
国际化
setLocale()
currentLocale()
主题 & 时间维度
setTheme()
currentTheme()
setTimeScale()
currentScale()
zoomIn()
zoomOut()
全屏控制
toggleFullscreen()
enterFullscreen()
exitFullscreen()
isFullscreen()
展开 / 收起
toggleExpandAll()
expandAll()
collapseAll()
isExpandAll()
滚动定位
scrollToToday()
scrollToTask(taskId)
scrollToDate(date)
👉 非常适合工具栏、快捷键、跨组件联动。
🧱 三、ContextMenu 声明式重构
TaskList / TaskBar 的右键菜单从「配置式」升级为「组件式」:
TaskListContextMenuTaskBarContextMenu
支持:
-
default slot自定义菜单内容 -
是否启用控制:
enable-task-list-context-menuenable-task-bar-context-menu
好处:
- 菜单逻辑解耦
- 更符合 Vue 组件组合思维
- 易扩展、易复用
🛠 四、工程结构优化
TaskList 子组件拆分
- 降低单文件复杂度
- 职责更清晰
- 为后续功能(虚拟滚动 / 性能优化)铺路
这是一个偏工程质量但非常关键的改动。
🔒 五、依赖升级
升级并修复以下依赖的安全问题:
happy-domjspdfvitest
📦 项目地址
👉 GitHub:
github.com/nelson82012…
👉 Gitee:
gitee.com/jordium/jor…
👉 Gitee Demo: jordium.gitee.io/jordium-gan…
👉 Github Demo: nelson820125.github.io/jordium-gan…
🧠 一点设计思考
在复杂中后台中:
- 状态往往由全局系统管理
- 行为更适合通过显式 API 触发
这也是 1.7.1 版本将 Props 与 Expose 明确区分的原因。
演示视频
如果你正在做:
- 项目管理系统
- APS / 生产排程
- 数字孪生
- 复杂中后台
欢迎 Star / Issue / 交流设计思路。