From 8078ee201c4719b8051706c77a6818890ad48fad Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Thu, 19 Feb 2026 10:54:31 +0800
Subject: [PATCH] fix: fix Vue template parsing errors in ReadingProgress and
 TerminalHandsOn components

- Remove special characters from comment in ReadingProgress.vue
- Fix multi-line @click handler in TerminalHandsOn.vue
- Add simplified network components (NetworkLayersSimple, TcpUdpSimple)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../theme/components/ReadingProgress.vue      |   3 +-
 .../NetworkLayersSimple.vue                   | 151 ++++++++++++
 .../computer-fundamentals/TcpUdpSimple.vue    | 223 ++++++++++++++++++
 .../terminal-intro/TerminalHandsOn.vue        |  12 +-
 4 files changed, 382 insertions(+), 7 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayersSimple.vue
 create mode 100644 docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue

diff --git a/docs/.vitepress/theme/components/ReadingProgress.vue b/docs/.vitepress/theme/components/ReadingProgress.vue
index a0f54aa..5e64c86 100644
--- a/docs/.vitepress/theme/components/ReadingProgress.vue
+++ b/docs/.vitepress/theme/components/ReadingProgress.vue
@@ -41,7 +41,8 @@ import { ref, onMounted, onUnmounted } from 'vue'
 const progress = ref(0)
 const showProgress = ref(false)
 const showArrow = ref(false)
