feat: split Ordo designer into library monorepo

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>
2026-09-29 15:22:59 +08:00
parent 43b4a83407
commit 18239a59ca
106 changed files with 4000 additions and 2038 deletions
@@ -1,42 +1,52 @@
-# ordo-designer-demo
+# ordo-designer-vue

-This template should help get you started developing with Vue 3 in Vite.
+Vue 3 流程定义设计器：可嵌入宿主应用的 `OrdoDesigner` 组件库，以及对接 Ordo REST 的本地 playground。

-## Recommended IDE Setup
+## 仓库结构

-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+| 路径 | 说明 |
+|------|------|
+| `packages/ordo-designer-vue` | 设计器库（Vue Flow、shadcn 风格 UI、provide/inject 状态，无 Pinia） |
+| `apps/playground` | 开发/演示应用：定义列表、设计页、本地草稿 |
+| `docs/library-api.md` | 库集成、主题、`OrdoClient` / `DraftStorage` 说明 |

-## Recommended Browser Setup
+## 环境

- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+- Node `^22.18.0` 或 `>=24.12.0`
+- [pnpm](https://pnpm.io/)

-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
+## 开发

 ```sh
 pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
 pnpm dev
 ```

-### Type-Check, Compile and Minify for Production
+`pnpm dev` 会先构建 `ordo-designer-vue`，再启动 playground（默认 Vite 将 `ordo-designer-vue` 指向库产物 `dist/`）。

-```sh
-pnpm build
+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)。