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/LogicGateDemo.vue

@@ -18,7 +18,12 @@
             <tr v-for="(row, i) in gate.rows" :key="i">
               <td>{{ row[0] }}</td>
               <td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
-              <td class="result-cell" :class="{ one: row[row.length - 1] === 1 }">{{ row[row.length - 1] }}</td>
+              <td
+                class="result-cell"
+                :class="{ one: row[row.length - 1] === 1 }"
+              >
+                {{ row[row.length - 1] }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -34,22 +39,40 @@ const gates = [
   {
     name: 'AND',
     rule: '都为 1 才得 1',
-    rows: [[0,0,0],[0,1,0],[1,0,0],[1,1,1]]
+    rows: [
+      [0, 0, 0],
+      [0, 1, 0],
+      [1, 0, 0],
+      [1, 1, 1]
+    ]
   },
   {
     name: 'OR',
     rule: '有一个 1 就得 1',
-    rows: [[0,0,0],[0,1,1],[1,0,1],[1,1,1]]
+    rows: [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 0, 1],
+      [1, 1, 1]
+    ]
   },
   {
     name: 'NOT',
     rule: '取反',
-    rows: [[0,1],[1,0]]
+    rows: [
+      [0, 1],
+      [1, 0]
+    ]
   },
   {
     name: 'XOR',
     rule: '不同才得 1',
-    rows: [[0,0,0],[0,1,1],[1,0,1],[1,1,0]]
+    rows: [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 0, 1],
+      [1, 1, 0]
+    ]
   }
 ]
 </script>