Immutable. This exact content is served forever at /api/v1/blob/f6f01e147e4437d0.
# 设计决策文档 ## 问题诊断（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. 搜索优先·极简**：首屏体验最干净，但失去编辑调性，与其他工具导航同质化。