本文档面向前端开发人员,详细介绍如何在 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流程系统扩展一个新的节点类型,包括图标设计、样式配置和视觉效果的整体规划。