feat(viewer): UI-02 visual foundation, top bar and album info

V01+V02 (Task 2 of the UI-02 viewer redesign plan):

- viewer-tokens.css: UI-02 §3.1 design tokens scoped to .viewer-shell
  (never :root), so embed routes consume none of them
- App.vue: normal routes get a sticky white top bar (PhotoLive brand +
  compact locale switcher + lightweight "..." menu holding the
  reduce-motion toggle); global 16px content padding removed so banner
  and photos run edge-to-edge; embed shell branch untouched
- LocaleSwitcher: compact "EN/中文 + caret" trigger with a proper menu
  (current language checked), 44px touch target, Escape/outside close
- AlbumHeader (new): banner (2.4:1 mobile, 320px desktop cap,
  object-fit contain, collapses on missing/failed), 2-line expandable
  title + share button (clipboard copy with selectable-text fallback),
  3-line expandable pre-line description, meta row (Intl-formatted
  view count with em-dash fallback for unknown, album-timezone dates
  with full range on title, venue), Latest/Popular 44px tabs and
  category pills from the API with horizontal scroll + overflow fade
- ActivityPage: delegates the info area to AlbumHeader; sequence
  reset/sort-lock/category-by-id semantics unchanged; desktop content
  capped at 1120px
- i18n: viewer.* strings (brand/share/views/readMore/latest/popular/
  allCategories/noPhotos/newPhotos/reduceMotion/settings) in zh-CN+en
- tests: viewer-shell (token source + normal/embed isolation) and
  album-header (8 cases) specs; activity/i18n specs updated for the
  menu switcher and the em-dash unknown view count; e2e selectors
  refreshed

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-21 21:22:36 +08:00
parent 2cbd167cc0
commit 9c3915b387
13 changed files with 1333 additions and 258 deletions
+16
View File
@@ -63,6 +63,22 @@ export default {
// 轮播中被移除(ws photo.hidden)的轻提示。
photoRemoved: 'This photo has been removed',
backToAlbum: 'Back to album',
// —— UI-02 (V01/V02) additions ——
brand: 'PhotoLive',
settings: 'Settings',
share: 'Share',
shareCopied: 'Link copied',
shareCopyFailed: 'Copy failed — please copy the link manually:',
views: '{count} views',
viewsUnknown: '—',
readMore: 'More',
readLess: 'Less',
latest: 'Latest',
popular: 'Popular',
allCategories: 'All',
noPhotos: 'Photos coming soon',
newPhotos: 'New photos',
reduceMotion: 'Reduce motion',
},
route: { tokenLabel: 'Album token', photoLabel: 'Photo' },
errors: {
+16
View File
@@ -63,6 +63,22 @@ export default {
// PHOTO_NOT_PUBLIC 专用:不存在/未发布/已隐藏同码(防枚举),文案覆盖两种成因。
photoUnavailable: '照片不存在或已下线',
backToAlbum: '返回相册',
// —— UI-02(V01/V02)新增 ——
brand: 'PhotoLive',
settings: '设置',
share: '分享',
shareCopied: '链接已复制',
shareCopyFailed: '复制失败,请手动复制链接:',
views: '{count} 次浏览',
viewsUnknown: '—',
readMore: '展开',
readLess: '收起',
latest: '最新',
popular: '热门',
allCategories: '全部',
noPhotos: '照片即将上线',
newPhotos: '有新照片',
reduceMotion: '减少动画',
},
route: { tokenLabel: '相册令牌', photoLabel: '照片' },
errors: {