feat: apply figma browse mobile redesign

.unipi/docs/specs/2026-05-28-browse-figma-redesign-design.md

@@ -0,0 +1,157 @@
+---
+title: "Browse 页（全部资料）Figma 1:1 视觉对齐"
+type: brainstorm
+date: 2026-05-28
+---
+
+# Browse 页（全部资料）Figma 1:1 视觉对齐
+
+## Problem Statement
+
+`/browse` 路由（「全部资料」页）的视觉与 Figma 设计稿（node `4206-6051`）有两处显著落差，需要对齐：
+
+1. **筛选条 (FilterChips)** 当前是椭圆 pill chip + 边框 + 溢出折叠按钮，Figma 是下划线 tab 风格（文字 + 橘色底线，无边框、无背景）。
+2. **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
+- 任何后端改动