Jordium GanttChart v1.7.1:一次围绕 Props 与 Expose 的 Vue 3 组件设计升级

56 阅读2分钟

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 的右键菜单从「配置式」升级为「组件式」:

  • TaskListContextMenu
  • TaskBarContextMenu

支持:

  • default slot 自定义菜单内容

  • 是否启用控制:

    • enable-task-list-context-menu
    • enable-task-bar-context-menu

好处:

  • 菜单逻辑解耦
  • 更符合 Vue 组件组合思维
  • 易扩展、易复用

🛠 四、工程结构优化

TaskList 子组件拆分

  • 降低单文件复杂度
  • 职责更清晰
  • 为后续功能(虚拟滚动 / 性能优化)铺路

这是一个偏工程质量但非常关键的改动。


🔒 五、依赖升级

升级并修复以下依赖的安全问题:

  • happy-dom
  • jspdf
  • vitest

📦 项目地址

👉 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 明确区分的原因。


演示视频

www.bilibili.com/video/BV1Bi…


如果你正在做:

  • 项目管理系统
  • APS / 生产排程
  • 数字孪生
  • 复杂中后台

欢迎 Star / Issue / 交流设计思路。