report.html 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798
  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 场会话</span>
  65. <span class="tag ok">3 类工具协作</span>
  66. <span class="tag brand-2">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 · 会话</div>
  218. <div class="tl-text">用户消息 3 条 / 助手 96 条 / 工具调用 57 次 — 我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中
  219. 现在我们已经梳理清晰了这个选题技</div>
  220. </div>
  221. <div class="tl-item">
  222. <div class="tl-time">09-13 03:48 · Claude Code · 会话</div>
  223. <div class="tl-text">用户消息 1 条 / 助手 2 条 / 工具调用 0 次 — (会话无可读用户消息)</div>
  224. </div>
  225. <div class="tl-item">
  226. <div class="tl-time">09-13 03:06 · Claude Code · 会话</div>
  227. <div class="tl-text">用户消息 1 条 / 助手 24 条 / 工具调用 12 次 — 【给 FmodeStudio 的指令】
  228. 你将帮用户安装并激活「VOC 电商数据采集」技能。请自动完成,</div>
  229. </div>
  230. <div class="tl-item">
  231. <div class="tl-time">09-12 11:55 · Claude Code · 会话</div>
  232. <div class="tl-text">用户消息 5 条 / 助手 143 条 / 工具调用 101 次 — # 角色
  233. 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、加盟商、创</div>
  234. </div>
  235. <div class="tl-item">
  236. <div class="tl-time">09-12 11:24 · Claude Code · 会话</div>
  237. <div class="tl-text">用户消息 2 条 / 助手 70 条 / 工具调用 41 次 — AI落地场景选题挖掘教练|最终凝练提示词
  238. 角色:你是AI落地场景选题挖掘教练。你的目标:使用少量精简</div>
  239. </div>
  240. <div class="tl-item">
  241. <div class="tl-time">09-12 06:29 · Claude Code · 会话</div>
  242. <div class="tl-text">用户消息 32 条 / 助手 446 条 / 工具调用 333 次 — AI落地场景选题挖掘教练|最终凝练提示词
  243. 角色:你是AI落地场景选题挖掘教练。你的目标:使用少</div>
  244. </div>
  245. <div class="tl-item">
  246. <div class="tl-time">09-12 04:16 · Claude Code · 会话</div>
  247. <div class="tl-text">用户消息 4 条 / 助手 113 条 / 工具调用 70 次 — 请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</div>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="s-foot-tags">
  252. <span class="tag">按会话/文件真实 mtime 排序 · 摘取关键节点</span>
  253. </div>
  254. </div>
  255. </section>
  256. <!-- ════ P5 · 过去痛点(第一问) ════ -->
  257. <section class="screen" id="p5">
  258. <div class="s-wrap">
  259. <div class="s-tag" style="color:var(--brand-3);">第一问 · 过去</div>
  260. <h2 class="s-title">之前不够原生、不够性感的地方</h2>
  261. <div class="s-body">
  262. <div class="q-block q1">
  263. <div class="q-h">痛点与疑惑</div>
  264. <div class="q-a">企业AI落地最大的痛点是:只有AI的&quot;形&quot;(工具/提示词),没有AI的&quot;魂&quot;(系统/Harness/闭环/数据/人机协同)。不够原生是因为AI没有融入业务流程,不够性感是因为没有产生可衡量的业务价值。具体分为几点:
  265. 1. 点状使用:员工各自用工具,未嵌入业务流程,不成系统。
  266. 2. 只调提示词,不做Harness:AI无知识库、无规则、无工具链、无回流,输出不稳定。
  267. 3. 数据散乱:知识未清洗分类,AI检索到过期错误信息,一上真实场景就翻车。
  268. 4. 没有闭环:生成即结束,无人审核、无人使用、无人反馈,无法迭代进化。
  269. 5. 忽视人机协同:要么幻想全自动,要么只做重复劳动,未找到人与AI的分工最优解。</div>
  270. </div>
  271. </div>
  272. <div class="s-foot-tags">
  273. <span class="tag">用户口述 × 采集证据 关联</span>
  274. </div>
  275. </div>
  276. <div class="q-ev">
  277. <div class="ev">↳ 证据 [FILE] 产品研发助手:人工SOP→AI化流程重构(过去痛点对照的解法雏形):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\AI辅助产品研发SOP长页面.html</div>
  278. <div class="ev">↳ 证据 [URL] AI技能共享看板(在线·可嵌入):多Agent任务四态跟踪——闭环的系统化尝试:https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/dev/HddumFqtUs/index.html</div>
  279. </div>
  280. </section>
  281. <!-- ════ P6 · 两天感受(第二问) ════ -->
  282. <section class="screen" id="p6">
  283. <div class="s-wrap">
  284. <div class="s-tag">第二问 · 现在</div>
  285. <h2 class="s-title">这两天的感受与收获</h2>
  286. <div class="s-body">
  287. <div class="q-block q2">
  288. <div class="q-h">具体感受 · 有感觉的项目</div>
  289. <div class="q-a">一、总体感受
  290. 企业AI落地的核心,不是模型有多强,而是能否将成功经验封装为可复用的Skill,使其成为企业的长期资产。即使人员流动,经验和能力仍能被保留和传承。
  291. 二、最大收获:认清FDE的职责与定位
  292. 作为企业AI推动者,我深刻认识到:
  293. 职责无边界:AI落地遇阻时,不能止步于技术问题,而要主动推动业务融合。
  294. 能力复合化:FDE既要懂业务,也要懂技术,成为既懂商业又懂技术的企业操盘手。
  295. 护城河三要素:
  296. 懂AI能力边界(持续学习)
  297. 理性看待技术(不盲目追新)
  298. 懂企业真实业务与商业价值(能落地、能产出)
  299. 三、技术层面的进阶
  300. 从原来关注&quot;本地化部署&quot;,转向思考如何让AI高质量地把工作做完做好,包括流程设计、知识库建设、规则校验、结果回流等系统性方法。
  301. 四、最有感觉的项目:产品研发助手
  302. 在产品研发助手项目中,我已经成功搭建并跑出了完整的产品研发方案结果,对最终的产出非常满意。这个项目让我切实感受到:Skill不是纸上谈兵,是真的能落地、能出活儿、能创造价值的。</div>
  303. </div>
  304. </div>
  305. <div class="s-foot-tags">
  306. <span class="tag ok">成果已从采集自动带入 · 本页只讲感受</span>
  307. </div>
  308. </div>
  309. <div class="q-ev">
  310. <div class="ev">↳ 证据 [FILE] 产品研发助手·配方推荐与调测报告(最有感觉的项目核心产出):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\新品配方推荐与调测报告_首次实跑.html</div>
  311. <div class="ev">↳ 证据 [FILE] 产品研发助手·AI落地场景选题清单(14场景):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\产品研发助手\AI落地场景选题清单.html</div>
  312. <div class="ev">↳ 证据 [FILE] CAPABILITY-MAP:19+技能的能力资产化沉淀(Skill=长期资产的实证):C:\Users\Administrator\.claude\skills\CAPABILITY-MAP.md</div>
  313. </div>
  314. </section>
  315. <!-- ════ P7 · 未来方向(第三问) ════ -->
  316. <section class="screen" id="p7">
  317. <div class="s-wrap">
  318. <div class="s-tag" style="color:var(--brand-2);">第三问 · 未来</div>
  319. <h2 class="s-title">想回企业落地或探索的方向</h2>
  320. <div class="s-body">
  321. <div class="q-block q3">
  322. <div class="q-h">未来畅想</div>
  323. <div class="q-a">未来落地三个方向
  324. 方向一:产品研发助手本地化部署
  325. 目标:将产品研发助手落地为本地化部署方案
  326. 行动:与业务端协同,建立知识库SOP,并将整个流程AI化
  327. 价值:让产品研发从&quot;人肉驱动&quot;转向&quot;AI系统驱动&quot;,提升效率与可复制性
  328. 方向二:辅销工具助手的标杆复制
  329. 策略:先集中资源打造1个产品的完整标杆案例(话术→海报→PPT全链路)
  330. 路径:跑通一个完整的Skill闭环,验证可行后再逐步复制到其他产品和项目中
  331. 原则:不贪多、不求快,先扎深一个点
  332. 方向三:团队协作与项目组搭建
  333. 理念:成功的项目离不开团队协作
  334. 行动:主动与技术、业务协同,搭建正式项目组
  335. 分工:已搭建的场景应用持续优化,未搭建的场景协同完成搭建
  336. 目标:形成可持续运转的AI落地协作机制</div>
  337. </div>
  338. </div>
  339. <div class="s-foot-tags">
  340. <span class="tag brand-2">从个人工具箱 → 企业原生 AI 落地</span>
  341. </div>
  342. </div>
  343. <div class="q-ev">
  344. <div class="ev">↳ 证据 [FILE] 辅销工具助手·铁观音一页纸(标杆复制方向的已有起点):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\辅销工具助手\铁观音产品一页纸.pdf</div>
  345. <div class="ev">↳ 证据 [FILE] 数据分析助手·9月销售分析报告(团队协同可复用的分析SOP产出):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\数据分析助手\04-输出成果\9月销售过程管理分析报告-对比8月案例</div>
  346. <div class="ev">↳ 证据 [FILE] 数据分析助手·数据字典与处理规则(知识库SOP的雏形):D:\昆山速品\01 公司学习资料\2026.9.12 混沌AI高级产品经理\demo搭建\数据分析助手\数据字典与处理规则.md</div>
  347. </div>
  348. </section>
  349. <!-- ════ P8 · 数据附录 ════ -->
  350. <section class="screen" id="p8">
  351. <div class="s-wrap">
  352. <div class="s-tag">附录 · 可溯源明细</div>
  353. <h2 class="s-title">数据附录</h2>
  354. <div class="s-body">
  355. <table class="tbl">
  356. <thead><tr><th style="width:110px;">时间</th><th style="width:90px;">来源</th><th>摘要</th><th style="width:180px;">路径 / URL</th></tr></thead>
  357. <tbody>
  358. <tr>
  359. <td class="mono">09-13 06:23</td>
  360. <td>Claude Code</td>
  361. <td>用户消息 3 条 / 助手 96 条 / 工具调用 57 次 — 我现在需要搭建“数据分析助手”项目,请将所有过程数据归集到该项目中
  362. 现在我们已经梳理清晰了这</td>
  363. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo---------\132e3724-b988-40f6-b088-db44cc40e959.jsonl</td>
  364. </tr>
  365. <tr>
  366. <td class="mono">09-13 03:48</td>
  367. <td>Claude Code</td>
  368. <td>用户消息 1 条 / 助手 2 条 / 工具调用 0 次 — (会话无可读用户消息)</td>
  369. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\f596cd37-6dab-4319-8f04-1304e85f7d52.jsonl</td>
  370. </tr>
  371. <tr>
  372. <td class="mono">09-13 03:06</td>
  373. <td>Claude Code</td>
  374. <td>用户消息 1 条 / 助手 24 条 / 工具调用 12 次 — 【给 FmodeStudio 的指令】
  375. 你将帮用户安装并激活「VOC 电商数据采集」技能。请自</td>
  376. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\a1a40acc-f15a-4173-9a8e-d28c93bf4b94.jsonl</td>
  377. </tr>
  378. <tr>
  379. <td class="mono">09-12 11:55</td>
  380. <td>Claude Code</td>
  381. <td>用户消息 5 条 / 助手 143 条 / 工具调用 101 次 — # 角色
  382. 你是专业的电商详情页与营销海报生成助手,专注为茶饮、咖啡、餐饮等行业的品牌方、加</td>
  383. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\78ff3c9a-97a1-42f2-a0d6-83f30cbd573a.jsonl</td>
  384. </tr>
  385. <tr>
  386. <td class="mono">09-12 11:24</td>
  387. <td>Claude Code</td>
  388. <td>用户消息 2 条 / 助手 70 条 / 工具调用 41 次 — AI落地场景选题挖掘教练|最终凝练提示词
  389. 角色:你是AI落地场景选题挖掘教练。你的目标:使用</td>
  390. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\aeae25c7-a288-47f3-9b27-67717ee7891a.jsonl</td>
  391. </tr>
  392. <tr>
  393. <td class="mono">09-12 06:29</td>
  394. <td>Claude Code</td>
  395. <td>用户消息 32 条 / 助手 446 条 / 工具调用 333 次 — AI落地场景选题挖掘教练|最终凝练提示词
  396. 角色:你是AI落地场景选题挖掘教练。你的目标</td>
  397. <td class="mono">C:\Users\Administrator\.claude\projects\D-------01--------2026-9-12---AI-------demo--\9d7a3df0-c2f9-4df1-a2ee-603b248c745e.jsonl</td>
  398. </tr>
  399. <tr>
  400. <td class="mono">09-12 04:16</td>
  401. <td>Claude Code</td>
  402. <td>用户消息 4 条 / 助手 113 条 / 工具调用 70 次 — 请检查本地 hermes 企微机器人配置 并 用企业微信让hermes和我发消息</td>
  403. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\a655818f-3fb3-4f9a-9af1-651ae8800289.jsonl</td>
  404. </tr>
  405. <tr>
  406. <td class="mono">09-12 03:57</td>
  407. <td>Claude Code</td>
  408. <td>用户消息 2 条 / 助手 105 条 / 工具调用 90 次 — 请把以下内容作为你在当前企业微信机器人中的长期执行规则。你是绑定在企业微信中的 Hermes</td>
  409. <td class="mono">C:\Users\Administrator\.claude\projects\C--Users-Administrator\feeddcc1-03d9-4081-89d4-a008eed66215.jsonl</td>
  410. </tr>
  411. <tr>
  412. <td class="mono">09-12 08:06</td>
  413. <td>WorkBuddy</td>
  414. <td>.connectors-marketplace.meta.json(0KB)</td>
  415. <td class="mono">C:\Users\Administrator\.workbuddy\.connectors-marketplace.meta.json</td>
  416. </tr>
  417. <tr>
  418. <td class="mono">09-12 05:28</td>
  419. <td>WorkBuddy</td>
  420. <td>app-config.json(0KB)</td>
  421. <td class="mono">C:\Users\Administrator\.workbuddy\app\app-config.json</td>
  422. </tr>
  423. <tr>
  424. <td class="mono">09-13 05:28</td>
  425. <td>WorkBuddy</td>
  426. <td>expert-bundle-map.json(0KB)</td>
  427. <td class="mono">C:\Users\Administrator\.workbuddy\app\cache\experts\expert-bundle-map.json</td>
  428. </tr>
  429. <tr>
  430. <td class="mono">09-13 07:26</td>
  431. <td>WorkBuddy</td>
  432. <td>polling-lease-Administrator.json(0KB)</td>
  433. <td class="mono">C:\Users\Administrator\.workbuddy\app\memory\polling-lease-Administrator.json</td>
  434. </tr>
  435. <tr>
  436. <td class="mono">09-12 05:28</td>
  437. <td>WorkBuddy</td>
  438. <td>renderer-version.json(0KB)</td>
  439. <td class="mono">C:\Users\Administrator\.workbuddy\app\renderer-version.json</td>
  440. </tr>
  441. <tr>
  442. <td class="mono">09-12 07:58</td>
  443. <td>WorkBuddy</td>
  444. <td>000006.log(89KB)</td>
  445. <td class="mono">C:\Users\Administrator\.workbuddy\app\session\Session Storage\000006.log</td>
  446. </tr>
  447. </tbody>
  448. </table>
  449. </div>
  450. <div class="s-foot-tags">
  451. <span class="tag">共 230 条采集 · 本页展示前 14 条</span>
  452. <span class="tag">完整清单见 report-data.json</span>
  453. </div>
  454. </div>
  455. </section>
  456. <!-- ════ p8b · 明细 · 关键产出物清单(业务交付) ════ -->
  457. <section class="screen" id="p8b">
  458. <div class="s-wrap">
  459. <div class="s-tag">附录 B · 产出物级明细</div>
  460. <h2 class="s-title">明细 · 关键产出物清单(业务交付)</h2>
  461. <div class="s-body">
  462. <table class="tbl">
  463. <thead><tr><th style="width:56px">类型</th><th style="width:130px">所属项目</th><th>产出物</th></tr></thead>
  464. <tbody>
  465. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>技能说明书-数据分析助手.md</td></tr>
  466. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>数据字典与处理规则.md</td></tr>
  467. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">数据分析助手</td><td>自检报告.md</td></tr>
  468. <tr><td class="mono" style="width:56px">PY</td><td style="width:130px">数据分析助手</td><td>扣分计算.py</td></tr>
  469. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">数据分析助手</td><td>9月销售过程管理分析报告-对比8月案例.html</td></tr>
  470. <tr><td class="mono" style="width:56px">PDF</td><td style="width:130px">辅销工具助手</td><td>铁观音产品一页纸.pdf</td></tr>
  471. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>铁观音产品一页纸_优化重构版.md</td></tr>
  472. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>铁观音_多平台物料设计方案.md</td></tr>
  473. <tr><td class="mono" style="width:56px">MD</td><td style="width:130px">辅销工具助手</td><td>电商物料通用生成模板.md</td></tr>
  474. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>AI落地场景选题清单.html</td></tr>
  475. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>AI辅助产品研发SOP长页面.html</td></tr>
  476. <tr><td class="mono" style="width:56px">HTML</td><td style="width:130px">demo搭建</td><td>新品配方推荐与调测报告_首次实跑.html</td></tr>
  477. <tr><td class="mono" style="width:56px">PPTX</td><td style="width:130px">桌面</td><td>速品食品AI应用实践-2026.9.15.pptx</td></tr>
  478. </tbody>
  479. </table>
  480. </div>
  481. <div class="s-foot-tags">
  482. <span class="tag">数据源:本机采集 report-data.json · 全部可溯源</span>
  483. </div>
  484. </div>
  485. </section>
  486. <!-- ════ p8a · 明细 · 工作区文件全清单(22 个) ════ -->
  487. <section class="screen" id="p8a">
  488. <div class="s-wrap">
  489. <div class="s-tag">附录 A · 文件级明细</div>
  490. <h2 class="s-title">明细 · 工作区文件全清单(22 个)</h2>
  491. <div class="s-body">
  492. <table class="tbl">
  493. <thead><tr><th style="width:90px;">时间</th><th style="width:190px;">分组</th><th>文件名</th></tr></thead>
  494. <tbody>
  495. <tr>
  496. <td class="mono">09-13 06:21</td>
  497. <td><b>业务素材(WPS 云同步)(21)</b></td>
  498. <td>外勤数据导出表(CRM系统)(2026-09-07~2026-09-13).xlsx</td>
  499. </tr>
  500. <tr>
  501. <td class="mono">09-13 06:20</td>
  502. <td></td>
  503. <td>外勤次数报表(OA系统)9月7~9月13日.xlsx</td>
  504. </tr>
  505. <tr>
  506. <td class="mono">09-13 05:58</td>
  507. <td></td>
  508. <td>商机对象导出结果_20260913135557147.xlsx</td>
  509. </tr>
  510. <tr>
  511. <td class="mono">09-13 05:56</td>
  512. <td></td>
  513. <td>商机对象导出结果_20260913135557147.xlsx</td>
  514. </tr>
  515. <tr>
  516. <td class="mono">09-13 05:53</td>
  517. <td></td>
  518. <td>销售动作达成率(含部门)_2026-09-13-最新.xlsx</td>
  519. </tr>
  520. <tr>
  521. <td class="mono">09-13 05:50</td>
  522. <td></td>
  523. <td>销售动作达成率(含部门)_2026-09-13 13_25.xlsx</td>
  524. </tr>
  525. <tr>
  526. <td class="mono">09-13 05:27</td>
  527. <td></td>
  528. <td>8月速品销售过程管理月报 - 2026.9.6(1).pdf</td>
  529. </tr>
  530. <tr>
  531. <td class="mono">09-13 02:03</td>
  532. <td></td>
  533. <td>销售动作达成率(含部门)_2026-09-13 10_03.xlsx</td>
  534. </tr>
  535. <tr>
  536. <td class="mono">09-13 01:18</td>
  537. <td></td>
  538. <td>铁观音产品营销物料_图文展示版.pptx</td>
  539. </tr>
  540. <tr>
  541. <td class="mono">09-12 08:35</td>
  542. <td></td>
  543. <td>产品清单.xlsx</td>
  544. </tr>
  545. <tr>
  546. <td class="mono">09-12 07:26</td>
  547. <td></td>
  548. <td>现代茶饮测评模板.pptx</td>
  549. </tr>
  550. <tr>
  551. <td class="mono">09-12 07:26</td>
  552. <td></td>
  553. <td>研发样品库.xlsx</td>
  554. </tr>
  555. <tr>
  556. <td class="mono">09-12 07:25</td>
  557. <td></td>
  558. <td>现制茶饮产品研发测评模板.pptx</td>
  559. </tr>
  560. <tr>
  561. <td class="mono">09-12 07:25</td>
  562. <td></td>
  563. <td>研发样品库.xlsx</td>
  564. </tr>
  565. <tr>
  566. <td class="mono">09-12 07:13</td>
  567. <td></td>
  568. <td>AI辅助茶叶研发系统需求痛点总结.docx</td>
  569. </tr>
  570. <tr>
  571. <td class="mono">09-12 02:42</td>
  572. <td></td>
  573. <td>03-课前准备-场景选择说明与业务资料清单.docx</td>
  574. </tr>
  575. <tr>
  576. <td class="mono">09-12 02:42</td>
  577. <td></td>
  578. <td>02-课前准备-场景可行性速查表.docx</td>
  579. </tr>
  580. <tr>
  581. <td class="mono">09-12 01:37</td>
  582. <td></td>
  583. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票(2).docx</td>
  584. </tr>
  585. <tr>
  586. <td class="mono">09-12 01:34</td>
  587. <td></td>
  588. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票.docx</td>
  589. </tr>
  590. <tr>
  591. <td class="mono">09-12 01:25</td>
  592. <td></td>
  593. <td>A20260206-01合昆速品1#楼1F2F新增电源及给排水改造施工-含发票.pdf</td>
  594. </tr>
  595. <tr>
  596. <td class="mono">09-12 00:54</td>
  597. <td></td>
  598. <td>速品食品AI应用实践-2026.9.15.pptx</td>
  599. </tr>
  600. <tr>
  601. <td class="mono">09-12 00:54</td>
  602. <td><b>桌面产出(1)</b></td>
  603. <td>速品食品AI应用实践-2026.9.15.pptx</td>
  604. </tr>
  605. </tbody>
  606. </table>
  607. </div>
  608. <div class="s-foot-tags">
  609. <span class="tag">数据源:本机采集 report-data.json · 全部可溯源</span>
  610. </div>
  611. </div>
  612. </section>
  613. <!-- ════ P9 · 收口金句 ════ -->
  614. <section class="screen" id="p9">
  615. <div class="s-wrap" style="text-align:center;">
  616. <div class="s-tag" style="letter-spacing:.3em;">TAKEAWAY</div>
  617. <div class="quote-line" style="margin-top:28px;">工具会过时,<br>把 AI 用成自己手脚的方法不会。</div>
  618. <p class="s-sub" style="margin:26px auto 0; max-width:64%;">王慧程 · 2026-09-11 ~ 2026-09-13<br>本报告由 skill-study-report 自动采集生成 · 全程可溯源</p>
  619. </div>
  620. </section>
  621. <script src="../lib/player/deck.js"></script>
  622. <script type="application/json" class="deck-config">
  623. {
  624. "case": "study-report",
  625. "page": { "id": "report", "title": "王慧程 · 学习复盘报告" },
  626. "chapters": [
  627. { "id": "p1", "file": "report.html", "title": "封面" },
  628. { "id": "p2", "file": "report.html", "title": "48h 数据全景" },
  629. { "id": "p2a", "file": "report.html", "title": "明细·会话全记录" },
  630. { "id": "p3", "file": "report.html", "title": "交付物墙" },
  631. { "id": "p4", "file": "report.html", "title": "时刻线" },
  632. { "id": "p5", "file": "report.html", "title": "过去痛点" },
  633. { "id": "p6", "file": "report.html", "title": "两天感受" },
  634. { "id": "p7", "file": "report.html", "title": "未来方向" },
  635. { "id": "p8", "file": "report.html", "title": "数据附录" },
  636. { "id": "p8a", "file": "report.html", "title": "明细·文件清单" },
  637. { "id": "p8b", "file": "report.html", "title": "明细·产出物清单" },
  638. { "id": "p9", "file": "report.html", "title": "收口" }
  639. ]
  640. }
  641. </script>
  642. <script>
  643. window.SCREEN_TIMELINES = window.SCREEN_TIMELINES || {};
  644. function baseCtx(el) {
  645. return {
  646. el,
  647. q: function(s){ return el.querySelector(s); },
  648. qAll: function(s){ return el.querySelectorAll(s); },
  649. };
  650. }
  651. /* P1 封面 */
  652. SCREEN_TIMELINES['p1'] = function(ctx) {
  653. var tl = gsap.timeline();
  654. tl.from(ctx.q('.s-tag'), { autoAlpha:0, y:14, duration:.4, ease:'power2.out' })
  655. .from(ctx.q('.s-title'), { autoAlpha:0, y:26, duration:.6, ease:'power2.out' }, '-=.15')
  656. .from(ctx.q('.s-sub'), { autoAlpha:0, y:14, duration:.4 }, '-=.3')
  657. .from(ctx.qAll('.tag'), { autoAlpha:0, y:10, stagger:.07, duration:.35, ease:'back.out(1.4)' }, '-=.1');
  658. return tl;
  659. };
  660. /* P2 数据全景:数字动画 + 分布条 */
  661. SCREEN_TIMELINES['p2'] = function(ctx) {
  662. var tl = gsap.timeline();
  663. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  664. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  665. .from(ctx.qAll('.stat'), { autoAlpha:0, scale:.92, stagger:.09, duration:.4, ease:'back.out(1.2)' }, '-=.2');
  666. ctx.qAll('.stat .num').forEach(function(n, i) {
  667. var target = parseInt(n.textContent.replace(/[^\d]/g, ''), 10) || 0;
  668. var obj = { v: 0 };
  669. tl.to(obj, { v: target, duration:1.1, ease:'power2.out', onUpdate: function(){ n.textContent = Math.round(obj.v).toLocaleString(); } }, '-=.7');
  670. void i;
  671. });
  672. tl.from(ctx.qAll('.dist-row'), { autoAlpha:0, x:-18, stagger:.06, duration:.35 }, '-=.4');
  673. tl.from(ctx.qAll('.s-foot-tags .tag'), { autoAlpha:0, y:8, stagger:.08, duration:.3 }, '-=.2')
  674. .to({}, { duration:1.4 });
  675. return tl;
  676. };
  677. /* P3 交付物墙 */
  678. SCREEN_TIMELINES['p3'] = function(ctx) {
  679. var tl = gsap.timeline();
  680. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  681. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  682. .from(ctx.qAll('.w-card'), { autoAlpha:0, y:24, stagger:.08, duration:.45, ease:'power2.out' }, '-=.2')
  683. .to({}, { duration:1.2 });
  684. return tl;
  685. };
  686. /* P4 时刻线 */
  687. SCREEN_TIMELINES['p4'] = function(ctx) {
  688. var tl = gsap.timeline();
  689. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  690. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  691. .from(ctx.qAll('.tl-item'), { autoAlpha:0, x:-22, stagger:.12, duration:.4, ease:'power2.out' }, '-=.15')
  692. .to({}, { duration:1.2 });
  693. return tl;
  694. };
  695. /* 三问页共用 */
  696. function qTimeline(key, fade) {
  697. return function(ctx) {
  698. var tl = gsap.timeline();
  699. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  700. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  701. .from(ctx.q('.q-block'), { autoAlpha:0, x:fade ? 24 : -24, duration:.55, ease:'power2.out' }, '-=.2')
  702. .from(ctx.qAll('.q-ev .ev'), { autoAlpha:0, stagger:.08, duration:.3 }, '-=.25')
  703. .to({}, { duration:1.4 });
  704. return tl;
  705. };
  706. }
  707. SCREEN_TIMELINES['p5'] = qTimeline('p5', false);
  708. SCREEN_TIMELINES['p6'] = qTimeline('p6', true);
  709. SCREEN_TIMELINES['p7'] = qTimeline('p7', false);
  710. /* P8 附录 */
  711. SCREEN_TIMELINES['p8'] = function(ctx) {
  712. var tl = gsap.timeline();
  713. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.3 })
  714. .from(ctx.q('.s-title'), { autoAlpha:0, y:22, duration:.5 }, '-=.1')
  715. .from(ctx.qAll('.tbl tbody tr'), { autoAlpha:0, stagger:.03, duration:.25 }, '-=.2')
  716. .from(ctx.qAll('.s-foot-tags .tag'), { autoAlpha:0, y:8, stagger:.08, duration:.3 }, '-=.2')
  717. .to({}, { duration:1.2 });
  718. return tl;
  719. };
  720. /* P9 收口 */
  721. SCREEN_TIMELINES['p9'] = function(ctx) {
  722. var tl = gsap.timeline();
  723. tl.from(ctx.q('.s-tag'), { autoAlpha:0, duration:.4 })
  724. .from(ctx.q('.quote-line'), { autoAlpha:0, scale:.96, duration:.8, ease:'power2.out' }, '-=.1')
  725. .from(ctx.q('.s-sub'), { autoAlpha:0, y:14, duration:.5 }, '-=.3')
  726. .to({}, { duration:1.6 });
  727. return tl;
  728. };
  729. </script>
  730. <script>
  731. (function(){
  732. var played = {};
  733. function show(hash){
  734. if(!hash) hash = 'p1';
  735. document.querySelectorAll('.screen').forEach(function(s){
  736. s.style.display = (s.id === hash) ? 'flex' : 'none';
  737. });
  738. if(!played[hash] && typeof gsap !== 'undefined'){
  739. played[hash] = true;
  740. var fn = window.SCREEN_TIMELINES[hash];
  741. var el = document.getElementById(hash);
  742. if(fn && el) fn(baseCtx(el));
  743. }
  744. }
  745. /* 键盘翻页(本报告为单文件九屏,轻量自管;deck.js 兼容单 .screen 模式不冲突) */
  746. var order = ['p1','p2','p3','p4','p5','p6','p7','p8','p9'];
  747. function step(dir){
  748. var cur = order.indexOf((location.hash || '#p1').slice(1));
  749. var next = Math.min(order.length - 1, Math.max(0, cur + dir));
  750. location.hash = '#' + order[next];
  751. }
  752. window.addEventListener('hashchange', function(){ show(location.hash.slice(1)); });
  753. window.addEventListener('keydown', function(e){
  754. if(['ArrowDown','ArrowRight','PageDown',' '].includes(e.key)) { e.preventDefault(); step(1); }
  755. if(['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); step(-1); }
  756. });
  757. if(document.readyState === 'loading'){
  758. document.addEventListener('DOMContentLoaded', function(){ show(location.hash.slice(1) || 'p1'); });
  759. } else { show(location.hash.slice(1) || 'p1'); }
  760. })();
  761. </script>
  762. </body>
  763. </html>