50 lines
3.0 KiB
Markdown
50 lines
3.0 KiB
Markdown
# UI 一致性与图片加载检查
|
|
|
|
页面使用既有真实元数据创建控件和图片区域，不使用页面骨架或虚构图片卡片。
|
|
搜索、排序、卡片操作与写入保护在图片请求前初始化；已知图库数据可先显示，
|
|
后台刷新元数据。首页图片独立加载，不阻塞后续页面内容。
|
|
|
|
图片共用局部加载函数：旋转指示器仅居中显示于所属图片容器，网络请求与解码完成后
|
|
立即显示图片，失败后显示中英文提示。没有固定等待或动画最短展示时长。
|
|
图库仅请求可见区域及附近图片。浏览器禁缓存不会清除服务端缩略图缓存，
|
|
快速图片可能在第一帧绘制前完成，动画不一定肉眼可见。
|
|
|
|
手动拼版先创建全部真实区域与坐标/拖动交互，再并行请求图片。
|
|
每张图片独立完成或失败，持久的区域容器保持加载前后几何位置与坐标索引稳定。
|
|
过期布局事件不修改新的规划。
|
|
|
|
移动端导航单行横向滚动，当前入口自动进入可见区域；低高度横屏侧栏可滚动。
|
|
页头在窄屏分行，并为底部安全区域留白。可见控件保留 44 像素触控高度，
|
|
当前导航使用 aria-current，扩展表单标签关联相应控件。
|
|
表格与手机导航允许容器内滚动，不应导致整页水平溢出。
|
|
|
|
## 自动检查
|
|
|
|
使用隔离 Mock 服务、临时数据与测试账号，禁止对生产执行可写的 Mock 脚本。
|
|
Photos 授权使用拦截测试响应；不需要真实 NAS 凭据。
|
|
|
|
```sh
|
|
FRAME_FLOW_URL=http://127.0.0.1:6005 \
|
|
FRAME_FLOW_ENV_FILE=/path/to/mock.env \
|
|
FRAME_FLOW_TEST_USERNAME=test-ui \
|
|
FRAME_FLOW_TEST_PASSWORD=test-only-password \
|
|
node scripts/ui-layout-audit.cjs
|
|
```
|
|
|
|
需要已安装的 Playwright；可通过 NODE_PATH 指定运行时。
|
|
FRAME_FLOW_VIEWPORTS 接受包含 width/height 的 JSON 数组；
|
|
FRAME_FLOW_SCREENSHOT_DIR 可选，用于保存仅含测试数据的截图。
|
|
|
|
| 脚本 | 检查范围 | 本次结果 |
|
|
| --- | --- | --- |
|
|
| ui-layout-audit.cjs | 11 页面、本地/云端图库、6 类弹窗、展开手动拼版；溢出、控件间距、触控高度、弹窗边界 | 16 组尺寸/语言/主题组合，305 项通过 |
|
|
| ui-image-loading.cjs | 三种宽度、明暗主题；局部居中、成功解码、错误提示与无障碍状态 | 45 项通过 |
|
|
| ui-progressive-loading.cjs | 阻塞初始化/元数据/图片/任务筛选；真实图片数量、搜索先于图片请求、无骨架 | 14 项通过 |
|
|
| ui-studio-image-loading.cjs | 桌面/手机、明暗主题；并行请求、独立完成/失败、坐标与拖动、稳定区域 | 31 项通过 |
|
|
|
|
上述检查无页面脚本异常。生产静态文件与构建文件哈希比对、health/ready 检查通过；
|
|
生产浏览器交互验证使用拦截的账号、规划及素材响应，对真实服务仅 GET，
|
|
不代表真实账号密码登录、AI 生成、iOS/Android 实机或软键盘测试。
|
|
|
|
连接中心内容较长，后续可按用户任务分组；模板与排版导航图标仍有重复。
|