docs: 更新文档, 加上配图

docs/introduction/architecture-overview.mdx

@@ -9,6 +9,10 @@ description: "五层架构，一条数据流"
 
 Claude Code 从上到下分为五个层次，每一层职责清晰、边界分明：
 
+<Frame caption="Claude Code 五层架构">
+  <img src="/docs/images/architecture-layers.png" alt="Claude Code 五层架构图" />
+</Frame>
+
 | 层次 | 职责 | 关键词 |
 |------|------|--------|
 | **交互层** | 终端 UI、用户输入、消息展示 | React/Ink、REPL |
@@ -19,7 +23,9 @@ Claude Code 从上到下分为五个层次，每一层职责清晰、边界分
 
 ## 一条主数据流
 
-{/* TODO: 插入数据流序列图 */}
+<Frame caption="核心数据流">
+  <img src="/docs/images/data-flow.png" alt="Claude Code 核心数据流" />
+</Frame>
 
 整个系统的运转可以浓缩为一条核心数据流：
 

docs/introduction/what-is-claude-code.mdx

@@ -27,7 +27,9 @@ Claude Code 是一个运行在命令行终端里的 AI 编程助手。你用自
 
 ## 一次典型的交互流程
 
-{/* TODO: 插入一张交互流程示意图 */}
+<Frame>
+  <img src="/docs/images/interaction-flow.png" alt="Claude Code 典型交互流程" />
+</Frame>
 
 1. 你在终端输入自然语言需求
 2. Claude Code 分析你的项目上下文