Advint Rule Engine

一个基于 Vue 3 + TypeScript + X6 的规则引擎组件库。

特性

• 🚀 基于 Vue 3 + TypeScript 开发
• 📦 支持按需引入
• 🎨 使用 Advint UI 组件库
• 📝 集成 CodeMirror 代码编辑器
• 🔄 基于 X6 的流程图编辑器
• 🎯 支持规则引擎的可视化配置

安装

# 使用 pnpm
pnpm add advint-rule-engine

# 使用 npm
npm install advint-rule-engine

# 使用 yarn
yarn add advint-rule-engine

快速开始

import { createApp } from 'vue'
import { RuleEngine } from 'advint-rule-engine'
import 'advint-rule-engine/lib/style.css'

const app = createApp(App)
app.use(RuleEngine)

组件

RuleEngineDesigner

规则引擎设计器组件，用于可视化配置规则。

Props

| 名称 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | RuleConfig | {} | 规则配置数据 | | options | DesignerOptions | {} | 设计器配置选项 | | readonly | boolean | false | 是否只读模式 |

Events

| 名称 | 参数 | 说明 | |------|------|------| | save | (config: RuleConfig) | 保存配置时触发 | | change | (config: RuleConfig) | 配置变更时触发 |

CodeEditor

基于 CodeMirror 的代码编辑器组件。

Props

| 名称 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | '' | 编辑器内容 | | language | string | 'javascript' | 代码语言 | | theme | string | 'default' | 编辑器主题 |

开发

# 安装依赖
pnpm bootstrap

# 启动开发服务器
pnpm dev

# 构建库文件
pnpm lib

# 代码检查
pnpm lint

# 类型检查
pnpm type:check

目录结构

├── packages/               # 源码目录
│   ├── pages/             # 页面组件
│   └── components/        # 基础组件
├── playground/            # 开发调试环境
├── internal/             # 内部工具和配置
└── lib/                  # 构建输出目录

技术栈

• Vue 3
• TypeScript
• Element Plus
• CodeMirror 5
• Antv X6
• Vite
• pnpm

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

License

MIT