Release v0.1.5: unify image loading and mobile layouts on port 6005 [skip ci]
This commit is contained in:
渡口浪人
+37
-24
@@ -1,36 +1,49 @@
|
||||
# UI layout audit
|
||||
# UI 一致性与图片加载检查
|
||||
|
||||
The Mock-only `scripts/ui-layout-audit.cjs` checks all 11 navigation pages,
|
||||
local/cloud gallery layouts and six modal states plus expanded manual collage at 1440, 768 and 390 CSS pixels,
|
||||
in Chinese/English and light/dark themes. It checks page horizontal overflow and
|
||||
at least 8 pixels between visible input/select/textarea/button rectangles, and
|
||||
44-pixel control heights on mobile.
|
||||
Closed details, background content behind dialogs and hidden fields are excluded.
|
||||
Photos authentication is intercepted with fixture credentials; no NAS login or
|
||||
frame write occurs. Populated task/history fixtures remain in disposable Mock data.
|
||||
页面使用既有真实元数据创建控件和图片区域，不使用页面骨架或虚构图片卡片。
|
||||
搜索、排序、卡片操作与写入保护在图片请求前初始化；已知图库数据可先显示，
|
||||
后台刷新元数据。首页图片独立加载，不阻塞后续页面内容。
|
||||
|
||||
This audit found and corrected missing upload preview spacing, nested task field
|
||||
spacing, small mobile action gaps and inconsistent dynamically inserted form
|
||||
spacing. NAS source forms now hide irrelevant cloud credential fields. Native
|
||||
drive forms expose their credential field and hide local-only quality controls.
|
||||
图片共用局部加载函数：旋转指示器仅居中显示于所属图片容器，网络请求与解码完成后
|
||||
立即显示图片，失败后显示中英文提示。没有固定等待或动画最短展示时长。
|
||||
图库仅请求可见区域及附近图片。浏览器禁缓存不会清除服务端缩略图缓存，
|
||||
快速图片可能在第一帧绘制前完成，动画不一定肉眼可见。
|
||||
|
||||
Synology Photos has a dedicated connection card on the Photo Sources page, with
|
||||
status, an explanation of affected automation and a direct NAS sign-in dialog.
|
||||
Folder settings and person selection remain separate. Credentials are not saved;
|
||||
the existing protected session API is used. Successful login does not run a job
|
||||
or change frame content. Passwords are cleared from the dialog before submission.
|
||||
手动拼版先创建全部真实区域与坐标/拖动交互，再并行请求图片。
|
||||
每张图片独立完成或失败，持久的区域容器保持加载前后几何位置与坐标索引稳定。
|
||||
过期布局事件不修改新的规划。
|
||||
|
||||
Run against an isolated Mock server with the existing Playwright runtime:
|
||||
移动端导航单行横向滚动，当前入口自动进入可见区域；低高度横屏侧栏可滚动。
|
||||
页头在窄屏分行，并为底部安全区域留白。可见控件保留 44 像素触控高度，
|
||||
当前导航使用 aria-current，扩展表单标签关联相应控件。
|
||||
表格与手机导航允许容器内滚动，不应导致整页水平溢出。
|
||||
|
||||
## 自动检查
|
||||
|
||||
使用隔离 Mock 服务、临时数据与测试账号，禁止对生产执行可写的 Mock 脚本。
|
||||
Photos 授权使用拦截测试响应；不需要真实 NAS 凭据。
|
||||
|
||||
```sh
|
||||
FRAME_FLOW_URL=http://127.0.0.1:18789 \
|
||||
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
|
||||
```
|
||||
|
||||
Set `NODE_PATH` to the installed Playwright runtime if needed. Optional
|
||||
`FRAME_FLOW_SCREENSHOT_DIR` saves fixture-only screenshots for visual review.
|
||||
The full audit passed 229 checks with no console errors. This complements
|
||||
`ui-smoke.cjs` and `ui-integrations.cjs`; it does not replace functional tests.
|
||||
需要已安装的 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 实机或软键盘测试。
|
||||
|
||||
连接中心内容较长，后续可按用户任务分组；模板与排版导航图标仍有重复。
|
||||
|
||||
Reference in New Issue
Block a user