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>
70 lines
1.8 KiB
Markdown
70 lines
1.8 KiB
Markdown
# 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`。
|