fix(eslint): reduce warnings in GitHub Actions deployment

- Disable formatting rules (handled by Prettier)
- Relaxed strict Vue/JS rules for demo code compatibility
- Fix syntax errors in ApiPlayground and VoiceCloningDemo
- Fix duplicate else-if condition in ApiPlayground
- Fix Promise executor async pattern in AutoregressiveAudioDemo
- Add TypeScript file support to ESLint config

Warnings reduced from 295 to 251 problems.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue

@@ -17,11 +17,15 @@
               class="bit-btn"
               :class="{ on: bit }"
               @click="toggleBit('A', i)"
-            >{{ bit }}</button>
+            >
+              {{ bit }}
+            </button>
           </div>
           <span class="decimal">= {{ decimalA }}</span>
         </div>
-        <div class="operator">+</div>
+        <div class="operator">
+          +
+        </div>
         <div class="input-group">
           <label>B:</label>
           <div class="bits">
@@ -31,19 +35,30 @@
               class="bit-btn"
               :class="{ on: bit }"
               @click="toggleBit('B', i)"
-            >{{ bit }}</button>
+            >
+              {{ bit }}
+            </button>
           </div>
           <span class="decimal">= {{ decimalB }}</span>
         </div>
       </div>
 
       <div class="adder-visual">
-        <div class="adder-stage" v-for="(s, i) in stages" :key="i">
-          <div class="stage-label">{{ s.label }}</div>
+        <div
+          v-for="(s, i) in stages"
+          :key="i"
+          class="adder-stage"
+        >
+          <div class="stage-label">
+            {{ s.label }}
+          </div>
           <div class="stage-bits">
             <span class="bit-label">A{{ 3-i }}: {{ bitsA[i] }}</span>
             <span class="bit-label">B{{ 3-i }}: {{ bitsB[i] }}</span>
-            <span class="bit-label" v-if="i > 0">C{{ i }}: {{ carries[i-1] }}</span>
+            <span
+              v-if="i > 0"
+              class="bit-label"
+            >C{{ i }}: {{ carries[i-1] }}</span>
           </div>
           <div class="stage-result">
             <span class="sum-bit">S{{ 3-i }}: {{ sumBits[i] }}</span>

docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue

@@ -13,7 +13,9 @@
           :key="algo.name"
           :class="['tab-btn', { active: activeAlgo === algo.name }]"
           @click="activeAlgo = algo.name"
-        >{{ algo.name }}</button>
+        >
+          {{ algo.name }}
+        </button>
       </div>
 
       <div class="algorithm-visual">
@@ -23,11 +25,24 @@
         </div>
 
         <div class="visual-content">
-          <div v-if="activeAlgo === '二分查找'" class="binary-search">
+          <div
+            v-if="activeAlgo === '二分查找'"
+            class="binary-search"
+          >
             <div class="search-input">
               <span>在有序数组中查找：</span>
-              <input v-model.number="searchTarget" type="number" class="num-input" placeholder="输入数字" />
-              <button class="search-btn" @click="runBinarySearch">查找</button>
+              <input
+                v-model.number="searchTarget"
+                type="number"
+                class="num-input"
+                placeholder="输入数字"
+              >
+              <button
+                class="search-btn"
+                @click="runBinarySearch"
+              >
+                查找
+              </button>
             </div>
             <div class="array-display">
               <div 
@@ -43,15 +58,37 @@
                 {{ num }}
               </div>
             </div>
-            <div class="search-info" v-if="searchSteps.length">
-              <div class="step" v-for="(step, i) in searchSteps" :key="i">{{ step }}</div>
+            <div
+              v-if="searchSteps.length"
+              class="search-info"
+            >
+              <div
+                v-for="(step, i) in searchSteps"
+                :key="i"
+                class="step"
+              >
+                {{ step }}
+              </div>
             </div>
           </div>
 
-          <div v-else-if="activeAlgo === '排序'" class="sorting">
+          <div
+            v-else-if="activeAlgo === '排序'"
+            class="sorting"
+          >
             <div class="sort-controls">
-              <button class="sort-btn" @click="resetArray">重置数组</button>
-              <button class="sort-btn" @click="runSort">开始排序</button>
+              <button
+                class="sort-btn"
+                @click="resetArray"
+              >
+                重置数组
+              </button>
+              <button
+                class="sort-btn"
+                @click="runSort"
+              >
+                开始排序
+              </button>
             </div>
             <div class="array-display">
               <div 
@@ -63,57 +100,125 @@
                 {{ num }}
               </div>
             </div>
-            <div class="sort-info">{{ sortStatus }}</div>
+            <div class="sort-info">
+              {{ sortStatus }}
+            </div>
           </div>
 
-          <div v-else-if="activeAlgo === '递归'" class="recursion">
+          <div
+            v-else-if="activeAlgo === '递归'"
+            class="recursion"
+          >
             <div class="recursion-input">
               <span>计算斐波那契数列第</span>
-              <input v-model.number="fibN" type="number" min="1" max="15" class="num-input" />
+              <input
+                v-model.number="fibN"
+                type="number"
+                min="1"
+                max="15"
+                class="num-input"
+              >
               <span>项</span>
-              <button class="calc-btn" @click="calcFib">计算</button>
+              <button
+                class="calc-btn"
+                @click="calcFib"
+              >
+                计算
+              </button>
             </div>
-            <div class="fib-result" v-if="fibResult !== null">
+            <div
+              v-if="fibResult !== null"
+              class="fib-result"
+            >
               <span class="result-value">F({{ fibN }}) = {{ fibResult }}</span>
             </div>
-            <div class="recursion-tree" v-if="fibSteps.length">
-              <div class="tree-title">递归调用过程</div>
+            <div
+              v-if="fibSteps.length"
+              class="recursion-tree"
+            >
+              <div class="tree-title">
+                递归调用过程
+              </div>
               <div class="tree-content">
-                <div v-for="(step, i) in fibSteps.slice(0, 8)" :key="i" class="tree-node">
+                <div
+                  v-for="(step, i) in fibSteps.slice(0, 8)"
+                  :key="i"
+                  class="tree-node"
+                >
                   {{ step }}
                 </div>
-                <div v-if="fibSteps.length > 8" class="tree-more">... 共 {{ fibSteps.length }} 次调用</div>
+                <div
+                  v-if="fibSteps.length > 8"
+                  class="tree-more"
+                >
+                  ... 共 {{ fibSteps.length }} 次调用
+                </div>
               </div>
             </div>
           </div>
 
-          <div v-else-if="activeAlgo === '贪心'" class="greedy">
-            <div class="greedy-desc">硬币找零问题：用最少的硬币凑出指定金额</div>
+          <div
+            v-else-if="activeAlgo === '贪心'"
+            class="greedy"
+          >
+            <div class="greedy-desc">
+              硬币找零问题：用最少的硬币凑出指定金额
+            </div>
             <div class="greedy-input">
               <span>目标金额：</span>
-              <input v-model.number="coinTarget" type="number" min="1" class="num-input" />
-              <button class="calc-btn" @click="calcCoins">计算</button>
+              <input
+                v-model.number="coinTarget"
+                type="number"
+                min="1"
+                class="num-input"
+              >
+              <button
+                class="calc-btn"
+                @click="calcCoins"
+              >
+                计算
+              </button>
             </div>
             <div class="coins-available">
               可用硬币：{{ coins.join(', ') }} 元
             </div>
