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