report.html 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-theme="light">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>王慧程 · 学习复盘报告</title>
  7. <link rel="stylesheet" href="../lib/theme/tokens.css">
  8. <link rel="stylesheet" href="../lib/theme/base.css">
  9. <script src="../lib/vendor/gsap/gsap.min.js"></script>
  10. <script src="../lib/theme/theme.js"></script>
  11. <script src="../lib/player/canvas-scale.js"></script>
  12. <style>
  13. /* 页内补充样式:只用 var(--...),不新增色值(token 唯一来源纪律) */
  14. body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--font-body); }
  15. .screen { display:none; flex-direction:column; align-items:center; justify-content:center; width:1280px; height:720px; overflow:hidden; padding:0 40px; }
  16. .s-wrap { width:100%; max-width:1120px; }
  17. .s-foot-tags { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:14px; }
  18. /* 数据速览复用 base.css .stat-band/.stat;此处补工具分布条 */
  19. .dist-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
  20. .dist-name { width:110px; font-family:var(--font-mono); font-size:12px; color:var(--text-3); text-align:right; }
  21. .dist-bar { height:14px; background:var(--brand-1); border-radius:2px; min-width:2px; }
  22. .dist-num { font-family:var(--font-mono); font-size:12px; color:var(--text-2); }
  23. /* 交付物墙 */
  24. .wall { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  25. .wall .w-card { background:var(--bg-2); border:1px solid var(--border-subtle); padding:12px; display:flex; flex-direction:column; gap:8px; min-height:120px; }
  26. .wall .w-card iframe { width:100%; height:150px; border:1px solid var(--border-subtle); background:#fff; pointer-events:none; }
  27. .wall .w-card .w-title { font:600 13px var(--font-body); color:var(--text-1); }
  28. .wall .w-card .w-src { font:11px var(--font-mono); color:var(--text-4); }
  29. .wall .w-card .w-note { font:11px var(--font-mono); color:var(--brand-ok); }
  30. .wall .w-card .w-nolink { font:11px var(--font-mono); color:var(--text-4); border:1px dashed var(--border-subtle); padding:40px 8px; text-align:center; }
  31. /* 时刻线 */
  32. .timeline { position:relative; padding-left:22px; display:flex; flex-direction:column; gap:12px; }
  33. .timeline::before { content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--border-subtle); }
  34. .tl-item { position:relative; }
  35. .tl-item::before { content:''; position:absolute; left:-22px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--brand-1); border:2px solid var(--bg-0); }
  36. .tl-item .tl-time { font:11px var(--font-mono); color:var(--text-4); }
  37. .tl-item .tl-text { font-size:14px; color:var(--text-2); margin-top:2px; }
  38. /* 三问板块 */
  39. .q-block { border-left:3px solid var(--brand-1); background:var(--bg-2); padding:14px 18px; }
  40. .q-block.q1 { border-left-color:var(--brand-3); }
  41. .q-block.q2 { border-left-color:var(--brand-1); }
  42. .q-block.q3 { border-left-color:var(--brand-2); }
  43. .q-block .q-h { font:700 16px var(--font-display); color:var(--text-1); margin-bottom:8px; }
  44. .q-block .q-a { font-size:15px; line-height:1.8; color:var(--text-2); white-space:pre-wrap; }
  45. .q-block .q-ev { margin-top:10px; display:flex; flex-direction:column; gap:4px; }
  46. .q-block .q-ev .ev { font:11px var(--font-mono); color:var(--text-4); }
  47. .q-block .q-pending { font:12px var(--font-mono); color:var(--brand-3); }
  48. /* 附录表 */
  49. .tbl { width:100%; border-collapse:collapse; font-size:12px; }
  50. .tbl th { font-family:var(--font-mono); font-size:11px; color:var(--text-4); text-align:left; border-bottom:1px solid var(--border-subtle); padding:6px 8px; letter-spacing:.08em; }
  51. .tbl td { padding:5px 8px; border-bottom:1px solid var(--border-subtle); color:var(--text-2); }
  52. .tbl td.mono { font-family:var(--font-mono); font-size:11px; color:var(--text-4); }
  53. .pending-badge { display:inline-block; font:11px var(--font-mono); color:var(--brand-3); border:1px dashed rgba(255,0,0,.45); padding:2px 8px; margin-left:8px; }
  54. </style>
  55. </head>
  56. <body>
  57. <!-- ════ P1 · 封面 ════ -->
  58. <section class="screen" id="p1">
  59. <div class="s-wrap" style="text-align:center;">
  60. <div class="s-tag" style="letter-spacing:.3em;">AGENT LEARNING RETROSPECTIVE</div>
  61. <h1 class="s-title" style="font-size:56px; margin:18px 0 8px;">王慧程 · 学习复盘报告</h1>
  62. <p class="s-sub" style="margin:0 auto; max-width:70%;">速品食品·混沌AI院AIPM研修 · 2026-09-11 ~ 2026-09-13</p>
  63. <div style="margin-top:46px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;">
  64. <span class="tag">208 场会话 · 3 大项目</span>
  65. <span class="tag ok">3 类工具协作</span>
  66. <span class="tag brand-2">13 项核心交付 · 72 痕迹</span>
  67. <span class="tag">48h 全程可溯源</span>
  68. </div>
  69. </div>
  70. </section>
  71. <!-- ════ P2 · 48h 数据全景 ════ -->
  72. <section class="screen" id="p2">
  73. <div class="s-wrap">
  74. <div class="s-tag">全景 · 真实采集数据</div>
  75. <h2 class="s-title">48 小时数据全景</h2>
  76. <div class="s-body">
  77. <div class="stat-band">
  78. <div class="stat">
  79. <div class="num hero">208</div>
  80. <div class="label">Agent 会话(场)</div>
  81. <div class="src">来源:各工具本地会话记录</div>
  82. </div>
  83. <div class="stat">
  84. <div class="num">3</div>
  85. <div class="label">工具来源(类)</div>
  86. <div class="src">Claude Code / WorkBuddy / 工作区</div>
  87. </div>
  88. <div class="stat">
  89. <div class="num">72</div>
  90. <div class="label">产出物(项)</div>
  91. <div class="src">.md/.html/.pdf/.docx/.xlsx</div>
  92. </div>
  93. <div class="stat">
  94. <div class="num">1049</div>
  95. <div class="label">对话消息(条)</div>
  96. <div class="src">user + assistant 可读消息</div>
  97. </div>
  98. </div>
  99. <div>
  100. <div class="dist-row"><div class="dist-name">WorkBuddy</div><div class="dist-bar" style="width:560px;"></div><div class="dist-num">200</div></div>
  101. <div class="dist-row"><div class="dist-name">工作区</div><div class="dist-bar" style="width:62px;"></div><div class="dist-num">22</div></div>
  102. <div class="dist-row"><div class="dist-name">Claude Code</div><div class="dist-bar" style="width:22px;"></div><div class="dist-num">8</div></div>
  103. </div>
  104. </div>
  105. <div class="s-foot-tags">
  106. <span class="tag ok">数据优先 · 全部来自本机采集清单</span>
  107. <span class="tag">采集窗口 2026-09-11 ~ 2026-09-13</span>
  108. </div>
  109. </div>
  110. </section>
  111. <!-- ════ p2a · 明细 · Claude Code 会话全记录(8 场) ════ -->
  112. <section class="screen" id="p2a">
  113. <div class="s-wrap">
  114. <div class="s-tag">明细 · 每一场都算数</div>
  115. <h2 class="s-title">明细 · Claude Code 会话全记录(8 场)</h2>
  116. <div class="s-body">
  117. <div class="stat-band" style="margin-bottom:14px">
  118. <div class="stat"><div class="num">8</div><div class="label">会话(场)</div></div>
  119. <div class="stat"><div class="num">50</div><div class="label">用户消息</div></div>
  120. <div class="stat"><div class="num">999</div><div class="label">助手消息</div></div>
  121. <div class="stat"><div class="num">704</div><div class="label">工具调用</div></div>
  122. </div>
  123. <table class="tbl">
  124. <thead><tr><th style="width:90px;">时间</th><th>会话主题</th><th style="width:64px; text-align:center">用户</th><th style="width:64px; text-align:center">助手</th><th style="width:76px; text-align:center">工具调用</th></tr></thead>
  125. <tbody>
  126. <tr>
  127. <td class="mono">09-13 06:23</td>
  128. <td>我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中 现在我们已经梳理清</td>
  129. <td class="mono" style="text-align:center">3</td>
  130. <td class="mono" style="text-align:center">96</td>
  131. <td class="mono" style="text-align:center">57</td>
  132. </tr>
  133. <tr>
  134. <td class="mono">09-13 03:48</td>
  135. <td>(会话无可读用户消息)</td>
  136. <td class="mono" style="text-align:center">1</td>
  137. <td class="mono" style="text-align:center">2</td>
  138. <td class="mono" style="text-align:center">0</td>
  139. </tr>
  140. <tr>
  141. <td class="mono">09-13 03:06</td>
  142. <td>【给 FmodeStudio 的指令】 你将帮用户安装并激活「VOC 电商数据采集」技能</td>
  143. <td class="mono" style="text-align:center">1</td>
  144. <td class="mono" style="text-align:center">24</td>
  145. <td class="mono" style="text-align:center">12</td>
  146. </tr>
  147. <tr>
  148. <td class="mono">09-12 11:55</td>
  149. <td># 角色 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、</td>
  150. <td class="mono" style="text-align:center">5</td>
  151. <td class="mono" style="text-align:center">143</td>
  152. <td class="mono" style="text-align:center">101</td>
  153. </tr>
  154. <tr>
  155. <td class="mono">09-12 11:24</td>
  156. <td>AI落地场景选题挖掘教练|最终凝练提示词 角色:你是AI落地场景选题挖掘教练。你的目标</td>
  157. <td class="mono" style="text-align:center">2</td>
  158. <td class="mono" style="text-align:center">70</td>
  159. <td class="mono" style="text-align:center">41</td>
  160. </tr>
  161. <tr>
  162. <td class="mono">09-12 06:29</td>
  163. <td>AI落地场景选题挖掘教练|最终凝练提示词 角色:你是AI落地场景选题挖掘教练。你的目标</td>
  164. <td class="mono" style="text-align:center">32</td>
  165. <td class="mono" style="text-align:center">446</td>
  166. <td class="mono" style="text-align:center">333</td>
  167. </tr>
  168. <tr>
  169. <td class="mono">09-12 04:16</td>
  170. <td>请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</td>
  171. <td class="mono" style="text-align:center">4</td>
  172. <td class="mono" style="text-align:center">113</td>
  173. <td class="mono" style="text-align:center">70</td>
  174. </tr>
  175. <tr>
  176. <td class="mono">09-12 03:57</td>
  177. <td>请把以下内容作为你在当前企业微信机器人中的长期执行规则。你是绑定在企业微信中的 Herm</td>
  178. <td class="mono" style="text-align:center">2</td>
  179. <td class="mono" style="text-align:center">105</td>
  180. <td class="mono" style="text-align:center">90</td>
  181. </tr>
  182. </tbody>
  183. </table>
  184. </div>
  185. <div class="s-foot-tags">
  186. <span class="tag">数据源:本机采集 report-data.json · 全部可溯源</span>
  187. </div>
  188. </div>
  189. </section>
  190. <!-- ════ P3 · 交付物墙 ════ -->
  191. <section class="screen" id="p3">
  192. <div class="s-wrap">
  193. <div class="s-tag">产出 · 能看见的交付</div>
  194. <h2 class="s-title">交付物墙</h2>
  195. <div class="s-body">
  196. <div class="wall">
  197. <div class="w-card"><div class="w-nolink">本窗口未检出 HTML 交付物<br>(采集窗口内无 .html 产出)</div><div class="w-title">交付物墙占位</div><div class="w-src">缺数据段 · 优雅降级</div></div>
  198. </div>
  199. </div>
  200. <div class="s-foot-tags">
  201. <span class="tag ok">HTML 交付物以 iframe 实时嵌套展示</span>
  202. <span class="tag">在线项目已标记「可嵌入」</span>
  203. <div class="w-card"><iframe src="deliverables/AI辅助产品研发SOP长页面.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">AI辅助产品研发SOP长页面</div><div class="w-src">deliverables/AI辅助产品研发SOP长页面.html</div><div class="w-note">产品研发助手 · iframe 嵌入</div></div>
  204. <div class="w-card"><iframe src="deliverables/AI落地场景选题清单.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">AI落地场景选题清单(14场景)</div><div class="w-src">deliverables/AI落地场景选题清单.html</div><div class="w-note">产品研发助手 · iframe 嵌入</div></div>
  205. <div class="w-card"><iframe src="deliverables/新品配方推荐与调测报告_首次实跑.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">新品配方推荐与调测报告</div><div class="w-src">deliverables/新品配方推荐与调测报告_首次实跑.html</div><div class="w-note">产品研发助手 · iframe 嵌入</div></div>
  206. <div class="w-card"><iframe src="deliverables/9月销售过程管理分析报告-对比8月案例.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">9月销售过程管理分析报告</div><div class="w-src">deliverables/9月销售过程管理分析报告-对比8月案例.html</div><div class="w-note">数据分析助手 · iframe 嵌入</div></div>
  207. <div class="w-card"><iframe src="https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/dev/HddumFqtUs/index.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">AI技能共享看板(组织级)</div><div class="w-src">https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/dev/HddumFqtUs/index.html</div><div class="w-note">🌐 在线项目 · 可嵌入</div></div>
  208. <div class="w-card"><iframe src="https://fmode.cn/aipm-lesson/study-report/index.html" loading="lazy" sandbox="allow-same-origin allow-scripts"></iframe><div class="w-title">skill-study-report 技能发布页</div><div class="w-src">https://fmode.cn/aipm-lesson/study-report/index.html</div><div class="w-note">🌐 在线项目 · 可嵌入</div></div>
  209. <!-- ════ P4 · 精选工作时刻线 ════ -->
  210. <section class="screen" id="p4">
  211. <div class="s-wrap">
  212. <div class="s-tag">过程 · 时间即证据</div>
  213. <h2 class="s-title">精选工作时刻线</h2>
  214. <div class="s-body">
  215. <div class="timeline">
  216. <div class="tl-item">
  217. <div class="tl-time">09-13 06:23 · Claude Code · 3问/96答/57工具</div>
  218. <div class="tl-text">我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中 现在我们已经梳理清晰了这个选题技能的具体执行的人工执行过程的 </div>
  219. </div>
  220. <div class="tl-item">
  221. <div class="tl-time">09-13 03:48 · Claude Code · 1问/2答/0工具</div>
  222. <div class="tl-text">(会话无可读用户消息)</div>
  223. </div>
  224. <div class="tl-item">
  225. <div class="tl-time">09-13 03:06 · Claude Code · 1问/24答/12工具</div>
  226. <div class="tl-text">【给 FmodeStudio 的指令】 你将帮用户安装并激活「VOC 电商数据采集」技能。请自动完成,不要让用户手动敲命令。 下面</div>
  227. </div>
  228. <div class="tl-item">
  229. <div class="tl-time">09-12 11:55 · Claude Code · 5问/143答/101工具</div>
  230. <div class="tl-text"># 角色 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、加盟商、创业者提供高匹配度的产品详情页、营销</div>
  231. </div>
  232. <div class="tl-item">
  233. <div class="tl-time">09-12 11:24 · Claude Code · 2问/70答/41工具</div>
  234. <div class="tl-text">AI落地场景选题挖掘教练|最终凝练提示词 角色:你是AI落地场景选题挖掘教练。你的目标:使用少量精简提问挖掘企业基础信息,不大量提</div>
  235. </div>
  236. <div class="tl-item">
  237. <div class="tl-time">09-12 06:29 · Claude Code · 32问/446答/333工具</div>
  238. <div class="tl-text">AI落地场景选题挖掘教练|最终凝练提示词 角色:你是AI落地场景选题挖掘教练。你的目标:使用少量精简提问挖掘企业基础信息,不大量提</div>
  239. </div>
  240. <div class="tl-item">
  241. <div class="tl-time">09-12 04:16 · Claude Code · 4问/113答/70工具</div>
  242. <div class="tl-text">请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</div>
  243. </div>
  244. <div class="tl-item">
  245. <div class="tl-time">09-12 03:57 · Claude Code · 2问/105答/90工具</div>
  246. <div class="tl-text">请把以下内容作为你在当前企业微信机器人中的长期执行规则。你是绑定在企业微信中的 HermesAgent / Agent 数字人,负责</div>
  247. </div>
  248. <div class="tl-item">
  249. <div class="tl-time">09-12 ~ 09-13 · WorkBuddy · 常驻会话</div>
  250. <div class="tl-text">WorkBuddy 桌面端 200 条痕迹(配置/缓存为主)+ 业务资料 WPS 云同步 21 份(外勤/商机/达成率/样品库/测评模板)实时更新——业务数据流贯穿 48h</div>
  251. </div>
  252. <div class="tl-item">
  253. <div class="tl-time">09-12 ~ 09-13 · Hermes 企微数字人 · 常驻</div>
  254. <div class="tl-text">数字人「小澄」在线:企微任务派发跟踪(学员名单/沙盘会协作)、配方库存消化方案、学习复盘报告全流程执行</div>
  255. </div>
  256. <div class="tl-item">
  257. <div class="tl-time">09-13 06:23 · Claude Code · 会话</div>
  258. <div class="tl-text">用户消息 3 条 / 助手 96 条 / 工具调用 57 次 — 我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中
  259. 现在我们已经梳理清晰了这个选题技</div>
  260. </div>
  261. <div class="tl-item">
  262. <div class="tl-time">09-13 03:48 · Claude Code · 会话</div>
  263. <div class="tl-text">用户消息 1 条 / 助手 2 条 / 工具调用 0 次 — (会话无可读用户消息)</div>
  264. </div>
  265. <div class="tl-item">
  266. <div class="tl-time">09-13 03:06 · Claude Code · 会话</div>
  267. <div class="tl-text">用户消息 1 条 / 助手 24 条 / 工具调用 12 次 — 【给 FmodeStudio 的指令】
  268. 你将帮用户安装并激活「VOC 电商数据采集」技能。请自动完成,</div>
  269. </div>
  270. <div class="tl-item">
  271. <div class="tl-time">09-12 11:55 · Claude Code · 会话</div>
  272. <div class="tl-text">用户消息 5 条 / 助手 143 条 / 工具调用 101 次 — # 角色
  273. 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、加盟商、创</div>
  274. </div>
  275. <div class="tl-item">
  276. <div class="tl-time">09-12 11:24 · Claude Code · 会话</div>
  277. <div class="tl-text">用户消息 2 条 / 助手 70 条 / 工具调用 41 次 — AI落地场景选题挖掘教练|最终凝练提示词
  278. 角色:你是AI落地场景选题挖掘教练。你的目标:使用少量精简</div>
  279. </div>
  280. <div class="tl-item">
  281. <div class="tl-time">09-12 06:29 · Claude Code · 会话</div>
  282. <div class="tl-text">用户消息 32 条 / 助手 446 条 / 工具调用 333 次 — AI落地场景选题挖掘教练|最终凝练提示词
  283. 角色:你是AI落地场景选题挖掘教练。你的目标:使用少</div>
  284. </div>
  285. <div class="tl-item">
  286. <div class="tl-time">09-12 04:16 · Claude Code · 会话</div>
  287. <div class="tl-text">用户消息 4 条 / 助手 113 条 / 工具调用 70 次 — 请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</div>
  288. </div>
  289. </div>
  290. </div>
  291. <div class="s-foot-tags">
  292. <span class="tag">按会话/文件真实 mtime 排序 · 摘取关键节点</span>
  293. </div>
  294. </div>
  295. </section>
  296. <!-- ════ P3A · 三大项目总览 ════ -->
  297. <section class="screen" id="p3a">
  298. <div class="s-wrap">
  299. <div class="s-tag">项目 · 三条主线全景</div>
  300. <h2 class="s-title">三大 AI 项目总览</h2>
  301. <div class="s-body">
  302. <style>
  303. .pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  304. .pcard { background:var(--bg-2); border:1px solid var(--border-subtle); border-top:3px solid var(--brand-1); padding:14px 16px; }
  305. .pcard h4 { font:700 15px var(--font-display); margin:0 0 6px; color:var(--text-1); }
  306. .pcard .pv { font:11px var(--font-mono); color:var(--text-4); margin-bottom:8px; }
  307. .pcard ul { margin:0; padding-left:16px; font-size:12.5px; color:var(--text-2); line-height:1.7; }
  308. .pcard .pdeliv { margin-top:8px; font:11px var(--font-mono); color:var(--brand-ok); }
  309. .trow { display:flex; gap:10px; margin-top:12px; }
  310. .tcell { flex:1; background:var(--bg-2); border:1px solid var(--border-subtle); padding:10px; text-align:center; }
  311. .tcell b { display:block; font-size:20px; color:var(--brand-1); }
  312. .tcell span { font-size:11px; color:var(--text-4); }
  313. </style>
  314. <div class="pgrid">
  315. <div class="pcard" style="border-top-color:var(--brand-1)">
  316. <h4>🧪 产品研发助手</h4>
  317. <div class="pv">9/12 06:29 / 11:24 两场 · 516助手消息 · 374工具调用</div>
  318. <ul>
  319. <li>AI落地场景选题清单(14场景·6维评估)</li>
  320. <li>AI辅助产品研发SOP长页面(10章)</li>
  321. <li>配方推荐与调测报告(3次实跑)</li>
  322. <li>样品库276条测评结构化解析</li>
  323. </ul>
  324. <div class="pdeliv">交付 3 HTML + 4 技能入库</div>
  325. </div>
  326. <div class="pcard" style="border-top-color:var(--brand-2)">
  327. <h4>📣 辅销工具助手</h4>
  328. <div class="pv">9/12 11:55 · 143助手消息 · 101工具调用</div>
  329. <ul>
  330. <li>铁观音AI知识库(6源资料整编)</li>
  331. <li>产品一页纸(3卖点痛点→解法)</li>
  332. <li>多平台物料方案(短视频35s分镜+16:9提案)</li>
  333. <li>电商物料通用模板(占位符复用)</li>
  334. </ul>
  335. <div class="pdeliv">交付 6 件:md×3 + PDF + PPTX + txt</div>
  336. </div>
  337. <div class="pcard" style="border-top-color:var(--brand-3)">
  338. <h4>📊 数据分析助手</h4>
  339. <div class="pv">9/13 06:23 · 96助手消息 · 57工具调用</div>
  340. <ul>
  341. <li>5源数据接入(CRM/OA/月报PDF)</li>
  342. <li>数据字典与处理规则.md</li>
  343. <li>扣分计算.py(脚本化口径)</li>
  344. <li>9月vs8月销售分析报告(HTML)</li>
  345. </ul>
  346. <div class="pdeliv">交付 4 件 · 含自检报告</div>
  347. </div>
  348. </div>
  349. <div class="trow">
  350. <div class="tcell"><b>3</b><span>项目主线</span></div>
  351. <div class="tcell"><b>13</b><span>核心交付物</span></div>
  352. <div class="tcell"><b>6</b><span>个人技能入库</span></div>
  353. <div class="tcell"><b>4</b><span>Git仓库</span></div>
  354. </div>
  355. </div>
  356. <div class="s-foot-tags">
  357. <span class="tag">对应 PRD 文档 × 3(产品研发/辅销工具/数据分析)</span>
  358. <span class="tag ok">产出物见交付物墙与附录明细</span>
  359. </div>
  360. </div>
  361. </section>
  362. <!-- ════ P5 · 过去痛点(第一问) ════ -->
  363. <section class="screen" id="p5">
  364. <div class="s-wrap">
  365. <div class="s-tag" style="color:var(--brand-3);">第一问 · 过去</div>
  366. <h2 class="s-title">之前不够原生、不够性感的地方</h2>
  367. <div class="s-body">
  368. <div class="q-block q1">
  369. <div class="q-h">痛点与疑惑</div>
  370. <div class="q-a">企业AI落地最大的痛点是:只有AI的&quot;形&quot;(工具/提示词),没有AI的&quot;魂&quot;(系统/Harness/闭环/数据/人机协同)。不够原生是因为AI没有融入业务流程,不够性感是因为没有产生可衡量的业务价值。具体分为几点:
  371. 1. 点状使用:员工各自用工具,未嵌入业务流程,不成系统。
  372. 2. 只调提示词,不做Harness:AI无知识库、无规则、无工具链、无回流,输出不稳定。
  373. 3. 数据散乱:知识未清洗分类,AI检索到过期错误信息,一上真实场景就翻车。
  374. 4. 没有闭环:生成即结束,无人审核、无人使用、无人反馈,无法迭代进化。
  375. 5. 忽视人机协同:要么幻想全自动,要么只做重复劳动,未找到人与AI的分工最优解。</div>
  376. </div>
  377. </div>
  378. <div class="s-foot-tags">
  379. <span class="tag">用户口述 × 采集证据 关联</span>
  380. </div>
  381. </div>
  382. <div class="q-ev">
  383. <div class="ev">↳ 证据 [FILE] 产品研发助手:人工SOP→AI化流程重构(过去痛点对照的解法雏形):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\AI辅助产品研发SOP长页面.html</div>
  384. <div class="ev">↳ 证据 [URL] AI技能共享看板(在线·可嵌入):多Agent任务四态跟踪——闭环的系统化尝试:https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/dev/HddumFqtUs/index.html</div>
  385. </div>
  386. </section>
  387. <!-- ════ P6 · 两天感受(第二问) ════ -->
  388. <section class="screen" id="p6">
  389. <div class="s-wrap">
  390. <div class="s-tag">第二问 · 现在</div>
  391. <h2 class="s-title">这两天的感受与收获</h2>
  392. <div class="s-body">
  393. <div class="q-block q2">
  394. <div class="q-h">具体感受 · 有感觉的项目</div>
  395. <div class="q-a">一、总体感受
  396. 企业AI落地的核心,不是模型有多强,而是能否将成功经验封装为可复用的Skill,使其成为企业的长期资产。即使人员流动,经验和能力仍能被保留和传承。
  397. 二、最大收获:认清FDE的职责与定位
  398. 作为企业AI推动者,我深刻认识到:
  399. 职责无边界:AI落地遇阻时,不能止步于技术问题,而要主动推动业务融合。
  400. 能力复合化:FDE既要懂业务,也要懂技术,成为既懂商业又懂技术的企业操盘手。
  401. 护城河三要素:
  402. 懂AI能力边界(持续学习)
  403. 理性看待技术(不盲目追新)
  404. 懂企业真实业务与商业价值(能落地、能产出)
  405. 三、技术层面的进阶
  406. 从原来关注&quot;本地化部署&quot;,转向思考如何让AI高质量地把工作做完做好,包括流程设计、知识库建设、规则校验、结果回流等系统性方法。
  407. 四、最有感觉的项目:产品研发助手
  408. 在产品研发助手项目中,我已经成功搭建并跑出了完整的产品研发方案结果,对最终的产出非常满意。这个项目让我切实感受到:Skill不是纸上谈兵,是真的能落地、能出活儿、能创造价值的。</div>
  409. </div>
  410. </div>
  411. <div class="s-foot-tags">
  412. <span class="tag ok">成果已从采集自动带入 · 本页只讲感受</span>
  413. </div>
  414. </div>
  415. <div class="q-ev">
  416. <div class="ev">↳ 证据 [FILE] 产品研发助手·配方推荐与调测报告(最有感觉的项目核心产出):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\新品配方推荐与调测报告_首次实跑.html</div>
  417. <div class="ev">↳ 证据 [FILE] 产品研发助手·AI落地场景选题清单(14场景):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\AI落地场景选题清单.html</div>
  418. <div class="ev">↳ 证据 [FILE] CAPABILITY-MAP:19+技能的能力资产化沉淀(Skill=长期资产的实证):C:\Users\Administrator\.claude\skills\CAPABILITY-MAP.md</div>
  419. </div>
  420. </section>
  421. <!-- ════ P7 · 未来方向(第三问) ════ -->
  422. <section class="screen" id="p7">
  423. <div class="s-wrap">
  424. <div class="s-tag" style="color:var(--brand-2);">第三问 · 未来</div>
  425. <h2 class="s-title">想回企业落地或探索的方向</h2>
  426. <div class="s-body">
  427. <div class="q-block q3">
  428. <div class="q-h">未来畅想</div>
  429. <div class="q-a">未来落地三个方向
  430. 方向一:产品研发助手本地化部署
  431. 目标:将产品研发助手落地为本地化部署方案
  432. 行动:与业务端协同,建立知识库SOP,并将整个流程AI化
  433. 价值:让产品研发从&quot;人肉驱动&quot;转向&quot;AI系统驱动&quot;,提升效率与可复制性
  434. 方向二:辅销工具助手的标杆复制
  435. 策略:先集中资源打造1个产品的完整标杆案例(话术→海报→PPT全链路)
  436. 路径:跑通一个完整的Skill闭环,验证可行后再逐步复制到其他产品和项目中
  437. 原则:不贪多、不求快,先扎深一个点
  438. 方向三:团队协作与项目组搭建
  439. 理念:成功的项目离不开团队协作
  440. 行动:主动与技术、业务协同,搭建正式项目组
  441. 分工:已搭建的场景应用持续优化,未搭建的场景协同完成搭建
  442. 目标:形成可持续运转的AI落地协作机制</div>
  443. </div>
  444. </div>
  445. <div class="s-foot-tags">
  446. <span class="tag brand-2">从个人工具箱 → 企业原生 AI 落地</span>
  447. </div>
  448. </div>
  449. <div class="q-ev">
  450. <div class="ev">↳ 证据 [FILE] 辅销工具助手·铁观音一页纸(标杆复制方向的已有起点):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\辅销工具助手\铁观音产品一页纸.pdf</div>
  451. <div class="ev">↳ 证据 [FILE] 数据分析助手·9月销售分析报告(团队协同可复用的分析SOP产出):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\数据分析助手\04-输出成果\9月销售过程管理分析报告-对比8月案例</div>
  452. <div class="ev">↳ 证据 [FILE] 数据分析助手·数据字典与处理规则(知识库SOP的雏形):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\数据分析助手\数据字典与处理规则.md</div>
  453. </div>
  454. </section>
  455. <!-- ════ P8 · 数据附录 ════ -->
  456. <section class="screen" id="p8">
  457. <div class="s-wrap">
  458. <div class="s-tag">附录 · 可溯源明细</div>
  459. <h2 class="s-title">数据附录</h2>
  460. <div class="s-body">
  461. <table class="tbl">
  462. <thead><tr><th style="width:110px;">时间</th><th style="width:90px;">来源</th><th>摘要</th><th style="width:180px;">路径 / URL</th></tr></thead>
  463. <tbody>
  464. <tr>
  465. <td class="mono">09-13 06:23</td>
  466. <td>Claude Code</td>
  467. <td>用户消息 3 条 / 助手 96 条 / 工具调用 57 次 — 我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中
  468. 现在我们已经梳理清晰了这</td>
  469. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo---------\132e3724-b988-40f6-b088-db44cc40e959.jsonl</td>
  470. </tr>
  471. <tr>
  472. <td class="mono">09-13 03:48</td>
  473. <td>Claude Code</td>
  474. <td>用户消息 1 条 / 助手 2 条 / 工具调用 0 次 — (会话无可读用户消息)</td>
  475. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\f596cd37-6dab-4319-8f04-1304e85f7d52.jsonl</td>
  476. </tr>
  477. <tr>
  478. <td class="mono">09-13 03:06</td>
  479. <td>Claude Code</td>
  480. <td>用户消息 1 条 / 助手 24 条 / 工具调用 12 次 — 【给 FmodeStudio 的指令】
  481. 你将帮用户安装并激活「VOC 电商数据采集」技能。请自</td>
  482. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\a1a40acc-f15a-4173-9a8e-d28c93bf4b94.jsonl</td>
  483. </tr>
  484. <tr>
  485. <td class="mono">09-12 11:55</td>
  486. <td>Claude Code</td>
  487. <td>用户消息 5 条 / 助手 143 条 / 工具调用 101 次 — # 角色
  488. 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、加</td>
  489. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\78ff3c9a-97a1-42f2-a0d6-83f30cbd573a.jsonl</td>
  490. </tr>
  491. <tr>
  492. <td class="mono">09-12 11:24</td>
  493. <td>Claude Code</td>
  494. <td>用户消息 2 条 / 助手 70 条 / 工具调用 41 次 — AI落地场景选题挖掘教练|最终凝练提示词
  495. 角色:你是AI落地场景选题挖掘教练。你的目标:使用</td>
  496. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\aeae25c7-a288-47f3-9b27-67717ee7891a.jsonl</td>
  497. </tr>
  498. <tr>
  499. <td class="mono">09-12 06:29</td>
  500. <td>Claude Code</td>
  501. <td>用户消息 32 条 / 助手 446 条 / 工具调用 333 次 — AI落地场景选题挖掘教练|最终凝练提示词
  502. 角色:你是AI落地场景选题挖掘教练。你的目标</td>
  503. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\9d7a3df0-c2f9-4df1-a2ee-603b248c745e.jsonl</td>
  504. </tr>
  505. <tr>
  506. <td class="mono">09-12 04:16</td>
  507. <td>Claude Code</td>
  508. <td>用户消息 4 条 / 助手 113 条 / 工具调用 70 次 — 请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</td>
  509. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\a655818f-3fb3-4f9a-9af1-651ae8800289.jsonl</td>
  510. </tr>
  511. <tr>
  512. <td class="mono">09-12 03:57</td>
  513. <td>Claude Code</td>
  514. <td>用户消息 2 条 / 助手 105 条 / 工具调用 90 次 — 请把以下内容作为你在当前企业微信机器人中的长期执行规则。你是绑定在企业微信中的 Hermes</td>
  515. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\feeddcc1-03d9-4081-89d4-a008eed66215.jsonl</td>
  516. </tr>
  517. <tr>
  518. <td class="mono">09-12 08:06</td>
  519. <td>WorkBuddy</td>
  520. <td>.connectors-marketplace.meta.json(0KB)</td>
  521. <td class="mono">C:\Users\Administrator\.workbuddy\.connectors-marketplace.meta.json</td>
  522. </tr>
  523. <tr>
  524. <td class="mono">09-12 05:28</td>
  525. <td>WorkBuddy</td>
  526. <td>app-config.json(0KB)</td>
  527. <td class="mono">C:\Users\Administrator\.workbuddy\app\app-config.json</td>
  528. </tr>
  529. <tr>
  530. <td class="mono">09-13 05:28</td>
  531. <td>WorkBuddy</td>
  532. <td>expert-bundle-map.json(0KB)</td>
  533. <td class="mono">C:\Users\Administrator\.workbuddy\app\cache\experts\expert-bundle-map.json</td>
  534. </tr>
  535. <tr>
  536. <td class="mono">09-13 07:26</td>
  537. <td>WorkBuddy</td>
  538. <td>polling-lease-Administrator.json(0KB)</td>
  539. <td class="mono">C:\Users\Administrator\.workbuddy\app\memory\polling-lease-Administrator.json</td>
  540. </tr>
  541. <tr>
  542. <td class="mono">09-12 05:28</td>
  543. <td>WorkBuddy</td>
  544. <td>renderer-version.json(0KB)</td>
  545. <td class="mono">C:\Users\Administrator\.workbuddy\app\renderer-version.json</td>
  546. </tr>
  547. <tr>
  548. <td class="mono">09-12 07:58</td>
  549. <td>WorkBuddy</td>
  550. <td>000006.log(89KB)</td>
  551. <td class="mono">C:\Users\Administrator\.workbuddy\app\session\Session Storage\000006.log</td>
  552. </tr>
  553. </tbody>
  554. </table>
  555. </div>
  556. <div class="s-foot-tags">
  557. <span class="tag">共 230 条采集 · 本页展示前 14 条</span>
  558. <span class="tag">完整清单见 report-data.json</span>
  559. </div>
  560. </div>
  561. </section>
  562. <!-- ════ p8b · 明细 · 关键产出物清单(业务交付) ════ -->
  563. <section class="screen" id="p8b">
  564. <div class="s-wrap">
  565. <div class="s-tag">附录 B · 产出物级明细</div>
  566. <h2 class="s-title">明细 · 关键产出物清单(业务交付)</h2>
  567. <div class="s-body">
  568. <table class="tbl">
  569. <thead><tr><th style="width:56px">类型</th><th style="width:130px">所属项目</th><th>产出物</th></tr></thead>
  570. <tbody>
  571. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>技能说明书-数据分析助手.md</td></tr>
  572. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>数据字典与处理规则.md</td></tr>
  573. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>自检报告.md</td></tr>
  574. <tr><td class="mono" style="width:56px">PY</td><td style="width:130px">数据分析助手</td><td>扣分计算.py</td></tr>
  575. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">数据分析助手</td><td>9月销售过程管理分析报告-对比8月案例.html</td></tr>
  576. <tr><td class="mono" style="width:56px">PDF</td><td style="width:130px">辅销工具助手</td><td>铁观音产品一页纸.pdf</td></tr>
  577. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>铁观音产品一页纸_优化重构版.md</td></tr>
  578. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>铁观音_多平台物料设计方案.md</td></tr>
  579. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>电商物料通用生成模板.md</td></tr>
  580. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>AI落地场景选题清单.html</td></tr>
  581. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>AI辅助产品研发SOP长页面.html</td></tr>
  582. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>新品配方推荐与调测报告_首次实跑.html</td></tr>
  583. <tr><td class="mono" style="width:56px">PPTX</td><td style="width:130px">桌面</td><td>速品食品AI应用实践-2026.9.15.pptx</td></tr>
  584. </tbody>
  585. </table>
  586. </div>
  587. <div class="s-foot-tags">
  588. <span class="tag">数据源:本机采集 report-data.json · 全部可溯源</span>
  589. </div>
  590. </div>
  591. </section>
  592. <!-- ════ p8a · 明细 · 工作区文件全清单(22 个) ════ -->
  593. <section class="screen" id="p8a">
  594. <div class="s-wrap">
  595. <div class="s-tag">附录 A · 文件级明细</div>
  596. <h2 class="s-title">明细 · 工作区文件全清单(22 个)</h2>
  597. <div class="s-body">
  598. <table class="tbl">
  599. <thead><tr><th style="width:90px;">时间</th><th style="width:190px;">分组</th><th>文件名</th></tr></thead>
  600. <tbody>
  601. <tr>
  602. <td class="mono">09-13 06:21</td>
  603. <td><b>业务素材(WPS 云同步)(21)</b></td>
  604. <td>外勤数据导出表(CRM系统)(2026-09-07~2026-09-13).xlsx</td>
  605. </tr>
  606. <tr>
  607. <td class="mono">09-13 06:20</td>
  608. <td></td>
  609. <td>外勤次数报表(OA系统)9月7~9月13日.xlsx</td>
  610. </tr>
  611. <tr>
  612. <td class="mono">09-13 05:58</td>
  613. <td></td>
  614. <td>商机对象导出结果_20260913135557147.xlsx</td>
  615. </tr>
  616. <tr>
  617. <td class="mono">09-13 05:56</td>
  618. <td></td>
  619. <td>商机对象导出结果_20260913135557147.xlsx</td>
  620. </tr>
  621. <tr>
  622. <td class="mono">09-13 05:53</td>
  623. <td></td>
  624. <td>销售动作达成率(含部门)_2026-09-13-最新.xlsx</td>
  625. </tr>
  626. <tr>
  627. <td class="mono">09-13 05:50</td>
  628. <td></td>
  629. <td>销售动作达成率(含部门)_2026-09-13 13_25.xlsx</td>
  630. </tr>
  631. <tr>
  632. <td class="mono">09-13 05:27</td>
  633. <td></td>
  634. <td>8月速品销售过程管理月报 - 2026.9.6(1).pdf</td>
  635. </tr>
  636. <tr>
  637. <td class="mono">09-13 02:03</td>
  638. <td></td>
  639. <td>销售动作达成率(含部门)_2026-09-13 10_03.xlsx</td>
  640. </tr>
  641. <tr>
  642. <td class="mono">09-13 01:18</td>
  643. <td></td>
  644. <td>铁观音产品营销物料_图文展示版.pptx</td>
  645. </tr>
  646. <tr>
  647. <td class="mono">09-12 08:35</td>
  648. <td></td>
  649. <td>产品清单.xlsx</td>
  650. </tr>
  651. <tr>
  652. <td class="mono">09-12 07:26</td>
  653. <td></td>
  654. <td>现代茶饮测评模板.pptx</td>
  655. </tr>
  656. <tr>
  657. <td class="mono">09-12 07:26</td>
  658. <td></td>
  659. <td>研发样品库.xlsx</td>
  660. </tr>
  661. <tr>
  662. <td class="mono">09-12 07:25</td>
  663. <td></td>
  664. <td>现制茶饮产品研发测评模板.pptx</td>
  665. </tr>
  666. <tr>
  667. <td class="mono">09-12 07:25</td>
  668. <td></td>
  669. <td>研发样品库.xlsx</td>
  670. </tr>
  671. <tr>
  672. <td class="mono">09-12 07:13</td>
  673. <td></td>
  674. <td>AI辅助茶叶研发系统需求痛点总结.docx</td>
  675. </tr>
  676. <tr>
  677. <td class="mono">09-12 02:42</td>
  678. <td></td>
  679. <td>03-课前准备-场景选择说明与业务资料清单.docx</td>
  680. </tr>
  681. <tr>
  682. <td class="mono">09-12 02:42</td>
  683. <td></td>
  684. <td>02-课前准备-场景可行性速查表.docx</td>
  685. </tr>
  686. <tr>
  687. <td class="mono">09-12 01:37</td>
  688. <td></td>
  689. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票(2).docx</td>
  690. </tr>
  691. <tr>
  692. <td class="mono">09-12 01:34</td>
  693. <td></td>
  694. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票.docx</td>
  695. </tr>
  696. <tr>
  697. <td class="mono">09-12 01:25</td>
  698. <td></td>
  699. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票.pdf</td>
  700. </tr>
  701. <tr>
  702. <td class="mono">09-12 00:54</td>
  703. <td></td>
  704. <td>速品食品AI应用实践-2026.9.15.pptx</td>
  705. </tr>
  706. <tr>
  707. <td class="mono">09-12 00:54</td>
  708. <td><b>桌面产出(1)</b></td>
  709. <td>速品食品AI应用实践-2026.9.15.pptx</td>
  710. </tr>
  711. </tbody>
  712. </table>
  713. </div>
  714. <div class="s-foot-tags">
  715. <span class="tag">数据源:本机采集 report-data.json · 全部可溯源</span>
  716. </div>
  717. </div>
  718. </section>
  719. <!-- ════ P9 · 收口金句 ════ -->
  720. <section class="screen" id="p9">
  721. <div class="s-wrap" style="text-align:center;">
  722. <div class="s-tag" style="letter-spacing:.3em;">TAKEAWAY</div>
  723. <div class="quote-line" style="margin-top:28px;">工具会过时,<br>把 AI 用成自己手脚的方法不会。</div>
  724. <p class="s-sub" style="margin:26px auto 0; max-width:64%;">王慧程 · 2026-09-11 ~ 2026-09-13<br>本报告由 skill-study-report 自动采集生成 · 全程可溯源</p>
  725. </div>
  726. </section>
  727. <script src="../lib/player/deck.js"></script>
  728. <script type="application/json" class="deck-config">
  729. {
  730. "case": "study-report",
  731. "page": { "id": "report", "title": "王慧程 · 学习复盘报告" },
  732. "chapters": [
  733. { "id": "p1", "file": "report.html", "title": "封面" },
  734. { "id": "p2", "file": "report.html", "title": "48h 数据全景" },
  735. { "id": "p2a", "file": "report.html", "title": "明细·会话全记录" },
  736. { "id": "p3", "file": "report.html", "title": "交付物墙" },
  737. { "id": "p3a", "file": "report.html", "title": "三大项目总览" },
  738. { "id": "p4", "file": "report.html", "title": "工作时刻线" },
  739. { "id": "p5", "file": "report.html", "title": "过去痛点" },
  740. { "id": "p6", "file": "report.html", "title": "两天感受" },
  741. { "id": "p7", "file": "report.html", "title": "未来方向" },
  742. { "id": "p8", "file": "report.html", "title": "数据附录" },
  743. { "id": "p8a", "file": "report.html", "title": "明细·文件清单" },
  744. { "id": "p8b", "file": "report.html", "title": "明细·产出物清单" },
  745. { "id": "p9", "file": "report.html", "title": "收口" }
  746. ]
  747. }
  748. </script>
  749. <script>
  750. window.SCREEN_TIMELINES = window.SCREEN_TIMELINES || {};
  751. function baseCtx(el) {
  752. return {
  753. el,
  754. q: function(s){ return el.querySelector(s); },
  755. qAll: function(s){ return el.querySelectorAll(s); },
  756. };
  757. }
  758. /* P1 封面 */
  759. SCREEN_TIMELINES['p1'] = function(ctx) {
  760. var tl = gsap.timeline();
  761. tl.from(ctx.q('.s-tag'), { autoAlpha:0, y:14, duration:.4, ease:'power2.out' })
  762. .from(ctx.q('.s-title'), { autoAlpha:0, y:26, duration:.6, ease:'power2.out' }, '-=.15')
  763. .from(ctx.q('.s-sub'), { autoAlpha:0, y:14, duration:.4 }, '-=.3')
  764. .from(ctx.qAll('.tag'), { autoAlpha:0, y:10, stagger:.07, duration:.35, ease:'back.out(1.4)' }, '-=.1');
  765. return tl;
  766. };
  767. /* P2 数据全景:数字动画 + 分布条 */
  768. SCREEN_TIMELINES['p2'] = function(ctx) {
  769. var tl = gsap.timeline();
  770. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  771. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  772. .from(ctx.qAll('.stat'), { autoAlpha:0, scale:.92, stagger:.09, duration:.4, ease:'back.out(1.2)' }, '-=.2');
  773. ctx.qAll('.stat .num').forEach(function(n, i) {
  774. var target = parseInt(n.textContent.replace(/[^\d]/g, ''), 10) || 0;
  775. var obj = { v: 0 };
  776. tl.to(obj, { v: target, duration:1.1, ease:'power2.out', onUpdate: function(){ n.textContent = Math.round(obj.v).toLocaleString(); } }, '-=.7');
  777. void i;
  778. });
  779. tl.from(ctx.qAll('.dist-row'), { autoAlpha:0, x:-18, stagger:.06, duration:.35 }, '-=.4');
  780. tl.from(ctx.qAll('.s-foot-tags .tag'), { autoAlpha:0, y:8, stagger:.08, duration:.3 }, '-=.2')
  781. .to({}, { duration:1.4 });
  782. return tl;
  783. };
  784. /* P3 交付物墙 */
  785. SCREEN_TIMELINES['p3'] = function(ctx) {
  786. var tl = gsap.timeline();
  787. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  788. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  789. .from(ctx.qAll('.w-card'), { autoAlpha:0, y:24, stagger:.08, duration:.45, ease:'power2.out' }, '-=.2')
  790. .to({}, { duration:1.2 });
  791. return tl;
  792. };
  793. /* P4 时刻线 */
  794. SCREEN_TIMELINES['p4'] = function(ctx) {
  795. var tl = gsap.timeline();
  796. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  797. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  798. .from(ctx.qAll('.tl-item'), { autoAlpha:0, x:-22, stagger:.12, duration:.4, ease:'power2.out' }, '-=.15')
  799. .to({}, { duration:1.2 });
  800. return tl;
  801. };
  802. /* 三问页共用 */
  803. function qTimeline(key, fade) {
  804. return function(ctx) {
  805. var tl = gsap.timeline();
  806. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  807. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  808. .from(ctx.q('.q-block'), { autoAlpha:0, x:fade ? 24 : -24, duration:.55, ease:'power2.out' }, '-=.2')
  809. .from(ctx.qAll('.q-ev .ev'), { autoAlpha:0, stagger:.08, duration:.3 }, '-=.25')
  810. .to({}, { duration:1.4 });
  811. return tl;
  812. };
  813. }
  814. SCREEN_TIMELINES['p5'] = qTimeline('p5', false);
  815. SCREEN_TIMELINES['p6'] = qTimeline('p6', true);
  816. SCREEN_TIMELINES['p7'] = qTimeline('p7', false);
  817. /* P8 附录 */
  818. SCREEN_TIMELINES['p8'] = function(ctx) {
  819. var tl = gsap.timeline();
  820. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  821. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  822. .from(ctx.qAll('.tbl tbody tr'), { autoAlpha:0, stagger:.03, duration:.25 }, '-=.2')
  823. .from(ctx.qAll('.s-foot-tags .tag'), { autoAlpha:0, y:8, stagger:.08, duration:.3 }, '-=.2')
  824. .to({}, { duration:1.2 });
  825. return tl;
  826. };
  827. /* P9 收口 */
  828. SCREEN_TIMELINES['p9'] = function(ctx) {
  829. var tl = gsap.timeline();
  830. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.4 })
  831. .from(ctx.q('.quote-line'), { autoAlpha:0, scale:.96, duration:.8, ease:'power2.out' }, '-=.1')
  832. .from(ctx.q('.s-sub'), { autoAlpha:0, y:14, duration:.5 }, '-=.3')
  833. .to({}, { duration:1.6 });
  834. return tl;
  835. };
  836. </script>
  837. <script>
  838. (function(){
  839. var played = {};
  840. function show(hash){
  841. if(!hash) hash = 'p1';
  842. document.querySelectorAll('.screen').forEach(function(s){
  843. s.style.display = (s.id === hash) ? 'flex' : 'none';
  844. });
  845. if(!played[hash] && typeof gsap !== 'undefined'){
  846. played[hash] = true;
  847. var fn = window.SCREEN_TIMELINES[hash];
  848. var el = document.getElementById(hash);
  849. if(fn && el) fn(baseCtx(el));
  850. }
  851. }
  852. /* 键盘翻页(本报告为单文件九屏,轻量自管;deck.js 兼容单 .screen 模式不冲突) */
  853. var order = ['p1','p2','p3','p4','p5','p6','p7','p8','p9'];
  854. function step(dir){
  855. var cur = order.indexOf((location.hash || '#p1').slice(1));
  856. var next = Math.min(order.length - 1, Math.max(0, cur + dir));
  857. location.hash = '#' + order[next];
  858. }
  859. window.addEventListener('hashchange', function(){ show(location.hash.slice(1)); });
  860. window.addEventListener('keydown', function(e){
  861. if(['ArrowDown','ArrowRight','PageDown',' '].includes(e.key)) { e.preventDefault(); step(1); }
  862. if(['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); step(-1); }
  863. });
  864. if(document.readyState === 'loading'){
  865. document.addEventListener('DOMContentLoaded', function(){ show(location.hash.slice(1) || 'p1'); });
  866. } else { show(location.hash.slice(1) || 'p1'); }
  867. })();
  868. </script>
  869. </body>
  870. </html>