-            <div class="coin-result" v-if="coinResult.length">
-              <div class="result-title">找零方案：</div>
-              <div class="coin-list">
-                <span v-for="(c, i) in coinResult" :key="i" class="coin">{{ c }}元</span>
+            <div
+              v-if="coinResult.length"
+              class="coin-result"
+            >
+              <div class="result-title">
+                找零方案：
+              </div>
+              <div class="coin-list">
+                <span
+                  v-for="(c, i) in coinResult"
+                  :key="i"
+                  class="coin"
+                >{{ c }}元</span>
+              </div>
+              <div class="result-summary">
+                共 {{ coinResult.length }} 枚硬币
               </div>
-              <div class="result-summary">共 {{ coinResult.length }} 枚硬币</div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="complexity-info">
-        <div class="info-title">时间复杂度速查</div>
+        <div class="info-title">
+          时间复杂度速查
+        </div>
         <div class="complexity-list">
-          <div class="complexity-item" v-for="c in complexities" :key="c.name">
+          <div
+            v-for="c in complexities"
+            :key="c.name"
+            class="complexity-item"
+          >
             <span class="c-name">{{ c.name }}</span>
-            <span class="c-value" :class="c.class">{{ c.value }}</span>
+            <span
+              class="c-value"
+              :class="c.class"
+            >{{ c.value }}</span>
             <span class="c-desc">{{ c.desc }}</span>
           </div>
         </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue

@@ -8,7 +8,9 @@
 
     <div class="demo-content">
       <div class="pipeline-visual">
-        <div class="pipeline-title">编译流程</div>
+        <div class="pipeline-title">
+          编译流程
+        </div>
         <div class="pipeline-stages">
           <div 
             v-for="(stage, i) in stages" 
@@ -16,39 +18,73 @@
             :class="['stage', { active: activeStage === i }]"
             @click="activeStage = i"
           >
-            <div class="stage-num">{{ i + 1 }}</div>
-            <div class="stage-name">{{ stage.name }}</div>
-            <div class="stage-output">{{ stage.output }}</div>
+            <div class="stage-num">
+              {{ i + 1 }}
+            </div>
+            <div class="stage-name">
+              {{ stage.name }}
+            </div>
+            <div class="stage-output">
+              {{ stage.output }}
+            </div>
+          </div>
+          <div
+            v-for="i in stages.length - 1"
+            :key="'arrow-' + i"
+            class="stage-arrow"
+          >
+            →
           </div>
-          <div class="stage-arrow" v-for="i in stages.length - 1" :key="'arrow-' + i">→</div>
         </div>
       </div>
 
-      <div class="stage-detail" v-if="currentStage">
+      <div
+        v-if="currentStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentStage.name }}</span>
         </div>
-        <div class="detail-desc">{{ currentStage.desc }}</div>
+        <div class="detail-desc">
+          {{ currentStage.desc }}
+        </div>
         <div class="detail-tasks">
-          <div class="task-title">主要任务</div>
+          <div class="task-title">
+            主要任务
+          </div>
           <ul>
-            <li v-for="(task, j) in currentStage.tasks" :key="j">{{ task }}</li>
+            <li
+              v-for="(task, j) in currentStage.tasks"
+              :key="j"
+            >
+              {{ task }}
+            </li>
           </ul>
         </div>
         <div class="detail-example">
-          <div class="example-title">示例</div>
+          <div class="example-title">
+            示例
+          </div>
           <pre><code>{{ currentStage.example }}</code></pre>
         </div>
       </div>
 
       <div class="interactive-demo">
-        <div class="demo-title">词法分析演示</div>
+        <div class="demo-title">
+          词法分析演示
+        </div>
         <div class="lexer-input">
           <label>输入代码：</label>
-          <input v-model="sourceCode" type="text" placeholder="例如: int x = 10 + 5;" />
+          <input
+            v-model="sourceCode"
+            type="text"
+            placeholder="例如: int x = 10 + 5;"
+          >
         </div>
         <div class="lexer-output">
-          <div class="output-title">词法单元 (Tokens)</div>
+          <div class="output-title">
+            词法单元 (Tokens)
+          </div>
           <div class="tokens">
             <div 
               v-for="(token, i) in tokens" 
@@ -63,20 +99,44 @@
       </div>
 
       <div class="ast-demo">
-        <div class="demo-title">语法树 (AST) 可视化</div>
+        <div class="demo-title">
+          语法树 (AST) 可视化
+        </div>
         <div class="ast-input">
           <label>表达式：</label>
-          <input v-model="expression" type="text" placeholder="例如: 1 + 2 * 3" />
+          <input
+            v-model="expression"
+            type="text"
+            placeholder="例如: 1 + 2 * 3"
+          >
         </div>
         <div class="ast-visual">
-          <div class="ast-node root" v-if="ast">
-            <div class="node-value">{{ ast.value }}</div>
-            <div class="node-children" v-if="ast.left || ast.right">
-              <div class="ast-node left" v-if="ast.left">
-                <div class="node-value">{{ ast.left.value }}</div>
+          <div
+            v-if="ast"
+            class="ast-node root"
+          >
+            <div class="node-value">
+              {{ ast.value }}
+            </div>
+            <div
+              v-if="ast.left || ast.right"
+              class="node-children"
+            >
+              <div
+                v-if="ast.left"
+                class="ast-node left"
+              >
+                <div class="node-value">
+                  {{ ast.left.value }}
+                </div>
               </div>
-              <div class="ast-node right" v-if="ast.right">
-                <div class="node-value">{{ ast.right.value }}</div>
+              <div
+                v-if="ast.right"
+                class="ast-node right"
+              >
+                <div class="node-value">
+                  {{ ast.right.value }}
+                </div>
               </div>
             </div>
           </div>
@@ -84,14 +144,30 @@
       </div>
 
       <div class="comparison-section">
-        <div class="section-title">编译型 vs 解释型 vs JIT</div>
+        <div class="section-title">
+          编译型 vs 解释型 vs JIT
+        </div>
         <div class="comparison-grid">
-          <div class="comparison-item" v-for="(item, i) in executionModels" :key="i">
-            <div class="item-name">{{ item.name }}</div>
-            <div class="item-flow">{{ item.flow }}</div>
-            <div class="item-pros">{{ item.pros }}</div>
-            <div class="item-cons">{{ item.cons }}</div>
-            <div class="item-langs">{{ item.langs }}</div>
+          <div
+            v-for="(item, i) in executionModels"
+            :key="i"
+            class="comparison-item"
+          >
+            <div class="item-name">
+              {{ item.name }}
+            </div>
+            <div class="item-flow">
+              {{ item.flow }}
+            </div>
+            <div class="item-pros">
+              {{ item.pros }}
+            </div>
+            <div class="item-cons">
+              {{ item.cons }}
+            </div>
+            <div class="item-langs">
+              {{ item.langs }}
+            </div>
           </div>
         </div>
       </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue

@@ -21,8 +21,13 @@
             <span class="layer-count">{{ layer.count }}</span>
           </div>
           <Transition name="fade">
-            <div v-if="activeLayer === i" class="layer-detail">
-              <p class="detail-desc">{{ layer.desc }}</p>
+            <div
+              v-if="activeLayer === i"
+              class="layer-detail"
+            >
+              <p class="detail-desc">
+                {{ layer.desc }}
+              </p>
               <div class="detail-example">
                 <span class="example-label">🌰 例子：</span>
                 <span class="example-content">{{ layer.example }}</span>
