feat(ui): refresh dashboard and paper boat branding

2026-10-22 17:44:36 +08:00
1 parent 308332eb94
commit 1752a5b685
@@ -0,0 +1,38 @@
+# Paper Boat / 纸舟
+
+Selected direction: round 3, option 2 / Paper Boat. Confirmed by user.
+
+## Visual specification
+
+- Preserve the existing dashboard and widget layout, typography, product naming and third-party logos.
+- Primary symbol: folded boat, three solid facets, no gradients, thin details, outline or lettering. Celadon `#2E6A5C`, sage `#8BB49C`, fold `#568B73`.
+- Small-size mark uses the same silhouette with stronger separation between hull facets; native SVG at 16–32px. Install icons have warm porcelain `#F4F1EB` background and sufficient maskable safe area.
+- Human presets: twelve editorial cut-paper portraits, consistent close crop, muted circular background, diverse adults. Replace the bundled preset images; preserve uploaded personal photos.
+- AI presets: ten vector paper-craft emblems (boat, letter, pinwheel, book, plane, kite, folded heart, house, leaf, boat in ink). Replace generated orb rendering while retaining stored variant indexes. Existing terminal option remains available with a muted celadon accent.
+- Shared brand SVG component for dashboard/chat footer marks; the standalone loader uses the same boat geometry.
+
+## Element inventory / asset loop
+
+| Element | Decision | Format / location | Consumers |
+| --- | --- | --- | --- |
+| Selected board | reuse, reference only | `reference-paper-boat.png` | design reference |
+| Primary boat mark | export as native vector | existing logo SVG paths | logo, favicon, footer |
+| App/install icons | export from boat vector | existing public PNG/ICO paths | PWA, iOS, notification badge |
+| Twelve human headshots | generate sheet, extract individual cells | existing `src/assets/avatars/avatar-*.png` | preset picker and uploaded preset selections |
+| Ten AI paper emblems | export native vector | `src/assets/avatars/paper-*.svg` | legacy orb variants, preview, widget |
+| Existing UI and uploaded photos | reuse | unchanged | all existing callers |
+
+State: COMPLETE. Direction confirmation, asset creation, implementation and visual QA passed. Asset inventory and consumer paths are in `asset-manifest.json`. The local dashboard, widget and standalone loader have been rebuilt and the existing browser's PWA update has been activated.
+
+## Acceptance
+
+- `npm run type-check`: passed.
+- `./deploy/local/local.sh build`: passed for dashboard, widget and loader. Production loader also regenerated with `scripts/build-webclient-prod.ts`.
+- Targeted Vitest suites: 76 tests passed across the avatar, upload URL, loader lifecycle/identity, startup refusal, login, sidebar and dashboard paths. On this machine, use `NODE_OPTIONS=--no-experimental-webstorage` so Node 26's Web Storage global does not mask jsdom storage.
+- Browser inspection: favicon, sidebar mark, all preset thumbnails, preview avatar/header/message bubbles and actual embedded widget footer/header/message avatars. Selected a human preset, verified its upload and preview, then restored the demo's selected paper boat and inspected the real widget.
+- Updated the dashboard badge test's stale `.notification-badge` selector to the existing `.topbar .badge-float` markup; notification behavior was unchanged.
+- No browser relaunch or new debugging socket, service restart or database migration was needed.
+
+## Compatibility
+
+Keep `avatar_style: orb`, `orb_variant` and the existing utility exports as storage/API compatibility names. Generated orb data URIs are replaced at render time from metadata, without modifying customer uploads or database history. No database migration is needed.