Kargo项目中步骤跳过状态的UI优化方案

背景介绍

在Kargo项目的工作流执行过程中，当某个步骤带有条件判断（if语句）且判断结果为false时，当前系统会将该步骤标记为"成功完成"（显示绿色勾选图标）。这种表示方式存在明显的误导性，因为实际上该步骤并未被执行，而是被跳过了。

问题分析

当前实现存在两个主要问题：

1. 视觉误导：使用绿色成功图标表示被跳过的步骤，容易让用户误解该步骤已成功执行
2. 信息不足：展开步骤详情后，仅通过缺少OUTPUT或CONFIG部分来间接表明步骤被跳过，这种提示过于隐晦

技术解决方案

核心改进点

1. 状态标识优化：

   • 引入新的"跳过"状态标识（如灰色斜杠图标）
   • 区别于"成功"（绿色勾选）、"失败"（红色叉号）和"进行中"（蓝色圆圈）状态

2. 详情展示增强：

   • 在展开的步骤详情中明确显示"该步骤因条件不满足而被跳过"
   • 保留原始条件表达式供用户检查

实现方案

1. 控制器层：

   • 在步骤执行逻辑中明确区分"跳过"和"成功"状态
   • 当if条件为false时，设置步骤状态为"Skipped"而非"Success"

2. UI层：

   • 新增跳过状态的视觉元素
   • 优化步骤详情面板的布局，确保跳过状态清晰可见
   • 考虑添加工具提示说明跳过原因

技术考量

1. 向后兼容：

   • 新状态需要兼容现有工作流定义
   • 确保API响应包含足够的状态信息

2. 用户体验：

   • 跳过状态的视觉设计应足够醒目但不过于突出
   • 考虑添加快捷方式查看跳过原因

3. 性能影响：

   • 状态判断逻辑增加的条件检查对性能影响可忽略不计
   • UI渲染不需要额外资源

预期效果

实施此改进后，用户将能够：

• 一目了然地识别出被跳过的步骤
• 快速了解步骤被跳过的原因
• 减少对工作流执行状态的误解
• 更高效地进行问题排查和流程优化

扩展思考

这种状态细分的思路可以扩展到其他场景：

• 超时终止的步骤
• 被手动跳过的步骤
• 依赖项不满足导致的跳过

未来还可以考虑添加跳过步骤的统计信息，帮助用户分析工作流执行模式。