Azure Logic Apps Viewer重托管需求：只读编辑器及步骤状态着色

我来分享一套完整的实现方案，刚好做过类似的需求，分两部分帮你搞定：

1. 重托管图形编辑器并开启只读模式 #

首先你需要把Azure Logic Apps Viewer集成到自己的网页项目中，不管是用npm包还是CDN加载都可以。核心是初始化的时候配置readonly参数来锁定所有编辑操作：

// 假设你已经引入了Logic Apps Viewer的依赖
const viewer = new LogicAppsViewer({
  container: document.getElementById('logic-app-container'), // 页面中承载编辑器的DOM容器
  workflow: yourWorkflowJSON, // 传入你的工作流定义JSON数据
  readonly: true, // 关键配置：开启只读模式，禁用拖拽、修改、删除等所有编辑操作
});

这样部署后，用户只能查看工作流结构，完全无法修改任何步骤，满足只读需求。

2. 基于工作流状态给步骤着色 #

接下来要实现成功步骤绿色、错误步骤红色的效果，需要先获取每个步骤的执行状态，再通过DOM操作或自定义样式来实现：

2.1 准备步骤状态映射数据 #

你需要先收集好每个步骤的执行结果，比如从Azure Logic Apps的执行历史API获取，或者自己维护一个状态映射对象：

// 示例：key是步骤的名称（必须和工作流定义中的name字段一致），value是执行状态
const stepStatusMap = {
  "Initialize_User_Variables": "Succeeded",
  "Fetch_User_Data_From_API": "Failed",
  "Send_Success_Notification": "Succeeded"
};

2.2 自定义着色逻辑 #

推荐用CSS类来控制样式，这样更易于维护和扩展。先定义样式：

/* 成功步骤样式 */
.step-status-succeeded {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}

/* 错误步骤样式 */
.step-status-failed {
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
}

然后监听Viewer的渲染完成事件，给对应步骤添加样式类：

viewer.on('renderComplete', () => {
  // 获取所有步骤节点（注意选择器要和Viewer生成的DOM结构匹配，不同版本可能略有差异）
  const stepNodes = document.querySelectorAll('.workflow-step-node');
  
  stepNodes.forEach(node => {
    // 提取步骤名称，这里假设节点的data-step-name属性存储了步骤名称
    const stepName = node.getAttribute('data-step-name');
    const status = stepStatusMap[stepName];
    
    if (status === 'Succeeded') {
      node.classList.add('step-status-succeeded');
    } else if (status === 'Failed') {
      node.classList.add('step-status-failed');
    }
  });
});

2.3 小技巧 #

如果你的Viewer版本支持，可以直接在初始化配置中传入状态映射，有些版本内置了状态着色功能，比如：

const viewer = new LogicAppsViewer({
  // 其他配置...
  stepStatus: stepStatusMap // 直接传入状态映射，自动着色
});

如果这个配置生效的话，就不用自己写DOM操作的代码了，更省心。

内容的提问来源于stack exchange，提问作者Andrea Tosato