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:
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
* UI-02 §3.1 统一视觉 token(V01)。
|
||||
* 作用域红线:变量只挂在 .viewer-shell(普通观众路由外壳)上——embed 路由
|
||||
* (App.vue 的 .embed-shell 分支)不挂此类,嵌入 iframe 布局不消费任何
|
||||
* token,亦不受本文件影响。消费方一律 var(--viewer-*),不再散写色值。
|
||||
*/
|
||||
.viewer-shell {
|
||||
--viewer-primary: #1A73E8;
|
||||
--viewer-surface: #FFFFFF;
|
||||
--viewer-page-bg: #F3F6FA;
|
||||
--viewer-text: #172033;
|
||||
--viewer-text-secondary: #647084;
|
||||
--viewer-divider: #E5EAF1;
|
||||
--viewer-dark-bg: #0E1218;
|
||||
--viewer-like-accent: #FF667D;
|
||||
--viewer-font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
|
||||
--viewer-radius-img: 4px;
|
||||
--viewer-radius-pill: 20px;
|
||||
--viewer-pad-info: 16px;
|
||||
--viewer-pad-photo: 4px;
|
||||
--viewer-touch-target: 44px;
|
||||
}
|
||||
Reference in New Issue
Block a user