@huanban/rulego-editor-vue

RuleGo 编辑器 Vue 3 适配层 — 提供 Vue 组件和 Composables

✨ 特性

• 开箱即用 — 提供 <RuleGoEditor /> 组件，一行代码嵌入编辑器
• Vue 3 Composables — useEditorCore、useEditorTheme、useEditorI18n
• 事件监听 — 支持 @node-click、@ready、@change 等 Vue 事件；保存接管通过 options.onSave
• 完整内置 UI — 工具栏、侧边栏、属性抽屉、设置、AI 助理、运行调试由 core 统一提供
• 独立管理组件 — WorkflowList / WorkflowInfoPanel 可组合出列表、详情和编辑器联动页面
• 响应式状态 — 所有状态自动转为 Vue ref，模板中直接使用
• TypeScript — 完整类型定义
• 兼容 Vue 3.2+ — 支持 Composition API

📦 安装

npm install @huanban/rulego-editor-vue @huanban/rulego-editor-core

# 可选：安装内置 UI 组件
npm install @huanban/rulego-editor-ui

🚀 快速开始

方式一：使用 <RuleGoEditor /> 组件

<template>
  <RuleGoEditor
    height="100vh"
    :data="ruleChainData"
    :components="components"
    :options="editorOptions"
    @node-click="onNodeClick"
    @change="onChange"
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { RuleGoEditor } from '@huanban/rulego-editor-vue'
import '@huanban/rulego-editor-vue/style.css'

const apiBase = ref('http://127.0.0.1:9090/api/v1')
const ruleChainData = ref<any>(null)
const components = ref<any[]>([])

const editorOptions = computed(() => ({
  apiBase: apiBase.value,
  showToolbar: true,
  showSidebar: true,
  showSettingsButton: true,
  showAiChatButton: true,
  showRunButton: true,
}))

const onNodeClick = (node) => console.log('点击节点:', node)
const onChange = () => console.log('画布已变更')
</script>

方式二：使用 useEditorCore Composable

<template>
  <div ref="editorRef" style="height: 100%"></div>
</template>

<script setup lang="ts">
import { useEditorCore } from '@huanban/rulego-editor-vue'

const { core, isReady, loadData, save } = useEditorCore()

watch(isReady, (ready) => {
  if (ready) {
    loadData(myRuleChainData)
  }
})
</script>

📖 API

<RuleGoEditor /> Props

| 属性 | 类型 | 说明 | |------|------|------| | data | RuleChainData \| null | 规则链数据 | | components | RawComponentData | 组件列表，可不传；有 options.apiBase 时会自动请求 /components | | options | Partial<HuanbanRulegoEditorOptions> | 透传 core 配置，如 apiBase/fetchHeaders/onSettingsSubmit/onLoginClick | | height | string \| number | 编辑器高度，默认 100% | | width | string \| number | 编辑器宽度，默认 100% | | theme | string | 主题名称 | | className | string | 自定义 class | | customStyle | Record<string,string \| number> | 自定义内联样式 | | renderNode | (type, data, model) => VNode | 自定义 Headless 节点渲染 |

事件

| 事件 | 参数 | 说明 | |------|------|------| | @save | SaveEventData | 兼容事件；默认保存不依赖它，接管保存请使用 options.onSave | | @node-click | NodeData | 节点点击时触发 | | @ready | — | 编辑器就绪时触发 | | @change | — | 画布数据变化 | | @edge-click | EdgeData | 连线点击 | | @deploy | chainId, action | 部署/下线/重载；部署对应 start，下线对应 stop |

保存协议

默认不要传 options.onSave。只要在 options.apiBase 配置后台地址，保存按钮会直接调用:

POST {apiBase}/rules/:id
GET  {apiBase}/rules/:id

第二次 GET 用于回读校验，只有后端返回的数据与当前画布一致时才会显示已保存。

只有宿主确实要完全接管保存时才在 options 中传 onSave。接管后必须返回明确结果:

