
人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载导读本文基于 AppPlatform 工程agent-flow前端画布组件库中并行节点parallelNode的“工具详情查看”功能展开讲解如何为并行节点的每个工具卡片添加眼睛图标点击后跳转到对应工具流workflow的详情编辑页。读完本文你将掌握 appId/tenantId 在工具选择时的提取与持久化方案、图标显隐条件、endpoint 自定义配置方式、以及并行节点与循环节点在同一功能上的实现异同可直接用于二次开发与排查问题。功能概述让工具卡片直达工具流详情页并行节点是 Agent 工作流中用于“多任务并行执行”的关键节点用户可以在其中添加多个工具插件每个工具对应一个可运行的子应用/工具流。为了便于用户从画布配置态直接回到工具流的编辑页面agent-flow为并行节点的工具卡片新增了“查看详情”入口点击卡片 header 中的眼睛图标即可在新标签页打开该工具流对应的详情页。该功能的核心链路包含三部分数据存储选择工具时自动提取appId、tenantId并随工具配置持久化UI 增强工具卡片 header 按条件渲染眼睛图标跳转逻辑基于endpoint配置与当前域名拼接目标 URL 并在新标签页打开。对应源码位于 agent-flow/src/components/parallelNode/ 目录核心文件为ParallelPluginItem.jsx、ParallelTopBar.jsx、ParallelWrapper.jsx与reducers/reducers.js。数据提取与存储appId 与 tenantId 从哪里来、存到哪里1. 选择工具时的字段提取当用户在并行节点点击“添加并行任务”并通过工具选择弹窗选中一个工具时ParallelTopBar.jsx的onSelect回调会从工具元数据中提取两个关键字段// agent-flow/src/components/parallelNode/ParallelTopBar.jsx const appId selectedData.runnables?.APP?.appId; const tenantId selectedData.schema?.parameters?.properties?.tenantId?.default;appId取自selectedData.runnables.APP.appId即工具流runnable所属应用的 IDtenantId取自工具 JSON Schema 参数定义中tenantId参数的默认值。随后这两个值作为新参数传给handlePluginAddhandlePluginAdd(entity, selectedData.uniqueName, selectedData.name, selectedData.tags, appId, tenantId);2. Wrapper 透传与 reducer 持久化ParallelWrapper.jsx中handlePluginAdd的函数签名相应扩展为接收appId、tenantId并将其放入 dispatch action 中// agent-flow/src/components/parallelNode/ParallelWrapper.jsx const handlePluginAdd (entity, uniqueName, name, tags, appId, tenantId) { dispatch({ type: addPluginByMetaData, entity: entity, uniqueName: uniqueName, pluginName: name, tags: tags, appId: appId, tenantId: tenantId, }); };真正将数据写入节点配置的是reducers/reducers.js中的AddPluginByMetaDataReducer。在构造PLUGIN_INPUT对象时appId与tenantId作为两个新条目加入value数组// agent-flow/src/components/parallelNode/reducers/reducers.js { id: uuidv4(), name: appId, type: DATA_TYPES.STRING, from: FROM_TYPE.INPUT, value: action.appId, }, { id: uuidv4(), name: tenantId, type: DATA_TYPES.STRING, from: FROM_TYPE.INPUT, value: action.tenantId, }3. 最终持久化的工具数据结构经过 reducer 处理后并行节点inputParams中toolCalls数组里的每个工具对象结构如下{ id: uuid, type: Object, from: Expand, value: [ { name: uniqueName, value: tool-unique-name }, { name: args, value: [...] }, { name: order, value: [...] }, { name: outputName, value: task_1 }, { name: tags, value: [...] }, { name: appId, value: app-123 }, // 新增 { name: tenantId, value: tenant-456 } // 新增 ] }注意并行节点与循环节点在存储位置上存在差异。并行节点把appId/tenantId存放在plugin.value数组中见 reducers/reducers.js而循环节点存放在toolInfo对象中见 loopNode/reducers/reducers.js 的updateToolInfo逻辑。UI 增强工具卡片的眼睛图标1. 卡片 header 布局每个并行任务的工具卡片使用JadeCollapse折叠面板渲染header 从左到右依次为工具输出名称左侧取自plugin.value中outputName字段眼睛图标中间仅当存在 appId 和 tenantId 时显示删除图标右侧。2. 显示条件与按钮行为ParallelPluginItem.jsx中的hasViewIcon与renderViewIcon实现了图标的条件渲染// agent-flow/src/components/parallelNode/ParallelPluginItem.jsx const hasViewIcon () { const appId plugin?.value?.find(item item.name appId)?.value; const tenantId plugin?.value?.find(item item.name tenantId)?.value; return !!(appId tenantId); }; const renderViewIcon () { if (!hasViewIcon()) { return null; } return ( Button disabled{shapeStatus.disabled} typetext classNameicon-button style{{height: 100%, marginLeft: auto, padding: 0 4px}} onClick{handleViewDetails} title{t(toolDetails)} EyeOutlined/ /Button /); };按钮特性总结特性实现说明显隐条件仅当工具同时包含appId与tenantId时才渲染hasViewIcon双重判断悬停提示title{t(toolDetails)}中文文案为“工具详情”见 zh_CN.json禁用状态disabled{shapeStatus.disabled}画布处于禁用/只读状态时不可点击事件隔离onClick中调用e.preventDefault()与e.stopPropagation()阻止事件冒泡到父级布局对齐眼睛图标自带marginLeft: auto删除图标的样式会根据是否显示眼睛图标动态调整有眼睛图标时删除图标不再需要marginLeft: auto3. 删除图标的样式联动为保证布局不跳动renderDeleteIcon做了动态样式适配const deleteIconStyle { height: 100%, padding: 0 4px, ...(hasViewIcon() ? {} : {marginLeft: auto}) };即有眼睛图标时眼睛图标负责右推删除图标紧随其后无眼睛图标时删除图标自己marginLeft: auto贴右。跳转逻辑从配置到新标签页打开handleViewDetails是跳转的核心实现完整链路如下// agent-flow/src/components/parallelNode/ParallelPluginItem.jsx const handleViewDetails (e) { e.preventDefault(); e.stopPropagation(); // 阻止事件冒泡 // 获取 appId 和 tenantId const appId plugin?.value?.find(item item.name appId)?.value; const tenantId plugin?.value?.find(item item.name tenantId)?.value; // 如果有 appId 和 tenantId则跳转到工具流详情页 if (appId tenantId) { // 获取 endpoint 配置 const config shape?.graph?.configs?.find(node node.node parallelNodeState); const endpoint config?.urls?.endpoint || window.location.origin; // 构建跳转 URL const targetUrl ${endpoint}/#/app-develop/${tenantId}/add-flow/${appId}?typeworkFlow; // 在新标签页中打开 window.open(targetUrl, _blank); } };1. 数据读取appId与tenantId直接从当前工具的plugin.value数组中按name查找与存储结构一一对应。只有两个字段都存在时if (appId tenantId)才执行跳转否则静默返回。2. endpoint 的查找优先级首先在shape.graph.configs中查找node parallelNodeState的配置项若配置了urls.endpoint使用该值若未配置回退到window.location.origin当前域名。3. 目标 URL 结构{endpoint}/#/app-develop/{tenantId}/add-flow/{appId}?typeworkFlow其中endpoint可自定义的服务地址见下文配置说明tenantId租户 IDappId目标应用工具流IDtypeworkFlow以工作流类型打开详情页。跳转使用window.open(targetUrl, _blank)在新标签页打开不会影响当前画布的编辑状态。endpoint 配置说明如何自定义跳转域名默认情况下跳转 URL 会使用window.location.origin即当前部署域名。如果需要指向其他域名例如跨环境跳转、前后端分离部署可以通过 graph 的configs注入自定义 endpoint。文档给出的标准配置方式如下configs.push({ node: parallelNodeState, urls: { endpoint: https://your-domain.com } });在实际工程中configs数组在应用入口统一构建并随画布初始化传入。以 agent-flow/src/App.jsx 为例多个节点类型都通过configs.push({ node: xxxNodeState, urls: {...} })注入各自所需的 URL 配置随后调用JadeFlow.edit({ ..., configs: configs })传给画布实例。开发者只需仿照同样模式为parallelNodeState增加urls.endpoint即可覆盖默认域名。shape.graph.configs是画布形状shape持有的全局配置数组ParallelPluginItem通过shape?.graph?.configs?.find(node node.node parallelNodeState)按节点类型精确命中配置项——这意味着即使画布中存在多个节点也不会串配。修改文件清单与职责划分本次功能共涉及并行节点模块的 4 个文件职责如下文件主要改动ParallelPluginItem.jsx导入EyeOutlined图标新增handleViewDetails跳转函数与renderViewIcon图标渲染函数含显隐条件判断在折叠面板 header 中展示眼睛图标ParallelTopBar.jsx在onSelect回调中提取appId与tenantId更新handlePluginAdd调用透传两个新参数ParallelWrapper.jsx扩展handlePluginAdd函数签名以接收appId、tenantIddispatch action 中携带新字段reducers/reducers.js在AddPluginByMetaDataReducer的PLUGIN_INPUT对象中新增appId、tenantId两个字段并持久化从 reducer 的注册机制看parallelComponent.jsx 通过addReducer(builtInReducers, AddPluginByMetaDataReducer(shape, self))将addPluginByMetaData等 reducer 注册到组件内建 reducer Map再经self.reducers统一分发——新增字段只需修改 reducer 内部的数据组装逻辑无需改动注册与分发框架充分体现了该画布架构的可扩展性。兼容性与注意事项老数据兼容对于不包含appId和tenantId的历史数据hasViewIcon()返回false眼睛图标不渲染工具卡片正常展示输出名称与删除按钮完全不影响既有功能。向后兼容所有改动均为新增字段与新增 UI不修改既有字段语义旧数据可以继续正常使用。图标显隐严格appId与tenantId必须同时存在才显示眼睛图标任一缺失都不显示。新标签页打开跳转不影响当前编辑状态可放心多任务并行查看。endpoint 兜底即使未配置 endpoint也会自动使用当前域名功能始终可用。每个任务独立判断并行节点的每个工具卡片独立判断显隐条件互不影响。与循环节点的对比同逻辑、异存储该功能并非并行节点独有agent-flow中循环节点loopNode与 LLM 节点llm/SkillForm.jsx均实现了相同的“工具详情查看”能力采用一致的跳转模式。并行节点与循环节点的对比如下特性循环节点并行节点数据提取相同runnables.APP.appIdtenantIddefault相同存储位置toolInfo对象LoopWrapper组装{appId, tenantId}plugin.value数组AddPluginByMetaDataReducer新增字段显示位置工具卡片右侧折叠面板 header 中间跳转逻辑相同endpoint配置 window.open新标签页相同配置节点名loopNodeStateparallelNodeState在循环节点中LoopWrapper.jsx会把toolInfo?.appId与toolInfo?.tenantId组装进plugin对象传给SkillForm因此SkillForm里直接读取plugin?.appId、plugin?.tenantId而并行节点因为支持多工具选择将字段扁平化存进每个工具的value数组读取时需按name查找。两种方案殊途同归均保证了跳转所需数据的完整持久化。小结并行节点工具详情查看功能通过“选择时提取 → reducer 持久化 → 条件渲染图标 → endpoint 兜底跳转”的完整链路为 Agent 画布提供了从配置态直达工具流编辑页的快捷入口。其设计要点在于数据字段随工具配置一起持久化以保障可回溯性、图标显隐严格受appId/tenantId双条件约束以保证老数据兼容、endpoint 配置与当前域名兜底结合以保证跨环境可用。开发者如需扩展同类能力可参照本实现模式在任意节点组件中复用。赞分享人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载相关推荐循环节点工具详情查看功能从数据提取到跨应用跳转的完整实现循环节点工具详情查看功能从数据提取到跨应用跳转的完整实现 摘要 在 AppPlatform 的 agent flow 前端工程中循环节点loopNode人工智能大模型AI 应用低代码后端前端流程编排RAGAgent-Flow 大模型节点工具详情查看功能数据提取、眼睛图标渲染与工具流跳转实现解析Agent Flow 大模型节点工具详情查看功能数据提取、眼睛图标渲染与工具流跳转实现解析 导读 本文基于 AppPlatform 工程中 agent flo人工智能大模型AI 应用低代码后端前端流程编排RAGSinaL2新浪Level2行情数据获取工具详解SinaL2新浪Level2行情数据获取工具详解 SinaL2是一个专门用于获取新浪Level2市场深度数据的轻量级Python客户端。该项目从dHydra框金融科技WebSocket上一篇如何在手机上免费运行AI大模型Maid AI助手让你拥有随身智能伙伴下一篇ImageSharp依赖管理NuGet包版本冲突解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考