# 设计决策文档

## 问题诊断（2026-06-06）

原布局首屏占用分析（768px 视口）：

| 区块 | 高度 | 累计 |
|------|------|------|
| Header 渐变大标题 | 250px | 250px |
| 工作流推荐区 | 255px | 505px |
| Sticky 控制栏（搜索+分类+快捷筛选） | 171px | 676px |
| **第一张工具卡片** | — | **90% 屏高才出现** |

核心问题：主要内容（工具卡片）被辅助功能（工作流推荐）完全压制。

---

## 选定方案：编辑精选 · 杂志感

参考：Product Hunt、App Store Today、Perplexity Collections

### 布局结构

```
┌────────────────────────────────────────────┐
│ NAVBAR (56px 固定)                          │
│ AI工具导航  [搜索...]  47+  每日  🌙       │
├────────────────────────────────────────────┤
│ HERO 今日精选 (~260px)                      │
│ ┌──────────────┐ ┌──────────┐ ┌──────────┐ │
│ │   主卡片     │ │  次卡片  │ │  次卡片  │ │
│ │  (rec:true)  │ │          │ │          │ │
│ └──────────────┘ └──────────┘ └──────────┘ │
├────────────────────────────────────────────┤
│ CATEGORY TABS (44px sticky)                │
│ 全部 · LLM · 图像 · 视频 · 编程 · …       │
├────────────────────────────────────────────┤
│ TOOL LIST (紧凑行，无限滚动)               │
│  1  DeepSeek     大语言模型  免费  国产  ★★★★★ │
│  2  Kimi         大语言模型  免费  国产  ★★★★★ │
│  …                                         │
├────────────────────────────────────────────┤
│ AI 日报（可折叠）                           │
│ FOOTER                                     │
└────────────────────────────────────────────┘

浮动：🧭 工作流按钮 → 右侧抽屉
```

### 关键改进

1. **首屏可见工具**：Navbar(56) + Hero(260) + Tabs(44) = 360px，首屏约可见 **5 条工具行**
2. **工作流降级为浮动抽屉**：不占主体空间，需要时随时召唤
3. **编辑精选 Hero**：rec:true 的工具获得更大展示空间，有「被策划过」的质感
4. **紧凑列表**：工具行高 52px，信息密度是卡片模式的 2-3 倍

### 保留功能

- ⇄ 工具横向对比（浮动对比栏 + 弹窗）
- ⧉ 一键复制工具 Markdown
- 🌙/☀️ 深色/浅色主题（localStorage）
- ⚠️ 链接失效徽章（linkFailCount ≥ 2）
- 📰 AI 日报（GitHub fetch 动态加载）
- 🧭 工作流推荐（抽屉形式）

### 放弃功能

- Canvas 分享卡片生成器（工作流卡片）→ 保留代码但入口隐藏，后续可重新激活

---

## 历史方案（未采用）

**A. 侧边栏导航**：分类永远可见，但手机端需要折叠逻辑，实现复杂。

**B. 搜索优先·极简**：首屏体验最干净，但失去编辑调性，与其他工具导航同质化。