feat(docs): update computer fundamentals content and demos

- Refactor frontend framework demo descriptions for clarity
- Remove interactive features from triad and field map demos
- Add new computer organization and DSL documentation links
- Split type systems and compilers into separate pages
- Enhance power-on-to-web article with relay race analogy
- Add new interactive demos for type systems and compilation
- Improve visual presentation of boot process and hardware flow
- Introduce new Vibe Coding flow demo component

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

@@ -1,46 +1,30 @@
 <template>
   <div class="power-on-demo">
-    <div class="demo-label">电脑启动第一步 ── 点击通电</div>
-
-    <div class="sequence" @click="powerOn = !powerOn">
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">🔌</div>
-        <div class="step-name">电源</div>
-        <div class="step-status">{{ powerOn ? '✅ 供电中' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">🔋</div>
-        <div class="step-name">主板</div>
-        <div class="step-status">{{ powerOn ? '✅ 唤醒' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">⚙️</div>
-        <div class="step-name">CPU</div>
-        <div class="step-status">{{ powerOn ? '✅ 复位' : '⬜ 等待' }}</div>
-      </div>
-
-      <div class="arrow">→</div>
-
-      <div class="step" :class="{ active: powerOn }">
-        <div class="step-icon">💾</div>
-        <div class="step-name">BIOS</div>
-        <div class="step-status">{{ powerOn ? '✅ 启动' : '⬜ 等待' }}</div>
+    <div class="demo-title">硬件启动链路</div>
+    <div class="flow">
+      <div v-for="(step, i) in steps" :key="step.name" class="flow-item">
+        <div class="step-card">
+          <div class="step-icon">{{ step.icon }}</div>
+          <div class="step-name">{{ step.name }}</div>
+          <div class="step-desc">{{ step.desc }}</div>
+        </div>
+        <div v-if="i < steps.length - 1" class="arrow">
+          <svg width="24" height="16" viewBox="0 0 24 16">
+            <path d="M0 8h18M14 3l6 5-6 5" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击切换电源状态</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const powerOn = ref(false)
+const steps = [
+  { icon: '🔌', name: '电源 PSU', desc: '交流电 → 直流电' },
+  { icon: '🧩', name: '主板芯片组', desc: '协调各硬件部件' },
+  { icon: '⚙️', name: 'CPU 复位', desc: '清零寄存器，就绪' },
+  { icon: '📟', name: 'BIOS/UEFI', desc: '执行第一条指令' }
+]
 </script>
 
 <style scoped>
@@ -50,66 +34,55 @@ const powerOn = ref(false)
   background: var(--vp-c-bg-soft);
   padding: 1rem 1.2rem;
   margin: 1rem 0;
-  cursor: pointer;
-  user-select: none;
 }
-
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
+.demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+  margin-bottom: 0.8rem;
 }
-
-.sequence {
+.flow {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.3rem;
+  gap: 0;
+  flex-wrap: wrap;
 }
-
-.step {
+.flow-item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.step-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0.6rem;
-  border-radius: 6px;
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-
-.step.active {
-  opacity: 1;
+  padding: 0.6rem 0.8rem;
   background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  min-width: 5.5rem;
 }
-
-.step-icon {
-  font-size: 1.3rem;
-  margin-bottom: 0.2rem;
-}
-
+.step-icon { font-size: 1.4rem; margin-bottom: 0.3rem; }
 .step-name {
   font-size: 0.72rem;
   font-weight: 600;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.15rem;
 }
-
-.step-status {
-  font-size: 0.65rem;
+.step-desc {
+  font-size: 0.62rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.15rem;
-}
-
-.arrow {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-3);
-}
-
-.tap-hint {
   text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+}
+.arrow {
+  padding: 0 0.3rem;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 640px) {
+  .flow { flex-direction: column; gap: 0.2rem; }
+  .flow-item { flex-direction: column; }
+  .arrow { transform: rotate(90deg); padding: 0.1rem 0; }
 }
 </style>