@@ -33,9 +38,15 @@
       </div>
 
       <div class="cpu-components">
-        <div class="comp-title">CPU 核心组件</div>
+        <div class="comp-title">
+          CPU 核心组件
+        </div>
         <div class="comp-grid">
-          <div class="comp-item" v-for="comp in components" :key="comp.name">
+          <div
+            v-for="comp in components"
+            :key="comp.name"
+            class="comp-item"
+          >
             <span class="comp-icon">{{ comp.icon }}</span>
             <span class="comp-name">{{ comp.name }}</span>
             <span class="comp-desc">{{ comp.desc }}</span>

docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue

@@ -13,7 +13,9 @@
           :key="s.name"
           :class="['tab-btn', { active: activeStructure === s.name }]"
           @click="activeStructure = s.name"
-        >{{ s.name }}</button>
+        >
+          {{ s.name }}
+        </button>
       </div>
 
       <div class="structure-visual">
@@ -23,90 +25,185 @@
         </div>
 
         <div class="visual-content">
-          <div v-if="activeStructure === '数组'" class="array-visual">
+          <div
+            v-if="activeStructure === '数组'"
+            class="array-visual"
+          >
             <div class="array-container">
-              <div v-for="(item, i) in arrayData" :key="i" class="array-item">
+              <div
+                v-for="(item, i) in arrayData"
+                :key="i"
+                class="array-item"
+              >
                 <span class="index">{{ i }}</span>
                 <span class="value">{{ item }}</span>
               </div>
             </div>
-            <div class="operation-hint">访问 arr[2] = O(1)，插入/删除 = O(n)</div>
+            <div class="operation-hint">
+              访问 arr[2] = O(1)，插入/删除 = O(n)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '链表'" class="linked-visual">
+          <div
+            v-else-if="activeStructure === '链表'"
+            class="linked-visual"
+          >
             <div class="linked-container">
-              <div v-for="(item, i) in linkedData" :key="i" class="linked-node">
+              <div
+                v-for="(item, i) in linkedData"
+                :key="i"
+                class="linked-node"
+              >
                 <span class="node-value">{{ item.value }}</span>
-                <span class="node-arrow" v-if="i < linkedData.length - 1">→</span>
+                <span
+                  v-if="i < linkedData.length - 1"
+                  class="node-arrow"
+                >→</span>
               </div>
             </div>
-            <div class="operation-hint">访问第 n 个 = O(n)，插入/删除 = O(1)</div>
+            <div class="operation-hint">
+              访问第 n 个 = O(n)，插入/删除 = O(1)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '栈'" class="stack-visual">
+          <div
+            v-else-if="activeStructure === '栈'"
+            class="stack-visual"
+          >
             <div class="stack-container">
-              <div v-for="(item, i) in stackData" :key="i" class="stack-item">
+              <div
+                v-for="(item, i) in stackData"
+                :key="i"
+                class="stack-item"
+              >
                 {{ item }}
               </div>
-              <div class="stack-bottom">栈底</div>
+              <div class="stack-bottom">
+                栈底
+              </div>
             </div>
             <div class="stack-ops">
-              <button class="op-btn" @click="pushStack">入栈 Push</button>
-              <button class="op-btn" @click="popStack">出栈 Pop</button>
+              <button
+                class="op-btn"
+                @click="pushStack"
+              >
+                入栈 Push
+              </button>
+              <button
+                class="op-btn"
+                @click="popStack"
+              >
+                出栈 Pop
+              </button>
+            </div>
+            <div class="operation-hint">
+              后进先出 (LIFO)，操作都是 O(1)
             </div>
-            <div class="operation-hint">后进先出 (LIFO)，操作都是 O(1)</div>
           </div>
 
-          <div v-else-if="activeStructure === '队列'" class="queue-visual">
+          <div
+            v-else-if="activeStructure === '队列'"
+            class="queue-visual"
+          >
             <div class="queue-container">
               <span class="queue-label">出 ←</span>
-              <div v-for="(item, i) in queueData" :key="i" class="queue-item">
+              <div
+                v-for="(item, i) in queueData"
+                :key="i"
+                class="queue-item"
+              >
                 {{ item }}
               </div>
               <span class="queue-label">← 入</span>
             </div>
             <div class="queue-ops">
-              <button class="op-btn" @click="enqueue">入队</button>
-              <button class="op-btn" @click="dequeue">出队</button>
+              <button
+                class="op-btn"
+                @click="enqueue"
+              >
+                入队
+              </button>
+              <button
+                class="op-btn"
+                @click="dequeue"
+              >
+                出队
+              </button>
+            </div>
+            <div class="operation-hint">
+              先进先出 (FIFO)，操作都是 O(1)
             </div>
-            <div class="operation-hint">先进先出 (FIFO)，操作都是 O(1)</div>
           </div>
 
-          <div v-else-if="activeStructure === '哈希表'" class="hash-visual">
+          <div
+            v-else-if="activeStructure === '哈希表'"
+            class="hash-visual"
+          >
             <div class="hash-container">
-              <div v-for="(bucket, i) in hashData" :key="i" class="hash-bucket">
+              <div
+                v-for="(bucket, i) in hashData"
+                :key="i"
+                class="hash-bucket"
+              >
                 <span class="bucket-index">{{ i }}</span>
                 <div class="bucket-items">
-                  <span v-for="(item, j) in bucket" :key="j" class="bucket-item">{{ item }}</span>
+                  <span
+                    v-for="(item, j) in bucket"
+                    :key="j"
+                    class="bucket-item"
+                  >{{ item }}</span>
                 </div>
               </div>
             </div>
-            <div class="operation-hint">查找/插入/删除平均 O(1)，最坏 O(n)</div>
+            <div class="operation-hint">
+              查找/插入/删除平均 O(1)，最坏 O(n)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '树'" class="tree-visual">
+          <div
+            v-else-if="activeStructure === '树'"
+            class="tree-visual"
+          >
             <div class="tree-container">
               <div class="tree-level">
-                <div class="tree-node root">{{ treeData.value }}</div>
+                <div class="tree-node root">
+                  {{ treeData.value }}
+                </div>
               </div>
               <div class="tree-level">
-                <div class="tree-node">{{ treeData.left?.value }}</div>
-                <div class="tree-node">{{ treeData.right?.value }}</div>
+                <div class="tree-node">
+                  {{ treeData.left?.value }}
+                </div>
+                <div class="tree-node">
+                  {{ treeData.right?.value }}
+                </div>
               </div>
               <div class="tree-level">
-                <div class="tree-node leaf">{{ treeData.left?.left?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.left?.right?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.right?.left?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.right?.right?.value }}</div>
+                <div class="tree-node leaf">
+                  {{ treeData.left?.left?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.left?.right?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.right?.left?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.right?.right?.value }}
+                </div>
               </div>
             </div>
-            <div class="operation-hint">查找/插入/删除 O(log n)，遍历 O(n)</div>
+            <div class="operation-hint">
+              查找/插入/删除 O(log n)，遍历 O(n)
+            </div>
           </div>
         </div>
       </div>
 
       <div class="complexity-table">
-        <div class="table-title">时间复杂度对比</div>
+        <div class="table-title">
+          时间复杂度对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -120,31 +217,63 @@
           <tbody>
             <tr>
               <td>访问</td>
