Hydro项目题目页面相关比赛显示优化方案

在在线评测系统Hydro中，题目页面右下角的"相关比赛"功能模块存在一个用户体验问题：系统会显示当前用户无法参加的比赛。这些比赛既不会出现在用户的比赛列表中，用户也无法查看其详情，这给用户带来了困惑和不必要的疑问。

问题分析

该问题本质上是一个权限过滤和显示逻辑的问题。在系统设计中，"相关比赛"模块的当前实现可能只是简单地从数据库关联查询出所有包含该题目的比赛，而没有考虑以下关键因素：

1. 比赛可见性：比赛是否设置为公开可见
2. 参赛权限：用户是否有权限参加该比赛
3. 时间因素：比赛是否在可参加的时间范围内（未开始、进行中或已结束但允许查看）

这种粗放的显示方式导致了用户体验上的不一致：用户能看到某些比赛的存在，却无法进一步了解或参与，产生"看得见却摸不着"的挫败感。

技术解决方案

要解决这个问题，我们需要在以下几个层面进行改进：

后端数据过滤

在后端接口实现中，应当增加多维度的权限校验：

async function getRelatedContests(problemId, user) {
  // 获取所有包含该题目的比赛
  const contests = await ContestModel.find({
    problems: { $elemMatch: { pid: problemId } }
  }).toArray();
  
  // 过滤出用户有权限查看的比赛
  return contests.filter(contest => {
    // 检查比赛是否公开
    if (contest.private && !user) return false;
    
    // 检查用户是否有权限（如果是私有比赛）
    if (contest.private && user) {
      const hasAccess = checkUserContestAccess(user._id, contest._id);
      if (!hasAccess) return false;
    }
    
    // 检查比赛时间状态
    const now = new Date();
    if (contest.endAt < now && !contest.viewAfterEnd) return false;
    
    return true;
  });
}

前端显示优化

即使后端已经过滤了不可见的比赛，前端也应考虑提供更友好的提示：

1. 当没有相关比赛时，显示"暂无相关比赛"而非空白
2. 对于即将开始的比赛，可以显示开始倒计时
3. 对于已结束但允许查看的比赛，明确标注"已结束"

缓存策略考虑

由于比赛信息相对稳定但查询频率较高，可以考虑：

1. 对公开比赛的查询结果进行短期缓存
2. 对用户私有比赛的访问权限进行缓存
3. 设置合理的缓存过期策略，特别是对于即将开始或结束的比赛

实现注意事项

在具体实现时，需要注意以下几个技术细节：

1. 权限校验的全面性：确保考虑了各种比赛类型（公开/私有/密码保护等）
2. 性能考量：关联查询可能涉及多个集合，需要合理设计索引
3. 时间处理：妥善处理时区问题，确保比赛时间判断准确
4. 分页处理：如果相关比赛数量可能很多，需要支持分页加载

用户体验提升

除了基本的功能修复外，还可以考虑以下增强功能：

1. 参赛状态提示：对于用户已报名的比赛，显示特殊标识
2. 比赛重要性排序：将正在进行或即将开始的比赛排在前面
3. 快捷操作：对于可参加的比赛，提供"立即报名"快捷按钮

总结

通过对Hydro题目页面"相关比赛"模块的优化，我们不仅解决了当前用户看到的比赛与实际可参加比赛不一致的问题，还为用户提供了更加清晰、一致的参赛体验。这种改进体现了以用户为中心的设计思想，确保了系统各个功能模块间的行为一致性，是提升在线评测系统整体质量的重要一步。