const editorOptions = computed(() => ({
  apiBase: apiBase.value,
  onSave: async (data: any) => {
    const id = data?.ruleChain?.id
    const response = await fetch(`${apiBase.value}/rules/${encodeURIComponent(id)}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', ...fetchHeaders() },
      body: JSON.stringify(data),
    })
    return response.ok ? { success: true } : { success: false, message: `HTTP ${response.status}` }
  },
}))

单纯监听 @save 不再短路内置保存。只想打印日志或观察画布变化时，请使用 @change、@node-click 或浏览器调试日志。

<WorkflowList /> 管理列表

WorkflowList 是独立管理组件，不是编辑器。它负责查询、搜索、创建、部署/下线、复制、删除和选择规则链；进入画布编辑需要通过 :on-design 切换到 <RuleGoEditor />。

<template>
  <section class="workspace">
    <WorkflowList
      :api-base="apiBase"
      layout="grid"
      :on-info="workflow => selectedWorkflow = workflow"
      :on-design="openEditor"
    />
    <WorkflowInfoPanel
      :api-base="apiBase"
      :workflow="selectedWorkflow"
    />
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { WorkflowInfoPanel, WorkflowList } from '@huanban/rulego-editor-vue'

const apiBase = 'http://127.0.0.1:9090/api/v1'
const selectedWorkflow = ref<any>(null)

async function openEditor(id: string) {
  const response = await fetch(`${apiBase}/rules/${encodeURIComponent(id)}`)
  const chainData = await response.json()
  console.log('switch to editor with', chainData)
}
</script>

常用属性：

| 属性 | 说明 | |------|------| | layout | 默认 grid 卡片布局；传 list 使用紧凑列表 | | autoOpenAfterCreate | 传了 onDesign 时默认开启；新建成功后自动进入编辑器 | | onDesign | 双击卡片或点击菜单“设计”时触发，宿主在这里打开编辑器 | | onInfo | 单击卡片或点击菜单“信息”时触发，宿主在这里联动详情 |

默认新建弹窗包含 ID、名称、主链/子链、初始状态、调试模式、分类、描述。ID 自动生成，也可手动输入；为兼容后台路由，ID 不能包含 /、\ 或 .。

WorkflowInfoPanel 默认只显示基础信息、输入定义、变量和应用集成。维护验证是扩展能力，不是默认工作流详情的一部分；只有宿主后端已经实现 validate-upstream、schema-diff、repair-plan、patch-preview 这组分析接口时才开启：

<WorkflowInfoPanel
  :api-base="apiBase"
  :workflow="selectedWorkflow"
  show-maintenance
/>

如果后台没有这些接口，保持默认关闭，避免用户点击后出现 404 Not Found。

服务地址、设置和登录

Vue 版通过 :options 传入后台地址、认证和设置回调：

const editorOptions = computed(() => ({
  apiBase: apiBase.value,
  allowedApiOrigins: [new URL(apiBase.value, window.location.origin).origin],
  showSettingsButton: true,
  fetchHeaders: () => {
    const token = localStorage.getItem('token') || localStorage.getItem('access_token')
    return token ? { Authorization: `Bearer ${token}` } : {}
  },
  onSettingsSubmit: ({ apiBase: nextApiBase }: { apiBase: string }) => {
    localStorage.setItem('huanban_rulego_api_base', nextApiBase)
    apiBase.value = nextApiBase
  },
  onLoginClick: () => window.dispatchEvent(new CustomEvent('open-login')),
  onAuthExpired: () => window.dispatchEvent(new CustomEvent('open-login')),
  clearToken: () => {
    localStorage.removeItem('token')
    localStorage.removeItem('access_token')
    localStorage.removeItem('username')
  },
}))

如果不传 onLoginClick，内置设置页会打开默认登录弹窗，并请求 POST {apiBase}/login。完整新项目接入说明见根目录 docs/CLIENT_INTEGRATION.md。

useEditorCore(options?) 返回值

| 属性 | 类型 | 说明 | |------|------|------| | core | EditorCore | 编辑器核心实例 | | isReady | Ref<boolean> | 编辑器是否就绪 | | isDirty | Ref<boolean> | 数据是否已修改 | | loadData | (data) => void | 加载规则链数据 | | save | () => void | 触发保存 | | on | (event, handler) => void | 监听事件 |

🔗 相关包

• @huanban/rulego-editor-core — 核心引擎 (必需)
• @huanban/rulego-editor-ui — UI 组件集 (可选)
• @huanban/rulego-editor-react — React 适配层

📄 协议

Apache-2.0