-              <td class="good">O(1)</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>查找</td>
-              <td class="bad">O(n)</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>插入</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>删除</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
           </tbody>
         </table>

docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue

@@ -13,7 +13,9 @@
           :key="tab.name"
           :class="['tab-btn', { active: activeTab === tab.name }]"
           @click="activeTab = tab.name"
-        >{{ tab.label }}</button>
+        >
+          {{ tab.label }}
+        </button>
       </div>
 
       <div class="encoding-area">
@@ -23,22 +25,32 @@
             v-model="inputValue" 
             class="input-field"
             :placeholder="currentTab.placeholder"
-          />
+          >
         </div>
 
         <div class="output-section">
-          <div class="output-label">编码结果：</div>
+          <div class="output-label">
+            编码结果：
+          </div>
           <div class="output-box">
             <code>{{ encodedResult }}</code>
           </div>
-          <div class="output-info" v-if="currentTab.name === 'text'">
+          <div
+            v-if="currentTab.name === 'text'"
+            class="output-info"
+          >
             <span>字符数: {{ inputValue.length }}</span>
             <span>字节数: {{ byteCount }}</span>
           </div>
         </div>
 
-        <div class="encoding-table" v-if="currentTab.name === 'text' && inputValue">
-          <div class="table-title">字符编码详情</div>
+        <div
+          v-if="currentTab.name === 'text' && inputValue"
+          class="encoding-table"
+        >
+          <div class="table-title">
+            字符编码详情
+          </div>
           <div class="char-list">
             <div 
               v-for="(char, i) in inputValue.slice(0, 10)" 

docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue

@@ -33,7 +33,10 @@
           <span class="detail-name">{{ selectedItemInfo?.name }}</span>
         </div>
         
-        <div class="detail-info" v-if="selectedItemInfo">
+        <div
+          v-if="selectedItemInfo"
+          class="detail-info"
+        >
           <div class="info-row">
             <span class="info-label">类型</span>
             <span class="info-value">{{ selectedItemInfo.type }}</span>
@@ -42,7 +45,10 @@
             <span class="info-label">路径</span>
             <span class="info-value">{{ selectedItemInfo.path }}</span>
           </div>
-          <div class="info-row" v-if="selectedItemInfo.type === '文件'">
+          <div
+            v-if="selectedItemInfo.type === '文件'"
+            class="info-row"
+          >
             <span class="info-label">大小</span>
             <span class="info-value">{{ selectedItemInfo.size }}</span>
           </div>
@@ -52,8 +58,13 @@
           </div>
         </div>
 
-        <div class="inode-info" v-if="selectedItemInfo?.type === '文件'">
-          <div class="inode-title">inode 信息</div>
+        <div
+          v-if="selectedItemInfo?.type === '文件'"
+          class="inode-info"
+        >
+          <div class="inode-title">
+            inode 信息
+          </div>
           <div class="inode-visual">
             <div class="inode-block">
               <span class="inode-label">inode 编号</span>
@@ -62,7 +73,11 @@
             <div class="inode-block">
               <span class="inode-label">数据块</span>
               <div class="data-blocks">
-                <span v-for="b in selectedItemInfo.blocks" :key="b" class="block">{{ b }}</span>
+                <span
+                  v-for="b in selectedItemInfo.blocks"
+                  :key="b"
+                  class="block"
+                >{{ b }}</span>
               </div>
             </div>
           </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue

@@ -8,55 +8,94 @@
 
     <div class="demo-content">
       <div class="timeline">
-        <div class="timeline-item" v-for="(era, i) in eras" :key="i">
-          <div class="era-year">{{ era.year }}</div>
+        <div
+          v-for="(era, i) in eras"
+          :key="i"
+          class="timeline-item"
+        >
+          <div class="era-year">
+            {{ era.year }}
+          </div>
           <div class="era-content">
-            <div class="era-name">{{ era.name }}</div>
-            <div class="era-langs">{{ era.languages.join(' → ') }}</div>
-            <div class="era-desc">{{ era.desc }}</div>
+            <div class="era-name">
+              {{ era.name }}
+            </div>
+            <div class="era-langs">
+              {{ era.languages.join(' → ') }}
+            </div>
+            <div class="era-desc">
+              {{ era.desc }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="paradigm-section">
-        <div class="section-title">编程范式</div>
+        <div class="section-title">
+          编程范式
+        </div>
         <div class="paradigm-tabs">
           <button 
             v-for="p in paradigms" 
             :key="p.name"
             :class="['tab-btn', { active: activeParadigm === p.name }]"
             @click="activeParadigm = p.name"
-          >{{ p.name }}</button>
+          >
+            {{ p.name }}
+          </button>
         </div>
-        <div class="paradigm-content" v-if="currentParadigm">
-          <div class="paradigm-desc">{{ currentParadigm.desc }}</div>
+        <div
+          v-if="currentParadigm"
+          class="paradigm-content"
+        >
+          <div class="paradigm-desc">
+            {{ currentParadigm.desc }}
+          </div>
           <div class="paradigm-langs">
             <span class="label">代表语言：</span>
-            <span v-for="lang in currentParadigm.languages" :key="lang" class="lang-tag">{{ lang }}</span>
+            <span
+              v-for="lang in currentParadigm.languages"
+              :key="lang"
+              class="lang-tag"
+            >{{ lang }}</span>
           </div>
           <div class="paradigm-example">
-            <div class="example-label">代码示例</div>
+            <div class="example-label">
+              代码示例
+            </div>
             <pre><code>{{ currentParadigm.example }}</code></pre>
           </div>
         </div>
       </div>
 
       <div class="type-section">
-        <div class="section-title">类型系统分类</div>
+        <div class="section-title">
+          类型系统分类
+        </div>
         <div class="type-grid">
-          <div class="type-card" v-for="t in typeCategories" :key="t.name">
+          <div
+            v-for="t in typeCategories"
+            :key="t.name"
+            class="type-card"
+          >
             <div class="card-header">
               <span class="card-name">{{ t.name }}</span>
               <span class="card-type">{{ t.type }}</span>
             </div>
-            <div class="card-desc">{{ t.desc }}</div>
-            <div class="card-examples">{{ t.examples.join(', ') }}</div>
+            <div class="card-desc">
+              {{ t.desc }}
+            </div>
+            <div class="card-examples">
+              {{ t.examples.join(', ') }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">语言特性对比</div>
+        <div class="table-title">
+          语言特性对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -68,8 +107,13 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="lang in languageComparison" :key="lang.name">
-              <td class="lang-name">{{ lang.name }}</td>
+            <tr
+              v-for="lang in languageComparison"
+              :key="lang.name"
+            >
+              <td class="lang-name">
+                {{ lang.name }}
+              </td>
               <td>{{ lang.type }}</td>
               <td>{{ lang.paradigm }}</td>
               <td>{{ lang.runtime }}</td>

docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue

@@ -27,7 +27,9 @@
                 class="input-btn" 
                 :class="{ on: inputA }"
                 @click="inputA = !inputA"
-              >{{ inputA ? '1' : '0' }}</button>
+              >
+                {{ inputA ? '1' : '0' }}
+              </button>
             </div>
             <div class="input-item">
               <span>B:</span>
@@ -35,49 +37,170 @@
                 class="input-btn" 
                 :class="{ on: inputB }"
                 @click="inputB = !inputB"
-              >{{ inputB ? '1' : '0' }}</button>
+              >
+                {{ inputB ? '1' : '0' }}
+              </button>
             </div>
           </div>
 
           <div class="gate-symbol">
-            <svg viewBox="0 0 120 80" class="gate-svg">
+            <svg
+              viewBox="0 0 120 80"
+              class="gate-svg"
+            >
               <template v-if="activeGate === 'AND'">
-                <path d="M20,20 L20,60 L60,60 Q90,60 90,40 Q90,20 60,20 Z" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="20" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="20" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M20,20 L20,60 L60,60 Q90,60 90,40 Q90,20 60,20 Z"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="20"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="20"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'OR'">
-                <path d="M20,20 Q40,40 20,60 Q60,60 90,40 Q60,20 20,20" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="25" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="25" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M20,20 Q40,40 20,60 Q60,60 90,40 Q60,20 20,20"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="25"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="25"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'NOT'">
-                <polygon points="20,20 80,40 20,60" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <circle cx="85" cy="40" r="5" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="40" x2="20" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <polygon
+                  points="20,20 80,40 20,60"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <circle
+                  cx="85"
+                  cy="40"
+                  r="5"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="40"
+                  x2="20"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'XOR'">
-                <path d="M25,20 Q45,40 25,60 Q65,60 95,40 Q65,20 25,20" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <path d="M15,20 Q35,40 15,60" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="95" y1="40" x2="115" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="30" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="30" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M25,20 Q45,40 25,60 Q65,60 95,40 Q65,20 25,20"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <path
+                  d="M15,20 Q35,40 15,60"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="95"
+                  y1="40"
+                  x2="115"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="30"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="30"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
             </svg>
-            <div class="gate-name">{{ activeGate }}</div>
+            <div class="gate-name">
+              {{ activeGate }}
+            </div>
           </div>
 
           <div class="output">
             <span class="output-label">输出:</span>
-            <span class="output-value" :class="{ on: output }">{{ output ? '1' : '0' }}</span>
+            <span
+              class="output-value"
+              :class="{ on: output }"
+            >{{ output ? '1' : '0' }}</span>
           </div>
         </div>
 
         <div class="truth-table-mini">
-          <div class="table-title">{{ activeGate }} 真值表</div>
+          <div class="table-title">
+            {{ activeGate }} 真值表
+          </div>
           <table>
             <thead>
               <tr>
@@ -87,8 +210,11 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in currentTruthTable" :key="row.a + '-' + row.b" 
-                  :class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }">
+              <tr
+                v-for="row in currentTruthTable"
+                :key="row.a + '-' + row.b" 
+                :class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }"
+              >
                 <td>{{ row.a }}</td>
                 <td>{{ row.b }}</td>
                 <td>{{ row.out }}</td>
