Files

TerryM 49f61b89f1 feat: apply figma browse mobile redesign

2026-05-28 10:41:53 +08:00

8.1 KiB

Raw Blame History

title, type, date

title	type	date
Browse 页（全部资料）Figma 1:1 视觉对齐	brainstorm	2026-05-28

Browse 页（全部资料）Figma 1:1 视觉对齐

Problem Statement

/browse 路由（「全部资料」页）的视觉与 Figma 设计稿（node 4206-6051）有两处显著落差，需要对齐：

筛选条 (FilterChips) 当前是椭圆 pill chip + 边框 + 溢出折叠按钮，Figma 是下划线 tab 风格（文字 + 橘色底线，无边框、无背景）。
mobile 底部导航第三格目前是「官方推荐」（连到 /browse?sort=recommended），Figma 是「我的收藏」。

页面标题、Header、讯息流 bubble 已对齐，不需要再动。

Context

当前 FilterChips 实现：src/components/messageStream/FilterChips.tsx，含 9 种 type（all/image/video/music/ppt/pdf/text/link/archive），有 SlidersHorizontal overflow expand 按钮。
Figma 只展示 mobile viewport，且只露 6 种 type（全部/图片/视频/音乐/PPT/PDF）。
现有 mobile 底部 nav：src/layouts/PublicLayout.tsx 内的 BottomNavIcon，4 格：home / document / heart / update。
资产已经存在 heart-active.svg / heart-inactive.svg，不需要新增图示档。
「我的收藏」功能本身不实作，只做 stub「即将推出」页。等用户系统建立后再做真功能。
text / link / archive 三种 type 现在确实有资料可筛，不能直接砍掉。

Chosen Approach

Approach A + 全 viewport responsive：

筛选条改成下划线 tab 风格，所有 viewport 统一使用（mobile / tablet / desktop）。
9 种 type 全部保留，溢出改成「水平横向滚动」（无 expand 按钮，自由滑），符合 Telegram 风格 + Figma 风格。
mobile 底部 nav 第 3 格：图示沿用 heart，label 改 t("favorites")，连结改 /favorites。
新增 /favorites route，stub 页内容为「我的收藏 — 即将推出」+ 返回首页 CTA。
桌机顶部 nav 不动（「官方推荐」入口保留在 desktop top nav）。

Why This Approach

为什么所有 viewport 统一筛选条样式：Terry 明确要求 responsive across screen sizes；同一组件维护两套样式是不必要的复杂度；下划线 tab 在桌机宽度下也清爽（更胜 pill chip）。
为什么水平滚动而非「⋯」展开：Figma 没画出展开行为；标准的「Telegram filter bar」模式就是横滑；少一个状态机；本专案的 MessageStream 已经是无限滚动列表，再加一个 expand 反而割裂体验。
为什么不砍掉 text/link/archive：这些是真有资料的 type，砍掉会让桌机用户失去筛选能力；横滑设计已经能容纳全部 9 种。
为什么 favorites 做 stub 不做完整功能：Terry 选 Q2 选项 3（等用户系统再做），明确不留 localStorage 技术债。
为什么沿用 heart 图示：资产已经存在；Figma 视觉风格与现有 heart 相容；不增加设计审查负担。

已拒绝的替代方案

B（桌机也加「我的收藏」顶部 nav 入口）：会让桌机 nav 多一个空壳连结，不必要。
C（移除 text/link/archive type 入口）：损失既有功能，不符合「视觉对齐 ≠ 砍功能」原则。
localStorage 收藏功能：Terry 选 Q2 选项 3，明确不做。
「⋯」expand 按钮（Figma-faithful）：Figma 没明确画出展开行为，是我推测的；横滑更直接。

Design

1. FilterChips 重做

文件：src/components/messageStream/FilterChips.tsx（改写，非新增）

新视觉规范：

容器：水平横向滚动 (overflow-x-auto)，隐藏 scrollbar，sticky top 保留
每个 tab：纯文字按钮，无 border、无 background、无 rounded
inactive：text-neutral-400，hover text-ark-gold/80
active：text-ark-gold + 底部 2px 橘色下划线（border-b-2 border-ark-gold），inactive 底部 2px 透明 border（占位防跳动）
间距：tab 之间 gap-5（或 gap-6，实作时微调）
padding：每个 tab 上下 py-3，左右无（让 text 自然贴齐 underline）
字号：text-sm 或 text-[15px]，依照 Figma 比例
移除 SlidersHorizontal expand 按钮与 expanded state
移除 measure 隐藏元素 + ResizeObserver（不再需要侦测溢出）

