index.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!doctype html><html lang="zh"><head><meta charset="utf-8">
  2. <meta name="viewport" content="width=device-width,initial-scale=1">
  3. <title>对照卡索引 · 理论↔代码对应</title><style>
  4. :root{--fg:#1a1a1a;--bg:#fff;--mut:#666;--line:#e3e3e3;--accent:#3b5bdb;
  5. --codebg:#f6f8fa;--warn:#b00020;--okbg:#eef4ff;--formalbg:#f3f0ff;--conceptbg:#fbfbf9;}
  6. *{box-sizing:border-box}
  7. body{font:15px/1.65 -apple-system,"PingFang SC",Segoe UI,Roboto,sans-serif;
  8. color:var(--fg);background:var(--bg);margin:0;padding:0}
  9. a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
  10. .wrap{max-width:1180px;margin:0 auto;padding:28px 22px 80px}
  11. header.top{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
  12. header.top h1{margin:0 0 4px;font-size:20px}
  13. .sub{color:var(--mut);font-size:13px}
  14. .crumbs{font-size:13px;margin-bottom:18px}.crumbs a{color:var(--mut)}
  15. .badge{display:inline-block;font-size:12px;background:var(--okbg);color:var(--accent);
  16. border-radius:4px;padding:1px 8px;margin-right:6px}
  17. h2.ctitle{font-size:19px;margin:6px 0 4px}
  18. .keypoint{background:#fff8e6;border-left:3px solid #e6a700;padding:10px 14px;
  19. border-radius:4px;margin:14px 0;font-size:14px}
  20. .cols{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px;margin:22px 0}
  21. .col{border:1px solid var(--line);border-radius:8px;padding:14px 16px;min-width:0}
  22. .col h3{margin:0 0 10px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
  23. .col.concept{background:var(--conceptbg)}
  24. .col.formal{background:var(--formalbg)}
  25. .col p{margin:0 0 10px;white-space:pre-wrap;font-size:14px}
  26. .anchor{margin:0 0 16px}
  27. .anchor .meta{font-size:12px;color:var(--mut);margin-bottom:4px}
  28. .anchor .meta code{background:var(--codebg);padding:1px 5px;border-radius:3px}
  29. pre{background:var(--codebg);border:1px solid var(--line);border-radius:6px;
  30. overflow:auto;margin:0 0 6px;padding:10px 0;font-size:12px;line-height:1.5}
  31. pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;display:block}
  32. .ln{display:flex}.ln .n{color:#aaa;text-align:right;width:46px;padding:0 10px;
  33. user-select:none;flex:none}.ln .c{white-space:pre;padding-right:14px}
  34. .note{font-size:12.5px;color:var(--mut);margin:0 0 14px}
  35. .warn{color:var(--warn);background:#fff0f0;border:1px solid #ffd0d0;border-radius:6px;
  36. padding:8px 12px;font-size:13px}
  37. .kv{font-size:13px}.kv code{background:var(--codebg);padding:1px 5px;border-radius:3px}
  38. .formal .term{font-family:ui-monospace,Menlo,monospace;background:#fff;border:1px solid var(--line);
  39. border-radius:5px;padding:8px 10px;font-size:13px;margin-bottom:8px;word-break:break-word}
  40. .effect{font-family:ui-monospace,Menlo,monospace;color:#7048e8;font-size:13px;margin-bottom:8px}
  41. .trace{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:22px 0;background:#fafafa}
  42. .trace h3{margin:0 0 10px;font-size:14px}
  43. .stat{display:inline-block;margin:0 18px 6px 0;font-size:13px}
  44. .stat b{font-size:17px;color:var(--accent)}
  45. .toolchip{display:inline-block;background:#eef;border:1px solid #dde;border-radius:12px;
  46. padding:1px 9px;margin:0 6px 6px 0;font-size:12px}
  47. .takeaway{background:var(--okbg);border-radius:8px;padding:14px 18px;margin:22px 0;
  48. white-space:pre-wrap;font-size:14px}
  49. .rel a{margin-right:14px;font-size:13px}
  50. table.idx{border-collapse:collapse;width:100%;margin-top:8px}
  51. table.idx td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top}
  52. table.idx .wk{color:var(--mut);font-size:13px;width:64px;white-space:nowrap}
  53. .modhdr{margin:26px 0 4px;font-size:15px;color:var(--accent)}
  54. footer{margin-top:50px;color:var(--mut);font-size:12px;border-top:1px solid var(--line);padding-top:14px}
  55. @media(max-width:900px){.cols{grid-template-columns:1fr}}
  56. </style></head><body><div class="wrap">
  57. <header class="top"><h1>智能体:理论 ↔ 代码 对照卡</h1>
  58. <div class="sub">每张卡三栏对照:教科书概念 │ 平台源码落点(实时读仓库) │ 形式化对象。
  59. 共 4 张卡。</div></header>
  60. <div class="modhdr">A · 智能体即解释器</div><table class="idx"><tr><td class="wk">第 2 周</td><td><a href="tool-claude-code-native.html"><b>工具调用范式③:claude-code 原生车道(把工具调用外包给运行时)</b></a><div class="note">单体工作区助手套进 react-over-text 全是成本没收益(实测 76 调用 0 执行); 正解是开第二条车道:直接原生跑 claude-code,native 工具开、流式事件映射回平台 SSE。
  61. </div></td></tr><tr><td class="wk">第 2 周</td><td><a href="tool-native-fc.html"><b>工具调用范式②:原生 function-calling(结构化 tool_calls)</b></a><div class="note">原生 FC 把工具调用从&quot;文本 + 正则&quot;提升为&quot;结构化 + schema 校验&quot;,从根上消除了 格式飘移与 path/file_path 不一致。它应当作主车道,react-over-text 退为 fallback。
  62. </div></td></tr><tr><td class="wk">第 2 周</td><td><a href="tool-react-over-text.html"><b>工具调用范式①:react-over-text(把工具调用当散文手写 JSON)</b></a><div class="note">react-over-text 把工具调用降格成&quot;生成文本 → 正则解析 JSON&quot;,是 0 执行 / 格式飘移 / path-vs-file_path 不一致的总根源。它适合做 fallback,不该当主车道。
  63. </div></td></tr></table><div class="modhdr">C · 安全、编排与产物</div><table class="idx"><tr><td class="wk">第 8 周</td><td><a href="sandbox-effect-cap.html"><b>硬沙箱:把&#x27;写文件&#x27;这一 effect 限制在能力边界内</b></a><div class="note">prompt 约束挡不住模型(实测它把 5 次 WriteFile 全写到 F 之外、还跑偏续跑别人的研究); 必须工具层硬拦。只拦写不拦读;Bash 靠 CWD + dangerousCommandBlock(shell 无法工具层硬沙箱)。
  64. </div></td></tr></table>
  65. <footer>由 <code>teaching/gen.py</code> 生成 · 卡片源: <code>teaching/cards/*.yml</code></footer>
  66. </div></body></html>