---
order: 2
title: 节点菜单配置
mobile: false
group:
title: 基础用法
order: 1
---
# 节点菜单配置
节点菜单由右下角工具栏点出，展示画布面板的所有节点，可直接点击节点菜单面板中的节点，将节点添加进画布中。节点菜单支持分组展示，可以为不同类型的节点创建不同的分组，使界面更加清晰。
## 配置说明
### 1. 分组配置
节点菜单支持分组展示，每个分组包含以下配置：
```typescript
interface GroupConfig {
title: string; // 分组名称
type: '_group'; // 分组类型，固定为 '_group'
items: NodeConfig[]; // 分组下的节点配置列表
}
```
### 2. 节点配置
每个节点可以配置以下属性：
```typescript
interface NodeConfig {
title: string; // 节点名称
type: string; // 节点类型
description?: string; // 节点描述
icon?: { // 节点图标配置
type: string; // 图标类型
bgColor: string; // 图标背景色
};
hideDesc?: boolean; // 是否隐藏节点描述
nodePanel?: { // 自定义节点的面板配置
width?: number; // 面板宽度
};
settingSchema?: { // 节点的业务配置信息
type: string;
className?: string;
properties: Record;
};
}
```
### 3. 节点图标配置
节点的图标配置目前支持两种形式：
1. [iconfont](https://www.iconfont.cn/) 的图标
2. 自定义图标组件展示。通过这种方式可支持图标的 SVG 形式、图片形式、其他自定义样式。
#### 3.1 iconfont 图标的用法
1. 首先在 [iconfont](https://www.iconfont.cn/) 官网中选择图标后添加到项目中，在项目中找到图标，复制图标的代码，以及生成图标库的 Symbol 链接。
2. 在 iconFontUrl 属性中引入图标库的 Symbol 链接：
```js
```
3. 然后在节点配置中配置 icon 属性，type 为 复制的图标的代码，bgColor 为图标的背景色：
```js
{
title: '结束',
type: 'End',
description: '流程结束节点，用于标记流程的终点',
icon: {
type: 'icon-xiaoxi', // 图标类型
bgColor: '#F79009', // 图标背景色
},
settingSchema: {
type: 'object',
properties: {
output: {
title: '输出结果',
type: 'string',
widget: 'textarea',
},
},
},
}
```
#### 3.2 自定义图标组件
比如实现图标的 SVG 形式。首先创建SVG组件如下：
```js
const CustomSvg = ({ setting }) => {
console.log('接收参数node setting', setting);
return (
)};
export default CustomSvg;
```
然后在全局widgets中引入SVG组件
```js
```
最后在节点配置`settings`中配置`iconSvg`属性
```js
{
title: '流程控制',
type: '_group',
items: [
{
title: '开始',
type: 'Start',
description: '流程开始节点，用于标记流程的起点',
icon: {
bgColor: '#17B26A', // icon背景颜色
},
iconSvg: 'CustomSvg', // 设置SVG组件
},
],
},
```
## 完整示例
