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
@@ -0,0 +1,69 @@
+# ordo-designer-vue 库 API
+
+## 安装与样式
+
+```ts
+import { OrdoDesigner } from 'ordo-designer-vue'
+import 'ordo-designer-vue/style.css'
+```
+
+## 主题定制
+
+设计器根节点为 `.ordo-designer`，亮色/暗色通过 **`theme` prop** 或 CSS 变量控制。
+
+### 组件 prop
+
+```vue
+<OrdoDesigner theme="dark" ... />
+```
+
+`theme="dark"` 会在根上添加 class `ordo-designer dark`，启用暗色 token。
+
+### CSS 变量（宿主覆盖）
+
+在引入 `style.css` **之后**覆盖（作用域建议挂在 `.ordo-designer` 或父级包一层 class）：
+
+```css
+.ordo-designer {
+  --ordo-primary: #7c3aed;
+  --ordo-ring: #7c3aed;
+  --ordo-background: #fafafa;
+}
+```
+
+常用变量见 `packages/ordo-designer-vue/src/styles/theme.css`（`--ordo-background`、`--ordo-foreground`、`--ordo-card`、`--ordo-border`、`--ordo-primary`、`--ordo-canvas` 等）。
+
+也可单独引入变量表做扩展：
+
+```ts
+import 'ordo-designer-vue/theme.css'
+```
+
+### 说明
+
+- 工具栏、属性面板、弹层等已接 token；流程节点卡片仍保留类型色（sky/amber 等）以便区分步骤种类。
+- 画布网格与背景随 `--ordo-canvas` / `--ordo-canvas-grid` 变化。
+
+## OrdoDesigner
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| `client` | `OrdoClient` | 必填，后端 API |
+| `drafts` | `DraftStorage` | 必填，本地草稿存储 |
+| `definitionId` | `string?` | 流程 id |
+| `version` | `number?` | 历史版本（只读） |
+| `source` | `string?` | `draft` / `published` |
+| `readOnly` | `boolean?` | 只读，默认可由 `version` 推导 |
+| `theme` | `'light' \| 'dark'?` | 默认 light |
+
+| Event | 说明 |
+|-------|------|
+| `back` | 返回列表 |
+| `navigate` | 切换 `definitionId` |
+| `published` | 发布成功 |
+
+`defineExpose`: `confirmLeave`, `isDirty`, `flushAutosave`
+
+## OrdoClient
+
+见 `packages/ordo-designer-vue/src/client.ts`。
@@ -7,7 +7,7 @@
 - 节点卡片展示候选人 / policy / action / due
 - 校验错误挂到节点和边上，不只 toast 第一条
 - 草稿 vs 已发布：可丢弃本地、对比后再打开
- 切定义不清空 Pinia，避免闪旧图
+- 切定义不清空设计器 context，避免闪旧图
 - 脏标记 + 离开未保存提示

 ## P1 好用
@@ -29,5 +29,5 @@
 - 引擎 JSON 预览 / 导出
 - 列表里同一 id 的草稿与已发布关系
 - 统一 loading / 网络错误
- 属性面板 n-form 校验态
+- 属性面板表单校验态
 - 自动保存草稿