From 399913d3ff304f2940f73098a794ebd86dcf5c8b Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Fri, 20 Feb 2026 23:00:28 +0800
Subject: [PATCH] style: remove icon elements and related styles from demo
 components

Clean up visual presentation by removing decorative icons from demo headers and info boxes across all components. Also removes now-unused CSS rules for icon styling.
---
 .../components/appendix/computer-fundamentals/AdderDemo.vue | 4 ----
 .../appendix/computer-fundamentals/AlgorithmDemo.vue        | 4 ----
 .../computer-fundamentals/AlgorithmOverviewDemo.vue         | 3 ---
 .../computer-fundamentals/AlgorithmParadigmDemo.vue         | 2 --
 .../appendix/computer-fundamentals/ApplicationLayerDemo.vue | 2 --
 .../computer-fundamentals/CompilationPracticeDemo.vue       | 2 --
 .../appendix/computer-fundamentals/CompilerAnalogyDemo.vue  | 2 --
 .../appendix/computer-fundamentals/CompilerDemo.vue         | 4 ----
 .../appendix/computer-fundamentals/CpuArchitectureDemo.vue  | 4 ----
 .../computer-fundamentals/DataEncodingBasicsDemo.vue        | 2 --
 .../appendix/computer-fundamentals/DataLifecycleDemo.vue    | 2 --
 .../appendix/computer-fundamentals/DataLinkLayerDemo.vue    | 2 --
 .../appendix/computer-fundamentals/DataStructureDemo.vue    | 4 ----
 .../computer-fundamentals/DataStructureOverviewDemo.vue     | 2 --
 .../computer-fundamentals/DataStructureSelectorDemo.vue     | 3 ---
 .../appendix/computer-fundamentals/EncodingDemo.vue         | 4 ----
 .../EncodingStorageTransmissionDemo.vue                     | 2 --
 .../appendix/computer-fundamentals/FilesystemDemo.vue       | 4 ----
 .../appendix/computer-fundamentals/GraphStructureDemo.vue   | 2 --
 .../appendix/computer-fundamentals/GreedyThinkingDemo.vue   | 3 ---
 .../appendix/computer-fundamentals/HashTableDemo.vue        | 2 --
 .../computer-fundamentals/LanguageEvolutionDemo.vue         | 3 ---
 .../appendix/computer-fundamentals/LanguageMapDemo.vue      | 4 ----
 .../appendix/computer-fundamentals/LanguageScenarioDemo.vue | 2 --
 .../computer-fundamentals/LanguageTypeModelDemo.vue         | 2 --
 .../appendix/computer-fundamentals/LinearStructuresDemo.vue | 2 --
 .../appendix/computer-fundamentals/LogicGateDemo.vue        | 6 +-----
 .../appendix/computer-fundamentals/MemoryDemo.vue           | 4 ----
 .../appendix/computer-fundamentals/NetworkLayers.vue        | 5 -----
 .../appendix/computer-fundamentals/NetworkOverviewDemo.vue  | 2 --
 .../appendix/computer-fundamentals/NetworkPrincipleDemo.vue | 2 --
 .../appendix/computer-fundamentals/OSSystemOverviewDemo.vue | 2 --
 .../appendix/computer-fundamentals/PhysicalLayerDemo.vue    | 2 --
 .../appendix/computer-fundamentals/ProcessDemo.vue          | 4 ----
 .../computer-fundamentals/ProcessMemoryFilesystemDemo.vue   | 2 --
 .../ProgrammingLanguageComparisonDemo.vue                   | 2 --
 .../computer-fundamentals/ProgrammingParadigmDemo.vue       | 2 --
 .../computer-fundamentals/RecursiveThinkingDemo.vue         | 2 --
 .../appendix/computer-fundamentals/SearchAlgorithmDemo.vue  | 2 --
 .../appendix/computer-fundamentals/SortingAlgorithmDemo.vue | 2 --
 .../appendix/computer-fundamentals/StorageDemo.vue          | 4 ----
 .../appendix/computer-fundamentals/StorageHierarchyDemo.vue | 2 --
 .../appendix/computer-fundamentals/SubnetCalculator.vue     | 4 ----
 .../appendix/computer-fundamentals/TcpUdpComparison.vue     | 4 ----
 .../appendix/computer-fundamentals/TcpUdpSimple.vue         | 1 -
 .../appendix/computer-fundamentals/TransistorDemo.vue       | 4 ----
 .../appendix/computer-fundamentals/TransmissionDemo.vue     | 4 ----
 .../appendix/computer-fundamentals/TransportLayerDemo.vue   | 2 --
 .../appendix/computer-fundamentals/TreeStructureDemo.vue    | 2 --
 .../appendix/computer-fundamentals/TypeSystemDemo.vue       | 5 -----
 50 files changed, 1 insertion(+), 142 deletions(-)

diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
index 389acad..bffe280 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="adder-demo">
     <div class="demo-header">
-      <span class="icon">➕</span>
       <span class="title">加法器：用逻辑门做加法</span>
       <span class="subtitle">从逻辑门到算术运算</span>
     </div>
@@ -80,7 +79,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>加法器用全加器级联实现。每个全加器处理一位，产生"和"与"进位"。进位传递给下一位，就像我们手算加法一样。
     </div>
   </div>
@@ -159,7 +157,6 @@ const stages = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -311,5 +308,4 @@ const stages = [
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
index 312104a..56bd51e 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="algorithm-demo">
     <div class="demo-header">
-      <span class="icon">🎯</span>
       <span class="title">算法思维：解决问题的方法</span>
       <span class="subtitle">不同策略解决不同类型的问题</span>
     </div>
@@ -226,7 +225,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>算法是解决问题的方法。好的算法能让程序效率提升几个数量级。理解算法思维，比记住具体算法更重要。
     </div>
   </div>
@@ -377,7 +375,6 @@ const complexities = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -636,5 +633,4 @@ const complexities = [
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue
index 9aa3a9e..b6265dd 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="algorithm-overview-demo">
     <div class="demo-header">
-      <span class="icon">🧮</span>
       <span class="title">算法思维入门</span>
       <span class="subtitle">解决问题的一套步骤和方法</span>
     </div>
@@ -119,7 +118,6 @@
           <div class="tip-desc">不同场景反复应用同一算法</div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">⚡</div>
           <div class="tip-title">分析优化</div>
           <div class="tip-desc">思考时间和空间复杂度，寻找优化方案</div>
         </div>
@@ -232,7 +230,6 @@ const currentCategory = computed(() => categories.find(c => c.id === activeCateg
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
index 8aaf089..fbb203d 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="algorithm-paradigm-demo">
     <div class="demo-header">
-      <span class="icon">🔧</span>
       <span class="title">算法设计范式</span>
       <span class="subtitle">解决问题的常用套路</span>
     </div>
@@ -236,7 +235,6 @@ const currentParadigm = computed(() => paradigms.find(p => p.id === activeParadi
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
index f3e41a3..6e3e7fd 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="application-layer-demo">
     <div class="demo-header">
-      <span class="icon">🌍</span>
       <span class="title">应用层：为你服务的各种协议</span>
       <span class="subtitle">HTTP、DNS、DHCP 等协议如何工作</span>
     </div>
@@ -269,7 +268,6 @@ const currentProtocol = computed(() => protocolDetails[activeProtocol.value])
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
index a24f472..edf9838 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="compilation-practice-demo">
     <div class="demo-header">
-      <span class="icon">⚙️</span>
       <span class="title">编译过程实践</span>
       <span class="subtitle">从代码到可执行文件</span>
     </div>
@@ -148,7 +147,6 @@ const outputFiles = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
index 47ded51..ecce550 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="compiler-analogy-demo">
     <div class="demo-header">
-      <span class="icon">🌐</span>
       <span class="title">编译原理：翻译的艺术</span>
       <span class="subtitle">如何把代码翻译成机器指令</span>
     </div>
@@ -197,7 +196,6 @@ const tokens = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
index 8ea3c96..4f6cff3 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="compiler-demo">
     <div class="demo-header">
-      <span class="icon">⚙️</span>
       <span class="title">编译器工作流程</span>
       <span class="subtitle">从源代码到机器码的旅程</span>
     </div>
@@ -174,7 +173,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>编译器将人类可读的源代码转换为机器可执行的指令。主要阶段包括词法分析、语法分析、语义分析、中间代码生成、优化和目标代码生成。
     </div>
   </div>
@@ -363,7 +361,6 @@ const executionModels = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -670,5 +667,4 @@ code {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
index b18e807..e3f4a08 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="cpu-arch-demo">
     <div class="demo-header">
-      <span class="icon">🖥️</span>
       <span class="title">CPU 架构全貌</span>
       <span class="subtitle">从门电路到处理器</span>
     </div>
@@ -56,7 +55,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>CPU是层次化构建的：晶体管→逻辑门→功能单元→处理器。每一层都是下一层的"积木"，最终形成能执行程序的"大脑"。
     </div>
   </div>
@@ -122,7 +120,6 @@ const components = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -252,5 +249,4 @@ const components = [
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
index e2fa3b0..e9ee997 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="data-encoding-basics-demo">
     <div class="demo-header">
-      <span class="icon">🔤</span>
       <span class="title">数据编码基础</span>
       <span class="subtitle">信息如何被表示和存储</span>
     </div>
@@ -125,7 +124,6 @@
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
index 8fa8072..43f3de4 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="data-lifecycle-demo">
     <div class="demo-header">
-      <span class="icon">🔄</span>
       <span class="title">数据的生命周期</span>
       <span class="subtitle">从输入到存储到传输到输出的全过程</span>
     </div>
@@ -185,7 +184,6 @@ const keyPoints = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
index e00c308..3aa8a99 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="data-link-demo">
     <div class="demo-header">
-      <span class="icon">🔗</span>
       <span class="title">数据链路层：帧的传递</span>
       <span class="subtitle">MAC 地址如何定位设备</span>
     </div>
@@ -195,7 +194,6 @@ const transferSteps = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
index c2bae70..23216ca 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="data-structure-demo">
     <div class="demo-header">
-      <span class="icon">📦</span>
       <span class="title">数据结构：数据的"容器"</span>
       <span class="subtitle">不同场景选择不同的存储方式</span>
     </div>
@@ -281,7 +280,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>数据结构是数据的"容器"，不同的容器有不同的特点。选择合适的数据结构，能让程序效率提升几个数量级。
     </div>
   </div>
@@ -384,7 +382,6 @@ const treeData = ref({
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -654,5 +651,4 @@ th {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
index 83d09c1..21bcc6b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="ds-overview-demo">
     <div class="demo-header">
-      <span class="icon">🏗️</span>
       <span class="title">数据结构全景图</span>
       <span class="subtitle">不同场景选择不同的数据组织方式</span>
     </div>
@@ -279,7 +278,6 @@ const currentCategory = computed(() => categories.find(c => c.id === activeCateg
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
index 40394b2..dd2ead3 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="ds-selector-demo">
     <div class="demo-header">
-      <span class="icon">🎯</span>
       <span class="title">如何选择合适的数据结构？</span>
       <span class="subtitle">根据场景需求做出最佳选择</span>
     </div>
@@ -25,7 +24,6 @@
     <!-- 推荐结果 -->
     <div v-if="activeScenario" class="recommendation">
       <div class="rec-header">
-        <span class="rec-icon">💡</span>
         <span class="rec-title">推荐使用：{{ currentScenario.recommendation }}</span>
       </div>
 
@@ -233,7 +231,6 @@ const currentScenario = computed(() => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
index 4ed7b52..6ab4721 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="encoding-demo">
     <div class="demo-header">
-      <span class="icon">🔢</span>
       <span class="title">数字编码：用 0 和 1 表示一切</span>
       <span class="subtitle">字符、数字、图像如何变成二进制</span>
     </div>
@@ -67,7 +66,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>所有数据最终都要变成 0 和 1。不同类型的数据用不同的编码规则：字符用 ASCII/Unicode，数字用二进制，图像用像素值。
     </div>
   </div>
@@ -139,7 +137,6 @@ const byteCount = computed(() => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -273,5 +270,4 @@ const byteCount = computed(() => {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
index 24b78b2..3da45b1 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="est-demo">
     <div class="demo-header">
-      <span class="icon">🔗</span>
       <span class="title">编码、存储与传输的协作</span>
       <span class="subtitle">三大系统如何协同处理数据</span>
     </div>
@@ -348,7 +347,6 @@ const currentScenario = computed(() => scenarioData[activeScenario.value])
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
index 88d290b..93ec518 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="filesystem-demo">
     <div class="demo-header">
-      <span class="icon">📁</span>
       <span class="title">文件系统：数据的"档案柜"</span>
       <span class="subtitle">操作系统如何组织和管理文件</span>
     </div>
@@ -86,7 +85,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>文件系统用"目录树"组织文件，用"inode"记录文件元数据。文件名只是给人看的，系统通过 inode 编号找到真正的数据。
     </div>
   </div>
@@ -137,7 +135,6 @@ const selectItem = (item) => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -303,5 +300,4 @@ const selectItem = (item) => {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
index 44e7869..6be7d35 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="graph-structure-demo">
     <div class="demo-header">
-      <span class="icon">🕸️</span>
       <span class="title">图结构：复杂关系的表示</span>
       <span class="subtitle">节点和边的网络</span>
     </div>
@@ -175,7 +174,6 @@ const averageDegree = computed(() => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
index c825692..17b62a5 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
@@ -1,14 +1,12 @@
 <template>
   <div class="greedy-thinking-demo">
     <div class="demo-header">
-      <span class="icon">🎯</span>
       <span class="title">贪心算法：每步都选当前最优</span>
       <span class="subtitle">局部最优 → 全局最优?</span>
     </div>
 
     <div class="core-idea">
       <div class="idea-box">
-        <div class="idea-icon">💡</div>
         <div class="idea-text">
           贪心算法在每一步选择中都采取当前状态下<strong>最优</strong>的选择<br>
           希望通过一系列局部最优选择达到<strong>全局最优</strong>
@@ -214,7 +212,6 @@ const selectedCount = computed(() => activities.filter(a => a.selected).length)
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
index 0b0504f..31d7acf 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="hash-table-demo">
     <div class="demo-header">
-      <span class="icon">🗂️</span>
       <span class="title">哈希表：超快的查找</span>
       <span class="subtitle">通过关键词直接找到数据</span>
     </div>
@@ -175,7 +174,6 @@ initData()
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
index 7b9e668..32f4817 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="language-evolution-demo">
     <div class="demo-header">
-      <span class="icon">📜</span>
       <span class="title">编程语言的演化</span>
       <span class="subtitle">从机器语言到高级语言</span>
     </div>
@@ -90,7 +89,6 @@
           <div class="trend-desc">类型系统、内存管理等安全机制</div>
         </div>
         <div class="trend-card">
-          <div class="trend-icon">⚡</div>
           <div class="trend-title">越来越高效</div>
           <div class="trend-desc">编译器优化、JIT 技术提升性能</div>
         </div>
@@ -234,7 +232,6 @@ const currentEra = computed(() => eras[activeEra.value])
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
index ad89abd..45a1db1 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="language-map-demo">
     <div class="demo-header">
-      <span class="icon">🗺️</span>
       <span class="title">编程语言图谱：语言的演化</span>
       <span class="subtitle">从机器语言到现代语言</span>
     </div>
@@ -125,7 +124,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>编程语言是人类与计算机沟通的桥梁。不同的语言有不同的设计哲学，适合解决不同类型的问题。选择语言时，要考虑问题领域、团队熟悉度、生态系统等因素。
     </div>
   </div>
@@ -229,7 +227,6 @@ const languageComparison = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -444,5 +441,4 @@ th {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
index fa4d5a5..f360ca2 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="language-scenario-demo">
     <div class="demo-header">
-      <span class="icon">🎬</span>
       <span class="title">为什么需要编程语言？</span>
       <span class="subtitle">从场景看编程语言的价值</span>
     </div>
@@ -231,7 +230,6 @@ const currentScenario = computed(() => scenarios.find(s => s.id === activeScenar
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
index 3a5b0dd..f5c689d 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="language-type-model-demo">
     <div class="demo-header">
-      <span class="icon">🏗️</span>
       <span class="title">编程语言的类型模型</span>
       <span class="subtitle">不同语言的类型系统差异</span>
     </div>
@@ -112,7 +111,6 @@ const dimensions = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
index 3c2b79f..56d881e 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="linear-structures-demo">
     <div class="demo-header">
-      <span class="icon">📚</span>
       <span class="title">线性结构的四种形态</span>
       <span class="subtitle">数组、链表、栈、队列的区别</span>
     </div>
@@ -281,7 +280,6 @@ const dequeue = () => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
index cba3ead..564c273 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="logic-gate-demo">
     <div class="demo-header">
-      <span class="icon">🔌</span>
       <span class="title">逻辑门：用开关做运算</span>
       <span class="subtitle">晶体管组合成基本运算单元</span>
     </div>
@@ -213,7 +212,7 @@
               <tr
                 v-for="row in currentTruthTable"
                 :key="row.a + '-' + row.b" 
-                :class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }"
+                :class="{ highlight: row.a === (inputA ? 1 : 0) && (activeGate === 'NOT' || row.b === (inputB ? 1 : 0)) }"
               >
                 <td>{{ row.a }}</td>
                 <td>{{ row.b }}</td>
@@ -235,7 +234,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>逻辑门用晶体管的"开关"组合实现基本运算。AND门像"串联开关"(两个都开才通)，OR门像"并联开关"(任一个开就通)。
     </div>
   </div>
@@ -324,7 +322,6 @@ const currentTruthTable = computed(() => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -500,5 +497,4 @@ tr.highlight {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
index ffd2f5b..a1348c5 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="memory-demo">
     <div class="demo-header">
-      <span class="icon">🧠</span>
       <span class="title">内存管理：程序的"工作台"</span>
       <span class="subtitle">操作系统如何分配和管理内存</span>
     </div>
@@ -75,7 +74,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>虚拟内存让每个进程都以为自己独占整个内存空间，实际由操作系统统一管理和映射，实现隔离和保护。
     </div>
   </div>
@@ -136,7 +134,6 @@ const usedMemory = computed(() => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -296,5 +293,4 @@ const usedMemory = computed(() => {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
index 2661672..90ac0c9 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="network-layers-demo">
     <div class="demo-header">
-      <span class="icon">🌐</span>
       <span class="title">网络五层模型</span>
       <span class="subtitle">从应用到物理的数据封装过程</span>
     </div>
@@ -93,7 +92,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>分层设计让网络协议模块化，每层只关心自己的职责。数据从应用层向下传递时，每层都会添加自己的"信封"(头部)，接收时再逐层拆开。
     </div>
   </div>
@@ -179,7 +177,6 @@ const encapsulation = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -387,8 +384,6 @@ const encapsulation = [
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
-
 @media (max-width: 640px) {
   .demo-content {
     grid-template-columns: 1fr;
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
index 437dcc1..30a6960 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="network-overview-demo">
     <div class="demo-header">
-      <span class="icon">🌐</span>
       <span class="title">网络是怎么连接的</span>
       <span class="subtitle">从发送到接收的完整过程</span>
     </div>
@@ -202,7 +201,6 @@ const protocolLayers = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
index 528dae6..bce4611 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="network-principle-demo">
     <div class="demo-header">
-      <span class="icon">🌐</span>
       <span class="title">网络基本原理</span>
       <span class="subtitle">数据如何在网络中传输</span>
     </div>
@@ -107,7 +106,6 @@ const principles = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
index d7d7bad..f835c0d 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="os-overview-demo">
     <div class="demo-header">
-      <span class="icon">🎛️</span>
       <span class="title">操作系统：计算机的"大管家"</span>
       <span class="subtitle">让多个程序和谐共处的艺术</span>
     </div>
@@ -162,7 +161,6 @@ const getActiveAppDesc = () => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
index ae30c18..d734bf0 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="physical-layer-demo">
     <div class="demo-header">
-      <span class="icon">⚡</span>
       <span class="title">物理层：电信号的传递</span>
       <span class="subtitle">比特如何通过物理介质传输</span>
     </div>
@@ -199,7 +198,6 @@ const currentMedia = computed(() => mediaData[activeMedia.value])
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
index 5d3db90..1caec59 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="process-demo">
     <div class="demo-header">
-      <span class="icon">🔄</span>
       <span class="title">进程：程序的"分身术"</span>
       <span class="subtitle">一个程序如何同时运行多个实例</span>
     </div>
@@ -82,7 +81,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>进程是程序的"运行实例"。同一个程序可以启动多个进程，每个进程有独立的内存空间，互不干扰。
     </div>
   </div>
@@ -129,7 +127,6 @@ const memorySegments = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -272,5 +269,4 @@ const memorySegments = [
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
index d91a3e9..d56665b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="pmf-collab-demo">
     <div class="demo-header">
-      <span class="icon">🤝</span>
       <span class="title">进程、内存、文件系统的协作</span>
       <span class="subtitle">三大管理模块如何协同工作</span>
     </div>
@@ -242,7 +241,6 @@ const getIcon = (type) => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
index 198b2c3..a744aeb 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="programming-language-comparison-demo">
     <div class="demo-header">
-      <span class="icon">⚖️</span>
       <span class="title">编程语言对比</span>
       <span class="subtitle">不同语言的特点和适用场景</span>
     </div>
@@ -217,7 +216,6 @@ const currentLang = computed(() => languages.find(l => l.name === activeLang.val
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
index 49990b3..e891f18 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="programming-paradigm-demo">
     <div class="demo-header">
-      <span class="icon">🎨</span>
       <span class="title">编程范式</span>
       <span class="subtitle">不同的编程思维方式</span>
     </div>
@@ -193,7 +192,6 @@ const currentParadigm = computed(() => paradigms.find(p => p.id === activeParadi
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
index b6990c1..2cab48f 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="recursive-thinking-demo">
     <div class="demo-header">
-      <span class="icon">🔄</span>
       <span class="title">递归思维：自己调用自己</span>
       <span class="subtitle">把大问题分解成相同的小问题</span>
     </div>
@@ -190,7 +189,6 @@ const examples = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
index eb4d413..0be3f1c 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="search-algorithm-demo">
     <div class="demo-header">
-      <span class="icon">🔍</span>
       <span class="title">查找算法</span>
       <span class="subtitle">如何在数据中找到目标</span>
     </div>
@@ -186,7 +185,6 @@ const resetBinary = () => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
index de85455..a638be9 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="sorting-algorithm-demo">
     <div class="demo-header">
-      <span class="icon">📊</span>
       <span class="title">排序算法</span>
       <span class="subtitle">把数据按顺序排列</span>
     </div>
@@ -197,7 +196,6 @@ const partition = async (arr, low, high) => {
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
index 1566afd..15db271 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="storage-demo">
     <div class="demo-header">
-      <span class="icon">💾</span>
       <span class="title">存储层次：从寄存器到云存储</span>
       <span class="subtitle">速度与容量的权衡</span>
     </div>
@@ -60,7 +59,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>存储遵循"金字塔"原则：越快的存储越贵、容量越小。CPU 需要的数据放在最快的存储（寄存器、缓存），暂时不用的放在慢速大容量存储（磁盘、云端）。
     </div>
   </div>
@@ -147,7 +145,6 @@ const currentLevel = computed(() => storageLevels[activeLevel.value])
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -255,5 +252,4 @@ const currentLevel = computed(() => storageLevels[activeLevel.value])
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
index b0ec1ca..9bc9764 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="storage-hierarchy-demo">
     <div class="demo-header">
-      <span class="icon">💾</span>
       <span class="title">存储层次结构</span>
       <span class="subtitle">从快到慢，从小到大</span>
     </div>
@@ -126,7 +125,6 @@
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
index f403a10..2f6eb6e 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="subnet-calculator">
     <div class="demo-header">
-      <span class="icon">🔢</span>
       <span class="title">子网计算器</span>
       <span class="subtitle">理解 IP 地址和子网掩码</span>
     </div>
@@ -127,7 +126,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>子网掩码决定了 IP 地址的哪部分是"网络号"(小区)，哪部分是"主机号"(房间)。/24 表示前 24 位是网络位，后 8 位是主机位。
     </div>
   </div>
@@ -263,7 +261,6 @@ onMounted(() => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -462,5 +459,4 @@ onMounted(() => {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
index d416b12..520bafb 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="tcp-udp-demo">
     <div class="demo-header">
-      <span class="icon">📦</span>
       <span class="title">TCP vs UDP：可靠 vs 快速</span>
       <span class="subtitle">两种不同的传输策略</span>
     </div>
@@ -184,7 +183,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>TCP 像挂号信，确保送达但较慢；UDP 像平信，快速但不保证送达。选择哪种协议取决于应用场景：需要可靠性选 TCP，需要实时性选 UDP。
     </div>
   </div>
@@ -327,7 +325,6 @@ const runDemo = async () => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -639,5 +636,4 @@ th {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
index b8def32..99e2d56 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpSimple.vue
@@ -40,7 +40,6 @@
         </div>
         <div class="card-body">
           <div class="feature">
-            <span class="feature-icon">⚡</span>
             <span>速度极快</span>
           </div>
           <div class="feature">
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
index 2639822..b035ff2 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="transistor-demo">
     <div class="demo-header">
-      <span class="icon">⚡</span>
       <span class="title">晶体管：数字世界的开关</span>
       <span class="subtitle">一个开关如何变成计算能力</span>
     </div>
@@ -122,7 +121,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>晶体管就是一个用电控制的开关。给它高电压(1)，它就导通；给低电压(0)，它就断开。这是所有数字计算的基础。
     </div>
   </div>
@@ -154,7 +152,6 @@ const toggleSwitch = () => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -262,5 +259,4 @@ tr.highlight {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
index 7504dcb..0d7a80b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="transmission-demo">
     <div class="demo-header">
-      <span class="icon">📡</span>
       <span class="title">数据传输：从串行到并行</span>
       <span class="subtitle">数据如何在不同设备间移动</span>
     </div>
@@ -159,7 +158,6 @@
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>现代高速传输多采用串行方式。虽然并行"看起来"更快（一次传多位），但串行可以跑更高频率，抗干扰更强，实际速度反而更快。
     </div>
   </div>
@@ -209,7 +207,6 @@ const startTransmission = () => {
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -406,5 +403,4 @@ th {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
index de62701..dd085e9 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="transport-layer-demo">
     <div class="demo-header">
-      <span class="icon">🚚</span>
       <span class="title">传输层：端到端的可靠传输</span>
       <span class="subtitle">TCP 和 UDP 如何传输数据</span>
     </div>
@@ -223,7 +222,6 @@ const currentProtocol = computed(() => protocolData[activeProtocol.value])
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
index 56b9058..d348b5c 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="tree-structure-demo">
     <div class="demo-header">
-      <span class="icon">🌳</span>
       <span class="title">树形结构：层级关系的表示</span>
       <span class="subtitle">像家谱一样的组织方式</span>
     </div>
@@ -236,7 +235,6 @@ const binaryTreeLines = [
   margin-bottom: 1.5rem;
 }
 
-.demo-header .icon { font-size: 1.5rem; }
 .demo-header .title { font-weight: 700; font-size: 1.1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
index 82bab7f..5dce827 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="type-system-demo">
     <div class="demo-header">
-      <span class="icon">🏷️</span>
       <span class="title">类型系统：数据的分类规则</span>
       <span class="subtitle">静态 vs 动态，强类型 vs 弱类型</span>
     </div>
@@ -171,7 +170,6 @@ s = str(x)  # 需要显式转换</code></pre>
     </div>
 
     <div class="info-box">
-      <span class="icon">💡</span>
       <strong>核心思想：</strong>类型系统是编程语言的"交通规则"，帮助我们在编译期或运行时发现错误。静态类型在编译期检查，动态类型在运行时检查；强类型不允许隐式转换，弱类型允许。
     </div>
   </div>
@@ -262,7 +260,6 @@ const benefits = [
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon { font-size: 1.25rem; }
 .demo-header .title { font-weight: bold; font-size: 1rem; }
 .demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
@@ -537,8 +534,6 @@ code {
   gap: 0.25rem;
 }
 
-.info-box .icon { flex-shrink: 0; }
-
 @media (max-width: 640px) {
   .code-comparison {
     grid-template-columns: 1fr;