---
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
- 任何后端改动