Files
cc-web/.planning/wasteland-narrow-right-focus/findings.md
2026-07-18 12:39:55 +08:00

3.8 KiB
Raw Blame History

调研记录

用户输入

  • 目标主题:wasteland(暗金荒野)。
  • 目标状态:窄屏。
  • 目标方向:优先显示背景图右侧,而不是当前偏左裁切。
  • 参考截图:sessions/_attachments/ebfd9a2e-e73e-425a-87da-fe79b17964ec.png、sessions/_attachments/c8ab2b98-5543-4a99-8cf1-b4e14eafff45.png。

资产角色

  • 现有运行时背景:public/assets/themes/wasteland/background.webp,保持原文件不变。
  • 两张会话附件仅作视觉对照,不进入 public/,本任务无派生资产。

代码与视觉基线

  • 背景源为 1672×941 WebP,SHA-256:ee52b136294a7a31181b67e209253fefe7ace8c2b76885e45621484fecb802cb。
  • 最终高保真组件层在 public/style.css 文件后部再次声明 html[data-theme='wasteland'] body,因此早期同名规则不是最终修改点。
  • 当前只有 max-width: 720px 使用 background-position: center, center, 70% 50%;约 1022px 的用户截图未命中该断点,仍使用桌面 center,导致可见区域偏向源图中部。
  • 第一张截图表现为右侧窄条只露出骑士局部;第二张截图是目标构图:可见区域覆盖源图右半部,骑士落在可见区域左侧,右侧圆环与留白同时保留。
  • 初步判断应优先把既有 70% 右侧聚焦扩展到更宽的窄屏区间,而不是修改背景资产或消息层。
  • 现有 wasteland-theme 回归在 scripts/regression.js 中明确断言 720px / 70%,新增断点或调整数值必须同步契约。
  • 工作树已有上一轮侧栏功能的 app.js / index.html / style.css / regression.js 未提交改动;本任务只追加背景定位相关最小差异。

候选裁切对比(590×767)

  • 50%:骑士大部分被裁到右侧边缘,左侧暗空区过多,不符合“显示右边”。
  • 70%:骑士主体进入画面,但仍偏右,右侧圆环与法杖显示不足。
  • 82%:骑士与圆环都进入画面,构图开始接近第二张参考图。
  • 90%:源图右侧区域更完整,骑士向左移动、右侧圆环基本完整,方向符合需求。
  • 下一步补测 100%(right center),在 90% 与 100% 中选择不会让骑士过度贴左的最终值。
  • 子代理核对确认:最终桌面规则位于高保真层,721–1100px 当前无专属定位;现有回归可能匹配早期旧规则产生假阳性,必须收窄到高保真层最终规则。
  • 100% / right center 最接近第二张参考图:骑士进入左半,法杖与右侧圆环完整保留,右侧区域表达最明确;选为最终值。
  • 断点策略:新增 721–1100px 右侧聚焦以覆盖用户约 1022px 的截图,同时把现有 ≤720px 最终规则从 70% 收敛为 right center,保证窄屏连续。
  • 用户实机反馈 right center 让主体“有点太靠左”;最终回调为 90% 50%,在原 70% 与 100% 之间保留右侧圆环,同时让骑士回到更自然的位置。

最终浏览器验收

  • Firefox 152 + WebDriver BiDi 使用实际 CSS(无内联覆盖)验证:1101px 保持桌面 50% 50%;1100、1022、721、720、590、390px 均为第三层 90% 50%。
  • 721→720 两侧 computed position 一致,没有断点跳位;所有视口横向溢出为 0。
  • 1022×844:骑士位于中右区域,右侧圆环完整进入画面;590×767:骑士相较 100% 明显向右回移;390×844:主体靠左但未贴边,右侧法杖与圆环仍保留。
  • 浏览器实际加载 style.css?v=20260718-wasteland-bg-right-2 / app.js?v=20260718-wasteland-bg-right-2,CSS 与背景 WebP 请求均为 HTTP 200。
  • 本任务未创建新主题、未改 DOM、未改资产;验收清单中的新主题注册、派生资产、动态组件状态均不适用,相关既有主题专项与全量回归用于确认未回归。
  • 独立终审确认最终层叠、主题隔离、cache bust、回归契约和上一轮侧栏功能均无阻断问题。