把产品发布变成一张可执行的作战地图

一、产品介绍

1.1 一句话定位

HYB（Hatch Your Beta）是一款 local-first（本地优先）、多项目的产品发布与增长分发控制台， 面向独立开发者（indie hackers）与 SaaS 创始人，用来管理发布物料、追踪 500+ 获客渠道、记录冷启动与外链分发进度—— 所有数据只保存在浏览器 localStorage，不上传服务器。

1.2 它解决什么问题

产品冷启动阶段最耗神的不是写代码，而是“发到哪里、发到什么程度、下次从哪继续”。HYB 把这件事拆成三个可量化的对象：

三者交叉形成“渠道 × 项目”的矩阵，这是 HYB 的核心数据模型。概览区统计的“已操作”“已收录”都是按这个矩阵计数，而不是按渠道计数。

1.3 目标用户

• 准备在 Product Hunt / Hacker News / Reddit / AI 工具目录做冷启动的独立开发者。
• 需要同时推进多个产品线、每个产品都要走一遍发布流程的小团队。
• 出海 SaaS 团队，需要中英双语界面与 Google / Bing / 百度 / Naver 等多搜索引擎提交记录。
• 重视数据隐私、不愿把发布计划放进第三方 SaaS 的用户。

二、核心功能（逐项对应代码）

三、与常见替代方案的区别

四、FAQ（常见问题）

以下答案中的数字与行为均可在源码中核对。

五、工作原理（How It Works）

按数据流顺序说明，所有函数名与 key 名均来自源码。

5.1 数据模型（三层结构）

projects[]                    每个项目：id, name, url, tagline, desc, collapsed
platforms[]                   每个渠道：id, name, url, category, free, dr, custom
progress[projectId][platId]   每个组合：status, followUp, notes, links[{url,title,date}]
okrMap[projectId]             每个项目：cycle(week|month|quarter|year), target

三者关系：progress 是 projects × platforms 的稀疏矩阵，只有被操作过的组合才有记录； 读取时 getProgress(pid, platId) 会在缺失时自动创建空记录（emptyProgress() 返回 status: 'pending'）。

5.2 启动流程（init()）

1. loadState()：按版本号决定走迁移还是直接读。
   • 若 hyb_v12_version < 12 或没有 v12 platforms，先尝试 migrateFromV10()（从 ffee_console_v10_* 迁移）。
   • 读 hyb_v12_platforms；没有则读旧版 ffee_promo_data_final_v2；再没有则用 defaultPlatforms()（即 REAL_PLATFORMS + PRELOADED_DR）。
   • 目录版本低于 CATALOG_VERSION(3) 且渠道数 ≥300 时，mergeCatalog() 合并新增渠道，记录 catalogAdded。
   • 读 projects / progress / okr / lang / ui / savedAt，逐项 normalize* 清洗，dedupeIds 保证 id 唯一。
2. bindEvents()：绑定所有按钮、筛选、表格事件委托、键盘 Esc、页面可见性、pagehide/beforeunload 保存。
3. applyI18n() + startClock()（每秒刷新顶部日期时间）。
4. buildFilterOptions() → renderProjects() → updateMaterialsUi() → renderTable() → renderOverview()。
5. 若 needsCatalogPersist 或 needsCopyRefresh，补一次持久化。

5.3 渲染流程

• 概览：renderStats() 遍历 platforms × projects 累加 links 数、已操作数、已收录数，并生成按项目小计；renderGoal() 按当前项目 OKR 计算周期区间内 links 条数、百分比、剩余天数、教练文案。
• 物料库：renderProjects() 用模板字符串生成项目卡片，autoGrowAllTextareas() 让 textarea 自适应高度。
• 渠道表：filteredPlatforms() 先按搜索/分类/费用过滤渠道，再按 rowsFor(p) 判断该渠道在当前项目/状态下是否有可见行；排序只处理 DR（null 恒最后）。renderTable() 输出主行 + 子行（多项目时）+ 展开的外链面板。