@@ -99,8 +225,12 @@
       </div>
 
       <div class="gate-explanation">
-        <div class="exp-title">{{ currentGate.expTitle }}</div>
-        <div class="exp-content">{{ currentGate.expContent }}</div>
+        <div class="exp-title">
+          {{ currentGate.expTitle }}
+        </div>
+        <div class="exp-content">
+          {{ currentGate.expContent }}
+        </div>
       </div>
     </div>
 

docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue

@@ -21,30 +21,48 @@
             :style="{ height: block.size + '%' }"
             @click="selectedBlock = i"
           >
-            <span class="block-label" v-if="block.size > 5">{{ block.name }}</span>
-            <span class="block-size" v-if="block.size > 8">{{ block.sizeMB }}MB</span>
+            <span
+              v-if="block.size > 5"
+              class="block-label"
+            >{{ block.name }}</span>
+            <span
+              v-if="block.size > 8"
+              class="block-size"
+            >{{ block.sizeMB }}MB</span>
           </div>
         </div>
       </div>
 
       <div class="memory-info">
         <div class="info-section">
-          <div class="section-title">内存分配策略</div>
+          <div class="section-title">
+            内存分配策略
+          </div>
           <div class="strategy-tabs">
             <button 
               v-for="s in strategies" 
               :key="s.name"
               :class="['strat-btn', { active: activeStrategy === s.name }]"
               @click="activeStrategy = s.name"
-            >{{ s.name }}</button>
+            >
+              {{ s.name }}
+            </button>
+          </div>
+          <div class="strategy-desc">
+            {{ currentStrategy.desc }}
           </div>
-          <div class="strategy-desc">{{ currentStrategy.desc }}</div>
         </div>
 
         <div class="info-section">
-          <div class="section-title">虚拟内存的作用</div>
+          <div class="section-title">
+            虚拟内存的作用
+          </div>
           <div class="vm-benefits">
-            <div class="benefit-item" v-for="b in benefits" :key="b.title">
+            <div
+              v-for="b in benefits"
+              :key="b.title"
+              class="benefit-item"
+            >
               <span class="benefit-icon">{{ b.icon }}</span>
               <div class="benefit-content">
                 <span class="benefit-title">{{ b.title }}</span>

docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue

@@ -14,25 +14,48 @@
           :class="['layer', { active: activeLayer === i }]"
           @click="activeLayer = i"
         >
-          <div class="layer-num">{{ 5 - i }}</div>
-          <div class="layer-info">
-            <div class="layer-name">{{ layer.name }}</div>
-            <div class="layer-protocol">{{ layer.protocols }}</div>
+          <div class="layer-num">
+            {{ 5 - i }}
+          </div>
+          <div class="layer-info">
+            <div class="layer-name">
+              {{ layer.name }}
+            </div>
+            <div class="layer-protocol">
+              {{ layer.protocols }}
+            </div>
+          </div>
+          <div
+            v-if="layer.device"
+            class="layer-device"
+          >
+            {{ layer.device }}
           </div>
-          <div class="layer-device" v-if="layer.device">{{ layer.device }}</div>
         </div>
       </div>
 
-      <div class="layer-detail" v-if="currentLayer">
+      <div
+        v-if="currentLayer"
+        class="layer-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentLayer.name }}</span>
           <span class="detail-analogy">{{ currentLayer.analogy }}</span>
         </div>
-        <div class="detail-desc">{{ currentLayer.desc }}</div>
+        <div class="detail-desc">
+          {{ currentLayer.desc }}
+        </div>
         <div class="detail-tasks">
-          <div class="task-title">核心任务</div>
+          <div class="task-title">
+            核心任务
+          </div>
           <ul>
-            <li v-for="(task, j) in currentLayer.tasks" :key="j">{{ task }}</li>
+            <li
+              v-for="(task, j) in currentLayer.tasks"
+              :key="j"
+            >
+              {{ task }}
+            </li>
           </ul>
         </div>
         <div class="detail-unit">
@@ -42,16 +65,29 @@
       </div>
 
       <div class="encapsulation-demo">
-        <div class="encap-title">数据封装过程</div>
+        <div class="encap-title">
+          数据封装过程
+        </div>
         <div class="encap-flow">
-          <div class="encap-step" v-for="(step, i) in encapsulation" :key="i">
-            <div class="step-layer">{{ step.layer }}</div>
+          <div
+            v-for="(step, i) in encapsulation"
+            :key="i"
+            class="encap-step"
+          >
+            <div class="step-layer">
+              {{ step.layer }}
+            </div>
             <div class="step-data">
-              <span class="header" v-if="step.header">{{ step.header }}</span>
+              <span
+                v-if="step.header"
+                class="header"
+              >{{ step.header }}</span>
               <span class="payload">{{ step.payload }}</span>
             </div>
           </div>
