机器解剖室 v1

机器解剖室 v1

做了什么

把首页原来只有四格流水线的「这个站怎么运转」重写成一个默认隐藏、点击展开的机器解剖剧场,回答的问题从「访客看到的四层链路」换成「这台机器内部到底有哪些零件」:

  • 六个构件,机器车间语系(实体建造世界观):点火器(对话)→ 图纸室(规则/公约)→ 传动间(hooks / CodeGraph / 技能触发)→ 仓库(记忆库沉淀)→ 蒸馏塔(经验切片提炼)→ 发货台(推送与发布)。数据单一来源 site/src/data/machine.ts。
  • 3D 剧场:three.js 场景,六个六边形工位沿曲线排布,流动管线 + 巡航豆,拖拽旋转、点击工位聚焦;three 按需懒加载(import()),收起时完整 dispose。
  • 双渲染器:桌面 WebGL;移动端同一份零件数据渲染成 2.5D 卡片列,不强行跑 3D。
  • 沉浸模式:Fullscreen API 全屏检视,Esc / 按钮退出。
  • 零件抽屉三层详情:一句人话 → 真实路径/命令 → 活数据(构建时从真实文件注入:session 总数、切片数、hooks 数、技能数、记忆库条数等,数字为 0 时自动隐藏)。
  • 入口嵌在首页流水线窄带右端「看看这台机器」按钮,四层流水线本身保留在工作台叙事层。

过程与坑

  • grill-me 六问定稿:先被连续追问「给谁看 / 看什么 / 为什么」才动手——结论是这块主要不是给访客看,而是给我自己看清楚项目全貌,所以内容必须是真实机器清单而不是营销流程图。
  • 抽屉盖住头栏按钮:第一版零件抽屉是绝对定位浮层,展开后把「沉浸模式 / 收起」按钮压在下面点不到,Playwright 截图 QA 直接抓到。修法是加一层 .mt-body 包裹,让抽屉和舞台共享布局流而不是互相叠。
  • headless Chrome 按 Esc 不退全屏:测试环境的怪癖(真实浏览器正常),QA 脚本改走「退出沉浸」按钮断言。
  • 顺手修了一颗雷:publish/log/2026-08-15-内容资产流水线.md 缺 frontmatter,本地构建直接断,已补上。
  • QA:构建 81 页通过;Playwright 双端(桌面 WebGL + 移动 flat)全流程脚本通过,截图逐张人工核对。

下一步

  • 四层全链路视图迁到 /workbench 模块(应用层叙事归工作台,首页解剖室归机器本体)。
  • 活数据可继续加:各构件的「最近活动时间」、传动间的触发次数趋势。
  • 推送(content:weekly → 发布)链路真实跑通后,给发货台补真实发货记录。