本文档面向前端开发人员，详细介绍如何在 PigX UI 的 AI 流程编排系统中扩展新的节点类型。

​
📚 系统架构概览

组件化设计架构

AI流程编排系统采用模块化组件设计，主要组件结构如下：

src/views/knowledge/aiFlow/
├── nodes/               # 节点组件（显示在画布上）
│   ├── nodeTypes.ts    # 节点类型定义和配置
│   └── XxxNode.vue     # 具体节点组件
├── panels/             # 面板组件（右侧配置面板）
│   └── XxxPanel.vue    # 具体面板组件
├── styles/flow.scss    # 节点样式
└── index.vue          # 主画布组件

​
🚀 快速开始：扩展新节点

1

定义节点类型配置

在 src/views/knowledge/aiFlow/nodes/nodeTypes.ts 文件中添加新节点类型配置

2

创建节点组件

在 nodes/ 目录下创建节点的可视化组件

3

创建配置面板

在 panels/ 目录下创建节点的配置面板组件

4

添加API接口（可选）

如需后端交互，在 src/api/knowledge/ 下创建相应接口

5

添加图标和样式

为节点添加自定义图标和样式定义

​
🔧 详细实现步骤

​
步骤1：定义节点类型配置

​
步骤2：创建节点组件

创建 YourNodeTypeNode.vue 文件：

<template>
    <div>
        <!-- 显示节点的关键信息 -->
        <div class="node-content">
            <div v-if="node.yourNodeParams?.param1" class="param-display">
                <span class="param-label">参数1:</span>
                <span class="param-value">{{ node.yourNodeParams.param1 }}</span>
            </div>
        </div>
        
        <!-- 显示输出参数 -->
        <div class="output-params">
            <div v-for="(param, index) in node.outputParams" :key="index" class="param-item">
                <svg-icon :size="24" class="param-icon" name="local-var" />
                <span class="param-name">{{ param.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import common from './common.ts';

export default {
    name: 'YourNodeTypeNode',  // 必须按格式: {NodeType}Node
    mixins: [common],
};
</script>

​
步骤3：创建配置面板

图标设计应遵循以下标准：

  • 尺寸: 24x24px
  • 格式: SVG
  • 风格: 线性图标，2px描边
  • 颜色: 单色，使用当前节点主题色

​
步骤4：添加节点图标

为新节点创建SVG图标文件，以MCP节点为例：

文件位置: src/assets/icons/ai/mcp.svg

图标要点: 名称为节点类型名称

​
步骤5：配置节点样式

在 src/views/knowledge/aiFlow/styles/flow.scss 文件中为新节点添加样式配置：

.node-icon {
    // 添加MCP节点样式
    &--mcp {
        background-color: rgb(27, 138, 106);
    }
}

样式配置说明:

  • 每个节点类型都有对应的CSS修饰符类名：&--{nodeType}
  • background-color 定义节点图标的背景色
  • 建议为不同功能的节点选择不同色系：
    • 蓝色系: 数据处理类节点
    • 绿色系: 系统集成类节点
    • 紫色系: AI/机器学习类节点
    • 橙色系: 条件判断类节点

​
📋 配置参数详解

​
基础配置结构

{
    type: 'nodeType',           // 节点类型标识（必须唯一）
    name: '节点显示名称',        // 用户看到的名称
    canBeSource: boolean,       // 是否可以作为连接的起点
    canBeTarget: boolean,       // 是否可以作为连接的终点
    inputParams: ParamItem[],   // 输入参数定义
    outputParams: ParamItem[], // 输出参数定义
}

​
参数类型定义

interface ParamItem {
    name: string;       // 参数名称
    type: string;       // 参数类型
    value?: any;        // 参数值
    required?: boolean; // 是否必填
    disabled?: boolean; // 是否禁用编辑
}

​
💡 完整案例：MCP节点扩展

实战案例

以下是一个完整的MCP（Model Context Protocol）节点扩展实现案例，展示了如何完整地实现一个新节点类型。

​
案例：MCP节点完整实现

在实际开发中，请注意以下几点：

  1. 颜色一致性: 确保新节点的颜色与现有设计体系协调
  2. 图标语义: 选择能准确表达节点功能的图标设计
  3. 样式复用: 尽量使用现有的样式类，避免重复定义
  4. 响应式兼容: 确保样式在不同屏幕尺寸下正常显示
  5. 无障碍设计: 保证足够的颜色对比度和可访问性

通过以上案例，你可以看到如何完整地为AI流程系统扩展一个新的节点类型，包括图标设计、样式配置和视觉效果的整体规划。