基础用法

通过 Vue 方式引入 RuleGoEditor 组件：

<template>
  <RuleGoEditor
    ref="ruleGoEditorRef"
    :data="data"
    :options="options"
    :extensions="extensions"
    @saveOk="onSaveOk"
    @saveError="onSaveError"
  />
</template>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import { ref } from 'vue'

// RuleGoEditor 引用，用于调用组件暴露的方法
const ruleGoEditorRef = ref()

// 规则链数据
const data = ref()

// 配置选项
const options = ref({
  url: 'http://127.0.0.1:9090',
  loadComponentsFromApi: true,
})

// 扩展
const extensions = ref()

// 保存成功回调
const onSaveOk = (data) => {
  console.log('保存成功', data)
}

// 保存失败回调
const onSaveError = (data, e) => {
  console.error('保存失败', data, e)
}
</script>

组件 Props

属性	类型	必选	说明
data	object	否	RuleGo 规则链配置数据，用于渲染流程图
options	object	否	编辑器配置选项，详见下方完整配置表
extensions	array	否	LogicFlow 扩展插件数组

---

data 属性

data 属性接受 RuleGo 规则链配置 JSON 对象，用于渲染流程图。如果不提供，则工作区为初始化状态。

数据格式参考：规则链配置 (opens new window)

const data = {
  ruleChain: {
    id: 'chain-001',
    name: '我的规则链',
    root: true,
  },
  metadata: {
    firstNodeIndex: 0,
    nodes: [
      {
        id: 'node-1',
        type: 'endpoint/rest/api',
        name: 'REST API',
        configuration: {},
      },
    ],
    connections: [
      {
        fromId: 'node-1',
        toId: 'node-2',
        type: 'Success',
      },
    ],
  },
}

---

options 属性

options 属性用于配置编辑器的行为、API 地址、工具栏按钮显隐等。

服务端 API 配置

字段	类型	必选	默认值	说明
url	string	否	http://127.0.0.1:9090	RuleGo 服务交互 API 根路径
componentsApi	string	否	/api/v1/components	获取组件列表 API 路径
debugDataApi	string	否	/api/v1/logs/debug	获取调试日志 API 路径
executeApi	string	否	/api/v1/rules/:id/execute/:msgType	执行规则链 API 路径，其中 :id 和 :msgType 为占位符
notifyApi	string	否	/api/v1/rules/:id/notify/msgType	通知消息 API 路径
chainsApi	string	否	/api/v1/rules	规则链 CRUD API 路径
loadComponentsFromApi	boolean	否	true	是否从 API 动态加载组件列表
loadEndpointComponents	boolean	否	true	是否加载端点(endpoint)类型组件

布局配置

字段	类型	必选	默认值	说明
startX	number	否	280	第一个 INPUT 节点的 X 坐标
startY	number	否	280	第一个 INPUT 节点的 Y 坐标
topOffset	number	否	100	顶部偏移量
relationTypeSplit	string	否	/	节点关系类型分隔符
endpointRelationTypeSplit	string	否	\n	端点关系类型分隔符

LogicFlow 配置

以下选项直接透传给 LogicFlow 实例，详见 LogicFlow 文档 (opens new window)。

字段	类型	必选	默认值	说明
adjustEdge	boolean	否	true	允许拖拽调整连线
adjustEdgeStartAndEnd	boolean	否	true	允许调整连线的起点和终点
textEdit	boolean	否	false	允许双击编辑文本
stopMoveGraph	boolean	否	false	禁止拖动画布
hoverOutline	boolean	否	false	悬停时显示节点外框
edgeSelectedOutline	boolean	否	false	连线选中时显示外框
allowResize	boolean	否	true	允许调整节点大小
keyboard	object	否	-	键盘快捷键配置，enabled 默认为 true

网格配置

字段	类型	必选	默认值	说明
grid	object	否	{ visible: true, type: 'mesh', size: 10, config: { color: '#eeeeee' } }	画布网格配置

grid 对象字段说明：

字段	类型	说明
visible	boolean	是否显示网格
type	string	网格类型，可选值：mesh、dot
size	number	网格大小
config	object	网格样式配置，如 { color: '#eeeeee' }

国际化配置

字段	类型	必选	默认值	说明
locales	object	否	{}	自定义国际化文本
setting	object	否	{}	编辑器设置项

组件配置

字段	类型	必选	默认值	说明
builtinComponents	object	否	{ builtins: {}, endpoints: [], nodes: [] }	内置组件定义
components	object	否	{ endpoints: [], nodes: [] }	自定义组件列表，格式参考 节点组件

