feat(process-designer): [process-designer] add BPMN process designer component #11

Yeuvoir · 2026-04-28T19:21:19+08:00

Yeuvoir commented

2026-04-28 19:21:19 +08:00

First-time contributor

关联 Issue

Closes #115507 — 实现 BPMN 流程设计器组件

变更概要

基于 bpmn-js 实现 <tiny-process-designer>,严格遵循 renderless / vue / theme 三层架构:

renderless: packages/renderless/src/process-designer/{index,vue}.ts
vue: packages/vue/src/process-designer/(独立子包 @opentiny/vue-process-designer)
theme: packages/theme/src/process-designer/{index,vars}.less,20+ CSS 变量
i18n: 中英文 processDesigner 文案
demos: basic-usage / readonly / events 三组(Options + Composition API 双版本)+ Playwright spec
docs: webdoc + 中英 md + 完整 API 描述

能力清单

加载 / 保存 BPMN 2.0 XML、导出 SVG
缩放(放大 / 缩小 / 适配画布)、撤销 / 重做(按钮 disabled 同步)
只读模式自动切换到 bpmn-js Viewer
下载 .bpmn / .svg 文件
透传 13 个 bpmn-js 事件 + 自定义 ready / import-done / save-xml 等
getModeler() 暴露底层实例
toolbar slot 支持自定义工具栏

范围说明(本 PR 不含)

独立 tiny-bpmn 增强库(直接放 renderless,后续可拆)
自定义属性面板 / palette 扩展
Vue 2 实机验证(代码走 vue-common 适配,理论兼容)

测试计划

pnpm i 安装新增 bpmn-js 依赖
pnpm dev → 访问 /#/process-designer/basic-usage,确认画布渲染、工具栏可用
验证 readonly demo 无工具栏
验证 events demo 选中节点能拿到 id
CI E2E 应自动触发(标题已带 [process-designer])

## 关联 Issue Closes #115507 — 实现 BPMN 流程设计器组件 ## 变更概要基于 `bpmn-js` 实现 `<tiny-process-designer>`,严格遵循 renderless / vue / theme 三层架构: - **renderless**: `packages/renderless/src/process-designer/{index,vue}.ts` - **vue**: `packages/vue/src/process-designer/`(独立子包 `@opentiny/vue-process-designer`) - **theme**: `packages/theme/src/process-designer/{index,vars}.less`,20+ CSS 变量 - **i18n**: 中英文 `processDesigner` 文案 - **demos**: basic-usage / readonly / events 三组(Options + Composition API 双版本)+ Playwright spec - **docs**: webdoc + 中英 md + 完整 API 描述 ## 能力清单 - 加载 / 保存 BPMN 2.0 XML、导出 SVG - 缩放(放大 / 缩小 / 适配画布)、撤销 / 重做(按钮 disabled 同步) - 只读模式自动切换到 `bpmn-js Viewer` - 下载 `.bpmn` / `.svg` 文件 - 透传 13 个 bpmn-js 事件 + 自定义 `ready` / `import-done` / `save-xml` 等 - `getModeler()` 暴露底层实例 - `toolbar` slot 支持自定义工具栏 ## 范围说明(本 PR 不含) - 独立 `tiny-bpmn` 增强库(直接放 renderless,后续可拆) - 自定义属性面板 / palette 扩展 - Vue 2 实机验证(代码走 vue-common 适配,理论兼容) ## 测试计划 - [ ] `pnpm i` 安装新增 `bpmn-js` 依赖 - [ ] `pnpm dev` → 访问 `/#/process-designer/basic-usage`,确认画布渲染、工具栏可用 - [ ] 验证 readonly demo 无工具栏 - [ ] 验证 events demo 选中节点能拿到 id - [ ] CI E2E 应自动触发(标题已带 `[process-designer]`)

Yeuvoir added 1 commit 2026-04-28 19:21:21 +08:00

2f02d20dc5 feat(process-designer): [process-designer] add BPMN process designer component

Wraps bpmn-js to provide a BPMN 2.0 diagram editor following the
renderless / vue / theme three-layer architecture. Supports XML / SVG
import & export, zoom, undo / redo, readonly mode (Viewer), and
forwards bpmn-js events. Closes opentiny/tiny-vue#115507.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

This pull request can be merged automatically.

This branch is out-of-date with the base branch

You are not authorized to merge this pull request.

You can also view command line instructions.

Step 1:

From your project repository, check out a new branch and test the changes.

git checkout -b Yeuvoir-feat/process-designer dev

git pull feat/process-designer

Step 2:

Merge the changes and update on Gitea.

git checkout dev

git merge --no-ff Yeuvoir-feat/process-designer

git push origin dev

Sign in to join this conversation.

No reviewers

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: opentiny/tiny-vue#11