人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载导读本文基于 AppPlatform 工程中agent-flow前端模块的 llm-tool-detail-view.md 特性文档完整讲解大模型节点工具详情查看功能的实现原理从工具选择时的appId/tenantId数据提取与持久化到工具卡片上眼睛图标的条件渲染再到跨页面跳转至对应工具流详情页的完整链路。读完本文你将掌握该功能涉及的全部数据结构、reducer 处理逻辑、配置项endpoint以及它与循环节点、并行节点同类实现的一致性设计可直接对照源码二次开发或排查问题。功能概述在大模型LLM节点的技能Skill配置面板中用户可以添加多个工具Tool或工具流Workflow。本功能为这些工具卡片新增了查看详情入口当工具数据中同时携带appId与tenantId时卡片右侧会渲染一个眼睛图标EyeOutlined点击后在新标签页打开该工具对应的工具流详情页应用开发 / 流程编辑页面方便用户在不离开当前流程编辑状态的前提下快速核对工具的真实定义、入参出参与版本信息。该功能的核心数据流可以概括为选择工具 → 提取身份信息 → reducer 持久化 → 请求工具详情 → 构建选项 → 条件渲染眼睛图标 → 跳转详情页。涉及的源码主要位于 agent-flow/src/components/llm 目录下。一、数据存储从选择回调中提取 appId 与 tenantId1.1 提取位置与字段来源当用户点击添加技能按钮时SkillForm组件通过shape.page.triggerEvent触发SELECT_SKILL事件并在回调onSelect中拿到后端返回的完整工具元数据。数据提取逻辑位于 agent-flow/src/components/llm/SkillForm.jsxconst onSelect (data) { // 提取 appId 和 tenantId const appId data.runnables?.APP?.appId; const tenantId data.schema?.parameters?.properties?.tenantId?.default; dispatch({ type: addSkill, value: data.uniqueName || data, appId: appId, tenantId: tenantId, }); };两个字段的提取路径有明确分工字段提取路径含义appIddata.runnables.APP.appId工具对应的 App 实例 ID用于定位要跳转的流程tenantIddata.schema.parameters.properties.tenantId.default租户 ID用于在详情页路由中区分租户空间源码中使用可选链?.访问说明老数据或某些工具如纯 TOOL 类型插件可能缺少这些字段此时appId/tenantId为undefined——这正好是眼睛图标不显示的条件。1.2 reducer 持久化dispatch触发的addSkillaction 由AddSkillReducer处理位于 agent-flow/src/components/llm/reducers/reducers.js。它构造newSkill对象时把appId和tenantId作为独立字段写入const newSkill { id: uuidv4(), type: String, from: Input, value: action.value, // 工具的 uniqueName appId: action.appId, // 新增 tenantId: action.tenantId, // 新增 }; const newTools {...tools, value: [...tools.value, newSkill]}; replaceTool(newConfig, newTools, tools);注意两点实现细节防止重复添加reducer 会先比对tools.value与workflows.value中已有的uniqueNametoolUniqueNames.includes(action.value)重复则直接返回原 config写入位置这些信息保存在inputParams中name tools这一项的value数组中即随节点配置一起持久化刷新页面后依然存在。1.3 完整数据结构文档给出了大模型节点中工具项的标准结构结合 reducer 实现可确认如下{ inputParams: [ { name: tools, value: [ { id: uuid, type: String, from: Input, value: tool-unique-name, appId: app-123, // 新增选择时提取 tenantId: tenant-456, // 新增选择时提取 name: 工具名称, // updateTools 时更新 tags: [TOOL], // updateTools 时更新 version: 1.0.0 // updateTools 时更新 } ] } ] }其中id由uuidv4()生成value为工具的全局唯一名uniqueNamename、tags、version属于展示性信息由后续的getSkillInfo网络请求回填见第三节。二、UI 增强工具卡片与眼睛图标的条件渲染2.1 卡片布局SkillContent组件agent-flow/src/components/llm/SkillForm.jsx负责渲染每个已选工具卡片布局从左到右依次为工具图标左侧根据tags动态选择——WATERFLOW类型使用WorkflowIcon其余使用ToolIcongetIcon函数依据 agent-flow/src/common/Consts.js 中的TOOL_TYPE常量判断工具名称和类型中间展示为{item.name}({t(getType(item.tags))})例如我的工具(workflow)版本号右侧span classNametool-version-font{item.version}/span眼睛图标右侧仅在appId与tenantId同时存在时渲染删除图标最右侧触发deleteToolaction。2.2 眼睛图标渲染函数renderViewIcon是显示条件判断的核心agent-flow/src/components/llm/SkillForm.jsxconst renderViewIcon (item) { // 只有当存在 appId 和 tenantId 时才显示眼睛图标 if (!item.appId || !item.tenantId) { return null; } return ( Button disabled{disabled} typetext classNameicon-button style{{padding: 0 4px}} onClick{(e) handleViewDetails(e, item)} title{t(toolDetails)} EyeOutlined/ /Button /); };它具备文档所述的全部特性条件显示!item.appId || !item.tenantId任一缺失即返回null实现仅包含 appId 和 tenantId 时显示悬停提示title{t(toolDetails)}国际化文案在 agent-flow/src/i18n/zh_CN.jsontoolDetails: 工具详情与 agent-flow/src/i18n/en_US.jsonTool Details中均有定义禁用状态disabled来自shapeStatus.disabled流程处于只读/运行态时按钮不可点击阻止冒泡handleViewDetails内先执行e.preventDefault()与e.stopPropagation()避免点击眼睛图标时触发父元素的点击/折叠事件。2.3 删除按钮的协同布局删除按钮调用handleDelete(item.value)触发deleteToolreduceragent-flow/src/components/llm/reducers/reducers.js。该 reducer 会先尝试从tools中删除若uniqueName不在tools中则尝试从workflows中删除保证两种添加来源都能正确移除。三、工具详情获取getSkillInfo 与 processToolData工具卡片上的名称、标签、版本等展示信息并非选择时就有而是通过getSkillInfo从后端拉取。该函数位于 agent-flow/src/components/llm/LlmFormWrapper.jsx是本文档区别于循环/并行节点的特有环节收集 uniqueName 列表从tool.value中 map 出所有toolItem.value若为空则直接setToolOptions([])发起请求拼接查询串uniqueNamesauniqueNamesb...GET 请求config.urls.toolListEndpoint构建响应 Mapnew Map(responseData.map(item [item.uniqueName, item]))processToolData 组装 toolOptions若后端返回了该uniqueName则生成{ id: uuidv4(), name, tags, version, value, appId, tenantId }关键点appId与tenantId不来自后端响应而是从本地tool.value中按uniqueName匹配回填tool.value.find(t t.value uniqueName)若后端未返回或请求失败则使用本地toolItem作为 fallback名称标记为Unknown保证工具卡片仍可渲染。随后useEffect监听toolOptions变化触发updateToolsreducer 将名称、标签、版本、appId、tenantId 合并回 configagent-flow/src/components/llm/reducers/reducers.jsupdatedTool.name actionItem.name || updatedTool.name; updatedTool.tags actionItem.tags || updatedTool.tags; updatedTool.version actionItem.version || updatedTool.version; updatedTool.appId actionItem.appId || updatedTool.appId; updatedTool.tenantId actionItem.tenantId || updatedTool.tenantId;这里使用||兜底语义因此不会覆盖老数据中已有的appId/tenantId也兼容字段缺失的场景。四、跳转逻辑构建详情页 URL 与 endpoint 配置4.1 核心实现handleViewDetailsagent-flow/src/components/llm/SkillForm.jsx实现跳转const handleViewDetails (e, item) { e.preventDefault(); e.stopPropagation(); // 阻止事件冒泡 const appId item.appId; const tenantId item.tenantId; if (appId tenantId) { // 获取 endpoint 配置 const config shape?.graph?.configs?.find(node node.node llmNodeState); const endpoint config?.urls?.endpoint || window.location.origin; // 构建跳转 URL const targetUrl ${endpoint}/#/app-develop/${tenantId}/add-flow/${appId}?typeworkFlow; // 在新标签页中打开 window.open(targetUrl, _blank); } };跳转流程共四步从工具配置中读取appId和tenantId两者缺一不可从shape.graph.configs中按node llmNodeState查找节点配置取出urls.endpoint拼接目标 URL路由结构为/{tenantId}/add-flow/{appId}?typeworkFlowwindow.open(targetUrl, _blank)新标签页打开不打断当前画布的编辑状态。实现细节说明仓库实际代码生成的 URL 形如https://your-domain.com/#/app-develop/tenant-456/add-flow/app-123?typeworkFlow带/#/哈希路由前缀与文档示例中的{endpoint}/app-develop/...在形式上略有差异跳转的最终路径语义一致集成方以源码为准。4.2 endpoint 配置方式若部署环境与详情页所在应用域名不一致可在初始化JadeFlow.edit时通过configs自定义configs.push({ node: llmNodeState, urls: { endpoint: https://your-domain.com } });该机制的运行前提是JadeFlow.edit接收的configs数组会写入graph.configs而handleViewDetails正是从shape.graph.configs中检索。agent-flow的示例入口 agent-flow/src/App.jsx 中可以看到llmNodeState的完整配置骨架除endpoint外还包含llmModelEndpoint模型列表接口、toolListEndpoint工具列表接口以及params.tenantId/appIdconfigs.push({ node: llmNodeState, urls: { llmModelEndpoint: , toolListEndpoint: , workflowListEndpoint: , }, params: { tenantId: , appId: , }, });若endpoint未配置代码回退到window.location.origin即默认使用当前页面域名保证功能在单域名部署下开箱即用。五、完整工作流程串联结合文档与源码大模型节点工具详情查看的完整链路如下用户选择工具点击添加技能按钮SkillForm触发SELECT_SKILL事件事件注册见 agent-flow/src/flow/jadeFlowEntry.jsx 的onToolSelect数据提取onSelect回调从selectedData.runnables.APP.appId与selectedData.schema.parameters.properties.tenantId.default提取appId/tenantId数据存储AddSkillReducer将含appId/tenantId的工具项写入tools.value数组并持久化获取详情getSkillInfo根据uniqueName列表请求toolListEndpoint获取名称、标签、版本等元信息构建选项processToolData组装toolOptions并从本地 config 回填appId/tenantId更新显示updateToolsreducer 将展示信息合并回 configname/tags/version更新appId/tenantId兜底保留渲染卡片SkillContent遍历toolOptions渲染工具卡片renderViewIcon依据appId/tenantId是否存在决定是否显示眼睛图标跳转详情点击眼睛图标 → 读取llmNodeState的urls.endpoint缺省回退window.location.origin→ 拼接/{tenantId}/add-flow/{appId}?typeworkFlow→ 新标签页打开。六、兼容性设计文档明确了该功能的向后兼容策略源码实现与之完全对应老数据兼容不包含appId/tenantId的旧工具数据不显示眼睛图标工具名称、版本、删除功能照常工作字段缺失不报错renderViewIcon的条件判断与getSkillInfo的 fallback 逻辑Unknown名称、空tags保证历史模板数据也能正常渲染不影响现有功能新增字段仅追加在既有对象上updateTools的||合并策略不会破坏已有配置与循环/并行节点一致性数据提取路径、跳转 URL 结构与 endpoint 回退机制三处节点完全一致详见下节对比。七、与循环节点、并行节点的实现对比该功能在三种节点上采用了统一的提取-存储-渲染-跳转模式。文档给出的对比表结合源码验证后如下特性循环节点并行节点大模型节点数据提取路径runnables.APP.appIdschema.parameters.properties.tenantId.default相同相同存储位置toolInfo对象随插件元数据plugin.value数组{name:appId,value}形式tools.value数组平铺字段形式显示位置工具卡片右侧折叠面板 header工具卡片右侧跳转逻辑{endpoint}/#/app-develop/{tenantId}/add-flow/{appId}?typeworkFlow相同相同配置节点名loopNodeStateparallelNodeStatellmNodeState额外处理--需要通过getSkillInfo获取工具详情具体源码对照循环节点agent-flow/src/components/loopNode/SkillForm.jsx 的onSelect提取字段后传给handlePluginChangehandleViewDetails查找loopNodeState配置L86-L106并行节点agent-flow/src/components/parallelNode/ParallelPluginItem.jsx 从plugin.value中按name查找appId/tenantIdhasViewIcon()判断显示handleViewDetails查找parallelNodeState配置且删除按钮样式会根据是否存在眼睛图标动态调整marginLeft: auto保证两种布局下图标右对齐。三处实现共享相同的跳转 URL 模板与 endpoint 回退策略仅配置节点名与数据存取结构不同便于统一维护。八、二次开发指引事件与国际化扩展点若要在该功能基础上扩展可关注以下扩展点事件触发节点工具选择通过SELECT_SKILLLLM、SELECT_LOOP_PLUGIN循环、SELECT_PARALLEL_PLUGINS并行三种事件与宿主应用交互注册入口集中在 agent-flow/src/flow/jadeFlowEntry.jsx国际化眼睛图标悬停提示使用t(toolDetails)键新增文案只需在 agent-flow/src/i18n/zh_CN.json 与 agent-flow/src/i18n/en_US.json 中同步添加配置注入宿主应用通过JadeFlow.edit({ configs })注入llmNodeState.urls.endpoint即可切换跳转域名配置骨架可参考 agent-flow/src/App.jsx。小结大模型节点工具详情查看功能通过选择时提取身份字段 → reducer 持久化 → 请求回填展示信息 → 条件渲染眼睛图标 → 按 endpoint 跳转详情页五段式设计在保持老数据完全兼容的前提下为用户提供了从流程编辑画布直达工具流详情页的快捷通道。其数据提取路径、URL 构建规则与 endpoint 配置方式与循环、并行节点保持一致是 agent-flow 节点工具交互能力中可复用的典型模式。相关源码集中在 agent-flow/src/components/llm 目录读者可对照SkillForm.jsx、LlmFormWrapper.jsx与reducers/reducers.js三个文件深入研读。赞分享人工智能大模型AI 应用低代码后端前端流程编排RAG【免费下载链接】app-platformAppPlatform 是一个前沿的大模型应用工程旨在通过集成的声明式编程和低代码配置工具简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境以支持从概念到部署的全流程 AI 应用开发。项目地址https://gitcode.com/ModelEngine/app-platform点击查看免费下载相关推荐如何快速提取图表数据WebPlotDigitizer让科研绘图秒变可分析数据的智能工具如何快速提取图表数据WebPlotDigitizer让科研绘图秒变可分析数据的智能工具 在科研、工程和数据分析工作中我们经常需要从论文、报告中的图表提取精数据分析数据可视化计算机视觉图像处理如何安装Minecraft Wurst7客户端超简单图文教程让你5分钟上手如何安装Minecraft Wurst7客户端超简单图文教程让你5分钟上手 Minecraft Wurst7客户端是一款功能强大的Minecraft模组工具游戏开发LLaMA-Adapter模型转换工具checkpoint提取与格式转换详解LLaMA Adapter模型转换工具checkpoint提取与格式转换详解 LLaMA Adapter是一个革命性的轻量级适配器方法能够在短短1小时内使用人工智能大模型微调多模态上一篇Layerdivider智能图像分层神器3步让任何图片变可编辑PSD下一篇2025终极黑苹果指南从零构建稳定macOS系统的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考