Genarrative/docs/technical/ROUTE_IMAGE_READY_GATE_2026-04-25.md

路由首屏图片等待门闩 2026-04-25

背景

平台首页、作品详情、拼图运行态等页面会在首屏展示作品封面、角色图、场景背景图或拼图原图。此前页面主体可能先进入，图片随后分批出现，移动端尤其容易看到背景图闪入、封面占位与真实图片切换。

落地约束

1. 入口路由组件加载完成后，页面主体先挂载但保持不可见，继续让业务数据请求、图片请求和布局计算正常发生。
2. 门闩扫描当前路由根节点内的 <img>、src/currentSrc 和 CSS background-image / border-image-source 中的 url(...)。
3. 扫描到的图片统一通过 Image() 预加载；图片成功、失败或超时都视为 settled，避免单张异常图片阻塞整站进入。
4. 所有已发现图片 settled 且 DOM 短暂稳定后，再一次性显示页面主体。
5. 门闩只负责前端呈现时机，不承接作品封面选择、资产读链路、玩法逻辑或后端数据裁决。

体验规则

• 等待态继续复用 RouteLoadingScreen，只显示简短加载文案，不在 UI 中追加规则说明。
• RouteLoadingScreen 必须读取 tavernrealms.settings.v1 中的 platformTheme，并复用 platform-theme--light / platform-theme--dark 与 platform-body-fill / platform-text-* token，不能硬编码独立深色背景。
• 页面主体隐藏时使用 visibility: hidden，不能用 display: none，否则浏览器可能不触发布局与图片加载。
• 图片加载失败不直接改写业务 UI；后续仍由原页面的兜底图、占位图或错误态处理。

涉及文件

• src/routing/RouteImageReadyGate.tsx
• src/routing/RouteLoadingScreen.tsx
• src/routing/RouteImageReadyGate.test.ts
• src/main.tsx