158 lines
8.1 KiB
Markdown
158 lines
8.1 KiB
Markdown
---
|
||
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
|
||
- 任何后端改动
|