Improve Photos connection guidance and audit responsive UI spacing

2026-10-10 08:36:23 +08:00
parent 4fdb7a4407
commit cc4126d23c
6 changed files with 123 additions and 4 deletions
@@ -0,0 +1,36 @@
+# UI layout audit
+
+The Mock-only `scripts/ui-layout-audit.cjs` checks all 11 navigation pages,
+local/cloud gallery layouts and six modal states 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:
+
+```sh
+FRAME_FLOW_URL=http://127.0.0.1:18789 \
+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 217 checks with no console errors. This complements
+`ui-smoke.cjs` and `ui-integrations.cjs`; it does not replace functional tests.