5.4 交互与保存

• 物料字段输入：input 事件更新内存对象，queueProjectSave() 做 260ms 防抖后写 localStorage；flushProjectSave() 在导出、切语言、页面隐藏/卸载时强制落盘。
• 表格状态/日期/备注：change 事件立即 persistProgress()；状态和日期变化会重渲染表格与概览。
• 外链增删改：改 links[index][field] 后立即持久化；日期变化会 renderGoal() 重算目标。
• DR 行内编辑：把按钮替换成 input.dr-input，回车/blur 保存，Esc 取消；normDr() 会校验 0–100 并四舍五入，非法值视为 null。
• 所有写操作走 writeJSON()，捕获 QuotaExceededError 等异常并 toast 提示。

5.5 导入 / 导出 / 重置

• 导出：exportData() 组装 {app, version, exportedAt, lang, platforms, projects, progress, okr}，Blob 下载。
• 导入：importFile() 解析 JSON，判断是扁平数组（legacy）还是完整对象；完整对象读 platforms/projects/progress/okr，legacy 把旧字段迁移到第一个项目；确认后整体替换内存状态并逐项持久化，最后重渲染。
• 重置：resetAllData() 恢复 defaultPlatforms() + 默认项目 + 默认 OKR，清空筛选与展开状态，逐项持久化。

5.6 迁移与兼容

• v10 → v12：读 ffee_console_v10_*，把旧平台上的 status/followUp/notes/links 迁到“目标项目”（优先当前项目，其次名为 ffee.me 的项目，其次 proj_ffee，其次第一个项目）。
• 旧版物料：migrateLegacyProjects() 读 ffee_mats，把 zhName/zhUrl/zhTagline/zhDesc 转成一个项目。
• 渠道去重：dedupePlatforms() 按 platformUrlKey 与 platformNameKey 合并，保留非空 DR/free，custom 取并集。

5.7 隐私与边界

• 持久化层只有 localStorage；无 fetch/XHR 上传业务数据。
• 剪贴板优先 navigator.clipboard（需安全上下文），否则降级 execCommand('copy')，再失败则提示手动复制。
• 外部依赖仅 Clarity 脚本与 logo 图；noscript 明确提示需启用 JavaScript。

六、使用教程（Step-by-Step）

6.1 第一次打开

1. 浏览器打开 HYB 控制台。顶部会显示当前日期、星期、时间（每秒刷新）。
2. 右上角可切换 简体中文 / English。切换只改界面文案，不改数据。
3. 页面分四块：数据概览（统计 + 目标）、项目物料库、增长渠道表、页脚（重置数据入口）。

6.2 建立你的第一个项目

1. 在“项目物料库”点 添加项目。会自动生成一张空卡片并滚动到可见位置，光标落在“产品名称”。
2. 依次填写四个字段：
   • 产品名称：如 ffee.me
   • 官网链接：如 https://ffee.me/（卡片副标题会实时显示域名）
   • 一句话介绍：一句话说清是什么
   • 详细描述：卖点、目标用户、差异点
3. 每个字段右侧有 复制 按钮，可单独复制该字段。
4. 卡片右上角 复制全部 会按四段格式一次性复制：

   【产品名称】…
   【官网链接】…
   【一句话介绍】…
   【详细描述】…

5. 点卡片右侧的 箭头 可折叠/展开；折叠状态会保存。
6. 需要多个产品时重复“添加项目”。每个项目独立物料、独立进度、独立 OKR。
7. 删除项目：点卡片右侧 垃圾桶，确认框会提示“物料、进度、备注、外链、目标都将移除”。

6.3 挑选渠道并记录进度

1. 滚到“增长渠道 (Growth Channels)”。表格列：分类 / 渠道 / DR / 项目 / 状态 / 跟进日期 / 上线地址 / 备注。
2. 筛选（表头上方一行）：
   • 搜索框：输入渠道名、网址或分类关键词（140ms 防抖）。
   • 项目：全部项目 / 具体项目。选具体项目时只显示该项目行。
   • 分类、状态、费用：按需组合。
   • DR 排序：默认 / 正序 / 倒序（null 恒最后）。
   • 重置筛选：一键清空所有条件。
