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

@@ -1,38 +1,27 @@
 <template>
   <div class="boot-demo">
-    <div class="demo-label">操作系统启动流程 ── 点击逐步启动</div>
-
+    <div class="demo-title">操作系统启动流程</div>
     <div class="timeline">
-      <div
-        v-for="(step, index) in steps"
-        :key="step.name"
-        class="timeline-item"
-        :class="{ active: currentStep >= index }"
-        @click="currentStep = index"
-      >
-        <div class="timeline-marker">
-          <span class="marker-dot" :class="{ filled: currentStep >= index }">{{ index + 1 }}</span>
-          <span v-if="index < steps.length - 1" class="marker-line" :class="{ filled: currentStep >= index }"></span>
+      <div v-for="(step, i) in steps" :key="step.name" class="timeline-item">
+        <div class="marker">
+          <span class="dot">{{ i + 1 }}</span>
+          <span v-if="i < steps.length - 1" class="line"></span>
         </div>
-        <div class="timeline-content">
+        <div class="content">
           <div class="step-name">{{ step.name }}</div>
           <div class="step-desc">{{ step.desc }}</div>
         </div>
       </div>
     </div>
-
-    <div class="tap-hint">👆 点击查看各步骤</div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentStep = ref(0)
 const steps = [
-  { name: '引导程序', desc: '从硬盘读取 bootloader' },
-  { name: '内核加载', desc: '加载操作系统内核' },
-  { name: '系统服务', desc: '启动各种后台服务' },
-  { name: '桌面环境', desc: '显示登录界面和桌面' }
+  { name: '引导程序 Bootloader', desc: '从硬盘启动扇区读取引导代码，找到操作系统内核的位置' },
+  { name: '内核加载 Kernel', desc: '将内核载入内存，接管 CPU、内存、设备的控制权' },
+  { name: '系统服务启动', desc: '启动网络、安全、音频等后台服务（Windows 服务 / Linux systemd）' },
+  { name: '桌面环境显示', desc: '加载显卡驱动 → 启动显示服务 → 渲染桌面背景和图标' }
 ]
 </script>
 
@@ -43,95 +32,51 @@ const steps = [
   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;
 }
-
-.timeline {
-  display: flex;
-  flex-direction: column;
-}
-
-.timeline-item {
-  display: flex;
-  gap: 0.6rem;
-  padding: 0.3rem 0;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-}
-
-.timeline-item.active {
-  opacity: 1;
-}
-
-.timeline-marker {
+.timeline { display: flex; flex-direction: column; }
+.timeline-item { display: flex; gap: 0.7rem; }
+.marker {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 1.5rem;
+  width: 1.6rem;
+  flex-shrink: 0;
 }
-
-.marker-dot {
+.dot {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-brand);
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
   font-weight: 600;
-  color: var(--vp-c-text-3);
-  transition: all 0.3s;
 }
-
-.marker-dot.filled {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-
-.marker-line {
+.line {
   flex: 1;
   width: 2px;
-  background: var(--vp-c-divider);
-  min-height: 1.5rem;
-}
-
-.marker-line.filled {
   background: var(--vp-c-brand);
+  opacity: 0.3;
+  min-height: 1.2rem;
 }
-
-.timeline-content {
-  flex: 1;
-  padding-bottom: 0.8rem;
-}
-
+.content { flex: 1; padding-bottom: 0.8rem; }
 .step-name {
-  font-size: 0.78rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-text-1);
 }
-
 .step-desc {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
   color: var(--vp-c-text-3);
   margin-top: 0.15rem;
-}
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.5rem;
+  line-height: 1.5;
 }
 </style>