63 lines
3.9 KiB
Markdown
63 lines
3.9 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 | 阻塞初始化/元数据/图片/任务筛选；首次无缓存时控件先就绪、输入保留、慢请求切换、列表失败、无骨架 | 18 项通过 |
|
|
| ui-studio-image-loading.cjs | 桌面/手机、明暗主题；并行请求、独立完成/失败、坐标与拖动、稳定区域 | 31 项通过 |
|
|
|
|
上述检查无页面脚本异常。生产静态文件与构建文件哈希比对、health/ready 检查通过；
|
|
生产浏览器交互验证使用拦截的账号、规划及素材响应，对真实服务仅 GET，
|
|
不代表真实账号密码登录、AI 生成、iOS/Android 实机或软键盘测试。
|
|
|
|
连接中心内容较长，后续可按用户任务分组；模板与排版导航图标仍有重复。
|
|
|
|
|
|
## 首次未缓存图库的初始化
|
|
|
|
目的地标签、搜索、排序、刷新和上传控件必须先于列表接口完成。
|
|
仅已有列表的缓存分支先渲染还不够；无缓存时也应创建真实控件与空的列表容器。
|
|
元数据返回前不推测图片数量，不显示真实空图库提示，不生成骨架卡片。
|
|
列表失败保留页面控件；慢云端请求期间切换 NAS，迟到响应不得覆盖新页面。
|
|
列表返回后保留之前输入的搜索词和排序。任务筛选在同一导航内复用请求，仍不阻塞图库。
|
|
|
|
启动使用 Settings API 中不调用厂商接口的 device_catalog；完整设备状态作为后台更新，
|
|
迟到响应在退出账号后不应用。ui-gallery-bootstrap.cjs 同时阻塞设备状态与图片列表，
|
|
验证真实控件仍先显示，列表返回后保留查询和排序，2 项通过。
|