-          <div class="arrow">↓ 发送</div>
+          <div class="arrow">
+            ↓ 发送
+          </div>
         </div>
       </div>
     </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue

@@ -27,7 +27,10 @@
           </span>
           <span class="col-pid">{{ p.pid }}</span>
           <span class="col-state">
-            <span class="state-badge" :class="p.state === '运行中' ? 'running' : 'waiting'">
+            <span
+              class="state-badge"
+              :class="p.state === '运行中' ? 'running' : 'waiting'"
+            >
               {{ p.state }}
             </span>
           </span>
@@ -35,8 +38,13 @@
         </div>
       </div>
 
-      <div class="process-detail" v-if="selectedProcess">
-        <div class="detail-title">进程详情：{{ selectedProcess.name }}</div>
+      <div
+        v-if="selectedProcess"
+        class="process-detail"
+      >
+        <div class="detail-title">
+          进程详情：{{ selectedProcess.name }}
+        </div>
         <div class="detail-grid">
           <div class="detail-item">
             <span class="label">进程ID (PID)</span>
@@ -56,9 +64,16 @@
           </div>
         </div>
         <div class="memory-layout">
-          <div class="layout-title">进程内存布局</div>
+          <div class="layout-title">
+            进程内存布局
+          </div>
           <div class="layout-visual">
-            <div class="segment" v-for="seg in memorySegments" :key="seg.name" :style="{ height: seg.height }">
+            <div
+              v-for="seg in memorySegments"
+              :key="seg.name"
+              class="segment"
+              :style="{ height: seg.height }"
+            >
               <span class="seg-name">{{ seg.name }}</span>
             </div>
           </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue

@@ -16,14 +16,25 @@
           :style="{ width: level.width }"
           @click="activeLevel = i"
         >
-          <div class="level-name">{{ level.name }}</div>
-          <div class="level-speed">{{ level.speed }}</div>
-          <div class="level-size">{{ level.size }}</div>
+          <div class="level-name">
+            {{ level.name }}
+          </div>
+          <div class="level-speed">
+            {{ level.speed }}
+          </div>
+          <div class="level-size">
+            {{ level.size }}
+          </div>
         </div>
       </div>
 
-      <div class="level-detail" v-if="currentLevel">
-        <div class="detail-title">{{ currentLevel.name }} 详情</div>
+      <div
+        v-if="currentLevel"
+        class="level-detail"
+      >
+        <div class="detail-title">
+          {{ currentLevel.name }} 详情
+        </div>
         <div class="detail-grid">
           <div class="detail-item">
             <span class="label">访问速度</span>
@@ -42,7 +53,9 @@
             <span class="value">{{ currentLevel.volatile }}</span>
           </div>
         </div>
-        <div class="detail-desc">{{ currentLevel.desc }}</div>
+        <div class="detail-desc">
+          {{ currentLevel.desc }}
+        </div>
       </div>
     </div>
 

docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue

@@ -11,20 +11,50 @@
         <div class="input-group">
           <label>IP 地址</label>
           <div class="ip-inputs">
-            <input v-model="ip[0]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[0]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[1]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[1]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[2]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[2]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[3]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[3]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
           </div>
         </div>
         <div class="input-group">
           <label>子网掩码 (CIDR)</label>
           <div class="cidr-input">
             <span>/</span>
-            <input v-model.number="cidr" type="number" min="8" max="30" @input="calculate" />
+            <input
+              v-model.number="cidr"
+              type="number"
+              min="8"
+              max="30"
+              @input="calculate"
+            >
           </div>
         </div>
       </div>
@@ -53,7 +83,9 @@
       </div>
 
       <div class="binary-section">
-        <div class="binary-title">二进制表示</div>
+        <div class="binary-title">
+          二进制表示
+        </div>
         <div class="binary-row">
           <span class="binary-label">IP 地址:</span>
           <span class="binary-value">{{ ipBinary }}</span>
@@ -73,7 +105,9 @@
       </div>
 
       <div class="visual-section">
-        <div class="visual-title">地址结构可视化</div>
+        <div class="visual-title">
+          地址结构可视化
+        </div>
         <div class="address-visual">
           <div class="bit-blocks">
             <div 
@@ -85,8 +119,8 @@
             </div>
           </div>
           <div class="legend">
-            <span class="legend-item"><span class="network-box"></span> 网络位 ({{ cidr }}位)</span>
-            <span class="legend-item"><span class="host-box"></span> 主机位 ({{ 32 - cidr }}位)</span>
+            <span class="legend-item"><span class="network-box" /> 网络位 ({{ cidr }}位)</span>
+            <span class="legend-item"><span class="host-box" /> 主机位 ({{ 32 - cidr }}位)</span>
           </div>
         </div>
       </div>

docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue

@@ -24,14 +24,21 @@
         </button>
       </div>
 
-      <div class="protocol-detail" v-if="currentProtocol">
+      <div
+        v-if="currentProtocol"
+        class="protocol-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentProtocol.name }}</span>
           <span class="detail-full">{{ currentProtocol.fullName }}</span>
         </div>
         
         <div class="feature-grid">
-          <div class="feature-item" v-for="(feature, i) in currentProtocol.features" :key="i">
+          <div
+            v-for="(feature, i) in currentProtocol.features"
+            :key="i"
+            class="feature-item"
+          >
             <span class="feature-icon">{{ feature.icon }}</span>
             <span class="feature-name">{{ feature.name }}</span>
             <span class="feature-value">{{ feature.value }}</span>
@@ -39,9 +46,15 @@
         </div>
 
         <div class="mechanism-section">
-          <div class="mechanism-title">核心机制</div>
+          <div class="mechanism-title">
+            核心机制
+          </div>
           <div class="mechanism-list">
-            <div class="mechanism-item" v-for="(m, i) in currentProtocol.mechanisms" :key="i">
+            <div
+              v-for="(m, i) in currentProtocol.mechanisms"
+              :key="i"
+              class="mechanism-item"
+            >
               <span class="mechanism-name">{{ m.name }}</span>
               <span class="mechanism-desc">{{ m.desc }}</span>
             </div>
@@ -49,18 +62,28 @@
         </div>
 
         <div class="use-cases">
-          <div class="use-title">适用场景</div>
+          <div class="use-title">
+            适用场景
+          </div>
           <div class="use-tags">
-            <span class="use-tag" v-for="(use, i) in currentProtocol.useCases" :key="i">{{ use }}</span>
+            <span
+              v-for="(use, i) in currentProtocol.useCases"
+              :key="i"
+              class="use-tag"
+            >{{ use }}</span>
           </div>
         </div>
       </div>
 
       <div class="visual-demo">
-        <div class="visual-title">传输过程演示</div>
+        <div class="visual-title">
+          传输过程演示
+        </div>
         <div class="transmission-demo">
           <div class="sender">
-            <div class="node-label">发送方</div>
+            <div class="node-label">
+              发送方
+            </div>
             <div class="packets">
               <div 
                 v-for="(packet, i) in packets" 
@@ -73,16 +96,33 @@
           </div>
           
           <div class="network-channel">
-            <div class="channel-label">网络通道</div>
-            <div class="channel-status" :class="{ congested: isCongested }">
+            <div class="channel-label">
+              网络通道
+            </div>
+            <div
+              class="channel-status"
+              :class="{ congested: isCongested }"
+            >
               {{ isCongested ? '拥堵' : '正常' }}
             </div>
