3.8 KiB
3.8 KiB
调研记录
用户输入
- 目标主题:
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、回归契约和上一轮侧栏功能均无阻断问题。