---

toolbar 配置

options.toolbar 用于控制工具栏中各按钮的显示与隐藏。所有字段均为可选 Boolean 类型，默认值为 true。

字段	类型	默认值	说明
showTile	boolean	true	是否显示规则链标题
showSelection	boolean	true	是否显示【框选】按钮
showUndo	boolean	true	是否显示【撤销】按钮
showRedo	boolean	true	是否显示【重做】按钮
showMinMap	boolean	true	是否显示【小地图】按钮
showTest	boolean	true	是否显示【运行】按钮
showSetting	boolean	true	是否显示【设置】按钮
showFullScreen	boolean	true	是否显示【全屏】按钮
showNew	boolean	true	是否显示【设置-新建】按钮
showOpen	boolean	true	是否显示【设置-打开】按钮
showEdit	boolean	true	是否显示【设置-编辑】按钮
showIntegration	boolean	true	是否显示【设置-集成】按钮
showExport	boolean	true	是否显示【设置-导出】按钮
showImport	boolean	true	是否显示【设置-导入】按钮
showNodeMgt	boolean	true	是否显示【设置-组件管理】按钮
showSharedNodeMgt	boolean	true	是否显示【设置-共享节点管理】按钮
showUserSetting	boolean	true	是否显示【设置-用户设置】按钮
showAbout	boolean	true	是否显示【设置-关于】按钮
showDoc	boolean	true	是否显示【设置-文档】按钮（当前版本已隐藏）
showSave	boolean	true	是否显示【保存】按钮
showReset	boolean	true	是否显示【重置】按钮
showDelete	boolean	true	是否显示【删除选定】按钮
showAiChat	boolean	true	是否显示【AI 助手】按钮
showDebugConsole	boolean	true	是否显示【调试控制台】按钮
showClearDebugHighlight	boolean	true	是否显示【清除调试高亮】按钮

示例：只保留保存和导出功能

const options = ref({
  toolbar: {
    showSelection: false,
    showUndo: false,
    showRedo: false,
    showMinMap: false,
    showTest: false,
    showSetting: false,
    showFullScreen: false,
    showNew: false,
    showOpen: false,
    showEdit: false,
    showIntegration: false,
    showImport: false,
    showNodeMgt: false,
    showUserSetting: false,
    showAbout: false,
    showDelete: false,
    showReset: false,
    showAiChat: false,
    showDebugConsole: false,
    showClearDebugHighlight: false,
    // 保留以下按钮
    showTile: true,
    showSave: true,
    showExport: true,
  },
})

---

extensions 属性

extensions 属性接受 LogicFlow 扩展插件数组，用于扩展编辑器功能。传入后编辑器会在初始化时注册这些扩展。

import { DndPanel, SelectionSelect } from '@logicflow/extension'

const extensions = ref([
  DndPanel,
  SelectionSelect,
])

<RuleGoEditor
  ref="ruleGoEditorRef"
  :extensions="extensions"
/>

LogicFlow 内置扩展参考：LogicFlow 扩展 (opens new window)

---

config.js 配置文件

编辑器内置了 config.js 配置文件，定义了 AI 聊天功能的默认参数。如需自定义，可在源码中修改。

字段	类型	默认值	说明
maxHistoryPerChain	number	50	每条规则链最大聊天历史记录数
maxContextMessages	number	20	发送给 AI 的最大上下文消息数
maxMessageLength	number	2000	单条消息最大字符数
storageKeyPrefix	string	rulego-chat-history-	本地存储 key 前缀
maxActiveChains	number	20	最大活跃规则链聊天会话数

---

AI 服务商配置

RuleGo-Editor 内置了多个 AI 服务商，可在 AI 助手面板中选择使用。所有服务商均兼容 OpenAI Chat Completions API 格式。

内置服务商列表

服务商	ID	默认 API 地址	默认模型
Gitee AI	gitee_ai	https://ai.gitee.com/v1	DeepSeek-V4-Flash
DeepSeek	deepseek	https://api.deepseek.com	deepseek-chat
通义千问	qwen	https://dashscope.aliyuncs.com/compatible-mode/v1	qwen-plus
智谱 AI	zhipu	https://open.bigmodel.cn/api/paas/v4	glm-5
OpenAI	openai	https://api.openai.com/v1	gpt-4o
Ollama (本地)	ollama	http://localhost:11434/v1	llama3

使用方式

在 AI 助手面板中，用户可以：

