diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 270ca8a..9b8dd3e 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -433,7 +433,8 @@ export default defineConfig({
             {
               text: '附录',
               items: [
-                { text: 'AI 能力词典', link: '/zh-cn/appendix/ai-capability-dictionary' }
+                { text: 'AI 能力词典', link: '/zh-cn/appendix/ai-capability-dictionary' },
+                { text: '终端入门', link: '/zh-cn/appendix/terminal-intro' }
               ]
             }
           ]
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue
new file mode 100644
index 0000000..52812d6
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue
@@ -0,0 +1,239 @@
+<!--
+  AdvancedTUIDemo.vue
+  高级 TUI 布局演示组件
+  
+  用途：
+  展示复杂的终端用户界面（Text User Interface）是如何构建的。
+  说明如何利用备用缓冲区（Alternate Buffer）和全屏绘制技术来实现类似 vim/htop 的界面。
+  
+  交互功能：
+  - 布局展示：模拟一个包含侧边栏、主内容区和状态栏的 TUI 应用。
+  - 动态更新：演示界面元素如何响应窗口大小变化或用户操作。
+-->
+<template>
+  <div class="advanced-tui">
+    <div class="tui-window">
+      <div class="tui-header">
+        <div class="tabs">
+          <div class="tab active">Continuous</div>
+          <div class="tab">Integration</div>
+          <div class="tab">Logging</div>
+        </div>
+      </div>
+      
+      <div class="tui-body">
+        <div class="sidebar" :style="{ width: sidebarWidth + '%' }">
+          <div class="list-item success">
+            <span class="icon">✓</span> ci-fe-be-rules
+          </div>
+          <div class="list-item warning">
+            <span class="icon">◐</span> ci-api-test
+          </div>
+          <div class="list-item success active">
+            <span class="icon">✓</span> ci-email-service
+          </div>
+          <div class="list-item error">
+            <span class="icon">✗</span> ci-auth-core
+          </div>
+          <div class="list-item pending">
+            <span class="icon">○</span> ci-db-migration
+          </div>
+        </div>
+        
+        <div class="main-content">
+          <div class="content-header">
+            <h3>ci-email-service</h3>
+          </div>
+          <div class="content-body">
+            <div class="status-row">Status: <span class="text-success">success</span></div>
+            <div class="info-row">Updated: 2024-01-15 14:32:00 UTC</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tui-controls">
+      <div class="control-group">
+        <button @click="toggleCoordinates" :class="{ active: showCoordinates }">
+          Show Coordinates
+        </button>
+      </div>
+      <div class="control-group">
+        <button @click="simulateResize">Simulate Resize</button>
+        <span class="size-label">Size: {{ sizeDisplay }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const showCoordinates = ref(false)
+const sidebarWidth = ref(30)
+const sizeDisplay = ref('60x20')
+
+const toggleCoordinates = () => {
+  showCoordinates.value = !showCoordinates.value
+}
+
+const simulateResize = () => {
+  // Simple animation to show resizing concept
+  const originalWidth = sidebarWidth.value
+  sidebarWidth.value = 20
+  sizeDisplay.value = '40x20'
+  
+  setTimeout(() => {
+    sidebarWidth.value = 40
+    sizeDisplay.value = '80x20'
+  }, 500)
+  
+  setTimeout(() => {
+    sidebarWidth.value = originalWidth
+    sizeDisplay.value = '60x20'
+  }, 1000)
+}
+</script>
+
+<style scoped>
+.advanced-tui {
+  background: #0a0a0a;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  font-family: 'Menlo', monospace;
+}
+
+.tui-window {
+  border: 1px solid #333;
+  border-radius: 4px;
+  background: #000;
+  overflow: hidden;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.tui-header {
+  border-bottom: 1px solid #333;
+  background: #1a1a1a;
+}
+
+.tabs {
+  display: flex;
+}
+
+.tab {
+  padding: 8px 16px;
+  color: #666;
+  cursor: pointer;
+  border-right: 1px solid #333;
+  font-size: 13px;
+}
+
+.tab.active {
+  background: #22c55e;
+  color: #000;
+  font-weight: bold;
+}
+
+.tui-body {
+  display: flex;
+  flex: 1;
+}
+
+.sidebar {
+  border-right: 1px solid #333;
+  padding: 10px 0;
+  transition: width 0.3s;
+}
+
+.list-item {
+  padding: 5px 15px;
+  color: #ccc;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.list-item:hover {
+  background: #222;
+}
+
+.list-item.active {
+  background: #222;
+  border-left: 2px solid #22c55e;
+}
+
+.icon {
+  display: inline-block;
+  width: 16px;
+}
+
+.success .icon { color: #22c55e; }
+.warning .icon { color: #eab308; }
+.error .icon { color: #ef4444; }
+.pending .icon { color: #666; }
+
+.main-content {
+  flex: 1;
+  padding: 20px;
+}
+
+.content-header h3 {
+  margin: 0 0 15px 0;
+  color: #fff;
+  font-size: 16px;
+}
+
+.status-row {
+  margin-bottom: 5px;
+  color: #aaa;
+}
+
+.text-success { color: #22c55e; }
+
+.info-row {
+  color: #666;
+  font-size: 12px;
+}
+
+.tui-controls {
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #222;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+button {
+  background: #111;
+  border: 1px solid #333;
+  color: #ccc;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+}
+
+button:hover {
+  background: #222;
+}
+
+button.active {
+  background: #222;
+  border-color: #666;
+  color: #fff;
+}
+
+.size-label {
+  color: #666;
+  font-size: 13px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue
new file mode 100644
index 0000000..32c5c75
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue
@@ -0,0 +1,654 @@
+<!--
+  ArchitectureDemo.vue
+  终端架构演示组件
+  
+  用途：
+  可视化展示 Terminal（终端）、Shell（壳）和 Kernel（内核）之间的交互流程。
+  通过模拟 "ls" 命令的执行过程，帮助用户理解输入传输、解析、系统调用、数据返回和渲染显示的完整链路。
+  
+  交互功能：
+  - 逐步演示 (Step-by-Step)：用户点击按钮一步步观察数据包流转。
+  - 中英双语说明：适应不同语言背景的读者。
+  - 状态反馈：实时显示各组件（终端/Shell/内核）的当前状态（空闲/忙碌）。
+-->
+<template>
+  <div class="arch-demo">
+    <div class="analogy-header">
+      <div class="analogy-item">
+        <div class="icon">🍽️</div>
+        <div class="text">
+          <div class="role">Terminal = Table (餐桌)</div>
+          <div class="desc">UI & Input/Output<br>交互界面与输入输出</div>
+        </div>
+      </div>
+      <div class="analogy-item">
+        <div class="icon">💁‍♂️</div>
+        <div class="text">
+          <div class="role">Shell = Waiter (服务员)</div>
+          <div class="desc">Interpreter & Logic<br>解释器与逻辑处理</div>
+        </div>
+      </div>
+      <div class="analogy-item">
+        <div class="icon">👨‍🍳</div>
+        <div class="text">
+          <div class="role">Kernel = Kitchen (后厨)</div>
+          <div class="desc">System Execution<br>系统执行与硬件调度</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="diagram-container">
+      <!-- Terminal Node -->
+      <div class="node terminal" :class="{ active: activeNode === 'terminal' }">
+        <div class="node-title">TERMINAL (终端)</div>
+        <div class="screen">
+          <div v-for="(line, i) in terminalLines" :key="i" class="line">{{ line }}</div>
+          <div class="line input-line">
+            <span class="prompt">$</span>
+            <span class="typing">{{ currentInput }}</span>
+            <span class="cursor" v-if="activeNode === 'terminal'"></span>
+          </div>
+        </div>
+        <div class="node-label">/dev/tty</div>
+      </div>
+
+      <!-- Connections -->
+      <div class="connection t-s" :class="{ active: packetState === 't-to-s' || packetState === 's-to-t' }">
+        <div class="line-path"></div>
+        <div class="data-label" v-if="packetState === 't-to-s'">
+          <span class="icon">➡️</span> Bytes
+        </div>
+        <div class="data-label" v-if="packetState === 's-to-t'">
+          <span class="icon">⬅️</span> Text
+        </div>
+        <div class="conn-label">stdin / stdout</div>
+      </div>
+
+      <!-- Shell Node -->
+      <div class="node shell" :class="{ active: activeNode === 'shell' }">
+        <div class="node-title">SHELL (壳)</div>
+        <div class="process-box">
+          <div class="status-icon">{{ shellIcon }}</div>
+          <div class="status">{{ shellStatus }}</div>
+        </div>
+        <div class="node-label">/bin/zsh</div>
+      </div>
+
+      <!-- Connections -->
+      <div class="connection s-k" :class="{ active: packetState === 's-to-k' || packetState === 'k-to-s' }">
+        <div class="line-path"></div>
+        <div class="data-label" v-if="packetState === 's-to-k'">
+          <span class="icon">➡️</span> Syscall
+        </div>
+        <div class="data-label" v-if="packetState === 'k-to-s'">
+          <span class="icon">⬅️</span> Raw Data
+        </div>
+        <div class="conn-label">System Calls</div>
+      </div>
+
+      <!-- Kernel Node -->
+      <div class="node kernel" :class="{ active: activeNode === 'kernel' }">
+        <div class="node-title">KERNEL (内核)</div>
+        <div class="process-box">
+          <div class="status-icon">{{ kernelIcon }}</div>
+          <div class="status">{{ kernelStatus }}</div>
+        </div>
+        <div class="node-label">macOS / Linux</div>
+      </div>
+    </div>
+
+    <div class="controls">
+      <div class="btn-group">
+        <button class="btn primary" @click="nextStep" :disabled="currentStep >= totalSteps">
+          <span v-if="currentStep === 0">▶️ Start Simulation / 开始演示</span>
+          <span v-else-if="currentStep < totalSteps">Next Step / 下一步 ({{ currentStep }}/{{ totalSteps }}) ➡️</span>
+          <span v-else>✅ Done / 完成 (Reset)</span>
+        </button>
+        <button class="btn secondary" @click="reset" v-if="currentStep > 0">
+          Reset / 重置
+        </button>
+      </div>
+      
+      <div class="step-info" v-if="currentStep > 0">
+        <div class="step-title">
+          {{ steps[currentStep - 1].titleEn }} 
+          <span class="divider">|</span> 
+          {{ steps[currentStep - 1].titleZh }}
+        </div>
+        <div class="step-desc">
+          <div class="en">{{ steps[currentStep - 1].descEn }}</div>
+          <div class="zh">{{ steps[currentStep - 1].descZh }}</div>
+        </div>
+        <div class="step-tech">
+          <span class="tech-label">Technical / 技术原理:</span>
+          <div class="tech-content">
+            <div class="en">{{ steps[currentStep - 1].techEn }}</div>
+            <div class="zh">{{ steps[currentStep - 1].techZh }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="step-info placeholder" v-else>
+        <div class="step-desc">
+          <div class="en">Click "Start Simulation" to see how the command 'ls' travels through the system.</div>
+          <div class="zh">点击“开始演示”查看 'ls' 命令如何在系统中流转。</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentStep = ref(0)
+const activeNode = ref('terminal') 
+const packetState = ref(null) 
+const terminalLines = ref([])
+const currentInput = ref('')
+const shellStatus = ref('Idle')
+const shellIcon = ref('💤')
+const kernelStatus = ref('Idle')
+const kernelIcon = ref('💤')
+
+const steps = [
+  {
+    titleEn: "1. User Input",
+    titleZh: "1. 用户输入",
+    descEn: "You type 'ls' in the terminal window. The terminal captures your keystrokes.",
+    descZh: "你在终端窗口输入 'ls'。终端会捕获你的按键操作。",
+    techEn: "Terminal buffers input in 'Cooked Mode' until you press Enter.",
+    techZh: "终端在“加工模式 (Cooked Mode)”下缓冲输入，直到你按下回车键。",
+    action: async () => {
+      activeNode.value = 'terminal'
+      currentInput.value = 'l'
+      await wait(200)
+      currentInput.value = 'ls'
+    }
+  },
+  {
+    titleEn: "2. Transmission",
+    titleZh: "2. 传输",
+    descEn: "The Terminal sends the characters 'l', 's', and 'Enter' to the Shell.",
+    descZh: "终端将字符 'l'、's' 和 '回车' 发送给 Shell。",
+    techEn: "Data travels via standard input (stdin) as a byte stream.",
+    techZh: "数据通过标准输入 (stdin) 以字节流的形式传输。",
+    action: async () => {
+      packetState.value = 't-to-s'
+      await wait(1000)
+      packetState.value = null
+    }
+  },
+  {
+    titleEn: "3. Shell Parsing",
+    titleZh: "3. Shell 解析",
+    descEn: "The Shell receives the characters and figures out what you want.",
+    descZh: "Shell 接收到字符，并解析你的意图。",
+    techEn: "Shell tokenizes input, finds the 'ls' executable in $PATH.",
+    techZh: "Shell 对输入进行分词，并在 $PATH 环境变量中查找 'ls' 可执行文件。",
+    action: async () => {
+      activeNode.value = 'shell'
+      shellIcon.value = '🧠'
+      shellStatus.value = 'Parsing "ls"...'
+    }
+  },
+  {
+    titleEn: "4. System Call",
+    titleZh: "4. 系统调用",
+    descEn: "The Shell asks the Kernel to read the file list from the disk.",
+    descZh: "Shell 请求内核从磁盘读取文件列表。",
+    techEn: "Shell invokes `execve()` and `getdents()` system calls.",
+    techZh: "Shell 调用 `execve()` 和 `getdents()` 等系统调用。",
+    action: async () => {
+      packetState.value = 's-to-k'
+      await wait(1000)
+      packetState.value = null
+    }
+  },
+  {
+    titleEn: "5. Kernel Execution",
+    titleZh: "5. 内核执行",
+    descEn: "The Kernel (the boss) talks to the hardware to get the actual data.",
+    descZh: "内核（大管家）与硬件通信以获取实际数据。",
+    techEn: "Kernel driver accesses the file system (APFS/ext4).",
+    techZh: "内核驱动程序访问文件系统 (APFS/ext4)。",
+    action: async () => {
+      activeNode.value = 'kernel'
+      kernelIcon.value = '💾'
+      kernelStatus.value = 'Reading Disk...'
+      await wait(800)
+      kernelStatus.value = 'Data Found'
+    }
+  },
+  {
+    titleEn: "6. Returning Data",
+    titleZh: "6. 返回数据",
+    descEn: "The Kernel gives the raw file list back to the Shell.",
+    descZh: "内核将原始文件列表数据返回给 Shell。",
+    techEn: "System call returns with file descriptors/structs.",
+    techZh: "系统调用返回文件描述符或结构体数据。",
+    action: async () => {
+      kernelStatus.value = 'Idle'
+      kernelIcon.value = '💤'
+      packetState.value = 'k-to-s'
+      await wait(1000)
+      packetState.value = null
+    }
+  },
+  {
+    titleEn: "7. Formatting",
+    titleZh: "7. 格式化",
+    descEn: "The Shell formats the raw list into text, adding colors if needed.",
+    descZh: "Shell 将原始列表格式化为文本，并根据需要添加颜色。",
+    techEn: "Shell formats output buffer, adding ANSI color codes.",
+    techZh: "Shell 格式化输出缓冲区，并添加 ANSI 颜色代码。",
+    action: async () => {
+      activeNode.value = 'shell'
+      shellIcon.value = '🎨'
+      shellStatus.value = 'Formatting...'
+      await wait(500)
+    }
+  },
+  {
+    titleEn: "8. Display Output",
+    titleZh: "8. 显示输出",
+    descEn: "The Shell sends the final text back to the Terminal to show you.",
+    descZh: "Shell 将最终文本发送回终端以供显示。",
+    techEn: "Data travels via standard output (stdout) to the TTY.",
+    techZh: "数据通过标准输出 (stdout) 传输到 TTY。",
+    action: async () => {
+      shellStatus.value = 'Idle'
+      shellIcon.value = '💤'
+      packetState.value = 's-to-t'
+      await wait(1000)
+      packetState.value = null
+    }
+  },
+  {
+    titleEn: "9. Render",
+    titleZh: "9. 渲染",
+    descEn: "The Terminal draws the text on the screen grid.",
+    descZh: "终端在屏幕网格上绘制文本。",
+    techEn: "Terminal emulator renders glyphs into the frame buffer.",
+    techZh: "终端模拟器将字形渲染到帧缓冲区中。",
+    action: async () => {
+      activeNode.value = 'terminal'
+      terminalLines.value = ['file1.txt  photo.jpg', 'notes.md']
+      currentInput.value = ''
+    }
+  }
+]
+
+
+const totalSteps = steps.length
+
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+const nextStep = async () => {
+  if (currentStep.value >= totalSteps) {
+    reset()
+    return
+  }
+  
+  const step = steps[currentStep.value]
+  currentStep.value++
+  await step.action()
+}
+
+const reset = () => {
+  currentStep.value = 0
+  activeNode.value = 'terminal'
+  packetState.value = null
+  terminalLines.value = []
+  currentInput.value = ''
+  shellStatus.value = 'Idle'
+  shellIcon.value = '💤'
+  kernelStatus.value = 'Idle'
+  kernelIcon.value = '💤'
+}
+</script>
+
+<style scoped>
+.arch-demo {
+  background: #09090b;
+  padding: 30px;
+  border-radius: 12px;
+  border: 1px solid #27272a;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+  color: #e4e4e7;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.analogy-header {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  border-bottom: 1px solid #27272a;
+  padding-bottom: 20px;
+}
+
+.analogy-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+}
+
+.analogy-item .icon {
+  font-size: 24px;
+  background: #18181b;
+  padding: 8px;
+  border-radius: 50%;
+  border: 1px solid #27272a;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.analogy-item .role {
+  font-weight: bold;
+  color: #22d3ee;
+  font-size: 13px;
+}
+
+.analogy-item .desc {
+  font-size: 11px;
+  color: #a1a1aa;
+}
+
+.diagram-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 0 10px;
+}
+
+.node {
+  background: #18181b;
+  border: 2px solid #27272a;
+  border-radius: 8px;
+  width: 140px;
+  height: 130px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s;
+  z-index: 2;
+  position: relative;
+}
+
+.node.active {
+  border-color: #22c55e;
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
+  transform: translateY(-2px);
+}
+
+.node-title {
+  background: #27272a;
+  color: #a1a1aa;
+  font-size: 10px;
+  padding: 6px 0;
+  text-align: center;
+  font-weight: bold;
+  letter-spacing: 1px;
+  border-radius: 6px 6px 0 0;
+}
+
+.node-label {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 10px;
+  color: #71717a;
+}
+
+.screen, .process-box {
+  flex: 1;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+}
+
+.process-box {
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.status-icon {
+  font-size: 24px;
+}
+
+.screen {
+  background: #000;
+  justify-content: flex-start;
+  font-family: monospace;
+  overflow: hidden;
+}
+
+.line {
+  height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.input-line {
+  display: flex;
+  align-items: center;
+}
+
+.prompt {
+  color: #22c55e;
+  margin-right: 4px;
+}
+
+.cursor {
+  width: 6px;
+  height: 12px;
+  background: #e4e4e7;
+  animation: blink 1s step-end infinite;
+}
+
+.status {
+  text-align: center;
+  color: #facc15;
+  font-size: 11px;
+}
+
+.connection {
+  flex: 1;
+  height: 2px;
+  background: #27272a;
+  position: relative;
+  margin: 0 15px;
+  transition: all 0.3s;
+}
+
+.connection.active {
+  background: #22c55e;
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
+}
+
+.conn-label {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 10px;
+  color: #52525b;
+}
+
+.data-label {
+  position: absolute;
+  top: -25px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #22c55e;
+  color: #000;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: bold;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  z-index: 10;
+  animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes pop-in {
+  from { opacity: 0; transform: translate(-50%, 5px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background: #18181b;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #27272a;
+}
+
+.btn-group {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.btn {
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.btn.primary {
+  background: #22c55e;
+  color: #000;
+}
+
+.btn.primary:hover:not(:disabled) {
+  background: #16a34a;
+}
+
+.btn.primary:disabled {
+  background: #27272a;
+  color: #71717a;
+  cursor: not-allowed;
+}
+
+.btn.secondary {
+  background: transparent;
+  border-color: #3f3f46;
+  color: #a1a1aa;
+}
+
+.btn.secondary:hover {
+  border-color: #71717a;
+  color: #e4e4e7;
+}
+
+.step-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+  animation: fade-in 0.3s ease;
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #22d3ee;
+}
+
+.step-desc {
+  font-size: 14px;
+  color: #e4e4e7;
+}
+
+.step-tech {
+  font-size: 12px;
+  color: #71717a;
+  background: #09090b;
+  padding: 8px;
+  border-radius: 4px;
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.tech-label {
+  color: #facc15;
+  font-weight: bold;
+  margin-right: 4px;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 640px) {
+  .analogy-header {
+    grid-template-columns: 1fr;
+  }
+  
+  .diagram-container {
+    flex-direction: column;
+    gap: 50px;
+    padding: 20px 0;
+  }
+  
+  .connection {
+    width: 2px;
+    height: 50px;
+    margin: 0;
+  }
+  
+  .conn-label {
+    top: 50%;
+    left: 10px;
+    right: auto;
+    transform: translateY(-50%);
+    text-align: left;
+    white-space: nowrap;
+  }
+  
+  .packet {
+    top: 0;
+    left: 10px;
+    animation: travel-vertical 1s linear forwards;
+  }
+  
+  .packet.reverse {
+    animation: travel-vertical-back 1s linear forwards;
+  }
+  
+  @keyframes travel-vertical {
+    0% { top: 0; transform: translateY(0); }
+    100% { top: 100%; transform: translateY(-100%); }
+  }
+  
+  @keyframes travel-vertical-back {
+    0% { top: 100%; transform: translateY(-100%); }
+    100% { top: 0; transform: translateY(0); }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue
new file mode 100644
index 0000000..07e9218
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue
@@ -0,0 +1,239 @@
+<!--
+  CellInspector.vue
+  单元格检查器组件
+  
+  用途：
+  深入展示单个终端单元格（Cell）的内部结构。
+  说明一个单元格不仅仅包含字符，还包含前景色、背景色、加粗、下划线等属性。
+  
+  交互功能：
+  - 属性切换：用户可以修改字符、颜色和样式。
+  - 实时预览：左侧大图实时反映右侧属性的修改结果。
+-->
+<template>
+  <div class="cell-inspector">
+    <div class="preview-area">
+      <div class="large-cell" :style="cellStyle">
+        {{ char }}
+      </div>
+    </div>
+    
+    <div class="controls-area">
+      <div class="control-group">
+        <label>CHARACTER</label>
+        <div class="char-buttons">
+          <button 
+            v-for="c in chars" 
+            :key="c" 
+            :class="{ active: char === c }"
+            @click="char = c"
+          >{{ c }}</button>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <label>FOREGROUND</label>
+        <div class="color-palette">
+          <div 
+            v-for="color in colors" 
+            :key="color" 
+            class="color-swatch"
+            :style="{ backgroundColor: color }"
+            :class="{ active: fgColor === color }"
+            @click="fgColor = color"
+          ></div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <label>BACKGROUND</label>
+        <div class="color-palette">
+          <div 
+            class="color-swatch"
+            :class="{ active: bgColor === 'transparent' }"
+            style="background: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%); background-size: 10px 10px; background-color: #111;"
+            @click="bgColor = 'transparent'"
+          ></div>
+          <div 
+            v-for="color in bgColors" 
+            :key="color" 
+            class="color-swatch"
+            :style="{ backgroundColor: color }"
+            :class="{ active: bgColor === color }"
+            @click="bgColor = color"
+          ></div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <label>ATTRIBUTES</label>
+        <div class="toggles">
+          <label class="toggle">
+            <input type="checkbox" v-model="isBold">
+            <span>Bold</span>
+          </label>
+          <label class="toggle">
+            <input type="checkbox" v-model="isUnderline">
+            <span>Underline</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P']
+const colors = [
+  '#ef4444', '#22c55e', '#eab308', '#3b82f6', '#a855f7', '#06b6d4', '#f3f4f6', '#6b7280',
+  '#f87171', '#4ade80', '#facc15', '#60a5fa', '#c084fc', '#22d3ee', '#ffffff'
+]
+const bgColors = [
+  '#000000', '#1f2937', '#111827', '#374151', '#1e3a8a', '#3f2c08', '#310b0b'
+]
+
+const char = ref('A')
+const fgColor = ref('#22c55e')
+const bgColor = ref('transparent')
+const isBold = ref(false)
+const isUnderline = ref(false)
+
+const cellStyle = computed(() => ({
+  color: fgColor.value,
+  backgroundColor: bgColor.value,
+  fontWeight: isBold.value ? 'bold' : 'normal',
+  textDecoration: isUnderline.value ? 'underline' : 'none'
+}))
+</script>
+
+<style scoped>
+.cell-inspector {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 40px;
+  background: #09090b;
+  padding: 30px;
+  border-radius: 12px;
+  border: 1px solid #27272a;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+}
+
+.preview-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  background: #000;
+  aspect-ratio: 3/4;
+}
+
+.large-cell {
+  font-size: 120px;
+  line-height: 1;
+  width: 140px;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.controls-area {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.control-group label {
+  display: block;
+  color: #a1a1aa; /* Zinc 400 */
+  font-size: 12px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+}
+
+.char-buttons {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
+}
+
+.char-buttons button {
+  background: #18181b;
+  border: 1px solid #27272a;
+  color: #a1a1aa;
+  padding: 8px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.char-buttons button:hover {
+  border-color: #52525b;
+  color: #fff;
+  background: #27272a;
+}
+
+.char-buttons button.active {
+  background: #fff;
+  color: #000;
+  border-color: #fff;
+  font-weight: bold;
+}
+
+.color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.color-swatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform 0.1s;
+}
+
+.color-swatch:hover {
+  transform: scale(1.1);
+}
+
+.color-swatch.active {
+  border-color: #fff;
+  transform: scale(1.1);
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.toggles {
+  display: flex;
+  gap: 20px;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #e4e4e7;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle input {
+  width: 16px;
+  height: 16px;
+  accent-color: #22c55e;
+}
+
+@media (max-width: 640px) {
+  .cell-inspector {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue
new file mode 100644
index 0000000..701ea50
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue
@@ -0,0 +1,418 @@
+<!--
+  EscapeSequences.vue
+  转义序列演示组件
+  
+  用途：
+  解释终端如何通过“不可见字符”来控制颜色、光标位置和清屏操作。
+  揭示 ANSI 转义序列（如 `\033[31m`）的工作原理。
+  
+  交互功能：
+  - 颜色/样式按钮：点击后发送对应的转义序列。
+  - 序列显示：实时显示当前发送的原始序列代码（如 `^[[31m`）。
+  - 终端反馈：下方模拟终端根据接收到的序列改变文字颜色或清除内容。
+-->
+<template>
+  <div class="escape-demo">
+    <div class="controls">
+      <div class="panel-section">
+        <div class="section-title">
+          <span class="en">16-COLOR PALETTE</span>
+          <span class="divider">|</span>
+          <span class="zh">16 色调色板</span>
+        </div>
+        <div class="palette-grid">
+          <div 
+            v-for="(color, index) in palette" 
+            :key="index"
+            class="swatch"
+            :style="{ backgroundColor: color }"
+            @click="applyColor(index)"
+            :title="`^[[38;5;${index}m`"
+          ></div>
+        </div>
+        <div class="hint-text" v-if="activeColor">
+          Sequence: <span class="code">^[[38;5;{{ palette.indexOf(activeColor) }}m</span>
+        </div>
+      </div>
+
+      <div class="panel-section">
+        <div class="section-title">
+          <span class="en">STYLE SEQUENCES</span>
+          <span class="divider">|</span>
+          <span class="zh">样式序列</span>
+        </div>
+        <div class="btn-group">
+          <button @click="applyStyle('1')" :class="{ active: isBold }">
+            <span class="btn-code">^[[1m</span>
+            <span class="btn-label">Bold / 加粗</span>
+          </button>
+          <button @click="applyStyle('4')" :class="{ active: isUnderline }">
+            <span class="btn-code">^[[4m</span>
+            <span class="btn-label">Underline / 下划线</span>
+          </button>
+        </div>
+        <div class="btn-group" style="margin-top: 8px">
+          <button @click="resetStyle" class="reset-btn">
+            <span class="btn-code">^[[0m</span>
+            <span class="btn-label">Reset / 重置所有样式</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="panel-section">
+        <div class="section-title">
+          <span class="en">CURSOR SEQUENCES</span>
+          <span class="divider">|</span>
+          <span class="zh">光标控制序列</span>
+        </div>
+        <div class="btn-stack">
+          <button @click="clearScreen">
+            <span class="code">^[[2J</span>
+            <span class="desc">Clear Screen / 清屏</span>
+          </button>
+          <button @click="moveHome">
+            <span class="code">^[[H</span>
+            <span class="desc">Move Home / 回到原点 (0,0)</span>
+          </button>
+          <button @click="moveTo">
+            <span class="code">^[[5;10H</span>
+            <span class="desc">Move to 5,10 / 移动到 (5,10)</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="preview">
+      <div class="terminal-window">
+        <div class="window-header">
+          <div class="dots">
+            <span></span><span></span><span></span>
+          </div>
+          <div class="window-title">Terminal Preview</div>
+        </div>
+        <div class="window-content">
+          <div class="sequence-display-area">
+            <span class="label">Last Sequence:</span>
+            <span v-if="lastSequence" class="sequence-code">{{ lastSequence }}</span>
+            <span v-else class="placeholder">Waiting for input...</span>
+          </div>
+          
+          <div class="main-display" :style="currentStyle" v-if="isContentVisible">
+            Hello World
+          </div>
+          
+          <div class="cursor-line">
+            <span class="prompt">$</span>
+            <span class="cursor-placeholder" v-if="cursorMode === 'absolute'"></span>
+            <span class="cursor-block" :style="cursorStyle"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const palette = [
+  '#000000', '#cd3131', '#0dbc79', '#e5e510', '#2472c8', '#bc3fbc', '#11a8cd', '#e5e5e5',
+  '#666666', '#f14c4c', '#23d18b', '#f5f543', '#3b8eea', '#d670d6', '#29b8db', '#ffffff'
+]
+
+const activeColor = ref(null)
+const isBold = ref(false)
+const isUnderline = ref(false)
+const lastSequence = ref('')
+const isContentVisible = ref(true)
+const cursorMode = ref('static') // 'static' | 'absolute'
+const cursorPosition = ref({ top: 0, left: 0 })
+
+const currentStyle = computed(() => ({
+  color: activeColor.value || '#ccc',
+  fontWeight: isBold.value ? 'bold' : 'normal',
+  textDecoration: isUnderline.value ? 'underline' : 'none'
+}))
+
+const cursorStyle = computed(() => {
+  if (cursorMode.value === 'static') {
+    return {}
+  }
+  return {
+    position: 'absolute',
+    top: `${cursorPosition.value.top}px`,
+    left: `${cursorPosition.value.left}px`
+  }
+})
+
+const applyColor = (index) => {
+  activeColor.value = palette[index]
+  lastSequence.value = `^[[38;5;${index}m`
+}
+
+const applyStyle = (code) => {
+  if (code === '1') isBold.value = !isBold.value
+  if (code === '4') isUnderline.value = !isUnderline.value
+  lastSequence.value = `^[[${code}m`
+}
+
+const resetStyle = () => {
+  activeColor.value = null
+  isBold.value = false
+  isUnderline.value = false
+  lastSequence.value = '^[[0m'
+  isContentVisible.value = true
+  cursorMode.value = 'static'
+}
+
+const clearScreen = () => {
+  lastSequence.value = '^[[2J'
+  isContentVisible.value = false
+}
+
+const moveHome = () => {
+  lastSequence.value = '^[[H'
+  cursorMode.value = 'absolute'
+  cursorPosition.value = { top: 20, left: 20 }
+}
+
+const moveTo = () => {
+  lastSequence.value = '^[[5;10H'
+  cursorMode.value = 'absolute'
+  // Approximate position for 5,10 (5th line, 10th char)
+  // Assuming line height ~24px, char width ~9px
+  // Base padding 20px
+  cursorPosition.value = { top: 20 + 4 * 24, left: 20 + 10 * 9 }
+}
+</script>
+
+<style scoped>
+.escape-demo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  background: #09090b;
+  padding: 30px;
+  border-radius: 12px;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+  border: 1px solid #27272a;
+}
+
+.panel-section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  color: #a1a1aa;
+  font-size: 12px;
+  margin-bottom: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-title .divider {
+  color: #3f3f46;
+  font-weight: normal;
+}
+
+.palette-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid #27272a;
+  transition: transform 0.1s;
+}
+
+.swatch:hover {
+  transform: scale(1.1);
+  border-color: #fff;
+  z-index: 1;
+}
+
+.hint-text {
+  font-size: 11px;
+  color: #71717a;
+  margin-top: 8px;
+}
+
+button {
+  background: #18181b;
+  border: 1px solid #27272a;
+  color: #e4e4e7;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  text-align: left;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button:hover {
+  background: #27272a;
+  border-color: #52525b;
+}
+
+button.active {
+  background: #27272a;
+  border-color: #22c55e;
+  color: #22c55e;
+}
+
+.btn-code {
+  color: #facc15;
+  font-weight: bold;
+  min-width: 50px;
+}
+
+.btn-label {
+  color: #a1a1aa;
+}
+
+.btn-group {
+  display: flex;
+  gap: 10px;
+}
+
+.reset-btn {
+  width: 100%;
+}
+
+.btn-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.btn-stack button {
+  display: flex;
+  justify-content: space-between;
+}
+
+.code { color: #facc15; font-weight: bold; }
+.desc { color: #a1a1aa; font-size: 12px; }
+
+.terminal-window {
+  background: #000;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.window-header {
+  padding: 10px 15px;
+  border-bottom: 1px solid #27272a;
+  background: #18181b;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dots span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #3f3f46;
+  margin-right: 6px;
+}
+
+.window-title {
+  color: #71717a;
+  font-size: 11px;
+}
+
+.window-content {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  color: #e4e4e7;
+}
+
+.sequence-display-area {
+  margin-bottom: 40px;
+  font-size: 13px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.sequence-display-area .label {
+  color: #71717a;
+}
+
+.sequence-code {
+  color: #22d3ee;
+  font-family: monospace;
+  background: #18181b;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #27272a;
+}
+
+.placeholder {
+  color: #3f3f46;
+  font-style: italic;
+}
+
+.main-display {
+  font-size: 32px;
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.cursor-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  border: 1px solid #27272a;
+  padding: 10px;
+  background: #09090b;
+  border-radius: 4px;
+}
+
+.prompt {
+  color: #22c55e;
+}
+
+.cursor-block {
+  width: 8px;
+  height: 16px;
+  background: #e4e4e7;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+@media (max-width: 768px) {
+  .escape-demo {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue
new file mode 100644
index 0000000..55f4b49
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue
@@ -0,0 +1,313 @@
+<!--
+  FlowDiagram.vue
+  输入输出流程图组件
+  
+  用途：
+  可视化展示一次按键从物理键盘到屏幕显示的完整“往返旅程” (Round Trip)。
+  将复杂的系统流程（键盘 -> 操作系统 -> 终端 -> 程序 -> 终端 -> 屏幕）抽象为清晰的图表。
+  
+  交互功能：
+  - 静态展示：清晰的 SVG 或 CSS 流程图。
+  - 节点说明：鼠标悬停可查看每个环节的具体解释。
+-->
+<template>
+  <div class="flow-diagram">
+    <div class="stack-col">
+      <div class="stack-label">TERMINAL STACK</div>
+      
+      <div class="stack-box kbd" :class="{ active: activeStage === 'kbd' }">
+        <div class="box-header">
+          <span class="box-icon">[kbd]</span>
+          <span class="box-title">You (Keyboard)</span>
+        </div>
+        <div class="box-desc">Physical keystrokes</div>
+      </div>
+
+      <div class="arrow">↓ / ↑</div>
+
+      <div class="stack-box tty" :class="{ active: activeStage === 'tty' }">
+        <div class="box-header">
+          <span class="box-icon">[tty]</span>
+          <span class="box-title">Terminal Emulator</span>
+        </div>
+        <div class="box-desc">Encodes input, renders output</div>
+      </div>
+
+      <div class="arrow">↓ / ↑</div>
+
+      <div class="stack-box pty" :class="{ active: activeStage === 'pty' }">
+        <div class="box-header">
+          <span class="box-icon">[pty]</span>
+          <span class="box-title">PTY (Pseudo-Terminal)</span>
+        </div>
+        <div class="box-desc">Bidirectional pipe</div>
+      </div>
+
+      <div class="arrow">↓ / ↑</div>
+
+      <div class="stack-box sh" :class="{ active: activeStage === 'sh' }">
+        <div class="box-header">
+          <span class="box-icon">[sh]</span>
+          <span class="box-title">Shell / Program</span>
+        </div>
+        <div class="box-desc">bash, zsh, or any CLI program</div>
+      </div>
+    </div>
+
+    <div class="output-col">
+      <div class="output-label">OUTPUT</div>
+      
+      <div class="terminal-preview">
+        <div class="term-header">
+          <span></span><span></span><span></span>
+        </div>
+        <div class="term-body">
+          <span class="prompt">$ </span>
+          <span class="typed-text">{{ displayText }}</span>
+          <span class="cursor" :class="{ blinking: !isAnimating }"></span>
+        </div>
+      </div>
+
+      <div class="status-box">
+        <div class="status-title" :class="statusColor">{{ statusTitle }}</div>
+        <div class="status-desc">{{ statusDesc }}</div>
+      </div>
+
+      <div class="controls">
+        <button class="play-btn" @click="startAnimation" :disabled="isAnimating">
+          {{ isAnimating ? 'Simulating...' : 'Simulate Keystroke' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeStage = ref(null)
+const isAnimating = ref(false)
+const displayText = ref('')
+const statusTitle = ref('Ready')
+const statusDesc = ref('The terminal is waiting. The cursor blinks.')
+
+const statusColor = computed(() => {
+  if (statusTitle.value === 'Ready') return 'text-red'
+  return 'text-green'
+})
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+const startAnimation = async () => {
+  if (isAnimating.value) return
+  isAnimating.value = true
+  displayText.value = ''
+  
+  // Stage 1: Keyboard
+  activeStage.value = 'kbd'
+  statusTitle.value = 'Input'
+  statusDesc.value = 'Key "l" pressed. Physical event generated.'
+  await sleep(800)
+
+  // Stage 2: Terminal Emulator
+  activeStage.value = 'tty'
+  statusDesc.value = 'Terminal encodes key to byte 0x6C.'
+  await sleep(800)
+
+  // Stage 3: PTY
+  activeStage.value = 'pty'
+  statusDesc.value = 'Bytes travel through the pseudo-terminal pipe.'
+  await sleep(800)
+
+  // Stage 4: Shell
+  activeStage.value = 'sh'
+  statusTitle.value = 'Processing'
+  statusDesc.value = 'Shell receives 0x6C, decides to echo it back.'
+  await sleep(800)
+
+  // Return Trip
+  // Stage 3: PTY
+  activeStage.value = 'pty'
+  statusTitle.value = 'Output'
+  statusDesc.value = 'Shell sends 0x6C back through PTY.'
+  await sleep(600)
+
+  // Stage 2: Terminal Emulator
+  activeStage.value = 'tty'
+  statusDesc.value = 'Terminal receives 0x6C, renders "l" character.'
+  displayText.value = 'l'
+  await sleep(600)
+
+  // Finish
+  activeStage.value = null
+  statusTitle.value = 'Ready'
+  statusDesc.value = 'The terminal is waiting. The cursor blinks.'
+  isAnimating.value = false
+}
+</script>
+
+<style scoped>
+.flow-diagram {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  background: #0a0a0a;
+  padding: 30px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  font-family: 'Menlo', monospace;
+  color: #ccc;
+}
+
+.stack-col, .output-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.stack-label, .output-label {
+  color: #eab308;
+  font-size: 12px;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+}
+
+.stack-box {
+  background: #111;
+  border: 1px solid #333;
+  padding: 15px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  opacity: 0.5;
+}
+
+.stack-box.active {
+  opacity: 1;
+  border-color: #22c55e;
+  background: #1a1a1a;
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
+}
+
+.box-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.box-icon {
+  color: #666;
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+.box-title {
+  font-weight: bold;
+  color: #fff;
+}
+
+.box-desc {
+  color: #666;
+  font-size: 12px;
+  margin-left: 40px;
+}
+
+.arrow {
+  text-align: center;
+  color: #444;
+  margin: 10px 0;
+  font-size: 12px;
+}
+
+.terminal-preview {
+  background: #000;
+  border: 1px solid #333;
+  border-radius: 6px;
+  height: 200px;
+  margin-bottom: 20px;
+}
+
+.term-header {
+  padding: 8px;
+  border-bottom: 1px solid #222;
+}
+
+.term-header span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #333;
+  margin-right: 5px;
+}
+
+.term-body {
+  padding: 15px;
+  font-size: 16px;
+  color: #fff;
+}
+
+.prompt { color: #888; }
+.typed-text { color: #22c55e; }
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  background: #22c55e;
+  vertical-align: middle;
+  margin-left: 2px;
+}
+
+.cursor.blinking {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.status-box {
+  background: #111;
+  padding: 15px;
+  border-radius: 4px;
+  border: 1px solid #333;
+  margin-bottom: 20px;
+}
+
+.status-title {
+  font-size: 16px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.status-desc {
+  color: #888;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.text-red { color: #ef4444; }
+.text-green { color: #22c55e; }
+
+.play-btn {
+  width: 100%;
+  padding: 12px;
+  background: #22c55e;
+  border: none;
+  border-radius: 4px;
+  color: #000;
+  font-weight: bold;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.play-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .flow-diagram {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue
new file mode 100644
index 0000000..f964381
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue
@@ -0,0 +1,292 @@
+<!--
+  InputVisualizer.vue
+  输入可视化组件
+  
+  用途：
+  展示键盘输入在底层是如何被转换为字节流发送给终端的。
+  纠正“按键直接上屏”的误区，强调“按键 -> 编码 -> 发送”的过程。
+  
+  交互功能：
+  - 键盘监听：捕获用户的真实按键。
+  - 数据展示：同时显示按键名、16进制字节码和转义序列（如方向键）。
+  - 历史记录：记录最近几次按键的编码流。
+-->
+<template>
+  <div class="input-visualizer" tabindex="0" @keydown="handleKeydown" @blur="handleBlur">
+    <div class="focus-overlay" v-if="!isFocused" @click="focus">
+      <div class="focus-btn">
+        <span class="icon">⌨️</span>
+        <span>Click to Type</span>
+      </div>
+    </div>
+
+    <div class="main-display" :class="{ 'blur-content': !isFocused }">
+      <div class="key-name">{{ currentKey.name || 'Press any key' }}</div>
+      
+      <div class="info-grid">
+        <div class="info-box">
+          <div class="label">BYTES (HEX)</div>
+          <div class="value highlight">{{ currentKey.bytes || '-' }}</div>
+        </div>
+        <div class="info-box">
+          <div class="label">SEQUENCE</div>
+          <div class="value code">{{ currentKey.sequence || '-' }}</div>
+        </div>
+      </div>
+      
+      <div class="char-display">
+        Character: <span class="char-val">{{ currentKey.charDisplay || '-' }}</span>
+      </div>
+    </div>
+
+    <div class="history-strip">
+      <div v-for="(item, i) in history" :key="i" class="history-item">
+        <span class="h-name">{{ item.name }}</span>
+        <span class="arrow">→</span>
+        <span class="h-bytes">{{ item.bytes }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isFocused = ref(false)
+const currentKey = ref({ name: '', bytes: '', sequence: '', charDisplay: '' })
+const history = ref([])
+
+const focus = (e) => {
+  // Find the parent .input-visualizer and focus it
+  const container = e.currentTarget.closest('.input-visualizer')
+  if (container) {
+    container.focus()
+    isFocused.value = true
+  }
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const handleKeydown = (e) => {
+  e.preventDefault()
+  
+  let name = e.key
+  let bytes = ''
+  let sequence = ''
+  let charDisplay = e.key
+
+  // Map special keys
+  const keyMap = {
+    ' ': { name: 'Space', bytes: '20', char: ' ' },
+    'Enter': { name: 'Enter', bytes: '0a', char: '\\n' },
+    'Tab': { name: 'Tab', bytes: '09', char: '\\t' },
+    'Escape': { name: 'Esc', bytes: '1b', char: '\\e' },
+    'Backspace': { name: 'Backspace', bytes: '7f', char: '\\b' },
+    'Delete': { name: 'Del', bytes: '1b 5b 33 7e', sequence: '^[[3~' },
+    'ArrowUp': { name: 'Arrow Up', bytes: '1b 5b 41', sequence: '^[[A' },
+    'ArrowDown': { name: 'Arrow Down', bytes: '1b 5b 42', sequence: '^[[B' },
+    'ArrowRight': { name: 'Arrow Right', bytes: '1b 5b 43', sequence: '^[[C' },
+    'ArrowLeft': { name: 'Arrow Left', bytes: '1b 5b 44', sequence: '^[[D' },
+  }
+
+  if (keyMap[e.key]) {
+    const map = keyMap[e.key]
+    name = map.name
+    bytes = map.bytes
+    sequence = map.sequence || ''
+    charDisplay = map.char || map.name
+  } else if (e.key.length === 1) {
+    // Printable characters
+    const code = e.key.charCodeAt(0)
+    bytes = code.toString(16).toLowerCase().padStart(2, '0')
+    if (e.ctrlKey) {
+      // Ctrl + Letter
+      name = `Ctrl+${e.key.toUpperCase()}`
+      const ctrlCode = code >= 97 && code <= 122 ? code - 96 : code
+      bytes = ctrlCode.toString(16).toLowerCase().padStart(2, '0')
+      sequence = '^' + e.key.toUpperCase()
+      charDisplay = sequence
+    }
+  } else {
+    // Other special keys
+    name = e.key
+    charDisplay = e.key
+  }
+
+  const keyData = { name, bytes, sequence, charDisplay }
+  currentKey.value = keyData
+  
+  history.value.unshift(keyData)
+  if (history.value.length > 5) history.value.pop()
+}
+</script>
+
+<style scoped>
+.input-visualizer {
+  position: relative;
+  background: #09090b; /* Slightly lighter than pure black */
+  border: 1px solid #27272a;
+  border-radius: 12px;
+  padding: 30px 20px;
+  text-align: center;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+  outline: none;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input-visualizer:focus {
+  border-color: #10b981; /* Emerald 500 */
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+}
+
+.focus-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.2s;
+}
+
+.focus-overlay:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.focus-btn {
+  background: #10b981;
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  transition: transform 0.1s;
+}
+
+.focus-btn:hover {
+  transform: translateY(-1px);
+}
+
+.focus-btn:active {
+  transform: translateY(1px);
+}
+
+.main-display {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s, filter 0.2s;
+}
+
+.blur-content {
+  opacity: 0.5;
+  filter: blur(1px);
+}
+
+.key-name {
+  font-size: 36px;
+  font-weight: 700;
+  color: #e4e4e7; /* Zinc 200 */
+  margin-bottom: 30px;
+  height: 50px;
+  line-height: 50px;
+}
+
+.info-grid {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 30px;
+  width: 100%;
+}
+
+.info-box {
+  background: #18181b; /* Zinc 900 */
+  padding: 16px 20px;
+  border-radius: 8px;
+  min-width: 140px;
+  border: 1px solid #27272a;
+}
+
+.label {
+  color: #71717a; /* Zinc 500 */
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+
+.value {
+  font-size: 24px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.highlight { color: #facc15; /* Yellow 400 */ }
+.code { color: #22d3ee; /* Cyan 400 */ }
+
+.char-display {
+  color: #a1a1aa; /* Zinc 400 */
+  font-size: 14px;
+}
+
+.char-val {
+  color: #fff;
+  font-weight: bold;
+  background: #27272a;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 5px;
+}
+
+.history-strip {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  border-top: 1px solid #27272a;
+  padding-top: 20px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  background: #18181b;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #a1a1aa;
+  border: 1px solid #27272a;
+}
+
+.arrow { 
+  color: #71717a; /* Lighter grey for better visibility */
+  margin: 0 8px; 
+}
+
+.h-name {
+  font-weight: 500;
+  color: #e4e4e7;
+}
+
+.h-bytes { 
+  color: #facc15; 
+  font-family: monospace;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/README.md b/docs/.vitepress/theme/components/appendix/terminal-intro/README.md
new file mode 100644
index 0000000..f13122b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/README.md
@@ -0,0 +1,42 @@
+# Terminal Intro Components
+
+此目录包含 `docs/zh-cn/appendix/terminal-intro.md`（终端原理附录）页面使用的所有交互式 Vue 组件。
+
+这些组件旨在通过可视化和互动的方式，帮助读者理解终端的工作原理、ANSI 转义序列、Shell 交互等概念。
+
+## 组件列表
+
+| 组件名 | 描述 | 对应文档章节 |
+| :--- | :--- | :--- |
+| **TerminalDefinition.vue** | 可视化终端作为“字符流输入/输出环境”的定义。展示键盘输入 -> 字符流 -> 屏幕输出的过程。 | 1. 概念界定 |
+| **ArchitectureDemo.vue** | 演示终端（前端）与 Shell（后端）的分离架构。模拟点餐流程类比。 | 2. 核心架构 |
+| **TerminalGrid.vue** | 展示终端的字符网格系统，演示行、列和单元格的概念。 | 3. 视觉模型 |
+| **CellInspector.vue** | 单元格检查器，展示每个字符单元格背后的属性（字符、前景色、背景色等）。 | 3.2 样式检查 |
+| **EscapeSequences.vue** | 演示 ANSI 转义序列如何控制颜色、样式、光标移动和清屏。 | 4. 通信协议 |
+| **InputVisualizer.vue** | 可视化键盘按键如何转换为字节序列发送给 Shell。 | 5. 输入机制 |
+| **WebTerminal.vue** | 一个功能较完整的模拟终端，支持 `ls`, `cd`, `cat`, `apt` 等命令，包含虚拟文件系统。 | 附录/综合演示 |
+| **SignalsDemo.vue** | 演示终端信号（如 Ctrl+C SIGINT）的工作机制。 | (文档中可能引用) |
+| **FlowDiagram.vue** | 展示标准输入/输出/错误流 (stdin/stdout/stderr) 的流向图。 | (文档中可能引用) |
+| **AdvancedTUIDemo.vue** | 展示基于文本的用户界面 (TUI) 的高级布局能力（如面板、进度条）。 | (文档中可能引用) |
+
+## 开发指南
+
+### 技术栈
+- **Vue 3**: 使用 `<script setup>` 语法。
+- **Styling**: Scoped CSS，主要使用 Flexbox 和 Grid 布局。
+- **Theme**: 统一使用黑色系背景 (`#09090b`, `#18181b`) 和 JetBrains Mono 字体，保持类似终端的视觉风格。
+
+### 维护注意事项
+1.  **双语支持**: 组件内部文本尽量支持中英双语，或通过 Props 传入文本。目前部分组件已硬编码双语标签。
+2.  **自包含**: 组件应尽量自包含，不依赖外部复杂的 Store 或 Context，以便于在 Markdown 中直接使用。
+3.  **响应式**: 考虑移动端适配，通常使用 `@media (max-width: 768px)` 进行布局调整。
+
+### 常用颜色变量 (参考)
+- 背景: `#09090b` (Main), `#18181b` (Panel)
+- 边框: `#27272a`
+- 文本: `#e4e4e7` (Primary), `#a1a1aa` (Secondary)
+- 强调色: `#22c55e` (Green/Success), `#facc15` (Yellow/Warning), `#22d3ee` (Cyan/Info)
+
+## 目录结构
+所有组件均位于 `docs/.vitepress/theme/components/appendix/terminal-intro/` 下。
+注册逻辑位于 `docs/.vitepress/theme/index.js`。
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue
new file mode 100644
index 0000000..478da3b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue
@@ -0,0 +1,366 @@
+<!--
+  SignalsDemo.vue
+  信号机制演示组件
+  
+  用途：
+  演示进程控制信号（Signals）如何工作，特别是 `Ctrl+C` 和 `Ctrl+Z`。
+  说明这些组合键不是发送字符，而是触发操作系统级别的中断信号。
+  
+  交互功能：
+  - 模拟运行：点击按钮启动一个模拟进程（如 `sleep 100`）。
+  - 发送信号：点击按钮或快捷键发送 SIGINT/SIGTSTP。
+  - 状态反馈：展示进程状态的变化（运行中 -> 被杀死/被挂起）。
+-->
+<template>
+  <div class="signals-demo">
+    <div class="left-panel">
+      <div class="signal-list">
+        <div 
+          class="signal-item" 
+          :class="{ active: activeSignal === 'SIGINT' }"
+          @click="sendSignal('SIGINT')"
+        >
+          <div class="key-combo">
+            <span class="key">Ctrl</span>+<span class="key">C</span>
+            <span class="action">Interrupt</span>
+          </div>
+          <div class="signal-name">SIGINT</div>
+        </div>
+
+        <div 
+          class="signal-item" 
+          :class="{ active: activeSignal === 'SIGTSTP' }"
+          @click="sendSignal('SIGTSTP')"
+        >
+          <div class="key-combo">
+            <span class="key">Ctrl</span>+<span class="key">Z</span>
+            <span class="action">Suspend</span>
+          </div>
+          <div class="signal-name">SIGTSTP</div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <div v-if="activeSignal === 'SIGINT'">
+          <div class="info-header">
+            <span class="highlight">Ctrl+C</span> → <span class="signal-green">SIGINT</span>
+          </div>
+          <div class="info-desc">Stop the running program</div>
+          <p>Sends SIGINT (signal interrupt) to the foreground process. Most programs respond by stopping immediately. It's how you cancel a long-running command or exit a program that's stuck.</p>
+          <div class="example-box">
+            Example: Running `sleep 100` and pressing Ctrl+C stops it immediately.
+          </div>
+        </div>
+        <div v-else-if="activeSignal === 'SIGTSTP'">
+          <div class="info-header">
+            <span class="highlight">Ctrl+Z</span> → <span class="signal-blue">SIGTSTP</span>
+          </div>
+          <div class="info-desc">Suspend the running program</div>
+          <p>Sends SIGTSTP (signal terminal stop). The process is paused and put in the background. You can resume it later with `fg` command.</p>
+          <div class="example-box">
+            Example: Pressing Ctrl+Z pauses a running editor like vim, returning you to the shell.
+          </div>
+        </div>
+        <div v-else>
+          <div class="info-header">Select a signal</div>
+          <p>Click on a signal type above to see how it works.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="right-panel">
+      <div class="terminal-window">
+        <div class="window-header">
+          <div class="dots"><span></span><span></span><span></span></div>
+        </div>
+        <div class="window-content">
+          <div v-for="(line, i) in lines" :key="i" class="term-line" :class="line.type">
+            {{ line.text }}
+          </div>
+          <div v-if="isRunning" class="term-line output">sleeping...</div>
+          <div v-if="inputBuffer" class="term-line input">
+            <span class="prompt">$</span> {{ inputBuffer }}<span class="cursor"></span>
+          </div>
+          <div v-else class="term-line input">
+            <span class="prompt">$</span> <span class="cursor"></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button class="btn" @click="runCommand" :disabled="isRunning">Run Command</button>
+        <button class="btn" @click="sendSignal('SIGINT')">Ctrl+C</button>
+        <button class="btn" @click="sendSignal('SIGTSTP')">Ctrl+Z</button>
+        <button class="btn secondary" @click="reset">Reset</button>
+      </div>
+
+      <div class="state-display">
+        State: <span :class="stateClass">{{ processState }}</span>
+      </div>
+      
+      <p class="instruction">
+        Click "Run Command" to start a simulated process, then try sending different signals.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeSignal = ref('SIGINT')
+const isRunning = ref(false)
+const lines = ref([
+  { type: 'input', text: '$ sleep 100' }
+])
+const processState = ref('Running')
+const inputBuffer = ref('')
+
+const stateClass = computed(() => {
+  if (processState.value.includes('Running')) return 'state-green'
+  if (processState.value.includes('interrupted')) return 'state-red'
+  if (processState.value.includes('suspended')) return 'state-blue'
+  return ''
+})
+
+const runCommand = () => {
+  reset()
+  isRunning.value = true
+  processState.value = 'Running (PID 1234)'
+}
+
+const sendSignal = (sig) => {
+  activeSignal.value = sig
+  
+  if (!isRunning.value && sig === 'SIGINT') return
+
+  if (sig === 'SIGINT') {
+    lines.value.push({ type: 'output', text: 'sleeping...' })
+    lines.value.push({ type: 'control', text: '^C' })
+    isRunning.value = false
+    processState.value = 'Process interrupted (killed)'
+  } else if (sig === 'SIGTSTP') {
+    lines.value.push({ type: 'output', text: 'sleeping...' })
+    lines.value.push({ type: 'control', text: '^Z' })
+    lines.value.push({ type: 'output', text: '[1]+  Stopped                 sleep 100' })
+    isRunning.value = false
+    processState.value = 'Process suspended (stopped)'
+  }
+}
+
+const reset = () => {
+  lines.value = [{ type: 'input', text: '$ sleep 100' }]
+  isRunning.value = true
+  processState.value = 'Running (PID 1234)'
+}
+
+// Initial state
+reset()
+</script>
+
+<style scoped>
+.signals-demo {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 自动适应宽度，不够时换行 */
+  gap: 30px;
+  background: #09090b;
+  padding: 30px;
+  border-radius: 12px;
+  border: 1px solid #27272a;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+  color: #e4e4e7;
+  overflow: hidden; /* 防止溢出 */
+}
+
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0; /* 防止 flex 子项溢出 */
+}
+
+.signal-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  background: #18181b;
+  border: 1px solid #27272a;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.signal-item:hover {
+  border-color: #52525b;
+}
+
+.signal-item.active {
+  background: #27272a;
+  border-left: 3px solid #facc15;
+}
+
+.key-combo {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.key {
+  color: #facc15;
+  font-weight: bold;
+}
+
+.action {
+  color: #a1a1aa;
+  margin-left: 10px;
+  font-size: 13px;
+}
+
+.signal-name {
+  color: #22d3ee;
+  font-weight: bold;
+}
+
+.info-box {
+  background: #18181b;
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid #27272a;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.info-header {
+  font-size: 18px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.highlight { color: #facc15; }
+.signal-green { color: #22c55e; }
+.signal-blue { color: #3b82f6; }
+
+.info-desc {
+  color: #a1a1aa;
+  margin-bottom: 15px;
+}
+
+.example-box {
+  background: #000;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #d4d4d8;
+  margin-top: 15px;
+  border: 1px solid #27272a;
+}
+
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0; /* 防止 flex 子项溢出 */
+}
+
+.terminal-window {
+  background: #000;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.window-header {
+  padding: 10px 15px;
+  border-bottom: 1px solid #27272a;
+  background: #18181b;
+}
+
+.dots span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #3f3f46;
+  margin-right: 6px;
+}
+
+.window-content {
+  padding: 15px;
+  flex: 1;
+  font-size: 14px;
+  overflow-y: auto;
+}
+
+.term-line {
+  margin-bottom: 5px;
+}
+
+.control { color: #ef4444; }
+.output { color: #d4d4d8; }
+.input { color: #fff; }
+.prompt { color: #71717a; margin-right: 8px; }
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 14px;
+  background: #a1a1aa;
+  vertical-align: middle;
+}
+
+.controls {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap; /* 允许按钮换行 */
+}
+
+.btn {
+  background: #18181b;
+  border: 1px solid #27272a;
+  color: #e4e4e7;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  flex: 1;
+  white-space: nowrap; /* 防止文字换行 */
+  min-width: 80px; /* 最小宽度 */
+  transition: all 0.2s;
+  font-size: 13px;
+}
+
+.btn:hover:not(:disabled) {
+  background: #27272a;
+  border-color: #52525b;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.state-display {
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.state-green { color: #22c55e; }
+.state-red { color: #ef4444; }
+.state-blue { color: #3b82f6; }
+
+.instruction {
+  color: #a1a1aa;
+  font-size: 13px;
+}
+
+@media (max-width: 640px) {
+  .signals-demo {
+    padding: 20px;
+    gap: 20px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue
new file mode 100644
index 0000000..7f095dd
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue
@@ -0,0 +1,576 @@
+<template>
+  <div class="terminal-definition">
+    <div class="mode-switch">
+      <button 
+        :class="{ active: mode === 'cli' }" 
+        @click="mode = 'cli'"
+      >
+        🖥️ CLI (命令行界面)
+      </button>
+      <button 
+        :class="{ active: mode === 'gui' }" 
+        @click="mode = 'gui'"
+      >
+        🖱️ GUI (图形用户界面)
+      </button>
+    </div>
+
+    <!-- CLI Visualization -->
+    <div v-if="mode === 'cli'" class="visualization-container">
+      <div class="flow-container">
+        <!-- Input Side -->
+        <div class="stage input-stage">
+          <div class="icon-box">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect><path d="M6 8h.001"></path><path d="M10 8h.001"></path><path d="M14 8h.001"></path><path d="M18 8h.001"></path><path d="M6 12h.001"></path><path d="M10 12h.001"></path><path d="M14 12h.001"></path><path d="M18 12h.001"></path><path d="M7 16h10"></path></svg>
+          </div>
+          <div class="label">Input (Keyboard)</div>
+          <div class="sub-label">发送指令 (字符信号)</div>
+        </div>
+
+        <!-- Stream Animation -->
+        <div class="stream-path">
+          <div class="stream-line"></div>
+          <div class="stream-label">Character Stream / 字符流</div>
+          <div 
+            v-for="char in activeChars" 
+            :key="char.id"
+            class="stream-char"
+            :style="{ left: char.progress + '%' }"
+          >
+            {{ char.val }}
+          </div>
+        </div>
+
+        <!-- Output Side -->
+        <div class="stage output-stage">
+          <div class="terminal-screen">
+            <div class="screen-content">
+              <span class="prompt">$</span> {{ typedContent }}<span class="cursor">_</span>
+            </div>
+          </div>
+          <div class="label">Output (Text Grid)</div>
+          <div class="sub-label">文本网格反馈</div>
+        </div>
+      </div>
+      
+      <div class="desc-box">
+        <p><strong>CLI (Command Line Interface)</strong>: 这种模式下，计算机只认识字符。你的每一次按键都会被转换成编码发送给系统，系统处理后返回文字结果。它不关心你在哪里点击，只关心你输入了什么。</p>
+      </div>
+
+      <div class="control-bar">
+        <button @click="startSimulation" :disabled="isAnimating">
+          <span v-if="!isAnimating">▶ Play Simulation / 演示输入流</span>
+          <span v-else>Simulating... / 演示中...</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- GUI Visualization -->
+    <div v-else class="visualization-container">
+      <div class="flow-container">
+        <!-- Input Side -->
+        <div class="stage input-stage">
+          <div class="icon-box gui-input" :class="{ clicking: isGuiClicking }">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+          </div>
+          <div class="label">Input (Mouse)</div>
+          <div class="sub-label">发送事件 (坐标/点击)</div>
+        </div>
+
+        <!-- Event Animation -->
+        <div class="stream-path">
+          <div class="stream-line dashed"></div>
+          <div class="stream-label">Event Loop / 事件循环</div>
+          <div 
+            v-if="guiEvent"
+            class="gui-event-packet"
+            :style="{ left: guiEvent.progress + '%' }"
+          >
+            {{ guiEvent.type }}
+          </div>
+        </div>
+
+        <!-- Output Side -->
+        <div class="stage output-stage">
+          <div class="gui-screen">
+            <div class="window-frame">
+              <div class="win-header"></div>
+              <div class="win-body">
+                <div class="icon-grid">
+                  <div class="desktop-icon" :class="{ selected: iconSelected }">📁</div>
+                  <div class="desktop-icon">📄</div>
+                </div>
+                <div class="gui-cursor" :style="cursorStyle">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="2"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="label">Output (Graphics)</div>
+          <div class="sub-label">像素图形渲染</div>
+        </div>
+      </div>
+
+      <div class="desc-box">
+        <p><strong>GUI (Graphical User Interface)</strong>: 这种模式下，计算机实时追踪鼠标坐标和点击事件，并每秒刷新 60 次屏幕像素。它更直观，但需要消耗大量资源来处理图形渲染。</p>
+      </div>
+
+      <div class="control-bar">
+        <button @click="startGuiSimulation" :disabled="isGuiAnimating">
+          <span v-if="!isGuiAnimating">▶ Play Interaction / 演示交互</span>
+          <span v-else>Simulating... / 演示中...</span>
+        </button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const mode = ref('cli') // 'cli' | 'gui'
+
+// CLI Logic
+const isAnimating = ref(false)
+const activeChars = ref([])
+const typedContent = ref('')
+const demoText = 'ls -la'
+
+const startSimulation = () => {
+  if (isAnimating.value) return
+  isAnimating.value = true
+  typedContent.value = ''
+  activeChars.value = []
+  
+  let index = 0
+  
+  const processNextChar = () => {
+    if (index >= demoText.length) {
+      setTimeout(() => {
+        isAnimating.value = false
+      }, 1000)
+      return
+    }
+
+    const char = demoText[index]
+    const charId = Date.now() + index
+    
+    // Create new flying char
+    const newChar = {
+      id: charId,
+      val: char,
+      progress: 10 // start position
+    }
+    
+    activeChars.value.push(newChar)
+    
+    // Animate this char
+    let progress = 10
+    const interval = setInterval(() => {
+      progress += 2
+      const charObj = activeChars.value.find(c => c.id === charId)
+      if (charObj) charObj.progress = progress
+      
+      if (progress >= 90) {
+        clearInterval(interval)
+        // Remove from stream and add to screen
+        activeChars.value = activeChars.value.filter(c => c.id !== charId)
+        typedContent.value += char
+        
+        // Next char
+        index++
+        setTimeout(processNextChar, 300)
+      }
+    }, 20)
+  }
+  
+  processNextChar()
+}
+
+// GUI Logic
+const isGuiAnimating = ref(false)
+const isGuiClicking = ref(false)
+const guiEvent = ref(null)
+const iconSelected = ref(false)
+const cursorPosition = ref({ x: 50, y: 50 })
+
+const cursorStyle = computed(() => ({
+  transform: `translate(${cursorPosition.value.x}px, ${cursorPosition.value.y}px)`
+}))
+
+const startGuiSimulation = () => {
+  if (isGuiAnimating.value) return
+  isGuiAnimating.value = true
+  iconSelected.value = false
+  cursorPosition.value = { x: 80, y: 60 } // Reset pos
+  
+  // 1. Move Cursor
+  let step = 0
+  const moveInterval = setInterval(() => {
+    step++
+    cursorPosition.value = { 
+      x: 80 - step * 2, 
+      y: 60 - step * 1.5 
+    }
+    
+    if (step >= 20) {
+      clearInterval(moveInterval)
+      // 2. Click
+      performClick()
+    }
+  }, 20)
+}
+
+const performClick = () => {
+  setTimeout(() => {
+    isGuiClicking.value = true
+    
+    // Send Event Packet
+    guiEvent.value = { type: 'Click(40,30)', progress: 10 }
+    
+    let progress = 10
+    const packetInterval = setInterval(() => {
+      progress += 2
+      if (guiEvent.value) guiEvent.value.progress = progress
+      
+      if (progress >= 90) {
+        clearInterval(packetInterval)
+        guiEvent.value = null
+        isGuiClicking.value = false
+        iconSelected.value = true // Effect
+        
+        setTimeout(() => {
+          isGuiAnimating.value = false
+        }, 1000)
+      }
+    }, 10)
+    
+  }, 300)
+}
+</script>
+
+<style scoped>
+.terminal-definition {
+  background: #09090b;
+  border: 1px solid #27272a;
+  border-radius: 12px;
+  padding: 20px;
+  font-family: 'JetBrains Mono', monospace;
+  margin: 20px 0;
+}
+
+.mode-switch {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #27272a;
+  padding-bottom: 15px;
+}
+
+.mode-switch button {
+  background: transparent;
+  border: 1px solid transparent;
+  color: #71717a;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.mode-switch button.active {
+  background: #27272a;
+  color: #e4e4e7;
+  border-color: #3f3f46;
+}
+
+.mode-switch button:hover {
+  color: #e4e4e7;
+}
+
+.flow-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  height: 120px;
+}
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 2;
+  position: relative;
+  width: 100px;
+}
+
+.input-stage {
+  flex: 0 0 auto;
+}
+
+.output-stage {
+  flex: 0 0 auto;
+}
+
+.icon-box {
+  width: 60px;
+  height: 60px;
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a1a1aa;
+  margin-bottom: 10px;
+  transition: all 0.2s;
+}
+
+.icon-box.clicking {
+  transform: scale(0.9);
+  border-color: #22d3ee;
+  color: #22d3ee;
+}
+
+.terminal-screen {
+  width: 140px;
+  height: 80px;
+  background: #000;
+  border: 1px solid #3f3f46;
+  border-radius: 8px;
+  padding: 10px;
+  color: #22c55e;
+  font-size: 12px;
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10px;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
+  overflow: hidden;
+}
+
+.gui-screen {
+  width: 140px;
+  height: 80px;
+  background: #27272a;
+  border: 1px solid #52525b;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+.window-frame {
+  background: #3f3f46;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.win-header {
+  height: 12px;
+  background: #52525b;
+  border-bottom: 1px solid #27272a;
+}
+
+.win-body {
+  flex: 1;
+  background: #18181b; /* Wallpaper */
+  position: relative;
+  padding: 10px;
+}
+
+.icon-grid {
+  display: flex;
+  gap: 10px;
+}
+
+.desktop-icon {
+  font-size: 16px;
+  padding: 2px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.desktop-icon.selected {
+  background: rgba(34, 211, 238, 0.2);
+  border-color: #22d3ee;
+}
+
+.gui-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transition: transform 0.05s linear;
+  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
+}
+
+.screen-content {
+  word-break: break-all;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #e4e4e7;
+  text-align: center;
+}
+
+.sub-label {
+  font-size: 10px;
+  color: #71717a;
+  margin-top: 2px;
+  text-align: center;
+}
+
+.stream-path {
+  flex: 1;
+  height: 60px;
+  position: relative;
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stream-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #27272a;
+  transform: translateY(-50%);
+}
+
+.stream-line.dashed {
+  background: repeating-linear-gradient(90deg, #27272a 0, #27272a 6px, transparent 6px, transparent 10px);
+  height: 1px;
+}
+
+.stream-line::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left: 6px solid #27272a;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.stream-label {
+  position: absolute;
+  top: 10px;
+  font-size: 10px;
+  color: #52525b;
+  background: #09090b;
+  padding: 0 8px;
+}
+
+.stream-char {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #22d3ee;
+  color: #000;
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
+  z-index: 10;
+}
+
+.gui-event-packet {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #facc15;
+  color: #000;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  box-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.cursor {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.desc-box {
+  background: #18181b;
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  font-size: 13px;
+  color: #a1a1aa;
+  line-height: 1.5;
+}
+
+.desc-box strong {
+  color: #e4e4e7;
+}
+
+.control-bar {
+  display: flex;
+  justify-content: center;
+}
+
+button {
+  background: #18181b;
+  color: #e4e4e7;
+  border: 1px solid #27272a;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button:hover:not(:disabled) {
+  background: #27272a;
+  border-color: #52525b;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 600px) {
+  .flow-container {
+    flex-direction: column;
+    height: auto;
+    gap: 20px;
+  }
+  
+  .stream-path {
+    width: 100%;
+    height: 40px;
+    margin: 10px 0;
+  }
+  
+  .stream-line {
+    transform: rotate(90deg);
+    width: 40px;
+    left: 50%;
+    margin-left: -20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue
new file mode 100644
index 0000000..f558ded
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue
@@ -0,0 +1,246 @@
+<!--
+  TerminalGrid.vue
+  终端网格模型演示组件
+  
+  用途：
+  展示终端屏幕本质上是由“字符网格”构成的。
+  帮助用户理解终端不是像素画板，而是由一个个固定大小的单元格（Cell）组成的矩阵。
+  
+  交互功能：
+  - 点击/拖拽：可以在网格上“画”出字符。
+  - 键盘输入：可以直接在网格中打字，观察光标移动和字符填充。
+  - 响应式布局：支持横向滚动，适应不同屏幕宽度。
+-->
+<template>
+  <div class="grid-demo">
+    <div class="terminal-screen">
+      <div class="grid-row" v-for="(row, rIndex) in rows" :key="rIndex">
+        <div 
+          class="grid-cell" 
+          v-for="(cell, cIndex) in row" 
+          :key="cIndex"
+          :class="{ 
+            'active-cursor': cursor.r === rIndex && cursor.c === cIndex,
+            'drawn': cell.drawn 
+          }"
+          @mousedown.prevent="handleCellMouseDown(rIndex, cIndex)"
+          @mouseover="handleCellHover(rIndex, cIndex)"
+        >
+          {{ cell.char || ' ' }}
+        </div>
+      </div>
+    </div>
+    
+    <div class="controls">
+      <input 
+        ref="inputRef"
+        type="text" 
+        v-model="inputText" 
+        placeholder="Type here..."
+        class="text-input"
+        @keydown="handleKeydown"
+      />
+      <button class="btn" @click="clearGrid">Clear</button>
+      <span class="hint">Click/Drag cells to draw, Type to insert text</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+
+const ROW_COUNT = 10
+const COL_COUNT = 40
+
+const createGrid = () => Array.from({ length: ROW_COUNT }, () => 
+  Array.from({ length: COL_COUNT }, () => ({ char: '', drawn: false }))
+)
+
+const rows = reactive(createGrid())
+const cursor = reactive({ r: 0, c: 0 })
+const inputText = ref('')
+const isDrawing = ref(false)
+const inputRef = ref(null)
+const drawingListener = () => {
+  isDrawing.value = false
+}
+
+const handleKeydown = (e) => {
+  if (e.key === 'Backspace') {
+    if (cursor.c > 0) {
+      cursor.c--
+    } else if (cursor.r > 0) {
+      cursor.r--
+      cursor.c = COL_COUNT - 1
+    }
+    rows[cursor.r][cursor.c].char = ''
+    return
+  }
+  
+  if (e.key.length === 1) {
+    rows[cursor.r][cursor.c].char = e.key
+    advanceCursor()
+  }
+  
+  if (e.key === 'Enter') {
+    cursor.r = Math.min(cursor.r + 1, ROW_COUNT - 1)
+    cursor.c = 0
+  }
+}
+
+const advanceCursor = () => {
+  cursor.c++
+  if (cursor.c >= COL_COUNT) {
+    cursor.c = 0
+    cursor.r++
+    if (cursor.r >= ROW_COUNT) {
+      cursor.r = ROW_COUNT - 1 // Stop at bottom
+    }
+  }
+}
+
+const handleCellMouseDown = (r, c) => {
+  isDrawing.value = true
+  rows[r][c].drawn = !rows[r][c].drawn
+  cursor.r = r
+  cursor.c = c
+  if (inputRef.value) {
+    inputRef.value.focus()
+  }
+}
+
+const handleCellHover = (r, c) => {
+  if (isDrawing.value) {
+    rows[r][c].drawn = true
+  }
+}
+
+const clearGrid = () => {
+  for(let r=0; r<ROW_COUNT; r++) {
+    for(let c=0; c<COL_COUNT; c++) {
+      rows[r][c].char = ''
+      rows[r][c].drawn = false
+    }
+  }
+  cursor.r = 0
+  cursor.c = 0
+  inputText.value = ''
+  if (inputRef.value) {
+    inputRef.value.focus()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('mouseup', drawingListener)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mouseup', drawingListener)
+})
+</script>
+
+<style scoped>
+.grid-demo {
+  background: #09090b;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #27272a;
+  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
+  overflow: hidden; /* 防止内容溢出圆角 */
+}
+
+.terminal-screen {
+  border: 1px solid #27272a;
+  background: #000;
+  cursor: text;
+  display: block;
+  overflow-x: auto; /* 允许横向滚动 */
+  max-width: 100%;
+  border-radius: 6px;
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #3f3f46 #18181b;
+}
+
+/* Webkit scrollbar styles */
+.terminal-screen::-webkit-scrollbar {
+  height: 8px;
+}
+
+.terminal-screen::-webkit-scrollbar-track {
+  background: #18181b;
+}
+
+.terminal-screen::-webkit-scrollbar-thumb {
+  background-color: #3f3f46;
+  border-radius: 4px;
+}
+
+.grid-row {
+  display: flex;
+  width: max-content; /* 确保内容撑开宽度 */
+}
+
+.grid-cell {
+    width: 16px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #27272a;
+    border-bottom: 1px solid #27272a;
+    color: #e4e4e7;
+    font-size: 14px;
+    user-select: none;
+  }
+  
+  .grid-cell.drawn {
+    background-color: #3f3f46;
+  }
+  
+  .grid-cell.active-cursor {
+    background-color: #e4e4e7;
+    color: #000;
+    animation: blink 1s step-end infinite;
+  }
+  
+  @keyframes blink {
+    50% { opacity: 0.7; }
+  }
+  
+  .controls {
+    margin-top: 15px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .text-input {
+    background: #18181b;
+    border: 1px solid #3f3f46;
+    color: #fff;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-family: inherit;
+  }
+  
+  .btn {
+    background: #27272a;
+    border: 1px solid #3f3f46;
+    color: #e4e4e7;
+    padding: 6px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .btn:hover {
+    background: #3f3f46;
+    border-color: #52525b;
+  }
+  
+  .hint {
+    color: #a1a1aa; /* Zinc 400 */
+    font-size: 12px;
+    margin-left: auto;
+  }
+  </style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue
new file mode 100644
index 0000000..30b2354
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue
@@ -0,0 +1,660 @@
+<!--
+  WebTerminal.vue
+  Web 模拟终端组件
+  
+  用途：
+  提供一个在浏览器中可交互的简易终端环境，作为本章节的综合练习场。
+  让用户在学完所有理论后，能够在一个受控环境中实际体验输入输出、命令执行等操作。
+  
+  交互功能：
+  - 命令执行：支持简单的模拟命令（如 help, clear, echo 等）。
+  - 历史记录：支持上下键翻阅命令历史。
+  - 真实反馈：模拟真实的终端响应延迟和输出格式。
+-->
+<template>
+  <div class="web-terminal-wrapper">
+    <div class="terminal-container">
+      <div class="terminal-header">
+        <div class="terminal-buttons">
+          <span class="btn red"></span>
+          <span class="btn yellow"></span>
+          <span class="btn green"></span>
+        </div>
+        <div class="terminal-title">Terminal - zsh</div>
+      </div>
+      <div class="terminal-body" ref="terminalBody" @click="focusInput">
+        <div v-for="(line, index) in history" :key="index" class="terminal-line">
+          <span class="prompt" v-if="line.type === 'input'">
+            <span class="path">{{ currentPath }}</span>
+            <span class="arrow">$ </span>
+          </span>
+          <span :class="line.type">{{ line.content }}</span>
+        </div>
+        <div class="input-line">
+          <span class="prompt">
+            <span class="path">{{ currentPath }}</span>
+            <span class="arrow">$ </span>
+          </span>
+          <input 
+            type="text" 
+            v-model="currentInput" 
+            @keyup.enter="executeCommand"
+            @keydown.up.prevent="navigateHistory(-1)"
+            @keydown.down.prevent="navigateHistory(1)"
+            @keydown.tab.prevent="handleTabCompletion"
+            ref="inputField"
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="cheat-sheet">
+      <div class="sheet-title">
+        <span class="icon">📖</span> 
+        <span class="en">Command Cheat Sheet</span>
+        <span class="divider">|</span>
+        <span class="zh">命令速查表</span>
+      </div>
+      <div class="sheet-content">
+        <div class="cmd-group" v-for="(group, gIndex) in cheatSheet" :key="gIndex">
+          <div class="group-title">{{ group.category }}</div>
+          <div class="cmd-item" v-for="(cmd, cIndex) in group.commands" :key="cIndex">
+            <div class="cmd-name" @click="fillCommand(cmd.name)">{{ cmd.name }}</div>
+            <div class="cmd-desc">
+              <div class="en">{{ cmd.descEn }}</div>
+              <div class="zh">{{ cmd.descZh }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+
+const history = ref([
+  { type: 'output', content: 'Welcome to the interactive terminal simulator! / 欢迎使用交互式终端模拟器！' },
+  { type: 'output', content: 'Type "help" to see available commands. / 输入 "help" 查看可用命令。' }
+])
+const currentInput = ref('')
+const inputField = ref(null)
+const terminalBody = ref(null)
+const commandHistory = ref([])
+const historyIndex = ref(-1)
+
+// 模拟文件系统
+const fileSystem = {
+  name: '/',
+  type: 'dir',
+  children: {
+    'home': {
+      name: 'home',
+      type: 'dir',
+      children: {
+        'user': {
+          name: 'user',
+          type: 'dir',
+          children: {
+            'hello.txt': { name: 'hello.txt', type: 'file', content: 'Hello World! This is a mock file.\n你好！这是一个模拟文件。' },
+            'notes.md': { name: 'notes.md', type: 'file', content: '# My Notes\n- Learn Terminal\n- Learn Shell\n- Learn Kernel' },
+            'projects': { 
+              name: 'projects',
+              type: 'dir', 
+              children: {
+                'app.js': { name: 'app.js', type: 'file', content: 'console.log("Hello");' }
+              } 
+            },
+            'Downloads': { name: 'Downloads', type: 'dir', children: {} }
+          }
+        }
+      }
+    },
+    'etc': {
+      name: 'etc',
+      type: 'dir',
+      children: {
+        'passwd': { name: 'passwd', type: 'file', content: 'root:x:0:0:root:/root:/bin/bash\nuser:x:1000:1000:user:/home/user:/bin/zsh' }
+      }
+    },
+    'bin': {
+      name: 'bin',
+      type: 'dir',
+      children: {
+        'ls': { name: 'ls', type: 'file', content: 'Binary file' },
+        'cat': { name: 'cat', type: 'file', content: 'Binary file' }
+      }
+    }
+  }
+}
+
+let currentPath = '~'
+let currentDirObj = fileSystem.children['home'].children['user']
+
+const resolvePath = (path) => {
+  if (path === '~' || path === '') return fileSystem.children['home'].children['user']
+  if (path === '/') return fileSystem
+  
+  let parts = path.split('/').filter(p => p)
+  let current = path.startsWith('/') ? fileSystem : currentDirObj
+  
+  for (const part of parts) {
+    if (part === '.') continue
+    if (part === '..') {
+      // Find parent (simplification: we don't store parent refs, so we re-traverse or just mock it)
+      // For this simple mock, '..' support is limited or we implement path string manipulation
+      return null // path manipulation logic needs to be separate
+    }
+    if (current.type === 'dir' && current.children && current.children[part]) {
+      current = current.children[part]
+    } else {
+      return null
+    }
+  }
+  return current
+}
+
+const getParentPath = (path) => {
+  if (path === '/' || path === '~') return path // Simplified
+  const parts = path.split('/')
+  parts.pop()
+  return parts.join('/') || '/'
+}
+
+// Better path resolution logic
+const navigateTo = (target) => {
+  let newPath = currentPath
+  let newDir = currentDirObj
+
+  if (target === '/') {
+    newPath = '/'
+    newDir = fileSystem
+  } else if (target === '~') {
+    newPath = '~'
+    newDir = fileSystem.children['home'].children['user']
+  } else if (target === '..') {
+    if (currentPath === '/') return { path: '/', dir: fileSystem }
+    if (currentPath === '~') { // ~ is /home/user
+       newPath = '/home'
+       newDir = fileSystem.children['home']
+    } else {
+       // Simple string manipulation for path
+       const parts = currentPath.split('/')
+       parts.pop()
+       newPath = parts.join('/') || '/'
+       
+       // Re-resolve dir from root for safety
+       if (newPath === '/') newDir = fileSystem
+       else if (newPath === '/home') newDir = fileSystem.children['home']
+       else if (newPath === '/home/user') newDir = fileSystem.children['home'].children['user']
+       else {
+         // Fallback for deeper paths if we supported them
+         // For now, let's keep it simple
+       }
+    }
+  } else {
+    // Relative path
+    if (currentDirObj.children && currentDirObj.children[target]) {
+      const targetObj = currentDirObj.children[target]
+      if (targetObj.type === 'dir') {
+        newDir = targetObj
+        newPath = currentPath === '/' ? `/${target}` : `${currentPath}/${target}`
+      } else {
+        return { error: `cd: not a directory: ${target}` }
+      }
+    } else {
+      return { error: `cd: no such file or directory: ${target}` }
+    }
+  }
+  return { path: newPath, dir: newDir }
+}
+
+const cheatSheet = [
+  {
+    category: 'Navigation / 导航',
+    commands: [
+      { name: 'ls', descEn: 'List directory contents', descZh: '列出当前目录下的文件和文件夹' },
+      { name: 'cd <dir>', descEn: 'Change directory', descZh: '进入指定目录 (例如: cd projects)' },
+      { name: 'pwd', descEn: 'Print working directory', descZh: '显示当前所在的完整路径' }
+    ]
+  },
+  {
+    category: 'File Operations / 文件操作',
+    commands: [
+      { name: 'cat <file>', descEn: 'Show file contents', descZh: '查看文件内容 (例如: cat hello.txt)' },
+      { name: 'touch <file>', descEn: 'Create empty file', descZh: '创建一个新文件' },
+      { name: 'mkdir <dir>', descEn: 'Make directory', descZh: '创建一个新文件夹' },
+      { name: 'rm <file>', descEn: 'Remove file', descZh: '删除文件' }
+    ]
+  },
+  {
+    category: 'System / 系统',
+    commands: [
+      { name: 'echo <text>', descEn: 'Print text', descZh: '在屏幕上打印一段文字' },
+      { name: 'whoami', descEn: 'Current user', descZh: '显示当前用户名' },
+      { name: 'date', descEn: 'Show date/time', descZh: '显示当前日期和时间' },
+      { name: 'clear', descEn: 'Clear screen', descZh: '清空屏幕内容' }
+    ]
+  },
+  {
+    category: 'Package Manager / 软件包 (Mock)',
+    commands: [
+      { name: 'apt update', descEn: 'Update package list', descZh: '更新软件包列表' },
+      { name: 'apt install <pkg>', descEn: 'Install package', descZh: '安装软件 (例如: apt install git)' }
+    ]
+  }
+]
+
+const commands = {
+  help: () => {
+    return `Available commands:
+  ls, cd, pwd, cat, touch, mkdir, rm, echo, whoami, date, clear, apt`
+  },
+  
+  ls: (args) => {
+    if (!currentDirObj.children) return ''
+    const items = Object.values(currentDirObj.children)
+    if (items.length === 0) return ''
+    
+    // Simple column formatting
+    const names = items.map(item => {
+      return item.type === 'dir' ? `\x1b[1;34m${item.name}/\x1b[0m` : item.name
+    })
+    return names.join('  ')
+  },
+
+  pwd: () => {
+    // Expand ~ to /home/user for display if needed, but keeping ~ is also standard zsh
+    return currentPath === '~' ? '/home/user' : currentPath
+  },
+
+  cd: (args) => {
+    const target = args[0] || '~'
+    const result = navigateTo(target)
+    if (result.error) return result.error
+    currentPath = result.path
+    currentDirObj = result.dir
+    return null
+  },
+
+  clear: () => {
+    history.value = []
+    return null
+  },
+
+  echo: (args) => {
+    return args.join(' ')
+  },
+
+  cat: (args) => {
+    const file = args[0]
+    if (!file) return 'usage: cat <file>'
+    
+    if (currentDirObj.children && currentDirObj.children[file]) {
+      const target = currentDirObj.children[file]
+      if (target.type === 'dir') return `cat: ${file}: Is a directory`
+      return target.content
+    }
+    return `cat: ${file}: No such file or directory`
+  },
+
+  touch: (args) => {
+    const name = args[0]
+    if (!name) return 'usage: touch <file>'
+    if (currentDirObj.children[name]) return null // Already exists, update time (mock: do nothing)
+    currentDirObj.children[name] = { name, type: 'file', content: '' }
+    return null
+  },
+
+  mkdir: (args) => {
+    const name = args[0]
+    if (!name) return 'usage: mkdir <dir>'
+    if (currentDirObj.children[name]) return `mkdir: cannot create directory '${name}': File exists`
+    currentDirObj.children[name] = { name, type: 'dir', children: {} }
+    return null
+  },
+
+  rm: (args) => {
+    const name = args[0]
+    if (!name) return 'usage: rm <file>'
+    // Mock: -r not supported for simplicity
+    if (currentDirObj.children[name]) {
+      if (currentDirObj.children[name].type === 'dir') return `rm: cannot remove '${name}': Is a directory`
+      delete currentDirObj.children[name]
+      return null
+    }
+    return `rm: cannot remove '${name}': No such file or directory`
+  },
+
+  whoami: () => 'user',
+  
+  date: () => new Date().toString(),
+
+  apt: (args) => {
+    const cmd = args[0]
+    if (cmd === 'update') {
+      return `Hit:1 http://archive.ubuntu.com/ubuntu jammy InRelease
+Get:2 http://security.ubuntu.com/ubuntu jammy-security InRelease [110 kB]
+Fetched 110 kB in 1s (135 kB/s)
+Reading package lists... Done`
+    }
+    if (cmd === 'install') {
+      const pkg = args[1]
+      if (!pkg) return 'apt install: missing package name'
+      return `Reading package lists... Done
+Building dependency tree... Done
+The following NEW packages will be installed:
+  ${pkg}
+0 upgraded, 1 newly installed, 0 to remove.
+Need to get 1,234 kB of archives.
+After this operation, 5,678 kB of additional disk space will be used.
+Selecting previously unselected package ${pkg}.
+(Reading database ... 25432 files and directories currently installed.)
+Preparing to unpack .../${pkg}_1.0.0_amd64.deb ...
+Unpacking ${pkg} (1.0.0) ...
+Setting up ${pkg} (1.0.0) ...`
+    }
+    return 'apt: usage: apt update | apt install <package>'
+  }
+}
+
+const executeCommand = () => {
+  const input = currentInput.value.trim()
+  
+  if (!input) {
+    history.value.push({ type: 'input', content: '' })
+    currentInput.value = ''
+    scrollToBottom()
+    return
+  }
+
+  // Add to command history
+  commandHistory.value.push(input)
+  historyIndex.value = commandHistory.value.length
+
+  history.value.push({ type: 'input', content: input })
+
+  const [cmd, ...args] = input.split(/\s+/)
+  
+  if (commands[cmd]) {
+    try {
+      const output = commands[cmd](args)
+      if (output !== null) {
+        // Handle colored output simply by not escaping HTML if we trust it (Vue escapes by default)
+        // For simple color simulation, we can strip codes or use a span. 
+        // Here we just keep simple text, but `ls` returns ANSI codes which we might want to handle or strip.
+        // For this demo, let's strip ANSI codes for safety/simplicity in Vue or parse them.
+        // Let's simple string replace for blue color
+        
+        let safeOutput = output
+        
+        const lines = safeOutput.split('\n')
+        lines.forEach(line => {
+           // Basic ANSI parser for ls colors
+           const isDir = line.includes('\x1b[1;34m')
+           const cleanContent = line.replace(/\x1b\[[0-9;]*m/g, '')
+           history.value.push({ type: isDir ? 'output-dir' : 'output', content: cleanContent })
+        })
+      }
+    } catch (e) {
+      history.value.push({ type: 'error', content: `Error executing command: ${e.message}` })
+    }
+  } else {
+    history.value.push({ type: 'error', content: `zsh: command not found: ${cmd}` })
+  }
+
+  currentInput.value = ''
+  scrollToBottom()
+}
+
+const navigateHistory = (direction) => {
+  if (commandHistory.value.length === 0) return
+  
+  historyIndex.value += direction
+  
+  if (historyIndex.value < 0) historyIndex.value = 0
+  if (historyIndex.value > commandHistory.value.length) historyIndex.value = commandHistory.value.length
+  
+  if (historyIndex.value === commandHistory.value.length) {
+    currentInput.value = ''
+  } else {
+    currentInput.value = commandHistory.value[historyIndex.value]
+  }
+}
+
+const handleTabCompletion = () => {
+  // Simple tab completion for current directory
+  const input = currentInput.value
+  const [cmd, ...args] = input.split(/\s+/)
+  const partial = args[args.length - 1] || ''
+  
+  if (cmd && currentDirObj.children) {
+    const matches = Object.keys(currentDirObj.children).filter(name => name.startsWith(partial))
+    if (matches.length === 1) {
+      const completed = matches[0]
+      // Replace last arg with completed
+      args[args.length - 1] = completed
+      currentInput.value = `${cmd} ${args.join(' ')}`
+    }
+  }
+}
+
+const focusInput = () => {
+  inputField.value?.focus()
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (terminalBody.value) {
+      terminalBody.value.scrollTop = terminalBody.value.scrollHeight
+    }
+  })
+}
+
+const fillCommand = (cmdName) => {
+  // Extract command from example (e.g., "cd <dir>" -> "cd")
+  const cmd = cmdName.split(' ')[0]
+  currentInput.value = cmd + ' '
+  focusInput()
+}
+
+onMounted(() => {
+  focusInput()
+})
+</script>
+
+<style scoped>
+.web-terminal-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 20px;
+  margin: 20px 0;
+  font-family: 'JetBrains Mono', 'Menlo', monospace;
+}
+
+.terminal-container {
+  background-color: #0a0a0a;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  border: 1px solid #27272a;
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+}
+
+.terminal-header {
+  background-color: #18181b;
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #27272a;
+}
+
+.terminal-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.red { background-color: #ef4444; }
+.yellow { background-color: #facc15; }
+.green { background-color: #22c55e; }
+
+.terminal-title {
+  flex: 1;
+  text-align: center;
+  color: #71717a;
+  font-size: 12px;
+  margin-left: -50px;
+}
+
+.terminal-body {
+  padding: 15px;
+  flex: 1;
+  overflow-y: auto;
+  color: #e4e4e7;
+  font-size: 14px;
+  line-height: 1.6;
+  cursor: text;
+}
+
+.terminal-line {
+  margin-bottom: 2px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.input-line {
+  display: flex;
+  align-items: center;
+}
+
+.prompt {
+  color: #22c55e;
+  margin-right: 8px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.prompt .path {
+  color: #3b82f6;
+  margin-right: 4px;
+}
+
+.error {
+  color: #ef4444;
+}
+
+.output-dir {
+  color: #3b82f6;
+  font-weight: bold;
+}
+
+input {
+  background: transparent;
+  border: none;
+  color: #e4e4e7;
+  outline: none;
+  flex: 1;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+/* Cheat Sheet Styles */
+.cheat-sheet {
+  background: #18181b;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 400px;
+}
+
+.sheet-title {
+  padding: 12px 15px;
+  background: #27272a;
+  color: #e4e4e7;
+  font-weight: bold;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sheet-title .divider {
+  color: #52525b;
+  font-weight: normal;
+}
+
+.sheet-content {
+  padding: 15px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.cmd-group {
+  margin-bottom: 20px;
+}
+
+.group-title {
+  color: #facc15;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  font-weight: 600;
+  border-bottom: 1px solid #27272a;
+  padding-bottom: 4px;
+}
+
+.cmd-item {
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.cmd-item:hover {
+  transform: translateX(4px);
+}
+
+.cmd-name {
+  color: #22d3ee;
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.cmd-desc {
+  font-size: 11px;
+  color: #a1a1aa;
+}
+
+.cmd-desc .zh {
+  color: #71717a;
+  margin-top: 1px;
+}
+
+@media (max-width: 768px) {
+  .web-terminal-wrapper {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .terminal-container, .cheat-sheet {
+    height: 350px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 5f6a4fd..a570ec5 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -10,6 +10,16 @@ import './style.css'
 import Layout from './Layout.vue'
 import StepBar from './components/StepBar.vue'
 import ChapterIntroduction from './components/ChapterIntroduction.vue'
+import WebTerminal from './components/appendix/terminal-intro/WebTerminal.vue'
+import TerminalGrid from './components/appendix/terminal-intro/TerminalGrid.vue'
+import CellInspector from './components/appendix/terminal-intro/CellInspector.vue'
+import EscapeSequences from './components/appendix/terminal-intro/EscapeSequences.vue'
+import InputVisualizer from './components/appendix/terminal-intro/InputVisualizer.vue'
+import SignalsDemo from './components/appendix/terminal-intro/SignalsDemo.vue'
+import FlowDiagram from './components/appendix/terminal-intro/FlowDiagram.vue'
+import AdvancedTUIDemo from './components/appendix/terminal-intro/AdvancedTUIDemo.vue'
+import ArchitectureDemo from './components/appendix/terminal-intro/ArchitectureDemo.vue'
+import TerminalDefinition from './components/appendix/terminal-intro/TerminalDefinition.vue'
 
 export default {
   extends: DefaultTheme,
@@ -18,6 +28,16 @@ export default {
     app.use(ElementPlus)
     app.component('StepBar', StepBar)
     app.component('ChapterIntroduction', ChapterIntroduction)
+    app.component('WebTerminal', WebTerminal)
+    app.component('TerminalGrid', TerminalGrid)
+    app.component('CellInspector', CellInspector)
+    app.component('EscapeSequences', EscapeSequences)
+    app.component('InputVisualizer', InputVisualizer)
+    app.component('SignalsDemo', SignalsDemo)
+    app.component('FlowDiagram', FlowDiagram)
+    app.component('AdvancedTUIDemo', AdvancedTUIDemo)
+    app.component('ArchitectureDemo', ArchitectureDemo)
+    app.component('TerminalDefinition', TerminalDefinition)
   },
   setup() {
     const route = useRoute()
diff --git a/docs/zh-cn/appendix/terminal-intro.md b/docs/zh-cn/appendix/terminal-intro.md
new file mode 100644
index 0000000..808f2f2
--- /dev/null
+++ b/docs/zh-cn/appendix/terminal-intro.md
@@ -0,0 +1,181 @@
+# 终端原理 (Introduction to Terminal Principles)
+
+> 💡 **学习指南**：本章节旨在为零基础读者提供一个关于终端（Terminal）工作原理的系统性认知。无需具备计算机专业背景，我们将通过交互式演示，由浅入深地解析终端的运行机制。
+
+## 1. 概念界定：终端是什么？ (Definition)
+
+在图形用户界面（GUI）普及之前，终端是人类与计算机交互的主要方式。即便在今天，它依然是开发者控制计算机最精确、最高效的工具。
+
+<TerminalDefinition />
+
+### 1.1 为什么我们需要 CLI (命令行)？
+
+你可能会问：*“现在电脑和手机都有漂亮的图形界面了，为什么还要用这种看起来像上个世纪的黑底白字界面？”*
+
+要理解这一点，我们需要回顾一下计算机的历史：
+
+-   **CLI 时代 (Command Line Interface)**：在早期的几十年里（如 Unix 诞生之初），计算机性能有限，没有显卡来渲染复杂的图形。人们只能通过键盘输入字符，计算机也只能反馈字符。这种交互方式**极度节省资源**且**精确**。
+-   **GUI 时代 (Graphical User Interface)**：后来，为了让普通用户也能方便使用电脑，Mac 和 Windows 带来了“所见即所得”的图形界面。鼠标点击取代了记忆命令，直观性大大提升。
+
+**但为什么 CLI 没有消亡？** 甚至在服务器领域占据绝对统治地位？
+
+1.  **服务器没有屏幕**：绝大多数运行在云端的服务器（如你访问的网站背后的机器）都存放在数据中心的机架上，既没有连接显示器，也没有鼠标。
+2.  **带宽与性能**：当你通过网络远程管理一台服务器时，传输图形界面（即传输视频流）需要巨大的带宽和极低的延迟。而传输 CLI 的文本信息，**只需要极少的流量**（几个字节 vs 几兆像素）。这使得你可以在网络很差的环境下依然流畅地控制远在地球另一端的超级计算机。
+3.  **精确与自动化**：GUI 适合“探索”，而 CLI 适合“执行”。在 GUI 中批量重命名 1000 个文件可能需要重复点击几千次，而在 CLI 中只需要一行代码。
+
+所以，**只要你连接到远程服务器，你看到的永远是这个黑色的窗口。** 它不是落后，而是专业领域的最优解。
+
+本质上，终端是一个**字符流输入/输出环境**：
+-   **输入**：通过键盘发送指令（字符信号）。
+-   **输出**：通过屏幕网格显示文本反馈。
+
+它不处理复杂的图形、图片或视频，而是专注于**文本信息的交互**。
+
+## 2. 核心架构：终端与 Shell (The Architecture)
+
+初学者常混淆“终端”与“Shell”，理解两者的区别是掌握命令行的关键。它们在计算机历史中演化为两个独立的组件：
+
+-   **终端 (Terminal)**：负责“交互”。
+    它是一个负责显示字符、接收键盘输入的**窗口程序**。它本身不懂任何逻辑，只负责传输数据。
+    *常见的终端软件：macOS Terminal, iTerm2, Windows Terminal, Hyper.*
+
+-   **Shell (壳 / 命令解释器)**：负责“逻辑”。
+    它是运行在终端内部的**后端程序**，负责接收你的指令、解析语义、调用系统内核并返回结果。
+    *常见的 Shell：bash, zsh, fish, sh.*
+
+**类比理解**：
+如果把计算机操作比作去餐厅点餐：
+-   **终端**是**餐桌和菜单**（负责展示信息、提供输入界面，但它自己不会做菜）。
+-   **Shell**是**服务员**（负责听取你的点单，交给后厨处理，并把结果端回来）。
+-   **内核**是**后厨**（负责真正的执行和运算）。
+
+*下面的演示直观展示了从“点餐”到“上菜”的全过程：*
+
+<ArchitectureDemo />
+
+## 3. 视觉模型：网格系统 (The Grid System)
+
+与现代图形界面使用“像素”不同，终端的显示基础是**字符网格（Character Grid）**。
+终端屏幕被划分为若干行和列，每一个格子称为一个**单元格（Cell）**。
+
+### 3.1 单元格的构成
+每个单元格是终端显示的最小单位，它包含两类核心信息：
+1.  **字符 (Glyph)**：实际显示的文字（如 `A`, `中`, `$`）。
+2.  **属性 (Attributes)**：字符的样式（如前景色、背景色、加粗、下划线）。
+
+当你拖动终端窗口改变大小时，本质上是在改变这个网格的**行数 (Rows)** 和 **列数 (Columns)**。
+
+*请在下方交互区域尝试操作，观察网格如何承载字符：*
+
+<TerminalGrid />
+
+### 3.2 样式检查
+终端无法显示图片，所有的“界面”都是通过字符颜色和样式的组合来实现的。
+
+*点击下方单元格，查看每个格子背后包含的样式属性：*
+
+<CellInspector />
+
+## 4. 通信协议：转义序列 (Escape Sequences)
+
+你可能会疑惑：既然终端只传输文本，那彩色的文字、移动的光标、清屏操作是如何实现的？
+
+答案是**转义序列 (Escape Sequences)**。
+这是一串特殊的字符指令（通常以 `ESC` 字符开头）。当终端接收到这些字符时，**不会将它们显示在屏幕上**，而是将其解释为**控制指令**。
+
+例如：
+-   普通字符 `A` → 在屏幕上画出 A。
+-   序列 `\033[31m` → **指令**：将后续文字颜色设为红色。
+-   序列 `\033[2J` → **指令**：清空屏幕。
+
+这就是为什么有时候在日志文件中会看到乱码（如 `^[[31m`），那其实是未被正确解析的颜色指令。
+
+*下方组件展示了转义序列如何实时改变终端的渲染状态：*
+
+<EscapeSequences />
+
+## 5. 输入机制：字节流 (Input as Byte Stream)
+
+输入过程往往被误解。当你按下键盘时，终端并没有直接把字符“画”在屏幕上，而是进行了一次**编码传输**。
+
+1.  **按键捕获**：终端捕获你的物理按键动作。
+2.  **编码转换**：将按键转换为特定的**字节序列**。
+    -   按下 `a` → 发送字节 `a`。
+    -   按下 `向上箭头` → 发送序列 `^[[A`。
+3.  **发送**：将字节流发送给 Shell 或当前运行的程序。
+
+**关键点**：所有的按键（包括功能键、鼠标点击）在传输层面上都是**字节数据**。
+
+*在下方尝试按键，观察你的输入是如何被转换为底层数据的：*
+
+<InputVisualizer />
+
+## 6. 运行模式：加工与原始 (Cooked vs. Raw Mode)
+
+终端有两种主要的工作模式，决定了输入数据如何被处理。理解这一点能帮你明白为什么 `ls` 命令和 `vim` 编辑器的操作体验完全不同。
+
+-   **加工模式 (Cooked Mode / Canonical Mode)**：
+    这是标准 Shell 的默认模式。
+    -   **行为**：终端会**缓存**你的输入，允许你使用退格键修改。只有当你按下回车键（Enter）后，整行数据才会一次性发送给程序。
+    -   **类比**：像在写信，写完一整句确认无误后才寄出。
+    -   *适用场景：日常命令输入。*
+
+-   **原始模式 (Raw Mode)**：
+    这是高级交互程序的模式。
+    -   **行为**：终端不进行任何缓冲或处理，将每一个按键（包括修饰键）**即时**发送给程序。
+    -   **类比**：像打电玩，按下一个键，角色立刻做出反应。
+    -   *适用场景：Vim 编辑器、终端游戏、交互式菜单。*
+
+## 7. 进程控制：信号 (Signals)
+
+在终端中按下 `Ctrl+C` 通常能停止程序。这并非通过发送字符实现，而是触发了**信号 (Signal)**。
+
+信号是操作系统级别的通知机制，用于告诉程序发生了特定事件。
+-   **Ctrl+C** → 发送 `SIGINT` (Interrupt)：通知程序“请中断当前操作”。
+-   **Ctrl+Z** → 发送 `SIGTSTP` (Suspend)：通知程序“请暂停并挂起到后台”。
+
+这一机制绕过了标准的数据输入通道，确保在程序卡死时用户仍有控制权。
+
+<SignalsDemo />
+
+## 8. 高级应用：全屏界面与缓冲区 (Buffers & TUI)
+
+现代终端应用（TUI, Text User Interface）如 `vim`、`htop` 或 `tmux`，能够像图形软件一样利用整个屏幕，这得益于**备用屏幕缓冲区 (Alternate Screen Buffer)**。
+
+终端通常维护两块“画布”：
+1.  **主缓冲区 (Primary Buffer)**：保存命令历史，即我们日常滚动查看的流式界面。
+2.  **备用缓冲区 (Alternate Buffer)**：一块独立的、不保存历史的画布，供全屏应用使用。
+
+当你打开 `vim` 时，终端切换到备用缓冲区；当你退出 `vim` 时，终端切回主缓冲区。这就是为什么退出编辑器后，之前的命令历史依然完好无损地留在屏幕上。
+
+<AdvancedTUIDemo />
+
+---
+
+## 9. 总结 (Summary)
+
+终端并非神秘的黑盒，它是一个标准化的文本交互接口。
+-   **显示**：基于网格和字符。
+-   **控制**：基于转义序列。
+-   **交互**：基于输入输出流和信号。
+
+通过理解这些底层原理，你不再只是死记硬背命令，而是能真正理解每一次敲击键盘背后发生的逻辑流转。
+
+*最后，请在这个模拟的 Web 终端中，综合体验上述所有概念：*
+
+<WebTerminal />
+
+## 附录：常用术语表 (Vocabulary)
+
+| 术语 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **终端** | Terminal | 负责显示和输入的窗口程序（前端）。 |
+| **Shell** | Shell | 负责解析命令和执行逻辑的程序（后端）。 |
+| **CLI** | Command Line Interface | 命令行界面，一种基于文本的交互方式。 |
+| **TUI** | Text User Interface | 文本用户界面，指在终端中通过字符构建的伪图形界面。 |
+| **转义序列** | Escape Sequence | 用于控制终端光标、颜色等的特殊字符指令。 |
+| **标准输入/输出** | Stdin/Stdout | 程序接收数据和输出数据的标准通道。 |
+
+## 参考资料 (Reference)
+
+-   [How Terminals Work](https://how-terminals-work.vercel.app/)：本文的结构与演示灵感深受该项目的启发。如果你希望深入了解工程实现细节，强烈推荐阅读原版教程。