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`。