pigway-frame-flow/docs/UI_LAYOUT_AUDIT.md

UI 一致性与图片加载检查

页面使用既有真实元数据创建控件和图片区域，不使用页面骨架或虚构图片卡片。 搜索、排序、卡片操作与写入保护在图片请求前初始化；已知图库数据可先显示， 后台刷新元数据。首页图片独立加载，不阻塞后续页面内容。

图片共用局部加载函数：旋转指示器仅居中显示于所属图片容器，网络请求与解码完成后 立即显示图片，失败后显示中英文提示。没有固定等待或动画最短展示时长。 图库仅请求可见区域及附近图片。浏览器禁缓存不会清除服务端缩略图缓存， 快速图片可能在第一帧绘制前完成，动画不一定肉眼可见。

手动拼版先创建全部真实区域与坐标/拖动交互，再并行请求图片。 每张图片独立完成或失败，持久的区域容器保持加载前后几何位置与坐标索引稳定。 过期布局事件不修改新的规划。

移动端导航单行横向滚动，当前入口自动进入可见区域；低高度横屏侧栏可滚动。 页头在窄屏分行，并为底部安全区域留白。可见控件保留 44 像素触控高度， 当前导航使用 aria-current，扩展表单标签关联相应控件。 表格与手机导航允许容器内滚动，不应导致整页水平溢出。

自动检查

使用隔离 Mock 服务、临时数据与测试账号，禁止对生产执行可写的 Mock 脚本。 Photos 授权使用拦截测试响应；不需要真实 NAS 凭据。

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 实机或软键盘测试。

连接中心内容较长，后续可按用户任务分组；模板与排版导航图标仍有重复。