-            <button class="demo-btn" @click="runDemo">开始演示</button>
-            <button class="demo-btn" @click="toggleCongestion">{{ isCongested ? '恢复网络' : '模拟丢包' }}</button>
+            <button
+              class="demo-btn"
+              @click="runDemo"
+            >
+              开始演示
+            </button>
+            <button
+              class="demo-btn"
+              @click="toggleCongestion"
+            >
+              {{ isCongested ? '恢复网络' : '模拟丢包' }}
+            </button>
           </div>
           
           <div class="receiver">
-            <div class="node-label">接收方</div>
+            <div class="node-label">
+              接收方
+            </div>
             <div class="received-packets">
               <div 
                 v-for="(packet, i) in receivedPackets" 
@@ -96,15 +136,25 @@
         </div>
         
         <div class="demo-log">
-          <div class="log-title">传输日志</div>
+          <div class="log-title">
+            传输日志
+          </div>
           <div class="log-content">
-            <div v-for="(log, i) in logs" :key="i" class="log-item">{{ log }}</div>
+            <div
+              v-for="(log, i) in logs"
+              :key="i"
+              class="log-item"
+            >
+              {{ log }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">特性对比</div>
+        <div class="table-title">
+          特性对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -114,10 +164,19 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, i) in comparisonData" :key="i">
-              <td class="feature-col">{{ row.feature }}</td>
-              <td :class="{ highlight: row.tcpBetter }">{{ row.tcp }}</td>
-              <td :class="{ highlight: !row.tcpBetter }">{{ row.udp }}</td>
+            <tr
+              v-for="(row, i) in comparisonData"
+              :key="i"
+            >
+              <td class="feature-col">
+                {{ row.feature }}
+              </td>
+              <td :class="{ highlight: row.tcpBetter }">
+                {{ row.tcp }}
+              </td>
+              <td :class="{ highlight: !row.tcpBetter }">
+                {{ row.udp }}
+              </td>
             </tr>
           </tbody>
         </table>

docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue

@@ -8,22 +8,85 @@
 
     <div class="demo-content">
       <div class="switch-container">
-        <div class="switch-area" @click="toggleSwitch">
+        <div
+          class="switch-area"
+          @click="toggleSwitch"
+        >
           <div class="transistor-symbol">
-            <svg viewBox="0 0 100 80" class="transistor-svg">
-              <line x1="10" y1="40" x2="35" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="65" y1="40" x2="90" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="50" y1="20" x2="50" y2="35" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="50" y1="45" x2="50" y2="60" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="35" y1="30" x2="35" y2="50" stroke="var(--vp-c-text-1)" stroke-width="3"/>
-              <line x1="65" y1="30" x2="65" y2="50" stroke="var(--vp-c-text-1)" stroke-width="3"/>
-              <line x1="35" y1="40" x2="65" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <circle cx="50" cy="60" r="4" fill="var(--vp-c-text-1)"/>
+            <svg
+              viewBox="0 0 100 80"
+              class="transistor-svg"
+            >
+              <line
+                x1="10"
+                y1="40"
+                x2="35"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="65"
+                y1="40"
+                x2="90"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="50"
+                y1="20"
+                x2="50"
+                y2="35"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="50"
+                y1="45"
+                x2="50"
+                y2="60"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="35"
+                y1="30"
+                x2="35"
+                y2="50"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="3"
+              />
+              <line
+                x1="65"
+                y1="30"
+                x2="65"
+                y2="50"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="3"
+              />
+              <line
+                x1="35"
+                y1="40"
+                x2="65"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <circle
+                cx="50"
+                cy="60"
+                r="4"
+                fill="var(--vp-c-text-1)"
+              />
             </svg>
           </div>
           <div class="switch-label">
             <span class="state-label">{{ isOn ? 'ON (1)' : 'OFF (0)' }}</span>
-            <div class="current-flow" :class="{ active: isOn }">
+            <div
+              class="current-flow"
+              :class="{ active: isOn }"
+            >
               <span class="flow-indicator">电流</span>
             </div>
           </div>
@@ -31,7 +94,9 @@
       </div>
 
       <div class="truth-table">
-        <div class="table-title">晶体管状态表</div>
+        <div class="table-title">
+          晶体管状态表
+        </div>
         <table>
           <thead>
             <tr>

docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue

@@ -8,39 +8,91 @@
 
     <div class="demo-content">
       <div class="transmission-types">
-        <div class="type-card" :class="{ active: activeType === 'serial' }" @click="activeType = 'serial'">
-          <div class="card-icon">➡️</div>
-          <div class="card-title">串行传输</div>
-          <div class="card-desc">一位一位依次传输</div>
-          <div class="card-examples">USB、SATA、PCIe</div>
+        <div
+          class="type-card"
+          :class="{ active: activeType === 'serial' }"
+          @click="activeType = 'serial'"
+        >
+          <div class="card-icon">
+            ➡️
+          </div>
+          <div class="card-title">
+            串行传输
+          </div>
+          <div class="card-desc">
+            一位一位依次传输
+          </div>
+          <div class="card-examples">
+            USB、SATA、PCIe
+          </div>
         </div>
-        <div class="type-card" :class="{ active: activeType === 'parallel' }" @click="activeType = 'parallel'">
-          <div class="card-icon">⬇️⬇️⬇️⬇️</div>
-          <div class="card-title">并行传输</div>
-          <div class="card-desc">多位同时传输</div>
-          <div class="card-examples">旧式打印机接口、IDE</div>
+        <div
+          class="type-card"
+          :class="{ active: activeType === 'parallel' }"
+          @click="activeType = 'parallel'"
+        >
+          <div class="card-icon">
+            ⬇️⬇️⬇️⬇️
+          </div>
+          <div class="card-title">
+            并行传输
+          </div>
+          <div class="card-desc">
+            多位同时传输
+          </div>
+          <div class="card-examples">
+            旧式打印机接口、IDE
+          </div>
         </div>
       </div>
 
       <div class="transmission-visual">
-        <div class="visual-title">{{ activeType === 'serial' ? '串行传输示意' : '并行传输示意' }}</div>
+        <div class="visual-title">
+          {{ activeType === 'serial' ? '串行传输示意' : '并行传输示意' }}
+        </div>
         <div class="visual-area">
           <div class="sender">
-            <div class="device-label">发送端</div>
+            <div class="device-label">
+              发送端
+            </div>
             <div class="data-bits">
-              <span v-for="(bit, i) in dataBits" :key="i" class="bit" :class="{ sending: sendingBit === i && activeType === 'serial' }">{{ bit }}</span>
+              <span
+                v-for="(bit, i) in dataBits"
+                :key="i"
+                class="bit"
+                :class="{ sending: sendingBit === i && activeType === 'serial' }"
+              >{{ bit }}</span>
             </div>
           </div>
           <div class="channels">
-            <div v-if="activeType === 'serial'" class="channel serial">
-              <div class="channel-label">单通道</div>
+            <div
+              v-if="activeType === 'serial'"
+              class="channel serial"
+            >
+              <div class="channel-label">
+                单通道
+              </div>
               <div class="channel-flow">
-                <span v-for="i in 5" :key="i" class="flow-dot" :class="{ active: sendingBit !== null }">●</span>
+                <span
+                  v-for="i in 5"
+                  :key="i"
+                  class="flow-dot"
+                  :class="{ active: sendingBit !== null }"
+                >●</span>
               </div>
             </div>
