Expensify/App 中费用报告头像显示逻辑分析与优化

在 Expensify/App 项目中，存在一个关于费用报告头部头像显示逻辑的有趣问题。当用户提交费用报告时，报告头部的头像显示会根据费用数量发生变化：提交1笔费用时显示1个头像，提交2笔或更多费用时则显示2个头像。

问题背景

在费用报告功能中，报告头部通常会显示相关用户的头像。理想情况下，无论费用数量多少，头像显示逻辑应该保持一致。然而，当前实现中存在一个不一致的行为：单笔费用和多笔费用的头像显示方式不同。

技术分析

通过查看源代码，我们发现问题的根源在于 ReportUtils.ts 文件中的头像处理逻辑。当前实现中，当报告包含单笔交易时，系统只返回一个图标；而当报告包含多笔交易时，则返回两个图标（ownerIcon 和 managerIcon），即使用户并非管理员也会如此。

这种实现方式导致了不一致的用户体验，并且可能引起用户困惑。从技术角度看，这属于条件逻辑处理不当的问题。

解决方案

针对这个问题，我们提出了两种优化方案：

1. 条件返回方案：根据用户是否为管理员来返回不同的图标数组。如果是管理员，则返回两个图标；否则只返回管理员图标。

2. 简化方案：无论用户身份如何，都只返回一个图标。对于管理员显示所有者图标，对于非管理员显示管理员图标。

经过评估，第一种方案被采纳并实现，因为它既解决了显示不一致的问题，又保留了必要的用户身份区分功能。

技术实现细节

优化后的代码逻辑更加清晰和一致。系统现在会：

• 检查用户是否为管理员
• 根据身份决定返回的图标组合
• 确保无论费用数量多少，显示逻辑保持一致

这种修改不仅解决了当前问题，还使代码更易于维护和扩展。

测试与验证

修改后，测试团队在多个平台（包括Android、iOS、Windows和MacOS的各种浏览器和应用版本）上进行了全面验证。测试结果显示问题已完全解决，且没有引入新的问题。

总结

这个案例展示了即使是看似简单的UI显示逻辑，也可能隐藏着需要仔细处理的条件判断。通过分析问题根源并实施有针对性的解决方案，我们不仅修复了当前问题，还提高了代码的整体质量。这种类型的优化对于保持应用的一致性和用户体验至关重要。