npm package: @heqinghua/logic-engine-ui
Description: 规则引擎UI模块
Latest version: 1.0.0

# @heqinghua/logic-engine-ui

流程引擎的 UI 组件库，提供流程可视化、节点配置和规则编辑等核心界面组件。

## 功能概述

- 流程视图展示与编辑（FlowView）
- 动态配置表单生成（DynamicConfigForm）
- 规则条件编辑器（RuleEditor）
- 组件注册与注入机制
- 插件 UI 配置管理

## 目录结构

```
src/
├── components/          # 核心 UI 组件
│   ├── DynamicConfigForm/  # 动态配置表单组件
│   ├── FlowView/           # 流程视图组件
│   ├── PluginView/         # 插件视图组件
│   ├── RuleEditor/         # 规则编辑器组件
│   └── index.ts
├── utils/               # 工具函数
│   ├── NodeInjector/        # 节点注入器
│   ├── PluginUIRegistry/    # 插件 UI 注册器
│   └── index.ts
├── widget/              # 表单控件组件
│   ├── components/          # 自定义组件
│   ├── antdWidgets.ts       # Ant Design 控件映射
│   ├── customWidgets.ts     # 自定义控件映射
│   ├── defaultWidget.ts     # 默认控件配置
│   └── types.ts
├── types.ts             # 类型定义
└── index.ts             # 入口文件
```

## 核心组件

### FlowView

流程视图组件，基于 @xyflow/react 实现，用于展示和编辑流程节点图。

**主要功能：**
- 流程节点和边的可视化展示
- 节点拖拽和连线编辑
- 节点配置表单打开和数据保存
- 支持自定义节点类型

**使用示例：**
```tsx
import { FlowView } from '@heqinghua/logic-engine-ui';

const App = () => {
  const handleNodeConfigChange = (nodeId, config) => {
    console.log('Node config changed:', nodeId, config);
  };

  return (
    <FlowView
      data={{
        nodes: [...],
        edges: [...]
      }}
      initialValue={nodeConfigs}
      onNodeConfigChange={handleNodeConfigChange}
    />
  );
};
```

### DynamicConfigForm

动态配置表单组件，根据 schema 配置动态生成表单界面。

**主要功能：**
- 基于 schema 自动生成表单字段
- 支持表单验证和保存
- 支持字段依赖条件显示
- 支持自定义控件渲染

**使用示例：**
```tsx
import { DynamicConfigForm } from '@heqinghua/logic-engine-ui';

const App = () => {
  const schema = {
    type: 'test',
    label: '测试节点',
    config: [
      {
        type: 'text',
        field: 'name',
        label: '名称',
        defaultValue: '默认名称'
      }
    ]
  };

  return (
    <DynamicConfigForm
      schema={schema}
      value={{ name: '测试' }}
      onValidateSave={(values) => console.log(values)}
    />
  );
};
```

### RuleEditor

规则编辑器组件，用于构建复杂的条件规则。

**主要功能：**
- 支持规则组和规则项的嵌套
- 支持 AND/OR 逻辑连接
- 规则数据格式化转换
- 自定义字段配置

**使用示例：**
```tsx
import { RuleEditor } from '@heqinghua/logic-engine-ui';

const App = () => {
  const fields = [
    { label: '名称', value: 'name' },
    { label: '年龄', value: 'age' }
  ];

  return (
    <RuleEditor
      fields={fields}
      onChange={(rules, currentRule) => {
        console.log('Rules changed:', rules);
      }}
    />
  );
};
```

## 组件注册与注入

### PluginUIRegistry

插件 UI 注册器，负责管理节点类型与 UI 配置的映射。

**主要功能：**
- 注册节点 schema 配置
- 注册自定义控件
- 批量注册插件 UI 配置
- 获取节点 UI 配置

**使用示例：**
```tsx
import { registerNodeSchema, registerWidget } from '@heqinghua/logic-engine-ui';

// 注册节点 schema
registerNodeSchema('my-node-type', {
  type: 'my-node',
  label: '我的节点',
  config: [...]
});

// 注册自定义控件
registerWidget('custom-select', CustomSelectComponent);
```

### NodeInjector

节点注入器，负责注入和管理自定义组件。

**主要功能：**
- 注入节点 schema
- 注入自定义控件
- 批量注入配置
- 获取已注入的配置

## 类型定义

### FieldBase

表单字段基础类型，定义了表单字段的配置项。

**属性：**
- `type`: 字段类型
- `field`: 字段名
- `label`: 字段标签
- `formItemProps`: Form.Item 属性
- `widgetProps`: 控件属性
- `defaultValue`: 默认值
- `dependsOn`: 依赖条件

### Schema

表单配置模式，定义了整个表单的结构。

**属性：**
- `type`: 模式类型
- `label`: 模式标签
- `config`: 字段配置数组

## 安装与使用

### 安装

```bash
pnpm add @heqinghua/logic-engine-ui
```

### 基本使用

```tsx
import { FlowView, DynamicConfigForm, RuleEditor, registerNodeSchema } from '@heqinghua/logic-engine-ui';
import '@heqinghua/logic-engine-ui/dist/index.css';

// 注册节点 UI 配置
registerNodeSchema('my-node', {
  type: 'my-node',
  label: '我的节点',
  config: [
    {
      type: 'text',
      field: 'name',
      label: '节点名称'
    }
  ]
});

// 使用组件
const App = () => {
  return (
    <div>
      <FlowView data={{ nodes: [], edges: [] }} />
    </div>
  );
};
```

## API 参考

### 组件 API

#### FlowView

| 属性 | 类型 | 说明 | 必需 |
|------|------|------|------|
| data | `{ nodes: Node[], edges: Edge[] }` | 流程数据 | 是 |
| initialValue | `Record<string, any>` | 初始节点配置值 | 否 |
| onNodeConfigChange | `(nodeId: string, config: any) => void` | 节点配置变更回调 | 否 |
| isValidate | `boolean` | 是否验证表单 | 否 |

#### DynamicConfigForm

| 属性 | 类型 | 说明 | 必需 |
|------|------|------|------|
| schema | `Schema` | 表单配置 | 是 |
| value | `Record<string, any>` | 表单值 | 否 |
| onChange | `(values: any) => void` | 值变更回调 | 否 |
| onSave | `(values: any) => void` | 保存回调 | 否 |
| onValidateSave | `(values: any) => void` | 验证并保存回调 | 否 |
| showButtons | `boolean` | 是否显示按钮 | 否 |

#### RuleEditor

| 属性 | 类型 | 说明 | 必需 |
|------|------|------|------|
| fields | `Array<{ label: string, value: string }>` | 可用字段列表 | 否 |
| rules | `RuleGroupType` | 初始规则数据 | 否 |
| onChange | `(rules: any, currentRule: any) => void` | 规则变更回调 | 否 |
| mode | `'edit' \| 'view'` | 编辑模式 | 否 |

### 工具函数

#### registerNodeSchema(nodeType, schema)
注册节点表单配置

#### registerWidget(type, component)
注册自定义控件

#### registerPluginUI(nodeType, uiConfig)
注册插件 UI 元数据

#### resolveNodeFormConfig(nodeType)
解析节点表单配置

#### getWidgetByType(type, widget?)
根据类型获取控件组件

## 注意事项

1. 使用 FlowView 组件时，如果需要自定义节点类型的 UI 配置，需要先注册节点的 UI 配置
2. 自定义控件需要实现特定的接口以支持表单集成
3. 规则编辑器的字段配置会影响可配置的条件类型
4. 依赖条件判断需要正确配置以确保表单显示逻辑正确

## License

MIT