-            <div v-else class="channel parallel">
-              <div v-for="i in 4" :key="i" class="channel-row">
-                <div class="channel-label">通道{{ i }}</div>
+            <div
+              v-else
+              class="channel parallel"
+            >
+              <div
+                v-for="i in 4"
+                :key="i"
+                class="channel-row"
+              >
+                <div class="channel-label">
+                  通道{{ i }}
+                </div>
                 <div class="channel-flow">
                   <span class="flow-dot active">●</span>
                 </div>
@@ -48,17 +100,30 @@
             </div>
           </div>
           <div class="receiver">
-            <div class="device-label">接收端</div>
+            <div class="device-label">
+              接收端
+            </div>
             <div class="data-bits received">
-              <span v-for="(bit, i) in receivedBits" :key="i" class="bit">{{ bit }}</span>
+              <span
+                v-for="(bit, i) in receivedBits"
+                :key="i"
+                class="bit"
+              >{{ bit }}</span>
             </div>
           </div>
         </div>
-        <button class="send-btn" @click="startTransmission">发送数据</button>
+        <button
+          class="send-btn"
+          @click="startTransmission"
+        >
+          发送数据
+        </button>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">串行 vs 并行对比</div>
+        <div class="table-title">
+          串行 vs 并行对比
+        </div>
         <table>
           <thead>
             <tr>

docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue

@@ -8,27 +8,53 @@
 
     <div class="demo-content">
       <div class="type-quadrant">
-        <div class="quadrant-title">类型系统四象限</div>
+        <div class="quadrant-title">
+          类型系统四象限
+        </div>
         <div class="quadrant-grid">
           <div class="quadrant-cell strong-static">
-            <div class="cell-label">强类型 + 静态</div>
-            <div class="cell-langs">Java, Rust, Haskell</div>
-            <div class="cell-desc">最安全，编译期检查</div>
+            <div class="cell-label">
+              强类型 + 静态
+            </div>
+            <div class="cell-langs">
+              Java, Rust, Haskell
+            </div>
+            <div class="cell-desc">
+              最安全，编译期检查
+            </div>
           </div>
           <div class="quadrant-cell weak-static">
-            <div class="cell-label">弱类型 + 静态</div>
-            <div class="cell-langs">C, C++</div>
-            <div class="cell-desc">高效，但需小心</div>
+            <div class="cell-label">
+              弱类型 + 静态
+            </div>
+            <div class="cell-langs">
+              C, C++
+            </div>
+            <div class="cell-desc">
+              高效，但需小心
+            </div>
           </div>
           <div class="quadrant-cell strong-dynamic">
-            <div class="cell-label">强类型 + 动态</div>
-            <div class="cell-langs">Python, Ruby</div>
-            <div class="cell-desc">灵活，运行时检查</div>
+            <div class="cell-label">
+              强类型 + 动态
+            </div>
+            <div class="cell-langs">
+              Python, Ruby
+            </div>
+            <div class="cell-desc">
+              灵活，运行时检查
+            </div>
           </div>
           <div class="quadrant-cell weak-dynamic">
-            <div class="cell-label">弱类型 + 动态</div>
-            <div class="cell-langs">JavaScript, PHP</div>
-            <div class="cell-desc">最灵活，但易出错</div>
+            <div class="cell-label">
+              弱类型 + 动态
+            </div>
+            <div class="cell-langs">
+              JavaScript, PHP
+            </div>
+            <div class="cell-desc">
+              最灵活，但易出错
+            </div>
           </div>
         </div>
         <div class="axis-labels">
@@ -38,64 +64,104 @@
       </div>
 
       <div class="type-demo">
-        <div class="demo-title">类型检查演示</div>
+        <div class="demo-title">
+          类型检查演示
+        </div>
         <div class="code-comparison">
           <div class="code-block">
-            <div class="code-label">静态类型 (Java)</div>
+            <div class="code-label">
+              静态类型 (Java)
+            </div>
             <pre><code>String name = "Alice";
 name = 123; // ❌ 编译错误
 
 int x = 10;
 String s = x; // ❌ 编译错误</code></pre>
-            <div class="code-result error">编译期发现错误</div>
+            <div class="code-result error">
+              编译期发现错误
+            </div>
           </div>
           <div class="code-block">
-            <div class="code-label">动态类型 (Python)</div>
+            <div class="code-label">
+              动态类型 (Python)
+            </div>
             <pre><code>name = "Alice"
 name = 123  # ✅ 运行正常
 
 x = 10
 s = str(x)  # 需要显式转换</code></pre>
-            <div class="code-result success">运行时类型可变</div>
+            <div class="code-result success">
+              运行时类型可变
+            </div>
           </div>
         </div>
       </div>
 
       <div class="conversion-demo">
-        <div class="demo-title">类型转换演示</div>
+        <div class="demo-title">
+          类型转换演示
+        </div>
         <div class="conversion-tabs">
           <button 
             v-for="lang in languages" 
             :key="lang.name"
             :class="['tab-btn', { active: activeLang === lang.name }]"
             @click="activeLang = lang.name"
-          >{{ lang.name }}</button>
+          >
+            {{ lang.name }}
+          </button>
         </div>
-        <div class="conversion-content" v-if="currentLang">
-          <div class="conversion-item" v-for="(item, i) in currentLang.conversions" :key="i">
+        <div
+          v-if="currentLang"
+          class="conversion-content"
+        >
+          <div
+            v-for="(item, i) in currentLang.conversions"
+            :key="i"
+            class="conversion-item"
+          >
             <code class="code-expr">{{ item.expr }}</code>
             <span class="arrow">→</span>
-            <code class="code-result" :class="{ error: item.error }">{{ item.result }}</code>
+            <code
+              class="code-result"
+              :class="{ error: item.error }"
+            >{{ item.result }}</code>
             <span class="explanation">{{ item.explain }}</span>
           </div>
         </div>
       </div>
 
       <div class="type-inference">
-        <div class="demo-title">类型推断</div>
+        <div class="demo-title">
+          类型推断
+        </div>
         <div class="inference-examples">
-          <div class="inference-item" v-for="(example, i) in inferenceExamples" :key="i">
-            <div class="inference-lang">{{ example.lang }}</div>
+          <div
+            v-for="(example, i) in inferenceExamples"
+            :key="i"
+            class="inference-item"
+          >
+            <div class="inference-lang">
+              {{ example.lang }}
+            </div>
             <code class="inference-code">{{ example.code }}</code>
-            <div class="inference-result">推断为: <span class="type">{{ example.type }}</span></div>
+            <div class="inference-result">
+              推断为: <span class="type">{{ example.type }}</span>
+            </div>
           </div>
         </div>
       </div>
 
       <div class="type-benefits">
-        <div class="benefits-title">类型系统的好处</div>
+        <div class="benefits-title">
+          类型系统的好处
+        </div>
         <div class="benefits-grid">
-          <div class="benefit-item" v-for="(b, i) in benefits" :key="i">
+          <div
+            v-for="(b, i) in benefits"
+            :key="i"
+            class="benefit-item"
+          >
             <span class="benefit-icon">{{ b.icon }}</span>
             <span class="benefit-name">{{ b.name }}</span>
             <span class="benefit-desc">{{ b.desc }}</span>