Web Loading Overlay Strategy

• 适用：中大型容器加载。
• 关键参数：
  • show: 是否显示。
  • tone: light | dark。
  • compact: 仅在中等容器需要更紧凑时启用。
  • title / hint: 文案可按上下文调整。
  • className: 额外控制圆角、指针事件、背景叠层。

MediaLoadingOverlay

• 适用：小尺寸媒体位。
• 设计原则：轻、快、少文案，不破坏缩略图阅读。

落地步骤

1. 找到加载触发点（请求中 / 图片 onLoad 前）。
2. 先判断容器类型（大盒子 / 小媒体 / 深色弹框）。
3. 选择组件：BoxLoadingOverlay 或 MediaLoadingOverlay。
4. 把内联 loading JSX 抽掉，保留单一 loading 源。
5. 校验交互：

• 弹框关闭按钮是否可点。
• 图片拖拽/缩放是否被遮罩干扰。
• 分页/筛选切换时是否平滑。

代码检查

• pnpm --filter web exec biome check src/components src/pages
• 涉及中文文案时运行 python .codex/skills/encoding-guard/scripts/check_mojibake.py

反模式

• 在多个页面复制同一段 spinner + 渐变遮罩 JSX。
• 小卡片区域直接套用重量级全盒 loading 面板，导致视觉过重。
• overlay 默认拦截点击，影响关闭、拖拽、翻页。