1. 选择 AI 服务商
2. 填写 API Key（Ollama 本地部署无需 API Key）
3. 选择模型
4. 自定义 API 地址（可选）

---

Token 管理

当 RuleGo-Editor 对接需要认证的后端服务时，需要配置 Token 管理。编辑器提供了 setTokenProvider 方法来设置 Token 的获取和清除逻辑。

API

import { setTokenProvider } from './components/utils/http.js'

setTokenProvider({
  getToken: () => string | null,    // 获取 Token 的函数
  clearToken: () => void,           // 清除 Token 的函数（如 token 过期时调用）
})

集成示例

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import { setTokenProvider } from './components/utils/http.js'
import { ref, onMounted } from 'vue'

// 配置 Token 提供者
onMounted(() => {
  setTokenProvider({
    getToken: () => {
      return localStorage.getItem('auth_token')
    },
    clearToken: () => {
      localStorage.removeItem('auth_token')
      // 可在此处跳转登录页
    },
  })
})

const options = ref({
  url: 'https://your-rulego-server.com',
  loadComponentsFromApi: true,
})
</script>

当后端返回 401 状态码时，编辑器会自动调用 clearToken 清除过期 Token。

---

事件

事件名	说明	回调参数
saveOk	保存成功	data：规则链数据
saveError	保存失败	data：规则链数据，e：错误信息
reset	重置规则链	data：规则链数据
updateLocales	更新国际化	locales：国际化数据

使用示例

<template>
  <RuleGoEditor
    :options="options"
    @saveOk="onSaveOk"
    @saveError="onSaveError"
    @reset="onReset"
    @updateLocales="onUpdateLocales"
  />
</template>

<script setup>
const onSaveOk = (data) => {
  console.log('规则链保存成功', data)
}

const onSaveError = (data, e) => {
  console.error('规则链保存失败', e)
}

const onReset = (data) => {
  console.log('规则链已重置', data)
}

const onUpdateLocales = (locales) => {
  console.log('国际化已更新', locales)
}
</script>

---

方法

通过组件引用（ref）调用以下方法。

方法名	说明	调用参数	返回值
render	渲染规则链	data：规则链数据	-
save	触发保存	-	-
getData	获取当前规则链数据	-	规则链 data JSON 对象
setLocales	设置国际化文本	locales：国际化配置对象	-
lf	获取 LogicFlow 实例	-	LogicFlow 实例 (opens new window)
reloadComponents	重新加载组件列表	-	-

使用示例

<template>
  <RuleGoEditor ref="ruleGoEditorRef" :options="options" />
  <button @click="handleSave">保存</button>
  <button @click="handleGetData">获取数据</button>
</template>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import { ref, onMounted } from 'vue'

const ruleGoEditorRef = ref()
const options = ref({
  url: 'http://127.0.0.1:9090',
})

// 获取 LogicFlow 实例，调用原生 API
onMounted(() => {
  const lf = ruleGoEditorRef.value.lf
  if (lf) {
    // 例如：监听节点点击事件
    lf.on('node:click', ({ data }) => {
      console.log('节点被点击', data)
    })
  }
})

// 触发保存
const handleSave = () => {
  ruleGoEditorRef.value.save()
}

// 获取规则链数据
const handleGetData = () => {
  const data = ruleGoEditorRef.value.getData()
  console.log('当前规则链数据', JSON.stringify(data, null, 2))
}
</script>

---

高级配置示例

最小化嵌入（只读展示）

适合在已有系统中展示规则链，隐藏所有编辑功能：

<template>
  <RuleGoEditor :data="ruleChainData" :options="readOnlyOptions" />
</template>

<script setup>
import { ref } from 'vue'

const ruleChainData = ref({ /* 规则链数据 */ })

const readOnlyOptions = ref({
  loadComponentsFromApi: false,
  toolbar: {
    showSelection: false,
    showUndo: false,
    showRedo: false,
    showTest: false,
    showSetting: false,
    showNew: false,
    showOpen: false,
    showEdit: false,
    showDelete: false,
    showSave: false,
    showReset: false,
    showAiChat: false,
    showDebugConsole: false,
    showClearDebugHighlight: false,
    showExport: false,
    showImport: false,
    showNodeMgt: false,
    showSharedNodeMgt: false,
    showUserSetting: false,
    showIntegration: false,
    showAbout: false,
    showDoc: false,
    showTile: true,
    showMinMap: true,
    showFullScreen: true,
  },
  stopMoveGraph: false,
})
</script>

自定义 API 地址与认证

对接自部署的 RuleGo 后端服务，并配置 Token 认证：

