# 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)。