From f44c842fe779ca2322eef939891ee63d60b47301 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Wed, 25 Feb 2026 01:38:27 +0800
Subject: [PATCH] feat(docs): update computer fundamentals content and demos

- Refactor frontend framework demo descriptions for clarity
- Remove interactive features from triad and field map demos
- Add new computer organization and DSL documentation links
- Split type systems and compilers into separate pages
- Enhance power-on-to-web article with relay race analogy
- Add new interactive demos for type systems and compilation
- Improve visual presentation of boot process and hardware flow
- Introduce new Vibe Coding flow demo component
---
 docs/.vitepress/config.mjs                    |  16 +-
 .../AIvsTraditionalDemo.vue                   | 239 +++----
 .../ASTVisualizerDemo.vue                     | 192 ++++++
 .../AddressingModeDemo.vue                    | 481 ++++++++++++++
 .../computer-fundamentals/BootProcessDemo.vue | 115 +---
 .../BrowserArchitectureDemo.vue               | 150 ++---
 .../computer-fundamentals/BusSystemDemo.vue   | 405 ++++++++++++
 .../computer-fundamentals/CISCvsRISCDemo.vue  | 186 ++++++
 .../computer-fundamentals/CacheDemo.vue       | 544 ++++++++++++++++
 .../computer-fundamentals/CareerPathDemo.vue  | 190 ++----
 .../CodeOptimizationDemo.vue                  | 284 +++++++++
 .../CodeToInstructionDemo.vue                 | 184 ++++++
 .../CompileVsInterpretDemo.vue                | 157 +++++
 .../ComputerFieldMapDemo.vue                  |  21 +-
 .../computer-fundamentals/ControllerDemo.vue  | 436 +++++++++++++
 .../computer-fundamentals/DesktopDemo.vue     | 264 +++++---
 .../FrontendFrameworkDemo.vue                 |   6 +-
 .../FrontendTriadDemo.vue                     |  20 +-
 .../computer-fundamentals/FullProcessDemo.vue | 156 ++---
 .../computer-fundamentals/GenericTypeDemo.vue | 148 +++++
 .../computer-fundamentals/IOMethodDemo.vue    | 591 ++++++++++++++++++
 .../InstructionFormatDemo.vue                 | 398 ++++++++++++
 .../computer-fundamentals/LexerTokenDemo.vue  | 161 +++++
 .../computer-fundamentals/PSWFlagDemo.vue     | 483 ++++++++++++++
 .../computer-fundamentals/PipelineDemo.vue    | 308 +++++++++
 .../computer-fundamentals/PowerOnDemo.vue     | 129 ++--
 .../computer-fundamentals/RegisterDemo.vue    | 429 +++++++++----
 .../computer-fundamentals/RenderingDemo.vue   | 161 ++---
 .../StaticVsDynamicDemo.vue                   | 131 ++++
 .../StrongVsWeakDemo.vue                      | 107 ++++
 .../TypeInferenceFlowDemo.vue                 | 158 +++++
 .../TypeSafetyPracticeDemo.vue                | 137 ++++
 .../computer-fundamentals/URLRequestDemo.vue  | 252 +++++---
 .../VibeCodingFlowDemo.vue                    | 104 +++
 docs/.vitepress/theme/index.js                |  40 ++
 .../1-computer-fundamentals/compilers.md      | 255 ++++++++
 .../computer-organization.md                  | 485 ++++++++++++++
 .../power-on-to-web.md                        |  53 +-
 .../type-systems-compilers.md                 | 170 -----
 .../1-computer-fundamentals/type-systems.md   | 211 +++++++
 .../vibe-coding-fullstack.md                  |  54 +-
 41 files changed, 7721 insertions(+), 1290 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/ASTVisualizerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/AddressingModeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/BusSystemDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/CISCvsRISCDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/CacheDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeOptimizationDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeToInstructionDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/ControllerDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/GenericTypeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/IOMethodDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/InstructionFormatDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/LexerTokenDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/PSWFlagDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/PipelineDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/StrongVsWeakDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue
 create mode 100644 docs/zh-cn/appendix/1-computer-fundamentals/compilers.md
 create mode 100644 docs/zh-cn/appendix/1-computer-fundamentals/computer-organization.md
 delete mode 100644 docs/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers.md
 create mode 100644 docs/zh-cn/appendix/1-computer-fundamentals/type-systems.md

diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 2aef869..8819f81 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -585,6 +585,10 @@ export default defineConfig({
                   text: '从晶体管到 CPU',
                   link: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu'
                 },
+                {
+                  text: '计算机组成原理',
+                  link: '/zh-cn/appendix/1-computer-fundamentals/computer-organization'
+                },
                 {
                   text: '操作系统（进程 / 内存 / 文件系统）',
                   link: '/zh-cn/appendix/1-computer-fundamentals/operating-systems'
@@ -610,8 +614,12 @@ export default defineConfig({
                   link: '/zh-cn/appendix/1-computer-fundamentals/programming-languages'
                 },
                 {
-                  text: '类型系统与编译原理入门',
-                  link: '/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers'
+                  text: '类型系统入门',
+                  link: '/zh-cn/appendix/1-computer-fundamentals/type-systems'
+                },
+                {
+                  text: '编译原理入门',
+                  link: '/zh-cn/appendix/1-computer-fundamentals/compilers'
                 }
               ]
             },
@@ -798,6 +806,10 @@ export default defineConfig({
                 {
                   text: '后端分层架构',
                   link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
+                },
+                {
+                  text: '领域特定语言（DSL）',
+                  link: '/zh-cn/appendix/4-server-and-backend/domain-specific-languages'
                 }
               ]
             },
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue
index 07f9bc3..68dd2c2 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue
@@ -1,17 +1,13 @@
 <template>
   <div class="ai-vs-traditional-demo">
     <div class="demo-header">
-      <span class="icon">🤖</span>
       <span class="title">AI 工程师 vs 传统工程师</span>
       <span class="subtitle">工作方式的差异</span>
     </div>
 
     <div class="comparison-container">
       <div class="comparison-column traditional">
-        <div class="column-header">
-          <span class="col-icon">👨‍💻</span>
-          <span class="col-title">传统工程师</span>
-        </div>
+        <div class="column-header">传统工程师</div>
         <div class="work-flow">
           <div v-for="(step, index) in traditionalSteps" :key="index" class="flow-step">
             <span class="step-num">{{ index + 1 }}</span>
@@ -35,10 +31,7 @@
       </div>
 
       <div class="comparison-column ai">
-        <div class="column-header">
-          <span class="col-icon">🤖</span>
-          <span class="col-title">AI 工程师</span>
-        </div>
+        <div class="column-header">AI 工程师</div>
         <div class="work-flow">
           <div v-for="(step, index) in aiSteps" :key="index" class="flow-step">
             <span class="step-num">{{ index + 1 }}</span>
@@ -59,7 +52,7 @@
     </div>
 
     <div class="skill-shift">
-      <div class="shift-title">📊 能力重心转移</div>
+      <div class="shift-title">能力重心转移</div>
       <div class="shift-grid">
         <div v-for="item in skillShift" :key="item.from" class="shift-item">
           <div class="shift-from">
@@ -76,159 +69,142 @@
       </div>
     </div>
 
-    <div class="ai-insight">
-      <div class="insight-icon">💡</div>
-      <div class="insight-text">
-        <strong>AI 时代的核心竞争力：</strong>不是"会写代码"，而是"会描述需求、会判断对错、会设计方案"。AI 是你的编程助手，但<strong>决策者永远是你</strong>。
-      </div>
+    <div class="info-box">
+      <strong>AI 时代的核心竞争力：</strong>不是"会写代码"，而是"会描述需求、会判断对错、会设计方案"。AI 是你的编程助手，但决策者永远是你。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const traditionalSteps = ref([
+const traditionalSteps = [
   '理解需求',
   '查阅文档学习语法',
   '手写代码实现',
   '调试修复 Bug',
   '优化代码性能',
   '编写测试用例'
-])
+]
 
-const aiSteps = ref([
+const aiSteps = [
   '理解需求',
   '用自然语言描述给 AI',
   '审核 AI 生成的代码',
   '判断是否符合预期',
   '调整需求重新生成',
   '整合到项目中'
-])
+]
 
-const skillShift = ref([
+const skillShift = [
   { from: '语法记忆', to: '需求描述能力' },
   { from: '手写代码速度', to: '代码审核能力' },
   { from: '查文档能力', to: '架构设计能力' },
   { from: '调试技巧', to: '问题定位能力' }
-])
+]
 </script>
 
 <style scoped>
 .ai-vs-traditional-demo {
-  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 2px solid #fed7aa;
-}
-
-.icon {
-  font-size: 28px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1e293b;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
 }
 
 .subtitle {
-  font-size: 14px;
-  color: #64748b;
-  margin-left: auto;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-3);
 }
 
 .comparison-container {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .comparison-column {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .column-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.col-icon {
-  font-size: 24px;
-}
-
-.col-title {
-  font-size: 16px;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px dashed var(--vp-c-divider);
 }
 
 .work-flow {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
 }
 
 .flow-step {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px;
-  background: #f8fafc;
-  border-radius: 6px;
+  gap: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
 }
 
 .step-num {
-  width: 20px;
-  height: 20px;
-  background: #e2e8f0;
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 0.68rem;
   font-weight: 600;
-  color: #64748b;
+  background: var(--vp-c-divider);
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
 }
 
 .traditional .step-num {
-  background: #dbeafe;
-  color: #1d4ed8;
+  background: var(--vp-c-indigo-soft);
+  color: var(--vp-c-indigo-1);
 }
 
 .ai .step-num {
-  background: #dcfce7;
-  color: #15803d;
+  background: var(--vp-c-green-soft);
+  color: var(--vp-c-green-1);
 }
 
 .step-text {
-  font-size: 13px;
-  color: #475569;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
 }
 
 .column-stats {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding-top: 12px;
-  border-top: 1px solid #e2e8f0;
+  gap: 0.35rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 .stat-item {
@@ -238,14 +214,14 @@ const skillShift = ref([
 }
 
 .stat-label {
-  font-size: 12px;
-  color: #64748b;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
 }
 
 .stat-value {
-  font-size: 14px;
+  font-size: 0.78rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--vp-c-text-1);
 }
 
 .vs-divider {
@@ -255,115 +231,102 @@ const skillShift = ref([
 }
 
 .vs-text {
-  font-size: 18px;
+  font-size: 0.85rem;
   font-weight: 700;
-  color: #f97316;
-  background: white;
-  padding: 8px 12px;
-  border-radius: 8px;
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
+  padding: 0.35rem 0.5rem;
+  border-radius: 4px;
 }
 
 .skill-shift {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .shift-title {
-  font-size: 16px;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 16px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
 }
 
 .shift-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+  gap: 0.5rem;
 }
 
 .shift-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: #f8fafc;
-  border-radius: 8px;
+  gap: 0.35rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
 }
 
 .shift-from,
 .shift-to {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.35rem;
 }
 
 .arrow {
-  font-size: 14px;
+  font-size: 0.78rem;
   font-weight: 700;
 }
 
 .shift-from .arrow {
-  color: #ef4444;
+  color: var(--vp-c-danger-1);
 }
 
 .shift-to .arrow {
-  color: #22c55e;
+  color: var(--vp-c-green-1);
 }
 
 .text {
-  font-size: 13px;
-  color: #475569;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
 }
 
 .trend {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
+  font-size: 0.62rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
   margin-left: auto;
 }
 
 .trend.down {
-  background: #fee2e2;
-  color: #dc2626;
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger-1);
 }
 
 .trend.up {
-  background: #dcfce7;
-  color: #16a34a;
+  background: var(--vp-c-green-soft);
+  color: var(--vp-c-green-1);
 }
 
-.ai-insight {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  display: flex;
-  gap: 12px;
-  border-left: 4px solid #f97316;
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  border-left: 3px solid var(--vp-c-brand-1);
 }
 
-.insight-icon {
-  font-size: 20px;
-}
-
-.insight-text {
-  font-size: 14px;
-  color: #475569;
-  line-height: 1.6;
-}
-
-.insight-text strong {
-  color: #1e293b;
-}
-
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .comparison-container {
     grid-template-columns: 1fr;
   }
 
   .vs-divider {
-    padding: 8px 0;
+    padding: 0.35rem 0;
   }
 
   .shift-grid {
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ASTVisualizerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ASTVisualizerDemo.vue
new file mode 100644
index 0000000..b4afdbb
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ASTVisualizerDemo.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="ast-visualizer-demo">
+    <h4>🌳 AST 可视化：看见代码的"骨架"</h4>
+    <p class="desc">选择一个表达式，观察它的抽象语法树结构</p>
+
+    <div class="expr-selector">
+      <button
+        v-for="(ex, i) in expressions"
+        :key="i"
+        :class="['expr-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        <code>{{ ex.code }}</code>
+      </button>
+    </div>
+
+    <div class="ast-container">
+      <div class="tree-view">
+        <div class="tree-title">语法树</div>
+        <div class="tree-nodes">
+          <ASTNode
+            :node="expressions[selected].tree"
+            :depth="0"
+          />
+        </div>
+      </div>
+
+      <div class="explain-view">
+        <div class="explain-title">解析说明</div>
+        <div class="explain-list">
+          <div v-for="(step, j) in expressions[selected].explains" :key="j" class="explain-item">
+            <span class="explain-num">{{ j + 1 }}</span>
+            <span>{{ step }}</span>
+          </div>
+        </div>
+        <div class="tool-tip">
+          💡 试试 <a href="https://astexplorer.net/" target="_blank">AST Explorer</a> — 在线查看任意代码的 AST
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, h, defineComponent } from 'vue'
+
+const selected = ref(0)
+
+const ASTNode = defineComponent({
+  name: 'ASTNode',
+  props: { node: Object, depth: Number },
+  setup(props) {
+    return () => {
+      const n = props.node
+      const children = []
+
+      children.push(
+        h('div', { class: 'node-box', style: { marginLeft: props.depth * 24 + 'px' } }, [
+          h('span', { class: 'node-type' }, n.type),
+          n.value ? h('span', { class: 'node-value' }, n.value) : null
+        ])
+      )
+
+      if (n.children) {
+        for (const child of n.children) {
+          children.push(h(ASTNode, { node: child, depth: props.depth + 1 }))
+        }
+      }
+
+      return h('div', { class: 'node-wrapper' }, children)
+    }
+  }
+})
+
+const expressions = [
+  {
+    code: '1 + 2 * 3',
+    tree: {
+      type: 'BinaryExpression', value: '+',
+      children: [
+        { type: 'NumericLiteral', value: '1' },
+        {
+          type: 'BinaryExpression', value: '*',
+          children: [
+            { type: 'NumericLiteral', value: '2' },
+            { type: 'NumericLiteral', value: '3' }
+          ]
+        }
+      ]
+    },
+    explains: [
+      '* 优先级高于 +，所以 2 * 3 先结合',
+      '2 * 3 形成一个 BinaryExpression 子树',
+      '1 和这个子树作为 + 的左右操作数',
+      '最终 + 是根节点，体现了运算顺序'
+    ]
+  },
+  {
+    code: 'let x = 10',
+    tree: {
+      type: 'VariableDeclaration', value: 'let',
+      children: [
+        {
+          type: 'VariableDeclarator', value: '',
+          children: [
+            { type: 'Identifier', value: 'x' },
+            { type: 'NumericLiteral', value: '10' }
+          ]
+        }
+      ]
+    },
+    explains: [
+      'let 声明创建 VariableDeclaration 节点',
+      '内部包含一个 VariableDeclarator（声明器）',
+      '声明器左侧是标识符 x，右侧是初始值 10',
+      '树结构清晰表达了"把 10 赋给 x"的语义'
+    ]
+  },
+  {
+    code: 'add(a, b)',
+    tree: {
+      type: 'CallExpression', value: '',
+      children: [
+        { type: 'Identifier', value: 'add' },
+        {
+          type: 'Arguments', value: '',
+          children: [
+            { type: 'Identifier', value: 'a' },
+            { type: 'Identifier', value: 'b' }
+          ]
+        }
+      ]
+    },
+    explains: [
+      '函数调用创建 CallExpression 节点',
+      '被调用的函数名 add 是 Identifier',
+      '参数列表 (a, b) 形成 Arguments 节点',
+      '每个参数都是独立的 Identifier 子节点'
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.ast-visualizer-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.expr-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.expr-btn {
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.expr-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.expr-btn code { font-size: 13px; }
+.ast-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.tree-view, .explain-view {
+  border: 1px solid var(--vp-c-divider); border-radius: 8px;
+  background: var(--vp-c-bg); overflow: hidden;
+}
+.tree-title, .explain-title {
+  padding: 8px 12px; font-weight: 600; font-size: 13px;
+  background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider);
+}
+.tree-nodes { padding: 12px; }
+:deep(.node-box) {
+  display: flex; align-items: center; gap: 6px; padding: 3px 0;
+}
+:deep(.node-type) {
+  padding: 2px 8px; background: #dbeafe; color: #1e40af;
+  border-radius: 4px; font-size: 12px; font-weight: 500;
+}
+:deep(.node-value) {
+  padding: 2px 6px; background: #fef3c7; color: #92400e;
+  border-radius: 4px; font-size: 12px; font-family: 'Fira Code', monospace;
+}
+.explain-list { padding: 10px 12px; }
+.explain-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; }
+.explain-num {
+  width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand-1);
+  color: #fff; display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 600; flex-shrink: 0;
+}
+.tool-tip {
+  padding: 8px 12px; font-size: 12px; color: var(--vp-c-text-2);
+  border-top: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
+}
+.tool-tip a { color: var(--vp-c-brand-1); }
+@media (max-width: 640px) { .ast-container { grid-template-columns: 1fr; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AddressingModeDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AddressingModeDemo.vue
new file mode 100644
index 0000000..5b9ee0d
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AddressingModeDemo.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="addressing-mode-demo">
+    <div class="demo-header">
+      <span class="title">寻址方式</span>
+      <span class="subtitle">如何找到操作数的位置</span>
+    </div>
+
+    <div class="mode-selector">
+      <button 
+        v-for="mode in addressingModes" 
+        :key="mode.name"
+        :class="['mode-btn', { active: selectedMode === mode.name }]"
+        @click="selectMode(mode)"
+      >
+        {{ mode.name }}
+      </button>
+    </div>
+
+    <div class="mode-details" v-if="selectedModeData">
+      <div class="detail-header">
+        <span class="mode-name">{{ selectedModeData.name }}</span>
+        <span class="mode-english">{{ selectedModeData.english }}</span>
+      </div>
+      
+      <div class="detail-content">
+        <div class="detail-section">
+          <div class="section-title">定义</div>
+          <div class="section-content">{{ selectedModeData.definition }}</div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">指令格式</div>
+          <div class="instruction-example">
+            <code>{{ selectedModeData.format }}</code>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">示例</div>
+          <div class="example-code">
+            <div class="code-line">{{ selectedModeData.example.assembly }}</div>
+            <div class="code-desc">{{ selectedModeData.example.description }}</div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">执行过程</div>
+          <div class="execution-flow">
+            <div v-for="(step, i) in selectedModeData.steps" :key="i" class="flow-step">
+              <span class="step-num">{{ i + 1 }}</span>
+              <span class="step-text">{{ step }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">特点</div>
+          <div class="characteristics">
+            <div class="char-item" :class="selectedModeData.fast ? 'fast' : 'slow'">
+              <span class="char-label">速度</span>
+              <span class="char-value">{{ selectedModeData.fast ? '快' : '慢' }}</span>
+            </div>
+            <div class="char-item">
+              <span class="char-label">灵活性</span>
+              <span class="char-value">{{ selectedModeData.flexibility }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="comparison-table">
+      <div class="table-title">寻址方式对比</div>
+      <table>
+        <thead>
+          <tr>
+            <th>寻址方式</th>
+            <th>格式</th>
+            <th>速度</th>
+            <th>用途</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="mode in addressingModes" :key="mode.name">
+            <td>{{ mode.name }}</td>
+            <td><code>{{ mode.format }}</code></td>
+            <td :class="mode.fast ? 'fast' : 'slow'">{{ mode.fast ? '最快' : '较快' }}</td>
+            <td>{{ mode.usage }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selectedMode = ref('立即数寻址')
+const selectedModeData = ref(null)
+
+const addressingModes = ref([
+  {
+    name: '立即数寻址',
+    english: 'Immediate Addressing',
+    definition: '操作数直接包含在指令中，作为指令的一部分立即可用',
+    format: 'MOV R1, #100',
+    usage: '常数赋值、初始化',
+    fast: true,
+    flexibility: '低',
+    example: {
+      assembly: 'MOV R1, #100  ; R1 = 100',
+      description: '立即数 100 直接存在于指令中，无需访问任何寄存器或内存'
+    },
+    steps: [
+      'CPU 从指令中直接读取立即数 100',
+      '将立即数写入目标寄存器 R1',
+      '执行完成，无需额外内存访问'
+    ]
+  },
+  {
+    name: '寄存器寻址',
+    english: 'Register Addressing',
+    definition: '操作数位于 CPU 内部的寄存器中',
+    format: 'MOV R1, R2',
+    usage: '寄存器间数据传送',
+    fast: true,
+    flexibility: '中',
+    example: {
+      assembly: 'MOV R1, R2  ; R1 = R2',
+      description: '从源寄存器 R2 读取数据，存入目标寄存器 R1'
+    },
+    steps: [
+      'CPU 从寄存器组中读取 R2 的值',
+      '将值写入目标寄存器 R1',
+      '执行完成，无需访问内存'
+    ]
+  },
+  {
+    name: '直接寻址',
+    english: 'Direct Addressing',
+    definition: '指令中直接给出操作数的内存地址',
+    format: 'MOV R1, [100]',
+    usage: '访问全局变量',
+    fast: false,
+    flexibility: '高',
+    example: {
+      assembly: 'MOV R1, [0x1000]  ; R1 = M[0x1000]',
+      description: '指令中包含内存地址 0x1000，从该地址读取数据'
+    },
+    steps: [
+      'CPU 从指令中解析出地址 0x1000',
+      '将地址送入 MAR（内存地址寄存器）',
+      '访问内存，从地址 0x1000 读取数据到 MDR',
+      '将数据从 MDR 写入目标寄存器 R1'
+    ]
+  },
+  {
+    name: '间接寻址',
+    english: 'Indirect Addressing',
+    definition: '指令中给出寄存器，寄存器中存放操作数的地址',
+    format: 'MOV R1, [R2]',
+    usage: '指针操作、数组遍历',
+    fast: false,
+    flexibility: '高',
+    example: {
+      assembly: 'MOV R1, [R2]  ; R1 = M[R2]',
+      description: 'R2 中存放地址，从该地址读取数据'
+    },
+    steps: [
+      'CPU 从寄存器 R2 中读取地址',
+      '将地址送入 MAR',
+      '访问内存，读取数据到 MDR',
+      '将数据写入目标寄存器 R1'
+    ]
+  },
+  {
+    name: '变址寻址',
+    english: 'Indexed Addressing',
+    definition: '指令中给出基地址加上变址寄存器的值作为操作数地址',
+    format: 'MOV R1, [R2 + R3]',
+    usage: '数组访问、循环',
+    fast: false,
+    flexibility: '高',
+    example: {
+      assembly: 'MOV R1, [R2 + R3]  ; R1 = M[R2+R3]',
+      description: '有效地址 = R2 + R3，用于数组元素访问'
+    },
+    steps: [
+      'CPU 读取基地址寄存器 R2 的值',
+      'CPU 读取变址寄存器 R3 的值',
+      'ALU 计算有效地址 = R2 + R3',
+      '将有效地址送入 MAR',
+      '访问内存，读取数据到 MDR',
+      '将数据写入目标寄存器 R1'
+    ]
+  },
+  {
+    name: '基址寻址',
+    english: 'Based Addressing',
+    definition: '指令中给出基址寄存器加上偏移量作为操作数地址',
+    format: 'MOV R1, [R2 + 100]',
+    usage: '结构体访问、函数参数',
+    fast: false,
+    flexibility: '高',
+    example: {
+      assembly: 'MOV R1, [RBP - 8]  ; 访问栈帧中的局部变量',
+      description: '有效地址 = RBP - 8，用于访问函数栈帧中的变量'
+    },
+    steps: [
+      'CPU 读取基址寄存器 RBP 的值',
+      '计算有效地址 = RBP - 8',
+      '将有效地址送入 MAR',
+      '访问内存，读取数据'
+    ]
+  },
+  {
+    name: '相对寻址',
+    english: 'Relative Addressing',
+    definition: '操作数地址是当前指令地址加上一个偏移量',
+    format: 'JMP LABEL',
+    usage: '循环、条件跳转',
+    fast: true,
+    flexibility: '高',
+    example: {
+      assembly: 'JMP LOOP  ; 跳转到 LOOP 标签处',
+      description: '跳转目标地址 = PC + 偏移量，用于循环和分支'
+    },
+    steps: [
+      'CPU 计算跳转目标地址 = 当前 PC + 偏移量',
+      '将目标地址写入 PC',
+      '下一条指令从新地址开始执行'
+    ]
+  }
+])
+
+const selectMode = (mode) => {
+  selectedMode.value = mode.name
+  selectedModeData.value = mode
+}
+</script>
+
+<style scoped>
+.addressing-mode-demo {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.mode-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.mode-btn {
+  padding: 8px 14px;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.mode-btn.active {
+  border-color: #f59e0b;
+  background: #fef3c7;
+}
+
+.mode-details {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.mode-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.mode-english {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.detail-section {
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+
+.section-content {
+  font-size: 14px;
+  color: #1e293b;
+  line-height: 1.6;
+}
+
+.instruction-example {
+  background: #f1f5f9;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.instruction-example code {
+  font-family: monospace;
+  font-size: 14px;
+  color: #0369a1;
+}
+
+.example-code {
+  background: #f1f5f9;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.code-line {
+  font-family: monospace;
+  font-size: 13px;
+  color: #0369a1;
+  margin-bottom: 4px;
+}
+
+.code-desc {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.execution-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.flow-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  background: #f8fafc;
+  border-radius: 4px;
+}
+
+.step-num {
+  width: 24px;
+  height: 24px;
+  background: #f59e0b;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.step-text {
+  font-size: 13px;
+  color: #475569;
+}
+
+.characteristics {
+  display: flex;
+  gap: 16px;
+}
+
+.char-item {
+  padding: 8px 16px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+
+.char-label {
+  font-size: 11px;
+  color: #64748b;
+  display: block;
+}
+
+.char-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.char-item.fast .char-value {
+  color: #16a34a;
+}
+
+.char-item.slow .char-value {
+  color: #ea580c;
+}
+
+.comparison-table {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.table-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.comparison-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.comparison-table th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.comparison-table td {
+  color: #475569;
+}
+
+.comparison-table code {
+  font-size: 11px;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 2px;
+}
+
+.fast {
+  color: #16a34a;
+}
+
+.slow {
+  color: #ea580c;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/BootProcessDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BootProcessDemo.vue
index 75fbd3c..187bff9 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/BootProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BootProcessDemo.vue
@@ -1,38 +1,27 @@
 <template>
   <div class="boot-demo">
-    <div class="demo-label">操作系统启动流程 ── 点击逐步启动</div>
-
+    <div class="demo-title">操作系统启动流程</div>
     <div class="timeline">
-      <div
-        v-for="(step, index) in steps"
-        :key="step.name"
-        class="timeline-item"
-        :class="{ active: currentStep >= index }"
-        @click="currentStep = index"
-      >
-        <div class="timeline-marker">
-          <span class="marker-dot" :class="{ filled: currentStep >= index }">{{ index + 1 }}</span>
-          <span v-if="index < steps.length - 1" class="marker-line" :class="{ filled: currentStep >= index }"></span>
+      <div v-for="(step, i) in steps" :key="step.name" class="timeline-item">
+        <div class="marker">
+          <span class="dot">{{ i + 1 }}</span>
+          <span v-if="i < steps.length - 1" class="line"></span>
         </div>
-        <div class="timeline-content">
+        <div class="content">
           <div class="step-name">{{ step.name }}</div>
           <div class="step-desc">{{ step.desc }}</div>
         </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击查看各步骤</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentStep = ref(0)
 const steps = [
-  { name: '引导程序', desc: '从硬盘读取 bootloader' },
-  { name: '内核加载', desc: '加载操作系统内核' },
-  { name: '系统服务', desc: '启动各种后台服务' },
-  { name: '桌面环境', desc: '显示登录界面和桌面' }
+  { name: '引导程序 Bootloader', desc: '从硬盘启动扇区读取引导代码，找到操作系统内核的位置' },
+  { name: '内核加载 Kernel', desc: '将内核载入内存，接管 CPU、内存、设备的控制权' },
+  { name: '系统服务启动', desc: '启动网络、安全、音频等后台服务（Windows 服务 / Linux systemd）' },
+  { name: '桌面环境显示', desc: '加载显卡驱动 → 启动显示服务 → 渲染桌面背景和图标' }
 ]
 </script>
 
@@ -43,95 +32,51 @@ const steps = [
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
+.demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+  margin-bottom: 0.8rem;
 }
-
-.timeline {
-  display: flex;
-  flex-direction: column;
-}
-
-.timeline-item {
-  display: flex;
-  gap: 0.6rem;
-  padding: 0.3rem 0;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-}
-
-.timeline-item.active {
-  opacity: 1;
-}
-
-.timeline-marker {
+.timeline { display: flex; flex-direction: column; }
+.timeline-item { display: flex; gap: 0.7rem; }
+.marker {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 1.5rem;
+  width: 1.6rem;
+  flex-shrink: 0;
 }
-
-.marker-dot {
+.dot {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-brand);
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
   font-weight: 600;
-  color: var(--vp-c-text-3);
-  transition: all 0.3s;
 }
-
-.marker-dot.filled {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-
-.marker-line {
+.line {
   flex: 1;
   width: 2px;
-  background: var(--vp-c-divider);
-  min-height: 1.5rem;
-}
-
-.marker-line.filled {
   background: var(--vp-c-brand);
+  opacity: 0.3;
+  min-height: 1.2rem;
 }
-
-.timeline-content {
-  flex: 1;
-  padding-bottom: 0.8rem;
-}
-
+.content { flex: 1; padding-bottom: 0.8rem; }
 .step-name {
-  font-size: 0.78rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
 }
-
 .step-desc {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   color: var(--vp-c-text-3);
   margin-top: 0.15rem;
-}
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.5rem;
+  line-height: 1.5;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue
index 224c827..3e1051d 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue
@@ -1,44 +1,41 @@
 <template>
   <div class="browser-demo">
-    <div class="demo-label">浏览器架构 ── 点击查看各模块</div>
-
-    <div class="browser-schema">
-      <div class="browser-layers">
-        <div
-          v-for="layer in layers"
-          :key="layer.name"
-          class="layer"
-          :class="{ active: activeLayer === layer.name }"
-          @click="activeLayer = activeLayer === layer.name ? '' : layer.name"
-        >
-          <div class="layer-header">
-            <span class="layer-name">{{ layer.name }}</span>
-            <span class="layer-icon">{{ layer.icon }}</span>
-          </div>
-          <div v-if="activeLayer === layer.name" class="layer-detail">
-            <div class="detail-text">{{ layer.desc }}</div>
-            <div class="detail-examples">
-              <span v-for="ex in layer.examples" :key="ex" class="example-tag">{{ ex }}</span>
+    <div class="demo-title">浏览器架构 ── 点击模块查看详情</div>
+    <div class="arch">
+      <div
+        v-for="mod in modules"
+        :key="mod.name"
+        class="mod-card"
+        :class="{ active: active === mod.name }"
+        @click="active = active === mod.name ? '' : mod.name"
+      >
+        <div class="mod-header">
+          <span class="mod-icon">{{ mod.icon }}</span>
+          <span class="mod-name">{{ mod.name }}</span>
+        </div>
+        <transition name="expand">
+          <div v-if="active === mod.name" class="mod-detail">
+            <div class="mod-desc">{{ mod.desc }}</div>
+            <div class="mod-tags">
+              <span v-for="tag in mod.tags" :key="tag" class="tag">{{ tag }}</span>
             </div>
           </div>
-        </div>
+        </transition>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击查看各模块详情</div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-const activeLayer = ref('')
-const layers = [
-  { name: '用户界面', icon: '🎨', desc: '你看到的地址栏、标签页、书签等', examples: ['地址栏', '标签页', '书签栏', '工具栏'] },
-  { name: '浏览器引擎', icon: '⚙️', desc: '协调 UI 和渲染引擎的桥梁', examples: ['Chrome: Blink', 'Firefox: Gecko', 'Safari: WebKit'] },
-  { name: '渲染引擎', icon: '📄', desc: '解析 HTML/CSS，把网页显示出来', examples: ['Blink', 'Gecko', 'WebKit'] },
-  { name: 'JavaScript 引擎', icon: '⚡', desc: '执行页面中的 JavaScript 代码', examples: ['V8', 'SpiderMonkey', 'JavaScriptCore'] },
-  { name: '网络模块', icon: '🌐', desc: '发送 HTTP/HTTPS 请求', examples: ['HTTP', 'HTTP/2', 'HTTP/3', 'WebSocket'] },
-  { name: '数据存储', icon: '💾', desc: '保存 Cookie、缓存等数据', examples: ['Cookie', 'LocalStorage', 'Cache'] }
+const active = ref('')
+const modules = [
+  { icon: '🎨', name: '用户界面', desc: '你直接看到和操作的部分：地址栏、标签页、书签、前进/后退按钮', tags: ['地址栏', '标签页', '书签栏'] },
+  { icon: '🔗', name: '浏览器引擎', desc: '连接用户界面和渲染引擎的桥梁，负责协调两者之间的通信', tags: ['Blink', 'Gecko', 'WebKit'] },
+  { icon: '📄', name: '渲染引擎', desc: '解析 HTML 和 CSS，将代码转换成你看到的网页画面', tags: ['HTML 解析', 'CSS 计算', '布局绘制'] },
+  { icon: '⚡', name: 'JavaScript 引擎', desc: '执行网页中的 JavaScript 代码，实现页面的动态交互效果', tags: ['V8', 'SpiderMonkey', 'JavaScriptCore'] },
+  { icon: '🌐', name: '网络模块', desc: '负责发送 HTTP 请求、接收服务器响应，是浏览器与外界通信的通道', tags: ['HTTP/2', 'HTTP/3', 'WebSocket'] },
+  { icon: '💾', name: '数据存储', desc: '在本地保存网站数据，让你下次访问更快、不用重复登录', tags: ['Cookie', 'LocalStorage', 'Cache'] }
 ]
 </script>
 
@@ -49,82 +46,45 @@ const layers = [
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
+.demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+  margin-bottom: 0.8rem;
 }
-
-.browser-layers {
-  display: flex;
-  flex-direction: column;
+.arch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 0.4rem;
 }
-
-.layer {
+.mod-card {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
-  padding: 0.5rem 0.7rem;
-  transition: all 0.3s;
+  padding: 0.5rem 0.6rem;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  user-select: none;
 }
-
-.layer.active {
-  border-color: var(--vp-c-brand);
-}
-
-.layer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.layer-name {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-}
-
-.layer-icon {
-  font-size: 0.9rem;
-}
-
-.layer-detail {
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.detail-text {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-bottom: 0.4rem;
-}
-
-.detail-examples {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-}
-
-.example-tag {
-  font-size: 0.65rem;
-  padding: 0.15rem 0.4rem;
+.mod-card.active { border-color: var(--vp-c-brand); }
+.mod-header { display: flex; align-items: center; gap: 0.4rem; }
+.mod-icon { font-size: 1rem; }
+.mod-name { font-size: 0.72rem; font-weight: 600; color: var(--vp-c-text-1); }
+.mod-detail { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--vp-c-divider); }
+.mod-desc { font-size: 0.65rem; color: var(--vp-c-text-3); line-height: 1.5; }
+.mod-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
+.tag {
+  font-size: 0.6rem;
+  padding: 0.1rem 0.35rem;
   background: var(--vp-c-bg-soft);
   border-radius: 3px;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-brand);
 }
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+.expand-enter-active, .expand-leave-active { transition: all 0.2s ease; }
+.expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0; }
+.expand-enter-to, .expand-leave-from { opacity: 1; max-height: 8rem; }
+@media (max-width: 480px) {
+  .arch { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/BusSystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BusSystemDemo.vue
new file mode 100644
index 0000000..10dae52
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/BusSystemDemo.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="bus-demo">
+    <div class="demo-header">
+      <span class="title">计算机总线系统</span>
+      <span class="subtitle">地址总线、数据总线、控制总线</span>
+    </div>
+
+    <div class="bus-architecture">
+      <div class="cpu-box">
+        <div class="component-label">CPU</div>
+        <div class="cpu-internal">
+          <div class="cu">控制单元</div>
+          <div class="alu">运算单元</div>
+        </div>
+      </div>
+
+      <div class="bus-section">
+        <div class="bus-line address-bus" :class="{ active: activeBus === 'address' }">
+          <span class="bus-name">地址总线</span>
+          <span class="bus-width">32位</span>
+          <div class="bus-data" v-if="activeBus === 'address'">{{ addressValue }}</div>
+        </div>
+        <div class="bus-line data-bus" :class="{ active: activeBus === 'data' }">
+          <span class="bus-name">数据总线</span>
+          <span class="bus-width">64位</span>
+          <div class="bus-data" v-if="activeBus === 'data'">{{ dataValue }}</div>
+        </div>
+        <div class="bus-line ctrl-bus" :class="{ active: activeBus === 'control' }">
+          <span class="bus-name">控制总线</span>
+          <span class="bus-width">控制信号</span>
+          <div class="bus-data" v-if="activeBus === 'control'">{{ ctrlSignal }}</div>
+        </div>
+      </div>
+
+      <div class="memory-box">
+        <div class="component-label">主存</div>
+        <div class="mem-cells">
+          <div v-for="i in 8" :key="i" class="mem-cell" :class="{ active: activeMem === i-1 }">
+            {{ fmtAddr(i-1) }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <div class="operation-group">
+        <button class="btn" @click="simulateRead">读取内存</button>
+        <button class="btn" @click="simulateWrite">写入内存</button>
+      </div>
+      <div class="input-group">
+        <input v-model.number="addressInput" type="number" placeholder="地址(0-7)" min="0" max="7" class="addr-input" />
+        <input v-model.number="dataInput" type="number" placeholder="数据" class="data-input" />
+      </div>
+    </div>
+
+    <div class="operation-log">
+      <div class="log-title">操作流程</div>
+      <div class="log-steps">
+        <div v-for="(step, i) in logSteps" :key="i" :class="['log-step', step.active ? 'active' : '']">
+          <span class="step-num">{{ i + 1 }}</span>
+          <span class="step-text">{{ step.text }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="bus-explanation">
+      <div class="exp-title">总线知识点</div>
+      <div class="exp-grid">
+        <div class="exp-item">
+          <div class="exp-label">地址总线</div>
+          <div class="exp-desc">CPU 发送内存地址，单向传输</div>
+        </div>
+        <div class="exp-item">
+          <div class="exp-label">数据总线</div>
+          <div class="exp-desc">传输实际数据，双向传输</div>
+        </div>
+        <div class="exp-item">
+          <div class="exp-label">控制总线</div>
+          <div class="exp-desc">传输读/写等控制信号</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeBus = ref('')
+const activeMem = ref(-1)
+const addressValue = ref('')
+const dataValue = ref('')
+const ctrlSignal = ref('')
+
+const addressInput = ref(0)
+const dataInput = ref(100)
+
+const logSteps = ref([])
+
+const simulateRead = async () => {
+  logSteps.value = []
+  addressValue.value = addressInput.value.toString(2).padStart(32, '0').slice(-8)
+  
+  activeBus.value = 'address'
+  logSteps.value.push({ text: `CPU 通过地址总线发送地址 ${addressInput.value}`, active: true })
+  await wait(1000)
+  
+  activeBus.value = 'control'
+  ctrlSignal.value = 'READ'
+  logSteps.value.push({ text: '控制总线发送 READ 信号', active: true })
+  await wait(1000)
+  
+  activeBus.value = 'data'
+  activeMem.value = addressInput.value
+  dataValue.value = Math.floor(Math.random() * 256)
+  logSteps.value.push({ text: `主存通过数据总线返回数据 ${dataValue.value}`, active: true })
+  await wait(1000)
+  
+  logSteps.value.push({ text: 'CPU 接收数据到寄存器', active: true })
+}
+
+const simulateWrite = async () => {
+  logSteps.value = []
+  addressValue.value = addressInput.value.toString(2).padStart(32, '0').slice(-8)
+  dataValue.value = dataInput.value.toString(2).padStart(64, '0').slice(-8)
+  
+  activeBus.value = 'address'
+  logSteps.value.push({ text: `CPU 通过地址总线发送地址 ${addressInput.value}`, active: true })
+  await wait(1000)
+  
+  activeBus.value = 'data'
+  logSteps.value.push({ text: `CPU 通过数据总线发送数据 ${dataInput.value}`, active: true })
+  await wait(1000)
+  
+  activeBus.value = 'control'
+  ctrlSignal.value = 'WRITE'
+  logSteps.value.push({ text: '控制总线发送 WRITE 信号', active: true })
+  await wait(1000)
+  
+  activeMem.value = addressInput.value
+  logSteps.value.push({ text: `数据写入主存地址 ${addressInput.value}`, active: true })
+}
+
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+const fmtAddr = (addr) => '0x' + addr.toString(16).toUpperCase()
+</script>
+
+<style scoped>
+.bus-demo {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.bus-architecture {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.cpu-box, .memory-box {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+}
+
+.component-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.cpu-internal {
+  display: flex;
+  gap: 8px;
+}
+
+.cu, .alu {
+  padding: 8px 12px;
+  background: #e0f2fe;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #0369a1;
+}
+
+.bus-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bus-line {
+  background: #f1f5f9;
+  border-radius: 4px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  transition: all 0.3s;
+}
+
+.bus-line.active {
+  transform: scale(1.02);
+}
+
+.address-bus.active { background: #fef3c7; border-left: 3px solid #f59e0b; }
+.data-bus.active { background: #dbeafe; border-left: 3px solid #3b82f6; }
+.ctrl-bus.active { background: #fce7f3; border-left: 3px solid #ec4899; }
+
+.bus-name {
+  font-weight: 600;
+  color: #1e293b;
+  min-width: 60px;
+}
+
+.bus-width {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.bus-data {
+  margin-left: auto;
+  font-family: monospace;
+  font-size: 10px;
+  color: #1e293b;
+}
+
+.memory-box {
+  width: 100px;
+}
+
+.mem-cells {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+}
+
+.mem-cell {
+  padding: 4px;
+  background: #f8fafc;
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: monospace;
+  text-align: center;
+}
+
+.mem-cell.active {
+  background: #dbeafe;
+  border: 1px solid #3b82f6;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.operation-group {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 8px 16px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn:hover {
+  background: #2563eb;
+}
+
+.input-group {
+  display: flex;
+  gap: 8px;
+}
+
+.addr-input, .data-input {
+  width: 80px;
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.operation-log {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.log-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.log-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.log-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #f8fafc;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.log-step.active {
+  background: #dbeafe;
+  color: #1e293b;
+}
+
+.step-num {
+  width: 20px;
+  height: 20px;
+  background: #e2e8f0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.step-text {
+  flex: 1;
+}
+
+.bus-explanation {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.exp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.exp-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.exp-item {
+  padding: 8px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+
+.exp-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.exp-desc {
+  font-size: 11px;
+  color: #64748b;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CISCvsRISCDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CISCvsRISCDemo.vue
new file mode 100644
index 0000000..e4efb62
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CISCvsRISCDemo.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="cisc-risc-demo">
+    <h4>⚔️ 两种设计哲学：CISC vs RISC</h4>
+    <p class="desc">点击对比维度，看两种指令集架构的核心差异</p>
+
+    <div class="arch-toggle">
+      <button
+        :class="['toggle-btn', { active: view === 'cisc' }]"
+        @click="view = 'cisc'"
+      >
+        CISC (x86)
+      </button>
+      <button
+        :class="['toggle-btn', { active: view === 'both' }]"
+        @click="view = 'both'"
+      >
+        对比
+      </button>
+      <button
+        :class="['toggle-btn', { active: view === 'risc' }]"
+        @click="view = 'risc'"
+      >
+        RISC (ARM)
+      </button>
+    </div>
+
+    <div v-if="view === 'both'" class="comparison-grid">
+      <div v-for="dim in dimensions" :key="dim.label" class="dim-row">
+        <div class="dim-cisc">{{ dim.cisc }}</div>
+        <div class="dim-label">{{ dim.label }}</div>
+        <div class="dim-risc">{{ dim.risc }}</div>
+      </div>
+    </div>
+
+    <div v-else class="arch-detail">
+      <div class="detail-card">
+        <div class="card-header" :class="view">
+          <span class="card-title">{{ archData[view].name }}</span>
+          <span class="card-full">{{ archData[view].full }}</span>
+        </div>
+        <div class="card-philosophy">
+          <span class="phi-label">设计哲学：</span>
+          <span>{{ archData[view].philosophy }}</span>
+        </div>
+        <div class="card-analogy">
+          <span class="ana-label">类比：</span>
+          <span>{{ archData[view].analogy }}</span>
+        </div>
+        <div class="card-example">
+          <div class="example-title">{{ archData[view].exampleTitle }}</div>
+          <pre class="example-code">{{ archData[view].example }}</pre>
+          <div class="example-note">{{ archData[view].exampleNote }}</div>
+        </div>
+        <div class="card-products">
+          <span class="prod-label">代表产品：</span>
+          <span v-for="p in archData[view].products" :key="p" class="prod-tag">{{ p }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="real-world">
+      <div class="rw-title">🌍 现实中的选择</div>
+      <div class="rw-items">
+        <div class="rw-item">
+          <span class="rw-device">💻 你的电脑</span>
+          <span class="rw-arch">x86 (CISC)</span>
+          <span class="rw-why">兼容几十年的软件生态</span>
+        </div>
+        <div class="rw-item">
+          <span class="rw-device">📱 你的手机</span>
+          <span class="rw-arch">ARM (RISC)</span>
+          <span class="rw-why">低功耗，电池续航更久</span>
+        </div>
+        <div class="rw-item">
+          <span class="rw-device">🍎 Apple Silicon</span>
+          <span class="rw-arch">ARM (RISC)</span>
+          <span class="rw-why">高性能低功耗，颠覆了笔记本市场</span>
+        </div>
+        <div class="rw-item">
+          <span class="rw-device">🔬 RISC-V 开发板</span>
+          <span class="rw-arch">RISC-V (RISC)</span>
+          <span class="rw-why">开源免费，IoT 和教育领域崛起</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const view = ref('both')
+
+const dimensions = [
+  { label: '指令数量', cisc: '上千条复杂指令', risc: '几十到几百条精简指令' },
+  { label: '单条指令', cisc: '一条能做很多事', risc: '一条只做一件事' },
+  { label: '指令长度', cisc: '变长（1-15字节）', risc: '定长（通常4字节）' },
+  { label: '执行速度', cisc: '复杂指令多周期', risc: '大多数单周期完成' },
+  { label: '功耗', cisc: '较高', risc: '较低' },
+  { label: '流水线', cisc: '难优化（指令长度不一）', risc: '易优化（指令整齐）' },
+  { label: '编译器负担', cisc: '轻（硬件做更多）', risc: '重（软件做更多优化）' }
+]
+
+const archData = {
+  cisc: {
+    name: 'CISC',
+    full: 'Complex Instruction Set Computer',
+    philosophy: '让硬件尽可能强大，一条指令完成复杂操作，减轻编译器负担',
+    analogy: '像一把瑞士军刀——功能多，但每个功能不一定最好用',
+    exampleTitle: '用一条指令完成「内存加法」',
+    example: 'ADD [0x1000], R1\n; 一条指令完成：读内存 → 加法 → 写回内存\n; CPU 内部拆成多个微操作执行',
+    exampleNote: 'CISC 允许指令直接操作内存，一条指令背后可能是 5-6 个微操作',
+    products: ['Intel Core', 'AMD Ryzen', 'x86 服务器']
+  },
+  risc: {
+    name: 'RISC',
+    full: 'Reduced Instruction Set Computer',
+    philosophy: '让每条指令尽可能简单快速，复杂操作由多条简单指令组合完成',
+    analogy: '像一套专业工具——每个工具只做一件事，但做得又快又好',
+    exampleTitle: '用三条指令完成同样的「内存加法」',
+    example: 'LOAD  R2, [0x1000]  ; 第1步：从内存读数据到寄存器\nADD   R2, R2, R1    ; 第2步：寄存器之间做加法\nSTORE R2, [0x1000]  ; 第3步：把结果写回内存',
+    exampleNote: 'RISC 要求数据先加载到寄存器，运算只在寄存器间进行，结果再存回内存',
+    products: ['Apple M 系列', '高通骁龙', 'AWS Graviton', 'RISC-V']
+  }
+}
+</script>
+
+<style scoped>
+.cisc-risc-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+
+.arch-toggle { display: flex; gap: 4px; margin-bottom: 16px; background: var(--vp-c-bg); border-radius: 8px; padding: 4px; }
+.toggle-btn {
+  flex: 1; padding: 8px; border: none; border-radius: 6px;
+  background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s;
+}
+.toggle-btn.active { background: var(--vp-c-brand-1); color: #fff; }
+
+.comparison-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+.dim-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
+.dim-cisc, .dim-risc {
+  padding: 8px 12px; border-radius: 6px; font-size: 12px;
+  background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+}
+.dim-cisc { text-align: right; }
+.dim-label {
+  padding: 4px 10px; background: var(--vp-c-brand-1); color: #fff;
+  border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
+}
+
+.arch-detail { margin-bottom: 16px; }
+.detail-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg); overflow: hidden; }
+.card-header { padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
+.card-header.cisc { background: #dbeafe; }
+.card-header.risc { background: #dcfce7; }
+.card-title { font-size: 16px; font-weight: 700; }
+.card-full { font-size: 12px; color: var(--vp-c-text-3); }
+.card-philosophy, .card-analogy { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--vp-c-divider); }
+.phi-label, .ana-label { font-weight: 600; font-size: 12px; color: var(--vp-c-text-3); margin-right: 6px; }
+.card-example { padding: 12px 14px; border-bottom: 1px solid var(--vp-c-divider); }
+.example-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
+.example-code { padding: 8px 10px; margin: 0; font-size: 12px; line-height: 1.5; background: var(--vp-c-bg-soft); border-radius: 4px; white-space: pre-wrap; }
+.example-note { font-size: 11px; color: var(--vp-c-text-3); margin-top: 6px; }
+.card-products { padding: 10px 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.prod-label { font-size: 12px; color: var(--vp-c-text-3); font-weight: 600; }
+.prod-tag { font-size: 11px; padding: 2px 8px; background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1); border-radius: 4px; }
+
+.real-world { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
+.rw-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
+.rw-items { display: flex; flex-direction: column; gap: 6px; }
+.rw-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; background: var(--vp-c-bg); border-radius: 6px; }
+.rw-device { font-weight: 600; min-width: 110px; }
+.rw-arch { padding: 2px 8px; background: var(--vp-c-brand-soft); border-radius: 4px; font-weight: 500; white-space: nowrap; }
+.rw-why { color: var(--vp-c-text-2); }
+
+@media (max-width: 640px) {
+  .dim-row { grid-template-columns: 1fr; gap: 4px; }
+  .dim-cisc { text-align: left; }
+  .dim-label { justify-self: start; }
+  .rw-item { flex-wrap: wrap; }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CacheDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CacheDemo.vue
new file mode 100644
index 0000000..03de641
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CacheDemo.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="cache-demo">
+    <div class="demo-header">
+      <span class="title">缓存 (Cache) 原理</span>
+      <span class="subtitle">CPU 与内存之间的"桥梁"</span>
+    </div>
+
+    <div class="cache-visualization">
+      <div class="cache-levels">
+        <div class="level cpu-level">
+          <div class="level-label">CPU 核心</div>
+          <div class="level-icon">⚡</div>
+        </div>
+        
+        <div class="arrow-right">→</div>
+        
+        <div class="level l1-cache" :class="{ active: activeLevel === 'L1' }">
+          <div class="level-label">L1 缓存</div>
+          <div class="level-info">
+            <span class="size">64 KB</span>
+            <span class="speed">~1ns</span>
+          </div>
+        </div>
+        
+        <div class="arrow-right">→</div>
+        
+        <div class="level l2-cache" :class="{ active: activeLevel === 'L2' }">
+          <div class="level-label">L2 缓存</div>
+          <div class="level-info">
+            <span class="size">256 KB</span>
+            <span class="speed">~5ns</span>
+          </div>
+        </div>
+        
+        <div class="arrow-right">→</div>
+        
+        <div class="level l3-cache" :class="{ active: activeLevel === 'L3' }">
+          <div class="level-label">L3 缓存</div>
+          <div class="level-info">
+            <span class="size">8 MB</span>
+            <span class="speed">~15ns</span>
+          </div>
+        </div>
+        
+        <div class="arrow-right">→</div>
+        
+        <div class="level memory" :class="{ active: activeLevel === 'MEM' }">
+          <div class="level-label">主存</div>
+          <div class="level-info">
+            <span class="size">16 GB</span>
+            <span class="speed">~100ns</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cache-operation">
+      <div class="control-panel">
+        <div class="panel-title">缓存操作演示</div>
+        <div class="btn-group">
+          <button class="btn" @click="simulateRead(100)">读取地址 100</button>
+          <button class="btn" @click="simulateRead(104)">读取地址 104</button>
+          <button class="btn" @click="simulateRead(200)">读取地址 200</button>
+          <button class="btn" @click="simulateRead(108)">读取地址 108</button>
+        </div>
+      </div>
+
+      <div class="operation-log">
+        <div class="log-title">操作记录</div>
+        <div class="log-content">
+          <div v-for="(log, i) in logs" :key="i" :class="['log-item', log.type]">
+            <span class="log-time">T+{{ log.time }}ns</span>
+            <span class="log-text">{{ log.text }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="locality-explanation">
+      <div class="exp-title">为什么缓存有效？—— 局部性原理</div>
+      <div class="locality-grid">
+        <div class="locality-card">
+          <div class="locality-icon">⏱️</div>
+          <div class="locality-name">时间局部性</div>
+          <div class="locality-desc">刚访问的数据很可能再次被访问</div>
+          <div class="locality-example">循环中的变量</div>
+        </div>
+        <div class="locality-card">
+          <div class="locality-icon">📦</div>
+          <div class="locality-name">空间局部性</div>
+          <div class="locality-desc">访问某个数据后，附近的数据也可能被访问</div>
+          <div class="locality-example">数组遍历、顺序执行</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cache-mapping">
+      <div class="mapping-title">缓存映射方式</div>
+      <div class="mapping-tabs">
+        <button 
+          v-for="map in mappings" 
+          :key="map.type"
+          :class="['map-btn', { active: selectedMapping === map.type }]"
+          @click="selectedMapping = map.type"
+        >
+          {{ map.type }}
+        </button>
+      </div>
+      
+      <div class="mapping-details" v-if="selectedMappingData">
+        <div class="mapping-desc">{{ selectedMappingData.desc }}</div>
+        <div class="mapping-compare">
+          <div class="compare-item">
+            <span class="compare-label">速度</span>
+            <span class="compare-value fast">{{ selectedMappingData.speed }}</span>
+          </div>
+          <div class="compare-item">
+            <span class="compare-label">命中率</span>
+            <span class="compare-value">{{ selectedMappingData.hitRate }}</span>
+          </div>
+          <div class="compare-item">
+            <span class="compare-label">实现复杂度</span>
+            <span class="compare-value">{{ selectedMappingData.complexity }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hit-rate-calc">
+      <div class="calc-title">命中率计算</div>
+      <div class="calc-formula">
+        <span class="formula">平均访问时间 = H × T<sub>c</sub> + (1-H) × T<sub>m</sub></span>
+      </div>
+      <div class="calc-example">
+        <div class="calc-row">
+          <label>缓存访问时间 (Tc):</label>
+          <input type="range" v-model="tc" min="1" max="10" />
+          <span>{{ tc }} ns</span>
+        </div>
+        <div class="calc-row">
+          <label>内存访问时间 (Tm):</label>
+          <input type="range" v-model="tm" min="50" max="200" />
+          <span>{{ tm }} ns</span>
+        </div>
+        <div class="calc-row">
+          <label>命中率 (H):</label>
+          <input type="range" v-model="hitRate" min="0" max="100" />
+          <span>{{ hitRate }}%</span>
+        </div>
+        <div class="calc-result">
+          平均访问时间 = {{ avgTime }} ns
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeLevel = ref('')
+const logs = ref([])
+const tc = ref(2)
+const tm = ref(100)
+const hitRate = ref(90)
+const selectedMapping = ref('直接映射')
+
+const mappings = ref([
+  { 
+    type: '直接映射', 
+    desc: '每个主存块只能映射到唯一的缓存行',
+    speed: '最快',
+    hitRate: '较低',
+    complexity: '最低'
+  },
+  { 
+    type: '组相联', 
+    desc: '每个主存块可以映射到 N 个缓存行（N路组相联）',
+    speed: '较快',
+    hitRate: '较高',
+    complexity: '中等'
+  },
+  { 
+    type: '全相联', 
+    desc: '主存块可以放到任意缓存行中',
+    speed: '最慢',
+    hitRate: '最高',
+    complexity: '最高'
+  }
+])
+
+const selectedMappingData = computed(() => {
+  return mappings.value.find(m => m.type === selectedMapping.value)
+})
+
+const avgTime = computed(() => {
+  const h = hitRate.value / 100
+  return Math.round(h * tc.value + (1 - h) * tm.value)
+})
+
+const simulateRead = async (addr) => {
+  logs.value = []
+  
+  if (addr >= 100 && addr < 110) {
+    logs.value.push({ time: 0, text: `读取地址 ${addr}`, type: 'read' })
+    activeLevel.value = 'L1'
+    logs.value.push({ time: tc.value, text: '✓ L1 缓存命中!', type: 'hit' })
+  } else if (addr >= 200 && addr < 210) {
+    logs.value.push({ time: 0, text: `读取地址 ${addr}`, type: 'read' })
+    activeLevel.value = 'L1'
+    logs.value.push({ time: tc.value, text: '✗ L1 缓存未命中', type: 'miss' })
+    activeLevel.value = 'L2'
+    logs.value.push({ time: tc.value + 5, text: '✗ L2 缓存未命中', type: 'miss' })
+    activeLevel.value = 'MEM'
+    logs.value.push({ time: tc.value + 5 + 100, text: '从主存加载数据', type: 'load' })
+    logs.value.push({ time: tc.value + 5 + 100, text: '数据存入缓存', type: 'store' })
+  }
+}
+</script>
+
+<style scoped>
+.cache-demo {
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.cache-visualization {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.cache-levels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.level {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  transition: all 0.3s;
+}
+
+.level.active {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.cpu-level {
+  background: #fef3c7;
+}
+
+.l1-cache.active { background: #dbeafe; border: 2px solid #3b82f6; }
+.l2-cache.active { background: #dbeafe; border: 2px solid #2563eb; }
+.l3-cache.active { background: #dbeafe; border: 2px solid #1d4ed8; }
+.memory.active { background: #dcfce7; border: 2px solid #16a34a; }
+
+.level-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.level-icon {
+  font-size: 24px;
+}
+
+.level-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 10px;
+}
+
+.size { color: #0369a1; font-weight: 600; }
+.speed { color: #64748b; }
+
+.arrow-right {
+  font-size: 18px;
+  color: #94a3b8;
+}
+
+.cache-operation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.control-panel, .operation-log {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.panel-title, .log-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.btn {
+  padding: 8px 12px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.btn:hover {
+  background: #2563eb;
+}
+
+.log-content {
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.log-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 11px;
+}
+
+.log-time {
+  color: #64748b;
+  min-width: 50px;
+}
+
+.log-item.hit .log-text { color: #16a34a; }
+.log-item.miss .log-text { color: #ea580c; }
+.log-item.load .log-text { color: #0369a1; }
+
+.locality-explanation {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.exp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.locality-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.locality-card {
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.locality-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.locality-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.locality-desc {
+  font-size: 11px;
+  color: #64748b;
+  margin: 8px 0;
+}
+
+.locality-example {
+  font-size: 10px;
+  padding: 4px 8px;
+  background: #e0f2fe;
+  border-radius: 4px;
+  color: #0369a1;
+}
+
+.cache-mapping {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.mapping-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.mapping-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.map-btn {
+  padding: 8px 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.map-btn.active {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.mapping-desc {
+  font-size: 12px;
+  color: #475569;
+  margin-bottom: 12px;
+}
+
+.mapping-compare {
+  display: flex;
+  gap: 16px;
+}
+
+.compare-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.compare-label {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.compare-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.compare-value.fast { color: #16a34a; }
+
+.hit-rate-calc {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.calc-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.calc-formula {
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.formula {
+  font-family: monospace;
+  font-size: 14px;
+  color: #0369a1;
+}
+
+.calc-example {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.calc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.calc-row label {
+  min-width: 120px;
+  color: #475569;
+}
+
+.calc-row input {
+  flex: 1;
+}
+
+.calc-result {
+  margin-top: 12px;
+  padding: 12px;
+  background: #dcfce7;
+  border-radius: 6px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: #166534;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CareerPathDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CareerPathDemo.vue
index 6d8e605..4330744 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CareerPathDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CareerPathDemo.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="career-path-demo">
     <div class="demo-header">
-      <span class="icon">🚀</span>
       <span class="title">工程师成长路径</span>
       <span class="subtitle">从入门到精通的技能演进</span>
     </div>
 
     <div class="path-container">
       <div
-        v-for="(stage, index) in stages"
+        v-for="stage in stages"
         :key="stage.name"
         class="stage-card"
-        :class="{ active: activeStage === index }"
-        @click="activeStage = index"
       >
         <div class="stage-header">
           <span class="stage-icon">{{ stage.icon }}</span>
@@ -34,31 +31,17 @@
             <span class="output-text">{{ stage.output }}</span>
           </div>
         </div>
-        <div v-if="index < stages.length - 1" class="stage-arrow">→</div>
       </div>
     </div>
 
-    <div class="path-insight">
-      <div class="insight-icon">💡</div>
-      <div class="insight-content">
-        <div class="insight-title">成长关键点</div>
-        <ul class="insight-list">
-          <li>前 1-2 年：打基础，建立"能独立完成任务"的能力</li>
-          <li>2-3 年：选方向，在某个领域建立深度</li>
-          <li>3-5 年：横向扩展，培养架构思维和团队协作能力</li>
-          <li>5 年+：技术决策、团队带领、技术影响力</li>
-        </ul>
-      </div>
+    <div class="info-box">
+      <strong>成长关键点：</strong>前 1-2 年打基础，建立独立完成任务的能力；2-3 年选方向，建立深度；3-5 年横向扩展，培养架构思维；5 年+ 技术决策与团队影响力。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const activeStage = ref(0)
-
-const stages = ref([
+const stages = [
   {
     name: '入门期',
     icon: '🌱',
@@ -99,188 +82,135 @@ const stages = ref([
     skills: ['技术战略', '团队建设', '行业洞察', '创新引领'],
     output: '技术方向决策，培养技术团队'
   }
-])
+]
 </script>
 
 <style scoped>
 .career-path-demo {
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
 .demo-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 2px solid #e2e8f0;
-}
-
-.icon {
-  font-size: 28px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1e293b;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
 }
 
 .subtitle {
-  font-size: 14px;
-  color: #64748b;
-  margin-left: auto;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-3);
 }
 
 .path-container {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0.5rem;
 }
 
 .stage-card {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border: 2px solid transparent;
-  position: relative;
-}
-
-.stage-card:hover {
-  transform: translateX(4px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.stage-card.active {
-  border-color: #3b82f6;
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .stage-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .stage-icon {
-  font-size: 24px;
+  font-size: 1.1rem;
 }
 
 .stage-name {
-  font-size: 18px;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--vp-c-text-1);
 }
 
 .stage-time {
-  font-size: 12px;
-  color: #64748b;
-  background: #f1f5f9;
-  padding: 2px 8px;
-  border-radius: 4px;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
   margin-left: auto;
 }
 
 .stage-content {
-  padding-left: 36px;
+  padding-left: 1.6rem;
 }
 
 .stage-desc {
-  font-size: 14px;
-  color: #475569;
-  margin-bottom: 12px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
 }
 
 .stage-skills {
-  margin-bottom: 8px;
+  margin-bottom: 0.35rem;
 }
 
 .skill-label,
 .output-label {
-  font-size: 12px;
-  color: #64748b;
-  margin-right: 8px;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  margin-right: 0.35rem;
 }
 
 .skill-tags {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 4px;
+  gap: 0.25rem;
+  margin-top: 0.2rem;
 }
 
 .skill-tag {
-  font-size: 12px;
-  background: #e0f2fe;
-  color: #0369a1;
-  padding: 2px 8px;
-  border-radius: 4px;
+  font-size: 0.68rem;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
 }
 
 .stage-output {
-  font-size: 13px;
-  color: #475569;
+  font-size: 0.72rem;
+  color: var(--vp-c-text-2);
 }
 
 .output-text {
-  color: #1e293b;
+  color: var(--vp-c-text-1);
 }
 
-.stage-arrow {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 20px;
-  color: #cbd5e1;
-}
-
-.path-insight {
-  margin-top: 24px;
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  display: flex;
-  gap: 16px;
-  border-left: 4px solid #f59e0b;
-}
-
-.insight-icon {
-  font-size: 24px;
-}
-
-.insight-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 8px;
-}
-
-.insight-list {
-  margin: 0;
-  padding-left: 20px;
-  font-size: 13px;
-  color: #475569;
-  line-height: 1.8;
-}
-
-.insight-list li {
-  margin-bottom: 4px;
+.info-box {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  border-left: 3px solid var(--vp-c-brand-1);
 }
 
 @media (max-width: 640px) {
   .stage-content {
     padding-left: 0;
   }
-
-  .stage-arrow {
-    display: none;
-  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeOptimizationDemo.vue
new file mode 100644
index 0000000..5817e29
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeOptimizationDemo.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="code-optimization-demo">
+    <h4>⚡ 编译器优化：让代码自动变快</h4>
+    <p class="desc">选择一种优化技术，观察编译器如何自动改进你的代码</p>
+
+    <div class="opt-selector">
+      <button
+        v-for="(opt, i) in optimizations"
+        :key="i"
+        :class="['opt-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        <span class="opt-icon">{{ opt.icon }}</span>
+        <span>{{ opt.name }}</span>
+      </button>
+    </div>
+
+    <div class="opt-detail">
+      <div class="code-panel before">
+        <div class="panel-header">📝 优化前</div>
+        <pre class="code-block">{{ optimizations[selected].before }}</pre>
+      </div>
+      <div class="arrow-col">
+        <div class="arrow-box">
+          <span class="arrow-icon">→</span>
+          <span class="arrow-label">编译器优化</span>
+        </div>
+      </div>
+      <div class="code-panel after">
+        <div class="panel-header">🚀 优化后</div>
+        <pre class="code-block">{{ optimizations[selected].after }}</pre>
+      </div>
+    </div>
+
+    <div class="opt-explain">
+      <div class="explain-header">{{ optimizations[selected].name }}原理</div>
+      <div class="explain-text">{{ optimizations[selected].explain }}</div>
+      <div class="perf-gain">
+        <span class="gain-label">性能提升：</span>
+        <div class="gain-bar-bg">
+          <div
+            class="gain-bar"
+            :style="{ width: optimizations[selected].gain + '%' }"
+          ></div>
+        </div>
+        <span class="gain-value">{{ optimizations[selected].gain }}%</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+
+const optimizations = [
+  {
+    icon: '🧮',
+    name: '常量折叠',
+    before: `const width = 10
+const height = 20
+const area = width * height  // 运行时计算
+console.log(area)`,
+    after: `const area = 200  // 编译时直接算出结果
+console.log(200)`,
+    explain:
+      '编译器发现 width 和 height 都是常量，在编译阶段就直接计算出 10 * 20 = 200，运行时不再需要做乘法运算。这是最基础也最常见的优化。',
+    gain: 30
+  },
+  {
+    icon: '💀',
+    name: '死代码消除',
+    before: `function process(x) {
+  const result = x * 2
+  return result
+
+  // 以下代码永远不会执行
+  console.log("debug info")
+  const unused = x + 1
+  return unused
+}`,
+    after: `function process(x) {
+  return x * 2  // 只保留有用的代码
+}`,
+    explain:
+      '编译器分析控制流，发现 return 之后的代码永远不会执行，直接删除。同时发现 result 变量只被赋值后立即返回，于是内联了表达式。',
+    gain: 20
+  },
+  {
+    icon: '🔄',
+    name: '循环不变量外提',
+    before: `const arr = [1, 2, 3, ..., 10000]
+for (let i = 0; i < arr.length; i++) {
+  // arr.length 每次循环都要读取
+  process(arr[i])
+}`,
+    after: `const arr = [1, 2, 3, ..., 10000]
+const len = arr.length  // 提到循环外，只读一次
+for (let i = 0; i < len; i++) {
+  process(arr[i])
+}`,
+    explain:
+      '循环体内的 arr.length 每次迭代都要访问，但它的值在循环中不会改变。编译器把这个不变的计算提到循环外面，避免了 10000 次重复读取。',
+    gain: 45
+  },
+  {
+    icon: '📦',
+    name: '函数内联',
+    before: `function square(x) {
+  return x * x
+}
+
+// 调用 10000 次
+for (let i = 0; i < 10000; i++) {
+  result += square(i)  // 每次都有函数调用开销
+}`,
+    after: `// 消除函数调用开销
+for (let i = 0; i < 10000; i++) {
+  result += i * i  // 直接展开，无调用开销
+}`,
+    explain:
+      '函数调用有开销（保存寄存器、跳转、返回）。对于小函数，编译器直接把函数体"粘贴"到调用处，消除调用开销。JIT 编译器（如 V8）特别擅长这个优化。',
+    gain: 55
+  },
+  {
+    icon: '🔗',
+    name: '常量传播',
+    before: `const x = 10
+const y = x + 5      // y = 15
+const z = y * 2      // z = 30
+console.log(z + 1)   // 31`,
+    after: `console.log(31)  // 编译时追踪所有常量值
+// x, y, z 全部被消除`,
+    explain:
+      '编译器追踪每个变量的值：x=10 → y=15 → z=30 → z+1=31。当所有中间变量都是常量时，整个计算链在编译时就完成了，运行时只需要输出结果。',
+    gain: 40
+  }
+]
+</script>
+
+<style scoped>
+.code-optimization-demo {
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 16px 0;
+  background: var(--vp-c-bg-soft);
+}
+h4 {
+  margin: 0 0 4px;
+}
+.desc {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  margin: 0 0 16px;
+}
+.opt-selector {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.opt-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+.opt-btn.active {
+  background: var(--vp-c-brand-1);
+  color: #fff;
+  border-color: var(--vp-c-brand-1);
+}
+.opt-icon {
+  font-size: 16px;
+}
+.opt-detail {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 8px;
+  margin-bottom: 14px;
+  align-items: stretch;
+}
+.code-panel {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+.panel-header {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+.code-block {
+  padding: 10px 12px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.arrow-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrow-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.arrow-icon {
+  font-size: 24px;
+  color: var(--vp-c-brand-1);
+  font-weight: 700;
+}
+.arrow-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  white-space: nowrap;
+}
+.opt-explain {
+  padding: 12px 14px;
+  background: var(--vp-c-brand-soft);
+  border-radius: 8px;
+}
+.explain-header {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.explain-text {
+  font-size: 13px;
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+.perf-gain {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.gain-label {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.gain-bar-bg {
+  flex: 1;
+  height: 8px;
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.gain-bar {
+  height: 100%;
+  background: var(--vp-c-brand-1);
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+.gain-value {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+}
+@media (max-width: 640px) {
+  .opt-detail {
+    grid-template-columns: 1fr;
+  }
+  .arrow-col {
+    transform: rotate(90deg);
+    padding: 4px 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeToInstructionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeToInstructionDemo.vue
new file mode 100644
index 0000000..7248e52
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CodeToInstructionDemo.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="code-to-instruction-demo">
+    <h4>🔗 从代码到指令：一行代码的翻译之旅</h4>
+    <p class="desc">点击每个阶段，看你写的代码如何一步步变成 CPU 能执行的指令</p>
+
+    <div class="example-selector">
+      <button
+        v-for="(ex, i) in examples"
+        :key="i"
+        :class="['ex-btn', { active: selectedExample === i }]"
+        @click="selectedExample = i"
+      >
+        <code>{{ ex.code }}</code>
+      </button>
+    </div>
+
+    <div class="translation-chain">
+      <div
+        v-for="(stage, j) in examples[selectedExample].stages"
+        :key="j"
+        :class="['stage-card', { active: activeStage === j }]"
+        @click="activeStage = j"
+      >
+        <div class="stage-header">
+          <span class="stage-num">{{ j + 1 }}</span>
+          <span class="stage-name">{{ stage.name }}</span>
+        </div>
+        <pre class="stage-code">{{ stage.content }}</pre>
+        <div v-if="activeStage === j" class="stage-explain">
+          {{ stage.explain }}
+        </div>
+      </div>
+
+      <div
+        v-for="j in examples[selectedExample].stages.length - 1"
+        :key="'arrow-' + j"
+        class="chain-arrow"
+        :style="{ order: j * 2 }"
+      >
+        ↓
+      </div>
+    </div>
+
+    <div class="key-insight">
+      <div class="insight-title">💡 关键理解</div>
+      <div class="insight-text">
+        指令集就是 CPU 的「API」——它定义了 CPU 能听懂的所有命令。
+        编译器的工作就是把你写的高级语言「翻译」成这套 API 的调用序列。
+        不同的 CPU（x86、ARM）有不同的指令集，就像不同的服务有不同的 API。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selectedExample = ref(0)
+const activeStage = ref(0)
+
+const examples = [
+  {
+    code: 'int a = 10 + 5;',
+    stages: [
+      {
+        name: '你写的代码',
+        content: 'int a = 10 + 5;',
+        explain:
+          '这是你在编辑器里写的高级语言代码。对人类来说很好懂，但 CPU 完全看不懂——它不认识 int、也不知道 + 是什么。'
+      },
+      {
+        name: '编译器翻译成汇编',
+        content: 'MOV  R1, #10    ; 把 10 放入寄存器 R1\nMOV  R2, #5     ; 把 5 放入寄存器 R2\nADD  R3, R1, R2 ; R3 = R1 + R2\nSTORE R3, [a]   ; 把结果存到变量 a 的内存地址',
+        explain:
+          '编译器把一行高级代码拆成了 4 条汇编指令。每条指令只做一件最简单的事：搬数据、做加法、存结果。这就是 CPU 的「能力粒度」。'
+      },
+      {
+        name: '汇编器转成机器码',
+        content: '0001 0001 0000 1010  → MOV R1, #10\n0001 0010 0000 0101  → MOV R2, #5\n0010 0011 0001 0010  → ADD R3, R1, R2\n0100 0011 1000 0000  → STORE R3, [a]',
+        explain:
+          '汇编器把每条汇编指令编码成二进制数字。操作码（前几位）告诉 CPU「做什么」，操作数（后面的位）告诉 CPU「对谁做」。这就是 CPU 真正执行的东西。'
+      },
+      {
+        name: 'CPU 逐条执行',
+        content: '时钟 1: 取指 → 译码 → 执行 MOV R1, #10\n时钟 2: 取指 → 译码 → 执行 MOV R2, #5\n时钟 3: 取指 → 译码 → 执行 ADD R3, R1, R2\n时钟 4: 取指 → 译码 → 执行 STORE R3, [a]',
+        explain:
+          'CPU 按顺序从内存取出每条指令，译码后执行。每个时钟周期处理一条指令（简化模型）。4 条指令执行完，变量 a 的值就是 15 了。'
+      }
+    ]
+  },
+  {
+    code: 'if (x > 0) y = 1;',
+    stages: [
+      {
+        name: '你写的代码',
+        content: 'if (x > 0) y = 1;',
+        explain:
+          '一个简单的条件判断。人类一眼就懂，但 CPU 没有「if」的概念——它只会比较和跳转。'
+      },
+      {
+        name: '编译器翻译成汇编',
+        content: 'LOAD R1, [x]     ; 从内存读取 x 的值\nCMP  R1, #0       ; 比较 R1 和 0\nBLE  skip         ; 如果 ≤ 0，跳过下面\nMOV  R2, #1       ; R2 = 1\nSTORE R2, [y]     ; 把 1 存到 y\nskip:             ; 跳转目标',
+        explain:
+          '编译器把 if 语句拆成了「比较 + 条件跳转」。CMP 指令比较两个值并设置标志位，BLE 根据标志位决定是否跳过赋值代码。这就是 CPU 实现条件逻辑的方式。'
+      },
+      {
+        name: '汇编器转成机器码',
+        content: '0011 0001 1000 0000  → LOAD R1, [x]\n0101 0001 0000 0000  → CMP R1, #0\n0110 0000 0000 0011  → BLE +3（跳过3条）\n0001 0010 0000 0001  → MOV R2, #1\n0100 0010 1000 0001  → STORE R2, [y]',
+        explain:
+          '注意 BLE 指令的操作数是「+3」——这是一个相对地址偏移，告诉 CPU 向前跳 3 条指令。这就是「相对寻址」的实际应用。'
+      },
+      {
+        name: 'CPU 逐条执行',
+        content: '假设 x = 5（大于 0）:\n→ LOAD: 读取 x=5 到 R1\n→ CMP:  比较 5 > 0，设置标志位\n→ BLE:  条件不满足，不跳转\n→ MOV:  R2 = 1\n→ STORE: y = 1 ✅',
+        explain:
+          '因为 x=5 大于 0，BLE 的条件不满足，所以 CPU 继续执行下面的赋值。如果 x=0，BLE 会跳过赋值，直接到 skip 标签处。'
+      }
+    ]
+  }
+]
+</script>
+
+<style scoped>
+.code-to-instruction-demo {
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 16px 0;
+  background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+
+.example-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.ex-btn {
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.ex-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.ex-btn code { font-size: 13px; }
+
+.translation-chain {
+  display: flex; flex-direction: column; gap: 0; margin-bottom: 16px;
+}
+.stage-card {
+  border: 1px solid var(--vp-c-divider); border-radius: 8px;
+  background: var(--vp-c-bg); overflow: hidden; cursor: pointer;
+  transition: all 0.2s; order: 0;
+}
+.stage-card:nth-child(1) { order: 0; }
+.stage-card:nth-child(3) { order: 2; }
+.stage-card:nth-child(5) { order: 4; }
+.stage-card:nth-child(7) { order: 6; }
+.stage-card.active { border-color: var(--vp-c-brand-1); box-shadow: 0 0 0 1px var(--vp-c-brand-1); }
+.stage-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.stage-num {
+  width: 22px; height: 22px; border-radius: 50%; background: var(--vp-c-brand-1);
+  color: #fff; display: flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 600;
+}
+.stage-name { font-size: 13px; font-weight: 600; }
+.stage-code {
+  padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5;
+  white-space: pre-wrap; max-height: 120px; overflow-y: auto;
+}
+.stage-explain {
+  padding: 8px 12px; font-size: 12px; line-height: 1.6;
+  background: var(--vp-c-brand-soft); border-top: 1px solid var(--vp-c-divider);
+}
+.chain-arrow {
+  text-align: center; font-size: 18px; color: var(--vp-c-brand-1);
+  font-weight: 700; padding: 4px 0;
+}
+
+.key-insight {
+  padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px;
+}
+.insight-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
+.insight-text { font-size: 13px; line-height: 1.6; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue
new file mode 100644
index 0000000..0c46b5e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="compile-vs-interpret-demo">
+    <h4>🔄 编译型 vs 解释型 vs JIT</h4>
+    <p class="desc">点击不同执行模式，观察代码从源码到运行的过程</p>
+
+    <div class="mode-selector">
+      <button
+        v-for="(m, i) in modes"
+        :key="i"
+        :class="['mode-btn', { active: selected === i }]"
+        @click="selectMode(i)"
+      >
+        {{ m.name }}
+      </button>
+    </div>
+
+    <div class="pipeline">
+      <div
+        v-for="(step, j) in modes[selected].steps"
+        :key="j"
+        :class="['pipe-step', { visible: visibleSteps > j }]"
+      >
+        <div class="step-icon">{{ step.icon }}</div>
+        <div class="step-content">
+          <div class="step-name">{{ step.name }}</div>
+          <div class="step-desc">{{ step.desc }}</div>
+        </div>
+        <div v-if="j < modes[selected].steps.length - 1" class="arrow">→</div>
+      </div>
+    </div>
+
+    <div class="metrics">
+      <div class="metric" v-for="m in modes[selected].metrics" :key="m.label">
+        <span class="metric-label">{{ m.label }}</span>
+        <div class="metric-bar-bg">
+          <div class="metric-bar" :style="{ width: m.value + '%', background: m.color }"></div>
+        </div>
+        <span class="metric-val">{{ m.text }}</span>
+      </div>
+    </div>
+
+    <div class="examples">
+      <span class="ex-label">代表语言：</span>
+      <span class="ex-lang" v-for="l in modes[selected].langs" :key="l">{{ l }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+const visibleSteps = ref(0)
+let timer = null
+
+function selectMode(i) {
+  selected.value = i
+  visibleSteps.value = 0
+  clearInterval(timer)
+  timer = setInterval(() => {
+    if (visibleSteps.value < modes[i].steps.length) {
+      visibleSteps.value++
+    } else {
+      clearInterval(timer)
+    }
+  }, 300)
+}
+
+const modes = [
+  {
+    name: '编译型',
+    steps: [
+      { icon: '📝', name: '源代码', desc: 'main.c' },
+      { icon: '⚙️', name: '编译器', desc: '全量编译' },
+      { icon: '📦', name: '机器码', desc: '二进制可执行文件' },
+      { icon: '🚀', name: '直接执行', desc: 'CPU 直接运行' }
+    ],
+    metrics: [
+      { label: '运行速度', value: 95, text: '极快', color: '#22c55e' },
+      { label: '启动速度', value: 30, text: '慢（需编译）', color: '#ef4444' },
+      { label: '跨平台', value: 20, text: '需重新编译', color: '#ef4444' }
+    ],
+    langs: ['C', 'C++', 'Rust', 'Go']
+  },
+  {
+    name: '解释型',
+    steps: [
+      { icon: '📝', name: '源代码', desc: 'app.py' },
+      { icon: '🔍', name: '解释器', desc: '逐行读取' },
+      { icon: '🔄', name: '逐行执行', desc: '边翻译边运行' }
+    ],
+    metrics: [
+      { label: '运行速度', value: 30, text: '较慢', color: '#ef4444' },
+      { label: '启动速度', value: 90, text: '快（直接运行）', color: '#22c55e' },
+      { label: '跨平台', value: 90, text: '天然跨平台', color: '#22c55e' }
+    ],
+    langs: ['Python', 'Ruby', 'PHP', 'Bash']
+  },
+  {
+    name: 'JIT 即时编译',
+    steps: [
+      { icon: '📝', name: '源代码', desc: 'app.js' },
+      { icon: '🔍', name: '解释执行', desc: '先解释运行' },
+      { icon: '🔥', name: '热点检测', desc: '发现高频代码' },
+      { icon: '⚡', name: 'JIT 编译', desc: '编译为机器码' },
+      { icon: '🚀', name: '高速执行', desc: '接近原生速度' }
+    ],
+    metrics: [
+      { label: '运行速度', value: 75, text: '快（热点接近原生）', color: '#22c55e' },
+      { label: '启动速度', value: 60, text: '中等（需预热）', color: '#eab308' },
+      { label: '跨平台', value: 85, text: '跨平台', color: '#22c55e' }
+    ],
+    langs: ['JavaScript (V8)', 'Java (JVM)', 'C# (.NET)']
+  }
+]
+
+selectMode(0)
+</script>
+
+<style scoped>
+.compile-vs-interpret-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.mode-selector { display: flex; gap: 8px; margin-bottom: 16px; }
+.mode-btn {
+  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 14px; font-weight: 500;
+  transition: all 0.2s;
+}
+.mode-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.pipeline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
+.pipe-step {
+  display: flex; align-items: center; gap: 4px; opacity: 0;
+  transform: translateY(8px); transition: all 0.3s;
+}
+.pipe-step.visible { opacity: 1; transform: translateY(0); }
+.step-icon { font-size: 24px; }
+.step-name { font-size: 12px; font-weight: 600; }
+.step-desc { font-size: 11px; color: var(--vp-c-text-3); }
+.arrow { color: var(--vp-c-text-3); font-size: 18px; margin: 0 4px; }
+.metrics { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.metric { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+.metric-label { width: 70px; text-align: right; color: var(--vp-c-text-2); }
+.metric-bar-bg { flex: 1; height: 10px; background: var(--vp-c-divider); border-radius: 5px; overflow: hidden; }
+.metric-bar { height: 100%; border-radius: 5px; transition: width 0.5s; }
+.metric-val { width: 130px; font-size: 12px; color: var(--vp-c-text-3); }
+.examples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ex-label { font-size: 13px; color: var(--vp-c-text-2); }
+.ex-lang {
+  padding: 3px 10px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+  border-radius: 4px; font-size: 12px;
+}
+@media (max-width: 640px) { .metric-val { width: auto; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue
index deb4c61..38d8a48 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue
@@ -10,8 +10,6 @@
         v-for="field in fields"
         :key="field.name"
         class="field-card"
-        :class="{ active: activeField === field.name }"
-        @click="activeField = field.name"
       >
         <div class="field-name">{{ field.name }}</div>
         <div class="field-desc">{{ field.desc }}</div>
@@ -28,11 +26,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const activeField = ref('前端')
-
-const fields = ref([
+const fields = [
   {
     name: '前端',
     desc: '用户能看到、能交互的一切',
@@ -63,7 +57,7 @@ const fields = ref([
     desc: '数据采集、存储、分析',
     techs: ['SQL', 'Spark', '数据仓库']
   }
-])
+]
 </script>
 
 <style scoped>
@@ -106,17 +100,6 @@ const fields = ref([
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.field-card:hover {
-  border-color: var(--vp-c-brand-1);
-}
-
-.field-card.active {
-  border-color: var(--vp-c-brand-1);
-  background: var(--vp-c-bg-soft);
 }
 
 .field-name {
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ControllerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ControllerDemo.vue
new file mode 100644
index 0000000..dad96f5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ControllerDemo.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="controller-demo">
+    <div class="demo-header">
+      <span class="title">控制器工作原理</span>
+      <span class="subtitle">控制信号如何协调 CPU 各个部件</span>
+    </div>
+
+    <div class="control-unit">
+      <div class="cu-box">
+        <div class="cu-title">控制单元 CU</div>
+        <div class="cu-diagram">
+          <div class="cu-internal">
+            <div class="cu-component">指令寄存器 IR</div>
+            <div class="cu-component">指令译码器</div>
+            <div class="cu-component">时序发生器</div>
+          </div>
+          <div class="cu-output">
+            <div class="output-label">输出控制信号：</div>
+            <div class="control-signals">
+              <div v-for="sig in controlSignals" :key="sig.name" :class="['sig-box', sig.active ? 'active' : '']">
+                {{ sig.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cpu-block-diagram">
+      <div class="block-row">
+        <div class="cpu-block" :class="{ active: activeBlock === 'pc' }">
+          <div class="block-name">PC</div>
+          <div class="block-desc">程序计数器</div>
+        </div>
+        <div class="arrow" :class="{ active: activeBlock === 'pc' }">→</div>
+        <div class="cpu-block" :class="{ active: activeBlock === 'mar' }">
+          <div class="block-name">MAR</div>
+          <div class="block-desc">地址寄存器</div>
+        </div>
+        <div class="arrow" :class="{ active: activeBlock === 'mar' }">→</div>
+        <div class="cpu-block" :class="{ active: activeBlock === 'memory' }">
+          <div class="block-name">Memory</div>
+          <div class="block-desc">主存</div>
+        </div>
+      </div>
+
+      <div class="block-row">
+        <div class="cpu-block" :class="{ active: activeBlock === 'mdr' }">
+          <div class="block-name">MDR</div>
+          <div class="block-desc">数据寄存器</div>
+        </div>
+        <div class="arrow" :class="{ active: activeBlock === 'mdr' }">→</div>
+        <div class="cpu-block" :class="{ active: activeBlock === 'ir' }">
+          <div class="block-name">IR</div>
+          <div class="block-desc">指令寄存器</div>
+        </div>
+        <div class="arrow" :class="{ active: activeBlock === 'ir' }">→</div>
+        <div class="cpu-block" :class="{ active: activeBlock === 'decoder' }">
+          <div class="block-name">ID</div>
+          <div class="block-desc">译码器</div>
+        </div>
+      </div>
+
+      <div class="block-row">
+        <div class="cpu-block" :class="{ active: activeBlock === 'alu' }">
+          <div class="block-name">ALU</div>
+          <div class="block-desc">算术逻辑单元</div>
+        </div>
+        <div class="arrow" :class="{ active: activeBlock === 'alu' }">↔</div>
+        <div class="cpu-block" :class="{ active: activeBlock === 'acc' }">
+          <div class="block-name">ACC</div>
+          <div class="block-desc">累加器</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <button class="btn" @click="executeFetch">执行取指周期</button>
+      <button class="btn" @click="executeAdd">执行 ADD 指令</button>
+      <button class="btn" @click="executeLoad">执行 LOAD 指令</button>
+    </div>
+
+    <div class="microinstruction-panel">
+      <div class="panel-title">当前微指令</div>
+      <div class="micro-ops">
+        <div v-for="(op, i) in microOps" :key="i" :class="['micro-op', op.active ? 'active' : '']">
+          <span class="op-cycle">T{{ i + 1 }}</span>
+          <span class="op-desc">{{ op.desc }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="cu-explanation">
+      <div class="exp-title">控制器核心概念</div>
+      <div class="exp-content">
+        <div class="exp-item">
+          <strong>控制信号：</strong>由控制器发出的电信号，用于控制数据通路中各个部件的动作
+        </div>
+        <div class="exp-item">
+          <strong>时序：</strong>CPU 操作按时钟节拍进行，每个节拍执行特定微操作
+        </div>
+        <div class="exp-item">
+          <strong>硬布线 vs 微程序：</strong>硬布线控制器速度快但设计复杂；微程序控制器灵活但速度稍慢
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const activeBlock = ref('')
+
+const controlSignals = reactive([
+  { name: 'PC→MAR', active: false },
+  { name: 'MEM→MDR', active: false },
+  { name: 'MDR→IR', active: false },
+  { name: 'IR→ID', active: false },
+  { name: 'ALU→ACC', active: false },
+  { name: 'ACC→MDR', active: false },
+])
+
+const microOps = reactive([])
+
+const clearSignals = () => {
+  controlSignals.forEach(s => s.active = false)
+  activeBlock.value = ''
+}
+
+const executeFetch = async () => {
+  clearSignals()
+  microOps.splice(0, microOps.length)
+  
+  microOps.push({ desc: 'PC→MAR: 将PC中的地址送入MAR', active: true })
+  controlSignals[0].active = true
+  activeBlock.value = 'pc'
+  await wait(1000)
+
+  microOps.push({ desc: 'MEM→MDR: 从内存读取指令到MDR', active: true })
+  controlSignals[1].active = true
+  activeBlock.value = 'memory'
+  await wait(1000)
+
+  microOps.push({ desc: 'MDR→IR: 将指令送入IR', active: true })
+  controlSignals[2].active = true
+  activeBlock.value = 'mar'
+  await wait(1000)
+
+  microOps.push({ desc: 'IR→ID: 指令送入译码器', active: true })
+  controlSignals[3].active = true
+  activeBlock.value = 'ir'
+  await wait(1000)
+}
+
+const executeAdd = async () => {
+  clearSignals()
+  microOps.splice(0, microOps.length)
+  
+  microOps.push({ desc: '指令译码：识别为ADD指令', active: true })
+  activeBlock.value = 'decoder'
+  await wait(1000)
+
+  microOps.push({ desc: 'ALU执行加法运算', active: true })
+  controlSignals[4].active = true
+  activeBlock.value = 'alu'
+  await wait(1000)
+
+  microOps.push({ desc: '结果写入ACC', active: true })
+  activeBlock.value = 'acc'
+  await wait(1000)
+}
+
+const executeLoad = async () => {
+  clearSignals()
+  microOps.splice(0, microOps.length)
+  
+  microOps.push({ desc: '指令译码：识别为LOAD指令', active: true })
+  activeBlock.value = 'decoder'
+  await wait(1000)
+
+  microOps.push({ desc: 'PC→MAR: 取操作数地址', active: true })
+  controlSignals[0].active = true
+  activeBlock.value = 'pc'
+  await wait(1000)
+
+  microOps.push({ desc: 'MEM→MDR: 读取数据', active: true })
+  controlSignals[1].active = true
+  activeBlock.value = 'memory'
+  await wait(1000)
+
+  microOps.push({ desc: 'MDR→ACC: 数据送入ACC', active: true })
+  controlSignals[5].active = true
+  activeBlock.value = 'mdr'
+  await wait(1000)
+}
+
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+</script>
+
+<style scoped>
+.controller-demo {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.control-unit {
+  margin-bottom: 20px;
+}
+
+.cu-box {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.cu-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.cu-diagram {
+  display: flex;
+  gap: 16px;
+}
+
+.cu-internal {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cu-component {
+  padding: 8px 12px;
+  background: #e0f2fe;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #0369a1;
+  text-align: center;
+}
+
+.cu-output {
+  flex: 1;
+}
+
+.output-label {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.control-signals {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.sig-box {
+  padding: 6px 10px;
+  background: #f1f5f9;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #64748b;
+  font-family: monospace;
+}
+
+.sig-box.active {
+  background: #3b82f6;
+  color: white;
+}
+
+.cpu-block-diagram {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.block-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.cpu-block {
+  padding: 10px 16px;
+  background: #f1f5f9;
+  border-radius: 6px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.cpu-block.active {
+  background: #dbeafe;
+  border: 2px solid #3b82f6;
+}
+
+.block-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.block-desc {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.arrow {
+  font-size: 16px;
+  color: #cbd5e1;
+}
+
+.arrow.active {
+  color: #3b82f6;
+}
+
+.control-panel {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.btn {
+  padding: 8px 16px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn:hover {
+  background: #2563eb;
+}
+
+.microinstruction-panel {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.micro-ops {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.micro-op {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #f8fafc;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.micro-op.active {
+  background: #dbeafe;
+}
+
+.op-cycle {
+  font-weight: 600;
+  color: #3b82f6;
+  min-width: 24px;
+}
+
+.op-desc {
+  color: #475569;
+}
+
+.cu-explanation {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.exp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.exp-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.exp-item {
+  font-size: 12px;
+  color: #475569;
+  padding: 8px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
index b458904..8f79b36 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
@@ -1,53 +1,85 @@
 <template>
   <div class="desktop-demo">
-    <div class="demo-label">桌面是如何出现的 ── 点击加载</div>
-
-    <div class="desktop-view" @click="loading = !loading">
-      <div class="screen" :class="{ loaded: loading }">
-        <div class="boot-screen" v-if="!loading">
-          <div class="boot-logo">⚙️</div>
-          <div class="boot-text">正在启动...</div>
+    <div class="demo-title">从开机到桌面</div>
+    <div class="screen-wrapper">
+      <div class="screen">
+        <div v-if="phase === 0" class="phase-bios">
+          <div class="bios-text">POST 自检中...</div>
         </div>
-        <div class="desktop" v-else>
+        <div v-else-if="phase === 1" class="phase-boot">
+          <div class="boot-spinner"></div>
+          <div class="boot-text">正在加载内核...</div>
+        </div>
+        <div v-else-if="phase === 2" class="phase-loading">
+          <div class="loading-bar-track">
+            <div class="loading-bar-fill"></div>
+          </div>
+          <div class="loading-text">启动系统服务...</div>
+        </div>
+        <div v-else class="phase-desktop">
           <div class="desktop-icons">
-            <div class="desktop-icon">📁</div>
-            <div class="desktop-icon">🗑️</div>
-            <div class="desktop-icon">⚙️</div>
-            <div class="desktop-icon">🌐</div>
+            <div class="icon-item" v-for="icon in icons" :key="icon.label">
+              <div class="icon-box">{{ icon.emoji }}</div>
+              <div class="icon-label">{{ icon.label }}</div>
+            </div>
           </div>
           <div class="taskbar">
-            <div class="taskbar-icon">🏠</div>
-            <div class="taskbar-icon">📊</div>
-            <div class="taskbar-time">{{ time }}</div>
+            <span class="taskbar-start">☰</span>
+            <span class="taskbar-spacer"></span>
+            <span class="taskbar-clock">{{ clock }}</span>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击切换开机状态</div>
+    <div class="phase-labels">
+      <span v-for="(label, i) in labels" :key="label" class="phase-label" :class="{ active: phase >= i }">
+        {{ label }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 
-const loading = ref(false)
-const time = ref('')
-
+const phase = ref(0)
+const clock = ref('')
 let timer = null
+let phaseTimer = null
 
-const updateTime = () => {
+const icons = [
+  { emoji: '📁', label: '文件' },
+  { emoji: '🌐', label: '浏览器' },
+  { emoji: '⚙️', label: '设置' },
+  { emoji: '🗑️', label: '回收站' }
+]
+const labels = ['BIOS 自检', '内核加载', '服务启动', '桌面就绪']
+
+const updateClock = () => {
   const now = new Date()
-  time.value = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  clock.value = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+}
+
+const runSequence = () => {
+  phase.value = 0
+  const delays = [1500, 1500, 1800]
+  let i = 0
+  const next = () => {
+    if (i < delays.length) {
+      phaseTimer = setTimeout(() => { phase.value = i + 1; i++; next() }, delays[i])
+    }
+  }
+  next()
 }
 
 onMounted(() => {
-  updateTime()
-  timer = setInterval(updateTime, 1000)
+  updateClock()
+  timer = setInterval(updateClock, 30000)
+  runSequence()
 })
-
 onUnmounted(() => {
   if (timer) clearInterval(timer)
+  if (phaseTimer) clearTimeout(phaseTimer)
 })
 </script>
 
@@ -58,115 +90,163 @@ onUnmounted(() => {
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
+.demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+  margin-bottom: 0.8rem;
 }
-
-.desktop-view {
-  display: flex;
-  justify-content: center;
-}
-
+.screen-wrapper { display: flex; justify-content: center; }
 .screen {
-  width: 14rem;
-  height: 9rem;
-  background: #1a1a1a;
+  width: 16rem;
+  height: 10rem;
+  background: #111;
   border-radius: 6px;
   overflow: hidden;
-  transition: all 0.5s;
+  position: relative;
 }
-
-.screen.loaded {
-  background: linear-gradient(180deg, #2d5af5 0%, #1e3a8a 100%);
+/* BIOS phase */
+.phase-bios {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.boot-screen {
+.bios-text {
+  font-size: 0.7rem;
+  color: #0f0;
+  font-family: monospace;
+  animation: blink 1s steps(1) infinite;
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+/* Boot phase */
+.phase-boot {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #666;
+  gap: 0.6rem;
 }
-
-.boot-logo {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-  animation: spin 2s linear infinite;
+.boot-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid #333;
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
-
 @keyframes spin {
-  from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
-
 .boot-text {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
+  color: #888;
 }
-
-.desktop {
+/* Loading phase */
+.phase-loading {
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  padding: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.loading-bar-track {
+  width: 8rem;
+  height: 4px;
+  background: #333;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.loading-bar-fill {
+  height: 100%;
+  background: #4a9eff;
+  border-radius: 2px;
+  animation: fill 1.6s ease-out forwards;
+}
+@keyframes fill {
+  from { width: 0; }
+  to { width: 100%; }
+}
+.loading-text {
+  font-size: 0.65rem;
+  color: #888;
+}
+/* Desktop phase */
+.phase-desktop {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
+  animation: fadeIn 0.5s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
-
 .desktop-icons {
+  flex: 1;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
+  padding: 0.5rem;
+  align-content: flex-start;
 }
-
-.desktop-icon {
-  width: 2.2rem;
-  height: 2.2rem;
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 2.5rem;
+}
+.icon-box {
+  width: 2rem;
+  height: 2rem;
   background: rgba(255,255,255,0.15);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.2rem;
+  font-size: 1rem;
+}
+.icon-label {
+  font-size: 0.5rem;
+  color: rgba(255,255,255,0.8);
+  margin-top: 0.15rem;
 }
-
 .taskbar {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  background: rgba(0,0,0,0.3);
-  padding: 0.3rem 0.5rem;
-  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  background: rgba(0,0,0,0.4);
 }
-
-.taskbar-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  background: rgba(255,255,255,0.2);
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8rem;
-}
-
-.taskbar-time {
-  margin-left: auto;
+.taskbar-start {
   font-size: 0.7rem;
   color: white;
 }
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
+.taskbar-spacer { flex: 1; }
+.taskbar-clock {
+  font-size: 0.6rem;
+  color: rgba(255,255,255,0.8);
+}
+/* Phase labels */
+.phase-labels {
+  display: flex;
+  justify-content: center;
+  gap: 0.8rem;
+  margin-top: 0.7rem;
+}
+.phase-label {
+  font-size: 0.62rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+  opacity: 0.4;
+  transition: opacity 0.3s;
+}
+.phase-label.active {
+  opacity: 1;
+  color: var(--vp-c-brand);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue
index cf41e78..ae08d85 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue
@@ -37,13 +37,13 @@ const eras = ref([
   {
     name: '原生时代',
     time: '1990s',
-    desc: '直接操作 DOM，一切从零开始',
+    desc: '直接用代码操控页面元素，一切从零开始',
     techs: ['HTML', 'CSS', 'JavaScript']
   },
   {
     name: 'jQuery 时代',
     time: '2006-2015',
-    desc: '简化 DOM 操作，跨浏览器兼容',
+    desc: '简化页面操控，跨浏览器兼容',
     techs: ['jQuery', 'Bootstrap']
   },
   {
@@ -55,7 +55,7 @@ const eras = ref([
   {
     name: '组件化时代',
     time: '2013-至今',
-    desc: '声明式、组件化、虚拟 DOM',
+    desc: '声明式、组件化，框架自动更新页面',
     techs: ['React', 'Vue', 'Angular']
   },
   {
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue
index 11e5919..24fa585 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue
@@ -10,8 +10,6 @@
         v-for="tech in triad"
         :key="tech.name"
         class="tech-card"
-        :class="{ active: activeTech === tech.name }"
-        @click="activeTech = tech.name"
       >
         <div class="tech-name">{{ tech.name }}</div>
         <div class="tech-role">{{ tech.role }}</div>
@@ -29,11 +27,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const activeTech = ref('HTML')
-
-const triad = ref([
+const triad = [
   {
     name: 'HTML',
     role: '结构层',
@@ -52,7 +46,7 @@ const triad = ref([
     analogy: '房子的智能：开关灯、开门',
     examples: ['事件', 'DOM操作', '网络请求']
   }
-])
+]
 </script>
 
 <style scoped>
@@ -95,16 +89,6 @@ const triad = ref([
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.tech-card:hover {
-  border-color: var(--vp-c-brand-1);
-}
-
-.tech-card.active {
-  border-color: var(--vp-c-brand-1);
 }
 
 .tech-name {
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue
index 6790306..5dd3a0b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue
@@ -1,120 +1,96 @@
 <template>
-  <div class="full-process-demo">
-    <div class="demo-label">完整流程概览 ── 点击逐步演示</div>
-
-    <div class="process-flow">
-      <div
-        v-for="(phase, index) in phases"
-        :key="phase.name"
-        class="phase"
-        :class="{ active: currentPhase >= index }"
-        @click="currentPhase = index"
-      >
-        <div class="phase-icon">{{ phase.icon }}</div>
-        <div class="phase-name">{{ phase.name }}</div>
-        <div class="phase-steps">
-          <span v-for="step in phase.steps" :key="step" class="step-tag">{{ step }}</span>
+  <div class="full-demo">
+    <div class="demo-title">从按下电源到看到网页 ── 完整链路</div>
+    <div class="chain">
+      <div v-for="(phase, i) in phases" :key="phase.name" class="chain-item">
+        <div class="phase-card" :style="{ borderLeftColor: phase.color }">
+          <div class="phase-head">
+            <span class="phase-icon">{{ phase.icon }}</span>
+            <span class="phase-name">{{ phase.name }}</span>
+          </div>
+          <div class="phase-steps">
+            {{ phase.steps }}
+          </div>
+        </div>
+        <div v-if="i < phases.length - 1" class="chain-arrow">
+          <svg width="20" height="14" viewBox="0 0 20 14">
+            <path d="M0 7h14M10 2l6 5-6 5" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
         </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击查看各阶段</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentPhase = ref(0)
 const phases = [
-  { icon: '🔌', name: '硬件启动', steps: ['电源', '主板', 'CPU', 'BIOS'] },
-  { icon: '💻', name: '系统启动', steps: ['引导程序', '内核', '服务', '桌面'] },
-  { icon: '🌐', name: '浏览器', steps: ['双击图标', '加载程序', '显示窗口'] },
-  { icon: '📡', name: '网络请求', steps: ['URL解析', 'DNS', 'TCP', 'HTTP'] },
-  { icon: '🎨', name: '页面渲染', steps: ['HTML解析', 'CSS', '布局', '绘制'] }
+  { icon: '🔌', name: '硬件启动', color: '#f59e0b', steps: '电源 → 主板 → CPU → BIOS' },
+  { icon: '🔍', name: '固件自检', color: '#ef4444', steps: 'POST → 初始化 → 找启动盘' },
+  { icon: '💻', name: '系统启动', color: '#8b5cf6', steps: '引导 → 内核 → 服务 → 桌面' },
+  { icon: '🌐', name: '浏览器启动', color: '#3b82f6', steps: '创建进程 → 加载代码 → 就绪' },
+  { icon: '📡', name: '网络请求与渲染', color: '#10b981', steps: 'DNS → TCP → HTTP → 渲染' }
 ]
 </script>
 
 <style scoped>
-.full-process-demo {
+.full-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
-}
-
-.process-flow {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.phase {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.6rem 0.4rem;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-
-.phase.active {
-  opacity: 1;
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-}
-
-.phase-icon {
-  font-size: 1.4rem;
-  margin-bottom: 0.3rem;
-}
-
-.phase-name {
-  font-size: 0.7rem;
+.demo-title {
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.8rem;
 }
-
-.phase-steps {
+.chain {
   display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  width: 100%;
+  align-items: center;
+  gap: 0;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-
-.step-tag {
-  font-size: 0.58rem;
-  text-align: center;
-  padding: 0.15rem 0;
-  background: var(--vp-c-bg-soft);
-  border-radius: 3px;
-  color: var(--vp-c-text-3);
+.chain-item {
+  display: flex;
+  align-items: center;
+  gap: 0;
 }
-
-.phase.active .step-tag {
+.phase-card {
   background: var(--vp-c-bg);
-  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 3px solid;
+  border-radius: 6px;
+  padding: 0.5rem 0.6rem;
+  min-width: 6rem;
 }
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
+.phase-head {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.25rem;
+}
+.phase-icon { font-size: 0.9rem; }
+.phase-name {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.phase-steps {
+  font-size: 0.58rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+  line-height: 1.4;
+}
+.chain-arrow {
+  padding: 0 0.2rem;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 640px) {
+  .chain { flex-direction: column; gap: 0.15rem; }
+  .chain-item { flex-direction: column; }
+  .chain-arrow { transform: rotate(90deg); padding: 0.1rem 0; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GenericTypeDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GenericTypeDemo.vue
new file mode 100644
index 0000000..d96bad2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GenericTypeDemo.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="generic-type-demo">
+    <h4>🧩 泛型：写一次，适用所有类型</h4>
+    <p class="desc">点击不同场景，看泛型如何让代码既灵活又安全</p>
+
+    <div class="scene-selector">
+      <button
+        v-for="(s, i) in scenes"
+        :key="i"
+        :class="['scene-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        {{ s.label }}
+      </button>
+    </div>
+
+    <div class="code-comparison">
+      <div class="code-panel">
+        <div class="panel-tag bad">❌ 没有泛型</div>
+        <pre class="code-block">{{ scenes[selected].without }}</pre>
+        <div class="panel-problem">{{ scenes[selected].problem }}</div>
+      </div>
+      <div class="code-panel">
+        <div class="panel-tag good">✅ 使用泛型</div>
+        <pre class="code-block">{{ scenes[selected].withGeneric }}</pre>
+        <div class="panel-benefit">{{ scenes[selected].benefit }}</div>
+      </div>
+    </div>
+
+    <div class="type-flow">
+      <div class="flow-title">类型传递过程</div>
+      <div class="flow-steps">
+        <span
+          v-for="(step, j) in scenes[selected].flow"
+          :key="j"
+          class="flow-step"
+        >
+          <code>{{ step }}</code>
+          <span v-if="j < scenes[selected].flow.length - 1" class="flow-arrow">→</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+
+const scenes = [
+  {
+    label: '通用函数',
+    without: `// 要为每种类型写一个函数
+function getFirstNumber(arr: number[]): number {
+  return arr[0]
+}
+function getFirstString(arr: string[]): string {
+  return arr[0]
+}
+// 还有 boolean、object...写不完`,
+    withGeneric: `// 一个泛型函数搞定所有类型
+function getFirst<T>(arr: T[]): T {
+  return arr[0]
+}
+
+getFirst<number>([1, 2, 3])   // → number
+getFirst<string>(["a", "b"])  // → string`,
+    problem: '每种类型都要写一遍，代码重复',
+    benefit: 'T 是类型参数，调用时自动替换为实际类型',
+    flow: ['T = number', 'arr: number[]', '返回值: number']
+  },
+  {
+    label: '类型安全容器',
+    without: `// 用 any 失去类型安全
+class Box {
+  value: any
+  get(): any { return this.value }
+}
+const box = new Box()
+box.value = 42
+const v = box.get() // v 是 any，没有类型提示`,
+    withGeneric: `// 泛型类保持类型安全
+class Box<T> {
+  value: T
+  get(): T { return this.value }
+}
+const box = new Box<number>()
+box.value = 42
+const v = box.get() // v 是 number，有完整提示`,
+    problem: 'any 类型没有任何类型检查和提示',
+    benefit: '泛型类在实例化时确定类型，全程类型安全',
+    flow: ['Box<number>', 'value: number', 'get(): number']
+  },
+  {
+    label: '类型约束',
+    without: `// 没有约束，什么都能传
+function getLength<T>(item: T): number {
+  return item.length  // ❌ 编译错误！
+  // T 可能没有 length 属性
+}`,
+    withGeneric: `// 用 extends 约束 T 必须有 length
+interface HasLength { length: number }
+
+function getLength<T extends HasLength>(item: T) {
+  return item.length  // ✅ 安全！
+}
+
+getLength("hello")     // ✅ string 有 length
+getLength([1, 2, 3])   // ✅ array 有 length
+getLength(42)           // ❌ number 没有 length`,
+    problem: '不加约束，泛型太"自由"，无法安全访问属性',
+    benefit: 'extends 约束确保 T 一定有 length 属性',
+    flow: ['T extends HasLength', '确保有 .length', '安全访问']
+  }
+]
+</script>
+
+<style scoped>
+.generic-type-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.scene-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.scene-btn {
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.scene-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.code-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
+.code-panel { border: 1px solid var(--vp-c-divider); border-radius: 8px; overflow: hidden; background: var(--vp-c-bg); }
+.panel-tag { padding: 6px 12px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--vp-c-divider); }
+.panel-tag.bad { background: #fef2f2; color: #991b1b; }
+.panel-tag.good { background: #f0fdf4; color: #166534; }
+.code-block { padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
+.panel-problem, .panel-benefit { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
+.panel-problem { background: #fef2f2; color: #991b1b; }
+.panel-benefit { background: #f0fdf4; color: #166534; }
+.type-flow { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
+.flow-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
+.flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.flow-step { display: flex; align-items: center; gap: 6px; }
+.flow-step code { padding: 3px 8px; background: var(--vp-c-bg); border-radius: 4px; font-size: 12px; }
+.flow-arrow { color: var(--vp-c-text-3); font-weight: 600; }
+@media (max-width: 640px) { .code-comparison { grid-template-columns: 1fr; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/IOMethodDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/IOMethodDemo.vue
new file mode 100644
index 0000000..14f8e65
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/IOMethodDemo.vue
@@ -0,0 +1,591 @@
+<template>
+  <div class="io-method-demo">
+    <div class="demo-header">
+      <span class="title">I/O 方式对比</span>
+      <span class="subtitle">程序查询 · 中断方式 · DMA</span>
+    </div>
+
+    <div class="io-tabs">
+      <button 
+        v-for="method in ioMethods" 
+        :key="method.name"
+        :class="['tab-btn', { active: selectedMethod === method.name }]"
+        @click="selectedMethod = method.name"
+      >
+        {{ method.name }}
+      </button>
+    </div>
+
+    <div class="method-details" v-if="selectedMethodData">
+      <div class="detail-header">
+        <span class="method-name">{{ selectedMethodData.name }}</span>
+        <span class="method-english">{{ selectedMethodData.english }}</span>
+      </div>
+
+      <div class="detail-flow">
+        <div class="flow-title">工作流程</div>
+        <div class="flow-diagram">
+          <div v-for="(step, i) in selectedMethodData.steps" :key="i" class="flow-node">
+            <div class="node-box" :class="{ active: activeStep === i }" @click="activeStep = i">
+              <span class="node-num">{{ i + 1 }}</span>
+              <span class="node-text">{{ step }}</span>
+            </div>
+            <div v-if="i < selectedMethodData.steps.length - 1" class="flow-arrow">↓</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="detail-comparison">
+        <div class="comp-grid">
+          <div class="comp-item">
+            <span class="comp-label">CPU 参与度</span>
+            <span class="comp-value" :class="selectedMethodData.cpuLevel">{{ selectedMethodData.cpuLevel }}</span>
+          </div>
+          <div class="comp-item">
+            <span class="comp-label">速度</span>
+            <span class="comp-value">{{ selectedMethodData.speed }}</span>
+          </div>
+          <div class="comp-item">
+            <span class="comp-label">复杂度</span>
+            <span class="comp-value">{{ selectedMethodData.complexity }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="comparison-section">
+      <div class="section-title">三种 I/O 方式对比</div>
+      <table class="compare-table">
+        <thead>
+          <tr>
+            <th>特性</th>
+            <th>程序查询</th>
+            <th>中断方式</th>
+            <th>DMA</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>CPU 参与度</td>
+            <td>全程参与</td>
+            <td>仅处理中断</td>
+            <td>几乎不参与</td>
+          </tr>
+          <tr>
+            <td>数据传输</td>
+            <td>CPU 逐字节搬运</td>
+            <td>CPU 逐字搬运</td>
+            <td>外设直接到内存</td>
+          </tr>
+          <tr>
+            <td>优点</td>
+            <td>简单、控制灵活</td>
+            <td>CPU 效率高</td>
+            <td>CPU 完全解放</td>
+          </tr>
+          <tr>
+            <td>缺点</td>
+            <td>CPU 利用率低</td>
+            <td>中断开销</td>
+            <td>硬件复杂</td>
+          </tr>
+          <tr>
+            <td>适用场景</td>
+            <td>简单外设、低速设备</td>
+            <td>中低速设备</td>
+            <td>高速批量传输</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="dma-demo" v-if="selectedMethod === 'DMA'">
+      <div class="dma-title">DMA 传输过程</div>
+      <div class="dma-visual">
+        <div class="device cpu-device">
+          <div class="device-icon">💻</div>
+          <div class="device-name">CPU</div>
+        </div>
+        
+        <div class="dma-channel">
+          <div class="channel-step" v-if="dmaStep >= 1">
+            <span class="step-label">1. CPU 设置 DMA</span>
+            <span class="step-arrow">→</span>
+          </div>
+        </div>
+        
+        <div class="device dma-device">
+          <div class="device-icon">🔧</div>
+          <div class="device-name">DMA 控制器</div>
+        </div>
+        
+        <div class="dma-channel">
+          <div class="channel-step" v-if="dmaStep >= 2">
+            <span class="step-label">2. DMA 直接访问内存</span>
+            <span class="step-arrow">→</span>
+          </div>
+        </div>
+        
+        <div class="device memory-device">
+          <div class="device-icon">💾</div>
+          <div class="device-name">内存</div>
+        </div>
+      </div>
+      
+      <div class="dma-controls">
+        <button class="btn" @click="startDma" :disabled="dmaStep > 0">开始 DMA 传输</button>
+        <button class="btn" @click="resetDma">重置</button>
+      </div>
+    </div>
+
+    <div class="interrupt-demo" v-if="selectedMethod === '中断方式'">
+      <div class="interrupt-title">中断处理流程</div>
+      <div class="interrupt-visual">
+        <div class="timeline">
+          <div class="timeline-item" v-for="(item, i) in interruptFlow" :key="i" :class="{ active: interruptStep === i }">
+            <div class="timeline-num">{{ i + 1 }}</div>
+            <div class="timeline-content">
+              <div class="timeline-title">{{ item.title }}</div>
+              <div class="timeline-desc">{{ item.desc }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="interrupt-controls">
+        <button class="btn" @click="nextInterrupt" :disabled="interruptStep >= interruptFlow.length - 1">下一步</button>
+        <button class="btn" @click="resetInterrupt">重置</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedMethod = ref('程序查询')
+const activeStep = ref(0)
+const dmaStep = ref(0)
+const interruptStep = ref(0)
+
+const ioMethods = ref([
+  {
+    name: '程序查询',
+    english: 'Programmed I/O',
+    cpuLevel: '高',
+    speed: '慢',
+    complexity: '低',
+    steps: [
+      'CPU 轮询检查 I/O 设备状态',
+      '设备忙？继续等待',
+      '设备就绪，发送读写命令',
+      'CPU 逐字节读取/写入数据',
+      '判断是否传输完成',
+      '未完成则继续查询'
+    ]
+  },
+  {
+    name: '中断方式',
+    english: 'Interrupt-Driven I/O',
+    cpuLevel: '中',
+    speed: '中',
+    complexity: '中',
+    steps: [
+      'CPU 启动 I/O 设备',
+      'CPU 继续执行其他任务',
+      'I/O 完成后发送中断请求',
+      'CPU 响应中断，保存现场',
+      '执行中断处理程序',
+      '恢复现场，继续执行'
+    ]
+  },
+  {
+    name: 'DMA',
+    english: 'Direct Memory Access',
+    cpuLevel: '低',
+    speed: '快',
+    complexity: '高',
+    steps: [
+      'CPU 设置 DMA 控制器',
+      '告诉 DMA 源地址、目标地址、传输长度',
+      'CPU 去执行其他任务',
+      'DMA 控制器直接与内存交换数据',
+      '传输完成，DMA 发送中断通知 CPU'
+    ]
+  }
+])
+
+const selectedMethodData = computed(() => {
+  return ioMethods.value.find(m => m.name === selectedMethod.value)
+})
+
+const interruptFlow = ref([
+  { title: '中断请求', desc: 'I/O 设备向 CPU 发送中断请求信号' },
+  { title: '中断响应', desc: 'CPU 完成当前指令后响应中断' },
+  { title: '保存现场', desc: '保存 PC、寄存器等当前状态到栈' },
+  { title: '中断处理', desc: '执行中断服务程序 ISR' },
+  { title: '恢复现场', desc: '恢复保存的寄存器值' },
+  { title: '返回执行', desc: '返回被中断的程序继续执行' }
+])
+
+const startDma = () => {
+  dmaStep.value = 1
+  setTimeout(() => {
+    dmaStep.value = 2
+    setTimeout(() => {
+      dmaStep.value = 3
+    }, 1000)
+  }, 1000)
+}
+
+const resetDma = () => {
+  dmaStep.value = 0
+}
+
+const nextInterrupt = () => {
+  if (interruptStep.value < interruptFlow.value.length - 1) {
+    interruptStep.value++
+  }
+}
+
+const resetInterrupt = () => {
+  interruptStep.value = 0
+}
+</script>
+
+<style scoped>
+.io-method-demo {
+  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.io-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.tab-btn {
+  padding: 10px 20px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.tab-btn.active {
+  border-color: #ec4899;
+  background: #fdf2f8;
+}
+
+.method-details {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.method-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.method-english {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.detail-flow {
+  margin-bottom: 16px;
+}
+
+.flow-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.flow-diagram {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.flow-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.node-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: #f8fafc;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.node-box.active {
+  border-color: #ec4899;
+  background: #fdf2f8;
+}
+
+.node-num {
+  width: 24px;
+  height: 24px;
+  background: #ec4899;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.node-text {
+  font-size: 13px;
+  color: #475569;
+}
+
+.flow-arrow {
+  font-size: 18px;
+  color: #cbd5e1;
+}
+
+.detail-comparison {
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.comp-grid {
+  display: flex;
+  gap: 16px;
+}
+
+.comp-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.comp-label {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.comp-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.comp-value.高 { color: #dc2626; }
+.comp-value.中 { color: #f59e0b; }
+.comp-value.低 { color: #16a34a; }
+
+.comparison-section {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.compare-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.compare-table th,
+.compare-table td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.compare-table th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.compare-table td {
+  color: #475569;
+}
+
+.dma-demo, .interrupt-demo {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.dma-title, .interrupt-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.dma-visual {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+.device-icon {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+
+.device-name {
+  font-size: 12px;
+  color: #1e293b;
+}
+
+.dma-channel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.channel-step {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #dbeafe;
+  border-radius: 4px;
+  font-size: 10px;
+}
+
+.step-arrow {
+  color: #3b82f6;
+}
+
+.dma-controls, .interrupt-controls {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.btn {
+  padding: 8px 16px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn:disabled {
+  background: #94a3b8;
+}
+
+.interrupt-visual {
+  margin-bottom: 16px;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 12px;
+  padding: 10px;
+  background: #f8fafc;
+  border-radius: 6px;
+  border-left: 3px solid #e2e8f0;
+}
+
+.timeline-item.active {
+  border-left-color: #ec4899;
+  background: #fdf2f8;
+}
+
+.timeline-num {
+  width: 24px;
+  height: 24px;
+  background: #ec4899;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.timeline-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.timeline-desc {
+  font-size: 11px;
+  color: #64748b;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/InstructionFormatDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/InstructionFormatDemo.vue
new file mode 100644
index 0000000..0517bf9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/InstructionFormatDemo.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="instruction-format-demo">
+    <div class="demo-header">
+      <span class="title">机器指令格式</span>
+      <span class="subtitle">操作码 + 操作数 = 机器指令</span>
+    </div>
+
+    <div class="format-selector">
+      <button 
+        v-for="fmt in instructionFormats" 
+        :key="fmt.type"
+        :class="['format-btn', { active: selectedFormat === fmt.type }]"
+        @click="selectedFormat = fmt.type"
+      >
+        {{ fmt.type }}
+      </button>
+    </div>
+
+    <div class="format-visualization" v-if="selectedFormatData">
+      <div class="format-diagram">
+        <div 
+          v-for="(field, i) in selectedFormatData.fields" 
+          :key="i"
+          class="field-box"
+          :style="{ flex: field.bits }"
+        >
+          <span class="field-name">{{ field.name }}</span>
+          <span class="field-bits">{{ field.bits }}位</span>
+        </div>
+      </div>
+      
+      <div class="format-example">
+        <div class="example-title">示例指令</div>
+        <div class="binary-display">
+          <span 
+            v-for="(bit, i) in selectedFormatData.example" 
+            :key="i"
+            class="bit"
+            :class="{ highlight: isHighlight(i, selectedFormatData) }"
+          >
+            {{ bit }}
+          </span>
+        </div>
+        <div class="example-desc">{{ selectedFormatData.description }}</div>
+      </div>
+
+      <div class="format-explanation">
+        <div class="exp-title">{{ selectedFormatData.type }} 格式说明</div>
+        <div class="exp-content">{{ selectedFormatData.explanation }}</div>
+        
+        <div class="examples-list" v-if="selectedFormatData.examples">
+          <div class="list-title">常见指令示例</div>
+          <div v-for="ex in selectedFormatData.examples" :key="ex.name" class="example-item">
+            <span class="ex-name">{{ ex.name }}</span>
+            <span class="ex-desc">{{ ex.desc }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="opcode-table">
+      <div class="table-title">常用操作码 (Opcode)</div>
+      <div class="opcode-grid">
+        <div v-for="op in opcodes" :key="op.code" class="opcode-item">
+          <span class="op-code">{{ op.code }}</span>
+          <span class="op-name">{{ op.name }}</span>
+          <span class="op-desc">{{ op.desc }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedFormat = ref('three-address')
+
+const instructionFormats = ref([
+  { 
+    type: '零地址', 
+    fields: [{ name: '操作码', bits: 8 }],
+    example: '01101100',
+    description: '操作数隐含在栈顶',
+    explanation: '零地址指令只有操作码，操作数隐含在操作数栈中。常用于堆栈计算机，如 ENTER、EXIT 等。',
+    examples: [
+      { name: 'POP', desc: '弹出栈顶数据' },
+      { name: 'PUSH', desc: '压入数据到栈顶' },
+      { name: 'CALL', desc: '调用子程序' }
+    ]
+  },
+  { 
+    type: '一地址', 
+    fields: [
+      { name: '操作码', bits: 8 },
+      { name: '地址', bits: 24 }
+    ],
+    example: '01101100 00000001 00000010 00000011',
+    description: '一个操作数地址，另一个隐含',
+    explanation: '一地址指令有一个操作数在内存/寄存器中，另一个操作数隐含在 ACC（累加器）中。如 INC、DEC 等单操作数指令。',
+    examples: [
+      { name: 'INC A', desc: 'A = A + 1' },
+      { name: 'DEC A', desc: 'A = A - 1' },
+      { name: 'NOT A', desc: 'A = ~A' }
+    ]
+  },
+  { 
+    type: '二地址', 
+    fields: [
+      { name: '操作码', bits: 8 },
+      { name: '目的地址', bits: 8 },
+      { name: '源地址', bits: 8 }
+    ],
+    example: '01101100 00000001 00000010',
+    description: '两个操作数地址，结果存目的地址',
+    explanation: '最常用的指令格式。两个操作数地址，结果覆盖目的操作数。如 ADD、SUB、MOV 等。',
+    examples: [
+      { name: 'MOV R1, R2', desc: 'R1 = R2' },
+      { name: 'ADD R1, R2', desc: 'R1 = R1 + R2' },
+      { name: 'SUB R1, R2', desc: 'R1 = R1 - R2' }
+    ]
+  },
+  { 
+    type: '三地址', 
+    fields: [
+      { name: '操作码', bits: 8 },
+      { name: '目的', bits: 8 },
+      { name: '源1', bits: 8 },
+      { name: '源2', bits: 8 }
+    ],
+    example: '01101100 00000001 00000010 00000011',
+    description: '结果存新地址，不破坏源操作数',
+    explanation: '三个地址分别指定目的操作数和两个源操作数。结果存入目的地址，不改变源操作数。常见于复杂指令集。',
+    examples: [
+      { name: 'ADD R1, R2, R3', desc: 'R1 = R2 + R3' },
+      { name: 'SUB R1, R2, R3', desc: 'R1 = R2 - R3' },
+      { name: 'MUL R1, R2, R3', desc: 'R1 = R2 × R3' }
+    ]
+  }
+])
+
+const selectedFormatData = computed(() => {
+  return instructionFormats.value.find(f => f.type === selectedFormat.value)
+})
+
+const isHighlight = (index, formatData) => {
+  const opcodeBits = 8
+  return index < opcodeBits
+}
+
+const opcodes = ref([
+  { code: '00000000', name: 'NOP', desc: '无操作' },
+  { code: '00000001', name: 'MOV', desc: '数据传送' },
+  { code: '00000010', name: 'ADD', desc: '加法' },
+  { code: '00000011', name: 'SUB', desc: '减法' },
+  { code: '00000100', name: 'MUL', desc: '乘法' },
+  { code: '00000101', name: 'DIV', desc: '除法' },
+  { code: '00000110', name: 'AND', desc: '逻辑与' },
+  { code: '00000111', name: 'OR', desc: '逻辑或' },
+  { code: '00001000', name: 'NOT', desc: '逻辑非' },
+  { code: '00001001', name: 'XOR', desc: '异或' },
+  { code: '00001010', name: 'SHL', desc: '左移' },
+  { code: '00001011', name: 'SHR', desc: '右移' },
+  { code: '00001100', name: 'JMP', desc: '无条件跳转' },
+  { code: '00001101', name: 'JE', desc: '相等跳转' },
+  { code: '00001110', name: 'JNE', desc: '不等跳转' },
+  { code: '00001111', name: 'CALL', desc: '调用子程序' },
+  { code: '00010000', name: 'RET', desc: '返回' },
+  { code: '00010001', name: 'PUSH', desc: '压栈' },
+  { code: '00010010', name: 'POP', desc: '出栈' },
+  { code: '00010011', name: 'LOAD', desc: '从内存加载' },
+  { code: '00010100', name: 'STORE', desc: '存入内存' }
+])
+</script>
+
+<style scoped>
+.instruction-format-demo {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.format-selector {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.format-btn {
+  padding: 8px 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  background: white;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.format-btn.active {
+  border-color: #22c55e;
+  background: #dcfce7;
+  color: #166534;
+}
+
+.format-visualization {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.format-diagram {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 16px;
+}
+
+.field-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 8px;
+  background: #e0f2fe;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.field-box:first-child {
+  background: #fef3c7;
+}
+
+.field-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.field-bits {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.format-example {
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+
+.example-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.binary-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-bottom: 8px;
+}
+
+.bit {
+  padding: 4px 6px;
+  background: #e2e8f0;
+  border-radius: 2px;
+  font-family: monospace;
+  font-size: 12px;
+  color: #475569;
+}
+
+.bit.highlight {
+  background: #fef3c7;
+  font-weight: 600;
+}
+
+.example-desc {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.format-explanation {
+  padding: 12px;
+  background: #f0f9ff;
+  border-radius: 6px;
+}
+
+.exp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.exp-content {
+  font-size: 12px;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.examples-list {
+  margin-top: 12px;
+}
+
+.list-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 6px;
+}
+
+.example-item {
+  display: flex;
+  gap: 12px;
+  padding: 4px 0;
+  font-size: 11px;
+}
+
+.ex-name {
+  font-family: monospace;
+  color: #0369a1;
+  min-width: 80px;
+}
+
+.ex-desc {
+  color: #64748b;
+}
+
+.opcode-table {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.table-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.opcode-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+
+.opcode-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: #f8fafc;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.op-code {
+  font-family: monospace;
+  padding: 2px 6px;
+  background: #e0f2fe;
+  border-radius: 2px;
+  color: #0369a1;
+}
+
+.op-name {
+  font-weight: 600;
+  color: #1e293b;
+  min-width: 40px;
+}
+
+.op-desc {
+  color: #64748b;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LexerTokenDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LexerTokenDemo.vue
new file mode 100644
index 0000000..2679d75
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LexerTokenDemo.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="lexer-token-demo">
+    <h4>🔤 词法分析器：把代码拆成 Token</h4>
+    <p class="desc">输入一行代码，实时看到词法分析的结果</p>
+
+    <div class="input-area">
+      <input
+        v-model="code"
+        class="code-input"
+        placeholder="试试输入: let x = 10 + 5;"
+        @input="tokenize"
+      />
+      <div class="presets">
+        <button v-for="p in presets" :key="p" class="preset-btn" @click="code = p; tokenize()">
+          {{ p }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="tokens.length" class="token-stream">
+      <div class="stream-label">Token 流：</div>
+      <div class="tokens">
+        <span
+          v-for="(t, i) in tokens"
+          :key="i"
+          :class="['token', 'token-' + t.type]"
+          @mouseenter="hovered = i"
+          @mouseleave="hovered = null"
+        >
+          {{ t.value }}
+          <span v-if="hovered === i" class="token-tip">{{ t.label }}</span>
+        </span>
+      </div>
+    </div>
+
+    <div v-if="tokens.length" class="token-table">
+      <table>
+        <thead>
+          <tr><th>Token</th><th>类型</th><th>说明</th></tr>
+        </thead>
+        <tbody>
+          <tr v-for="(t, i) in tokens" :key="i">
+            <td><code>{{ t.value }}</code></td>
+            <td><span :class="['type-badge', 'token-' + t.type]">{{ t.label }}</span></td>
+            <td class="explain">{{ t.explain }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const code = ref('let x = 10 + 5;')
+const tokens = ref([])
+const hovered = ref(null)
+
+const presets = [
+  'let x = 10 + 5;',
+  'if (a > b) { return a; }',
+  'function add(a, b) { return a + b; }'
+]
+
+const keywords = new Set(['let', 'const', 'var', 'if', 'else', 'for', 'while', 'function', 'return', 'class', 'import', 'export', 'true', 'false', 'null', 'undefined'])
+
+function tokenize() {
+  const result = []
+  let s = code.value.trim()
+  let i = 0
+  while (i < s.length) {
+    if (/\s/.test(s[i])) { i++; continue }
+    if (/[0-9]/.test(s[i])) {
+      let num = ''
+      while (i < s.length && /[0-9.]/.test(s[i])) num += s[i++]
+      result.push({ value: num, type: 'number', label: '数字', explain: '数值字面量' })
+    } else if (/[a-zA-Z_$]/.test(s[i])) {
+      let id = ''
+      while (i < s.length && /[a-zA-Z0-9_$]/.test(s[i])) id += s[i++]
+      if (keywords.has(id)) {
+        result.push({ value: id, type: 'keyword', label: '关键字', explain: '语言保留字' })
+      } else {
+        result.push({ value: id, type: 'identifier', label: '标识符', explain: '变量/函数名' })
+      }
+    } else if (s[i] === '"' || s[i] === "'") {
+      const q = s[i]; let str = q; i++
+      while (i < s.length && s[i] !== q) str += s[i++]
+      if (i < s.length) str += s[i++]
+      result.push({ value: str, type: 'string', label: '字符串', explain: '字符串字面量' })
+    } else if ('+-*/%'.includes(s[i])) {
+      result.push({ value: s[i], type: 'operator', label: '运算符', explain: '算术运算' })
+      i++
+    } else if ('=<>!'.includes(s[i])) {
+      let op = s[i]; i++
+      if (i < s.length && s[i] === '=') { op += s[i]; i++ }
+      if (i < s.length && s[i] === '=') { op += s[i]; i++ }
+      result.push({ value: op, type: 'operator', label: '运算符', explain: '比较/赋值运算' })
+    } else if ('(){}[]'.includes(s[i])) {
+      result.push({ value: s[i], type: 'bracket', label: '括号', explain: '分组/作用域' })
+      i++
+    } else if (';,'.includes(s[i])) {
+      result.push({ value: s[i], type: 'punctuation', label: '分隔符', explain: '语句/参数分隔' })
+      i++
+    } else {
+      result.push({ value: s[i], type: 'unknown', label: '未知', explain: '无法识别' })
+      i++
+    }
+  }
+  tokens.value = result
+}
+
+onMounted(tokenize)
+</script>
+
+<style scoped>
+.lexer-token-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.code-input {
+  width: 100%; padding: 10px 12px; border: 1px solid var(--vp-c-divider);
+  border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 14px;
+  background: var(--vp-c-bg); color: var(--vp-c-text-1); box-sizing: border-box;
+}
+.presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+.preset-btn {
+  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); font-size: 11px; cursor: pointer;
+  font-family: 'Fira Code', monospace; color: var(--vp-c-text-2);
+}
+.preset-btn:hover { border-color: var(--vp-c-brand-1); }
+.token-stream { margin-top: 16px; }
+.stream-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
+.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
+.token {
+  position: relative; padding: 4px 8px; border-radius: 4px;
+  font-family: 'Fira Code', monospace; font-size: 13px; cursor: default;
+}
+.token-tip {
+  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
+  padding: 2px 6px; background: #333; color: #fff; border-radius: 4px;
+  font-size: 11px; white-space: nowrap; font-family: sans-serif;
+}
+.token-keyword { background: #dbeafe; color: #1e40af; }
+.token-identifier { background: #f0fdf4; color: #166534; }
+.token-number { background: #fef3c7; color: #92400e; }
+.token-string { background: #fce7f3; color: #9d174d; }
+.token-operator { background: #ede9fe; color: #5b21b6; }
+.token-bracket { background: #e0e7ff; color: #3730a3; }
+.token-punctuation { background: #f1f5f9; color: #475569; }
+.token-unknown { background: #fef2f2; color: #991b1b; }
+.token-table { margin-top: 16px; overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; padding: 6px 10px; background: var(--vp-c-bg); border-bottom: 2px solid var(--vp-c-divider); }
+td { padding: 5px 10px; border-bottom: 1px solid var(--vp-c-divider); }
+.type-badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; }
+.explain { color: var(--vp-c-text-3); }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PSWFlagDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PSWFlagDemo.vue
new file mode 100644
index 0000000..3e86fd2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PSWFlagDemo.vue
@@ -0,0 +1,483 @@
+<template>
+  <div class="psw-demo">
+    <div class="demo-header">
+      <span class="title">程序状态字 (PSW)</span>
+      <span class="subtitle">CPU 的"状态指示灯"</span>
+    </div>
+
+    <div class="flags-layout">
+      <div class="flags-grid">
+        <div v-for="flag in flags" :key="flag.name" class="flag-card" :class="{ active: flag.value === 1 }" @click="toggleFlag(flag)">
+          <div class="flag-name">{{ flag.name }}</div>
+          <div class="flag-value">{{ flag.value }}</div>
+          <div class="flag-fullname">{{ flag.fullName }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flag-details" v-if="selectedFlag">
+      <div class="details-header">
+        <span class="flag-title">{{ selectedFlag.name }} - {{ selectedFlag.fullName }}</span>
+      </div>
+      <div class="details-content">
+        <div class="detail-row">
+          <span class="detail-label">英文名：</span>
+          <span class="detail-value">{{ selectedFlag.english }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">作用：</span>
+          <span class="detail-value">{{ selectedFlag.description }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">设置条件：</span>
+          <span class="detail-value">{{ selectedFlag.setCondition }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">用途：</span>
+          <span class="detail-value">{{ selectedFlag.usage }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="operation-demo">
+      <div class="demo-title">运算结果对标志位的影响</div>
+      
+      <div class="operation-panel">
+        <div class="operand-inputs">
+          <div class="input-group">
+            <label>操作数 A：</label>
+            <input type="number" v-model.number="operandA" class="num-input" />
+          </div>
+          <div class="input-group">
+            <label>操作数 B：</label>
+            <input type="number" v-model.number="operandB" class="num-input" />
+          </div>
+        </div>
+        
+        <div class="operation-buttons">
+          <button class="op-btn" @click="calculate('ADD')">A + B</button>
+          <button class="op-btn" @click="calculate('SUB')">A - B</button>
+          <button class="op-btn" @click="calculate('AND')">A AND B</button>
+          <button class="op-btn" @click="calculate('OR')">A OR B</button>
+        </div>
+        
+        <div class="result-display">
+          <div class="result-label">运算结果：</div>
+          <div class="result-value">{{ result }}</div>
+        </div>
+        
+        <div class="flags-result">
+          <div class="result-flags">
+            <span v-for="f in flags" :key="f.name" :class="['result-flag', f.value === 1 ? 'set' : 'clear']">
+              {{ f.name }}:{{ f.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="psw-usage">
+      <div class="usage-title">标志位的典型用途</div>
+      <div class="usage-grid">
+        <div class="usage-card">
+          <div class="usage-icon">🔀</div>
+          <div class="usage-name">条件跳转</div>
+          <div class="usage-desc">JE (相等跳转)、JNE、JG、JL 等指令根据 ZF、SF、OF 决定是否跳转</div>
+        </div>
+        <div class="usage-card">
+          <div class="usage-icon">➕</div>
+          <div class="usage-name">算术运算</div>
+          <div class="usage-desc">多位数运算需要 CF 判断进位，OF 判断溢出</div>
+        </div>
+        <div class="usage-card">
+          <div class="usage-icon">🔄</div>
+          <div class="usage-name">循环控制</div>
+          <div class="usage-desc">循环指令使用 ZF 判断循环结束条件</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selectedFlag = ref(null)
+const operandA = ref(10)
+const operandB = ref(5)
+const result = ref(0)
+
+const flags = ref([
+  { name: 'CF', fullName: '进位标志', english: 'Carry Flag', value: 0, 
+    description: '无符号数运算产生进位或借位时置 1',
+    setCondition: '加法产生进位，或减法产生借位',
+    usage: '多位数无符号运算、循环计数' },
+  { name: 'PF', fullName: '奇偶标志', english: 'Parity Flag', value: 0,
+    description: '结果的低 8 位中 1 的个数为偶数时置 1',
+    setCondition: '结果低 8 位有偶数个 1',
+    usage: '数据通信中的错误检测' },
+  { name: 'AF', fullName: '辅助进位', english: 'Auxiliary Carry Flag', value: 0,
+    description: '低 4 位产生进位或借位时置 1',
+    setCondition: '第 3 位（低 4 位）产生进位',
+    usage: 'BCD 码运算调整' },
+  { name: 'ZF', fullName: '零标志', english: 'Zero Flag', value: 0,
+    description: '运算结果为 0 时置 1',
+    setCondition: '结果 = 0',
+    usage: '条件跳转、循环控制、比较操作' },
+  { name: 'SF', fullName: '符号标志', english: 'Sign Flag', value: 0,
+    description: '运算结果为负数时置 1（等于结果最高位）',
+    setCondition: '结果最高位 = 1（负数）',
+    usage: '有符号数大小比较、负数判断' },
+  { name: 'TF', fullName: '陷阱标志', english: 'Trap Flag', value: 0,
+    description: '置 1 时 CPU 进入单步调试模式',
+    setCondition: '软件设置',
+    usage: '程序调试' },
+  { name: 'IF', fullName: '中断标志', english: 'Interrupt Flag', value: 1,
+    description: '置 1 时 CPU 响应可屏蔽中断',
+    setCondition: '软件设置',
+    usage: '中断开关' },
+  { name: 'DF', fullName: '方向标志', english: 'Direction Flag', value: 0,
+    description: '置 1 时字符串操作从高地址向低地址',
+    setCondition: '软件设置',
+    usage: '字符串操作方向控制' },
+  { name: 'OF', fullName: '溢出标志', english: 'Overflow Flag', value: 0,
+    description: '有符号数运算结果超出表示范围时置 1',
+    setCondition: '正溢出或负溢出',
+    usage: '有符号数运算、溢出检测' }
+])
+
+const toggleFlag = (flag) => {
+  flag.value = flag.value === 1 ? 0 : 1
+  selectedFlag.value = flag
+}
+
+const calculate = (op) => {
+  let res = 0
+  
+  if (op === 'ADD') {
+    res = operandA.value + operandB.value
+    
+    const unsignedMax = Math.pow(2, 32)
+    const signedMin = -Math.pow(2, 31)
+    const signedMax = Math.pow(2, 31) - 1
+    
+    flags.value.find(f => f.name === 'CF').value = res >= unsignedMax ? 1 : 0
+    flags.value.find(f => f.name === 'OF').value = (res > signedMax || res < signedMin) ? 1 : 0
+    flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
+    flags.value.find(f => f.name === 'SF').value = res < 0 ? 1 : 0
+    
+    const low8 = res & 0xFF
+    const ones = (low8.toString(2).match(/1/g) || []).length
+    flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
+    
+    flags.value.find(f => f.name === 'AF').value = ((operandA.value & 0xF) + (operandB.value & 0xF)) >= 16 ? 1 : 0
+    
+  } else if (op === 'SUB') {
+    res = operandA.value - operandB.value
+    
+    flags.value.find(f => f.name === 'CF').value = operandA.value < operandB.value ? 1 : 0
+    flags.value.find(f => f.name === 'OF').value = (operandA.value > 0 && operandB.value < 0 && res < 0) || (operandA.value < 0 && operandB.value > 0 && res > 0) ? 1 : 0
+    flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
+    flags.value.find(f => f.name === 'SF').value = res < 0 ? 1 : 0
+    
+    const low8 = res & 0xFF
+    const ones = (low8.toString(2).match(/1/g) || []).length
+    flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
+    
+    flags.value.find(f => f.name === 'AF').value = ((operandA.value & 0xF) - (operandB.value & 0xF)) < 0 ? 1 : 0
+    
+  } else if (op === 'AND') {
+    res = operandA.value & operandB.value
+    
+    flags.value.find(f => f.name === 'CF').value = 0
+    flags.value.find(f => f.name === 'OF').value = 0
+    flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
+    flags.value.find(f => f.name === 'SF').value = (res & 0x80000000) !== 0 ? 1 : 0
+    
+    const low8 = res & 0xFF
+    const ones = (low8.toString(2).match(/1/g) || []).length
+    flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
+    
+  } else if (op === 'OR') {
+    res = operandA.value | operandB.value
+    
+    flags.value.find(f => f.name === 'CF').value = 0
+    flags.value.find(f => f.name === 'OF').value = 0
+    flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
+    flags.value.find(f => f.name === 'SF').value = (res & 0x80000000) !== 0 ? 1 : 0
+    
+    const low8 = res & 0xFF
+    const ones = (low8.toString(2).match(/1/g) || []).length
+    flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
+  }
+  
+  result.value = res
+}
+</script>
+
+<style scoped>
+.psw-demo {
+  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.flags-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.flag-card {
+  padding: 12px;
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.flag-card:hover {
+  border-color: #14b8a6;
+}
+
+.flag-card.active {
+  border-color: #14b8a6;
+  background: #f0fdfa;
+}
+
+.flag-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.flag-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #64748b;
+  margin: 4px 0;
+}
+
+.flag-card.active .flag-value {
+  color: #14b8a6;
+}
+
+.flag-fullname {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.flag-details {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.details-header {
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.flag-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.details-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.detail-row {
+  display: flex;
+  gap: 8px;
+}
+
+.detail-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  min-width: 80px;
+}
+
+.detail-value {
+  font-size: 12px;
+  color: #1e293b;
+}
+
+.operation-demo {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.operand-inputs {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.input-group label {
+  font-size: 12px;
+  color: #475569;
+}
+
+.num-input {
+  width: 80px;
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.operation-buttons {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.op-btn {
+  padding: 8px 16px;
+  background: #14b8a6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.result-display {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+
+.result-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.result-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #14b8a6;
+}
+
+.flags-result {
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 6px;
+}
+
+.result-flags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.result-flag {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.result-flag.set {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.result-flag.clear {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.psw-usage {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.usage-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.usage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.usage-card {
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.usage-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.usage-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.usage-desc {
+  font-size: 10px;
+  color: #64748b;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PipelineDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PipelineDemo.vue
new file mode 100644
index 0000000..cd48f5e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PipelineDemo.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="pipeline-demo">
+    <div class="demo-header">
+      <span class="title">CPU 指令流水线</span>
+      <span class="subtitle">五级流水线：取指 → 译码 → 执行 → 访存 → 写回</span>
+    </div>
+
+    <div class="control-panel">
+      <button class="btn" @click="startPipeline" :disabled="isRunning">开始执行</button>
+      <button class="btn" @click="stepPipeline" :disabled="isRunning">单步执行</button>
+      <button class="btn" @click="resetPipeline">重置</button>
+      <select v-model="selectedMode" class="mode-select">
+        <option value="sequential">顺序执行</option>
+        <option value="pipeline">流水线执行</option>
+      </select>
+    </div>
+
+    <div class="pipeline-visualization">
+      <div class="stage-header">
+        <div v-for="stage in stages" :key="stage" class="stage-label">{{ stage }}</div>
+      </div>
+
+      <div class="instruction-grid">
+        <div v-for="(inst, i) in instructions" :key="i" class="instruction-row">
+          <div class="inst-label">{{ inst }}</div>
+          <div v-for="(stage, j) in stages" :key="j" class="stage-cell">
+            <div v-if="isActive(i, j)" :class="['pipeline-box', currentStageClass(i, j)]">
+              {{ inst }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="stats-panel">
+      <div class="stat-item">
+        <span class="stat-label">总周期数</span>
+        <span class="stat-value">{{ totalCycles }}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">已完成指令</span>
+        <span class="stat-value">{{ completedInstructions }}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">CPI</span>
+        <span class="stat-value">{{ cpi }}</span>
+      </div>
+    </div>
+
+    <div class="pipeline-explanation">
+      <div class="explanation-title">流水线原理</div>
+      <div class="explanation-content">
+        <p><strong>顺序执行：</strong>每条指令执行完才执行下一条，N条指令需要 N × 5 个周期</p>
+        <p><strong>流水线执行：</strong>多条指令同时处于不同阶段，理想情况下 CPI ≈ 1</p>
+        <div class="hazard-warning" v-if="showHazard">
+          ⚠️ 流水线冒险：数据冒险、控制冒险、结构冒险
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const stages = ['取指(IF)', '译码(ID)', '执行(EX)', '访存(MEM)', '写回(WB)']
+const instructions = ref(['ADD R1,R2,R3', 'SUB R4,R1,R5', 'LOAD R6,[R4]', 'STORE R6,[R7]', 'AND R8,R1,R6'])
+
+const selectedMode = ref('pipeline')
+const currentCycle = ref(-1)
+const isRunning = ref(false)
+const showHazard = ref(false)
+
+const pipelineState = ref([])
+
+const startPipeline = () => {
+  isRunning.value = true
+  currentCycle.value = -1
+  runCycle()
+}
+
+const runCycle = () => {
+  if (currentCycle.value >= 20) {
+    isRunning.value = false
+    return
+  }
+  currentCycle.value++
+  setTimeout(runCycle, 800)
+}
+
+const stepPipeline = () => {
+  if (currentCycle.value < 20) {
+    currentCycle.value++
+  }
+}
+
+const resetPipeline = () => {
+  currentCycle.value = -1
+  isRunning.value = false
+  showHazard.value = false
+}
+
+const isActive = (instIdx, stageIdx) => {
+  if (selectedMode.value === 'sequential') {
+    return currentCycle.value >= 0 && instIdx === Math.floor(currentCycle.value / 5) && stageIdx === currentCycle.value % 5
+  } else {
+    const offset = instIdx * 5
+    return currentCycle.value >= offset && currentCycle.value < offset + 5 && stageIdx === currentCycle.value - offset
+  }
+}
+
+const currentStageClass = (instIdx, stageIdx) => {
+  if (!isActive(instIdx, stageIdx)) return ''
+  return 'stage-' + stageIdx
+}
+
+const totalCycles = computed(() => {
+  if (currentCycle.value < 0) return 0
+  if (selectedMode.value === 'sequential') {
+    return (currentCycle.value + 1)
+  } else {
+    return currentCycle.value + 1
+  }
+})
+
+const completedInstructions = computed(() => {
+  if (currentCycle.value < 0) return 0
+  if (selectedMode.value === 'sequential') {
+    return Math.floor((currentCycle.value + 1) / 5)
+  } else {
+    return Math.max(0, currentCycle.value - 4)
+  }
+})
+
+const cpi = computed(() => {
+  if (completedInstructions.value === 0) return 0
+  return (totalCycles.value / completedInstructions.value).toFixed(2)
+})
+</script>
+
+<style scoped>
+.pipeline-demo {
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.control-panel {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 6px;
+  background: #3b82f6;
+  color: white;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn:disabled {
+  background: #94a3b8;
+  cursor: not-allowed;
+}
+
+.mode-select {
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-left: auto;
+}
+
+.pipeline-visualization {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.stage-header {
+  display: grid;
+  grid-template-columns: 100px repeat(5, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.stage-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-align: center;
+}
+
+.instruction-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.instruction-row {
+  display: grid;
+  grid-template-columns: 100px repeat(5, 1fr);
+  gap: 4px;
+}
+
+.inst-label {
+  font-size: 12px;
+  color: #1e293b;
+  padding: 4px;
+}
+
+.stage-cell {
+  height: 28px;
+  background: #f8fafc;
+  border-radius: 4px;
+}
+
+.pipeline-box {
+  height: 100%;
+  border-radius: 4px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 500;
+}
+
+.stage-0 { background: #f97316; }
+.stage-1 { background: #eab308; }
+.stage-2 { background: #22c55e; }
+.stage-3 { background: #3b82f6; }
+.stage-4 { background: #8b5cf6; }
+
+.stats-panel {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #64748b;
+  display: block;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.pipeline-explanation {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.explanation-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.explanation-content p {
+  font-size: 12px;
+  color: #475569;
+  margin: 4px 0;
+}
+
+.hazard-warning {
+  margin-top: 8px;
+  padding: 8px;
+  background: #fef3c7;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #92400e;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue
index 1a621c9..a09e282 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue
@@ -1,46 +1,30 @@
 <template>
   <div class="power-on-demo">
-    <div class="demo-label">电脑启动第一步 ── 点击通电</div>
-
-    <div class="sequence" @click="powerOn = !powerOn">
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">🔌</div>
-        <div class="step-name">电源</div>
-        <div class="step-status">{{ powerOn ? '✅ 供电中' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">🔋</div>
-        <div class="step-name">主板</div>
-        <div class="step-status">{{ powerOn ? '✅ 唤醒' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">⚙️</div>
-        <div class="step-name">CPU</div>
-        <div class="step-status">{{ powerOn ? '✅ 复位' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">💾</div>
-        <div class="step-name">BIOS</div>
-        <div class="step-status">{{ powerOn ? '✅ 启动' : '⬜ 等待' }}</div>
+    <div class="demo-title">硬件启动链路</div>
+    <div class="flow">
+      <div v-for="(step, i) in steps" :key="step.name" class="flow-item">
+        <div class="step-card">
+          <div class="step-icon">{{ step.icon }}</div>
+          <div class="step-name">{{ step.name }}</div>
+          <div class="step-desc">{{ step.desc }}</div>
+        </div>
+        <div v-if="i < steps.length - 1" class="arrow">
+          <svg width="24" height="16" viewBox="0 0 24 16">
+            <path d="M0 8h18M14 3l6 5-6 5" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击切换电源状态</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const powerOn = ref(false)
+const steps = [
+  { icon: '🔌', name: '电源 PSU', desc: '交流电 → 直流电' },
+  { icon: '🧩', name: '主板芯片组', desc: '协调各硬件部件' },
+  { icon: '⚙️', name: 'CPU 复位', desc: '清零寄存器，就绪' },
+  { icon: '📟', name: 'BIOS/UEFI', desc: '执行第一条指令' }
+]
 </script>
 
 <style scoped>
@@ -50,66 +34,55 @@ const powerOn = ref(false)
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
+.demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+  margin-bottom: 0.8rem;
 }
-
-.sequence {
+.flow {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.3rem;
+  gap: 0;
+  flex-wrap: wrap;
 }
-
-.step {
+.flow-item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.step-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.6rem;
-  border-radius: 6px;
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-
-.step.active {
-  opacity: 1;
+  padding: 0.6rem 0.8rem;
   background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  min-width: 5.5rem;
 }
-
-.step-icon {
-  font-size: 1.3rem;
-  margin-bottom: 0.2rem;
-}
-
+.step-icon { font-size: 1.4rem; margin-bottom: 0.3rem; }
 .step-name {
   font-size: 0.72rem;
   font-weight: 600;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.15rem;
 }
-
-.step-status {
-  font-size: 0.65rem;
+.step-desc {
+  font-size: 0.62rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.15rem;
-}
-
-.arrow {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-3);
-}
-
-.tap-hint {
   text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+}
+.arrow {
+  padding: 0 0.3rem;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 640px) {
+  .flow { flex-direction: column; gap: 0.2rem; }
+  .flow-item { flex-direction: column; }
+  .arrow { transform: rotate(90deg); padding: 0.1rem 0; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
index 811f3cc..5d4ea25 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
@@ -1,194 +1,345 @@
 <template>
-  <div class="register-demo">
-    <div class="demo-label">1 位寄存器 ── 只在"写入"时更新存储值</div>
+  <div class="cpu-registers-demo">
+    <div class="demo-header">
+      <span class="title">CPU 寄存器组</span>
+      <span class="subtitle">CPU 内部的高速存储单元</span>
+    </div>
 
-    <div class="reg-panel">
-      <!-- Input -->
-      <div class="reg-block">
-        <span class="reg-title">输入</span>
-        <button
-          class="toggle-btn"
-          :class="{ on: inputData === 1 }"
-          @click="inputData = inputData === 1 ? 0 : 1"
-        >
-          {{ inputData }}
-        </button>
+    <div class="registers-layout">
+      <!-- 专用寄存器 -->
+      <div class="reg-section special-regs">
+        <div class="section-title">专用寄存器 (Special Registers)</div>
+        <div class="reg-grid">
+          <div v-for="reg in specialRegisters" :key="reg.name" class="reg-card" :class="{ active: activeReg === reg.name }" @click="selectReg(reg)">
+            <div class="reg-name">{{ reg.name }}</div>
+            <div class="reg-value">{{ reg.value }}</div>
+            <div class="reg-desc">{{ reg.desc }}</div>
+          </div>
+        </div>
       </div>
 
-      <!-- Write -->
-      <button
-        class="write-btn"
-        :class="{ flash: isWriting }"
-        @click="writeOnce"
-      >
-        写入 →
-      </button>
-
-      <!-- Stored -->
-      <div class="reg-block">
-        <span class="reg-title">存储</span>
-        <span
-          class="val-box"
-          :class="{ on: storedData === 1, flash: isWriting }"
-          >{{ storedData }}</span>
+      <!-- 通用寄存器 -->
+      <div class="reg-section general-regs">
+        <div class="section-title">通用寄存器 (General Purpose Registers)</div>
+        <div class="reg-grid">
+          <div v-for="reg in generalRegisters" :key="reg.name" class="reg-card small" :class="{ active: activeReg === reg.name }" @click="selectReg(reg)">
+            <div class="reg-name">{{ reg.name }}</div>
+            <div class="reg-value">{{ reg.value }}</div>
+            <div class="reg-desc">{{ reg.desc }}</div>
+          </div>
+        </div>
       </div>
 
-      <!-- Output -->
-      <div class="reg-block">
-        <span class="reg-title">输出</span>
-        <span class="val-box out" :class="{ on: storedData === 1 }">{{
-          storedData
-        }}</span>
+      <!-- 状态寄存器 -->
+      <div class="reg-section status-reg">
+        <div class="section-title">程序状态字 (PSW / FLAGS)</div>
+        <div class="flags-container">
+          <div v-for="flag in statusFlags" :key="flag.name" class="flag-bit" :class="{ set: flag.value === 1 }">
+            <span class="flag-name">{{ flag.name }}</span>
+            <span class="flag-value">{{ flag.value }}</span>
+            <span class="flag-desc">{{ flag.desc }}</span>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div class="status-line">
-      {{
-        inputData !== storedData
-          ? '⚡ 输入≠存储 → 点"写入"即可更新'
-          : '✓ 输入与存储一致'
-      }}
+    <!-- 寄存器详解 -->
+    <div class="reg-details" v-if="selectedReg">
+      <div class="details-header">
+        <span class="details-title">{{ selectedReg.name }} 寄存器</span>
+        <span class="details-type">{{ selectedReg.type }}</span>
+      </div>
+      <div class="details-content">{{ selectedReg.detail }}</div>
+    </div>
+
+    <!-- 寄存器说明 -->
+    <div class="register-explanation">
+      <div class="exp-title">寄存器 vs 内存</div>
+      <div class="exp-table">
+        <table>
+          <thead>
+            <tr>
+              <th>特性</th>
+              <th>寄存器</th>
+              <th>内存 (RAM)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>位置</td>
+              <td>CPU 内部</td>
+              <td>CPU 外部</td>
+            </tr>
+            <tr>
+              <td>访问速度</td>
+              <td>最快 (&lt; 1ns)</td>
+              <td>较慢 (50-100ns)</td>
+            </tr>
+            <tr>
+              <td>容量</td>
+              <td>极小 (Bytes)</td>
+              <td>大 (GB)</td>
+            </tr>
+            <tr>
+              <td>作用</td>
+              <td>暂存指令/操作数/结果</td>
+              <td>存储程序和数据</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const inputData = ref(0)
-const storedData = ref(0)
-const isWriting = ref(false)
+const activeReg = ref('')
+const selectedReg = ref(null)
 
-const writeOnce = () => {
-  isWriting.value = true
-  storedData.value = inputData.value
-  setTimeout(() => {
-    isWriting.value = false
-  }, 400)
+const specialRegisters = ref([
+  { name: 'PC', value: '0x00401000', desc: '程序计数器', type: '专用寄存器', detail: 'Program Counter，存放下一条要执行的指令地址。每执行一条指令，PC 自动加 4（32位）或 8（64位），指向下一条指令。' },
+  { name: 'IR', value: '0x8B450008', desc: '指令寄存器', type: '专用寄存器', detail: 'Instruction Register，存放当前正在执行的指令。CPU 从内存取指令后，先存入 IR，再送入译码器进行解析。' },
+  { name: 'MAR', value: '0x00401000', desc: '内存地址寄存器', type: '专用寄存器', detail: 'Memory Address Register，存放要访问的内存地址。CPU 通过它向地址总线发送内存位置。' },
+  { name: 'MDR', value: '0x00000000', desc: '内存数据寄存器', type: '专用寄存器', detail: 'Memory Data Register，临时存放要写入或从内存读取的数据。是 CPU 与内存交换数据的桥梁。' },
+  { name: 'ACC', value: '0x0000001A', desc: '累加器', type: '专用寄存器', detail: 'Accumulator，传统 CPU 中最重要的寄存器，用于存放算术运算和逻辑运算的中间结果。' },
+])
+
+const generalRegisters = ref([
+  { name: 'RAX', value: '0x00000000', desc: '返回值', type: '通用寄存器', detail: '64位寄存器，用于存放函数返回值。低32位为 EAX，低16位为 AX，低8位为 AL。' },
+  { name: 'RBX', value: '0x00000000', desc: '基址寄存器', type: '通用寄存器', detail: '64位通用寄存器，可用于存放数据或内存地址。' },
+  { name: 'RCX', value: '0x00000000', desc: '计数寄存器', type: '通用寄存器', detail: '64位通用寄存器，常用于循环计数。低32位为 ECX。' },
+  { name: 'RDX', value: '0x00000000', desc: '数据寄存器', type: '通用寄存器', detail: '64位通用寄存器，用于存放数据，也用于乘除法指令。' },
+  { name: 'RSI', value: '0x00000000', desc: '源索引', type: '通用寄存器', detail: 'Source Index，字符串操作中作为源地址指针。' },
+  { name: 'RDI', value: '0x00000000', desc: '目标索引', type: '通用寄存器', detail: 'Destination Index，字符串操作中作为目标地址指针。' },
+  { name: 'RBP', value: '0x00000000', desc: '栈帧指针', type: '通用寄存器', detail: 'Base Pointer，指向函数栈帧的基址，用于访问局部变量和函数参数。' },
+  { name: 'RSP', value: '0x7FFDE000', desc: '栈指针', type: '通用寄存器', detail: 'Stack Pointer，指向当前栈顶位置。Push 操作减 4，Pop 操作加 4。' },
+])
+
+const statusFlags = ref([
+  { name: 'CF', value: 0, desc: '进位标志' },
+  { name: 'PF', value: 0, desc: '奇偶标志' },
+  { name: 'AF', value: 0, desc: '辅助进位' },
+  { name: 'ZF', value: 0, desc: '零标志' },
+  { name: 'SF', value: 0, desc: '符号标志' },
+  { name: 'OF', value: 0, desc: '溢出标志' },
+])
+
+const selectReg = (reg) => {
+  selectedReg.value = reg
+  activeReg.value = reg.name
 }
 </script>
 
 <style scoped>
-.register-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg-soft);
-  padding: 1rem 1.2rem;
-  margin: 1rem 0;
+.cpu-registers-demo {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 16px 0;
 }
 
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
-}
-
-/* ── panel ── */
-.reg-panel {
+.demo-header {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-  padding: 0.6rem 0.8rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
+  gap: 12px;
+  margin-bottom: 20px;
 }
 
-.reg-block {
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.registers-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.reg-section {
+  background: white;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+}
+
+.reg-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+}
+
+.reg-card {
+  padding: 10px;
+  background: #f8fafc;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.reg-card:hover {
+  border-color: #3b82f6;
+}
+
+.reg-card.active {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.reg-card.small {
+  padding: 8px;
+}
+
+.reg-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.reg-value {
+  font-size: 11px;
+  font-family: monospace;
+  color: #0369a1;
+  margin: 4px 0;
+}
+
+.reg-desc {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.status-reg {
+  margin-top: 0;
+}
+
+.flags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.flag-bit {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
+  padding: 8px 12px;
+  background: #f1f5f9;
+  border-radius: 4px;
+  min-width: 60px;
 }
 
-.reg-title {
-  font-size: 0.7rem;
+.flag-bit.set {
+  background: #dbeafe;
+  border: 1px solid #3b82f6;
+}
+
+.flag-name {
+  font-size: 12px;
   font-weight: 600;
-  color: var(--vp-c-text-3);
+  color: #1e293b;
 }
 
-.toggle-btn {
-  width: 2.2rem;
-  height: 2.2rem;
-  border-radius: 6px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
-  font-weight: bold;
-  font-size: 1rem;
-  font-family: 'JetBrains Mono', monospace;
-  cursor: pointer;
-  transition: all 0.2s;
+.flag-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: #64748b;
 }
 
-.toggle-btn.on {
-  border-color: var(--vp-c-brand-1);
-  color: var(--vp-c-brand-1);
-  background: var(--vp-c-brand-soft);
+.flag-bit.set .flag-value {
+  color: #3b82f6;
 }
 
-.write-btn {
-  padding: 0.35rem 0.7rem;
-  border-radius: 6px;
-  border: 2px solid var(--vp-c-warning-1, #d97706);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-warning-1, #d97706);
-  font-size: 0.82rem;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
+.flag-desc {
+  font-size: 9px;
+  color: #64748b;
+  text-align: center;
 }
 
-.write-btn:hover {
-  background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
+.reg-details {
+  margin-top: 16px;
+  padding: 12px;
+  background: white;
+  border-radius: 8px;
+  border-left: 4px solid #3b82f6;
 }
 
-.write-btn.flash {
-  background: var(--vp-c-warning-1, #d97706);
-  color: white;
-}
-
-.val-box {
-  display: inline-flex;
+.details-header {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 2.2rem;
-  height: 2.2rem;
-  border-radius: 6px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
-  font-weight: bold;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 1rem;
-  transition: all 0.2s;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
-.val-box.on {
-  border-color: var(--vp-c-brand-1);
-  color: var(--vp-c-brand-1);
-  background: var(--vp-c-brand-soft);
+.details-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
 }
 
-.val-box.flash {
-  box-shadow: 0 0 0 3px var(--vp-c-warning-soft, rgba(217, 119, 6, 0.25));
+.details-type {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #e0f2fe;
+  border-radius: 4px;
+  color: #0369a1;
 }
 
-.val-box.out {
-  border-style: dashed;
+.details-content {
+  font-size: 12px;
+  color: #475569;
+  line-height: 1.6;
 }
 
-.status-line {
-  margin-top: 0.5rem;
-  font-size: 0.78rem;
-  color: var(--vp-c-text-3);
+.register-explanation {
+  margin-top: 16px;
+  padding: 12px;
+  background: white;
+  border-radius: 8px;
 }
 
-@media (max-width: 480px) {
-  .reg-panel {
-    justify-content: center;
-  }
+.exp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.exp-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.exp-table th,
+.exp-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.exp-table th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.exp-table td {
+  color: #475569;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue
index 046297c..aba002f 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue
@@ -1,40 +1,29 @@
 <template>
   <div class="rendering-demo">
-    <div class="demo-label">浏览器渲染过程 ── 点击逐步演示</div>
-
+    <div class="demo-title">浏览器渲染管线</div>
     <div class="pipeline">
-      <div
-        v-for="(stage, index) in stages"
-        :key="stage.name"
-        class="pipeline-stage"
-        :class="{ active: currentStage >= index }"
-        @click="currentStage = index"
-      >
-        <div class="stage-header">
-          <span class="stage-num">{{ index + 1 }}</span>
-          <span class="stage-name">{{ stage.name }}</span>
-        </div>
-        <div class="stage-desc">{{ stage.desc }}</div>
-        <div v-if="currentStage >= index" class="stage-detail">
-          {{ stage.detail }}
+      <div v-for="(stage, i) in stages" :key="stage.name" class="pipe-item">
+        <div class="pipe-card">
+          <div class="pipe-num">{{ i + 1 }}</div>
+          <div class="pipe-info">
+            <div class="pipe-name">{{ stage.name }}</div>
+            <div class="pipe-desc">{{ stage.desc }}</div>
+          </div>
         </div>
+        <div v-if="i < stages.length - 1" class="pipe-arrow">↓</div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击查看各阶段详情</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentStage = ref(0)
 const stages = [
-  { name: 'HTML 解析', desc: '把 HTML 变成 DOM 树', detail: '<div> → Document Object Model 树结构' },
-  { name: 'CSS 解析', desc: '把 CSS 变成样式规则', detail: '选择器 + 属性 → 样式规则表' },
-  { name: '渲染树', desc: 'DOM + CSS = 渲染树', detail: '哪些节点显示、什么样式' },
-  { name: '布局计算', desc: '计算每个元素的位置', detail: '宽高、坐标、层级' },
-  { name: '绘制', desc: '把内容画到像素缓冲区', detail: '文字、颜色、图片、边框' },
-  { name: '合成', desc: '多层合成一张图', detail: 'GPU 合成，显示到屏幕' }
+  { name: 'HTML 解析', desc: '将 HTML 文本解析为 DOM 树（文档对象模型）' },
+  { name: 'CSS 解析', desc: '将 CSS 规则解析为样式表，计算每个元素的最终样式' },
+  { name: '构建渲染树', desc: 'DOM 树 + 样式规则 = 渲染树（只包含可见元素）' },
+  { name: '布局计算', desc: '计算每个元素在页面上的精确位置和大小' },
+  { name: '绘制', desc: '将元素的文字、颜色、图片、边框等绘制到像素缓冲区' },
+  { name: '合成显示', desc: '将多个图层合成为最终画面，由 GPU 输出到屏幕' }
 ]
 </script>
 
@@ -45,87 +34,63 @@ const stages = [
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
-}
-
-.pipeline {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.pipeline-stage {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.5rem 0.6rem;
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-
-.pipeline-stage.active {
-  opacity: 1;
-  border-color: var(--vp-c-brand);
-}
-
-.stage-header {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.stage-num {
-  width: 1.2rem;
-  height: 1.2rem;
-  background: var(--vp-c-divider);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.6rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-}
-
-.pipeline-stage.active .stage-num {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.stage-name {
+.demo-title {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
+  margin-bottom: 0.8rem;
 }
-
-.stage-desc {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.15rem;
+.pipeline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-
-.stage-detail {
+.pipe-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.pipe-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.45rem 0.7rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  width: 100%;
+}
+.pipe-num {
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.65rem;
-  color: var(--vp-c-brand);
-  margin-top: 0.3rem;
-  padding: 0.25rem 0.4rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 4px;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
 }
-
-.tap-hint {
-  text-align: center;
+.pipe-info { flex: 1; }
+.pipe-name {
   font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+.pipe-desc {
+  font-size: 0.63rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+  margin-top: 0.1rem;
+  line-height: 1.4;
+}
+.pipe-arrow {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  padding: 0.15rem 0;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue
new file mode 100644
index 0000000..e4845f8
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="static-vs-dynamic-demo">
+    <h4>🔍 静态类型 vs 动态类型：实时对比</h4>
+    <p class="desc">选择一段代码，观察两种类型系统的不同行为</p>
+
+    <div class="example-selector">
+      <button
+        v-for="(ex, i) in examples"
+        :key="i"
+        :class="['ex-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        {{ ex.label }}
+      </button>
+    </div>
+
+    <div class="comparison">
+      <div class="panel static-panel">
+        <div class="panel-header">
+          <span class="badge">静态类型（TypeScript）</span>
+          <span class="timing">⏱ 编译时检查</span>
+        </div>
+        <pre class="code-block">{{ examples[selected].staticCode }}</pre>
+        <div :class="['result', examples[selected].staticOk ? 'ok' : 'err']">
+          {{ examples[selected].staticResult }}
+        </div>
+      </div>
+
+      <div class="vs">VS</div>
+
+      <div class="panel dynamic-panel">
+        <div class="panel-header">
+          <span class="badge dynamic">动态类型（JavaScript）</span>
+          <span class="timing">⏱ 运行时检查</span>
+        </div>
+        <pre class="code-block">{{ examples[selected].dynamicCode }}</pre>
+        <div :class="['result', examples[selected].dynamicOk ? 'ok' : 'err']">
+          {{ examples[selected].dynamicResult }}
+        </div>
+      </div>
+    </div>
+
+    <div class="insight">
+      💡 {{ examples[selected].insight }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+
+const examples = [
+  {
+    label: '变量赋值',
+    staticCode: `let name: string = "Alice"
+name = 42  // ❌ 编译错误`,
+    dynamicCode: `let name = "Alice"
+name = 42  // ✅ 没问题`,
+    staticResult: '❌ Type "number" is not assignable to type "string"',
+    dynamicResult: '✅ 运行正常，name 变成了 42',
+    staticOk: false,
+    dynamicOk: true,
+    insight: '静态类型在你写代码时就发现错误，动态类型要等到运行时才知道。'
+  },
+  {
+    label: '函数参数',
+    staticCode: `function add(a: number, b: number) {
+  return a + b
+}
+add("1", 2)  // ❌ 编译错误`,
+    dynamicCode: `function add(a, b) {
+  return a + b
+}
+add("1", 2)  // ✅ 返回 "12"`,
+    staticResult: '❌ Argument of type "string" is not assignable to parameter of type "number"',
+    dynamicResult: '✅ 返回 "12"（字符串拼接，不是数学加法！）',
+    staticOk: false,
+    dynamicOk: true,
+    insight: '动态类型的"灵活"有时是 bug 的温床——你期望 3，却得到 "12"。'
+  },
+  {
+    label: '属性访问',
+    staticCode: `interface User { name: string }
+let user: User = { name: "Bob" }
+console.log(user.age)  // ❌ 编译错误`,
+    dynamicCode: `let user = { name: "Bob" }
+console.log(user.age)  // ✅ 输出 undefined`,
+    staticResult: '❌ Property "age" does not exist on type "User"',
+    dynamicResult: '✅ 输出 undefined（不报错，但可能导致后续逻辑出错）',
+    staticOk: false,
+    dynamicOk: true,
+    insight: '静态类型能在编译时捕获拼写错误和属性缺失，动态类型只会默默返回 undefined。'
+  }
+]
+</script>
+
+<style scoped>
+.static-vs-dynamic-demo {
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 16px 0;
+  background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.example-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.ex-btn {
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.ex-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.comparison { display: flex; gap: 12px; align-items: stretch; }
+.panel { flex: 1; border-radius: 8px; border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); overflow: hidden; }
+.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
+.badge { font-size: 12px; font-weight: 600; color: var(--vp-c-brand-1); }
+.badge.dynamic { color: #e5a00d; }
+.timing { font-size: 11px; color: var(--vp-c-text-3); }
+.code-block { padding: 12px; margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }
+.result { padding: 8px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
+.result.ok { background: #f0fdf4; color: #166534; }
+.result.err { background: #fef2f2; color: #991b1b; }
+.vs { display: flex; align-items: center; font-weight: 700; color: var(--vp-c-text-3); font-size: 14px; }
+.insight { margin-top: 12px; padding: 10px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; font-size: 13px; }
+@media (max-width: 640px) {
+  .comparison { flex-direction: column; }
+  .vs { justify-content: center; padding: 4px 0; }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StrongVsWeakDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StrongVsWeakDemo.vue
new file mode 100644
index 0000000..59905ae
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StrongVsWeakDemo.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="strong-vs-weak-demo">
+    <h4>⚡ 强类型 vs 弱类型：隐式转换实验室</h4>
+    <p class="desc">输入一个表达式，看看不同语言怎么处理</p>
+
+    <div class="expr-selector">
+      <button
+        v-for="(ex, i) in expressions"
+        :key="i"
+        :class="['expr-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        <code>{{ ex.expr }}</code>
+      </button>
+    </div>
+
+    <div class="results-grid">
+      <div v-for="lang in expressions[selected].langs" :key="lang.name" class="lang-card">
+        <div class="lang-header">
+          <span class="lang-name">{{ lang.name }}</span>
+          <span :class="['lang-type', lang.strong ? 'strong' : 'weak']">
+            {{ lang.strong ? '强类型' : '弱类型' }}
+          </span>
+        </div>
+        <pre class="lang-code">{{ lang.code }}</pre>
+        <div :class="['lang-result', lang.error ? 'error' : 'success']">
+          {{ lang.result }}
+        </div>
+      </div>
+    </div>
+
+    <div class="takeaway">
+      📌 {{ expressions[selected].takeaway }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+
+const expressions = [
+  {
+    expr: '"1" + 1',
+    langs: [
+      { name: 'JavaScript', strong: false, code: '"1" + 1', result: '→ "11"（字符串拼接）', error: false },
+      { name: 'Python', strong: true, code: '"1" + 1', result: '→ TypeError: can only concatenate str to str', error: true },
+      { name: 'Java', strong: false, code: '"1" + 1', result: '→ "11"（字符串拼接）', error: false },
+      { name: 'Rust', strong: true, code: '"1" + 1', result: '→ 编译错误：类型不匹配', error: true }
+    ],
+    takeaway: '强类型语言拒绝猜测你的意图，宁可报错也不悄悄转换。弱类型语言会"好心"帮你转，但结果可能不是你想要的。'
+  },
+  {
+    expr: 'true + 1',
+    langs: [
+      { name: 'JavaScript', strong: false, code: 'true + 1', result: '→ 2（true 被转为 1）', error: false },
+      { name: 'Python', strong: true, code: 'True + 1', result: '→ 2（Python 中 bool 是 int 子类）', error: false },
+      { name: 'Java', strong: false, code: 'true + 1', result: '→ 编译错误', error: true },
+      { name: 'C', strong: false, code: '1 + 1 // true=1', result: '→ 2（C 中没有 bool，用 0/1）', error: false }
+    ],
+    takeaway: 'bool 和数字的关系因语言而异。Python 虽是强类型，但 bool 继承自 int，这是设计选择而非弱类型。'
+  },
+  {
+    expr: '"5" == 5',
+    langs: [
+      { name: 'JavaScript', strong: false, code: '"5" == 5', result: '→ true（隐式转换后比较）', error: false },
+      { name: 'Python', strong: true, code: '"5" == 5', result: '→ False（类型不同，直接 False）', error: false },
+      { name: 'TypeScript', strong: false, code: '"5" == 5', result: '→ true（但 TSLint 会警告）', error: false },
+      { name: 'PHP', strong: false, code: '"5" == 5', result: '→ true（臭名昭著的松散比较）', error: false }
+    ],
+    takeaway: 'JavaScript 的 == 会做隐式转换，这是无数 bug 的来源。所以社区推荐始终使用 === 严格比较。'
+  }
+]
+</script>
+
+<style scoped>
+.strong-vs-weak-demo {
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 16px 0;
+  background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.expr-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.expr-btn {
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.expr-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.expr-btn code { font-size: 13px; }
+.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
+.lang-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg); overflow: hidden; }
+.lang-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
+.lang-name { font-weight: 600; font-size: 13px; }
+.lang-type { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
+.lang-type.strong { background: #dbeafe; color: #1e40af; }
+.lang-type.weak { background: #fef3c7; color: #92400e; }
+.lang-code { padding: 8px 10px; margin: 0; font-size: 12px; }
+.lang-result { padding: 6px 10px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
+.lang-result.success { background: #f0fdf4; color: #166534; }
+.lang-result.error { background: #fef2f2; color: #991b1b; }
+.takeaway { margin-top: 12px; padding: 10px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; font-size: 13px; }
+@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue
new file mode 100644
index 0000000..7b25795
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="type-inference-demo">
+    <h4>🧠 类型推断：编译器如何"猜"出类型</h4>
+    <p class="desc">点击代码行，看编译器如何一步步推断类型</p>
+
+    <div class="code-area">
+      <div
+        v-for="(line, i) in codeLines"
+        :key="i"
+        :class="['code-line', { active: activeLine === i }]"
+        @click="activeLine = i"
+      >
+        <span class="line-num">{{ i + 1 }}</span>
+        <span class="line-code" v-html="line.code"></span>
+        <span v-if="activeLine === i" class="inferred-type">
+          → {{ line.inferred }}
+        </span>
+      </div>
+    </div>
+
+    <div v-if="activeLine !== null" class="explanation">
+      <div class="explain-header">推断过程</div>
+      <div class="explain-steps">
+        <div v-for="(step, j) in codeLines[activeLine].steps" :key="j" class="step">
+          <span class="step-num">{{ j + 1 }}</span>
+          <span>{{ step }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="lang-support">
+      <div class="support-title">各语言的类型推断能力</div>
+      <div class="support-grid">
+        <div v-for="lang in langs" :key="lang.name" class="support-item">
+          <span class="support-name">{{ lang.name }}</span>
+          <div class="support-bar">
+            <div class="support-fill" :style="{ width: lang.level + '%' }"></div>
+          </div>
+          <span class="support-label">{{ lang.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeLine = ref(0)
+
+const codeLines = [
+  {
+    code: '<span class="kw">let</span> x = <span class="num">42</span>',
+    inferred: 'number',
+    steps: [
+      '右侧是字面量 42',
+      '42 是整数，类型为 number',
+      '推断 x 的类型为 number'
+    ]
+  },
+  {
+    code: '<span class="kw">let</span> names = [<span class="str">"Alice"</span>, <span class="str">"Bob"</span>]',
+    inferred: 'string[]',
+    steps: [
+      '右侧是数组字面量 [...]',
+      '数组元素 "Alice"、"Bob" 都是 string',
+      '推断数组类型为 string[]'
+    ]
+  },
+  {
+    code: '<span class="kw">let</span> result = x > 10 ? <span class="str">"big"</span> : <span class="str">"small"</span>',
+    inferred: 'string',
+    steps: [
+      '三元表达式的两个分支都是 string',
+      '两个分支类型一致',
+      '推断 result 类型为 string'
+    ]
+  },
+  {
+    code: '<span class="kw">const</span> add = (a: <span class="type">number</span>, b: <span class="type">number</span>) => a + b',
+    inferred: '(a: number, b: number) => number',
+    steps: [
+      '参数 a 和 b 显式标注为 number',
+      'number + number 的结果是 number',
+      '推断返回值类型为 number'
+    ]
+  },
+  {
+    code: '<span class="kw">let</span> mixed = [<span class="num">1</span>, <span class="str">"two"</span>, <span class="kw">true</span>]',
+    inferred: '(number | string | boolean)[]',
+    steps: [
+      '数组包含 number、string、boolean 三种类型',
+      '取所有元素类型的联合类型',
+      '推断为 (number | string | boolean)[]'
+    ]
+  }
+]
+
+const langs = [
+  { name: 'Rust', level: 95, label: '几乎全推断' },
+  { name: 'TypeScript', level: 85, label: '大部分可推断' },
+  { name: 'Kotlin', level: 80, label: '局部推断强' },
+  { name: 'Go', level: 50, label: '仅 := 短声明' },
+  { name: 'Java', level: 40, label: 'var 关键字（Java 10+）' },
+  { name: 'C', level: 5, label: '几乎不推断' }
+]
+</script>
+
+<style scoped>
+.type-inference-demo {
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  margin: 16px 0;
+  background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.code-area {
+  background: #1e1e1e; border-radius: 8px; padding: 12px 0; font-family: 'Fira Code', monospace;
+}
+.code-line {
+  display: flex; align-items: center; padding: 4px 14px; cursor: pointer;
+  transition: background 0.15s; font-size: 13px; color: #d4d4d4;
+}
+.code-line:hover { background: rgba(255,255,255,0.05); }
+.code-line.active { background: rgba(100,149,237,0.15); }
+.line-num { color: #858585; width: 24px; text-align: right; margin-right: 12px; font-size: 12px; user-select: none; }
+.line-code :deep(.kw) { color: #569cd6; }
+.line-code :deep(.str) { color: #ce9178; }
+.line-code :deep(.num) { color: #b5cea8; }
+.line-code :deep(.type) { color: #4ec9b0; }
+.inferred-type {
+  margin-left: auto; padding: 2px 8px; background: rgba(78,201,176,0.2);
+  color: #4ec9b0; border-radius: 4px; font-size: 12px; white-space: nowrap;
+}
+.explanation {
+  margin-top: 12px; border: 1px solid var(--vp-c-divider); border-radius: 8px;
+  background: var(--vp-c-bg); overflow: hidden;
+}
+.explain-header { padding: 8px 12px; font-weight: 600; font-size: 13px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
+.explain-steps { padding: 10px 12px; }
+.step { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
+.step-num {
+  width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand-1);
+  color: #fff; display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 600; flex-shrink: 0;
+}
+.lang-support { margin-top: 16px; }
+.support-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
+.support-grid { display: flex; flex-direction: column; gap: 6px; }
+.support-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.support-name { width: 80px; font-weight: 500; text-align: right; }
+.support-bar { flex: 1; height: 8px; background: var(--vp-c-divider); border-radius: 4px; overflow: hidden; }
+.support-fill { height: 100%; background: var(--vp-c-brand-1); border-radius: 4px; transition: width 0.5s; }
+.support-label { width: 140px; color: var(--vp-c-text-3); font-size: 11px; }
+@media (max-width: 640px) { .support-label { display: none; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue
new file mode 100644
index 0000000..4d45b58
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="type-safety-demo">
+    <h4>🛡️ 类型安全实战：常见陷阱与防御</h4>
+    <p class="desc">点击不同的陷阱场景，学习如何用类型系统保护你的代码</p>
+
+    <div class="trap-selector">
+      <button
+        v-for="(trap, i) in traps"
+        :key="i"
+        :class="['trap-btn', { active: selected === i }]"
+        @click="selected = i"
+      >
+        <span class="trap-icon">{{ trap.icon }}</span>
+        <span>{{ trap.name }}</span>
+      </button>
+    </div>
+
+    <div class="trap-detail">
+      <div class="danger-zone">
+        <div class="zone-header danger">⚠️ 危险代码</div>
+        <pre class="code-block">{{ traps[selected].dangerCode }}</pre>
+        <div class="zone-result danger">{{ traps[selected].dangerResult }}</div>
+      </div>
+
+      <div class="safe-zone">
+        <div class="zone-header safe">✅ 安全代码</div>
+        <pre class="code-block">{{ traps[selected].safeCode }}</pre>
+        <div class="zone-result safe">{{ traps[selected].safeResult }}</div>
+      </div>
+    </div>
+
+    <div class="defense-tip">
+      <div class="tip-header">🔑 防御策略</div>
+      <ul>
+        <li v-for="(tip, j) in traps[selected].tips" :key="j">{{ tip }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref(0)
+
+const traps = [
+  {
+    icon: '💣', name: 'null 引用',
+    dangerCode: `function getLength(str) {
+  return str.length  // 如果 str 是 null？
+}
+getLength(null)  // 💥 运行时崩溃`,
+    dangerResult: '💥 TypeError: Cannot read properties of null',
+    safeCode: `function getLength(str: string | null): number {
+  if (str === null) return 0
+  return str.length  // ✅ 编译器确保此处 str 不为 null
+}`,
+    safeResult: '✅ 编译器强制你处理 null 的情况',
+    tips: ['使用 strictNullChecks 编译选项', '用联合类型 string | null 显式标注可空', '用可选链 ?. 安全访问属性']
+  },
+  {
+    icon: '🎭', name: '类型断言滥用',
+    dangerCode: `const data = fetchAPI() as any
+const name = data.user.profile.name
+// 如果 API 返回格式变了？`,
+    dangerResult: '💥 运行时崩溃，any 绕过了所有类型检查',
+    safeCode: `interface APIResponse {
+  user: { profile: { name: string } }
+}
+const data: APIResponse = await fetchAPI()
+const name = data.user.profile.name`,
+    safeResult: '✅ 如果 API 格式变了，编译时就能发现',
+    tips: ['避免使用 any，用 unknown 代替', '为 API 响应定义明确的接口', '使用 zod 等库做运行时校验']
+  },
+  {
+    icon: '🔄', name: '隐式转换',
+    dangerCode: `if (userId == 0) {
+  // 当 userId 是 "" 时也会进入！
+  console.log("无效用户")
+}
+// "" == 0 → true（隐式转换）`,
+    dangerResult: '💥 空字符串被当成 0，逻辑错误',
+    safeCode: `if (userId === 0) {
+  console.log("无效用户")
+}
+// "" === 0 → false（严格比较）`,
+    safeResult: '✅ 严格比较不做隐式转换',
+    tips: ['始终使用 === 而不是 ==', '开启 ESLint 的 eqeqeq 规则', '用 TypeScript 的严格模式']
+  },
+  {
+    icon: '📦', name: '数组类型不安全',
+    dangerCode: `const items = []  // any[] 类型
+items.push(1)
+items.push("hello")
+items.push({ x: 1 })
+// 数组里什么都有，取出来用时容易出错`,
+    dangerResult: '💥 数组元素类型不一致，后续操作可能崩溃',
+    safeCode: `const items: number[] = []
+items.push(1)
+items.push("hello")  // ❌ 编译错误！
+// 编译器确保数组元素类型一致`,
+    safeResult: '✅ 编译时就阻止了类型不一致的元素',
+    tips: ['声明数组时指定元素类型', '使用 ReadonlyArray 防止意外修改', '用元组类型 [string, number] 表示固定结构']
+  }
+]
+</script>
+
+<style scoped>
+.type-safety-demo {
+  padding: 20px; border: 1px solid var(--vp-c-divider);
+  border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
+}
+h4 { margin: 0 0 4px; }
+.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
+.trap-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
+.trap-btn {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
+}
+.trap-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.trap-icon { font-size: 16px; }
+.trap-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
+.danger-zone, .safe-zone { border-radius: 8px; border: 1px solid var(--vp-c-divider); overflow: hidden; background: var(--vp-c-bg); }
+.zone-header { padding: 6px 12px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--vp-c-divider); }
+.zone-header.danger { background: #fef2f2; color: #991b1b; }
+.zone-header.safe { background: #f0fdf4; color: #166534; }
+.code-block { padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
+.zone-result { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
+.zone-result.danger { background: #fef2f2; color: #991b1b; }
+.zone-result.safe { background: #f0fdf4; color: #166534; }
+.defense-tip { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
+.tip-header { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
+.defense-tip ul { margin: 0; padding-left: 18px; }
+.defense-tip li { font-size: 13px; margin: 3px 0; }
+@media (max-width: 640px) { .trap-detail { grid-template-columns: 1fr; } }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
index f0d8c9e..e406011 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
@@ -1,43 +1,80 @@
 <template>
   <div class="url-demo">
-    <div class="demo-label">URL 访问流程 ── 点击逐步演示</div>
+    <div class="demo-header">
+      <div class="demo-title">URL 访问全流程</div>
+      <button class="play-btn" @click="autoPlay" :disabled="playing">
+        {{ playing ? '播放中...' : '▶ 自动演示' }}
+      </button>
+    </div>
 
     <div class="flow">
-      <div
-        v-for="(step, index) in steps"
-        :key="step.name"
-        class="flow-step"
-        :class="{ active: currentStep >= index }"
-        @click="currentStep = index"
-      >
-        <div class="step-num">{{ index + 1 }}</div>
-        <div class="step-content">
-          <div class="step-name">{{ step.name }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
-          <div v-if="currentStep >= index && step.detail" class="step-detail">
-            {{ step.detail }}
+      <div class="flow-side client-side">
+        <div class="side-label">浏览器</div>
+      </div>
+
+      <div class="flow-steps">
+        <div
+          v-for="(step, i) in steps"
+          :key="step.name"
+          class="step"
+          :class="{ active: current >= i, highlight: current === i }"
+          @click="current = i"
+        >
+          <div class="step-line">
+            <span class="step-dot"></span>
+            <span v-if="i < steps.length - 1" class="step-connector"></span>
+          </div>
+          <div class="step-body">
+            <div class="step-head">
+              <span class="step-num">{{ i + 1 }}</span>
+              <span class="step-name">{{ step.name }}</span>
+              <span class="step-dir" :class="step.dir">{{ step.dir === 'right' ? '→' : '←' }}</span>
+            </div>
+            <div v-if="current >= i" class="step-detail">{{ step.detail }}</div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="tap-hint">👆 点击查看各步骤详情</div>
+      <div class="flow-side server-side">
+        <div class="side-label">服务器</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentStep = ref(0)
+import { ref, onUnmounted } from 'vue'
+
+const current = ref(-1)
+const playing = ref(false)
+let timer = null
+
 const steps = [
-  { name: 'URL 解析', desc: '提取协议、域名、路径', detail: 'https://www.example.com → 协议:https, 域名:www.example.com' },
-  { name: 'DNS 解析', desc: '域名转换为 IP 地址', detail: 'www.example.com → 93.184.216.34' },
-  { name: 'TCP 连接', desc: '建立与服务器的连接', detail: '三次握手完成' },
-  { name: 'TLS 握手', desc: '建立加密通道（HTTPS）', detail: '交换密钥，验证证书' },
-  { name: '发送请求', desc: '发送 HTTP 请求', detail: 'GET /index.html HTTP/1.1' },
-  { name: '服务器处理', desc: '后端处理请求', detail: '查询数据库，返回 HTML' },
-  { name: '返回响应', desc: '接收服务器响应', detail: 'HTTP/1.1 200 OK, Content-Type: text/html' },
-  { name: '浏览器渲染', desc: '解析并显示页面', detail: '构建 DOM 树，计算样式，绘制页面' }
+  { name: 'URL 解析', dir: 'right', detail: 'https://example.com → 协议: https, 域名: example.com, 路径: /' },
+  { name: 'DNS 解析', dir: 'right', detail: '向 DNS 服务器查询，将域名翻译为 IP 地址 93.184.216.34' },
+  { name: 'TCP 三次握手', dir: 'right', detail: 'SYN → SYN-ACK → ACK，建立可靠的传输连接' },
+  { name: 'TLS 握手', dir: 'right', detail: '交换密钥、验证证书，建立 HTTPS 加密通道' },
+  { name: '发送 HTTP 请求', dir: 'right', detail: 'GET /index.html HTTP/1.1  Host: example.com' },
+  { name: '服务器处理', dir: 'left', detail: '解析请求 → 执行业务逻辑 → 查询数据库 → 组装响应' },
+  { name: '返回 HTTP 响应', dir: 'left', detail: 'HTTP/1.1 200 OK  Content-Type: text/html' },
+  { name: '浏览器渲染', dir: 'left', detail: 'HTML → DOM 树 → 样式计算 → 布局 → 绘制到屏幕' }
 ]
+
+const autoPlay = () => {
+  current.value = -1
+  playing.value = true
+  let i = 0
+  timer = setInterval(() => {
+    current.value = i
+    i++
+    if (i >= steps.length) {
+      clearInterval(timer)
+      playing.value = false
+    }
+  }, 800)
+}
+
+onUnmounted(() => { if (timer) clearInterval(timer) })
 </script>
 
 <style scoped>
@@ -47,87 +84,110 @@ const steps = [
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
-}
-
-.flow {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.flow-step {
-  display: flex;
-  gap: 0.6rem;
-  padding: 0.4rem;
-  border-radius: 6px;
-  opacity: 0.4;
-  transition: all 0.3s;
-  background: var(--vp-c-bg);
-}
-
-.flow-step.active {
-  opacity: 1;
-}
-
-.step-num {
-  width: 1.3rem;
-  height: 1.3rem;
-  background: var(--vp-c-divider);
-  border-radius: 50%;
+.demo-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  flex-shrink: 0;
+  margin-bottom: 0.8rem;
 }
-
-.flow-step.active .step-num {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.step-content {
-  flex: 1;
-}
-
-.step-name {
+.demo-title {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
 }
-
-.step-desc {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.1rem;
-}
-
-.step-detail {
+.play-btn {
   font-size: 0.65rem;
-  color: var(--vp-c-brand);
-  margin-top: 0.3rem;
-  padding: 0.3rem;
-  background: var(--vp-c-bg-soft);
+  padding: 0.25rem 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+.play-btn:hover:not(:disabled) { border-color: var(--vp-c-brand); }
+.play-btn:disabled { opacity: 0.5; cursor: default; }
+.flow {
+  display: flex;
+  gap: 0.5rem;
+}
+.flow-side {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 0.3rem;
+}
+.side-label {
+  writing-mode: vertical-rl;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  letter-spacing: 0.15em;
+}
+.flow-steps { flex: 1; display: flex; flex-direction: column; }
+.step {
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0.35;
+  transition: opacity 0.3s;
+}
+.step.active { opacity: 1; }
+.step.highlight .step-dot { box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.2); }
+.step-line {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 0.8rem;
+  flex-shrink: 0;
+}
+.step-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  transition: all 0.3s;
+  flex-shrink: 0;
+  margin-top: 0.35rem;
+}
+.step.active .step-dot { background: var(--vp-c-brand); }
+.step-connector {
+  flex: 1;
+  width: 1px;
+  background: var(--vp-c-divider);
+  min-height: 0.8rem;
+}
+.step.active .step-connector { background: var(--vp-c-brand); opacity: 0.3; }
+.step-body { flex: 1; padding-bottom: 0.5rem; }
+.step-head { display: flex; align-items: center; gap: 0.35rem; }
+.step-num {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  min-width: 1rem;
+}
+.step.active .step-num { color: var(--vp-c-brand); }
+.step-name {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+.step-dir {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+.step-dir.right { color: var(--vp-c-brand); }
+.step-dir.left { color: #e879a0; }
+.step-detail {
+  font-size: 0.63rem;
+  color: var(--vp-c-text-3);
+  margin-top: 0.2rem;
+  padding: 0.25rem 0.4rem;
+  background: var(--vp-c-bg);
   border-radius: 4px;
   font-family: monospace;
+  line-height: 1.5;
 }
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+@media (max-width: 480px) {
+  .flow-side { display: none; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue
new file mode 100644
index 0000000..508f5ab
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="flow-demo">
+    <div class="flow-section">
+      <div class="flow-label traditional">传统开发流程</div>
+      <div class="flow-steps">
+        <span v-for="(step, i) in traditionalSteps" :key="step">
+          <span class="flow-step">{{ step }}</span>
+          <span v-if="i < traditionalSteps.length - 1" class="flow-arrow">→</span>
+        </span>
+      </div>
+      <div class="flow-loop">↑ 反复循环 ↓</div>
+    </div>
+
+    <div class="flow-section">
+      <div class="flow-label vibe">Vibe Coding 流程</div>
+      <div class="flow-steps">
+        <span v-for="(step, i) in vibeSteps" :key="step">
+          <span class="flow-step" :class="{ highlight: step.highlight }">{{ step.text }}</span>
+          <span v-if="i < vibeSteps.length - 1" class="flow-arrow">→</span>
+        </span>
+      </div>
+      <div class="flow-loop">↑ 快速迭代 ↓</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const traditionalSteps = ['你', '学习语法', '写代码', '调试', '查文档', '修改', '运行']
+
+const vibeSteps = [
+  { text: '你', highlight: false },
+  { text: '用自然语言描述需求', highlight: true },
+  { text: 'AI 生成代码', highlight: true },
+  { text: '你审核修改', highlight: false },
+  { text: '运行', highlight: false }
+]
+</script>
+
+<style scoped>
+.flow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.flow-section {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.flow-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px dashed var(--vp-c-divider);
+}
+
+.flow-label.traditional {
+  color: var(--vp-c-text-2);
+}
+
+.flow-label.vibe {
+  color: var(--vp-c-brand-1);
+}
+
+.flow-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 0.35rem;
+}
+
+.flow-step {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  color: var(--vp-c-text-2);
+}
+
+.flow-step.highlight {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.flow-arrow {
+  color: var(--vp-c-text-3);
+  font-size: 0.8rem;
+}
+
+.flow-loop {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  text-align: center;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 365a5ed..2f33b83 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -122,6 +122,14 @@ import FunctionalUnitDemo from './components/appendix/computer-fundamentals/Func
 import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
 import MinCpuDemo from './components/appendix/computer-fundamentals/MinCpuDemo.vue'
 import RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.vue'
+import PipelineDemo from './components/appendix/computer-fundamentals/PipelineDemo.vue'
+import ControllerDemo from './components/appendix/computer-fundamentals/ControllerDemo.vue'
+import BusSystemDemo from './components/appendix/computer-fundamentals/BusSystemDemo.vue'
+import InstructionFormatDemo from './components/appendix/computer-fundamentals/InstructionFormatDemo.vue'
+import AddressingModeDemo from './components/appendix/computer-fundamentals/AddressingModeDemo.vue'
+import CacheDemo from './components/appendix/computer-fundamentals/CacheDemo.vue'
+import IOMethodDemo from './components/appendix/computer-fundamentals/IOMethodDemo.vue'
+import PSWFlagDemo from './components/appendix/computer-fundamentals/PSWFlagDemo.vue'
 import FlipFlopDemo from './components/appendix/computer-fundamentals/FlipFlopDemo.vue'
 // import EvolutionFlowDemo from './components/appendix/computer-fundamentals/EvolutionFlowDemo.vue'
 import ProcessDemo from './components/appendix/computer-fundamentals/ProcessDemo.vue'
@@ -135,6 +143,17 @@ import AlgorithmDemo from './components/appendix/computer-fundamentals/Algorithm
 import LanguageMapDemo from './components/appendix/computer-fundamentals/LanguageMapDemo.vue'
 import TypeSystemDemo from './components/appendix/computer-fundamentals/TypeSystemDemo.vue'
 import CompilerDemo from './components/appendix/computer-fundamentals/CompilerDemo.vue'
+import StaticVsDynamicDemo from './components/appendix/computer-fundamentals/StaticVsDynamicDemo.vue'
+import StrongVsWeakDemo from './components/appendix/computer-fundamentals/StrongVsWeakDemo.vue'
+import TypeInferenceFlowDemo from './components/appendix/computer-fundamentals/TypeInferenceFlowDemo.vue'
+import LexerTokenDemo from './components/appendix/computer-fundamentals/LexerTokenDemo.vue'
+import CompileVsInterpretDemo from './components/appendix/computer-fundamentals/CompileVsInterpretDemo.vue'
+import CodeToInstructionDemo from './components/appendix/computer-fundamentals/CodeToInstructionDemo.vue'
+import CISCvsRISCDemo from './components/appendix/computer-fundamentals/CISCvsRISCDemo.vue'
+import TypeSafetyPracticeDemo from './components/appendix/computer-fundamentals/TypeSafetyPracticeDemo.vue'
+import GenericTypeDemo from './components/appendix/computer-fundamentals/GenericTypeDemo.vue'
+import ASTVisualizerDemo from './components/appendix/computer-fundamentals/ASTVisualizerDemo.vue'
+import CodeOptimizationDemo from './components/appendix/computer-fundamentals/CodeOptimizationDemo.vue'
 import CFNetworkLayers from './components/appendix/computer-fundamentals/NetworkLayers.vue'
 import CFSubnetCalculator from './components/appendix/computer-fundamentals/SubnetCalculator.vue'
 import CFTcpUdpComparison from './components/appendix/computer-fundamentals/TcpUdpComparison.vue'
@@ -184,6 +203,7 @@ import FullstackSkillDemo from './components/appendix/computer-fundamentals/Full
 import AIvsTraditionalDemo from './components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue'
 import CareerPathDemo from './components/appendix/computer-fundamentals/CareerPathDemo.vue'
 import LearningStrategyDemo from './components/appendix/computer-fundamentals/LearningStrategyDemo.vue'
+import VibeCodingFlowDemo from './components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue'
 import PowerOnDemo from './components/appendix/computer-fundamentals/PowerOnDemo.vue'
 import BootProcessDemo from './components/appendix/computer-fundamentals/BootProcessDemo.vue'
 import DesktopDemo from './components/appendix/computer-fundamentals/DesktopDemo.vue'
@@ -859,6 +879,14 @@ export default {
     app.component('CpuArchitectureDemo', CpuArchitectureDemo)
     app.component('MinCpuDemo', MinCpuDemo)
     app.component('RegisterDemo', RegisterDemo)
+    app.component('PipelineDemo', PipelineDemo)
+    app.component('ControllerDemo', ControllerDemo)
+    app.component('BusSystemDemo', BusSystemDemo)
+    app.component('InstructionFormatDemo', InstructionFormatDemo)
+    app.component('AddressingModeDemo', AddressingModeDemo)
+    app.component('CacheDemo', CacheDemo)
+    app.component('IOMethodDemo', IOMethodDemo)
+    app.component('PSWFlagDemo', PSWFlagDemo)
     app.component('FlipFlopDemo', FlipFlopDemo)
     // app.component('EvolutionFlowDemo', EvolutionFlowDemo)
     app.component('ProcessDemo', ProcessDemo)
@@ -872,6 +900,17 @@ export default {
     app.component('LanguageMapDemo', LanguageMapDemo)
     app.component('TypeSystemDemo', TypeSystemDemo)
     app.component('CompilerDemo', CompilerDemo)
+    app.component('StaticVsDynamicDemo', StaticVsDynamicDemo)
+    app.component('StrongVsWeakDemo', StrongVsWeakDemo)
+    app.component('TypeInferenceFlowDemo', TypeInferenceFlowDemo)
+    app.component('LexerTokenDemo', LexerTokenDemo)
+    app.component('CompileVsInterpretDemo', CompileVsInterpretDemo)
+    app.component('CodeToInstructionDemo', CodeToInstructionDemo)
+    app.component('CISCvsRISCDemo', CISCvsRISCDemo)
+    app.component('TypeSafetyPracticeDemo', TypeSafetyPracticeDemo)
+    app.component('GenericTypeDemo', GenericTypeDemo)
+    app.component('ASTVisualizerDemo', ASTVisualizerDemo)
+    app.component('CodeOptimizationDemo', CodeOptimizationDemo)
     app.component('CFNetworkLayers', CFNetworkLayers)
     app.component('CFSubnetCalculator', CFSubnetCalculator)
     app.component('CFTcpUdpComparison', CFTcpUdpComparison)
@@ -927,6 +966,7 @@ export default {
     app.component('AIvsTraditionalDemo', AIvsTraditionalDemo)
     app.component('CareerPathDemo', CareerPathDemo)
     app.component('LearningStrategyDemo', LearningStrategyDemo)
+    app.component('VibeCodingFlowDemo', VibeCodingFlowDemo)
     app.component('PowerOnDemo', PowerOnDemo)
     app.component('BootProcessDemo', BootProcessDemo)
     app.component('DesktopDemo', DesktopDemo)
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/compilers.md b/docs/zh-cn/appendix/1-computer-fundamentals/compilers.md
new file mode 100644
index 0000000..6ac43f0
--- /dev/null
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/compilers.md
@@ -0,0 +1,255 @@
+# 编译原理入门
+
+::: tip 前言
+**当你按下"运行"按钮，代码是怎么变成屏幕上的结果的？** 你写的每一行代码，计算机其实都"看不懂"——它只认识 0 和 1。编译器就是那个把人类语言翻译成机器语言的"翻译官"。理解编译原理，你就能理解报错信息从哪来、为什么有些语言快有些慢、以及代码优化的底层逻辑。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **全局视野**：掌握从源代码到可执行程序的完整编译流水线
+- **词法分析**：理解编译器如何把代码拆成一个个 Token
+- **语法分析**：理解 AST（抽象语法树）的构建过程
+- **AST 可视化**：直观看到代码的树形结构
+- **语义分析与优化**：理解类型检查和代码优化的原理
+- **优化技术实战**：掌握常量折叠、死代码消除等核心优化手段
+- **执行模型**：区分编译型、解释型和 JIT 三种执行方式
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 编译器是什么 | 翻译官类比、编译流水线 |
+| **第 2 章** | 词法分析 | Token、词法规则 |
+| **第 3 章** | 语法分析 | AST、语法树、优先级 |
+| **第 4 章** | AST 可视化 | 交互式语法树、节点类型 |
+| **第 5 章** | 语义分析与优化 | 类型检查、常量折叠、死代码消除 |
+| **第 6 章** | 优化技术实战 | 函数内联、循环外提、常量传播 |
+| **第 7 章** | 编译型 vs 解释型 vs JIT | 三种执行模型对比 |
+
+---
+
+## 0. 全景图：代码的"翻译之旅"
+
+想象你是一个翻译官，要把一本中文小说翻译成英文。你不会一个字一个字地直译，而是：
+
+1. **识别词语** — 把句子拆成一个个词（词法分析）
+2. **理解句法** — 判断句子结构是否正确（语法分析）
+3. **理解语义** — 确保意思通顺、没有矛盾（语义分析）
+4. **润色优化** — 让译文更地道流畅（代码优化）
+5. **输出译文** — 写出最终的英文版本（代码生成）
+
+编译器做的事情完全一样，只不过它翻译的是编程语言。
+
+<CompilerAnalogyDemo />
+
+---
+
+## 1. 编译器的六步流水线
+
+编译器的工作可以分为六个阶段，像工厂流水线一样，每个阶段处理完交给下一个阶段。
+
+<CompilerDemo />
+
+::: tip 编译流水线
+1. **词法分析（Lexical Analysis）**：把源代码拆成一个个 Token（单词）
+2. **语法分析（Syntax Analysis）**：把 Token 组织成语法树（AST）
+3. **语义分析（Semantic Analysis）**：检查类型是否正确、变量是否声明
+4. **中间代码生成（IR Generation）**：生成与平台无关的中间表示
+5. **代码优化（Optimization）**：让中间代码更高效
+6. **代码生成（Code Generation）**：生成目标平台的机器码
+:::
+
+| 阶段 | 输入 | 输出 | 类比 |
+|------|------|------|------|
+| 词法分析 | 源代码字符流 | Token 流 | 把句子拆成单词 |
+| 语法分析 | Token 流 | AST（语法树） | 分析句子结构 |
+| 语义分析 | AST | 带类型的 AST | 检查意思是否通顺 |
+| 中间代码 | 带类型的 AST | IR | 写出初稿 |
+| 代码优化 | IR | 优化后的 IR | 润色删减 |
+| 代码生成 | 优化后的 IR | 机器码 | 输出终稿 |
+
+---
+
+## 2. 词法分析：把代码拆成"单词"
+
+词法分析是编译的第一步。编译器从左到右扫描源代码的每个字符，把它们组合成有意义的**Token（词法单元）**。
+
+<LexerTokenDemo />
+
+就像读英文句子时，你的大脑会自动把字母组合成单词一样，词法分析器把字符组合成 Token：
+
+```
+源代码: let x = 10 + 5;
+
+Token 流:
+[let]   → 关键字（语言保留字）
+[x]     → 标识符（变量名）
+[=]     → 运算符（赋值）
+[10]    → 数字字面量
+[+]     → 运算符（加法）
+[5]     → 数字字面量
+[;]     → 分隔符（语句结束）
+```
+
+::: tip Token 的五大类型
+- **关键字**：语言保留的特殊单词，如 `let`、`if`、`return`、`function`
+- **标识符**：程序员定义的名字，如变量名、函数名
+- **字面量**：直接写在代码里的值，如数字 `42`、字符串 `"hello"`
+- **运算符**：执行运算的符号，如 `+`、`-`、`=`、`===`
+- **分隔符**：分隔代码结构的符号，如 `;`、`,`、`(`、`)`
+:::
+
+---
+
+## 3. 语法分析：构建语法树（AST）
+
+词法分析把代码拆成了 Token，但 Token 只是一个个孤立的"单词"。语法分析的任务是把这些 Token 按照语法规则组织成一棵**抽象语法树（Abstract Syntax Tree, AST）**——它反映了代码的结构和运算优先级。
+
+```
+表达式: 1 + 2 * 3
+
+语法树:        为什么这样？
+       +       因为 * 的优先级
+      / \      高于 +，所以
+     1   *     2 * 3 先结合
+        / \    成为一个子树
+       2   3
+```
+
+::: tip AST 的重要性
+AST 是编译器的"核心数据结构"，后续的语义分析、优化、代码生成都基于它进行。现代开发工具也大量使用 AST：
+- **ESLint**：解析代码为 AST，检查是否违反规则
+- **Prettier**：解析为 AST 后重新格式化输出
+- **Babel**：解析 AST → 转换 → 生成兼容代码
+- **IDE 重构**：基于 AST 进行安全的变量重命名、函数提取
+:::
+
+| 语法结构 | Token 序列 | AST 节点 |
+|---------|-----------|---------|
+| 变量声明 | `let` `x` `=` `10` | VariableDeclaration → Identifier + Literal |
+| 函数调用 | `add` `(` `1` `,` `2` `)` | CallExpression → Identifier + Arguments |
+| 条件语句 | `if` `(` `a` `>` `b` `)` | IfStatement → BinaryExpression + Block |
+
+---
+
+## 4. AST 可视化：看见代码的"骨架"
+
+上面我们用文字描述了 AST 的结构，但"看到"比"读到"更直观。下面的交互组件让你选择不同的表达式，实时观察它们的语法树长什么样。
+
+<ASTVisualizerDemo />
+
+通过可视化你会发现，AST 的核心规律其实很简单：
+
+| 代码结构 | AST 根节点 | 子节点 |
+|---------|-----------|-------|
+| `1 + 2 * 3` | BinaryExpression (+) | 左: NumericLiteral(1)，右: BinaryExpression(*) |
+| `let x = 10` | VariableDeclaration | VariableDeclarator → Identifier(x) + NumericLiteral(10) |
+| `add(a, b)` | CallExpression | Identifier(add) + Arguments(a, b) |
+
+::: tip AST 在日常开发中的应用
+你可能没直接写过编译器，但你每天都在用基于 AST 的工具：
+- **ESLint / Prettier**：解析代码为 AST，检查规则或重新格式化
+- **Babel / SWC**：解析 AST → 转换语法 → 生成兼容代码
+- **IDE 重构**：基于 AST 做安全的重命名、提取函数
+- **Tree-shaking**：分析 AST 中的 import/export，删除未使用的代码
+:::
+
+---
+
+## 5. 语义分析与代码优化
+
+语法分析确保代码"结构正确"，但结构正确不代表"意思正确"。语义分析负责检查代码的含义是否合法，代码优化则让程序跑得更快。
+
+<CompilationPracticeDemo />
+
+### 4.1 语义分析：检查"意思"对不对
+
+| 检查内容 | 示例 | 结果 |
+|---------|------|------|
+| 类型检查 | `int x = "hello"` | ❌ 类型不匹配 |
+| 作用域检查 | 使用未声明的变量 `y` | ❌ 变量不存在 |
+| 类型推断 | `1 + 2.0` | ✅ 推断结果为 float |
+| 参数检查 | `add(1, 2, 3)` 但函数只接受 2 个参数 | ❌ 参数数量不匹配 |
+
+::: tip 你见过的报错，大多来自语义分析
+- `TypeError: Cannot read properties of undefined` — 类型检查
+- `ReferenceError: x is not defined` — 作用域检查
+- `Expected 2 arguments, but got 3` — 参数检查
+:::
+
+### 4.2 代码优化：让程序更快
+
+编译器在生成最终代码前，会对中间代码做各种优化。这些优化对程序员透明，但能显著提升性能。
+
+| 优化技术 | 优化前 | 优化后 | 原理 |
+|---------|-------|-------|------|
+| 常量折叠 | `x = 10 + 5` | `x = 15` | 编译时直接算出结果 |
+| 死代码消除 | `if (false) { ... }` | 直接删除 | 永远不会执行的代码 |
+| 常量传播 | `x = 15; y = x * 2` | `y = 30` | 已知值直接替换 |
+| 循环不变量外提 | 循环内重复计算 `len = arr.length` | 提到循环外 | 避免重复计算 |
+
+---
+
+## 6. 优化技术实战：编译器如何让代码更快
+
+上面我们提到了几种优化技术的名字，现在来深入看看编译器具体是怎么做的。下面的交互组件展示了 5 种最常见的编译器优化，你可以直观对比优化前后的代码差异。
+
+<CodeOptimizationDemo />
+
+现代编译器和 JIT 引擎（如 V8、GCC、LLVM）会自动应用数十种优化。作为开发者，你不需要手动做这些优化，但理解它们能帮你：
+
+- **写出更容易被优化的代码**：比如用 `const` 而不是 `let`，编译器更容易做常量折叠
+- **理解性能差异**：为什么小函数比大函数快？因为编译器能内联它们
+- **避免"反优化"**：某些写法会阻止编译器优化，比如 `eval()` 和 `with`
+
+| 优化技术 | 触发条件 | 性能影响 | 开发者能做什么 |
+|---------|---------|---------|-------------|
+| 常量折叠 | 表达式中全是常量 | 消除运行时计算 | 多用 const 声明 |
+| 死代码消除 | 代码不可达或结果未使用 | 减小代码体积 | 及时清理无用代码 |
+| 循环不变量外提 | 循环内有不变的计算 | 减少重复计算 | 手动提取也是好习惯 |
+| 函数内联 | 小函数被频繁调用 | 消除调用开销 | 保持函数小而专注 |
+| 常量传播 | 变量值在编译时可确定 | 整条计算链被消除 | 用常量代替魔法数字 |
+
+---
+
+## 7. 编译型 vs 解释型 vs JIT
+
+代码写完后，有三种"翻译方式"让它运行起来。这三种方式各有优劣，直接决定了语言的性能特征和使用场景。
+
+<CompileVsInterpretDemo />
+
+| 维度 | 编译型 | 解释型 | JIT 即时编译 |
+|------|-------|-------|------------|
+| 过程 | 先全量编译成机器码，再执行 | 边读边执行，逐行翻译 | 先解释执行，热点代码再编译 |
+| 运行速度 | 最快 | 最慢 | 中等（热点接近编译型） |
+| 启动速度 | 慢（需要编译） | 快（直接运行） | 中等（需要预热） |
+| 跨平台 | 需要重新编译 | 天然跨平台 | 跨平台 |
+| 代表语言 | C, Rust, Go | Python, Ruby | JavaScript (V8), Java |
+
+::: tip 为什么 JavaScript 这么快？
+V8 引擎的 JIT 编译器会监测哪些代码被频繁执行（热点代码），然后把它们编译成高度优化的机器码。所以虽然 JavaScript 是"解释型语言"，但在 V8 中它的性能可以接近编译型语言。这也是 Node.js 能做服务端的底气。
+:::
+
+---
+
+## 总结
+
+编译原理不是只有编译器开发者才需要了解的知识。理解编译流程，能帮你更好地理解报错信息、选择合适的语言、写出更高效的代码。
+
+回顾本章的关键要点：
+
+1. **编译器是翻译官**：把人类可读的代码翻译成机器可执行的指令
+2. **六步流水线**：词法分析 → 语法分析 → 语义分析 → 中间代码 → 优化 → 代码生成
+3. **词法分析拆 Token**：把字符流拆成关键字、标识符、运算符等有意义的单元
+4. **语法分析建 AST**：按语法规则把 Token 组织成树形结构，反映运算优先级
+5. **语义分析保正确**：类型检查、作用域检查，你见过的大多数报错都来自这里
+6. **编译器自动优化**：常量折叠、死代码消除、函数内联等技术让代码自动变快
+7. **三种执行模型**：编译型最快、解释型最灵活、JIT 兼顾两者
+
+## 延伸阅读
+
+- [AST Explorer](https://astexplorer.net/) - 在线查看代码的 AST 结构
+- [Crafting Interpreters](https://craftinginterpreters.com/) - 从零实现一门编程语言（免费在线书）
+- [The Super Tiny Compiler](https://github.com/jamiebuilds/the-super-tiny-compiler) - 用 JavaScript 实现的超小编译器
+- [V8 Blog](https://v8.dev/blog) - V8 引擎的 JIT 编译技术博客
+- [LLVM 官网](https://llvm.org/) - 最流行的编译器基础设施
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/computer-organization.md b/docs/zh-cn/appendix/1-computer-fundamentals/computer-organization.md
new file mode 100644
index 0000000..c7f985c
--- /dev/null
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/computer-organization.md
@@ -0,0 +1,485 @@
+# 计算机组成原理
+
+::: tip 前言
+**从晶体管到 CPU 后，计算机如何组成完整系统？** 上一章我们从晶体管出发，构建了加法器、寄存器、运算单元，最终拼出了 CPU 核心。但仅有 CPU 是不够的——它需要和内存、I/O 设备协同工作，需要总线连接各个部件，需要指令系统来驱动。这一章我们将从 CPU 的内部视角转向整个计算机系统的视角，深入理解冯诺依曼架构、指令系统、存储层次、总线与 I/O 的专业原理。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **系统视角**：理解 CPU、内存、I/O 是如何协同工作的不再是孤立的硬件爱好者
+- **硬件专业术语**：掌握指令周期、流水线、CPI、缓存命中率等硬核概念
+- **性能思维**：理解计算机组成中的瓶颈与优化手段
+- **后续学习基础**：为操作系统、体系结构、嵌入式开发打下专业基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 冯诺依曼架构 | 存储程序、五大组成部件、数据通路 |
+| **第 2 章** | 指令系统 | 指令格式、寻址方式、CISC vs RISC |
+| **第 3 章** | CPU 控制器 | 控制单元、微操作、指令周期 |
+| **第 4 章** | 存储体系 | 缓存、主存、虚拟内存、分页机制 |
+| **第 5 章** | 总线与 I/O | 总线仲裁、DMA、中断机制 |
+
+---
+
+## 0. 全景图：计算机硬件系统
+
+在上一章"从晶体管到 CPU"中，我们已经理解了 CPU 内部是如何工作的——从取指、译码、执行到写回。但 CPU 本身只是一个执行单元，要让计算机真正"能用"，还需要一系列外围部件的配合。
+
+<CpuArchitectureDemo />
+
+::: tip 逐层解构：计算机硬件系统
+- **第一层：CPU 核心**
+  负责指令执行，包括控制单元（发出控制信号）和运算单元（执行算术逻辑运算）
+
+- **第二层：寄存器组**
+  CPU 内部的高速存储单元，包括通用寄存器和专用寄存器（PC、IR、MAR、MDR 等）
+
+- **第三层：主存储器**
+  用于存放程序和数据的内存，CPU 通过地址总线和数据总线访问
+
+- **第四层：I/O 设备**
+  输入输出设备通过 I/O 控制器与系统总线相连
+
+- **第五层：系统总线**
+  连接 CPU、内存、I/O 的数据通道，包括地址总线、数据总线、控制总线
+:::
+
+---
+
+## 1. 冯诺依曼架构：现代计算机的"宪法"
+
+### 1.1 存储程序原理
+
+1945 年，数学家约翰·冯·诺依曼（John von Neumann）提出了划时代的**存储程序（Stored-program）**架构思想。这一思想奠定了现代计算机的基础。
+
+::: tip 核心概念
+**存储程序**：程序本身作为一种特殊的数据，和普通数据一样存储在内存中。CPU 可以像读写数据一样读取并执行存储在内存中的程序指令。
+:::
+
+这意味着：
+- **早期计算机**：程序是固定布线实现的，改变程序需要重新焊接电路
+- **冯诺依曼架构**：程序存储在内存中，改变程序只需修改内存内容
+
+### 1.2 五大组成部件
+
+冯诺依曼架构将计算机划分为五个核心组成部分：
+
+<RegisterDemo />
+
+| 部件 | 英文 | 功能 | 主要组成 |
+|------|------|------|---------|
+| **运算器** | ALU (Arithmetic Logic Unit) | 执行算术和逻辑运算 | 加法器、移位器、比较器 |
+| **控制器** | CU (Control Unit) | 指挥协调各部件工作 | 指令寄存器、译码器、时序发生器 |
+| **存储器** | Memory | 存储程序和数据 | 内存地址寄存器(MAR)、内存数据寄存器(MDR) |
+| **输入设备** | Input | 信息输入 | 键盘、鼠标、扫描仪 |
+| **输出设备** | Output | 信息输出 | 显示器、打印机 |
+
+### 1.3 数据通路
+
+**数据通路（Data Path）**是数据在各个功能部件之间流动的路径。在 CPU 内部，数据通路连接了：
+
+- 寄存器组
+- 算术逻辑单元(ALU)
+- 内存数据寄存器(MDR)
+
+数据通路的宽度（一次能传输多少位）直接影响了计算机的性能。
+
+### 1.4 冯诺依曼瓶颈
+
+冯诺依曼架构有一个著名的**性能瓶颈**：
+
+> CPU 与内存之间的数据传输速度，远低于 CPU 的处理速度。
+
+这导致 CPU 经常处于"等待数据"的空闲状态。现代计算机的很多优化技术都是围绕这个问题展开的：
+
+| 优化技术 | 原理 |
+|---------|------|
+| **缓存(Cache)** | 在 CPU 附近放置小容量高速存储 |
+| **指令流水线** | 让多条指令同时处于不同阶段 |
+| **超标量** | 同一时钟周期发射多条指令 |
+| **多核并行** | 多个 CPU 核心分担计算任务 |
+
+---
+
+## 2. 指令系统：CPU 与软件的接口
+
+上一节我们知道了冯诺依曼架构的核心思想：**程序和数据一样存储在内存中**。但这引出了一个关键问题——存在内存里的"程序"到底长什么样？CPU 怎么读懂它？
+
+答案就是**指令系统（Instruction Set Architecture, ISA）**。如果把 CPU 比作一个服务，那指令系统就是它的 **API 文档**——它定义了 CPU 能听懂的所有命令、每条命令的格式、以及命令能操作的数据范围。你写的每一行代码，最终都会被编译器翻译成这套"API"的调用序列。
+
+### 2.1 从代码到指令：一行代码的翻译之旅
+
+我们先建立一个全局认知：你在编辑器里写的代码，和 CPU 实际执行的东西，中间隔了好几层翻译。
+
+<CodeToInstructionDemo />
+
+这个翻译链路是理解指令系统的关键：
+
+| 层次 | 内容 | 谁能看懂 |
+|------|------|---------|
+| 高级语言 | `int a = 10 + 5;` | 人类 |
+| 汇编语言 | `MOV R1, #10` / `ADD R3, R1, R2` | 人类（需要训练） |
+| 机器码 | `0001 0001 0000 1010` | CPU |
+
+::: tip 为什么要理解这个链路？
+- 看到编译报错时，你知道错误发生在"高级语言→汇编"这一步
+- 看到运行时崩溃时，你知道问题出在 CPU 执行指令的阶段
+- 理解性能优化时，你知道编译器在"翻译"过程中做了哪些优化
+- 选择 CPU 架构时（x86 vs ARM），你知道差异在于"指令集 API"不同
+:::
+
+### 2.2 一条指令长什么样？
+
+知道了代码会被翻译成指令，下一个问题是：**一条指令的内部结构是什么？**
+
+每条机器指令本质上就是一串二进制数字，但它有严格的内部格式。最核心的两个部分：
+
+- **操作码（Opcode）**：告诉 CPU「做什么」——是加法？跳转？还是读内存？
+- **操作数（Operand）**：告诉 CPU「对谁做」——哪个寄存器？哪个内存地址？什么常数？
+
+就像一句话有「动词 + 宾语」的结构，指令也有「操作 + 对象」的结构：
+
+```
+指令:  ADD  R3, R1, R2
+       ───  ──────────
+       操作码  操作数
+       (做加法) (R3 = R1 + R2)
+```
+
+根据操作数的数量，指令格式从简单到复杂分为四种：
+
+<InstructionFormatDemo />
+
+| 格式 | 结构 | 例子 | 使用场景 |
+|------|------|------|---------|
+| 零地址 | 只有操作码 | `RET`（返回） | 堆栈计算机，操作数隐含在栈顶 |
+| 一地址 | 操作码 + 1个地址 | `INC R1`（R1加1） | 单操作数运算 |
+| 二地址 | 操作码 + 2个地址 | `MOV R1, R2` | 最常用，数据传送和运算 |
+| 三地址 | 操作码 + 3个地址 | `ADD R3, R1, R2` | 不破坏源操作数 |
+
+::: tip 为什么有这么多格式？
+这是**空间和灵活性的权衡**。零地址指令最短（省内存），但需要额外的栈操作；三地址指令最灵活（不破坏源数据），但占用更多位数。不同 CPU 架构会选择不同的指令格式组合。
+:::
+
+### 2.3 CPU 怎么找到数据？——寻址方式
+
+指令告诉 CPU「做加法」，但加法的两个数在哪里？可能直接写在指令里，可能在寄存器里，也可能在内存的某个地址。**寻址方式**就是告诉 CPU「去哪里找操作数」的规则。
+
+用生活中「找人」来类比：
+
+| 寻址方式 | 类比 | 指令示例 | 说明 |
+|---------|------|---------|------|
+| **立即数寻址** | 人就站在你面前 | `MOV R1, #100` | 数据直接写在指令里，最快 |
+| **寄存器寻址** | 打内线电话找同事 | `MOV R1, R2` | 数据在 CPU 内部的寄存器里，很快 |
+| **直接寻址** | 知道门牌号，直接上门 | `MOV R1, [0x1000]` | 指令里写了内存地址 |
+| **间接寻址** | 问前台「张三在哪个房间」 | `MOV R1, [R2]` | 寄存器里存的是地址，要多查一次 |
+| **变址寻址** | 「3号楼 + 5层」算出房间 | `MOV R1, [R2+10]` | 基地址 + 偏移量，用于数组访问 |
+
+<AddressingModeDemo />
+
+::: tip 为什么需要这么多寻址方式？
+不同场景需要不同的「找数据」策略：
+- **常量赋值**（`x = 100`）→ 立即数寻址，数据就在指令里
+- **变量运算**（`a + b`）→ 寄存器寻址，数据已经加载到寄存器
+- **数组访问**（`arr[i]`）→ 变址寻址，基地址 + 下标偏移
+- **指针操作**（`*ptr`）→ 间接寻址，寄存器里存的是地址
+
+你写 `arr[i]` 时不会想到寻址方式，但编译器会自动选择最合适的方式。
+:::
+
+### 2.4 CPU 的能力清单——指令分类
+
+现在我们知道了指令的格式和寻址方式，最后一个问题：**CPU 到底能做哪些事？**
+
+所有指令可以归为六大类，它们覆盖了计算机能做的一切操作：
+
+| 类型 | 做什么 | 代表指令 | 对应你写的代码 |
+|------|-------|---------|-------------|
+| **数据传送** | 搬运数据 | MOV, LOAD, STORE | `let x = y`、函数传参 |
+| **算术运算** | 加减乘除 | ADD, SUB, MUL, DIV | `a + b`、`count++` |
+| **逻辑运算** | 位操作 | AND, OR, NOT, XOR | `flags & 0xFF`、权限判断 |
+| **移位操作** | 左移右移 | SHL, SHR | `x << 2`（等价于乘4） |
+| **控制转移** | 跳转和调用 | JMP, CALL, RET | `if`、`for`、函数调用 |
+| **输入输出** | 与外设通信 | IN, OUT | 读键盘、写屏幕 |
+
+::: tip 一个关键洞察
+你写的所有代码——不管多复杂的业务逻辑、多炫酷的 UI 动画——最终都会被拆解成这六类基本操作的组合。CPU 的"智能"不在于它能做多复杂的事，而在于它能以每秒几十亿次的速度执行这些简单操作。
+:::
+
+### 2.5 两种设计哲学：CISC vs RISC
+
+指令系统的设计有一个根本性的分歧：**是让每条指令尽可能强大，还是让每条指令尽可能简单？**
+
+这个分歧产生了两大阵营，直接影响了你今天用的每一台设备：
+
+<CISCvsRISCDemo />
+
+用一个类比来理解：
+- **CISC 像瑞士军刀**：一把刀集成了剪刀、开瓶器、螺丝刀……功能多但每个不一定最好用
+- **RISC 像专业工具套装**：每个工具只做一件事，但做得又快又好
+
+::: tip 为什么你的手机用 ARM、电脑用 x86？
+- **x86 (CISC)** 统治了 PC 和服务器市场 40 年，积累了庞大的软件生态。换架构意味着所有软件都要重新编译
+- **ARM (RISC)** 凭借低功耗优势统治了移动设备。手机电池小，每一毫瓦都很珍贵
+- **Apple Silicon** 证明了 RISC 也能做到高性能——M 系列芯片在性能和功耗上同时超越了 x86 对手
+- **RISC-V** 是开源的 RISC 架构，正在 IoT、教育、AI 芯片领域快速崛起
+:::
+
+---
+
+> **小结**：指令系统是连接软件和硬件的桥梁。你写的代码通过编译器翻译成指令，指令通过操作码和操作数告诉 CPU 做什么、对谁做，寻址方式决定了数据从哪里来。不同的指令集设计（CISC/RISC）决定了 CPU 的性能特征和适用场景。
+>
+> 现在我们知道了指令的「静态结构」——它长什么样、有哪些类型。下一个问题是：**CPU 内部是怎么一步步执行这些指令的？** 这就是控制器的工作。
+
+---
+
+## 3. 控制器：CPU 的"指挥中心"
+
+### 3.1 控制器的组成
+
+控制器是 CPU 的"大脑"，负责协调各部件按指令要求工作：
+
+<ControllerDemo />
+
+| 组件 | 功能 |
+|------|------|
+| **程序计数器 (PC)** | 存放下一条指令的地址 |
+| **指令寄存器 (IR)** | 存放当前正在执行的指令 |
+| **指令译码器** | 解析指令的操作码和操作数 |
+| **时序发生器** | 产生节拍信号，控制各部件时序 |
+| **微操作序列生成器** | 产生执行指令所需的一系列控制信号 |
+
+<PSWFlagDemo />
+
+### 3.2 指令周期
+
+CPU 执行一条指令需要经历一个完整的**指令周期**，通常包括：
+
+1. **取指周期 (Fetch)**: 从内存读取指令到 IR
+2. **译码周期 (Decode)**: 解析指令含义
+3. **执行周期 (Execute)**: 执行操作
+4. **访存周期 (Memory Access)**: 如果需要访存，访问内存
+5. **写回周期 (Write Back)**: 把结果写回寄存器或内存
+
+### 3.3 微操作
+
+**微操作**是控制信号驱动下的最基本操作。例如，"取指"这个阶段可以分解为以下微操作：
+
+| 节拍 | 微操作 | 控制信号 |
+|------|--------|---------|
+| T1 | PC → MAR | PCout, MARin |
+| T2 | MEM → MDR | MEMout, MDRin |
+| T3 | MDR → IR | MDRout, IRin |
+| T4 | PC + 1 → PC | PC+1, PCin |
+
+### 3.4 硬布线 vs 微程序控制器
+
+| 特性 | 硬布线控制器 | 微程序控制器 |
+|------|------------|-------------|
+| **实现方式** | 组合逻辑电路 | 微指令序列(固件) |
+| **速度** | 快 | 稍慢 |
+| **设计难度** | 复杂 | 较简单 |
+| **灵活性** | 差(改动需重新设计电路) | 好(修改微程序即可) |
+| **典型应用** | RISC 处理器 | CISC 处理器早期 |
+
+---
+
+## 4. 存储体系：为什么需要缓存？
+
+### 4.1 存储层次结构
+
+计算机的存储设备构成了一个金字塔结构：
+
+<StorageHierarchyDemo />
+
+| 层次 | 存储类型 | 访问时间 | 典型容量 | 位置 |
+|------|---------|---------|---------|------|
+| **寄存器** | SRAM | <1ns | 几 KB | CPU 内部 |
+| **L1 缓存** | SRAM | ~1ns | 32-64KB | CPU 核心附近 |
+| **L2 缓存** | SRAM | ~3-10ns | 256KB-1MB | CPU 芯片内 |
+| **L3 缓存** | SRAM | ~10-20ns | 2-16MB | CPU 芯片内/共享 |
+| **主存(内存)** | DRAM | ~50-100ns | 8-64GB | 主板上 |
+| **SSD** | Flash | ~10-100μs | 256GB-2TB | 主板上 |
+| **HDD** | 磁盘 | ~5-10ms | 1-10TB | 机箱内 |
+
+::: tip 速度差异的比喻
+如果把 CPU 访问 L1 缓存比作**从桌上拿一张纸**：
+- 访问内存 → 坐电梯去楼下便利店买纸
+- 访问 SSD → 开车去另一个城市买纸
+- 访问 HDD → 坐飞机去另一个国家买纸
+
+速度差异可达**上百万倍**！
+:::
+
+### 4.2 缓存原理
+
+**缓存(Cache)** 是位于 CPU 和内存之间的快速存储，其核心思想基于两个局部性原理：
+
+::: tip 局部性原理
+- **时间局部性**：如果一个数据刚被访问，它很可能很快又被访问
+- **空间局部性**：如果一个数据被访问，它附近的数据很可能也被访问
+:::
+
+#### 缓存的工作方式
+
+1. **命中(Hit)**：CPU 要的数据在缓存中，直接读取
+2. **缺失(Miss)**：数据不在缓存中，需要从内存加载
+
+```
+命中率 = 命中次数 / 总访问次数
+平均访问时间 = 命中率 × 缓存时间 + (1-命中率) × 内存时间
+```
+
+<CacheDemo />
+
+### 4.3 缓存映射方式
+
+| 方式 | 原理 | 优点 | 缺点 |
+|------|------|------|------|
+| **直接映射** | 每个内存块只能放到一个固定位置 | 简单快速 | 冲突率高 |
+| **组相联** | 每个内存块可以放到 N 个位置(N路) | 平衡速度与命中率 | 实现复杂 |
+| **全相联** | 任意位置 | 最低冲突率 | 实现困难(需要比较所有标签) |
+
+### 4.4 虚拟内存
+
+**虚拟内存**是操作系统提供的重要抽象：
+
+- 每个进程都认为自己拥有完整的虚拟地址空间
+- 操作系统负责把虚拟地址翻译成物理地址
+- 不常用的页面可以换出到磁盘(交换空间)
+
+::: tip 虚拟内存的比喻
+把虚拟内存想象成**酒店管理房间**：
+- 你(进程)以为整栋楼都是你的
+- 实际上酒店(OS)只给你分配当前需要的房间
+- 不住的房间会被"换出"到仓库(磁盘)
+- 需要的房间可以随时"换入"
+:::
+
+---
+
+## 5. 总线与 I/O：计算机的"血管"
+
+### 5.1 系统总线
+
+**总线(Bus)** 是连接计算机各部件的数据通道：
+
+<BusSystemDemo />
+
+| 总线类型 | 功能 | 方向 | 典型宽度 |
+|---------|------|------|---------|
+| **地址总线** | 传送内存地址 | 单向(CPU→内存) | 32位/64位 |
+| **数据总线** | 传送数据 | 双向 | 32位/64位 |
+| **控制总线** | 传送控制信号 | 双向 | 多个信号线 |
+
+### 5.2 总线仲裁
+
+当多个设备同时请求使用总线时，需要**仲裁**机制决定谁先使用：
+
+| 仲裁方式 | 说明 |
+|---------|------|
+| **集中仲裁** | 中央仲裁器统一决定 |
+| **分布式仲裁** | 各设备自行协商 |
+
+### 5.3 I/O 设备访问方式
+
+| 方式 | 原理 | 优点 | 缺点 |
+|------|------|------|------|
+| **程序查询** | CPU 轮询检查 I/O 状态 | 简单 | CPU 利用率低 |
+| **中断方式** | I/O 完成后主动通知 CPU | CPU 可并行工作 | 中断处理有开销 |
+| **DMA** | I/O 设备直接访问内存 | CPU 完全不参与 | 需要 DMA 控制器 |
+
+<IOMethodDemo />
+
+### 5.4 DMA 原理
+
+**DMA (Direct Memory Access，直接内存访问)** 允许 I/O 设备直接与内存交换数据：
+
+<NetworkOverviewDemo />
+
+- **无 DMA**：CPU 全程参与数据传送，CPU 无法做其他事
+- **有 DMA**：CPU 告诉 DMA 控制器"从哪里传到哪里、传多少"，然后去执行其他任务，DMA 完成后通知 CPU
+
+::: tip DMA 的比喻
+这就像**点外卖**：
+- **没有 DMA**：你亲自去超市买菜、回家、洗菜、炒菜（全过程参与）
+- **有 DMA**：你打电话下单，外卖小哥直接送到厨房（别人帮你搞定，你只需要最后"收货"）
+:::
+
+### 5.5 中断机制
+
+**中断**是计算机系统中非常重要的机制：
+
+1. I/O 设备完成操作后，向 CPU 发送**中断请求**
+2. CPU 正在执行指令，完成当前指令后响应中断
+3. CPU 保存当前状态，跳转到中断处理程序
+4. 处理完成后，恢复状态继续执行
+
+---
+
+## 6. CPU 性能优化：流水线技术
+
+### 6.1 指令流水线
+
+**指令流水线**是一种让 CPU 效率最大化的并行技术：
+
+<PipelineDemo />
+
+#### 流水线的工作原理
+
+```
+顺序执行（5条指令，15个周期）：
+指令1: IF→ID→EX→MEM→WB
+指令2:            IF→ID→EX→MEM→WB
+指令3:                         IF→ID→EX→MEM→WB
+...
+
+流水线执行（5条指令，9个周期）：
+指令1: IF→ID→EX→MEM→WB
+指令2:    IF→ID→EX→MEM→WB
+指令3:       IF→ID→EX→MEM→WB
+...
+```
+
+理想情况下，N 条指令的 CPI(每指令周期数) ≈ 1
+
+### 6.2 流水线冒险
+
+流水线虽然能提高性能，但也会带来**冒险(Hazard)** 问题：
+
+| 类型 | 原因 | 解决方案 |
+|------|------|---------|
+| **结构冒险** | 硬件资源冲突 | 增加硬件/错开执行 |
+| **数据冒险** | 后面的指令需要前面的结果 | 数据转发/气泡/调度 |
+| **控制冒险** | 跳转指令改变执行流 | 延迟槽/分支预测 |
+
+---
+
+## 7. 总结：计算机是如何"跑起来"的？
+
+让我们用专业术语串联整个流程：
+
+> **程序启动后，操作系统将可执行文件从磁盘加载到内存。CPU 的取指单元(IF)通过地址总线从内存读取指令到指令寄存器(IR)。控制器对指令进行译码(ID)，识别出操作类型后产生相应的控制信号。运算单元(EX)执行算术逻辑运算，如果需要访存则通过数据总线访问内存(MEM)，最后结果写回(WB)到寄存器或内存。整个过程由时钟驱动，控制器发出的微操作序列协调各部件有序工作。**
+
+---
+
+## 延伸阅读
+
+| 主题 | 推荐深入学习内容 |
+|------|-----------------|
+| 计算机体系结构 | 《计算机组成与设计：硬件/软件接口》- Patterson & Hennessy |
+| CPU 微架构 | 《深入理解计算机系统》- Bryant & O'Hallaron |
+| 指令集架构 | ARMv8 架构手册、Intel x64 手册 |
+| 缓存原理 | 缓存一致性协议(MESI)、缓存写策略 |
+| 操作系统 | 后续章节《操作系统》 |
+
+---
+
+## 下一步
+
+现在你已经掌握了计算机组成原理的专业知识。接下来可以继续学习：
+
+- **[操作系统](./operating-systems.md)**：了解程序是如何在操作系统上运行的，进程、线程、内存管理是如何实现的
+- **[数据的编码、存储与传输](./data-encoding-storage.md)**：深入理解数据在计算机中的表示方式
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md b/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md
index d6035c6..d215cec 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md
@@ -3,15 +3,22 @@
 ::: tip 前言
 你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
 
-这个过程涉及**硬件启动**、**操作系统加载**、**网络通信**等多个环节。理解这个过程，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
+这个过程就像一场**接力赛**——硬件通电后唤醒固件，固件检查完毕后交棒给操作系统，操作系统准备好环境后才能运行浏览器，浏览器再通过网络去远方的服务器取回网页。每一个环节都**依赖上一个环节的成功完成**，任何一棒掉链子，后面的步骤都无法进行。
+
+理解这条完整的链路，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
 :::
 
 **你会学到什么？**
 
-- 电脑从通电到显示桌面的完整过程
-- 操作系统是如何启动的
-- 浏览器是如何工作的
-- 当你访问一个 URL 时，网络请求是如何完成的
+这篇文章按照事件发生的真实顺序，带你走完从按下电源到看到网页的五个阶段：
+
+1. **硬件启动**（第 1 节）→ 电流如何唤醒 CPU
+2. **固件自检**（第 2 节）→ BIOS/UEFI 如何确认硬件正常并找到启动设备
+3. **操作系统启动**（第 3 节）→ 内核如何加载、桌面如何出现
+4. **浏览器启动**（第 4 节）→ 应用程序如何被操作系统运行起来
+5. **网络请求**（第 5 节）→ 从输入 URL 到页面渲染的完整网络之旅
+
+每一步都建立在前一步的基础上，缺一不可。
 
 ---
 
@@ -37,6 +44,12 @@ CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一
 
 ---
 
+> **接力第一棒完成** ⛳ 到这里，硬件层面的工作已经完成：电源把交流电转成了稳定的直流电，主板芯片组被唤醒并开始协调各部件，CPU 也完成了复位、清空了寄存器，准备好执行第一条指令。
+>
+> 但请注意——此刻的 CPU 就像一个"刚睁开眼的婴儿"。它虽然能执行指令，却对自己所在的环境一无所知：电脑里装了多少内存？显卡能不能用？硬盘在哪里？该从哪个设备启动操作系统？这些问题 CPU 自己回答不了。
+>
+> 所以，CPU 复位后执行的第一条指令，就是跳转到一个**固定的内存地址**——这个地址指向主板上焊死的 BIOS/UEFI 固件芯片。从这一刻起，控制权从纯硬件交到了固件手中。BIOS/UEFI 的任务很明确：**检查所有硬件是否正常，然后找到操作系统并把它启动起来**。这就是接力赛的第二棒。
+
 ## 2. BIOS/UEFI：硬件的自检
 
 ### 2.1 什么是 BIOS/UEFI？
@@ -83,6 +96,12 @@ BIOS/UEFI 会按照设定的**启动顺序**查找启动设备：
 
 ---
 
+> **接力第二棒完成** ⛳ BIOS/UEFI 圆满完成了它的三项使命：通过 POST 自检确认内存、显卡、键盘等硬件全部工作正常；初始化各硬件的工作模式；按照启动顺序找到了硬盘上的启动扇区。
+>
+> 但 BIOS/UEFI 的角色到此为止——它本质上是一个"体检医生 + 调度员"。它能检查硬件健不健康、能决定从哪个设备启动，但它不会管理你的文件，不会运行你的应用程序，也不会给你显示一个漂亮的桌面。这些复杂的任务，需要一个更强大的软件来接管——那就是**操作系统**。
+>
+> 交接的方式很具体：BIOS/UEFI 读取硬盘第一个扇区（启动扇区）里的引导程序代码，把它加载到内存中，然后让 CPU 跳转到这段代码开始执行。从这一刻起，控制权正式从固件交给了操作系统的引导程序。引导程序会一步步把操作系统内核加载进来，启动系统服务，最终呈现出你熟悉的桌面。这条链路中最复杂的一棒，开始了。
+
 ## 3. 操作系统启动：从内核到桌面
 
 ### 3.1 什么是操作系统？
@@ -176,6 +195,12 @@ BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
 
 ---
 
+> **接力第三棒完成** ⛳ 操作系统已经完全启动，桌面呈现在你眼前。回顾一下这一棒做了什么：引导程序从硬盘读取内核、内核接管了 CPU 和内存的控制权、系统服务逐个启动（网络、音频、安全中心……）、最后图形界面渲染出桌面。
+>
+> 此刻的操作系统就像一座已经通水通电、物业入驻的大楼——**进程管理**负责给每个住户（程序）分配房间，**内存管理**负责分配空间，**文件系统**负责管理仓库，**网络协议栈**负责对外通信。这些"公共服务"是所有应用程序运行的基础设施，没有它们，任何程序都无法启动。
+>
+> 现在你想上网，于是双击了桌面上的浏览器图标。这个简单的动作背后，操作系统要做一系列工作：查找浏览器的可执行文件在硬盘的哪个位置、为它创建一个独立的进程、分配内存空间、加载程序代码……这就是操作系统"进程管理"能力的直接体现。接下来，让我们看看浏览器是如何被启动起来的。
+
 ## 4. 打开浏览器：应用程序的启动
 
 ### 4.1 应用程序的启动过程
@@ -217,6 +242,12 @@ BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
 
 ---
 
+> **接力第四棒完成** ⛳ 浏览器已经成功启动。操作系统为它创建了独立的进程，分配了内存空间，浏览器自身的各个模块也已初始化完毕：渲染引擎准备好解析 HTML/CSS，JavaScript 引擎准备好执行脚本，网络模块准备好发送和接收数据。
+>
+> 你可以把此刻的浏览器想象成一辆已经发动的汽车——引擎在运转、仪表盘亮起、导航系统就绪，但车还停在原地，因为司机（你）还没有告诉它"去哪里"。浏览器窗口此刻是空白的，地址栏闪烁着光标，等待你的输入。
+>
+> 当你在地址栏敲入 `https://www.example.com` 并按下回车，一场跨越整个互联网的旅程就开始了。浏览器的网络模块会接管这个请求：先解析 URL 的结构，再通过 DNS 把域名翻译成 IP 地址，然后跨越网络与远方的服务器建立 TCP 连接，协商加密通道，发送 HTTP 请求，等待服务器响应，最后把收到的 HTML/CSS/JS 代码交给渲染引擎绘制成你看到的网页。这是整条接力链中步骤最多、涉及协议最丰富的一棒——也是 Web 开发者最需要理解的一段。
+
 ## 5. 访问 URL：网络请求的全过程
 
 ### 5.1 什么是 URL？
@@ -385,6 +416,12 @@ HTTP 响应格式：
 
 ---
 
+> **接力最后一棒完成** ⛳ 网页终于显示在你眼前了！回顾这最后一棒经历了多少环节：浏览器解析 URL 提取出协议和域名，通过 DNS 层层查询把域名翻译成 IP 地址，经过 TCP 三次握手与服务器建立可靠连接，再通过 TLS 握手建立加密通道，然后发送 HTTP 请求，服务器处理业务逻辑、查询数据库、组装响应数据返回，最后浏览器的渲染引擎把 HTML 解析成 DOM 树、CSS 计算成样式规则、两者合并成渲染树、计算布局、逐像素绘制到屏幕上。
+>
+> 现在，让我们把视角拉远，从头到尾审视这场接力赛的全貌。从按下电源键的那一刻算起：电流唤醒硬件（第 1 棒）→ 固件检查设备并找到启动盘（第 2 棒）→ 操作系统从内核到桌面完整启动（第 3 棒）→ 浏览器作为应用程序被操作系统运行起来（第 4 棒）→ 网络请求跨越互联网取回数据并渲染成页面（第 5 棒）。五棒环环相扣，每一棒都建立在前一棒的成果之上，缺少任何一个环节，你都无法看到眼前的这个网页。
+>
+> 接下来，让我们用一张完整的流程图把这五个阶段串在一起，直观地看看它们之间的依赖关系。
+
 ## 6. 完整流程回顾
 
 让我们把整个过程串起来：
@@ -415,6 +452,12 @@ HTTP 响应格式：
 
 ---
 
+> 看完整条链路，你会发现一个有趣的规律：每个阶段解决的问题完全不同，背后涉及的技术领域也截然不同。第 1 棒是**电子工程**的领域——电源转换、电路设计、信号传输；第 2 棒属于**固件编程**——用底层代码直接操控硬件；第 3 棒是**操作系统**的世界——进程调度、内存管理、文件系统，这是计算机科学的核心课题；第 4 棒涉及**应用开发**——如何设计一个像浏览器这样复杂的软件架构；第 5 棒则横跨**计算机网络**和**前端开发**——从 DNS、TCP/IP、HTTP 等网络协议，到 HTML/CSS/JS 的解析与渲染。
+>
+> 这也解释了为什么"全栈工程师"需要广泛的知识面：你写的每一行前端代码，最终都要经过这整条链路才能呈现给用户。理解链路中的每一环，能帮助你在遇到问题时快速定位——是网络层的问题？是服务器的问题？还是浏览器渲染的问题？
+>
+> 下面这张知识地图把这些技术领域梳理清楚，也为你后续的深入学习指明方向。
+
 ## 7. 知识地图
 
 这一章涉及的知识领域：
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers.md b/docs/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers.md
deleted file mode 100644
index 9ef69c5..0000000
--- a/docs/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers.md
+++ /dev/null
@@ -1,170 +0,0 @@
-# 类型系统与编译原理入门
-
-::: tip 前言
-当你写下 `int x = 10 + 5;` 时，编译器是如何理解每个字符、检查类型是否正确、最终生成机器指令的？本章用两个核心概念——**类型系统**和**编译流程**——帮你理解编程语言背后的"翻译机制"。
-:::
-
-**这篇文章会带你学什么？**
-
-学完这章后，你将获得：
-
-- **问题诊断能力**：看到 `TypeError` 报错时，能快速定位是类型不匹配还是隐式转换惹的祸
-- **语言选择依据**：理解为什么 TypeScript 适合大型项目、Python 适合快速原型开发
-- **类型安全思维**：在写代码时就预见可能的类型错误，而不是等到运行时才发现
-- **后续学习基础**：为编译原理、语言设计等高级话题打下基础
-
-| 章节 | 内容 | 核心概念 |
-|-----|------|---------|
-| **第 1 章** | 类型系统 | 静态/动态类型、强/弱类型 |
-| **第 2 章** | 编译流程 | 词法分析、语法分析、代码生成 |
-
----
-
-## 0. 想象你是翻译官
-
-翻译一本书，你需要：
-
-1. **识别单词** — 把句子拆成一个个单词（词法分析）
-2. **理解语法** — 判断句子是否符合语法规则（语法分析）
-3. **理解含义** — 确保句子意思正确，类型不冲突（语义分析）
-4. **优化表达** — 让句子更简洁流畅（代码优化）
-5. **翻译输出** — 翻译成目标语言（代码生成）
-
-**编译器就是编程语言的"翻译官"**，将你写的代码转换为机器能执行的指令。而**类型系统**就是翻译过程中的"语法检查器"——确保你不会把数字当文字用。
-
----
-
-## 1. 类型系统：数据的交通规则
-
-👇 动手点点看：探索四种类型系统的区别
-
-<TypeSystemDemo />
-
-::: tip 💡 一句话总结
-类型系统在两个维度上做选择：**何时检查**（编译时 vs 运行时）和**是否允许隐式转换**（强类型 vs 弱类型）。没有最好的组合，只有最适合的场景。
-:::
-
----
-
-### 1.1 静态类型 vs 动态类型
-
-| | 静态类型 | 动态类型 |
-|---|---|---|
-| **检查时机** | 编译时（还没运行就检查） | 运行时（跑到那行才检查） |
-| **发现 bug** | 早（写完就知道） | 晚（用户操作时才暴露） |
-| **灵活性** | 较低（类型固定） | 较高（类型可变） |
-| **IDE 支持** | 好（自动补全、重构） | 差（运行时才知道类型） |
-| **代表** | Java, TypeScript, Rust | Python, JavaScript, Ruby |
-
-### 1.2 强类型 vs 弱类型
-
-**核心区别**：`"1" + 1` 会发生什么？
-
-- **强类型（Python）**：直接报错 `TypeError` — "你得明确告诉我怎么转"
-- **弱类型（JavaScript）**：悄悄转成 `"11"` — "我猜你想拼字符串"
-
-弱类型的"好意"常常带来意想不到的 bug。
-
-### 1.3 类型推断：两全其美
-
-现代语言的类型推断让你**写着像动态语言，编译器检查像静态语言**：
-
-```typescript
-let x = 1           // 编译器自动推断为 number
-let arr = [1, 2, 3] // 推断为 number[]
-x = "hello"         // ❌ 编译错误！类型不匹配
-```
-
-你不用显式写类型声明，编译器也能帮你严格检查。
-
----
-
-## 2. 编译流程：从代码到机器码
-
-👇 动手点点看：输入代码，观察编译器的六步翻译过程
-
-<CompilerDemo />
-
-::: tip 💡 一句话总结
-编译器的六步流水线：源代码 → Token（词法分析）→ AST（语法分析）→ 带类型的 AST（语义分析）→ IR（中间代码）→ 优化后的 IR → 机器码。
-:::
-
----
-
-### 2.1 词法分析：拆出每个"单词"
-
-```
-源代码: int x = 10 + 5;
-
-Token 流:
-[int]   → 关键字
-[x]     → 标识符
-[=]     → 运算符
-[10]    → 数字
-[+]     → 运算符
-[5]     → 数字
-[;]     → 分隔符
-```
-
-### 2.2 语法分析：构建语法树（AST）
-
-```
-表达式: 1 + 2 * 3
-
-语法树:        为什么？
-       +       因为 * 的优先级
-      / \      高于 +，所以
-     1   *     2 * 3 先结合
-        / \
-       2   3
-```
-
-### 2.3 语义分析：检查"意思"是否正确
-
-| 检查内容 | 示例 | 结果 |
-|---|---|---|
-| 类型检查 | `int x = "hello"` | ❌ 类型不匹配 |
-| 作用域分析 | 使用未声明的变量 | ❌ 变量不存在 |
-| 类型推断 | `1 + 2.0` | ✅ 推断为 float |
-
-### 2.4 代码优化：让程序跑得更快
-
-| 优化技术 | 优化前 | 优化后 |
-|---|---|---|
-| 常量折叠 | `x = 10 + 5` | `x = 15` |
-| 死代码消除 | `if (false) { ... }` | 直接删除 |
-| 常量传播 | `y = x * 2`（x=15） | `y = 30` |
-
----
-
-## 3. 编译型 vs 解释型 vs JIT
-
-程序写完后，有三种"翻译方式"让它运行：
-
-| | 编译型 | 解释型 | JIT 即时编译 |
-|---|---|---|---|
-| **过程** | 先编译成机器码，再执行 | 边读边执行 | 先解释，热点代码再编译 |
-| **速度** | 最快 | 最慢 | 中等（热点代码接近编译型） |
-| **启动** | 慢（需编译） | 快（直接运行） | 中等（需预热） |
-| **跨平台** | 需要重新编译 | 天然跨平台 | 跨平台 |
-| **代表** | C, Rust, Go | Python, Ruby | Java, JavaScript (V8) |
-
-::: tip 💡 为什么 JavaScript 这么快？
-V8 引擎的 JIT 编译器会监测哪些代码被频繁执行（热点代码），然后把它们编译成高度优化的机器码。所以虽然 JavaScript 是"解释型语言"，但在 V8 中它的性能可以接近编译型语言。
-:::
-
----
-
-## 4. 总结
-
-::: tip 📚 核心要点
-1. **类型系统**：静态/动态决定检查时机，强/弱决定是否允许隐式转换
-2. **编译六步**：词法分析 → 语法分析 → 语义分析 → 中间代码 → 优化 → 代码生成
-3. **三种执行**：编译型快但需编译，解释型灵活但慢，JIT 兼顾两者
-4. **类型推断**：现代语言让你享受动态语言的简洁和静态语言的安全
-:::
-
-**下一步学习**：
-- [编程语言图谱](./programming-languages) - 了解更多编程语言
-- [数据结构](./data-structures) - 理解数据的组织方式
-- [算法思维入门](./algorithm-thinking) - 学习解决问题的方法
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/type-systems.md b/docs/zh-cn/appendix/1-computer-fundamentals/type-systems.md
new file mode 100644
index 0000000..bd1068b
--- /dev/null
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/type-systems.md
@@ -0,0 +1,211 @@
+# 类型系统入门
+
+::: tip 前言
+**为什么 `"1" + 1` 在 JavaScript 里得到 `"11"`，在 Python 里却直接报错？** 这背后就是类型系统在起作用。类型系统是编程语言的"交通规则"——它决定了数据能怎么用、能和谁运算、什么时候检查合不合法。理解类型系统，你就能理解不同语言的"性格差异"。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **分类能力**：掌握静态/动态、强/弱类型的四象限分类法
+- **问题诊断**：看到 `TypeError` 时能快速定位是类型不匹配还是隐式转换
+- **语言选择**：理解为什么 TypeScript 适合大型项目、Python 适合快速原型
+- **类型推断**：理解现代语言如何兼顾简洁和安全
+- **实践意识**：掌握类型安全的编码习惯
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 什么是类型系统 | 类型的本质、为什么需要类型 |
+| **第 2 章** | 静态类型 vs 动态类型 | 检查时机、IDE 支持、安全性 |
+| **第 3 章** | 强类型 vs 弱类型 | 隐式转换、类型安全 |
+| **第 4 章** | 类型推断 | 自动推断、两全其美 |
+| **第 5 章** | 泛型：写一次，适用所有类型 | 类型参数、类型约束、复用 |
+| **第 6 章** | 类型安全实战 | 常见陷阱、防御策略 |
+| **第 7 章** | 语言类型象限图 | 四象限分类、语言选择 |
+
+---
+
+## 0. 全景图：类型是数据的"身份证"
+
+在现实世界中，你不会把一本书塞进咖啡杯里——因为它们是不同"类型"的东西。编程世界也一样：数字、字符串、布尔值、数组……每种数据都有自己的"身份"，决定了它能参与什么运算。
+
+**类型系统**就是编程语言用来管理这些"身份"的规则体系。它回答两个核心问题：
+
+::: tip 类型系统的两个核心问题
+- **何时检查？** 是写代码时就检查（静态类型），还是运行时才检查（动态类型）？
+- **多严格？** 是严格禁止混用（强类型），还是自动帮你转换（弱类型）？
+:::
+
+---
+
+## 1. 什么是类型系统：数据的交通规则
+
+<TypeSystemDemo />
+
+类型系统的本质是一套**约束规则**，它告诉编译器或解释器：
+
+- 这个变量能存什么值？
+- 这两个值能不能做加法？
+- 这个函数的参数应该是什么？
+
+没有类型系统的世界就像没有交通规则的马路——任何数据都能和任何数据运算，结果完全不可预测。
+
+| 类型系统的作用 | 说明 | 例子 |
+|-------------|------|------|
+| 防止非法运算 | 阻止无意义的操作 | 不能对字符串做除法 |
+| 提供文档信息 | 类型就是最好的文档 | `function add(a: number, b: number)` 一目了然 |
+| 辅助 IDE 工具 | 自动补全、重构、跳转 | 输入 `user.` 自动提示所有属性 |
+| 优化性能 | 编译器知道类型后能生成更快的代码 | 知道是整数就用整数指令 |
+
+---
+
+## 2. 静态类型 vs 动态类型：什么时候检查？
+
+这是类型系统最重要的分类维度——**检查时机**。
+
+<StaticVsDynamicDemo />
+
+::: tip 核心区别
+- **静态类型**：变量的类型在编译时就确定了，写完代码、还没运行就能发现类型错误。代表：Java、TypeScript、Rust、Go。
+- **动态类型**：变量的类型在运行时才确定，同一个变量可以先存数字再存字符串。代表：Python、JavaScript、Ruby、PHP。
+:::
+
+| 维度 | 静态类型 | 动态类型 |
+|------|---------|---------|
+| 检查时机 | 编译时（还没运行就检查） | 运行时（跑到那行才检查） |
+| 发现 bug | 早（写完就知道） | 晚（用户操作时才暴露） |
+| 灵活性 | 较低（类型固定） | 较高（类型可变） |
+| IDE 支持 | 好（自动补全、重构） | 较弱（运行时才知道类型） |
+| 开发速度 | 前期慢（要写类型） | 前期快（不用管类型） |
+| 维护成本 | 低（类型即文档） | 高（缺少类型信息） |
+
+::: tip 趋势：动态语言在"静态化"
+Python 加了 Type Hints，JavaScript 社区转向 TypeScript——动态语言也在拥抱静态类型的好处。这说明在大型项目中，静态类型的安全性优势越来越被认可。
+:::
+
+---
+
+## 3. 强类型 vs 弱类型：允不允许"偷偷转换"？
+
+第二个分类维度是**类型转换的严格程度**。
+
+<StrongVsWeakDemo />
+
+::: tip 核心区别
+- **强类型**：不允许隐式类型转换，类型不匹配就报错。你必须显式地告诉语言"我要把字符串转成数字"。
+- **弱类型**：允许隐式类型转换，语言会"好心"帮你自动转。但这种"好心"经常带来意想不到的 bug。
+:::
+
+| 维度 | 强类型 | 弱类型 |
+|------|-------|-------|
+| `"1" + 1` | 报错或需显式转换 | 自动转换（可能得到 `"11"` 或 `2`） |
+| 安全性 | 高（不会悄悄出错） | 低（隐式转换可能导致 bug） |
+| 便利性 | 低（需要手动转换） | 高（自动转换省事） |
+| 可预测性 | 高（行为确定） | 低（转换规则复杂） |
+
+---
+
+## 4. 类型推断：两全其美的现代方案
+
+早期的静态类型语言（如 Java）要求你显式声明每个变量的类型，写起来很啰嗦。现代语言通过**类型推断**解决了这个问题——编译器自动推断类型，你不用写，但它帮你严格检查。
+
+<TypeInferenceFlowDemo />
+
+::: tip 类型推断的价值
+写着像动态语言一样简洁，编译器检查像静态语言一样严格。这是现代编程语言的主流方向。
+- **TypeScript**：`let x = 42` 自动推断为 `number`
+- **Rust**：`let v = vec![1, 2, 3]` 自动推断为 `Vec<i32>`
+- **Kotlin**：`val name = "Alice"` 自动推断为 `String`
+- **Go**：`x := 42` 短变量声明自动推断类型
+:::
+
+---
+
+## 5. 泛型：写一次，适用所有类型
+
+当你写了一个"取数组第一个元素"的函数，你会发现：数字数组要写一个、字符串数组要写一个、对象数组又要写一个……代码完全一样，只是类型不同。**泛型（Generics）**就是解决这个问题的——用一个"类型参数"代替具体类型，让一份代码适用于所有类型。
+
+<GenericTypeDemo />
+
+::: tip 泛型的核心价值
+- **代码复用**：一个函数/类适用于所有类型，不用重复写
+- **类型安全**：不像 `any` 那样放弃类型检查，泛型全程保持类型信息
+- **类型约束**：用 `extends` 限制泛型的范围，既灵活又安全
+:::
+
+| 泛型特性 | 说明 | 示例 |
+|---------|------|------|
+| 泛型函数 | 函数的参数/返回值使用类型参数 | `function first<T>(arr: T[]): T` |
+| 泛型类 | 类的属性/方法使用类型参数 | `class Box<T> { value: T }` |
+| 泛型约束 | 用 extends 限制 T 的范围 | `<T extends HasLength>` |
+| 多个类型参数 | 同时使用多个类型变量 | `function pair<K, V>(k: K, v: V)` |
+
+---
+
+## 6. 类型安全实战：常见陷阱与防御
+
+理论学完了，来看看实际开发中最容易踩的类型坑。这些陷阱不分语言，几乎每个开发者都会遇到。
+
+<TypeSafetyPracticeDemo />
+
+::: tip 类型安全的四条黄金法则
+1. **开启严格模式**：TypeScript 的 `strict: true`、Python 的 `mypy --strict`
+2. **避免 any**：用 `unknown` 代替 `any`，强制你做类型检查后再使用
+3. **显式处理 null**：用可选链 `?.` 和空值合并 `??` 安全访问
+4. **为 API 定义接口**：外部数据永远不可信，用接口 + 运行时校验双重保障
+:::
+
+| 陷阱 | 危险程度 | 防御手段 |
+|------|---------|---------|
+| null/undefined 引用 | ⭐⭐⭐⭐⭐ | strictNullChecks + 可选链 |
+| any 类型滥用 | ⭐⭐⭐⭐ | 用 unknown + 类型守卫 |
+| 隐式类型转换 | ⭐⭐⭐ | 严格比较 === + ESLint |
+| 数组类型不一致 | ⭐⭐⭐ | 显式声明数组元素类型 |
+
+---
+
+## 7. 语言类型象限图：给编程语言"画像"
+
+把"静态/动态"和"强/弱"两个维度组合起来，就得到了一个四象限分类图。每种编程语言都可以放进这个图里。
+
+<LanguageTypeModelDemo />
+
+| 象限 | 特点 | 代表语言 | 适用场景 |
+|------|------|---------|---------|
+| 静态 + 强类型 | 最安全，编译时严格检查 | Rust, Java, Haskell | 大型系统、安全关键 |
+| 静态 + 弱类型 | 编译时检查但允许隐式转换 | C, C++ | 系统编程、性能敏感 |
+| 动态 + 强类型 | 运行时检查，不允许隐式转换 | Python, Ruby | 脚本、快速原型 |
+| 动态 + 弱类型 | 最灵活，也最容易出 bug | JavaScript, PHP | Web 前端、小型脚本 |
+
+::: tip 没有"最好"的类型系统
+选择语言时，类型系统是重要考量因素之一：
+- **快速原型**：动态类型（Python）开发速度快
+- **大型项目**：静态类型（TypeScript、Java）维护成本低
+- **系统编程**：强类型 + 静态（Rust）安全性最高
+- **团队协作**：静态类型提供更好的代码可读性和 IDE 支持
+:::
+
+---
+
+## 总结
+
+类型系统是理解编程语言差异的关键视角。它不是枯燥的理论，而是直接影响你写代码的体验和代码的质量。
+
+回顾本章的关键要点：
+
+1. **类型是身份证**：每种数据都有类型，类型决定了数据能参与什么运算
+2. **静态 vs 动态**：何时检查类型——编译时还是运行时
+3. **强 vs 弱**：是否允许隐式类型转换
+4. **类型推断**：现代语言让你享受动态的简洁和静态的安全
+5. **泛型**：用类型参数实现代码复用，兼顾灵活性和类型安全
+6. **类型安全实战**：null 引用、any 滥用、隐式转换是最常见的类型陷阱
+7. **四象限分类**：没有最好的类型系统，只有最适合场景的选择
+
+## 延伸阅读
+
+- [TypeScript 官方文档](https://www.typescriptlang.org/docs/) - 最流行的静态类型 JavaScript 超集
+- [Python Type Hints](https://docs.python.org/3/library/typing.html) - Python 的类型提示系统
+- [Rust Book - Data Types](https://doc.rust-lang.org/book/ch03-02-data-types.html) - Rust 的类型系统入门
+- [Type Systems (Wikipedia)](https://en.wikipedia.org/wiki/Type_system) - 类型系统的学术概述
+- [What To Know Before Debating Type Systems](https://cdsmith.wordpress.com/2011/01/09/an-old-article-i-wrote/) - 关于类型系统的经典讨论
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack.md b/docs/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack.md
index 5fe63df..bfc8cd6 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack.md
@@ -33,19 +33,7 @@
 
 想象一下以前的软件开发：
 
-```
-传统开发流程：
-你 → 学习语法 → 写代码 → 调试 → 查文档 → 修改 → 运行
-        ↑___________________反复循环___________________↓
-```
-
-现在有了 AI 辅助：
-
-```
-Vibe Coding 流程：
-你 → 用自然语言描述需求 → AI 生成代码 → 你审核修改 → 运行
-              ↑____________快速迭代____________↓
-```
+<VibeCodingFlowDemo />
 
 **核心变化**：从"怎么写代码"变成"怎么描述需求"。
 
@@ -130,7 +118,7 @@ AI 能帮你写代码，但以下能力 AI 替代不了：
 
 <FrontendFrameworkDemo />
 
-**核心原因**：当页面变得复杂（比如淘宝、微信网页版），直接操作 DOM 会变得非常混乱。框架帮你"管理复杂性"。
+**核心原因**：当页面变得复杂（比如淘宝、微信网页版），直接用代码一个个操控页面元素会变得非常混乱。框架帮你"管理复杂性"。
 
 ### 2.4 前端工程师的一天
 
@@ -306,28 +294,30 @@ AI 能帮你写代码，但以下能力 AI 替代不了：
 ### 6.2 AI 工程师的技能树
 
 ```
-AI 算法工程师
+AI 工程师（2025）
     │
-    ├── 数学基础
-    │   ├── 线性代数（矩阵运算）
-    │   ├── 概率统计（分布、期望）
-    │   └── 微积分（梯度、优化）
-    │
-    ├── 编程能力
+    ├── 基础能力
     │   ├── Python（主力语言）
-    │   ├── PyTorch / TensorFlow（深度学习框架）
-    │   └── 数据处理（Pandas, NumPy）
+    │   ├── 数据处理（Pandas, NumPy）
+    │   └── 基本数学直觉（线性代数、概率统计）
     │
-    ├── 机器学习
-    │   ├── 监督学习（分类、回归）
-    │   ├── 无监督学习（聚类、降维）
-    │   └── 模型评估方法
+    ├── 大模型应用（最热门方向）
+    │   ├── Prompt Engineering（提示词工程）
+    │   ├── RAG（检索增强生成）
+    │   ├── AI Agent（智能体，让 AI 自主完成任务）
+    │   ├── Function Calling / MCP（让 AI 调用外部工具）
+    │   └── 微调与部署（LoRA, vLLM）
     │
-    └── 深度学习
-        ├── 神经网络基础
-        ├── CNN（图像）
-        ├── RNN / Transformer（序列）
-        └── 大模型（LLM）
+    ├── 生成式 AI（GenAI）
+    │   ├── 文本生成（GPT, Claude, Gemini）
+    │   ├── 图像生成（Stable Diffusion, Midjourney, FLUX）
+    │   ├── 视频生成（Sora, Kling）
+    │   └── 多模态（文本 + 图像 + 音频）
+    │
+    └── 传统机器学习（仍然重要）
+        ├── 监督学习（分类、回归）
+        ├── 深度学习框架（PyTorch）
+        └── 模型评估与优化
 ```
 
 ### 6.3 AI 工程师的一天