3. 改状态：行内下拉选 待发布 / 已发布 / 已收录 / 被拒绝。改完立即保存。
4. 填跟进日期：行内日期框。若日期早于今天且状态不是已收录/被拒绝，该行左侧出现黑色竖线标记逾期。
5. 写备注：行内备注框，失焦自动保存，占位符是“点击输入…”。
6. 记外链：
   • 点“上线地址”列的按钮展开面板，按钮上的数字是当前外链条数。
   • 点 记录新上线，新增一行：URL、标题/备注、日期（默认今天）。
   • 日期很重要——OKR 按外链日期统计。
   • 每条右侧垃圾桶可删除。
7. 多项目同渠道：当一个渠道下挂了多个项目，表格会显示主行 + 子行，每行独立状态/日期/备注/外链。

6.4 设置目标并看进度

1. 概览区“目标”一行：
   • 选周期：本周 / 本月 / 本季度 / 本年（切换会自动填默认目标 20/100/300/1000）。
   • 填“达成 __ 个分发点”。
   • 右侧显示百分比、进度条、“已完成 X / Y”、“剩余 N 天”。
2. 统计口径：只算当前项目、当前周期内、所有渠道 links 中 date 落在区间内的条数。没填日期的外链不计入。
3. 教练提示会根据情况变化：
   • 目标为 0 → 提示先设目标
   • 达成 100% → 祝贺
   • 剩余 ≤2 天且 <80% → 警告冲刺
   • 时间进度 > 完成进度 +20% → 提示落后
   • 完成进度 > 时间进度 → 提示领先
   • 其余 → 稳住节奏

6.5 添加自定义渠道

1. 渠道表右上角点 添加渠道。
2. 填写：渠道名称（必填）、网址、分类、费用（Free/Paid/待确认）、DR（0–100 选填）。
3. 提交时若同名或同域名已存在，会弹确认框；确认后作为自定义渠道加入（表格里带“自定义”小标签）。
4. 自定义渠道和预置渠道一样参与筛选、排序、进度记录。

6.6 修改 DR

1. 表格 DR 列，点任意 DR 值（显示 DR — 表示空）。
2. 变成输入框，填 0–100，回车保存、Esc 取消。
3. 非法值（非数字、超范围）会被清空为 null。
4. 保存后 toast 提示“已保存 DR：xx”或“已清空 DR”。

6.7 导出备份与导入恢复

导出

1. 右上角点 导出。
2. 下载 hyb-console-backup-YYYY-MM-DD.json，含 platforms/projects/progress/okr 全量。
3. 建议每次批量改动后导出一次，保留多份。

导入

1. 右上角点 导入，选 JSON 文件。
2. 弹确认框：“导入将覆盖当前全部渠道、项目物料、分发进度和目标设置”。
3. 确认后整体替换并重渲染，toast 显示“导入成功：X 个渠道 · Y 个项目”。
4. 兼容旧版扁平数组格式（会迁移到第一个项目下）。

6.8 重置数据

1. 页脚点 重置数据。
2. 确认框提示“所有渠道的分发进度、备注、上线记录、项目物料和目标都会恢复初始状态”。
3. 确认后恢复默认渠道库 + 默认项目 + 默认 OKR（month/100）。

6.9 日常使用建议节奏

• 发布前：补齐项目四段物料 → 导出一次备份 → 按分类筛出目标渠道，状态设为“待发布”。
• 发布中：每发一个站，改状态为“已发布”、填跟进日期、记外链（带日期）。
• 发布后：每天看一次逾期行（左侧竖线）；每周看 OKR 进度与教练提示；有收录结果就改“已收录”。
• 每周：导出一次 JSON，文件名带日期归档。

七、故障排查