npm package: @heqinghua/dynamic-node
Description: 动态节点配置组件库
Author: heqinghua
Latest version: 1.0.3

# dynamic-node

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

## 安装

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

## 核心功能

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

## 快速开始

### 1. 导入组件和注入器

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

### 2. 初始化注入器

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

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

```tsx
// 注入自定义控件
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. 使用动态表单

```tsx
// 定义表单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>>` - 获取所有注入的控件

### 类型定义

```typescript
// 字段定义
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文件。