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/api-intro/RequestResponseFlow.vue

@@ -4,48 +4,29 @@
 -->
 <template>
   <div class="demo">
-    <div class="title">
-      🔄 一次 API 调用的流程
-    </div>
-    <p class="subtitle">
-      点一下按钮，看请求怎么飞过去再飞回来
-    </p>
+    <div class="title">🔄 一次 API 调用的流程</div>
+    <p class="subtitle">点一下按钮，看请求怎么飞过去再飞回来</p>
 
     <div class="flow-container">
       <div class="side you">
         <div class="window">
-          <div class="window-header">
-            👤 你这边
-          </div>
+          <div class="window-header">👤 你这边</div>
           <div class="window-body">
-            <div class="message">
-              我想调用 API
-            </div>
+            <div class="message">我想调用 API</div>
           </div>
         </div>
       </div>
 
       <div class="middle">
-        <div
-          class="arrow"
-          :class="{ animating: isAnimating }"
-        >
-          ➔
-        </div>
-        <button
-          class="send-btn"
-          :disabled="isAnimating"
-          @click="send"
-        >
+        <div class="arrow" :class="{ animating: isAnimating }">➔</div>
+        <button class="send-btn" :disabled="isAnimating" @click="send">
           {{ isAnimating ? '发送中...' : '🚀 发送请求' }}
         </button>
       </div>
 
       <div class="side server">
         <div class="window">
-          <div class="window-header">
-            🖥️ 对方服务器
-          </div>
+          <div class="window-header">🖥️ 对方服务器</div>
           <div class="window-body">
             <div class="message">
               {{ serverMessage }}
@@ -55,14 +36,8 @@
       </div>
     </div>
 
-    <div
-      v-if="result"
-      class="result"
-    >
-      <div
-        class="result-box"
-        :class="result.type"
-      >
+    <div v-if="result" class="result">
+      <div class="result-box" :class="result.type">
         {{ result.text }}
       </div>
     </div>