0264408andCursor
18239a59ca
Extract ordo-designer-vue package with shadcn UI and context-based state; add playground app, library-api docs, and README. Co-authored-by: Cursor <cursoragent@cursor.com>
1.7 KiB
1.7 KiB
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 一致。