在阶段推进器头部渲染前，获取阶段数据或自定义头部背景色。

适用场景

适用于 Web端。

功能描述

在阶段推进器头部渲染前触发此事件，可用于获取阶段推进器实例数据，或自定义阶段头部各阶段的背景色。

典型场景示例

• 场景 1：获取阶段数据用于业务判断
  例如：根据当前阶段状态执行不同的业务逻辑

• 场景 2：自定义阶段头部背景色
  例如：根据阶段状态（进行中、已完成、未开始）显示不同颜色

• 场景 3：动态调整头部样式
  例如：根据权限或业务状态隐藏或显示特定阶段

适用场景

• 需要在阶段头部渲染前获取阶段数据进行业务处理
• 需要根据阶段状态自定义阶段节点的颜色
• 需要动态控制阶段头部的显示效果

适用页面

• Web端阶段推进器头部区域

开发思路

功能增强通常可以拆成三步理解：

1. 明确要增强的是哪一个环节

   • 确定需要获取的数据或自定义的样式

2. 选择合适的扩展事件/钩子

   • Web 端：stage.header.render.before

3. 在插件中接入扩展点并验证行为

   • 通过 api.getStageData() 获取所有阶段数据
   • 通过 api.customStagesStyle() 自定义阶段背景色

开发流程

1. 明确头部控制需求

   • 确定需要获取的数据或自定义的样式

2. 编写头部渲染逻辑

   module.exports = class Plugin {
       apply() {
           return [{
               event: 'stage.header.render.before',
               functional: this.stageHeaderRenderBefore.bind(this),
           }];
       }
   
       async stageHeaderRenderBefore(api) {
           // 获取阶段数据
           const stageData = await api.getStageData();
           console.log(stageData, 'stageData');
   
           // 自定义阶段背景色
           const colorMap = {
               in_progress: 'red',
               pass: 'blue',
               unstart: 'yellow',
               uncompleted: 'green',
           };
           const customConfig = stageData.stages.map((item) => ({
               state: item.state,
               backgroundColor: colorMap[item.state] || 'gray'
           }));
           api.customStagesStyle(customConfig);
       }
   };

3. 配置插件

   • 在阶段推进器高级配置中选择对应插件

推荐入口

• stage.header.render.before

注意事项

1. 颜色格式：backgroundColor 支持任意有效 CSS 颜色值，如 #FF0000、rgb(255, 0, 0)、red
2. 阶段状态：state 表示阶段状态，如 in_progress、pass、unstart、uncompleted
3. 数据完整性：修改样式时需确保不影响原有数据结构的正确性