-const circumference = 2 * Math.PI * 24 // 2πr，r=24
+// 圆周长 = 2 * PI * r, r=24
+const circumference = 2 * Math.PI * 24
 let scrollTimer: number | null = null
 
 // 拖拽相关状态
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayersSimple.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayersSimple.vue
new file mode 100644
index 0000000..27a9139
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayersSimple.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="network-layers-simple">
+    <div class="layers-stack">
+      <div
+        v-for="(layer, index) in layers"
+        :key="index"
+        :class="['layer-item', layer.type]"
+      >
+        <div class="layer-icon">
+          {{ layer.icon }}
+        </div>
+        <div class="layer-content">
+          <div class="layer-name">
+            {{ layer.name }}
+          </div>
+          <div class="layer-desc">
+            {{ layer.desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flow-arrow">↓ 数据从上往下逐层封装，就像给礼物层层包装</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const layers = ref([
+  {
+    name: '应用层 (HTTP, DNS)',
+    desc: '具体业务：浏览网页、发邮件',
+    icon: '📱',
+    type: 'application'
+  },
+  {
+    name: '传输层 (TCP, UDP)',
+    desc: '决定用可靠还是快速的方式传输',
+    icon: '📦',
+    type: 'transport'
+  },
+  {
+    name: '网络层 (IP)',
+    desc: '规划路线：走哪条路到达目的地',
+    icon: '🗺️',
+    type: 'network'
+  },
+  {
+    name: '数据链路层 (MAC)',
+    desc: '把数据装上"车"，准备运输',
+    icon: '🚚',
+    type: 'datalink'
+  },
+  {
+    name: '物理层 (网线、光纤)',
+    desc: '实际的物理传输：电信号、光信号',
+    icon: '🔌',
+    type: 'physical'
+  }
+])
+</script>
+
+<style scoped>
+.network-layers-simple {
+  margin: 20px 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+}
+
+.layers-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.layer-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.layer-item:hover {
+  transform: translateX(4px);
+}
+
+.layer-item.application {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.layer-item.transport {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.layer-item.network {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+}
+
+.layer-item.datalink {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+  color: white;
+}
+
+.layer-item.physical {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  color: white;
+}
+
+.layer-icon {
+  font-size: 32px;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.layer-content {
+  flex: 1;
+}
+
+.layer-name {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.layer-desc {
+  font-size: 14px;
+  opacity: 0.95;
+  line-height: 1.4;
+}
+
+.flow-arrow {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
new file mode 100644
index 0000000..b8def32
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="tcp-udp-simple">
+    <div class="comparison-container">
+      <div
+        :class="['protocol-card', { active: activeTab === 'tcp' }]"
+        @click="activeTab = 'tcp'"
+      >
+        <div class="card-header">
+          <span class="card-icon">📨</span>
+          <span class="card-title">TCP</span>
+          <span class="card-subtitle">可靠传输</span>
+        </div>
+        <div class="card-body">
+          <div class="feature">
+            <span class="feature-icon">✅</span>
+            <span>保证数据送达</span>
+          </div>
+          <div class="feature">
+            <span class="feature-icon">📞</span>
+            <span>需要先建立连接</span>
+          </div>
+          <div class="feature">
+            <span class="feature-icon">🐢</span>
+            <span>速度较慢</span>
+          </div>
+        </div>
+        <div class="card-example">网页浏览、邮件、文件下载</div>
+      </div>
+
+      <div class="vs-badge">VS</div>
+
+      <div
+        :class="['protocol-card', { active: activeTab === 'udp' }]"
+        @click="activeTab = 'udp'"
+      >
+        <div class="card-header">
+          <span class="card-icon">📮</span>
+          <span class="card-title">UDP</span>
+          <span class="card-subtitle">快速传输</span>
+        </div>
+        <div class="card-body">
+          <div class="feature">
+            <span class="feature-icon">⚡</span>
+            <span>速度极快</span>
+          </div>
+          <div class="feature">
+            <span class="feature-icon">🚀</span>
+            <span>不需要建立连接</span>
+          </div>
+          <div class="feature">
+            <span class="feature-icon">❓</span>
+            <span>可能丢包</span>
+          </div>
+        </div>
+        <div class="card-example">视频通话、在线游戏、直播</div>
+      </div>
+    </div>
+
+    <div class="analogy">
+      <div class="analogy-title">📦 生活类比</div>
+      <div class="analogy-content">
+        <div class="analogy-item">
+          <strong>TCP</strong> = 挂号信（要签收，丢了重发）
+        </div>
+        <div class="analogy-item">
+          <strong>UDP</strong> = 平信（直接扔信箱，不管丢没丢）
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('tcp')
+</script>
+
+<style scoped>
+.tcp-udp-simple {
+  margin: 20px 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+}
+
+.comparison-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  max-width: 700px;
+  margin: 0 auto 20px;
+  flex-wrap: wrap;
+}
+
+.protocol-card {
+  flex: 1;
+  min-width: 260px;
+  padding: 20px;
+  border: 2px solid #e0e0e0;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.protocol-card:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+}
+
+.protocol-card.active {
+  border-color: #667eea;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.card-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.card-title {
+  font-size: 24px;
+  font-weight: 700;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.card-subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.feature-icon {
+  font-size: 18px;
+}
+
+.card-example {
+  text-align: center;
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #666;
+}
+
+.vs-badge {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.analogy {
+  max-width: 700px;
+  margin: 20px auto 0;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #667eea;
+}
+
+.analogy-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 15px;
+}
+
+.analogy-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.analogy-item {
+  font-size: 14px;
+  color: #555;
+}
+
+@media (max-width: 640px) {
+  .comparison-container {
+    flex-direction: column;
+  }
+
+  .vs-badge {
+    width: 40px;
+    height: 40px;
+    font-size: 12px;
+  }
+
+  .protocol-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
index e7de28f..a83c0c1 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
@@ -69,12 +69,7 @@
                 <button
                   v-else-if="currentTask.expectedCmd"
                   class="copy-btn"
-                  @click="
-                    copyCommand(
-                      currentTask.expectedCmd[currentOS] ||
-                        currentTask.expectedCmd.common
-                    )
-                  "
+                  @click="copyCurrentTaskCommand"
                 >
                   复制命令
                 </button>
@@ -441,6 +436,11 @@ const copyCommand = (cmd) => {
   focusInput()
 }
 
+const copyCurrentTaskCommand = () => {
+  const cmd = currentTask.value.expectedCmd[currentOS.value] || currentTask.value.expectedCmd.common
+  copyCommand(cmd)
+}
+
 const focusInput = () => {
   if (cmdInput.value) {
     cmdInput.value.focus()