Expensify/App中费用预览违规红点显示问题的技术解析

问题背景

在Expensify/App项目中，用户报告了一个关于费用预览界面中违规红点显示异常的问题。具体表现为：当用户在默认禁用工作流的首个工作区中创建手动费用时，虽然费用详情页面和左侧导航栏(LHN)能正确显示违规红点标记，但在费用预览界面却未能显示相应的违规提示。

技术分析

问题根源

经过深入分析，发现问题的核心在于两个关键因素：

1. 违规类型配置不完整：在ViolationsUtils.ts文件中，'categoryOutOfPolicy'类型的违规默认将showInReview属性设置为false，导致这类违规不会在预览界面显示红点标记。

2. 工作流状态判断逻辑：ReportPreviewActionUtils.ts文件中的逻辑会检查工作流是否启用，如果工作流被禁用，则直接返回false，阻止了违规红点的显示。

解决方案对比

开发团队提出了两种不同的解决方案思路：

1. 直接修改违规类型配置：简单地将'categoryOutOfPolicy'违规的showInReview属性设置为true。这种方法直接但可能不够全面。

2. 重构判断逻辑：创建新的工具函数来识别那些不需要工作流功能也能被审查的违规类型(如missingCategory、missingTag等)，然后在判断逻辑中添加相应条件。这种方法更具扩展性和维护性。

最终团队选择了第二种方案，因为它能更好地适应未来可能新增的违规类型，同时保持了代码的清晰结构。

实现细节

具体实现包括：

1. 在ViolationsUtils.ts中完善违规类型的showInReview配置
2. 在ReportPreviewActionUtils.ts中优化工作流状态判断逻辑
3. 确保不同界面(LHN、详情页、预览页)的违规提示显示一致性

测试验证

为确保修复效果，设计了以下测试场景：

1. 使用默认禁用工作流的首个工作区
2. 创建包含违规类别的费用记录
3. 验证各界面(预览、详情、LHN)的红点显示一致性
4. 特别关注类别违规在预览界面的可见性

经验总结

这个案例给我们带来几点重要启示：

1. 初始设计考虑要全面：在定义违规类型时，应充分考虑其在各界面中的显示需求。

2. 条件判断要细致：涉及功能开关的判断逻辑需要仔细评估其对用户体验的影响。

3. 测试覆盖要完整：对于跨多界面的功能，需要设计端到端的测试场景。

4. 解决方案要有前瞻性：选择更具扩展性的方案虽然初期成本较高，但长期维护成本更低。

通过这次问题的解决，Expensify/App在违规提示功能的用户体验和代码质量上都得到了提升，为后续类似功能的开发积累了宝贵经验。