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>
53 lines
1.7 KiB
Markdown
53 lines
1.7 KiB
Markdown
# 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](https://pnpm.io/)
|
||
|
||
## 开发
|
||
|
||
```sh
|
||
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（需已构建库） |
|
||
|
||
## 在宿主中使用库
|
||
|
||
```ts
|
||
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](./docs/library-api.md)。
|
||
|
||
## IDE
|
||
|
||
[VS Code](https://code.visualstudio.com/) + [Vue - Official (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)。
|