39 lines
3.3 KiB
Markdown
39 lines
3.3 KiB
Markdown
|
# 首页设计与发布检查 — 2026-09-20
|
|||
|
|
|
|||
|
|
final result: passed
|
|||
|
|
|
|||
|
|
## 宽屏修复补充
|
|||
|
|
|
|||
|
|
用户的 2560 × 1305 截图暴露了此前未覆盖的大屏问题：1660px 最大宽度配合靠左布局，右侧留下约708px空白。移除宽度上限与大屏自动右边距后，主卡右边距为36px；宽屏插画保持原始比例完整显示，统计项在各自分栏中居中。
|
|||
|
|
|
|||
|
|
2026-09-20 复查：2560px、1920px 右边距均为36px，无横向溢出；390px 保持单列且无横向溢出。构建通过，浏览器无 error/warn。证据：`design/home-redesign/width-2560-final.png`。本次仅修改首页CSS，既有设计细节差异仍以原检查记录为准。
|
|||
|
|
|
|||
|
|
## 范围与证据
|
|||
|
|
|
|||
|
|
本轮仅重写用户端首页。设计来源为 `E:/Codex/story/deliverables/online-redesign-20260920/customer/designs/01-home.png`，1487 × 1058。
|
|||
|
|
|
|||
|
|
对照实现：`candidate-desktop.png`，同为 1487 × 1058、DPR 1、奶奶/离线设备/本周无记录状态。两张图片在同一次工具输出中一起查看，未拉伸或改变宽高比；并在原分辨率检查了导航、标题、任务行、统计、每日日期、按钮与最近动态区域。后续发布基线更新保留同一首页实现；仅新增窄屏 body 最小宽度修复。
|
|||
|
|
|
|||
|
|
其他证据：`candidate-mobile.png`（390 宽）、`candidate-tablet.png`（900 宽）、`candidate-320-final.png`（320 宽）。`release-desktop-final.png` 是浏览器默认尺寸截图，不用于同尺寸保真判定。
|
|||
|
|
|
|||
|
|
## 五项保真检查
|
|||
|
|
|
|||
|
|
- 字体：本地 Noto Sans SC，标题层级、字重、行高与正文节奏已对照；不受旧 Cal Sans 全局标题样式覆盖。
|
|||
|
|
- 布局：62px 顶栏、228px 侧栏、81px 长者条、364px 主卡、290px 统计卡；桌面没有额外垂直溢出挤窄内容。
|
|||
|
|
- 颜色：暖白背景、浅鼠尾草绿主卡、深绿主按钮、陶土色辅助图标；隔离了遗留黑色和蓝色按钮规则。
|
|||
|
|
- 图片：三张独立插画资源清晰，避免将整张设计稿作为页面背景。P3 差异：重新生成的头像、音箱和绿植细节以及标准库图标与原稿不逐像素相同，不宣称完全像素一致。
|
|||
|
|
- 内容：保留设计中的准备步骤、空状态与信息顺序；生产读取真实长者、设备和聊天数据。无记录不推断心情，未知设备状态不冒充离线。
|
|||
|
|
|
|||
|
|
## 修正与验证
|
|||
|
|
|
|||
|
|
- P1 已修复：全局旧主题将首页按钮覆盖为黑色/蓝色；仅从遗留选择器中排除新首页和手机抽屉。
|
|||
|
|
- P2 已修复：页面多出几像素高度，引入滚动条；调整卡片高度和间距。
|
|||
|
|
- P2 已修复：320px 且存在传统滚动条时的 body 最小宽度溢出；最终 clientWidth 与 scrollWidth 均为 305。
|
|||
|
|
- 移动端标题可换行，导航抽屉可打开、关闭，并可进入设备检查；设备检查项可勾选，资料、聊天入口和家庭菜单已验证。
|
|||
|
|
- 修复 Drawer 旧 width 参数警告；最终本地检查和线上登录页控制台无 error/warn。
|
|||
|
|
- 生产候选 `npm run build` 通过；统计/时区/设备状态 6 项测试通过。保留既有大包体积提示。
|
|||
|
|
|
|||
|
|
无未解决的 P0/P1/P2 设计问题。在线未重新完成登录，因此没有声称完成真实账户下的全流程验收；设计与交互检查使用相同组件的本地示例数据。
|
|||
|
|
|
|||
|
|
旧检查报告已保存在 `design-qa-before-home.md`。
|