type 顺序保持不变：all / image / video / music / ppt / pdf / text / link / archive

响应性：

因为是水平滚动，所有宽度都能容纳；mobile 极窄屏自然横滑，桌机宽屏会自然撑开置左

2. 新增 `/favorites` Stub 页

文件：src/pages/Favorites/index.tsx（新增）

结构：

居中容器（flex items-center justify-center min-h-[60vh]）
心形 icon（用 lucide Heart，size 48px，text-ark-gold/70）
标题：t("favorites") → 「我的收藏」
副标：t("favoritesComingSoon") → 「功能即将推出」
描述：t("favoritesComingSoonDesc") → 简短说明（一行）
CTA：「返回首页」按钮 → Link to="/"，使用既有 ark-gold 风格

响应性：

单栏居中，所有 viewport 都用同一份 layout
文字 text-base 起跳，md 以上放大

3. App.tsx 加 route

文件：src/App.tsx

在公开 routes 区段加入 <Route path="/favorites" element={<Favorites />} />
透过 PublicLayout Outlet 渲染（继承 Header + 底部 nav）

4. PublicLayout 底部 nav 第 3 格改写

文件：src/layouts/PublicLayout.tsx

第 3 个 BottomNavIcon：
- to="/browse?sort=recommended" → to="/favorites"
- label={t("official")} → label={t("favorites")}
- active={...recommended} → active={pathname === "/favorites"}
- icon 保持 heart（资产已存在）

5. i18n 增加 key

文件：src/i18n.tsx

三语言（zh-TW / zh-CN / en）各加：
- favorites：「我的收藏」/「My Favorites」
- favoritesComingSoon：「即将推出」/「Coming Soon」
- favoritesComingSoonDesc：一行说明
- backToHome：「返回首页」/「Back to Home」（如不存在）

Data Flow

FilterChips 的 prop API（type / onTypeChange）不变，纯视觉重做，使用方（MessageStream 等）无需调整。
/favorites stub 无任何资料请求，纯静态页。

Error Handling

/favorites 是纯静态，无错误状态。
FilterChips 横滑容器：测试在 overflow-x: hidden 的 ancestor 中是否仍可滚动；既有 global_overflow_x_hidden_mobile_2026_05_27 的全域规则需要确认不会卡住此处的 horizontal scroll（可能需要 overflow-x-auto 强制覆盖）。

Testing

既有 npm test 应该全过（API 没变）
视觉测试需要：mobile (375px) / tablet (768px) / desktop (1280px) 三档手测
TypeScript: npx tsc --noEmit
Format: npm run format:check

Implementation Checklist

FilterChips.tsx 重写：移除 pill 样式与 expand 按钮，改为下划线 tab + 水平滚动
新增 src/pages/Favorites/index.tsx stub 页（含 Heart icon、标题、副标、返回首页 CTA）
src/App.tsx 加入 /favorites route 与 import
src/layouts/PublicLayout.tsx 底部 nav 第 3 格改 label / route / active 判断
src/i18n.tsx 三语加入 favorites / favoritesComingSoon / favoritesComingSoonDesc / backToHome
验证 FilterChips 横滑在 global overflow-x-hidden mobile 规则下仍正常
跑 npx tsc --noEmit + npm run format:check + npm test
mobile / tablet / desktop 三档视觉手测

Open Questions

「我的收藏」stub 页的副标描述文字具体怎么写？（建议：「登入功能开发中，敬请期待」之类，可在实作时定）
FilterChips 的字号要 text-sm 还是 text-[15px]？需要量一下 Figma 才能 1:1（实作时对图调整）
桌机顶部 nav 的「官方推荐」是否要在未来 phase 一起处理？（本 spec 暂不动）

Out of Scope

真正的「我的收藏」功能（依赖未来用户系统，独立 spec）
桌机顶部 nav 调整（包括「官方推荐」入口存废）
讯息流 bubble 本身的视觉调整（既有已对齐）
移除 text / link / archive 三种 type
任何后端改动

8.1 KiB Raw Blame History Unescape Escape