企业官网建设流程全解析

Pickoo 是一个本地优先的 AI 收藏夹与灵感整理工作台，把小红书、公众号、抖音、B站、小宇宙、网易云等来源的内容统一收进本地资料库。它的界面采用「卡片堆 → 分组展开 → 单条阅读」的桌面式浏览路径，首页为固定五列等宽紧凑排版——这篇文章带你从零看懂这个布局如何工作，以及如何用它高效收藏和回看内容。

桌面式界面的三层浏览路径

Pickoo 把「浏览一个收藏夹」这件事拆成了三个递进层次，对应桌面工作台"先看全貌、再聚焦、最后精读"的操作习惯（详见 README.md）：

卡片堆：一屏纵览你的全部收藏

首页（代码中的#desk主区域）把每条收藏渲染成一张卡片，信息密度克制但关键信息齐全：

• 来源与形态：卡片左上角显示平台名与内容形态（文章、视频、播客、音乐等）
• 标题与作者：正文普通卡固定两档高度，音频则为独立的短卡，视觉节奏统一
• 状态标识：每张卡显示完整 / 待复核 / 部分完成 / 失败，抓不全的内容不会被伪装成成功
• 时间与操作：右下角显示创建/编辑时间，可直接归入收藏夹或做喜欢、隐藏等操作

卡片代码结构见 public/app.js，界面骨架定义在 public/index.html。

分组展开：顶栏五大浏览组快速切换

顶栏提供五组浏览方式（public/index.html）：

规则很简单：组内可单选或双选，组间互斥。后四组来自 Pickoo 对每条来源自动提炼的六类可复用内容资产（金句 / 观点 / 钩子 / 结构 / 图像 / 镜头），只有经证据复核达标的候选才会进入资产库（README.md）。

单条阅读：详情阅读器不拿摘要冒充正文

点击任意卡片进入详情阅读器：

• 文章：按「语义章节名 + 连续原文段落」阅读
• 视频 / 播客 / 音频：按「语义章节名 + 连续整段逐字稿 + 起止时间」阅读，点击章节即可跳播到对应时间点

原始正文、图片、音视频与 OCR、ASR、章节结果分层保存在本地证据包里，拆解结论可以一键回到对应原文位置（README.md）。

五列布局使用要点：等宽紧凑排版

五列布局是首页的默认形态，几条值得知道的规则：

1. 列数随宽度自适应：工作区宽度 ≥1080px 时固定 5 列，820–1079px 为 4 列，600–819px 为 3 列，更窄逐级降到 2 列、1 列。列数计算逻辑见 public/app.js 的columnCount()。
2. 等宽紧凑排版：五列使用等宽网格（grid-template-columns: repeat(var(--columns), minmax(0, 1fr))），卡片高度只有两档，避免瀑布流常见的参差不齐，见 public/app.css。
3. 自动补位渲染：滚动接近底部时自动追加下一批卡片（IntersectionObserver 懒加载），大资料库也不卡顿。

💡 小技巧：想要最规整的五列效果，把浏览器窗口拉到全宽即可；侧栏收起后主区域变宽，卡片也会随之重排。

快速定位收藏的 3 个高频操作

• 全局搜索：顶栏搜索框支持⌘K快捷键，可检索标题、正文、作者与标签，结果直接在卡片堆中实时过滤（public/app.js）。
• 侧栏组织：收藏夹与全部标签共用同一侧栏，支持搜索、拖动排序、置顶、改名/换图标，顺序写入共享资料库配置，刷新后保持一致（详见 DESIGN_SYSTEM.md）。
• 成就徽章：收藏、整理、探索行为会解锁徽章，资料库会逐渐长成一张个人兴趣地图，系统说明见 achievement-system.md。

本地数据在哪里：3 步启动与数据边界

Pickoo 数据全部留在本地，三步即可启动：

npm ci python3 -m pip install -r skill-source/creator-content-ingest/requirements.txt npm start

然后打开http://127.0.0.1:4324。macOS 也可双击start.command，Windows 双击start-windows.cmd（完整环境要求见 docs/DEVELOPMENT.md）。

• 默认资料库：~/Documents/Pickoo Library，每条收藏以来源-渠道-短标题-短作者-日期.md作为唯一可编辑文档
• 设置文件：~/.config/pickoo/settings.json，本地服务只监听127.0.0.1
• 「从桌面移除」只隐藏卡片，不删除证据包，随时可恢复

小结

Pickoo 的「卡片堆 → 分组展开 → 单条阅读」路径 + 五列等宽布局，本质是把"收藏夹"从列表变成了一张可纵览、可筛选、可精读的桌面：卡片堆负责全貌，顶栏分组负责聚焦，详情阅读器负责深度。收藏再多，也始终只隔一次点击。