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.
@@ -0,0 +1,25 @@
+# Production portrait generation
+
+Tool: built-in `image_gen`.
+
+Style reference: `reference-paper-boat.png`.
+
+Output: `assets/portraits-sheet.png`, extracted as twelve 360×360 PNG files into `frontend/src/assets/avatars/`.
+
+## Prompt
+
+Generate a PRODUCTION AVATAR SPRITE SHEET ONLY. Use the attached Paper Boat board solely as an illustration-style reference. Create exactly TWELVE distinct professional adult head-and-shoulders portraits in a precise 4 columns by 3 rows grid, landscape 4:3 canvas (ideally 2048x1536). Twelve equal SQUARE CELLS with NO GAPS, NO labels, NO text, NO logos, NO outlines or grid rules. Each cell must contain exactly ONE complete head and shoulders, head centered at 50% horizontal and about 45% vertical. Each portrait has a single solid pale sage background #DCE5D6 filling its entire square cell to all four edges, IDENTICAL background in every cell. Do NOT draw a circular frame or white circle: the application clips these squares into circles itself. Keep all hair, head and facial features within the central 76% of the cell so circular cropping never cuts hair; shoulders can extend to lower edges. Consistent generous face size, head occupies about 60% cell height. Cohesive high-end cut-paper editorial illustration, very simple crisp flat shapes, subtle deliberate asymmetry, warm and human. Similar warmth to the six small human avatars on the reference board, but ZERO 3D, ZERO realistic skin shading, ZERO shiny hair, ZERO gradients, ZERO plastic, ZERO brush texture, ZERO airbrushing, ZERO Disney style. Economical facial features, small calm eyes, subtle friendly smiles, elegant silhouettes, muted celadon, ivory, ochre and terracotta clothing. NO repeated faces.
+Positions in strict row-major order:
+Row1 col1 East Asian woman, shoulder-length black bob, cream shirt under green jacket;
+Row1 col2 Black man, short tightly curled black hair, clean-shaven, terracotta shirt;
+Row1 col3 white woman, shoulder-length auburn hair, round dark glasses, cream top;
+Row1 col4 South Asian man, wavy dark hair and neat beard, dark glasses, green shirt;
+Row2 col1 woman in muted celadon hijab, warm medium tan skin, cream blouse;
+Row2 col2 Latino man, short dark hair, light mustache, ochre shirt;
+Row2 col3 East Asian woman, long dark hair with side part, green blouse;
+Row2 col4 Black woman, natural round curly hair, small gold earrings, terracotta blouse;
+Row3 col1 white man, swept brown hair, short beard and rectangular glasses, cream shirt;
+Row3 col2 South Asian woman, long wavy dark hair, ochre blouse;
+Row3 col3 Latina woman, short dark curly hair, terracotta shirt;
+Row3 col4 East Asian man, short neat black hair, clean-shaven, green shirt.
+All illustrated adults, no children. Keep style, crop, light and color family consistent. This is a raw asset sheet intended for exact equal-grid extraction into twelve standalone PNG files, NOT a concept board or a website UI. Do not add anything outside the portraits.
@@ -0,0 +1,36 @@
+# ReplyPier 图标与头像更新
+
+## Brief
+
+将网页标签图标、聊天底部品牌标识及客服头像重新设计并替换。保持现有页面布局与功能；其他图片先征求用户意见。现有工作区有未提交的界面更新，不覆盖。
+
+## Pipeline
+
+- Brief / inventory: complete
+- Style exploration: complete; user selected round 3 option 2, Paper Boat.
+- Design spec / tokens: `DESIGN.md`; complete.
+- Assets / consumers / QA: `asset-manifest.json`.
+- Production assets: twelve generated portraits, ten native paper-craft SVGs, shared boat mark and favicon/install exports.
+- Implementation: shared `BrandMark.vue`, compatible avatar utilities, dashboard preview, live widget and standalone loader.
+- Verification: type check and local dashboard/widget/loader builds passed. Targeted tests passed (76 total across the affected suites). Browser QA includes the preset picker and switching from paper artwork to an uploaded portrait and back.
+
+## Current sources
+
+- Browser icon: `frontend/public/favicon.svg`; duplicate `frontend/public/assets/favicon.svg`; ICO fallbacks at both locations.
+- Brand mark: `frontend/src/assets/logo.svg`, `frontend/public/images/logo.svg`, `frontend/public/assets/images/logo.svg`, `logo_dark.svg`.
+- Footer marks: shared `frontend/src/components/common/BrandMark.vue`; `frontend/src/webclient/chattermate.js` imports the same source SVG for its error footer.
+- Preset portraits: 12 PNGs in `frontend/src/assets/avatars/avatar-*.png`; selected through `AgentDetail.vue`.
+- Paper-craft avatars: ten SVGs under `frontend/src/assets/avatars/paper-*.svg`; loaded by `frontend/src/utils/orb.ts` under the original stored variant indexes. Old generated data URIs are refreshed from avatar metadata at render time. Uploaded photos remain unchanged.
+- Additional candidates: PWA/install icons, default user/robot and role avatars, login/signup illustration. Third-party integration logos should retain official identities.
+
+## Design constraints
+
+Use existing ink/porcelain foundation: paper #F4F1EB, ink #16171A, vermilion #B23A22, celadon #2E6A5C, brass #8A6326. Keep 16px brand marks simple and readable. No change to customer-uploaded images or unrelated UI. Visible product naming currently mixes ReplyPier and ChatterMate; do not infer a full rename from the asset request.
+
+## Concepts
+
+A — Harbour / 港湾：restrained celadon speech-bubble mark, flat editorial portraits; low complexity; safe for business use, less distinctive.
+B — Seal / 回音印：vermilion reply seal, warm illustrated portraits and restrained AI medallions; medium complexity; best match to existing tokens, detail must survive small sizes.
+C — Beacon / 信标：ink/celadon geometric beacon, playful abstract AI companions and graphic portraits; medium complexity; memorable but more characterful than conventional support branding.
+
+Each board shows brand mark, compact lockup, 16/32px icon simulation, chat footer/header application and portrait/AI avatar samples. Typography follows the existing Hanken Grotesk / Chinese sans foundation; only the concept headings may be editorial.
@@ -0,0 +1,299 @@
+{
+  "ui_assets_complete": true,
+  "phase": "complete",
+  "selected_direction": "Paper Boat / round 3 option 2",
+  "references": [
+    {
+      "file": "design/brand-refresh/reference-paper-boat.png",
+      "role": "approved visual reference",
+      "used_as_asset": false
+    }
+  ],
+  "element_inventory": [
+    {
+      "id": "boat-mark",
+      "decision": "export",
+      "target_format": "svg"
+    },
+    {
+      "id": "install-icons",
+      "decision": "export",
+      "target_format": "png/ico"
+    },
+    {
+      "id": "human-avatars",
+      "decision": "generate",
+      "target_format": "png"
+    },
+    {
+      "id": "paper-avatars",
+      "decision": "export",
+      "target_format": "svg"
+    }
+  ],
+  "assets": [
+    {
+      "element_id": "boat-mark",
+      "file": "frontend/src/assets/logo.svg",
+      "status": "ready",
+      "usage": "shared footer brand component and logo mirrors"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-01-asian-woman-1.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-02-black-man-1.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-03-white-woman-glasses.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-04-south-asian-man-glasses.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-05-hijab-woman.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-06-latino-man.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-07-asian-woman-2.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-08-black-woman-curly.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-09-white-man-glasses.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-10-south-asian-woman.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-11-latina-woman.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "human-avatars",
+      "file": "frontend/src/assets/avatars/avatar-12-east-asian-man.png",
+      "status": "ready",
+      "source": "generated 4x3 sheet; equal-cell extraction"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-boat.svg",
+      "alt": "纸舟",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-letter.svg",
+      "alt": "信笺",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-pinwheel.svg",
+      "alt": "风车",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-book.svg",
+      "alt": "书页",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-plane.svg",
+      "alt": "纸翼",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-kite.svg",
+      "alt": "风筝",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-heart.svg",
+      "alt": "折心",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-house.svg",
+      "alt": "纸屋",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-leaf.svg",
+      "alt": "新叶",
+      "status": "ready"
+    },
+    {
+      "element_id": "paper-avatars",
+      "file": "frontend/src/assets/avatars/paper-ink-boat.svg",
+      "alt": "墨舟",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/favicon.svg",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/assets/favicon.svg",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/favicon.ico",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/assets/favicon.ico",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/apple-touch-icon-180x180.png",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/pwa-192x192.png",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/pwa-512x512.png",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/pwa-maskable-512x512.png",
+      "status": "ready"
+    },
+    {
+      "element_id": "install-icons",
+      "file": "frontend/public/notification-badge-96.png",
+      "status": "ready"
+    }
+  ],
+  "tool_attempts": [
+    {
+      "tool": "built-in image_gen",
+      "action": "generate portrait sheet from approved reference",
+      "status": "success"
+    },
+    {
+      "tool": "sips",
+      "action": "extract twelve equal cells",
+      "status": "success"
+    },
+    {
+      "tool": "native SVG export + rsvg-convert",
+      "action": "export paper symbols and raster install icons",
+      "status": "success"
+    }
+  ],
+  "qa": [
+    {
+      "element_id": "human-avatars",
+      "status": "passed",
+      "checks": [
+        "12 complete distinct adults",
+        "consistent style",
+        "no baked-in labels"
+      ]
+    },
+    {
+      "element_id": "boat-mark",
+      "status": "passed",
+      "checks": [
+        "16px actual browser render"
+      ]
+    },
+    {
+      "element_id": "human-avatars",
+      "status": "passed",
+      "checks": [
+        "all 12 cells individually extracted",
+        "first and last crops visually inspected",
+        "sips zero-offset centering corrected with inset extraction"
+      ]
+    },
+    {
+      "element_id": "paper-avatars",
+      "status": "passed",
+      "checks": [
+        "all ten SVGs parsed by tests",
+        "old stored orb metadata re-renders new vectors",
+        "CSS and image slots use identical SVGs",
+        "uploaded photos pass through unchanged"
+      ]
+    }
+  ],
+  "omitted": [
+    {
+      "item": "old login illustration, third-party logos and customer uploads",
+      "reason": "outside selected asset scope"
+    }
+  ],
+  "portrait_prompt": "Twelve equal square cells in a 4x3 sheet; flat editorial cut-paper adult portraits; identical pale sage background, no labels, no glossy or photorealistic rendering. Approved Paper Boat board used as style reference.",
+  "tokens": {
+    "paper": "#F4F1EB",
+    "ink": "#16171A",
+    "celadon": "#2E6A5C",
+    "sage": "#8BB49C",
+    "fold": "#568B73"
+  },
+  "components": [
+    "frontend/src/components/common/BrandMark.vue",
+    "frontend/src/utils/orb.ts"
+  ],
+  "validation": {
+    "type_check": "passed",
+    "dashboard_widget_loader_build": "passed",
+    "targeted_tests": "76 total passing: 65 unaffected tests from first corrected run + 11 final BrandMark/dashboard checks",
+    "runtime": "dashboard and widget assets return HTTP 200; browser PWA update activated; favicon/sidebar/footer/picker inspected; human preset upload verified and paper boat restored; live embedded widget header/message/footer inspected"
+  },
+  "all_code_native_approved": false,
+  "semantic_media_policy": "Portraits generated and extracted; brand and paper emblems exported as native SVG assets."
+}