Files

T

0264408andCursor 18239a59ca 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

1.8 KiB

Raw Blame History

ordo-designer-vue 库 API

安装与样式

import { OrdoDesigner } from 'ordo-designer-vue'
import 'ordo-designer-vue/style.css'

主题定制

设计器根节点为 .ordo-designer，亮色/暗色通过 theme prop 或 CSS 变量控制。

组件 prop

<OrdoDesigner theme="dark" ... />

theme="dark" 会在根上添加 class ordo-designer dark，启用暗色 token。

CSS 变量（宿主覆盖）

在引入 style.css 之后覆盖（作用域建议挂在 .ordo-designer 或父级包一层 class）：

.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 等）。

也可单独引入变量表做扩展：

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。

1.8 KiB Raw Blame History Unescape Escape