dynamic-node

动态节点配置组件库，基于React+Ant Design构建，支持通过元数据驱动生成动态表单和节点配置界面。

安装

npm install dynamic-node
# 或使用yarn
# yarn add dynamic-node
# 或使用pnpm
# pnpm add dynamic-node

核心功能

• 动态表单生成器：根据schema定义自动生成表单
• 节点配置管理：支持多种类型的节点配置
• 自定义控件注入：允许用户扩展自定义控件
• 依赖检查：支持字段之间的依赖关系

快速开始

1. 导入组件和注入器

import { DynamicConfigForm, initializeInjector, injectWidget } from 'dynamic-node';
import { Select } from 'antd';

2. 初始化注入器

// 初始化注入器（如果需要自定义节点类型和schema）
initializeInjector({
  // 节点schema定义
  customNode: {
    config: [
      {
        field: 'name',
        label: '节点名称',
        type: 'text',
        required: true
      },
      {
        field: 'description',
        label: '节点描述',
        type: 'text'
      }
    ]
  }
}, [
  // 节点类型定义
  { value: 'customNode', label: '自定义节点' }
]);

3. 注入自定义控件（可选）

// 注入自定义控件
const CustomSelectWidget = ({ field, value, onChange }: any) => {
  return (
    <Select
      value={value}
      onChange={(newValue) => onChange(newValue)}
      options={[
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]}
    />
  );
};

injectWidget('custom-select', CustomSelectWidget);

4. 使用动态表单

// 定义表单schema
const schema = {
  config: [
    {
      field: 'name',
      label: '配置名称',
      type: 'text',
      required: true
    },
    {
      field: 'type',
      label: '配置类型',
      type: 'select',
      options: [
        { value: 'string', label: '字符串' },
        { value: 'number', label: '数字' },
        { value: 'boolean', label: '布尔值' }
      ]
    },
    {
      field: 'customField',
      label: '自定义字段',
      type: 'custom-select'
    }
  ]
};

// 使用动态表单组件
const App = () => {
  const [value, setValue] = useState({});

  return (
    <DynamicConfigForm
      schema={schema}
      value={value}
      onChange={setValue}
    />
  );
};

API文档

DynamicConfigForm 组件

| 属性 | 类型 | 说明 | |------|------|------| | schema | Schema | 表单配置schema | | value | Record<string, any> | 表单当前值 | | onChange | (value: Record<string, any>) => void | 值变化回调函数 |

注入器方法

• initializeInjector(initialSchemas?: Record<string, Schema>, initialTypes?: { value: string; label: string }[], initialWidgets?: Record<string, React.ElementType<any>>): DifyNodeInjector - 初始化注入器
• injectNodeSchema(type: string, schema: Schema): void - 注入节点schema
• injectNodeType(type: string, label: string): void - 注入节点类型
• injectWidget(type: string, widget: React.ElementType<any>): void - 注入自定义控件
• getNodeSchemas(): Record<string, Schema> - 获取所有节点schema
• getNodeTypes(): { value: string; label: string }[] - 获取所有节点类型
• getWidgets(): Record<string, React.ElementType<any>> - 获取所有注入的控件

类型定义

// 字段定义
interface Field {
  field: string;
  label: string;
  type: string;
  widget?: string;
  required?: boolean;
  defaultValue?: any;
  options?: { value: any; label: string }[];
  dependsOn?: { field: string; value: any | ((value: any) => boolean) };
  // 其他字段配置...
}

// Schema定义
interface Schema {
  config: Field[];
}

// 动态表单属性
interface DynamicFormProps {
  schema: Schema;
  value: Record<string, any>;
  onChange: (value: Record<string, any>) => void;
}

示例

更多示例请参考项目中的example目录和pages/index.tsx文件。