ordo-designer-vue

Vue 3 流程定义设计器:可嵌入宿主应用的 OrdoDesigner 组件库,以及对接 Ordo REST 的本地 playground。

仓库结构

路径 说明
packages/ordo-designer-vue 设计器库(Vue Flow、shadcn 风格 UI、provide/inject 状态,无 Pinia)
apps/playground 开发/演示应用:定义列表、设计页、本地草稿
docs/library-api.md 库集成、主题、OrdoClient / DraftStorage 说明

环境

  • Node ^22.18.0 或 >=24.12.0
  • pnpm

开发

pnpm install
pnpm dev

pnpm dev 会先构建 ordo-designer-vue,再启动 playground(默认 Vite 将 ordo-designer-vue 指向库产物 dist/)。

Playground 需 Ordo 后端;开发时通过 Vite 代理访问 /ordo(见 apps/playground/vite.config.ts)。

脚本

命令 作用
pnpm dev 构建库 + playground 热更新
pnpm build 构建库 + playground 生产包
pnpm type-check 全 workspace 类型检查
pnpm -F ordo-designer-vue build 仅构建库
pnpm -F playground dev 仅启动 playground(需已构建库)

在宿主中使用库

import { OrdoDesigner } from 'ordo-designer-vue'
import 'ordo-designer-vue/style.css'

实现 OrdoClient 与 DraftStorage,传入 OrdoDesigner。可选导出:DraftConflictModal、Button、Badge、Alert、DialogPanel 等,便于列表页与库 UI 一致。

详见 docs/library-api.md。

IDE

VS Code + Vue - Official (Volar)。

S
Description
ordo设计器demo
Readme
269 KiB
Languages
Vue 52.2%
TypeScript 44%
CSS 3.6%
HTML 0.2%