黄一航
← 全部日志

Auria / ContractLens / Sprout scrub 重做:按源项目原理重画

2026-07-08约 2 小时(估算)前端动效scrub发布会首页复核记录

目标

站主反馈:Auria、ContractLens、Sprout 几页动画残缺、不流畅、不够高级,而且 scrub 没有真正解释项目原理。要求“这几页动画和 scrub 全部重做”,并参考相关项目文件夹的真实实现。

本阶段目标:不引入新依赖,不改变内容 schema,把三页首个 sticky 舞台重做成“滚动驱动的过程动画”,让每个画面对应项目真实流水线。

参考源项目

  • /Users/huanglaobanban/have_fun/AI_CV/AIcv_design/

    • Auria 是简历上传后的 AI 定制工坊:简历解析、背景研究、5 个差异化 style seed、顾问确认、设计总监、前端工匠、评审团、修改分诊。
    • 关键点:不是模板站生成器,而是“先探索差异化方向,再冻结选中方向并手写网站”的定制流程。
  • /Users/huanglaobanban/au_law/

    • ContractLens 的真实管线是 PDF/OCR、四层分段、GC/S32 规则引擎、7 个 analyst 并行、rapidfuzz 引用校验、失败项定向重试、合规门、报告生成。
    • 关键点:不是泛泛总结合同,而是“每条发现必须能回到原文”的可验证审查流水线。
  • /Users/huanglaobanban/自迭代框架/

    • Sprout 是递归任务树:每个节点先 analyze() 判断是否拆分;不拆就 execute();拆分就并行跑子节点,慢分支按 2.5x straggler 规则取消并重拆,最后 synthesize() 汇聚。
    • 关键点:不是固定主控派工,而是每个 Agent 自己决定分裂,角色从 approach injection 中涌现。

结果

  • src/components/keynote/scene-auria.tsx

    • 重画为固定舞台:左侧 intake 简历事实、中间 Auria Studio、底部 5 个差异化方向、右侧最终网站预览、下方 critic loop。
    • 避免旧版卡片飘出视口和底部截断,所有主元素都限制在同一个 rounded stage 内。
    • 新增 data-auria-flowdata-auria-agentdata-auria-directiondata-auria-criticdata-auria-step 等 scrub 钩子。
  • src/components/keynote/scene-contractlens.tsx

    • 重画为真实审查流水线:PDF 文档卡、5 个 pipeline stage、7 个 section/analyst 芯片、4 个验证 gate、一页报告。
    • 将“分段并行 + 引用验证 + 合规门”做成可视化链路,而不是静态标签集合。
    • 新增 data-cls-pathdata-cls-stagedata-cls-gatedata-cls-cap 等 scrub 钩子。
  • src/components/keynote/scene-sprout.tsx

    • 重画任务树舞台:Root、Child A/B/C、B-1/B-2、synthesize 节点和 9 条 SVG 连接线。
    • 加入三阶段 Worker 面板、straggler 提示、结果汇聚提示、token budget 25→100 分数条。
    • 新增 data-sp-paneldata-sp-cap,保留 data-sp-node/line/signal 但改为真实生命周期映射。
  • src/lib/keynote-engine.ts

    • 重写 Auria timeline:资料抽取 → flow line → Agent 工坊点亮 → 5 个方向弹出 → critic loop → 网站逐行生成。
    • 重写 ContractLens timeline:文档扫描 → pipeline stage 逐级点亮 → 7 analyst 并行 → validation gate → 报告行盖章。
    • 重写 Sprout timeline:root analyze → 子节点出现 → B 分支被检测为慢分支 → B-1/B-2 重拆 → synthesize 汇聚 → 分数条从 25 推到 100。
    • 更新 clearEngineStyles(),确保退出剧场/切换移动端时清掉新 selector 的 transform、opacity、dashoffset 和临时文本。

设计原则

  • 一页一个主 scrub:每个项目首屏都有完整的滚动过程,而不是只做 reveal。
  • 动画服务原理:每个发光、路径绘制、节点出现都对应真实 pipeline 阶段。
  • 固定舞台避免残缺:桌面 sticky 区域内使用固定 stage,高度和元素位置受控,避免旧版被 viewport 裁切。
  • 移动端保持静态终态:引擎仍只在 lg 以上启用,移动端不跑 scrub,保证窄屏可读。

验证

已通过:

  • npm run check:content -- --strict
  • npm run lint
  • npm run typecheck
  • npm run build
  • git diff --check

浏览器复核:

  • localhost:3100 首页用桌面视口检查 #auria#contractlens#sprout
  • Auria:滚动中段能点亮 Agent Studio 和 5 个方向卡;修复了 .stage-sheen 覆盖 absolute 导致卡片跑到舞台外的问题。
  • ContractLens:滚动后段报告行正常出现;隐藏了会叠到文档和 pipeline 上的舞台字幕。
  • Sprout:滚动中段能出现 straggler 标签;后段能到 100 分并显示 synthesize 汇聚。