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

@@ -1,43 +1,80 @@
 <template>
   <div class="url-demo">
-    <div class="demo-label">URL 访问流程 ── 点击逐步演示</div>
+    <div class="demo-header">
+      <div class="demo-title">URL 访问全流程</div>
+      <button class="play-btn" @click="autoPlay" :disabled="playing">
+        {{ playing ? '播放中...' : '▶ 自动演示' }}
+      </button>
+    </div>
 
     <div class="flow">
-      <div
-        v-for="(step, index) in steps"
-        :key="step.name"
-        class="flow-step"
-        :class="{ active: currentStep >= index }"
-        @click="currentStep = index"
-      >
-        <div class="step-num">{{ index + 1 }}</div>
-        <div class="step-content">
-          <div class="step-name">{{ step.name }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
-          <div v-if="currentStep >= index && step.detail" class="step-detail">
-            {{ step.detail }}
+      <div class="flow-side client-side">
+        <div class="side-label">浏览器</div>
+      </div>
+
+      <div class="flow-steps">
+        <div
+          v-for="(step, i) in steps"
+          :key="step.name"
+          class="step"
+          :class="{ active: current >= i, highlight: current === i }"
+          @click="current = i"
+        >
+          <div class="step-line">
+            <span class="step-dot"></span>
+            <span v-if="i < steps.length - 1" class="step-connector"></span>
+          </div>
+          <div class="step-body">
+            <div class="step-head">
+              <span class="step-num">{{ i + 1 }}</span>
+              <span class="step-name">{{ step.name }}</span>
+              <span class="step-dir" :class="step.dir">{{ step.dir === 'right' ? '→' : '←' }}</span>
+            </div>
+            <div v-if="current >= i" class="step-detail">{{ step.detail }}</div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="tap-hint">👆 点击查看各步骤详情</div>
+      <div class="flow-side server-side">
+        <div class="side-label">服务器</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const currentStep = ref(0)
+import { ref, onUnmounted } from 'vue'
+
+const current = ref(-1)
+const playing = ref(false)
+let timer = null
+
 const steps = [
-  { name: 'URL 解析', desc: '提取协议、域名、路径', detail: 'https://www.example.com → 协议:https, 域名:www.example.com' },
-  { name: 'DNS 解析', desc: '域名转换为 IP 地址', detail: 'www.example.com → 93.184.216.34' },
-  { name: 'TCP 连接', desc: '建立与服务器的连接', detail: '三次握手完成' },
-  { name: 'TLS 握手', desc: '建立加密通道（HTTPS）', detail: '交换密钥，验证证书' },
-  { name: '发送请求', desc: '发送 HTTP 请求', detail: 'GET /index.html HTTP/1.1' },
-  { name: '服务器处理', desc: '后端处理请求', detail: '查询数据库，返回 HTML' },
-  { name: '返回响应', desc: '接收服务器响应', detail: 'HTTP/1.1 200 OK, Content-Type: text/html' },
-  { name: '浏览器渲染', desc: '解析并显示页面', detail: '构建 DOM 树，计算样式，绘制页面' }
+  { name: 'URL 解析', dir: 'right', detail: 'https://example.com → 协议: https, 域名: example.com, 路径: /' },
+  { name: 'DNS 解析', dir: 'right', detail: '向 DNS 服务器查询，将域名翻译为 IP 地址 93.184.216.34' },
+  { name: 'TCP 三次握手', dir: 'right', detail: 'SYN → SYN-ACK → ACK，建立可靠的传输连接' },
+  { name: 'TLS 握手', dir: 'right', detail: '交换密钥、验证证书，建立 HTTPS 加密通道' },
+  { name: '发送 HTTP 请求', dir: 'right', detail: 'GET /index.html HTTP/1.1  Host: example.com' },
+  { name: '服务器处理', dir: 'left', detail: '解析请求 → 执行业务逻辑 → 查询数据库 → 组装响应' },
+  { name: '返回 HTTP 响应', dir: 'left', detail: 'HTTP/1.1 200 OK  Content-Type: text/html' },
+  { name: '浏览器渲染', dir: 'left', detail: 'HTML → DOM 树 → 样式计算 → 布局 → 绘制到屏幕' }
 ]
+
+const autoPlay = () => {
+  current.value = -1
+  playing.value = true
+  let i = 0
+  timer = setInterval(() => {
+    current.value = i
+    i++
+    if (i >= steps.length) {
+      clearInterval(timer)
+      playing.value = false
+    }
+  }, 800)
+}
+
+onUnmounted(() => { if (timer) clearInterval(timer) })
 </script>
 
 <style scoped>
@@ -47,87 +84,110 @@ 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;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
-}
-
-.flow {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.flow-step {
-  display: flex;
-  gap: 0.6rem;
-  padding: 0.4rem;
-  border-radius: 6px;
-  opacity: 0.4;
-  transition: all 0.3s;
-  background: var(--vp-c-bg);
-}
-
-.flow-step.active {
-  opacity: 1;
-}
-
-.step-num {
-  width: 1.3rem;
-  height: 1.3rem;
-  background: var(--vp-c-divider);
-  border-radius: 50%;
+.demo-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  flex-shrink: 0;
+  margin-bottom: 0.8rem;
 }
-
-.flow-step.active .step-num {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.step-content {
-  flex: 1;
-}
-
-.step-name {
+.demo-title {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
 }
-
-.step-desc {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.1rem;
-}
-
-.step-detail {
+.play-btn {
   font-size: 0.65rem;
-  color: var(--vp-c-brand);
-  margin-top: 0.3rem;
-  padding: 0.3rem;
-  background: var(--vp-c-bg-soft);
+  padding: 0.25rem 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+.play-btn:hover:not(:disabled) { border-color: var(--vp-c-brand); }
+.play-btn:disabled { opacity: 0.5; cursor: default; }
+.flow {
+  display: flex;
+  gap: 0.5rem;
+}
+.flow-side {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 0.3rem;
+}
+.side-label {
+  writing-mode: vertical-rl;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  letter-spacing: 0.15em;
+}
+.flow-steps { flex: 1; display: flex; flex-direction: column; }
+.step {
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0.35;
+  transition: opacity 0.3s;
+}
+.step.active { opacity: 1; }
+.step.highlight .step-dot { box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.2); }
+.step-line {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 0.8rem;
+  flex-shrink: 0;
+}
+.step-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--vp-c-divider);
+  transition: all 0.3s;
+  flex-shrink: 0;
+  margin-top: 0.35rem;
+}
+.step.active .step-dot { background: var(--vp-c-brand); }
+.step-connector {
+  flex: 1;
+  width: 1px;
+  background: var(--vp-c-divider);
+  min-height: 0.8rem;
+}
+.step.active .step-connector { background: var(--vp-c-brand); opacity: 0.3; }
+.step-body { flex: 1; padding-bottom: 0.5rem; }
+.step-head { display: flex; align-items: center; gap: 0.35rem; }
+.step-num {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  min-width: 1rem;
+}
+.step.active .step-num { color: var(--vp-c-brand); }
+.step-name {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+.step-dir {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+.step-dir.right { color: var(--vp-c-brand); }
+.step-dir.left { color: #e879a0; }
+.step-detail {
+  font-size: 0.63rem;
+  color: var(--vp-c-text-3);
+  margin-top: 0.2rem;
+  padding: 0.25rem 0.4rem;
+  background: var(--vp-c-bg);
   border-radius: 4px;
   font-family: monospace;
+  line-height: 1.5;
 }
-
-.tap-hint {
-  text-align: center;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.75rem;
+@media (max-width: 480px) {
+  .flow-side { display: none; }
 }
 </style>