-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
732 lines (675 loc) · 41.7 KB
/
index.html
File metadata and controls
732 lines (675 loc) · 41.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code 源码深度解析 — 可视化学习手册</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0d1117;--surface:#161b22;--surface2:#21262d;--border:#30363d;
--text:#e6edf3;--text2:#8b949e;--accent:#58a6ff;--accent2:#1f6feb;
--green:#3fb950;--orange:#d29922;--red:#f85149;--purple:#bc8cff;
--cyan:#39d353;
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text2)}
/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(88,166,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(188,140,255,.06) 0%,transparent 50%);animation:bgShift 15s ease-in-out infinite alternate}
@keyframes bgShift{0%{transform:translate(0,0)}100%{transform:translate(-5%,3%)}}
.hero h1{font-size:clamp(2rem,6vw,4rem);font-weight:800;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;position:relative}
.hero .subtitle{font-size:clamp(1rem,2.5vw,1.4rem);color:var(--text2);max-width:700px;margin-bottom:2rem;position:relative}
.hero .stats{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem;position:relative}
.stat{text-align:center}
.stat .num{font-size:2rem;font-weight:700;color:var(--accent)}
.stat .label{font-size:.85rem;color:var(--text2)}
.cta{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:var(--accent2);color:#fff;border-radius:8px;font-size:1.1rem;font-weight:600;transition:all .2s;position:relative;cursor:pointer;border:none}
.cta:hover{background:var(--accent);text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 20px rgba(88,166,255,.3)}
/* Main layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
/* Architecture */
.arch-section{padding:5rem 0}
.section-title{font-size:2rem;font-weight:700;margin-bottom:.5rem;text-align:center}
.section-sub{color:var(--text2);text-align:center;margin-bottom:3rem;font-size:1.05rem}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}
.arch-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:all .3s}
.arch-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.arch-card .icon{font-size:2rem;margin-bottom:.75rem}
.arch-card h3{font-size:1.15rem;margin-bottom:.5rem}
.arch-card p{color:var(--text2);font-size:.9rem;line-height:1.6}
/* Flow diagram */
.flow-diagram{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.5rem;margin:2rem 0;overflow-x:auto}
.flow-diagram pre{font-family:'SF Mono','Fira Code',monospace;font-size:.82rem;line-height:1.5;color:var(--cyan);white-space:pre;overflow-x:auto}
/* Chapter navigation */
.chapters-section{padding:5rem 0}
.chapter-track{position:relative;padding-left:3rem}
.chapter-track::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--purple),var(--green))}
.chapter-group{margin-bottom:3rem}
.chapter-group-title{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;padding-left:.5rem;display:flex;align-items:center;gap:.75rem}
.chapter-group-title .badge{font-size:.7rem;padding:.2rem .6rem;border-radius:20px;font-weight:600}
.badge-core{background:rgba(88,166,255,.15);color:var(--accent)}
.badge-prompt{background:rgba(188,140,255,.15);color:var(--purple)}
.chapter-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:.75rem;overflow:hidden;transition:all .3s;cursor:pointer}
.chapter-item:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.chapter-item.active .ch-body{max-height:800px;padding:0 1.25rem 1.25rem}
.chapter-item.active{border-color:var(--accent)}
.ch-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;user-select:none}
.ch-dot{position:absolute;left:8px;width:14px;height:14px;border-radius:50%;background:var(--surface2);border:2px solid var(--border);transition:all .3s;z-index:1}
.chapter-item:hover .ch-dot,.chapter-item.active .ch-dot{background:var(--accent);border-color:var(--accent)}
.ch-num{font-size:.75rem;font-weight:700;color:var(--text2);min-width:24px}
.ch-title{font-weight:600;flex:1}
.ch-diff{font-size:.7rem;padding:.15rem .5rem;border-radius:10px;font-weight:600}
.diff-入门{background:rgba(63,185,80,.15);color:var(--green)}
.diff-基础{background:rgba(63,185,80,.15);color:var(--green)}
.diff-核心{background:rgba(88,166,255,.15);color:var(--accent)}
.diff-进阶{background:rgba(210,153,34,.15);color:var(--orange)}
.diff-高级{background:rgba(248,81,73,.15);color:var(--red)}
.diff-总结{background:rgba(188,140,255,.15);color:var(--purple)}
.diff-导读{background:rgba(188,140,255,.15);color:var(--purple)}
.diff-精华{background:rgba(210,153,34,.15);color:var(--orange)}
.ch-arrow{color:var(--text2);transition:transform .3s;font-size:.8rem}
.chapter-item.active .ch-arrow{transform:rotate(90deg)}
.ch-body{max-height:0;overflow:hidden;transition:all .4s ease;padding:0 1.25rem}
.ch-body p{color:var(--text2);font-size:.9rem;line-height:1.7;margin-bottom:.75rem}
.ch-body .topics{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.ch-body .topic{font-size:.75rem;padding:.2rem .5rem;background:var(--surface2);border-radius:4px;color:var(--text2)}
.ch-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--accent)}
/* Tech Stack */
.tech-section{padding:5rem 0}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.tech-pill{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center;transition:all .3s}
.tech-pill:hover{border-color:var(--accent);transform:scale(1.05)}
.tech-pill .t-icon{font-size:1.8rem;margin-bottom:.4rem}
.tech-pill .t-name{font-size:.85rem;font-weight:600}
.tech-pill .t-role{font-size:.7rem;color:var(--text2);margin-top:.15rem}
/* Numbers Section */
.numbers{padding:4rem 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;text-align:center}
.numbers-grid .num{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.numbers-grid .label{color:var(--text2);font-size:.9rem;margin-top:.25rem}
/* Design patterns */
.patterns-section{padding:5rem 0}
.pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.pattern-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.5rem;transition:all .3s}
.pattern-card:hover{border-color:var(--purple);transform:translateY(-2px)}
.pattern-card .p-num{font-size:.7rem;color:var(--purple);font-weight:700;margin-bottom:.3rem}
.pattern-card h4{font-size:1rem;margin-bottom:.4rem}
.pattern-card p{font-size:.85rem;color:var(--text2);line-height:1.6}
/* Security */
.security-section{padding:5rem 0}
.security-layers{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.sec-layer{width:min(100%,600px);padding:.75rem 1.5rem;border-radius:8px;display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:500;transition:all .3s;cursor:default}
.sec-layer:hover{transform:scale(1.02)}
.sec-layer .layer-num{font-weight:700;min-width:24px;text-align:center}
/* Progress */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--purple));z-index:999;transition:width .3s}
/* Footer */
footer{padding:3rem 0;text-align:center;color:var(--text2);border-top:1px solid var(--border)}
footer p{font-size:.85rem}
/* Mobile */
@media(max-width:768px){
.hero h1{font-size:2rem}
.hero .stats{gap:1rem}
.stat .num{font-size:1.5rem}
.arch-grid{grid-template-columns:1fr}
.chapter-track{padding-left:2rem}
.flow-diagram{padding:1.5rem}
.flow-diagram pre{font-size:.7rem}
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero -->
<section class="hero">
<h1>Claude Code 源码深度解析</h1>
<p class="subtitle">基于 2026-03-31 源码快照的 22 章完整学习手册<br>从架构设计到 Prompt 工程，深入理解 AI Agent 框架的核心实现</p>
<div class="stats">
<div class="stat"><div class="num">22</div><div class="label">学习章节</div></div>
<div class="stat"><div class="num">512K+</div><div class="label">源码行数</div></div>
<div class="stat"><div class="num">40+</div><div class="label">Tool 工具</div></div>
<div class="stat"><div class="num">1,900</div><div class="label">源文件数</div></div>
</div>
<div style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center">
<button class="cta" onclick="document.getElementById('arch').scrollIntoView()">▼ 开始学习</button>
<a href="quiz.html" class="cta" style="background:linear-gradient(135deg,#bc8cff,#58a6ff);text-decoration:none">📝 50题精通测验</a>
</div>
</section>
<!-- Architecture Overview -->
<section class="arch-section container" id="arch">
<h2 class="section-title">🏗️ 架构全景</h2>
<p class="section-sub">Claude Code 不是简单的 AI 聊天客户端，而是一个产品级 AI Agent 框架</p>
<div class="arch-grid">
<div class="arch-card">
<div class="icon">🖥️</div>
<h3>用户界面层</h3>
<p>终端 CLI (React + 自定义 Ink 渲染器) / IDE Bridge (VS Code + JetBrains) / SDK & Server 模式。140+ React 组件实现终端 UI。</p>
</div>
<div class="arch-card">
<div class="icon">🧠</div>
<h3>会话引擎 QueryEngine</h3>
<p>整个系统的大脑。管理多轮对话生命周期，构建上下文，协调 API 调用与 Tool 调度，支持 Auto-Compact 上下文压缩。</p>
</div>
<div class="arch-card">
<div class="icon">🔧</div>
<h3>Tool 系统</h3>
<p>40+ 内置工具：Bash、FileRead/Write/Edit、Grep、Glob、Agent、WebFetch、MCP 等。统一接口定义，Zod 校验输入输出。</p>
</div>
<div class="arch-card">
<div class="icon">🛡️</div>
<h3>10 层安全纵深</h3>
<p>Prompt 层 → 规则引擎 → 工具级检查 → 路径保护 → 命令黑名单 → AST 分析 → AI 分类器 → 容器沙箱 → 拒绝追踪 → 企业策略。</p>
</div>
<div class="arch-card">
<div class="icon">🤖</div>
<h3>多 Agent 协调器</h3>
<p>6 种 Agent 类型 + Coordinator 模式。支持 Agent Swarms、Git Worktree 隔离、SendMessage 协议通信。</p>
</div>
<div class="arch-card">
<div class="icon">📝</div>
<h3>Prompt 工程体系</h3>
<p>6 大子系统：System/Tool/Agent/Memory/Safety/Caching。20+ Section 模块化组装，三级缓存策略，12 种设计模式。</p>
</div>
</div>
<!-- Data Flow -->
<div class="flow-diagram">
<pre>
用户输入 ──→ entrypoints/cli.tsx (快速路径分发)
│
▼
entrypoints/init.ts (全局初始化: 配置/TLS/预连接)
│
▼
main.tsx (Commander.js CLI 入口)
│
▼
QueryEngine.ts (会话生命周期管理)
│
┌────────────┼────────────────┐
▼ ▼ ▼
context.ts query.ts commands.ts
(系统提示) (单轮执行) (斜杠命令)
│
┌─────────┼─────────┐
▼ ▼
Anthropic API Tool 调度
(流式响应) (权限检查 → call())
│
┌───────────────┼───────────────┐
▼ ▼ ▼
BashTool FileEditTool AgentTool
GrepTool WebFetchTool MCPTool
GlobTool FileReadTool SendMessage
</pre>
</div>
</section>
<!-- Key Numbers -->
<section class="numbers">
<div class="container">
<div class="numbers-grid">
<div><div class="num">20+</div><div class="label">System Prompt Sections</div></div>
<div><div class="num">40</div><div class="label">内置 Tools</div></div>
<div><div class="num">6+1</div><div class="label">Agent 类型</div></div>
<div><div class="num">6 层</div><div class="label">Memory 层级</div></div>
<div><div class="num">27</div><div class="label">Hook 事件</div></div>
<div><div class="num">10 层</div><div class="label">安全纵深防御</div></div>
<div><div class="num">3 级</div><div class="label">Cache 作用域</div></div>
<div><div class="num">100+</div><div class="label">斜杠命令</div></div>
</div>
</div>
</section>
<!-- Tech Stack -->
<section class="tech-section container">
<h2 class="section-title">⚡ 技术栈</h2>
<p class="section-sub">现代 TypeScript 全栈 + 编译时特性开关</p>
<div class="tech-grid">
<div class="tech-pill"><div class="t-icon">🥟</div><div class="t-name">Bun</div><div class="t-role">运行时</div></div>
<div class="tech-pill"><div class="t-icon">📘</div><div class="t-name">TypeScript</div><div class="t-role">严格模式</div></div>
<div class="tech-pill"><div class="t-icon">⚛️</div><div class="t-name">React + Ink</div><div class="t-role">终端 UI</div></div>
<div class="tech-pill"><div class="t-icon">🎯</div><div class="t-name">Commander.js</div><div class="t-role">CLI 框架</div></div>
<div class="tech-pill"><div class="t-icon">✅</div><div class="t-name">Zod v4</div><div class="t-role">运行时校验</div></div>
<div class="tech-pill"><div class="t-icon">🤖</div><div class="t-name">Claude API</div><div class="t-role">AI 引擎</div></div>
<div class="tech-pill"><div class="t-icon">🔌</div><div class="t-name">MCP</div><div class="t-role">工具协议</div></div>
<div class="tech-pill"><div class="t-icon">🧩</div><div class="t-name">LSP</div><div class="t-role">语言服务</div></div>
<div class="tech-pill"><div class="t-icon">🔐</div><div class="t-name">OAuth + JWT</div><div class="t-role">认证体系</div></div>
<div class="tech-pill"><div class="t-icon">🏗️</div><div class="t-name">Feature Flags</div><div class="t-role">编译时开关</div></div>
</div>
</section>
<!-- Chapter List -->
<section class="chapters-section container" id="chapters">
<h2 class="section-title">📖 学习路线</h2>
<p class="section-sub">22 章由浅入深，建议按序阅读 · 点击展开章节详情</p>
<div class="chapter-track" id="chapterTrack">
<!-- Part 1 -->
<div class="chapter-group">
<div class="chapter-group-title"><span class="badge badge-core">Part 1</span> 核心架构 (01-12)</div>
</div>
<div class="chapter-item" data-file="00 - 导读.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">00</span>
<span class="ch-title">导读 — 阅读指南与术语表</span>
<span class="ch-diff diff-导读">导读</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>全手册的阅读顺序说明、核心文件速查表和术语表。建议先读此文了解整体框架。</p>
<div class="topics"><span class="topic">阅读顺序</span><span class="topic">文件速查</span><span class="topic">术语表</span></div>
<a class="ch-link" href="docs/00 - 导读.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="01 - 项目概览.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">01</span>
<span class="ch-title">项目概览 — Claude Code 是什么</span>
<span class="ch-diff diff-入门">入门</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>Claude Code 是 Anthropic 开发的 CLI 工具，让用户在终端中与 Claude AI 交互完成软件工程任务。本章介绍项目定位、源码来源、目录结构和核心模块关系。</p>
<div class="topics"><span class="topic">项目定位</span><span class="topic">目录结构</span><span class="topic">模块关系</span><span class="topic">数字概览</span></div>
<a class="ch-link" href="docs/01 - 项目概览.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="02 - 技术栈与架构总览.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">02</span>
<span class="ch-title">技术栈与架构总览</span>
<span class="ch-diff diff-入门">入门</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>Bun 运行时 + TypeScript strict + React/Ink 终端渲染。Feature Flags 编译时开关实现死代码消除。四层架构：界面层 → 引擎层 → Tool 层 → 服务层。</p>
<div class="topics"><span class="topic">Bun</span><span class="topic">TypeScript</span><span class="topic">Feature Flags</span><span class="topic">四层架构</span></div>
<a class="ch-link" href="docs/02 - 技术栈与架构总览.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="03 - 启动流程.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">03</span>
<span class="ch-title">启动流程</span>
<span class="ch-diff diff-基础">基础</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>从命令行输入 <code>claude</code> 到 UI 渲染的完整过程，包括快速路径分发、全局初始化（配置/TLS/预连接）和 React 组件挂载。</p>
<div class="topics"><span class="topic">cli.tsx 入口</span><span class="topic">init.ts 初始化</span><span class="topic">快速路径</span><span class="topic">组件挂载</span></div>
<a class="ch-link" href="docs/03 - 启动流程.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="04 - Tool 系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">04</span>
<span class="ch-title">Tool 系统</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>核心机制：Tool 接口定义（15 个字段）、统一注册表、Zod 输入校验、权限检查 → 执行流水线。40+ 工具的分类与设计模式。</p>
<div class="topics"><span class="topic">Tool 接口</span><span class="topic">注册与发现</span><span class="topic">Zod 校验</span><span class="topic">调度流水线</span></div>
<a class="ch-link" href="docs/04 - Tool 系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="05 - 权限系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">05</span>
<span class="ch-title">权限系统</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>安全核心：四种权限模式（default/plan/auto/bypass）、规则匹配算法、路径保护、命令黑名单 + AST 分析。</p>
<div class="topics"><span class="topic">权限模式</span><span class="topic">规则匹配</span><span class="topic">路径保护</span><span class="topic">安全检查</span></div>
<a class="ch-link" href="docs/05 - 权限系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="06 - Query 引擎与对话循环.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">06</span>
<span class="ch-title">Query 引擎与对话循环</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>LLM 交互核心：消息构建、API 流式调用、Tool 结果合并、Auto-Compact 上下文管理、多轮对话状态机。</p>
<div class="topics"><span class="topic">消息构建</span><span class="topic">流式 API</span><span class="topic">Auto-Compact</span><span class="topic">对话状态机</span></div>
<a class="ch-link" href="docs/06 - Query 引擎与对话循环.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="07 - 命令系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">07</span>
<span class="ch-title">命令系统</span>
<span class="ch-diff diff-进阶">进阶</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>100+ 斜杠命令的定义、加载机制和三种类型（内置/AI/配置）。包括 /commit、/compact、/review 等核心命令实现。</p>
<div class="topics"><span class="topic">三种命令类型</span><span class="topic">动态加载</span><span class="topic">命令注册表</span><span class="topic">自定义命令</span></div>
<a class="ch-link" href="docs/07 - 命令系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="08 - 服务层.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">08</span>
<span class="ch-title">服务层</span>
<span class="ch-diff diff-进阶">进阶</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>外部集成服务：Anthropic API 客户端、MCP 协议、OAuth 2.0 认证、LSP 语言服务、Analytics 追踪、上下文压缩服务。</p>
<div class="topics"><span class="topic">API 客户端</span><span class="topic">MCP</span><span class="topic">OAuth</span><span class="topic">LSP</span></div>
<a class="ch-link" href="docs/08 - 服务层.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="09 - UI 渲染系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">09</span>
<span class="ch-title">UI 渲染系统</span>
<span class="ch-diff diff-进阶">进阶</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>React 如何渲染到终端：自定义 Ink 渲染器、ANSI Escape 绘制、Yoga 布局引擎、组件化终端 UI 架构。</p>
<div class="topics"><span class="topic">Ink 渲染器</span><span class="topic">ANSI 绘制</span><span class="topic">Yoga 布局</span><span class="topic">组件架构</span></div>
<a class="ch-link" href="docs/09 - UI 渲染系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="10 - 多 Agent 与协调器.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">10</span>
<span class="ch-title">多 Agent 与协调器</span>
<span class="ch-diff diff-高级">高级</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>6 种 Agent 类型 + Coordinator 模式。SubAgent 生成、Git Worktree 隔离、SendMessage 通信协议、Agent Swarms 设计。</p>
<div class="topics"><span class="topic">Agent 类型</span><span class="topic">Coordinator</span><span class="topic">Worktree</span><span class="topic">Agent Swarms</span></div>
<a class="ch-link" href="docs/10 - 多 Agent 与协调器.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="11 - 配置与内存系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">11</span>
<span class="ch-title">配置与内存系统</span>
<span class="ch-diff diff-高级">高级</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>设置层级体系、CLAUDE.md 配置文件机制、持久化记忆目录、Zod Schema 校验配置。</p>
<div class="topics"><span class="topic">设置层级</span><span class="topic">CLAUDE.md</span><span class="topic">持久化记忆</span><span class="topic">Schema 校验</span></div>
<a class="ch-link" href="docs/11 - 配置与内存系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="12 - 关键设计模式.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">12</span>
<span class="ch-title">关键设计模式</span>
<span class="ch-diff diff-总结">总结</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>贯穿项目的设计思想总结：依赖注入、策略模式、观察者模式、Builder 模式、Feature Flag 编译时消除等。</p>
<div class="topics"><span class="topic">设计思想</span><span class="topic">架构模式</span><span class="topic">最佳实践</span><span class="topic">经验总结</span></div>
<a class="ch-link" href="docs/12 - 关键设计模式.md">📄 阅读完整章节 →</a>
</div>
</div>
<!-- Part 2 -->
<div class="chapter-group" style="margin-top:3rem">
<div class="chapter-group-title"><span class="badge badge-prompt">Part 2</span> Prompt 体系深度分析 (13-21)</div>
</div>
<div class="chapter-item" data-file="13 - Prompt 体系总览.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">13</span>
<span class="ch-title">Prompt 体系总览</span>
<span class="ch-diff diff-导读">导读</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>6 大 Prompt 子系统导航：System/Tool/Agent/Memory/Safety/Caching。核心架构图和 Prompt 数据流全景。</p>
<div class="topics"><span class="topic">6 大子系统</span><span class="topic">数据流全景</span><span class="topic">4 种运行模式</span><span class="topic">8 大设计原则</span></div>
<a class="ch-link" href="docs/13 - Prompt 体系总览.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="14 - System Prompt 架构.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">14</span>
<span class="ch-title">System Prompt 架构</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>20+ Section 模块化组装 + 静态/动态分界 + 条件注入逻辑 + 优先级系统（override > coordinator > agent > custom > default）。</p>
<div class="topics"><span class="topic">Section 数组</span><span class="topic">条件注入</span><span class="topic">优先级系统</span><span class="topic">KAIROS 模式</span></div>
<a class="ch-link" href="docs/14 - System Prompt 架构.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="15 - Agent 与 SubAgent Prompt.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">15</span>
<span class="ch-title">Agent 与 SubAgent Prompt</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>6+1 种 Agent 类型的 Prompt 差异分析、工具权限矩阵、Fork Cache 优化策略。</p>
<div class="topics"><span class="topic">Agent 类型</span><span class="topic">权限矩阵</span><span class="topic">Fork Cache</span><span class="topic">永不委派原则</span></div>
<a class="ch-link" href="docs/15 - Agent 与 SubAgent Prompt.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="16 - Prompt Caching 与 Context 管理.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">16</span>
<span class="ch-title">Prompt Caching 与 Context 管理</span>
<span class="ch-diff diff-高级">高级</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>三级缓存策略（global/org/ephemeral）+ Auto-Compact 机制 + 静态/动态分界 + 锁存（Latch）模式。</p>
<div class="topics"><span class="topic">三级缓存</span><span class="topic">Auto-Compact</span><span class="topic">静态/动态分界</span><span class="topic">Latch 模式</span></div>
<a class="ch-link" href="docs/16 - Prompt Caching 与 Context 管理.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="17 - 权限系统与 Safety Prompt.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">17</span>
<span class="ch-title">权限系统与 Safety Prompt</span>
<span class="ch-diff diff-高级">高级</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>10 层纵深防御安全架构：Prompt 指令 → 规则引擎 → AI 分类器 → 沙箱容器 → bypass-immune 不可绕过检查。</p>
<div class="topics"><span class="topic">纵深防御</span><span class="topic">AI 分类器</span><span class="topic">bypass-immune</span><span class="topic">CYBER_RISK</span></div>
<a class="ch-link" href="docs/17 - 权限系统与 Safety Prompt.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="18 - Memory 与 Hooks 系统.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">18</span>
<span class="ch-title">Memory 与 Hooks 系统</span>
<span class="ch-diff diff-高级">高级</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>6 层 Memory 系统（Managed → TeamMem）+ 27 种 Hook 事件 + CLAUDE.md 注入机制 + Hook 双向通信。</p>
<div class="topics"><span class="topic">6 层 Memory</span><span class="topic">27 种 Hook</span><span class="topic">CLAUDE.md</span><span class="topic">双向通信</span></div>
<a class="ch-link" href="docs/18 - Memory 与 Hooks 系统.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="19 - Prompt 工程技巧与设计模式.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">19</span>
<span class="ch-title">Prompt 工程技巧与设计模式</span>
<span class="ch-diff diff-精华">精华</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>12 个值得学习的 Prompt 设计模式：Scratchpad CoT、缓存感知设计、工具引导路由、反面案例教学等。</p>
<div class="topics"><span class="topic">Scratchpad CoT</span><span class="topic">缓存感知</span><span class="topic">工具路由</span><span class="topic">反面案例</span></div>
<a class="ch-link" href="docs/19 - Prompt 工程技巧与设计模式.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="20 - Tool 系统 Prompt 详解.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">20</span>
<span class="ch-title">Tool 系统 Prompt 详解</span>
<span class="ch-diff diff-核心">核心</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>40 个工具的完整 Prompt 逐一分析，工具引导路由网络、延迟加载策略、MCP 工具动态注入。</p>
<div class="topics"><span class="topic">40 工具分析</span><span class="topic">路由网络</span><span class="topic">延迟加载</span><span class="topic">MCP 注入</span></div>
<a class="ch-link" href="docs/20 - Tool 系统 Prompt 详解.md">📄 阅读完整章节 →</a>
</div>
</div>
<div class="chapter-item" data-file="21 - 用户输入处理与消息格式化.md">
<div class="ch-dot"></div>
<div class="ch-header">
<span class="ch-num">21</span>
<span class="ch-title">用户输入处理与消息格式化</span>
<span class="ch-diff diff-进阶">进阶</span>
<span class="ch-arrow">▶</span>
</div>
<div class="ch-body">
<p>输入到 API 的完整链路：5 种消息类型、Skill 系统、消息格式化管道、上下文注入点。</p>
<div class="topics"><span class="topic">5 种消息类型</span><span class="topic">Skill 系统</span><span class="topic">格式化管道</span><span class="topic">上下文注入</span></div>
<a class="ch-link" href="docs/21 - 用户输入处理与消息格式化.md">📄 阅读完整章节 →</a>
</div>
</div>
</div>
</section>
<!-- Design Patterns -->
<section class="patterns-section container">
<h2 class="section-title">🧩 8 大核心设计原则</h2>
<p class="section-sub">贯穿 Claude Code 整个 Prompt 体系的关键设计思想</p>
<div class="pattern-grid">
<div class="pattern-card"><div class="p-num">原则 01</div><h4>模块化数组架构</h4><p>System Prompt 是 string[] 而非单字符串，支持分段缓存和灵活组装</p></div>
<div class="pattern-card"><div class="p-num">原则 02</div><h4>静态/动态分界</h4><p>SYSTEM_PROMPT_DYNAMIC_BOUNDARY 将可全局缓存的内容与动态内容分离</p></div>
<div class="pattern-card"><div class="p-num">原则 03</div><h4>缓存感知设计</h4><p>从路径规范化到 Agent 列表外移，处处考虑缓存命中率优化</p></div>
<div class="pattern-card"><div class="p-num">原则 04</div><h4>10 层纵深防御</h4><p>Prompt + 规则 + 工具 + 路径 + 命令 + AST + AI 分类器 + 沙箱 + 追踪 + 企业策略</p></div>
<div class="pattern-card"><div class="p-num">原则 05</div><h4>永不委派理解</h4><p>Coordinator 必须理解 worker 结果后再下达指令，禁止懒惰委派</p></div>
<div class="pattern-card"><div class="p-num">原则 06</div><h4>Scratchpad CoT</h4><p><analysis> 让模型先思考再输出，后处理删除中间推理过程</p></div>
<div class="pattern-card"><div class="p-num">原则 07</div><h4>DANGEROUS_ 命名约定</h4><p>非缓存 section 刻意用危险前缀命名，制造代码审查摩擦</p></div>
<div class="pattern-card"><div class="p-num">原则 08</div><h4>三层注入架构</h4><p>System Prompt(数组) + System Context(KV追加) + User Context(首条消息)</p></div>
</div>
</section>
<!-- Security Layers -->
<section class="security-section container">
<h2 class="section-title">🛡️ 10 层安全纵深防御</h2>
<p class="section-sub">即使 bypass 权限也有不可绕过的安全检查</p>
<div class="security-layers">
<div class="sec-layer" style="background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.3)"><span class="layer-num">1</span> Prompt 指令层 — System Prompt 中的安全规则与行为约束</div>
<div class="sec-layer" style="background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.3)"><span class="layer-num">2</span> 规则引擎层 — 权限规则匹配 (allow/deny/ask)</div>
<div class="sec-layer" style="background:rgba(210,153,34,.1);border:1px solid rgba(210,153,34,.3)"><span class="layer-num">3</span> 工具级检查层 — 每个 Tool 的 isEnabled/needsPermissions</div>
<div class="sec-layer" style="background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.3)"><span class="layer-num">4</span> 路径保护层 — 关键文件写保护 (.env, .git/)</div>
<div class="sec-layer" style="background:rgba(210,153,34,.15);border:1px solid rgba(210,153,34,.3)"><span class="layer-num">5</span> 命令黑名单层 — 危险命令模式匹配 (curl|sh, rm -rf)</div>
<div class="sec-layer" style="background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3)"><span class="layer-num">6</span> AST 分析层 — 命令解析树深度审查</div>
<div class="sec-layer" style="background:rgba(248,81,73,.12);border:1px solid rgba(248,81,73,.3)"><span class="layer-num">7</span> AI 分类器层 — 机器学习模型判断风险等级</div>
<div class="sec-layer" style="background:rgba(248,81,73,.15);border:1px solid rgba(248,81,73,.3)"><span class="layer-num">8</span> 容器沙箱层 — Docker/Podman 隔离执行</div>
<div class="sec-layer" style="background:rgba(188,140,255,.1);border:1px solid rgba(188,140,255,.3)"><span class="layer-num">9</span> 拒绝追踪层 — 记录所有被拒绝的操作</div>
<div class="sec-layer" style="background:rgba(188,140,255,.15);border:1px solid rgba(188,140,255,.3)"><span class="layer-num">10</span> 企业策略层 — 组织级安全策略覆盖</div>
</div>
</section>
<!-- Quiz CTA Section -->
<section style="padding:4rem 0;text-align:center">
<div class="container">
<h2 style="font-size:2rem;font-weight:800;margin-bottom:.75rem;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent">🎯 学以致用 — 源码知识试卷 v9</h2>
<p style="color:var(--text2);max-width:600px;margin:0 auto 2rem;font-size:1.05rem">290 道精心设计的选择题，全部来自真实源码分析。新增 commands 命令系统、keybindings 快捷键、Ink 渲染引擎深度解析、cost 成本追踪、history 历史管理等全新模块。每题附详细解析。</p>
<div style="display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem">
<div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem 1.5rem;text-align:center">
<div style="font-size:2rem;font-weight:700;color:var(--accent)">222</div>
<div style="font-size:.8rem;color:var(--text2)">题目</div>
</div>
<div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem 1.5rem;text-align:center">
<div style="font-size:2rem;font-weight:700;color:var(--purple)">19</div>
<div style="font-size:.8rem;color:var(--text2)">知识模块</div>
</div>
<div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem 1.5rem;text-align:center">
<div style="font-size:2rem;font-weight:700;color:var(--green)">100%</div>
<div style="font-size:.8rem;color:var(--text2)">源码真题</div>
</div>
</div>
<a href="quiz.html" style="display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2.5rem;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;border-radius:10px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .2s;box-shadow:0 4px 20px rgba(88,166,255,.3)">
🚀 开始做题 v9
</a>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>📚 Claude Code 源码深度解析 · 22 章完整学习手册 + 源码试卷</p>
<p style="margin-top:.5rem">Made with ❤️ by <a href="https://github.com/aaronagent">AARON AGENT</a> · 基于 2026-03-31 源码快照</p>
</div>
</footer>
<script>
// Chapter toggle
document.querySelectorAll('.chapter-item').forEach(item => {
item.querySelector('.ch-header').addEventListener('click', () => {
const wasActive = item.classList.contains('active');
// Close all
document.querySelectorAll('.chapter-item.active').forEach(i => i.classList.remove('active'));
// Toggle clicked
if (!wasActive) item.classList.add('active');
});
});
// Scroll progress bar
window.addEventListener('scroll', () => {
const h = document.documentElement;
const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
document.getElementById('progressBar').style.width = pct + '%';
});
// Animate numbers on scroll
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('.num').forEach(el => {
const text = el.textContent;
const match = text.match(/^(\d+)/);
if (match) {
const target = parseInt(match[1]);
const suffix = text.slice(match[1].length);
let current = 0;
const step = Math.max(1, Math.floor(target / 30));
const timer = setInterval(() => {
current += step;
if (current >= target) { current = target; clearInterval(timer); }
el.textContent = current + suffix;
}, 30);
}
});
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
document.querySelectorAll('.numbers-grid, .stats').forEach(el => observer.observe(el));
</script>
</body>
</html>