<template>
  <RuleGoEditor
    ref="ruleGoEditorRef"
    :options="options"
    @saveOk="onSaveOk"
    @saveError="onSaveError"
  />
</template>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import { setTokenProvider } from './components/utils/http.js'
import { ref, onMounted } from 'vue'

const ruleGoEditorRef = ref()

onMounted(() => {
  setTokenProvider({
    getToken: () => localStorage.getItem('token'),
    clearToken: () => {
      localStorage.removeItem('token')
      window.location.href = '/login'
    },
  })
})

const options = ref({
  url: 'https://api.example.com',
  componentsApi: '/api/v1/components',
  chainsApi: '/api/v1/rules',
  executeApi: '/api/v1/rules/:id/execute/:msgType',
  debugDataApi: '/api/v1/logs/debug',
  loadComponentsFromApi: true,
  loadEndpointComponents: true,
})

const onSaveOk = (data) => {
  console.log('保存成功', data)
}

const onSaveError = (data, e) => {
  console.error('保存失败', e)
}
</script>

完整配置参考

以下为包含所有常用配置项的完整示例：

const options = {
  // 服务端 API
  url: 'http://127.0.0.1:9090',
  componentsApi: '/api/v1/components',
  debugDataApi: '/api/v1/logs/debug',
  executeApi: '/api/v1/rules/:id/execute/:msgType',
  notifyApi: '/api/v1/rules/:id/notify/msgType',
  chainsApi: '/api/v1/rules',
  loadComponentsFromApi: true,
  loadEndpointComponents: true,

  // 布局
  startX: 280,
  startY: 280,
  topOffset: 100,
  relationTypeSplit: '/',
  endpointRelationTypeSplit: '\n',

  // 网格
  grid: {
    visible: true,
    type: 'mesh',
    size: 10,
    config: { color: '#eeeeee' },
  },

  // LogicFlow 选项
  adjustEdge: true,
  adjustEdgeStartAndEnd: true,
  textEdit: false,
  stopMoveGraph: false,
  hoverOutline: false,
  edgeSelectedOutline: false,
  allowResize: true,
  keyboard: { enabled: true, shortcuts: [] },

  // 国际化与组件
  locales: {},
  builtinComponents: { builtins: {}, endpoints: [], nodes: [] },
  components: { endpoints: [], nodes: [] },
  setting: {},

  // 工具栏（全部显示，按需设为 false 隐藏）
  toolbar: {
    showTile: true,
    showSelection: true,
    showUndo: true,
    showRedo: true,
    showMinMap: true,
    showTest: true,
    showSetting: true,
    showFullScreen: true,
    showNew: true,
    showOpen: true,
    showEdit: true,
    showIntegration: true,
    showExport: true,
    showImport: true,
    showNodeMgt: true,
    showSharedNodeMgt: true,
    showUserSetting: true,
    showAbout: true,
    showDoc: true,
    showSave: true,
    showReset: true,
    showDelete: true,
    showAiChat: true,
    showDebugConsole: true,
    showClearDebugHighlight: true,
  },
}

自定义 LogicFlow 扩展

结合 LogicFlow 扩展插件，增强编辑器能力：

<template>
  <RuleGoEditor
    ref="ruleGoEditorRef"
    :options="options"
    :extensions="extensions"
  />
</template>

<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import { ref, onMounted } from 'vue'

const ruleGoEditorRef = ref()

const extensions = ref([])

const options = ref({
  url: 'http://127.0.0.1:9090',
  // 启用键盘快捷键
  keyboard: {
    enabled: true,
    shortcuts: [
      { keys: 'ctrl+z', callback: 'undo' },
      { keys: 'ctrl+shift+z', callback: 'redo' },
    ],
  },
  // 自定义网格样式
  grid: {
    visible: true,
    type: 'dot',
    size: 20,
    config: { color: '#d0d0d0' },
  },
})

onMounted(() => {
  // 通过 lf 实例调用 LogicFlow 原生方法
  const lf = ruleGoEditorRef.value.lf
  if (lf) {
    // 自定义右键菜单等高级功能
    lf.extension.menu.setMenuConfig({
      nodeMenu: [
        { text: '复制', callback: (node) => { lf.cloneNode(node.id) } },
        { text: '删除', callback: (node) => { lf.deleteNode(node.id) } },
      ],
      edgeMenu: [
        { text: '删除', callback: (edge) => { lf.deleteEdge(edge.id) } },
      ],
      graphMenu: [],
    })
  }
})
</script>