refactor: 重构 api-intro、api-design、transistor-to-cpu 组件为紧凑布局

- 重构 api-intro 7 个 Vue 组件为更紧凑的左右布局
- 重构 api-design 相关组件
- 重构 transistor-to-cpu 相关组件
- 统一使用 demo-root -> demo-header -> demo-layout -> info-box 结构
- 扩写文章内容为 MIT 讲义风格

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

@@ -34,7 +34,11 @@
         <div class="detail-section">
           <div class="section-title">工作原理</div>
           <div class="section-steps">
-            <div v-for="(step, index) in currentProtocol.steps" :key="index" class="step-item">
+            <div
+              v-for="(step, index) in currentProtocol.steps"
+              :key="index"
+              class="step-item"
+            >
               <span class="step-num">{{ index + 1 }}</span>
               <span class="step-text">{{ step }}</span>
             </div>
@@ -44,7 +48,11 @@
         <div class="detail-section">
           <div class="section-title">日常应用</div>
           <div class="app-list">
-            <div v-for="(app, index) in currentProtocol.apps" :key="index" class="app-tag">
+            <div
+              v-for="(app, index) in currentProtocol.apps"
+              :key="index"
+              class="app-tag"
+            >
               {{ app.icon }} {{ app.name }}
             </div>
           </div>
@@ -268,8 +276,14 @@ const currentProtocol = computed(() => protocolDetails[activeProtocol.value])
   margin-bottom: 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; }
+.demo-header .title {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
 
 .protocol-gallery {
   display: grid;