diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
index 4a7a257..0b1154f 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
@@ -1,14 +1,14 @@
 <!--
   BrowserRenderingDemo.vue
   浏览器渲染演示 - 拆开包裹/装修房子类比
-  压缩版：横向延展，减少纵向高度
+  压缩版：横向延展，减少纵向高度，增加自动播放逻辑
 -->
 <template>
   <div class="unboxing-demo">
-    <!-- 紧凑头部：标题+场景+步骤导航合并 -->
+    <!-- 紧凑头部：标题+步骤导航 -->
     <div class="compact-header">
       <div class="header-left">
-        <span class="title-icon">[包裹]</span>
+        <span class="title-icon">📦</span>
         <span class="header-title">拆开包裹：代码如何变成画面</span>
       </div>
       <div class="header-steps">
@@ -18,6 +18,7 @@
           @click="goToStep(index)"
           class="step-chip"
           :class="{ active: currentStep === index, completed: currentStep > index }"
+          :disabled="isAutoPlaying"
         >
           <span class="chip-num">{{ index + 1 }}</span>
           <span class="chip-name">{{ step.shortName }}</span>
@@ -25,230 +26,385 @@
       </div>
     </div>
 
-    <!-- 横向主区域：代码输入 | 处理可视化 | 屏幕输出 -->
+    <!-- 核心展示区：横向三栏布局 -->
     <div class="main-stage">
-      <!-- 左侧：代码输入 -->
-      <div class="stage-box input-box">
-        <div class="box-label">[代码包] 收到的代码</div>
-        <pre class="code-mini">&lt;div class="box"&gt;
-  &lt;h1&gt;Hello&lt;/h1&gt;
-&lt;/div&gt;
-&lt;style&gt;
-  .box { background: blue; }
-&lt;/style&gt;</pre>
+      <!-- 左侧：输入 (代码) -->
+      <div class="stage-col input-col">
+        <div class="col-header">
+          <span class="col-icon">📄</span>
+          <span class="col-title">收到的代码</span>
+        </div>
+        <div class="code-preview">
+          <div class="code-line">&lt;div class="box"&gt;</div>
+          <div class="code-line indent">Hello</div>
+          <div class="code-line">&lt;/div&gt;</div>
+          <div class="code-line style-tag">&lt;style&gt;</div>
+          <div class="code-line indent">.box { bg: blue }</div>
+          <div class="code-line style-tag">&lt;/style&gt;</div>
+        </div>
       </div>
 
-      <!-- 中间：处理过程 -->
-      <div class="stage-box process-box">
-        <div class="box-label">[{{ stepIcons[currentStep] }}] {{ steps[currentStep]?.name }}</div>
+      <!-- 中间：处理 (动画区) -->
+      <div class="stage-col process-col">
+        <div class="col-header">
+          <span class="col-icon">⚙️</span>
+          <span class="col-title">浏览器处理中...</span>
+        </div>
         
-        <!-- 步骤1: 解析HTML -->
-        <div v-if="currentStep === 0" class="process-content">
-          <div class="mini-tree">
-            <span class="tree-line">html</span>
-            <span class="tree-line indent">└─ body</span>
-            <span class="tree-line indent2 highlight">└─ div.box</span>
-          </div>
-        </div>
+        <div class="process-stage">
+          <!-- 步骤展示 -->
+          <transition name="fade" mode="out-in">
+            <div :key="currentStep" class="step-content">
+              <div class="step-visual">
+                <!-- 1. HTML解析 -->
+                <div v-if="currentStep === 0" class="visual-tree">
+                  <div class="tree-node root">html</div>
+                  <div class="tree-line">│</div>
+                  <div class="tree-node body">body</div>
+                  <div class="tree-line">│</div>
+                  <div class="tree-node div highlight">div.box</div>
+                </div>
 
-        <!-- 步骤2: 解析CSS -->
-        <div v-else-if="currentStep === 1" class="process-content">
-          <div class="mini-css">
-            <span class="css-sel">.box</span> {<br/>
-            &nbsp;&nbsp;background: <span class="css-val">blue</span>;<br/>
-            }
-          </div>
-        </div>
+                <!-- 2. CSS解析 -->
+                <div v-else-if="currentStep === 1" class="visual-css">
+                  <div class="css-card">
+                    <span class="selector">.box</span>
+                    <div class="rule">background: <span class="value">blue</span></div>
+                  </div>
+                </div>
 
-        <!-- 步骤3: 合并渲染树 -->
-        <div v-else-if="currentStep === 2" class="process-content">
-          <div class="mini-render">
-            <span class="render-tag">div.box</span>
-            <span class="render-arrow">→</span>
-            <span class="render-style">蓝色背景</span>
-          </div>
-        </div>
+                <!-- 3. 合并渲染树 -->
+                <div v-else-if="currentStep === 2" class="visual-combine">
+                  <div class="combine-item dom">DOM树</div>
+                  <div class="combine-plus">+</div>
+                  <div class="combine-item css">CSS树</div>
+                  <div class="combine-arrow">→</div>
+                  <div class="combine-result">渲染树</div>
+                </div>
 
-        <!-- 步骤4: 计算布局 -->
-        <div v-else-if="currentStep === 3" class="process-content">
-          <div class="mini-layout" :style="{ width: boxSize + 'px', height: boxSize + 'px' }">
-            {{ boxSize }}×{{ boxSize }}
-          </div>
-        </div>
+                <!-- 4. 布局计算 -->
+                <div v-else-if="currentStep === 3" class="visual-layout">
+                  <div class="layout-box" :class="{ measured: isMeasured }">
+                    <span class="measure-label" v-if="isMeasured">100px × 100px</span>
+                    <div class="ruler-h" v-if="isMeasured"></div>
+                    <div class="ruler-v" v-if="isMeasured"></div>
+                  </div>
+                </div>
 
-        <!-- 步骤5: 绘制像素 -->
-        <div v-else-if="currentStep === 4" class="process-content">
-          <div class="mini-layers">
-            <div class="layer-bar" :style="{ opacity: layerOp }">背景</div>
-            <div class="layer-bar" :style="{ opacity: layerOp }">文字</div>
-          </div>
-        </div>
+                <!-- 5. 绘制 -->
+                <div v-else-if="currentStep === 4" class="visual-paint">
+                  <div class="paint-layer bg" :class="{ painted: isPainted }">背景层</div>
+                  <div class="paint-layer text" :class="{ painted: isPainted }">文字层</div>
+                </div>
 
-        <!-- 步骤6: 合成显示 -->
-        <div v-else class="process-content">
-          <div class="mini-final">
-            <strong>Hello</strong>
-          </div>
+                <!-- 6. 合成 -->
+                <div v-else class="visual-final">
+                  <div class="final-box">Hello</div>
+                  <div class="check-mark">✨</div>
+                </div>
+              </div>
+              
+              <div class="step-desc">
+                <span class="step-badge">{{ currentStep + 1 }}. {{ steps[currentStep].name }}</span>
+                <p class="step-text">{{ steps[currentStep].desc }}</p>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
 
-      <!-- 右侧：屏幕输出 -->
-      <div class="stage-box output-box">
-        <div class="box-label">[屏幕] 显示结果</div>
-        <div class="screen-mini">
-          <div class="browser-bar-mini">
-            <span></span><span></span><span></span>
+      <!-- 右侧：输出 (屏幕) -->
+      <div class="stage-col output-col">
+        <div class="col-header">
+          <span class="col-icon">🖥️</span>
+          <span class="col-title">屏幕显示</span>
+        </div>
+        <div class="screen-preview">
+          <div class="browser-toolbar">
+            <span class="dot red"></span>
+            <span class="dot yellow"></span>
+            <span class="dot green"></span>
           </div>
-          <div class="screen-content" :class="{ styled: currentStep >= 4, final: currentStep >= 5 }">
-            <template v-if="currentStep >= 5">
-              <strong>Hello</strong>
-            </template>
-            <template v-else-if="currentStep >= 3">
-              内容
-            </template>
-            <template v-else>
-              ...
-            </template>
+          <div class="viewport">
+            <transition name="scale">
+              <div v-if="currentStep >= 5" class="final-render">
+                Hello
+              </div>
+              <div v-else-if="currentStep >= 4" class="skeleton-render">
+                <div class="sk-box"></div>
+              </div>
+            </transition>
+            <div v-if="currentStep < 4" class="loading-spinner">
+              <div class="spinner"></div>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 双栏对照说明 - 横向排列 -->
-    <div class="dual-bar">
-      <div class="bar-side">
-        <span class="bar-label">[生活] {{ steps[currentStep]?.analogy }}</span>
-      </div>
-      <div class="bar-divider">↔</div>
-      <div class="bar-side">
-        <span class="bar-label">[技术] {{ steps[currentStep]?.desc }}</span>
-      </div>
-    </div>
-
-    <!-- 控制按钮 -->
-    <div class="control-bar">
-      <button class="bar-btn" @click="prevStep" :disabled="currentStep <= 0">[上一步]</button>
-      <button class="bar-btn primary" @click="nextStep" :disabled="currentStep >= steps.length - 1">
-        {{ currentStep >= steps.length - 1 ? '[完成]' : '[下一步]' }}
-      </button>
-      <button class="bar-btn" @click="currentStep = 0">[重置]</button>
-    </div>
-
-    <!-- 完整流程 - 横向紧凑 -->
-    <div class="flow-bar" v-if="currentStep >= 5">
-      <div class="flow-items">
-        <span v-for="(step, i) in steps" :key="i" class="flow-item-mini" :class="{ highlight: i === 5 }">
-          [{{ stepIcons[i] }}] {{ step.shortName }}
+    <!-- 底部控制栏：类比说明 + 按钮 -->
+    <div class="bottom-control">
+      <div class="analogy-bar">
+        <span class="analogy-icon">💡</span>
+        <span class="analogy-text">
+          <strong>核心机制：</strong> <span v-html="steps[currentStep].analogy"></span>
         </span>
       </div>
+      
+      <div class="action-buttons">
+        <button class="ctrl-btn" @click="prevStep" :disabled="currentStep <= 0 || isAutoPlaying">
+          上一步
+        </button>
+        <button class="ctrl-btn primary" @click="toggleAutoPlay">
+          {{ isAutoPlaying ? '暂停演示' : '自动演示' }}
+        </button>
+        <button class="ctrl-btn" @click="nextStep" :disabled="currentStep >= steps.length - 1 || isAutoPlaying">
+          下一步
+        </button>
+      </div>
+    </div>
+
+    <!-- 技术答疑面板 -->
+    <div class="qa-panel" v-if="steps[currentStep].qa">
+      <div class="qa-header">
+        {{ steps[currentStep].qa.title }}
+      </div>
+      <div class="qa-content">
+        <div v-for="(item, idx) in steps[currentStep].qa.content" :key="idx" class="qa-item">
+          <div class="qa-q" v-html="'Q: ' + item.q"></div>
+          <div class="qa-a" v-html="item.a"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 
 const currentStep = ref(0)
-const boxSize = ref(0)
-const layerOp = ref(0)
-
-const stepIcons = ['清单', '图纸', '组装', '测量', '上色', '完成']
+const isAutoPlaying = ref(false)
+const isMeasured = ref(false)
+const isPainted = ref(false)
+let autoPlayTimer = null
 
 const steps = [
   {
-    id: 'parse',
+    id: 'html',
     name: '解析 HTML',
-    shortName: '解析',
-    desc: '浏览器读取HTML代码，理解页面结构。',
-    analogy: '拆开包裹，先看清单。'
+    shortName: 'DOM构建',
+    desc: '浏览器解析 HTML 文本，将其转换为内存中的 DOM 树结构。',
+    analogy: 'HTML 文件只是纯文本，浏览器无法直接操作。必须将其解析为 <strong>DOM (文档对象模型)</strong> 树，这是一种树状的数据结构，代表了页面的结构和内容，供 JavaScript 访问和修改。',
+    qa: {
+      title: '🤔 为什么需要 DOM 树？',
+      content: [
+        {
+          q: 'DOM 到底是什么？',
+          a: 'DOM 是 HTML 文档在内存中的<strong>对象表示</strong>。HTML 标签被转换为对象（如 div 对象），标签的嵌套关系被转换为<strong>父子节点关系</strong>，从而形成一棵树。'
+        },
+        {
+          q: '为什么必须是树状结构？',
+          a: '因为 HTML 本身就是嵌套的（&lt;div&gt; 包含 &lt;span&gt;）。树状结构能完美表达这种<strong>层级关系</strong>，并让浏览器能快速查找到任何一个节点（通过父找子，或通过子找父）。'
+        }
+      ]
+    }
   },
   {
-    id: 'cssom',
+    id: 'css',
     name: '解析 CSS',
-    shortName: '样式',
-    desc: '浏览器读取CSS样式，知道每个元素的样子。',
-    analogy: '看装修设计图。'
+    shortName: 'CSS构建',
+    desc: '浏览器解析 CSS 代码，构建 CSSOM 树（CSS 对象模型）。',
+    analogy: '浏览器读取所有的 CSS 规则（来源包括外部 CSS 文件、&lt;style&gt; 标签和内联样式），构建 <strong>CSSOM 树</strong>。它计算出每个 DOM 节点最终应该应用什么样式（如红色、16px字体等）。',
+    qa: {
+      title: '🤔 什么是 CSSOM？',
+      content: [
+        {
+          q: 'CSSOM 的作用是什么？',
+          a: 'CSSOM 存储了所有的样式规则。它和 DOM 树是<strong>并行构建</strong>的。浏览器必须知道每个节点"长什么样"才能开始渲染，所以 CSSOM 是渲染的必要条件。'
+        },
+        {
+          q: '样式计算是如何进行的？',
+          a: '浏览器会根据 CSS 选择器的<strong>优先级</strong>（ID &gt; 类 &gt; 标签）和<strong>继承规则</strong>（子元素继承父元素字体），计算出每个节点最终的计算样式（Computed Style）。'
+        }
+      ]
+    }
   },
   {
     id: 'render',
-    name: '合并渲染树',
-    shortName: '合并',
-    desc: '把HTML结构和CSS样式结合。',
-    analogy: '把结构图和设计图结合。'
+    name: '生成渲染树',
+    shortName: '渲染树',
+    desc: '合并 DOM 和 CSSOM，生成渲染树（Render Tree）。',
+    analogy: '浏览器将 DOM 树和 CSSOM 树结合，生成<strong>渲染树</strong>。渲染树只包含<strong>可见</strong>的节点。不可见的节点（如 &lt;head&gt;、&lt;script&gt; 或 <code>display: none</code> 的元素）会被完全剔除，不参与后续的布局和绘制。',
+    qa: {
+      title: '🤔 渲染树包含什么？',
+      content: [
+        {
+          q: '渲染树和 DOM 树一一对应吗？',
+          a: '不是。DOM 树包含所有标签，而渲染树<strong>只包含需要显示的节点</strong>。例如 <code>display: none</code> 的节点在 DOM 里有，但在渲染树里没有。'
+        },
+        {
+          q: '<code>visibility: hidden</code> 的元素在渲染树里吗？',
+          a: '在。因为它虽然看不见，但<strong>占据空间</strong>（即布局时需要留出空白）。而 <code>display: none</code> 是完全不占空间，所以不在渲染树里。'
+        }
+      ]
+    }
   },
   {
     id: 'layout',
-    name: '计算布局',
+    name: '布局计算',
     shortName: '布局',
-    desc: '计算每个元素在屏幕上的位置和大小。',
-    analogy: '丈量房间尺寸。'
+    desc: '计算渲染树中每个节点在屏幕上的精确坐标和大小。',
+    analogy: '浏览器从渲染树的根节点开始遍历，计算每个节点在视口（Viewport）内的<strong>几何信息</strong>（位置 x/y 坐标、宽度、高度）。这个过程通常被称为<strong>回流 (Reflow)</strong> 或布局 (Layout)。',
+    qa: {
+      title: '🤔 什么是回流 (Reflow)？',
+      content: [
+        {
+          q: '为什么回流很消耗性能？',
+          a: '因为页面布局是流式的。一个元素的尺寸或位置改变（如改变宽高、字体大小），可能会导致其所有子元素、兄弟元素甚至整个页面的布局都需要<strong>重新计算</strong>。'
+        }
+      ]
+    }
   },
   {
     id: 'paint',
     name: '绘制像素',
     shortName: '绘制',
-    desc: '把颜色、文字绘制到屏幕上。',
-    analogy: '刷漆、贴壁纸。'
+    desc: '将每个节点的视觉属性绘制成屏幕上的像素。',
+    analogy: '浏览器遍历渲染树，调用系统的图形接口，将每个节点的<strong>视觉样式</strong>（背景色、边框、阴影、文本内容等）绘制出来。这个过程称为<strong>重绘 (Repaint)</strong>。',
+    qa: {
+      title: '🤔 什么是重绘 (Repaint)？',
+      content: [
+        {
+          q: '重绘和回流的区别？',
+          a: '回流涉及<strong>几何尺寸</strong>的变化，必然引起重绘。但重绘（如只改变背景色、文字颜色）<strong>不影响布局</strong>，所以不会触发回流。重绘的开销比回流小得多。'
+        }
+      ]
+    }
   },
   {
     id: 'composite',
     name: '合成显示',
-    shortName: '显示',
-    desc: '把所有图层合成，最终显示。',
-    analogy: '装修完成！'
+    shortName: '合成',
+    desc: '将不同的图层进行合成，最终呈现在屏幕上。',
+    analogy: '现代浏览器为了优化性能，会将页面分成多个<strong>图层 (Layers)</strong> 独立绘制（例如 <code>transform</code> 动画、<code>fixed</code> 定位元素）。最后由 <strong>GPU</strong> 将这些图层合成在一起，显示在屏幕上。',
+    qa: {
+      title: '🤔 为什么需要图层合成？',
+      content: [
+        {
+          q: 'GPU 加速是如何工作的？',
+          a: '对于一些复杂的动画（如 3D 变换、透明度变化），浏览器会将其提升到独立的图层。这样当动画发生时，只需要 GPU 对该图层进行变换，而不需要重新触发布局和绘制，从而极大提升流畅度。'
+        }
+      ]
+    }
   }
 ]
 
-const goToStep = (step) => { currentStep.value = step }
-const nextStep = () => { if (currentStep.value < steps.length - 1) currentStep.value++ }
-const prevStep = () => { if (currentStep.value > 0) currentStep.value-- }
+// 动画触发逻辑
+watch(currentStep, (val) => {
+  if (val === 3) {
+    isMeasured.value = false
+    setTimeout(() => isMeasured.value = true, 300)
+  }
+  if (val === 4) {
+    isPainted.value = false
+    setTimeout(() => isPainted.value = true, 300)
+  }
+})
 
-watch(currentStep, (newStep) => {
-  if (newStep === 3) { boxSize.value = 0; setTimeout(() => boxSize.value = 60, 100) }
-  if (newStep === 4) { layerOp.value = 0; setTimeout(() => layerOp.value = 1, 100) }
+const goToStep = (index) => {
+  if (isAutoPlaying.value) return
+  currentStep.value = index
+}
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+const prevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+
+const toggleAutoPlay = () => {
+  if (isAutoPlaying.value) {
+    stopAutoPlay()
+  } else {
+    startAutoPlay()
+  }
+}
+
+const startAutoPlay = () => {
+  isAutoPlaying.value = true
+  if (currentStep.value === steps.length - 1) {
+    currentStep.value = 0
+  }
+  
+  const playNext = () => {
+    if (currentStep.value < steps.length - 1) {
+      currentStep.value++
+      autoPlayTimer = setTimeout(playNext, 2000)
+    } else {
+      autoPlayTimer = setTimeout(() => {
+        isAutoPlaying.value = false
+      }, 1000)
+    }
+  }
+  
+  autoPlayTimer = setTimeout(playNext, 1500)
+}
+
+const stopAutoPlay = () => {
+  isAutoPlaying.value = false
+  if (autoPlayTimer) {
+    clearTimeout(autoPlayTimer)
+    autoPlayTimer = null
+  }
+}
+
+onUnmounted(() => {
+  stopAutoPlay()
 })
 </script>
 
 <style scoped>
 .unboxing-demo {
   background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
   padding: 16px;
   margin: 16px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--vp-font-family-base);
 }
 
-/* 紧凑头部 */
+/* 头部 */
 .compact-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 12px;
+  align-items: center;
+  margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--vp-c-divider);
   flex-wrap: wrap;
+  gap: 12px;
 }
 .header-left {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.title-icon {
-  font-size: 12px;
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
+.title-icon { font-size: 18px; }
 .header-title {
+  font-weight: 600;
   font-size: 15px;
-  font-weight: 700;
   color: var(--vp-c-text-1);
 }
+
 .header-steps {
   display: flex;
   gap: 6px;
-  flex-wrap: wrap;
 }
 .step-chip {
   display: flex;
@@ -258,249 +414,451 @@ watch(currentStep, (newStep) => {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  cursor: pointer;
   font-size: 11px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
   transition: all 0.2s;
 }
-.step-chip:hover { border-color: var(--vp-c-brand); }
+.step-chip:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+}
 .step-chip.active {
   background: var(--vp-c-brand);
   border-color: var(--vp-c-brand);
   color: white;
 }
-.step-chip.completed { border-color: #67c23a; color: #67c23a; }
+.step-chip.completed {
+  color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand-dimm);
+}
 .chip-num {
   width: 14px;
   height: 14px;
-  background: var(--vp-c-divider);
+  background: rgba(0,0,0,0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 9px;
 }
-.step-chip.active .chip-num { background: rgba(255,255,255,0.3); }
+.active .chip-num { background: rgba(255,255,255,0.3); }
 
-/* 横向主区域 */
+/* 主展示区 */
 .main-stage {
   display: grid;
-  grid-template-columns: 1fr 1.5fr 1fr;
+  grid-template-columns: 1fr 2.2fr 1fr;
   gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  min-height: 240px;
 }
-.stage-box {
+
+.stage-col {
   background: var(--vp-c-bg);
   border-radius: 8px;
-  padding: 10px;
-  min-height: 100px;
-}
-.box-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-/* 代码输入 */
-.code-mini {
-  font-family: monospace;
-  font-size: 10px;
-  line-height: 1.4;
-  color: var(--vp-c-text-2);
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-/* 处理过程 */
-.process-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 70px;
-}
-.mini-tree {
-  font-family: monospace;
-  font-size: 10px;
-  line-height: 1.5;
-}
-.tree-line { display: block; }
-.indent { margin-left: 12px; }
-.indent2 { margin-left: 24px; }
-.highlight { color: var(--vp-c-brand); font-weight: 600; }
-
-.mini-css {
-  font-family: monospace;
-  font-size: 10px;
-  background: var(--vp-c-bg-soft);
-  padding: 8px 12px;
-  border-radius: 4px;
-}
-.css-sel { color: #e6a23c; }
-.css-val { color: #409eff; }
-
-.mini-render {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-}
-.render-tag {
-  padding: 3px 8px;
-  background: var(--vp-c-brand);
-  color: white;
-  border-radius: 3px;
-  font-size: 10px;
-}
-.render-arrow { color: var(--vp-c-text-3); }
-.render-style { color: var(--vp-c-text-2); }
-
-.mini-layout {
-  background: var(--vp-c-brand);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  transition: all 0.4s;
-}
-
-.mini-layers {
+  border: 1px solid var(--vp-c-divider);
   display: flex;
   flex-direction: column;
+  /* overflow: hidden;  移除 hidden 以防截断 */
+}
+
+.col-header {
+  padding: 8px 12px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  font-weight: 600;
+}
+
+/* 左侧代码 */
+.code-preview {
+  padding: 12px;
+  font-family: monospace;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  overflow-y: auto;
+}
+.indent { margin-left: 12px; }
+.style-tag { color: #e6a23c; }
+
+/* 中间动画区 */
+.process-col {
+  position: relative;
+}
+.process-stage {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+.step-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.step-visual {
+  min-height: 140px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+}
+.visual-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.visual-combine {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 4px;
+}
+.step-desc {
+  text-align: center;
   width: 100%;
 }
-.layer-bar {
-  padding: 4px 8px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 3px;
+.step-badge {
+  display: inline-block;
   font-size: 10px;
-  text-align: center;
-  transition: opacity 0.4s;
-}
-
-.mini-final {
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #409eff, #67c23a);
-  color: white;
+  padding: 2px 6px;
+  background: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand);
   border-radius: 4px;
-  font-size: 14px;
+  margin-bottom: 4px;
 }
-
-/* 屏幕输出 */
-.screen-mini {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.browser-bar-mini {
-  display: flex;
-  gap: 3px;
-  padding: 4px 6px;
-  background: var(--vp-c-divider);
-}
-.browser-bar-mini span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #ccc;
-}
-.browser-bar-mini span:nth-child(1) { background: #ff5f57; }
-.browser-bar-mini span:nth-child(2) { background: #febc2e; }
-.browser-bar-mini span:nth-child(3) { background: #28c840; }
-.screen-content {
-  padding: 16px;
-  text-align: center;
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-  min-height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.screen-content.styled {
-  background: #409eff;
-  color: white;
-}
-.screen-content.final {
-  background: linear-gradient(135deg, #409eff, #67c23a);
-}
-
-/* 双栏对照 */
-.dual-bar {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 8px;
-  align-items: center;
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin-bottom: 10px;
-}
-.bar-side { text-align: center; }
-.bar-label {
-  font-size: 11px;
-  color: var(--vp-c-text-2);
+.step-text {
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+  margin: 0;
   line-height: 1.4;
 }
-.bar-divider {
-  font-size: 12px;
+
+/* 视觉元素样式 */
+.tree-node {
+  padding: 4px 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 10px;
+  background: var(--vp-c-bg);
+}
+.tree-node.highlight {
+  border-color: var(--vp-c-brand);
   color: var(--vp-c-brand);
-  font-weight: 700;
+  font-weight: bold;
+}
+.tree-line {
+  color: var(--vp-c-divider);
+  font-size: 10px;
+  margin: 2px 0;
 }
 
-/* 控制按钮 */
-.control-bar {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-}
-.bar-btn {
-  padding: 6px 16px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 14px;
-  cursor: pointer;
+.css-card {
+  padding: 8px 12px;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid #e6a23c;
+  border-radius: 4px;
+  font-family: monospace;
   font-size: 11px;
+}
+.selector { color: #e6a23c; font-weight: bold; }
+.value { color: #409eff; }
+
+.combine-item {
+  padding: 4px 8px;
+  background: var(--vp-c-bg-alt);
+  border: 1px dashed var(--vp-c-text-3);
+  border-radius: 4px;
+  font-size: 10px;
+}
+.combine-plus, .combine-arrow {
+  margin: 0 6px;
+  color: var(--vp-c-text-3);
+}
+.combine-result {
+  padding: 4px 8px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  font-size: 10px;
+}
+
+.layout-box {
+  width: 60px;
+  height: 60px;
+  border: 2px dashed var(--vp-c-divider);
+  position: relative;
+  transition: all 0.5s;
+}
+.layout-box.measured {
+  border-color: var(--vp-c-brand);
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+}
+.ruler-h {
+  position: absolute;
+  top: -10px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--vp-c-brand);
+}
+.ruler-v {
+  position: absolute;
+  left: -10px;
+  top: 0;
+  height: 100%;
+  width: 2px;
+  background: var(--vp-c-brand);
+}
+.measure-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 9px;
+  color: var(--vp-c-brand);
+  white-space: nowrap;
+}
+
+.paint-layer {
+  padding: 6px 16px;
+  margin: 4px 0;
+  border-radius: 4px;
+  font-size: 10px;
+  text-align: center;
+  opacity: 0.3;
+  transition: opacity 0.5s;
+}
+.paint-layer.bg { background: #e1f3d8; color: #67c23a; border: 1px solid #67c23a; }
+.paint-layer.text { background: #d9ecff; color: #409eff; border: 1px solid #409eff; }
+.paint-layer.painted { opacity: 1; }
+
+.final-box {
+  width: 80px;
+  height: 80px;
+  background: #409eff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+.check-mark {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 20px;
+  animation: bounce 1s infinite;
+}
+
+/* 右侧屏幕 */
+.screen-preview {
+  flex: 1;
+  background: #f0f2f5;
+  display: flex;
+  flex-direction: column;
+}
+.dark .screen-preview { background: #1a1a1a; }
+
+.browser-toolbar {
+  height: 20px;
+  background: var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+}
+.dot { width: 6px; height: 6px; border-radius: 50%; }
+.red { background: #ff5f57; }
+.yellow { background: #febc2e; }
+.green { background: #28c840; }
+
+.viewport {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.final-render {
+  width: 60px;
+  height: 60px;
+  background: #409eff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 12px;
+}
+.skeleton-render .sk-box {
+  width: 60px;
+  height: 60px;
+  background: var(--vp-c-divider);
+  border-radius: 4px;
+}
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 底部控制 */
+.bottom-control {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.analogy-bar {
+  flex: 1;
+  min-width: 200px;
+  font-size: 12px;
   color: var(--vp-c-text-2);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.analogy-icon { font-size: 14px; }
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+.ctrl-btn {
+  padding: 5px 12px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 14px;
+  font-size: 11px;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
   transition: all 0.2s;
 }
-.bar-btn:hover:not(:disabled) { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
-.bar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-.bar-btn.primary { background: var(--vp-c-brand); border-color: var(--vp-c-brand); color: white; }
-
-/* 流程条 */
-.flow-bar {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid var(--vp-c-divider);
+.ctrl-btn:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
 }
-.flow-items {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.flow-item-mini {
-  padding: 4px 10px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  font-size: 10px;
-  color: var(--vp-c-text-2);
-}
-.flow-item-mini.highlight {
-  background: linear-gradient(135deg, #67c23a, #85ce61);
+.ctrl-btn.primary {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
   color: white;
 }
+.ctrl-btn.primary:hover:not(:disabled) {
+  background: var(--vp-c-brand-dark);
+}
+.ctrl-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 答疑面板 */
+.qa-panel {
+  margin-top: 16px;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 13px;
+}
+.qa-header {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed var(--vp-c-divider);
+}
+.qa-item {
+  margin-bottom: 8px;
+}
+.qa-item:last-child {
+  margin-bottom: 0;
+}
+.qa-q {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 2px;
+}
+.qa-a {
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  padding-left: 12px;
+  border-left: 2px solid var(--vp-c-divider);
+}
+
+/* 动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.scale-enter-active {
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.scale-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
 
 @media (max-width: 768px) {
-  .main-stage { grid-template-columns: 1fr; }
-  .compact-header { flex-direction: column; align-items: flex-start; }
-  .dual-bar { grid-template-columns: 1fr; gap: 4px; }
-  .bar-divider { display: none; }
+  .main-stage {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  .stage-col {
+    min-height: 120px;
+  }
+  .compact-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .bottom-control {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .action-buttons {
+    justify-content: center;
+  }
+}
+
+/* Markdown 样式适配 */
+.analogy-text :deep(code),
+.qa-content :deep(code) {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.9em;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background-color: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-1);
+}
+
+.analogy-text :deep(strong),
+.qa-content :deep(strong) {
+  font-weight: 600;
+  color: var(--vp-c-brand);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
index 01495e6..1173f72 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
@@ -1,724 +1,649 @@
 <!--
   DnsLookupDemo.vue
-  DNS查询演示 - 查地址簿 vs 真实DNS查询 双栏对照
-
-  用途：
-  用"查地址簿"的生活化比喻，配合真实DNS查询过程，
-  让0基础用户理解域名如何转换成IP地址。
+  DNS查询演示 - 增强技术细节版
+  
+  设计理念：
+  1. 循循善诱：通过"接力跑腿"的比喻，展示浏览器如何一步步找到IP。
+  2. 技术硬核：新增终端模拟器，展示真实的 dig/系统命令输出，解决"太抽象"的问题。
+  3. 紧凑布局：横向流式布局，固定底部详情板。
 -->
 <template>
-  <div class="dns-lookup-demo">
-    <!-- 标题区 -->
-    <div class="demo-header">
-      <div class="header-title">
-        <span class="title-icon">[地址簿]</span>
-        <span>查地址簿 vs DNS查询</span>
+  <div class="dns-compact">
+    <!-- 顶部控制栏 -->
+    <div class="top-bar">
+      <div class="title-section">
+        <span class="app-icon">🌐</span>
+        <span class="app-title">DNS 寻址原理</span>
+      </div>
+      
+      <div class="target-select">
+        <span class="label">目标：</span>
+        <select v-model="selectedTargetIndex" :disabled="isSearching" @change="reset">
+          <option v-for="(t, i) in targets" :key="t.name" :value="i">
+            {{ t.name }} ({{ t.domain }})
+          </option>
+        </select>
       </div>
-      <div class="header-subtitle">生活比喻 ↔ 技术实现 双栏对照</div>
-    </div>
 
-    <!-- 场景设置 -->
-    <div class="scenario-setup">
-      <div class="setup-text">
-        快递员要送包裹给 <strong>"{{ currentTarget.name }}"</strong>（{{ currentTarget.domain }}），
-        但他只知道名字，不知道具体门牌号...
-      </div>
-      <div class="target-selector">
-        <span class="selector-label">换个目标：</span>
-        <button
-          v-for="target in targets"
-          :key="target.name"
-          @click="selectTarget(target)"
-          class="target-chip"
-          :class="{ active: currentTarget.name === target.name }"
-          :disabled="isSearching"
+      <div class="actions">
+        <button 
+          class="action-btn primary" 
+          @click="startAutoSearch"
+          v-if="!isSearching && !isFinished"
         >
-          {{ target.name }}
+          ▶ 开始寻址
+        </button>
+        <button 
+          class="action-btn secondary" 
+          @click="nextStep"
+          v-if="isSearching && !autoPlay"
+        >
+          ⏭ 下一步
+        </button>
+        <button 
+          class="action-btn outline" 
+          @click="reset"
+          v-if="isFinished || isSearching"
+        >
+          ↺ 重置
         </button>
       </div>
     </div>
 
-    <!-- 开始查询按钮 -->
-    <div class="start-action" v-if="!isSearching && !showResult">
-      <button class="start-btn" @click="startSearch">
-        [查询] 开始查询地址
-      </button>
+    <!-- 进度条/状态展示 -->
+    <div class="status-bar">
+      <div v-if="!isSearching && !isFinished" class="status-text">
+        <span class="icon">👋</span>
+        准备出发：去问问 <strong>{{ targets[selectedTargetIndex].domain }}</strong> 的 IP 是多少？
+      </div>
+      <div v-else-if="isSearching" class="status-text running">
+        <span class="icon spin">⏳</span>
+        正在询问：{{ queryLevels[currentStep]?.analogyName }}...
+      </div>
+      <div v-else class="status-text success">
+        <span class="icon">✅</span>
+        找到了！IP 地址是：<strong>{{ targets[selectedTargetIndex].ip }}</strong>
+      </div>
     </div>
 
-    <!-- 双栏对照展示 -->
-    <div class="comparison-container" v-if="isSearching || showResult">
-      <!-- 左侧：生活比喻（查地址簿） -->
-      <div class="comparison-side analogy-side">
-        <div class="side-header">
-          <span class="side-icon">[生活]</span>
-          <span class="side-title">查地址簿流程</span>
+    <!-- 可视化流程 (横向) -->
+    <div class="flow-stage">
+      <div 
+        v-for="(level, index) in queryLevels"
+        :key="level.id"
+        class="flow-step"
+        :class="{ 
+          active: currentStep === index,
+          passed: currentStep > index,
+          pending: currentStep < index
+        }"
+        @click="jumpToStep(index)"
+      >
+        <div class="step-icon-box" :style="{ '--step-color': level.color }">
+          <span class="step-icon">{{ level.analogyIcon }}</span>
         </div>
-        <div class="analogy-flow">
-          <div
-            v-for="(level, index) in queryLevels"
-            :key="level.id"
-            class="flow-level"
-            :class="{
-              passed: currentStep > index,
-              current: currentStep === index,
-              pending: currentStep < index
-            }"
-          >
-            <div class="level-icon">{{ level.analogyIcon }}</div>
-            <div class="level-content">
-              <div class="level-name">{{ level.analogyName }}</div>
-              <div class="level-role">{{ level.analogyRole }}</div>
-              <div class="level-action" v-if="currentStep === index">
-                <span class="action-text">{{ level.analogyAction }}</span>
+        <div class="step-label">{{ level.analogyName }}</div>
+        
+        <!-- 连接线 -->
+        <div class="step-line" v-if="index < queryLevels.length - 1"></div>
+      </div>
+    </div>
+
+    <!-- 底部双面板：左侧生活比喻，右侧技术终端 -->
+    <div class="info-panels">
+      <!-- 左侧：生活场景 -->
+      <div class="detail-panel analogy-panel">
+        <transition name="fade" mode="out-in">
+          <div v-if="currentStep >= 0" class="panel-content" :key="currentStep">
+            <div class="panel-header" :style="{ color: currentLevel.color }">
+              <span class="header-icon">{{ currentLevel.analogyIcon }}</span>
+              <span class="header-title">{{ currentLevel.analogyName }} ({{ currentLevel.techName }})</span>
+            </div>
+            <div class="panel-body">
+              <p class="analogy-text">{{ currentLevel.analogyAction }}</p>
+              <div class="tech-hint-badge">
+                {{ currentLevel.techAction }}
               </div>
             </div>
           </div>
-        </div>
+          <div v-else class="panel-placeholder">
+            <span>生活场景视角</span>
+          </div>
+        </transition>
       </div>
 
-      <!-- 中间：连接指示 -->
-      <div class="connection-indicator">
-        <div class="indicator-line" v-for="i in 5" :key="i">
-          <span class="indicator-arrow">→</span>
-          <span class="indicator-text">对应</span>
+      <!-- 右侧：硬核终端 -->
+      <div class="detail-panel terminal-panel">
+        <div class="terminal-header">
+          <div class="terminal-dots">
+            <span></span><span></span><span></span>
+          </div>
+          <div class="terminal-title">Terminal</div>
         </div>
-      </div>
-
-      <!-- 右侧：技术实现（真实DNS） -->
-      <div class="comparison-side tech-side">
-        <div class="side-header">
-          <span class="side-icon">[技术]</span>
-          <span class="side-title">DNS查询流程</span>
-        </div>
-        <div class="tech-flow">
-          <div
-            v-for="(level, index) in queryLevels"
-            :key="level.id"
-            class="flow-level"
-            :class="{
-              passed: currentStep > index,
-              current: currentStep === index,
-              pending: currentStep < index
-            }"
-          >
-            <div class="level-icon" :style="{ background: level.techColor }">{{ level.techIcon }}</div>
-            <div class="level-content">
-              <div class="level-name">{{ level.techName }}</div>
-              <div class="level-role">{{ level.techRole }}</div>
-              <div class="level-action" v-if="currentStep === index">
-                <code class="action-code">{{ level.techAction }}</code>
-              </div>
+        <transition name="fade" mode="out-in">
+          <div v-if="currentStep >= 0" class="terminal-body" :key="currentStep">
+            <div class="cmd-line">
+              <span class="prompt">$</span>
+              <span class="cmd">{{ formatText(currentLevel.techCommand) }}</span>
+            </div>
+            <div class="cmd-output">
+              <pre>{{ formatText(currentLevel.techOutput) }}</pre>
             </div>
           </div>
-        </div>
+          <div v-else class="terminal-placeholder">
+            <span>Waiting for command...</span>
+          </div>
+        </transition>
       </div>
     </div>
 
-    <!-- 查询结果 -->
-    <div class="result-section" v-if="showResult">
-      <div class="result-card">
-        <div class="result-header">[成功] 查询成功！</div>
-        <div class="result-body">
-          <div class="result-row">
-            <span class="result-label">域名（名字）：</span>
-            <code class="result-value">{{ currentTarget.domain }}</code>
-          </div>
-          <div class="result-row">
-            <span class="result-label">IP地址（门牌号）：</span>
-            <code class="result-value highlight">{{ currentTarget.ip }}</code>
-          </div>
-        </div>
-      </div>
-
-      <!-- 技术说明卡片 -->
-      <div class="tech-explanation">
-        <div class="explanation-header">
-          <span class="explanation-icon">[详解]</span>
-          <span>DNS查询技术详解</span>
-        </div>
-        <div class="explanation-body">
-          <div class="explanation-item">
-            <strong>[查询] 查询类型：</strong>
-            <p><strong>递归查询</strong>：浏览器只发一次请求，本地DNS负责层层查询后返回结果（像委托代理）</p>
-            <p><strong>迭代查询</strong>：每层只告诉下一层去哪查，浏览器需要多次查询（像自己跑腿）</p>
-          </div>
-          <div class="explanation-item">
-            <strong>[缓存] 缓存机制：</strong>
-            <p>查询结果会被缓存在浏览器、操作系统、路由器、本地DNS服务器等多个层级，下次直接返回，大大加速访问。</p>
-          </div>
-          <div class="explanation-item">
-            <strong>[根] 根域名服务器：</strong>
-            <p>全球只有13组根服务器（字母A-M命名），管理所有顶级域（.com/.org/.cn等）。它们知道每个顶级域由谁管理。</p>
-          </div>
-        </div>
-      </div>
-
-      <button class="reset-btn" @click="reset">[重置] 再查一次</button>
-    </div>
-
-    <!-- 层级说明（未开始查询时显示） -->
-    <div class="levels-info" v-if="!isSearching && !showResult">
-      <div class="info-title">[对照] DNS查询层级对照表</div>
-      <div class="info-grid">
-        <div class="info-card" v-for="level in queryLevels" :key="level.id">
-          <div class="info-analogy">
-            <span class="info-icon">{{ level.analogyIcon }}</span>
-            <span class="info-name">{{ level.analogyName }}</span>
-          </div>
-          <div class="info-arrow">↓</div>
-          <div class="info-tech">
-            <span class="info-icon" :style="{ background: level.techColor }">{{ level.techIcon }}</span>
-            <span class="info-name">{{ level.techName }}</span>
-          </div>
-          <div class="info-desc">{{ level.description }}</div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onUnmounted } from 'vue'
 
 const targets = [
   { name: '百度', domain: 'baidu.com', ip: '110.242.68.66' },
   { name: '谷歌', domain: 'google.com', ip: '142.250.80.46' },
-  { name: 'GitHub', domain: 'github.com', ip: '140.82.114.4' },
-  { name: 'B站', domain: 'bilibili.com', ip: '120.92.78.57' }
+  { name: 'GitHub', domain: 'github.com', ip: '140.82.114.4' }
 ]
 
-const currentTarget = ref(targets[0])
+const selectedTargetIndex = ref(0)
+const currentStep = ref(-1)
 const isSearching = ref(false)
-const showResult = ref(false)
-const currentStep = ref(0)
+const isFinished = ref(false)
+const autoPlay = ref(false)
+let timer = null
 
 const queryLevels = [
   {
     id: 'browser',
-    analogyIcon: '自',
-    analogyName: '翻通讯录',
-    analogyRole: '快递员自己',
-    analogyAction: '先看看自己记没记过这个地址',
-    techIcon: '浏',
+    analogyName: '通讯录',
+    analogyIcon: '📒',
+    analogyAction: '先翻翻自己的通讯录（缓存），看最近有没有记过。',
+    techIcon: 'Browser',
     techName: '浏览器缓存',
-    techRole: '本地缓存',
-    techAction: '检查 DNS cache',
-    techColor: '#67c23a',
-    description: '浏览器会缓存最近访问过的域名，避免重复查询'
+    techAction: '检查 Browser DNS Cache',
+    color: '#67c23a',
+    techCommand: 'chrome://net-internals/#dns',
+    techOutput: 'Active entries: 0\nCache miss: No entry found for ${domain}',
+    qa: {
+      title: '🤔 浏览器能记多久？',
+      content: [
+        {
+          q: '是一直记着吗？',
+          a: '不是的。通常只有几分钟（比如 chrome 是一分钟）。而且每家浏览器（Chrome, Firefox）的"记性"都不太一样。'
+        }
+      ]
+    }
   },
   {
     id: 'os',
-    analogyIcon: '本',
-    analogyName: '查记事本',
-    analogyRole: '自己的记录',
-    analogyAction: '看看之前有没有记过',
-    techIcon: '系',
-    techName: '操作系统缓存',
-    techRole: 'OS DNS Cache',
-    techAction: '检查 hosts 文件',
-    techColor: '#95d475',
-    description: '操作系统也有DNS缓存，hosts文件可手动指定域名映射'
+    analogyName: '记事本',
+    analogyIcon: '📝',
+    analogyAction: '问问操作系统（管家），查查系统 hosts 文件或缓存。',
+    techIcon: 'OS',
+    techName: '系统缓存/Hosts',
+    techAction: '检查 OS Cache / hosts',
+    color: '#409eff',
+    techCommand: 'cat /etc/hosts',
+    techOutput: '127.0.0.1 localhost\n::1 localhost\n# No match for ${domain}',
+    qa: {
+      title: '🤔 什么是 hosts 文件？',
+      content: [
+        {
+          q: '它有什么用？',
+          a: '它是你电脑里的"私人通讯录"。你可以在这里手动强行指定 IP（比如开发时把 test.com 指向本机）。黑客有时也改这里来劫持网站。'
+        }
+      ]
+    }
   },
   {
-    id: 'recursive',
-    analogyIcon: '服',
-    analogyName: '社区服务中心',
-    analogyRole: '帮跑腿的人',
-    analogyAction: '帮用户查询，自己跑遍各部门',
-    techIcon: '递',
-    techName: '本地DNS服务器',
-    techRole: 'Recursive Resolver',
-    techAction: 'ISP DNS 查询',
-    techColor: '#409eff',
-    description: '通常由网络运营商提供，负责递归查询并缓存结果'
+    id: 'ldns',
+    analogyName: '传达室',
+    analogyIcon: '💁',
+    analogyAction: '问小区的传达室（本地DNS），让他帮忙去外面问。',
+    techIcon: 'LDNS',
+    techName: '本地DNS (递归)',
+    techAction: '向 ISP DNS 发起递归查询',
+    color: '#e6a23c',
+    techCommand: 'dig ${domain} @192.168.1.1',
+    techOutput: ';; QUESTION SECTION:\n;${domain}. IN A\n\n;; ANSWER SECTION:\n(empty) -> Recursion Desired',
+    qa: {
+      title: '🤔 为什么叫"递归"？',
+      content: [
+        {
+          q: '通俗点解释？',
+          a: '就像你问传达室大爷，大爷去帮你跑腿问一圈回来告诉你结果。你只问了一次，大爷跑了好几趟，这就叫递归（帮你跑到底）。'
+        }
+      ]
+    }
   },
   {
     id: 'root',
-    analogyIcon: '根',
-    analogyName: '国务院',
-    analogyRole: '最高管理机构',
-    analogyAction: '.com 归谁管？去问它！',
-    techIcon: '根',
+    analogyName: '总局',
+    analogyIcon: '🏛️',
+    analogyAction: '传达室问全球总局：".com" 归谁管？',
+    techIcon: 'Root',
     techName: '根域名服务器',
-    techRole: 'Root Server',
-    techAction: '返回 TLD 服务器地址',
-    techColor: '#e6a23c',
-    description: '全球13组，管理所有顶级域，知道.com/.cn等归谁管'
+    techAction: '查询 Root Server',
+    color: '#f56c6c',
+    techCommand: 'dig ${domain} @a.root-servers.net +norecurse',
+    techOutput: ';; AUTHORITY SECTION:\ncom. 172800 IN NS a.gtld-servers.net.\n;; ADDITIONAL SECTION:\na.gtld-servers.net. IN A 192.5.6.30',
+    qa: {
+      title: '🤔 全球只有13台吗？',
+      content: [
+        {
+          q: '那样不会被挤爆吗？',
+          a: '不是13台，是13组！每组都有几百台"分身"（镜像服务器）分布在全球，包括中国也有，所以不用担心断网。'
+        }
+      ]
+    }
   },
   {
     id: 'tld',
-    analogyIcon: '省',
-    analogyName: '省政府',
-    analogyRole: '省级管理机构',
-    analogyAction: 'baidu.com 归谁管？',
-    techIcon: '顶',
-    techName: '顶级域服务器',
-    techRole: 'TLD Server',
-    techAction: '返回权威DNS地址',
-    techColor: '#f56c6c',
-    description: '管理特定顶级域（如Verisign管理.com），知道具体域名归谁管'
+    analogyName: '分局',
+    analogyIcon: '🏢',
+    analogyAction: '去问 ".com" 分局：baidu.com 归谁管？',
+    techIcon: 'TLD',
+    techName: '顶级域名服务器',
+    techAction: '查询 TLD Server',
+    color: '#909399',
+    techCommand: 'dig ${domain} @a.gtld-servers.net +norecurse',
+    techOutput: ';; AUTHORITY SECTION:\n${domain}. 172800 IN NS ns1.${domain}.\n;; ADDITIONAL SECTION:\nns1.${domain}. IN A 202.108.22.5',
+    qa: {
+      title: '🤔 谁在管理 .com？',
+      content: [
+        {
+          q: '所有的后缀都一样吗？',
+          a: '不一样。.com 归 Verisign 公司管，.cn 归中国互联网络信息中心(CNNIC)管。所以要找不同的"分局"。'
+        }
+      ]
+    }
   },
   {
     id: 'auth',
-    analogyIcon: '户',
-    analogyName: '户籍系统',
-    analogyRole: '最终档案',
-    analogyAction: '查到具体门牌号了！',
-    techIcon: '权',
+    analogyName: '办事处',
+    analogyIcon: '📍',
+    analogyAction: '找到目标办事处：请告诉我 www 的 IP。',
+    techIcon: 'Auth',
     techName: '权威DNS服务器',
-    techRole: 'Authoritative DNS',
-    techAction: '返回 A 记录',
-    techColor: '#b37feb',
-    description: '域名所有者设置的DNS服务器，保存着域名到IP的最终映射'
+    techAction: '查询 Authoritative Server',
+    color: '#8e44ad',
+    techCommand: 'dig ${domain} @ns1.${domain} +norecurse',
+    techOutput: ';; ANSWER SECTION:\n${domain}. 600 IN A ${ip}\n;; Query time: 24 msec',
+    qa: {
+      title: '🤔 为什么叫"权威"？',
+      content: [
+        {
+          q: '它说的话最准吗？',
+          a: '对！因为它就是域名的主人（比如百度自己）管理的服务器，它说的话是一手资料，不像前面的可能只是传话。'
+        }
+      ]
+    }
   }
 ]
 
-const selectTarget = (target) => {
-  currentTarget.value = target
-  reset()
+const currentLevel = computed(() => 
+  currentStep.value >= 0 ? queryLevels[currentStep.value] : {}
+)
+
+// 简单的模板替换函数
+const formatText = (text) => {
+  if (!text) return ''
+  const currentTarget = targets[selectedTargetIndex.value]
+  return text
+    .replace(/\${domain}/g, currentTarget.domain)
+    .replace(/\${ip}/g, currentTarget.ip)
 }
 
-const startSearch = () => {
+const startAutoSearch = () => {
+  reset()
   isSearching.value = true
-  showResult.value = false
-  currentStep.value = 0
-
-  // 模拟查询过程
-  const steps = [0, 1, 2, 3, 4, 5]
-  let i = 0
-
-  const nextStep = () => {
-    if (i < steps.length) {
-      currentStep.value = steps[i]
-      i++
-      setTimeout(nextStep, 800)
-    } else {
-      setTimeout(() => {
-        showResult.value = true
-        isSearching.value = false
-      }, 500)
-    }
-  }
-
+  autoPlay.value = true
   nextStep()
 }
 
-const reset = () => {
-  isSearching.value = false
-  showResult.value = false
-  currentStep.value = 0
+const nextStep = () => {
+  if (currentStep.value < queryLevels.length - 1) {
+    currentStep.value++
+    if (autoPlay.value) {
+      timer = setTimeout(nextStep, 2500) // 增加时间给用户看终端
+    }
+  } else {
+    finish()
+  }
 }
+
+const finish = () => {
+  isFinished.value = true
+  isSearching.value = false
+  autoPlay.value = false
+}
+
+const reset = () => {
+  currentStep.value = -1
+  isSearching.value = false
+  isFinished.value = false
+  autoPlay.value = false
+  clearTimeout(timer)
+}
+
+const jumpToStep = (index) => {
+  if (isSearching.value && autoPlay.value) return
+  currentStep.value = index
+  isSearching.value = true
+  isFinished.value = false
+}
+
+onUnmounted(() => {
+  clearTimeout(timer)
+})
 </script>
 
 <style scoped>
-.dns-lookup-demo {
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
-}
-
-/* 头部 */
-.demo-header {
-  text-align: center;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.header-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-.title-icon {
-  font-size: 14px;
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-.header-subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-3);
-  margin-top: 4px;
-}
-
-/* 场景设置 */
-.scenario-setup {
-  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 16px;
-}
-.setup-text {
-  font-size: 14px;
-  color: var(--vp-c-text-1);
-  line-height: 1.6;
-  margin-bottom: 12px;
-}
-.setup-text strong {
-  color: var(--vp-c-brand);
-}
-.target-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.selector-label {
-  font-size: 12px;
-  color: var(--vp-c-text-3);
-}
-.target-chip {
-  padding: 6px 12px;
-  background: white;
+.dns-compact {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 16px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  transition: all 0.2s;
-}
-.target-chip:hover:not(:disabled) {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-.target-chip.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-.target-chip:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* 开始按钮 */
-.start-action {
-  text-align: center;
-  margin-bottom: 20px;
-}
-.start-btn {
-  padding: 12px 32px;
-  background: linear-gradient(135deg, var(--vp-c-brand), #67c23a);
-  color: white;
-  border: none;
-  border-radius: 24px;
-  cursor: pointer;
-  font-size: 15px;
-  font-weight: 600;
-  transition: all 0.3s;
-}
-.start-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
-}
-
-/* 双栏对照容器 */
-.comparison-container {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-/* 侧边栏 */
-.comparison-side {
-  background: white;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
-}
-.side-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  font-weight: 600;
-  font-size: 14px;
-  color: white;
-}
-.analogy-side .side-header {
-  background: linear-gradient(90deg, #67c23a, #95d475);
-}
-.tech-side .side-header {
-  background: linear-gradient(90deg, #409eff, #79bbff);
-}
-.side-icon {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* 流程展示 */
-.analogy-flow, .tech-flow {
-  padding: 12px;
-}
-.flow-level {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  margin-bottom: 8px;
-  background: var(--vp-c-bg-soft);
   border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-  transition: all 0.3s;
-  opacity: 0.4;
-}
-.flow-level.passed {
-  opacity: 0.7;
-  border-color: #67c23a;
-  background: rgba(103, 194, 58, 0.1);
-}
-.flow-level.current {
-  opacity: 1;
-  border-color: var(--vp-c-brand);
-  background: rgba(64, 158, 255, 0.1);
-  transform: scale(1.02);
-}
-.level-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.analogy-flow .level-icon {
-  background: #fff3e0;
-  color: #666;
-}
-.level-content {
-  flex: 1;
-}
-.level-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-.level-role {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-.level-action {
-  margin-top: 4px;
-}
-.action-text {
-  font-size: 11px;
-  color: var(--vp-c-brand);
-  background: white;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-.action-code {
-  font-size: 10px;
-  color: var(--vp-c-brand);
-  background: white;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: monospace;
+  background: var(--vp-c-bg);
+  padding: 16px;
+  margin: 16px 0;
+  font-size: 14px;
 }
 
-/* 连接指示器 */
-.connection-indicator {
+.top-bar {
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 40px 0;
-}
-.indicator-line {
-  display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  gap: 2px;
-}
-.indicator-arrow {
-  font-size: 18px;
-  color: var(--vp-c-brand);
-  font-weight: bold;
-}
-.indicator-text {
-  font-size: 10px;
-  color: var(--vp-c-text-3);
-  writing-mode: vertical-rl;
-}
-
-/* 结果区域 */
-.result-section {
-  animation: fadeIn 0.5s ease;
-}
-.result-card {
-  background: linear-gradient(135deg, #67c23a, #85ce61);
-  border-radius: 12px;
-  padding: 20px;
-  color: white;
   margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
 }
-.result-header {
-  font-size: 16px;
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-.result-row {
+
+.title-section {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
-  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
 }
-.result-label {
-  opacity: 0.9;
+
+.target-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
 }
-.result-value {
-  font-family: monospace;
-  background: rgba(255,255,255,0.2);
+
+.target-select select {
   padding: 4px 8px;
   border-radius: 4px;
-}
-.result-value.highlight {
-  background: rgba(255,255,255,0.3);
-  font-weight: 600;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
 }
 
-/* 技术说明 */
-.tech-explanation {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+.action-btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
 }
-.explanation-header {
+
+.action-btn.primary { background: var(--vp-c-brand); color: white; }
+.action-btn.secondary { background: var(--vp-c-bg-alt); border-color: var(--vp-c-divider); color: var(--vp-c-text-1); }
+.action-btn.outline { border: 1px solid var(--vp-c-divider); color: var(--vp-c-text-2); background: transparent; }
+
+.status-bar {
+  background: var(--vp-c-bg-soft);
+  padding: 8px 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  text-align: center;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-text strong { color: var(--vp-c-brand); margin: 0 4px; }
+
+/* 流程图部分 */
+.flow-stage {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  padding: 0 4px;
+  position: relative;
+  overflow-x: auto;
+}
+
+.flow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  min-width: 50px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all 0.3s;
+}
+
+.flow-step:last-child { flex: 0 0 auto; }
+.flow-step.active, .flow-step.passed { opacity: 1; }
+
+.step-icon-box {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 2;
+  transition: all 0.3s;
+  font-size: 18px;
+}
+
+.flow-step.active .step-icon-box {
+  border-color: var(--step-color);
+  background: var(--step-color);
+  color: white;
+  transform: scale(1.1);
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.flow-step.passed .step-icon-box {
+  border-color: var(--step-color);
+  color: var(--step-color);
+}
+
+.step-label {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+}
+
+.flow-step.active .step-label {
+  color: var(--step-color);
+  font-weight: bold;
+}
+
+.step-line {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--vp-c-divider);
+  z-index: 1;
+}
+
+.flow-step.passed .step-line { background: var(--step-color); }
+
+/* 底部双面板布局 */
+.info-panels {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  .info-panels { grid-template-columns: 1fr; }
+}
+
+.detail-panel {
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
+  overflow: hidden;
+  height: 180px; /* 固定高度防止跳动 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 左侧生活比喻面板 */
+.analogy-panel {
+  padding: 16px;
+  position: relative;
+}
+
+.panel-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.explanation-icon {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--vp-c-brand);
-}
-.explanation-item {
-  margin-bottom: 12px;
-}
-.explanation-item strong {
-  display: block;
-  font-size: 13px;
-  color: var(--vp-c-text-1);
-  margin-bottom: 4px;
-}
-.explanation-item p {
-  margin: 4px 0;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-}
-
-/* 重置按钮 */
-.reset-btn {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  transition: all 0.2s;
-}
-.reset-btn:hover {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-
-/* 层级信息 */
-.levels-info {
-  margin-top: 20px;
-}
-.info-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 12px;
-}
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-}
-.info-card {
-  background: white;
-  border-radius: 10px;
-  padding: 12px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-}
-.info-analogy, .info-tech {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-.info-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-}
-.info-analogy .info-icon {
-  background: #fff3e0;
-  color: #666;
-}
-.info-name {
-  font-size: 12px;
-  font-weight: 600;
-}
-.info-arrow {
   font-size: 16px;
-  color: var(--vp-c-brand);
-  margin: 4px 0;
+  font-weight: 600;
+  margin-bottom: 12px;
 }
-.info-desc {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
+
+.panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.analogy-text {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--vp-c-text-1);
+}
+
+.tech-hint-badge {
+  display: inline-block;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  align-self: flex-start;
   margin-top: 8px;
+}
+
+.panel-placeholder {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vp-c-text-3);
+  font-size: 14px;
+}
+
+/* 右侧终端面板 */
+.terminal-panel {
+  background: #1e1e1e; /* 强制深色背景 */
+  border-color: #333;
+  color: #d4d4d4;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+
+.terminal-header {
+  background: #2d2d2d;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #333;
+}
+
+.terminal-dots {
+  display: flex;
+  gap: 6px;
+  margin-right: 12px;
+}
+
+.terminal-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #555;
+}
+.terminal-dots span:nth-child(1) { background: #ff5f56; }
+.terminal-dots span:nth-child(2) { background: #ffbd2e; }
+.terminal-dots span:nth-child(3) { background: #27c93f; }
+
+.terminal-title {
+  font-size: 12px;
+  color: #999;
+}
+
+.terminal-body {
+  padding: 12px;
+  font-size: 12px;
   line-height: 1.4;
+  overflow-y: auto;
+  flex: 1;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+.cmd-line {
+  display: flex;
+  gap: 8px;
+  color: #fff;
+  margin-bottom: 8px;
 }
 
-/* 响应式 */
-@media (max-width: 768px) {
-  .comparison-container {
-    grid-template-columns: 1fr;
-  }
-  .connection-indicator {
-    flex-direction: row;
-    padding: 8px 0;
-    justify-content: center;
-    gap: 16px;
-  }
-  .indicator-text {
-    writing-mode: horizontal-tb;
-  }
+.prompt { color: #27c93f; font-weight: bold; }
+.cmd { color: #fff; }
+
+.cmd-output pre {
+  margin: 0;
+  color: #aaa;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.terminal-placeholder {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #555;
+  font-size: 13px;
+}
+
+.spin {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin { 100% { transform: rotate(360deg); } }
+
+/* Dark mode 适配 - 这里主要针对非终端部分 */
+:root.dark .dns-compact {
+  background: var(--vp-c-bg);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
index 9be8441..c9cf206 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
@@ -1,135 +1,126 @@
 <!--
   HttpExchangeDemo.vue
-  HTTP请求响应演示 - 快递员送达对话类比
-
-  用途：
-  用"快递员和收件人对话"的生活化比喻，让用户理解HTTP请求和响应的过程。
-  把枯燥的HTTP协议变成直观的对话场景。
+  HTTP请求响应演示 - 紧凑交互版
+  
+  设计理念：
+  1. 循循善诱：用"快递员投递"类比 HTTP 请求响应。
+  2. 紧凑布局：横向舞台，固定底部详情板。
 -->
 <template>
-  <div class="delivery-dialog-demo">
-    <!-- 标题 -->
-    <div class="dialog-header">
-      <span class="dialog-icon">[送达]</span>
-      <span class="dialog-title">送达对话：请求与响应</span>
-    </div>
-
-    <!-- 场景选择 -->
-    <div class="scenario-selector">
-      <div class="selector-label">选择送达场景：</div>
-      <div class="scenario-buttons">
-        <button
-          v-for="scene in scenarios"
-          :key="scene.id"
-          @click="selectScenario(scene)"
-          class="scenario-btn"
-          :class="{ active: currentScenario?.id === scene.id }"
-          :disabled="isDelivering"
+  <div class="http-compact">
+    <!-- 顶部标题与场景选择 -->
+    <div class="top-bar">
+      <div class="title-section">
+        <span class="app-icon">📦</span>
+        <span class="app-title">HTTP 请求/响应</span>
+      </div>
+      
+      <div class="scenario-tabs">
+        <button 
+          v-for="s in scenarios" 
+          :key="s.id"
+          @click="selectScenario(s)"
+          class="tab-btn"
+          :class="{ active: currentScenario.id === s.id }"
+          :disabled="isAnimating"
         >
-          <span class="btn-text">{{ scene.name }}</span>
+          {{ s.name }}
+        </button>
+      </div>
+
+      <div class="actions">
+         <button 
+          class="action-btn primary" 
+          @click="toggleAutoPlay"
+        >
+          {{ isAutoPlaying ? '⏸' : '▶ 演示' }}
+        </button>
+        <button 
+          class="action-btn outline" 
+          @click="reset"
+        >
+          ↺
         </button>
       </div>
     </div>
 
-    <!-- 对话场景 -->
-    <div class="dialog-scene" v-if="currentScenario">
-      <div class="scene-background">
-        <!-- 快递员（请求方） -->
-        <div class="character courier">
-          <div class="char-avatar">送</div>
-          <div class="char-name">快递员（浏览器）</div>
+    <!-- 核心可视化舞台 -->
+    <div class="stage-area">
+      <!-- 客户端 -->
+      <div class="actor client">
+        <div class="avatar-box">
+          <span class="avatar-icon">🧑‍💻</span>
+          <span class="avatar-label">浏览器</span>
+        </div>
+      </div>
+
+      <!-- 传输通道 -->
+      <div class="channel">
+        <div class="channel-bg"></div>
+        
+        <!-- 请求包 -->
+        <div class="packet request" :class="{ moving: step === 1, done: step > 1 }">
+          <span class="packet-icon">📤</span>
+          <span class="packet-label">GET</span>
         </div>
 
-        <!-- 对话区域 -->
-        <div class="conversation-area">
-          <!-- 请求消息 -->
-          <div class="message request" :class="{ sent: step >= 1 }">
-            <div class="message-bubble">
-              <div class="bubble-header">
-                <span class="method-badge" :class="currentScenario.method.toLowerCase()">
-                  {{ currentScenario.method }}
-                </span>
-                <span class="path-text">{{ currentScenario.path }}</span>
-              </div>
-              <div class="bubble-body">{{ currentScenario.requestText }}</div>
-            </div>
-            <div class="message-meta">请求</div>
-          </div>
-
-          <!-- 传输动画 -->
-          <div class="transit-animation" v-if="step === 2">
-            <div class="transit-line"></div>
-            <div class="transit-package">包</div>
-          </div>
-
-          <!-- 响应消息 -->
-          <div class="message response" :class="{ sent: step >= 3 }">
-            <div class="message-meta">响应</div>
-            <div class="message-bubble" :class="currentScenario.statusType">
-              <div class="bubble-header">
-                <span class="status-badge" :class="currentScenario.statusType">
-                  {{ currentScenario.status }}
-                </span>
-                <span class="status-text">{{ currentScenario.statusText }}</span>
-              </div>
-              <div class="bubble-body">{{ currentScenario.responseText }}</div>
-            </div>
-          </div>
+        <!-- 响应包 -->
+        <div class="packet response" :class="{ moving: step === 2, done: step > 2 }" v-if="step >= 2">
+          <span class="packet-icon">📦</span>
+          <span class="packet-label">{{ currentScenario.status }}</span>
         </div>
+      </div>
 
-        <!-- 收件人（响应方） -->
-        <div class="character recipient">
-          <div class="char-avatar">收</div>
-          <div class="char-name">收件人（服务器）</div>
+      <!-- 服务器 -->
+      <div class="actor server">
+        <div class="avatar-box">
+          <span class="avatar-icon">🏢</span>
+          <span class="avatar-label">服务器</span>
         </div>
       </div>
     </div>
 
-    <!-- 控制按钮 -->
-    <div class="dialog-controls">
-      <button
-        class="control-btn primary"
-        @click="nextStep"
-        :disabled="isDelivering || step >= 3"
-      >
-        {{ step === 0 ? '[开始]' : step === 3 ? '对话完成' : '[下一步]' }}
-      </button>
-      <button class="control-btn" @click="reset" v-if="step > 0">
-        [重置]
-      </button>
-    </div>
+    <!-- 底部详情面板 (固定高度) -->
+    <div class="detail-panel">
+      <transition name="fade" mode="out-in">
+        <div v-if="step > 0" class="detail-content" :key="step">
+           <!-- 左侧状态徽章 -->
+           <div class="detail-left" :style="{ borderColor: getStatusColor() }">
+             <div class="status-badge" :class="currentScenario.statusType">
+               {{ step === 1 ? '请求中' : currentScenario.status + ' ' + currentScenario.statusText }}
+             </div>
+           </div>
+           
+           <div class="detail-divider"></div>
 
-    <!-- 状态码说明 -->
-    <div class="status-legend">
-      <div class="legend-title">[对照] HTTP状态码速查：</div>
-      <div class="legend-grid">
-        <div class="legend-item success">
-          <span class="status-dot"></span>
-          <span class="status-code">2xx</span>
-          <span class="status-meaning">成功送达</span>
+           <!-- 右侧详情 -->
+           <div class="detail-right">
+             <div class="info-row">
+               <span class="tag life">快递员说</span>
+               <span class="text highlight">
+                 {{ step === 1 ? currentScenario.requestText : currentScenario.responseText }}
+               </span>
+             </div>
+             <div class="info-row">
+               <span class="tag tech">技术报文</span>
+               <span class="text code">
+                 {{ step === 1 ? `${currentScenario.method} ${currentScenario.path} HTTP/1.1` : `HTTP/1.1 ${currentScenario.status} ${currentScenario.statusText}` }}
+               </span>
+             </div>
+           </div>
         </div>
-        <div class="legend-item redirect">
-          <span class="status-dot"></span>
-          <span class="status-code">3xx</span>
-          <span class="status-meaning">地址变更</span>
+        
+        <div v-else class="detail-placeholder">
+          <span class="guide-bounce">📦</span>
+          <span>选择一个场景，点击"演示"看看发生了什么</span>
         </div>
-        <div class="legend-item client-error">
-          <span class="status-dot"></span>
-          <span class="status-code">4xx</span>
-          <span class="status-meaning">请求有误</span>
-        </div>
-        <div class="legend-item server-error">
-          <span class="status-dot"></span>
-          <span class="status-code">5xx</span>
-          <span class="status-meaning">服务器问题</span>
-        </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onUnmounted } from 'vue'
 
 const scenarios = [
   {
@@ -137,397 +128,381 @@ const scenarios = [
     name: '正常送达',
     method: 'GET',
     path: '/index.html',
-    requestText: '您好，这是您的包裹，请签收！',
+    requestText: '您好，请给我 index.html 的包裹！',
     status: '200',
     statusText: 'OK',
     statusType: 'success',
-    responseText: '好的，收到了，谢谢！'
+    responseText: '好的，这是您的 index.html，请签收！',
+    qa: {
+      title: '🤔 200 OK 是什么意思？',
+      content: [
+        {
+          q: '200 这个数字代表什么？',
+          a: '就像快递单上的"已妥投"。代表一切顺利，服务器成功找到了你要的东西并给了你。'
+        },
+        {
+          q: 'GET 是什么？',
+          a: '就像你对服务员说"给我来一份菜单"。是向服务器"索要"东西的意思。绝大多数网页访问都是 GET 请求。'
+        }
+      ]
+    }
   },
   {
     id: 'notfound',
-    name: '地址错误',
+    name: '查无此人',
     method: 'GET',
     path: '/nopage',
-    requestText: '您好，送包裹到这个地方。',
+    requestText: '您好，我要找 nopage 这个人。',
     status: '404',
     statusText: 'Not Found',
-    statusType: 'client-error',
-    responseText: '这里没有这个人，您送错地方了。'
+    statusType: 'error',
+    responseText: '抱歉，这里查无此人 (404)。',
+    qa: {
+      title: '🤔 为什么叫 404？',
+      content: [
+        {
+          q: '是谁的错？',
+          a: '通常是"你"（客户端）的错。4开头的代码都代表客户端问题，比如你地址输错了，或者这个网页已经被删除了。'
+        }
+      ]
+    }
   },
   {
     id: 'redirect',
-    name: '地址变更',
+    name: '搬家了',
     method: 'GET',
-    path: '/old-address',
-    requestText: '您好，送包裹到这个地址。',
+    path: '/old-path',
+    requestText: '您好，送到 old-path 这里。',
     status: '301',
     statusText: 'Moved',
-    statusType: 'redirect',
-    responseText: '这里搬走了，请送到新地址。'
+    statusType: 'warn',
+    responseText: '这里搬家了，请去新地址 (301)。',
+    qa: {
+      title: '🤔 301 重定向是什么？',
+      content: [
+        {
+          q: '浏览器会怎么做？',
+          a: '浏览器收到 301 后，会自动去访问新的地址。这个过程很快，你可能都感觉不到。'
+        },
+        {
+          q: '为什么要重定向？',
+          a: '就像店铺搬迁要在门口贴个告示。保证收藏了旧网址的老顾客也能找到新店。'
+        }
+      ]
+    }
   },
   {
-    id: 'error',
-    name: '家中故障',
-    method: 'POST',
-    path: '/api/order',
-    requestText: '您好，我来送您订购的商品。',
+    id: 'servererror',
+    name: '系统崩溃',
+    method: 'GET',
+    path: '/api/data',
+    requestText: '您好，我要取数据。',
     status: '500',
     statusText: 'Error',
-    statusType: 'server-error',
-    responseText: '抱歉，我们家系统出问题了，暂时无法接收。'
+    statusType: 'error',
+    responseText: '抱歉，仓库塌了，暂时无法取货 (500)。',
+    qa: {
+      title: '🤔 500 是谁的错？',
+      content: [
+        {
+          q: '我能修好它吗？',
+          a: '不能。5开头的代码代表"服务器"出问题了（比如代码崩了、数据库挂了）。跟你没关系，只能等待网站管理员修复。'
+        }
+      ]
+    }
   }
 ]
 
 const currentScenario = ref(scenarios[0])
-const step = ref(0)
-const isDelivering = ref(false)
+const step = ref(0) // 0: Idle, 1: Requesting, 2: Responding, 3: Done
+const isAnimating = ref(false)
+const isAutoPlaying = ref(false)
+let timer = null
 
-const selectScenario = (scenario) => {
-  currentScenario.value = scenario
+const selectScenario = (s) => {
+  if (isAnimating.value) return
+  currentScenario.value = s
   reset()
 }
 
-const nextStep = () => {
-  if (step.value < 3) {
-    isDelivering.value = true
-    step.value++
-
-    if (step.value === 2) {
-      setTimeout(() => {
-        step.value++
-        isDelivering.value = false
-      }, 1000)
-    } else {
-      isDelivering.value = false
-    }
+const toggleAutoPlay = () => {
+  if (isAutoPlaying.value) {
+    reset()
+  } else {
+    startAnimation()
   }
 }
 
+const startAnimation = () => {
+  if (isAnimating.value) return
+  isAnimating.value = true
+  isAutoPlaying.value = true
+  step.value = 1
+  
+  // Step 1: Request (Client -> Server)
+  timer = setTimeout(() => {
+    step.value = 2
+    // Step 2: Response (Server -> Client)
+    timer = setTimeout(() => {
+      step.value = 3
+      isAnimating.value = false
+      isAutoPlaying.value = false
+    }, 1500)
+  }, 1500)
+}
+
 const reset = () => {
+  clearTimeout(timer)
   step.value = 0
-  isDelivering.value = false
+  isAnimating.value = false
+  isAutoPlaying.value = false
 }
+
+const getStatusColor = () => {
+  if (step.value === 1) return '#3b82f6' // Blue for request
+  const type = currentScenario.value.statusType
+  if (type === 'success') return '#10b981'
+  if (type === 'warn') return '#f59e0b'
+  if (type === 'error') return '#ef4444'
+  return '#909399'
+}
+
+onUnmounted(() => {
+  clearTimeout(timer)
+})
 </script>
 
 <style scoped>
-.delivery-dialog-demo {
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+.http-compact {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  padding: 16px;
+  margin: 16px 0;
+  font-size: 14px;
 }
 
-/* 头部 */
-.dialog-header {
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.title-section {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.dialog-icon {
-  font-size: 14px;
-  color: var(--vp-c-brand);
+  gap: 8px;
   font-weight: 600;
-}
-.dialog-title {
-  font-size: 17px;
-  font-weight: 700;
   color: var(--vp-c-text-1);
 }
 
-/* 场景选择 */
-.scenario-selector {
-  margin-bottom: 20px;
-}
-.selector-label {
-  font-size: 13px;
-  color: var(--vp-c-text-3);
-  margin-bottom: 10px;
-}
-.scenario-buttons {
+.scenario-tabs {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.scenario-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.scenario-btn:hover:not(:disabled) {
-  border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-}
-.scenario-btn.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-.scenario-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.btn-text { font-size: 13px; }
-
-/* 对话场景 */
-.dialog-scene {
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-.scene-background {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+  background: var(--vp-c-bg-alt);
+  padding: 2px;
+  border-radius: 6px;
+  gap: 2px;
 }
 
-/* 角色 */
-.character {
-  text-align: center;
-  flex-shrink: 0;
-}
-.char-avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  font-weight: 600;
-  color: white;
-  margin-bottom: 8px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-.courier .char-avatar {
-  background: linear-gradient(135deg, #409eff, #67c23a);
-}
-.recipient .char-avatar {
-  background: linear-gradient(135deg, #e6a23c, #f56c6c);
-}
-.char-name {
+.tab-btn {
+  padding: 2px 10px;
+  border-radius: 4px;
   font-size: 12px;
-  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.tab-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
   font-weight: 500;
 }
 
-/* 对话区域 */
-.conversation-area {
-  flex: 1;
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn.primary {
+  background: var(--vp-c-brand);
+  color: white;
+  border: 1px solid var(--vp-c-brand);
+}
+
+.action-btn.outline {
+  background: transparent;
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+}
+
+/* 舞台区 */
+.stage-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 0 30px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.actor {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
-
-.message {
-  display: flex;
   align-items: center;
-  gap: 12px;
-  opacity: 0.3;
-  transform: translateY(10px);
-  transition: all 0.4s;
-}
-.message.sent {
-  opacity: 1;
-  transform: translateY(0);
-}
-.message.request {
-  justify-content: flex-end;
-}
-.message.response {
-  justify-content: flex-start;
+  width: 60px;
+  z-index: 2;
 }
 
-.message-bubble {
-  max-width: 280px;
-  padding: 14px;
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-}
-.message.request .message-bubble {
-  background: #409eff;
-  border-color: #409eff;
-  color: white;
-}
-.message.response .message-bubble.success {
-  background: #67c23a;
-  border-color: #67c23a;
-  color: white;
-}
-.message.response .message-bubble.redirect {
-  background: #e6a23c;
-  border-color: #e6a23c;
-  color: white;
-}
-.message.response .message-bubble.client-error {
-  background: #f56c6c;
-  border-color: #f56c6c;
-  color: white;
-}
-.message.response .message-bubble.server-error {
-  background: #909399;
-  border-color: #909399;
-  color: white;
-}
+.avatar-icon { font-size: 28px; }
+.avatar-label { font-size: 12px; color: var(--vp-c-text-2); margin-top: 4px; }
 
-.bubble-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid rgba(255,255,255,0.2);
-}
-.method-badge, .status-badge {
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-  font-family: monospace;
-  background: rgba(255,255,255,0.2);
-}
-.path-text, .status-text {
-  font-size: 12px;
-  opacity: 0.9;
-}
-.bubble-body {
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.message-meta {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-  font-weight: 500;
-}
-
-/* 传输动画 */
-.transit-animation {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
+.channel {
+  flex: 1;
   height: 40px;
+  margin: 0 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
 }
-.transit-line {
+
+.channel-bg {
+  position: absolute;
   width: 100%;
   height: 2px;
   background: var(--vp-c-divider);
+  top: 50%;
 }
-.transit-package {
+
+.packet {
   position: absolute;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--vp-c-brand);
-  animation: deliver 1s ease-in-out;
-}
-
-@keyframes deliver {
-  0% { transform: translateX(-100px); }
-  50% { transform: translateX(0) scale(1.2); }
-  100% { transform: translateX(100px); }
-}
-
-/* 控制按钮 */
-.dialog-controls {
   display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-.control-btn {
-  padding: 12px 24px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 24px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--vp-c-text-2);
-  transition: all 0.3s;
-}
-.control-btn:hover:not(:disabled) {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-.control-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.control-btn.primary {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-.control-btn.primary:hover:not(:disabled) {
-  background: #66b1ff;
+  flex-direction: column;
+  align-items: center;
+  transition: all 1.5s ease-in-out;
+  opacity: 0;
+  top: 0;
 }
 
-/* 状态码说明 */
-.status-legend {
-  padding: 16px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
+.packet-icon { font-size: 20px; }
+.packet-label { font-size: 10px; color: var(--vp-c-text-2); background: var(--vp-c-bg); padding: 0 2px; }
+
+.packet.request { left: 0; opacity: 1; }
+.packet.request.moving { left: 100%; transform: translateX(-100%); opacity: 0; } 
+/* Request moves from 0 to 100% then disappears */
+
+.packet.response { left: 100%; transform: translateX(-100%); opacity: 0; }
+.packet.response.moving { left: 0; transform: translateX(0); opacity: 1; }
+/* Response starts at 100%, moves to 0 */
+
+/* 动画调整 */
+.packet.request.moving {
+  animation: sendRequest 1.5s forwards;
 }
-.legend-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 12px;
+
+.packet.response.moving {
+  animation: sendResponse 1.5s forwards;
 }
-.legend-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
+
+@keyframes sendRequest {
+  0% { left: 0; opacity: 1; transform: translateX(0); }
+  90% { left: 100%; opacity: 1; transform: translateX(-100%); }
+  100% { left: 100%; opacity: 0; transform: translateX(-100%); }
 }
-.legend-item {
+
+@keyframes sendResponse {
+  0% { left: 100%; opacity: 1; transform: translateX(-100%); }
+  100% { left: 0; opacity: 1; transform: translateX(0); }
+}
+
+/* 详情面板 */
+.detail-panel {
+  height: 80px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.detail-content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.detail-left {
+  padding-right: 16px;
+  border-right: 2px solid transparent;
+}
+
+.status-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+.status-badge.success { background: #10b981; }
+.status-badge.warn { background: #f59e0b; }
+.status-badge.error { background: #ef4444; }
+
+.detail-divider {
+  width: 1px;
+  height: 40px;
+  background: var(--vp-c-divider);
+  margin: 0 16px;
+}
+
+.detail-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-row {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-}
-.status-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.legend-item.success .status-dot { background: #67c23a; }
-.legend-item.redirect .status-dot { background: #e6a23c; }
-.legend-item.client-error .status-dot { background: #f56c6c; }
-.legend-item.server-error .status-dot { background: #909399; }
-.status-code {
-  font-family: monospace;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.status-meaning {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
 }
 
-@media (max-width: 640px) {
-  .scene-background {
-    flex-direction: column;
-  }
-  .character {
-    order: -1;
-  }
-  .legend-grid {
-    grid-template-columns: 1fr;
-  }
+.tag {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
 }
+.tag.life { background: #e6f7ff; color: #1890ff; }
+.tag.tech { background: #f6ffed; color: #52c41a; }
+
+.text { font-size: 13px; color: var(--vp-c-text-1); }
+.text.highlight { font-weight: 500; color: var(--vp-c-brand); }
+.text.code { font-family: monospace; }
+
+.detail-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--vp-c-text-3);
+  width: 100%;
+  justify-content: center;
+}
+
+.guide-bounce { animation: bounce 1.5s infinite; }
+@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
index 4cbdb9d..960a129 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
@@ -1,136 +1,166 @@
 <!--
   TcpHandshakeDemo.vue
-  TCP三次握手演示 - 打电话确认类比
-
-  用途：
-  用"打电话确认对方是否在家"的生活化比喻，让用户理解TCP三次握手的必要性。
-  把枯燥的技术概念变成直观的对话过程。
+  TCP三次握手演示 - 紧凑交互版
+  
+  设计理念：
+  1. 循循善诱：用"打电话"的生活场景类比 TCP 连接建立过程。
+  2. 紧凑布局：保留核心可视化区，使用固定底部详情板代替长列表。
 -->
 <template>
-  <div class="phone-call-demo">
-    <!-- 标题 -->
-    <div class="call-header">
-      <span class="call-icon">[电话]</span>
-      <span class="call-title">打电话确认：建立可靠连接</span>
-    </div>
-
-    <!-- 场景说明 -->
-    <div class="scenario-box">
-      <div class="scenario-text">
-        快递员到了<strong>"{{ targetAddress }}"</strong>附近，但他需要确认收件人是否在家，才能确保包裹能成功送达。
+  <div class="tcp-compact">
+    <!-- 顶部标题与控制 -->
+    <div class="top-bar">
+      <div class="title-section">
+        <span class="app-icon">📞</span>
+        <span class="app-title">TCP 三次握手</span>
+      </div>
+      
+      <div class="actions">
+         <button 
+          class="action-btn primary" 
+          @click="nextStep"
+          :disabled="currentStep >= 3"
+          v-if="currentStep < 3"
+        >
+          {{ currentStep === 0 ? '▶ 开始拨号' : '下一步 ➔' }}
+        </button>
+        <button 
+          class="action-btn outline" 
+          @click="reset"
+        >
+          ↺ 重置
+        </button>
       </div>
     </div>
 
-    <!-- 模式切换 -->
-    <div class="mode-toggle">
-      <button
-        v-for="mode in modes"
-        :key="mode.id"
-        @click="currentMode = mode.id"
-        class="mode-btn"
-        :class="{ active: currentMode === mode.id }"
-      >
-        {{ mode.label }}
-      </button>
-    </div>
-
-    <!-- 通话可视化 -->
-    <div class="call-visualization">
-      <!-- 左侧：快递员（客户端） -->
-      <div class="caller-side">
-        <div class="avatar-box client">
-          <div class="avatar">员</div>
-          <div class="avatar-label">快递员（你的电脑）</div>
+    <!-- 核心可视化舞台 -->
+    <div class="stage-area">
+      <!-- 左侧：客户端/快递员 -->
+      <div class="actor client">
+        <div class="avatar-box">
+          <span class="avatar-icon">🧑‍💻</span>
+          <span class="avatar-label">客户端 (你)</span>
         </div>
-        <div class="speech-bubble client" v-if="currentStep >= 1">
-          <div class="bubble-content">
-            {{ currentMode === 'simple' ? '喂，在家吗？我是快递员！' : 'SYN: 请求连接' }}
+        <transition name="pop">
+          <div class="bubble client" v-if="currentStep >= 1">
+            {{ getBubbleText(1) }}
           </div>
-          <div class="bubble-arrow"></div>
+        </transition>
+      </div>
+
+      <!-- 中间：连接状态线 -->
+      <div class="connection-line">
+        <div class="line-bg"></div>
+        <div class="signal-packet" :class="getSignalClass()">
+          <span class="packet-icon" v-if="currentStep > 0">{{ getSignalIcon() }}</span>
+        </div>
+        <div class="status-badge" :class="{ connected: currentStep === 3 }">
+          {{ currentStep === 3 ? '✅ 连接建立' : '⏳ 连接中...' }}
         </div>
       </div>
 
-      <!-- 中间：信号传输 -->
-      <div class="signal-area">
-        <div class="signal-line">
-          <div
-            v-for="(signal, i) in signals"
-            :key="i"
-            class="signal-dot"
-            :class="[signal.type, { active: currentStep >= signal.step }]"
-          >
-            {{ signal.icon }}
+      <!-- 右侧：服务器/收件人 -->
+      <div class="actor server">
+        <div class="avatar-box">
+          <span class="avatar-icon">🖥️</span>
+          <span class="avatar-label">服务器</span>
+        </div>
+        <transition name="pop">
+          <div class="bubble server" v-if="currentStep >= 2">
+            {{ getBubbleText(2) }}
           </div>
-        </div>
-        <div class="connection-status" v-if="currentStep > 0">
-          <span class="status-text" :class="{ connected: currentStep >= 3 }">
-            {{ currentStep >= 3 ? '[已接通]' : '[连接中...]' }}
-          </span>
-        </div>
-      </div>
-
-      <!-- 右侧：收件人（服务器） -->
-      <div class="receiver-side">
-        <div class="speech-bubble server" v-if="currentStep >= 2">
-          <div class="bubble-arrow"></div>
-          <div class="bubble-content">
-            {{ currentMode === 'simple' ? '在的！我听到了，请说！' : 'SYN-ACK: 确认收到' }}
-          </div>
-        </div>
-        <div class="avatar-box server">
-          <div class="avatar">主</div>
-          <div class="avatar-label">收件人（服务器）</div>
-        </div>
-        <div class="speech-bubble server final" v-if="currentStep >= 3">
-          <div class="bubble-arrow"></div>
-          <div class="bubble-content">
-            {{ currentMode === 'simple' ? '好的，开始说吧！' : 'ACK: 确认连接' }}
-          </div>
-        </div>
+        </transition>
       </div>
     </div>
 
-    <!-- 步骤说明 -->
-    <div class="steps-explanation">
-      <div
-        v-for="(step, index) in steps"
+    <!-- 步骤进度条 (可点击跳转) -->
+    <div class="step-indicator">
+      <div 
+        v-for="(step, index) in steps" 
         :key="index"
-        class="step-card"
-        :class="{ active: currentStep === index + 1, completed: currentStep > index + 1 }"
+        class="step-dot"
+        :class="{ active: currentStep === index + 1, passed: currentStep > index + 1 }"
         @click="goToStep(index + 1)"
+        :title="step.techTitle"
       >
-        <div class="step-number">{{ index + 1 }}</div>
-        <div class="step-content">
-          <div class="step-title">{{ currentMode === 'simple' ? step.simpleTitle : step.techTitle }}</div>
-          <div class="step-desc">{{ currentMode === 'simple' ? step.simpleDesc : step.techDesc }}</div>
+        <span class="dot-num">{{ index + 1 }}</span>
+        <span class="dot-line" v-if="index < steps.length - 1"></span>
+      </div>
+    </div>
+
+    <!-- 底部详情面板 (固定高度) -->
+    <div class="detail-panel">
+      <transition name="fade" mode="out-in">
+        <div v-if="currentStep > 0" class="detail-content" :key="currentStep">
+           <div class="detail-left" :style="{ borderColor: getCurrentStepColor() }">
+             <div class="step-badge" :style="{ background: getCurrentStepColor() }">
+               步骤 {{ currentStep }}
+             </div>
+           </div>
+           
+           <div class="detail-divider"></div>
+
+           <div class="detail-right">
+             <div class="info-row">
+               <span class="tag life">生活对话</span>
+               <span class="text highlight">{{ steps[currentStep-1].simpleTitle }}</span>
+             </div>
+             <div class="info-row">
+               <span class="tag tech">技术原理</span>
+               <div class="tech-content">
+                 <div class="tech-desc">{{ steps[currentStep-1].techDesc }}</div>
+                 <!-- 动态名词解码卡片 -->
+                 <div class="term-glossary">
+                   <div v-for="term in steps[currentStep-1].terms" :key="term.key" class="term-item">
+                     <span class="term-key">{{ term.key }}</span>
+                     <span class="term-val">{{ term.val }}</span>
+                   </div>
+                 </div>
+
+                 <!-- 代码实现细节 (折叠) -->
+                 <details class="code-details" v-if="steps[currentStep-1].codeImpl">
+                   <summary class="code-summary">
+                     <span class="summary-icon">🛠️</span>
+                     <span class="summary-text">技术深究：底层代码如何实现？</span>
+                   </summary>
+                   <div class="code-block-wrapper">
+                     <div class="code-title">{{ steps[currentStep-1].codeImpl.title }}</div>
+                    <pre class="code-block"><code v-html="steps[currentStep-1].codeImpl.code"></code></pre>
+                  </div>
+                </details>
+
+                <!-- 技术问答 (折叠) - 仅在有问答时显示 -->
+                <details class="code-details qa-details" v-if="steps[currentStep-1].qa">
+                  <summary class="code-summary qa-summary">
+                    <span class="summary-icon">🎓</span>
+                    <span class="summary-text">{{ steps[currentStep-1].qa.title }}</span>
+                  </summary>
+                  <div class="code-block-wrapper qa-content">
+                    <div v-for="(item, idx) in steps[currentStep-1].qa.content" :key="idx" class="qa-item">
+                      <div class="qa-q">Q: {{ item.q }}</div>
+                      <div class="qa-a" v-html="item.a"></div>
+                    </div>
+                  </div>
+                </details>
+               </div>
+             </div>
+           </div>
+
+           <!-- 下一步按钮 -->
+           <button 
+             class="next-btn" 
+             v-if="currentStep < 3"
+             @click="nextStep"
+           >
+             下一步 ➔
+           </button>
         </div>
-      </div>
-    </div>
-
-    <!-- 控制按钮 -->
-    <div class="control-panel">
-      <button class="ctrl-btn" @click="prevStep" :disabled="currentStep <= 0">
-        [上一步]
-      </button>
-      <button
-        class="ctrl-btn primary"
-        @click="nextStep"
-        :disabled="currentStep >= 3"
-      >
-        {{ currentStep >= 3 ? '已接通' : '[下一步]' }}
-      </button>
-      <button class="ctrl-btn" @click="reset">
-        [重置]
-      </button>
-    </div>
-
-    <!-- 为什么是三次？ -->
-    <div class="why-three-box" v-if="currentStep >= 3">
-      <div class="why-icon">[提示]</div>
-      <div class="why-content">
-        <strong>为什么是三次，不是两次？</strong>
-        <p>两次对话只能确认"你能发、对方能收"，但对方不知道他的回复你有没有收到。三次对话确保<strong>双方都能发、双方都能收</strong>，通信才是可靠的。</p>
-      </div>
+        
+        <div v-else class="detail-placeholder">
+          <span class="guide-bounce">📞</span>
+          <span>点击"开始拨号"或步骤圆点，开始拨打电话</span>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -138,52 +168,118 @@
 <script setup>
 import { ref } from 'vue'
 
-const currentMode = ref('simple')
 const currentStep = ref(0)
-const targetAddress = ref('北京市朝阳区XX小区')
-
-const modes = [
-  { id: 'simple', label: '生活语言' },
-  { id: 'tech', label: '技术术语' }
-]
 
 const steps = [
   {
-    simpleTitle: '快递员：喂，在家吗？',
-    simpleDesc: '快递员拨通电话，确认对方是否在家',
-    techTitle: '客户端发送 SYN',
-    techDesc: 'Synchronize: 请求建立连接，携带初始序列号'
-  },
-  {
-    simpleTitle: '收件人：在的，请说！',
-    simpleDesc: '收件人确认在家，也表示可以接收包裹',
-    techTitle: '服务器回复 SYN-ACK',
-    techDesc: 'Synchronize-Acknowledge: 确认收到，也请求连接'
-  },
-  {
-    simpleTitle: '快递员：好的，开始送！',
-    simpleDesc: '快递员确认对方已准备好，开始运送',
-    techTitle: '客户端回复 ACK',
-    techDesc: 'Acknowledge: 确认收到，连接建立成功'
-  }
-]
+    simpleTitle: '喂，在家吗？我是快递员！',
+    techTitle: 'SYN',
+    techDesc: '客户端发送 SYN 包 (Seq=x)，请求建立连接。',
+    color: '#3b82f6',
+    terms: [
+      { key: 'SYN', val: '是单词 Synchronize (同步) 的缩写。💡 为什么叫"同步"？因为建立连接的第一步，就是双方要"对表"，把暗号（序号）对齐，确保后续对话在同一个频道上。' },
+      { key: 'Seq=x', val: '意思是："我的数据计数器，从 x 开始"。💡 为什么要特意告诉对方？这就像是两个人约定"暗号"。我告诉你："我的暗号是从 x 开始算的"。以后我每发给你一个字，暗号就加 1。如果你不知道我的起始暗号是 x，以后收到 x+100 你就不知道它是第几个字，也没法判断中间有没有丢字。' }
+    ],
+    codeImpl: {
+      title: '💻 真实 TCP 报文构建 (伪代码)',
+      code: `// 1. 设置标志位：只置 SYN
+<span class="kw">tcph->syn</span> = 1;
+<span class="kw">tcph->ack</span> = 0;
 
-const signals = [
-  { type: 'syn', step: 1, icon: '发' },
-  { type: 'synack', step: 2, icon: '收' },
-  { type: 'ack', step: 3, icon: '通' }
+// 2. 生成随机序号 (Seq)
+// 操作系统内核会维护一个计数器
+// 这里的 htonl 是为了处理网络字节序
+<span class="kw">tcph->seq</span> = htonl(<span class="var">random_x</span>); 
+
+// 3. 发送数据包
+send_packet(client_socket, tcph);`
+    }
+  },
+  {
+    simpleTitle: '在的！我听到了，请说！',
+    techTitle: 'SYN-ACK',
+    techDesc: '服务器回复 SYN-ACK 包 (Seq=y, Ack=x+1)，确认并请求连接。',
+    color: '#10b981',
+    terms: [
+      { key: 'ACK', val: '是单词 Acknowledgment (确认) 的缩写。💡 就像快递签收单，表示"我收到你的请求了"。' },
+      { key: 'Ack=x+1', val: '确认号。💡 为什么要 +1？这是一种期待机制。意思是："x 号那一页我已经收好了，请你下次从 x+1 页开始讲"。' },
+      { key: 'Seq=y', val: '服务器也生成自己的随机序号 y，方便客户端确认服务器发来的话。' }
+    ],
+    codeImpl: {
+      title: '💻 服务器内核响应逻辑 (伪代码)',
+      code: `// 1. 检查收到的是否是 SYN
+if (<span class="kw">recv_tcph->syn</span> == 1) {
+    // 2. 准备回复包
+    <span class="kw">reply_tcph->syn</span> = 1; // 同步
+    <span class="kw">reply_tcph->ack</span> = 1; // 确认
+
+    // 3. 确认号 = 对方 Seq + 1
+    // 表示期待对方下一次发在这个序号之后的数据
+    <span class="kw">reply_tcph->ack_seq</span> = htonl(ntohl(<span class="var">recv_tcph->seq</span>) + 1);
+
+    // 4. 生成服务器自己的序号
+    <span class="kw">reply_tcph->seq</span> = htonl(<span class="var">random_y</span>);
+    
+    send_packet(server_socket, reply_tcph);
+}`
+    }
+  },
+  {
+    simpleTitle: '好的，那我开始说了！',
+    techTitle: 'ACK',
+    techDesc: '客户端发送 ACK 包 (Ack=y+1)，连接建立成功，可以传输数据。',
+    color: '#8b5cf6',
+    terms: [
+      { key: 'Ack=y+1', val: '客户端确认收到。意思是："服务器你的 y 号信我也收到了，我们正式开始聊天吧！"' },
+      { key: '连接建立', val: '双方都确认了对方"能听能说"，通道正式打通。' }
+    ],
+    codeImpl: {
+      title: '💻 客户端最终确认 (伪代码)',
+      code: `// 1. 检查收到的包
+if (<span class="kw">recv_tcph->syn</span> == 1 && <span class="kw">recv_tcph->ack</span> == 1) {
+    // 2. 准备 ACK 包
+    <span class="kw">ack_tcph->syn</span> = 0; // 第三次握手不需要 SYN 了
+    <span class="kw">ack_tcph->ack</span> = 1;
+
+    // 3. 确认号 = 服务器 Seq + 1
+    <span class="kw">ack_tcph->ack_seq</span> = htonl(ntohl(<span class="var">recv_tcph->seq</span>) + 1);
+    
+    // 4. 序号 = 自己的 Seq + 1
+    <span class="kw">ack_tcph->seq</span> = htonl(<span class="var">my_seq</span> + 1);
+    
+    // 5. 连接状态变为 ESTABLISHED
+    <span class="hl">socket->state = TCP_ESTABLISHED;</span>
+    send_packet(client_socket, ack_tcph);
+}`
+    },
+    qa: {
+       title: '🤔 为什么必须是三次？(核心逻辑)',
+       content: [
+         {
+           q: '为什么一定要三次？(双工确认原理)',
+           a: `这其实是在验证<strong>双方的"听说能力"</strong>是否正常。TCP 是全双工的（双方都能同时发和收），所以必须双方都确认对方能发能收：<br>
+           1️⃣ <strong>第一次 (Client -> Server)</strong>：Server 收到，证明 <strong>Client 能发</strong>，<strong>Server 能收</strong>。<br>
+           2️⃣ <strong>第二次 (Server -> Client)</strong>：Client 收到，证明 <strong>Server 能发</strong>，<strong>Client 能收</strong>。同时 Client 知道 Server 收到了自己的第一次请求。<br>
+           3️⃣ <strong>第三次 (Client -> Server)</strong>：Server 收到，证明 <strong>Client 能收</strong>（因为 Client 回复了 Server 的消息）。<br>
+           <br>
+           <strong>结论：</strong> 只有经过这三次，双方都明确知道"自己"和"对方"的发送、接收功能全是好的。少一次都不行（Server 不知道 Client 能不能收），多一次没必要。`
+         },
+         {
+           q: '为什么这就算"连上"了？',
+           a: `所谓的"连接建立"，在计算机里并不是真的拉了一根线。它的本质是：<strong>双方内存里都保存好了对方的"状态信息"</strong>。<br>
+           通过这三次握手，双方主要完成了两件事：<br>
+           1. <strong>确认通道畅通</strong>：就是上面说的双工能力确认。<br>
+           2. <strong>同步初始序号 (ISN)</strong>：双方交换了 Seq (x 和 y)。<br>
+           <br>
+           只要双方都记住了对方的 Seq，并且确认了对方在线，操作系统就会把 Socket 状态标记为 <code style="color:#10b981">ESTABLISHED</code> (已建立)，这就叫"连上了"。`
+         }
+       ]
+     }
+  }
 ]
 
 const nextStep = () => {
-  if (currentStep.value < 3) {
-    currentStep.value++
-  }
-}
-
-const prevStep = () => {
-  if (currentStep.value > 0) {
-    currentStep.value--
-  }
+  if (currentStep.value < 3) currentStep.value++
 }
 
 const goToStep = (step) => {
@@ -193,359 +289,465 @@ const goToStep = (step) => {
 const reset = () => {
   currentStep.value = 0
 }
+
+const getBubbleText = (stepIndex) => {
+  // stepIndex 1: Client speaks (Step 1)
+  // stepIndex 2: Server speaks (Step 2)
+  if (stepIndex === 1) return steps[0].simpleTitle
+  if (stepIndex === 2) return steps[1].simpleTitle
+  return ''
+}
+
+const getSignalClass = () => {
+  if (currentStep.value === 1) return 'sending' // Left to Right
+  if (currentStep.value === 2) return 'receiving' // Right to Left
+  if (currentStep.value === 3) return 'sending-final' // Left to Right
+  return ''
+}
+
+const getSignalIcon = () => {
+  return '🔔'
+}
+
+const getCurrentStepColor = () => {
+  return steps[currentStep.value - 1]?.color || '#ccc'
+}
 </script>
 
 <style scoped>
-.phone-call-demo {
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* 头部 */
-.call-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.call-icon {
-  font-size: 14px;
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-.call-title {
-  font-size: 17px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-
-/* 场景 */
-.scenario-box {
-  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
-  border-radius: 12px;
+.tcp-compact {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
   padding: 16px;
-  margin-bottom: 16px;
-}
-.scenario-text {
+  margin: 16px 0;
   font-size: 14px;
-  color: var(--vp-c-text-1);
-  line-height: 1.6;
-}
-.scenario-text strong {
-  color: var(--vp-c-brand);
 }
 
-/* 模式切换 */
-.mode-toggle {
+.top-bar {
   display: flex;
-  justify-content: center;
-  gap: 12px;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
 }
-.mode-btn {
-  padding: 8px 20px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  transition: all 0.3s;
-}
-.mode-btn:hover {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-.mode-btn.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
 
-/* 通话可视化 */
-.call-visualization {
+.title-section {
   display: flex;
   align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn.primary {
+  background: var(--vp-c-brand);
+  color: white;
+  border: 1px solid var(--vp-c-brand);
+}
+
+.action-btn.outline {
+  background: transparent;
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+}
+
+/* 舞台区 */
+.stage-area {
+  display: flex;
   justify-content: space-between;
-  gap: 20px;
-  padding: 20px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
+  align-items: center;
+  height: 140px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 0 30px;
+  position: relative;
   margin-bottom: 20px;
 }
 
-.caller-side, .receiver-side {
+.actor {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
-  flex: 1;
+  width: 120px;
+  position: relative;
 }
 
 .avatar-box {
-  text-align: center;
-}
-.avatar-box.client .avatar {
-  background: linear-gradient(135deg, #409eff, #67c23a);
-}
-.avatar-box.server .avatar {
-  background: linear-gradient(135deg, #e6a23c, #f56c6c);
-}
-.avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  font-weight: 600;
-  color: white;
-  margin-bottom: 8px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-.avatar-label {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  font-weight: 500;
+  z-index: 2;
 }
 
-.speech-bubble {
-  position: relative;
-  max-width: 160px;
-}
-.speech-bubble.client {
-  align-self: flex-end;
-}
-.speech-bubble.server {
-  align-self: flex-start;
-}
-.bubble-content {
-  padding: 10px 14px;
+.avatar-icon { font-size: 32px; }
+.avatar-label { font-size: 12px; color: var(--vp-c-text-2); margin-top: 4px; }
+
+/* 气泡 */
+.bubble {
+  position: absolute;
+  top: -40px;
+  background: white;
+  padding: 6px 10px;
   border-radius: 12px;
   font-size: 12px;
-  line-height: 1.5;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  white-space: nowrap;
+  border: 1px solid var(--vp-c-divider);
+  color: #333;
 }
-.speech-bubble.client .bubble-content {
-  background: #409eff;
-  color: white;
-  border-bottom-right-radius: 4px;
-}
-.speech-bubble.server .bubble-content {
-  background: #67c23a;
-  color: white;
-  border-bottom-left-radius: 4px;
+.bubble.client { left: 50%; transform: translateX(-50%); }
+.bubble.server { left: 50%; transform: translateX(-50%); }
+
+.pop-enter-active, .pop-leave-active { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+.pop-enter-from, .pop-leave-to { opacity: 0; transform: translateX(-50%) scale(0.8); }
+
+/* 连接线 */
+.connection-line {
+  flex: 1;
+  height: 2px;
+  background: var(--vp-c-divider);
+  margin: 0 20px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-/* 信号区域 */
-.signal-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
+.status-badge {
+  position: absolute;
+  top: 15px;
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  transition: all 0.3s;
 }
-.signal-line {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-.signal-dot {
-  width: 36px;
-  height: 36px;
+.status-badge.connected { color: var(--vp-c-brand); font-weight: bold; }
+
+.signal-packet {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: var(--vp-c-brand);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
   color: white;
-  opacity: 0.2;
-  transform: scale(0.8);
-  transition: all 0.4s;
-}
-.signal-dot.active {
-  opacity: 1;
-  transform: scale(1);
-  animation: pulseSignal 1s infinite;
-}
-.signal-dot.syn { background: #409eff; }
-.signal-dot.synack { background: #67c23a; }
-.signal-dot.ack { background: #e6a23c; }
-
-@keyframes pulseSignal {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); }
-  50% { box-shadow: 0 0 0 10px rgba(64, 158, 255, 0); }
-}
-
-.connection-status {
-  padding: 6px 12px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 16px;
-}
-.status-text {
   font-size: 12px;
-  color: var(--vp-c-text-3);
-}
-.status-text.connected {
-  color: #67c23a;
-  font-weight: 600;
+  opacity: 0;
+  top: -11px;
 }
 
-/* 步骤说明 */
-.steps-explanation {
+.signal-packet.sending {
+  animation: moveRight 1.5s forwards;
+  opacity: 1;
+}
+
+.signal-packet.receiving {
+  animation: moveLeft 1.5s forwards;
+  opacity: 1;
+  background: #10b981;
+}
+
+.signal-packet.sending-final {
+  animation: moveRight 1.5s forwards;
+  opacity: 1;
+  background: #8b5cf6;
+}
+
+@keyframes moveRight {
+  0% { left: 0; }
+  100% { left: 100%; }
+}
+
+@keyframes moveLeft {
+  0% { left: 100%; }
+  100% { left: 0; }
+}
+
+/* 步骤指示器 */
+.step-indicator {
   display: flex;
-  gap: 12px;
+  justify-content: center;
+  gap: 40px;
   margin-bottom: 20px;
 }
-.step-card {
-  flex: 1;
-  padding: 14px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-.step-card:hover {
-  opacity: 0.8;
-  transform: translateY(-2px);
-}
-.step-card.active {
-  opacity: 1;
-  border-color: var(--vp-c-brand);
-  background: rgba(64, 158, 255, 0.05);
-}
-.step-card.completed {
-  opacity: 0.8;
-  border-color: #67c23a;
-}
-.step-number {
-  width: 28px;
-  height: 28px;
-  background: var(--vp-c-divider);
+
+.step-dot {
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
+  background: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-divider);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-.step-card.active .step-number {
-  background: var(--vp-c-brand);
-  color: white;
-}
-.step-card.completed .step-number {
-  background: #67c23a;
-  color: white;
-}
-.step-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 4px;
-}
-.step-desc {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--vp-c-text-3);
-  line-height: 1.4;
-}
-
-/* 控制面板 */
-.control-panel {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-.ctrl-btn {
-  padding: 10px 20px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 20px;
   cursor: pointer;
-  font-size: 13px;
-  color: var(--vp-c-text-2);
+  position: relative;
   transition: all 0.3s;
 }
-.ctrl-btn:hover:not(:disabled) {
+
+.step-dot.active {
   border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-.ctrl-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.ctrl-btn.primary {
   background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
   color: white;
-}
-.ctrl-btn.primary:hover:not(:disabled) {
-  background: #66b1ff;
+  transform: scale(1.1);
 }
 
-/* 为什么是三次 */
-.why-three-box {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(64, 158, 255, 0.1));
-  border-radius: 12px;
-  border-left: 4px solid #67c23a;
-  animation: slideIn 0.4s ease;
-}
-.why-icon {
-  font-size: 12px;
-  font-weight: 600;
+.step-dot.passed {
+  border-color: var(--vp-c-brand);
   color: var(--vp-c-brand);
 }
-.why-content {
+
+.dot-line {
+  position: absolute;
+  left: 24px;
+  width: 40px;
+  height: 2px;
+  background: var(--vp-c-divider);
+}
+
+/* 详情面板 */
+.detail-panel {
+  min-height: 80px; /* 改为最小高度 */
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
+  padding: 12px 16px;
+  display: flex;
+  align-items: flex-start; /* 顶部对齐 */
+  /* overflow: hidden; 移除隐藏 */
+}
+
+.detail-content {
+  display: flex;
+  width: 100%;
+  align-items: flex-start; /* 顶部对齐 */
+}
+
+.detail-left {
+  padding-right: 16px;
+  border-right: 2px solid transparent;
+  margin-top: 4px; /* 微调对齐 */
+}
+
+.step-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.detail-divider {
+  width: 1px;
+  align-self: stretch; /* 拉伸高度 */
+  background: var(--vp-c-divider);
+  margin: 0 16px;
+}
+
+.detail-right {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* 增加间距 */
+  padding-bottom: 4px;
 }
-.why-content strong {
-  font-size: 14px;
+
+.info-row {
+  display: flex;
+  align-items: flex-start; /* 顶部对齐 */
+  gap: 8px;
+}
+
+.tag {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+.tag.life { background: #e6f7ff; color: #1890ff; }
+.tag.tech { background: #f6ffed; color: #52c41a; }
+
+.text {
+  font-size: 13px;
   color: var(--vp-c-text-1);
+  line-height: 1.5;
 }
-.why-content p {
-  margin: 8px 0 0;
+
+.text.highlight {
+  font-weight: 500;
+  color: var(--vp-c-brand);
+}
+
+/* 新增：术语解释样式 */
+.term-glossary {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: rgba(0,0,0,0.03);
+  padding: 8px;
+  border-radius: 6px;
+}
+
+.term-item {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--vp-c-text-2);
+}
+
+.term-key {
+  font-weight: bold;
+  color: var(--vp-c-brand-dark);
+  margin-right: 6px;
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  padding: 0 4px;
+  border-radius: 3px;
+}
+
+.next-btn {
+  padding: 6px 16px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  margin-left: 12px;
+  margin-top: 4px;
+  white-space: nowrap;
+  align-self: flex-start; /* 按钮顶部对齐 */
+}
+
+.detail-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--vp-c-text-3);
+  width: 100%;
+  justify-content: center;
+}
+
+.guide-bounce {
+  animation: bounce 1.5s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+
+/* 代码实现折叠块 */
+.code-details {
+  margin-top: 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--vp-c-bg-alt);
+}
+
+.code-summary {
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  user-select: none;
+  background: rgba(0,0,0,0.02);
+  transition: background 0.2s;
+}
+
+.code-summary:hover {
+  background: rgba(0,0,0,0.05);
+  color: var(--vp-c-brand);
+}
+
+.code-block-wrapper {
+  padding: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+  background: #282c34; /* 深色背景适合代码 */
+  color: #abb2bf;
+}
+
+.code-title {
+  font-size: 11px;
+  color: #61afef;
+  margin-bottom: 6px;
+  font-family: monospace;
+  font-weight: bold;
+}
+
+.code-block {
+  margin: 0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 语法高亮类 (深色模式) */
+:deep(.kw) { color: #c678dd; } /* 紫色 - 关键字/字段 */
+:deep(.var) { color: #d19a66; } /* 橙色 - 变量 */
+:deep(.hl) { color: #98c379; font-weight: bold; } /* 绿色 - 高亮行 */
+
+/* 问答折叠块 */
+.qa-details {
+  background: rgba(255, 165, 0, 0.05); /* 淡淡的橙色背景 */
+  border-color: rgba(255, 165, 0, 0.2);
+}
+
+.qa-summary {
+  color: #d46b08;
+}
+
+.qa-summary:hover {
+  color: #ff7a45;
+  background: rgba(255, 165, 0, 0.1);
+}
+
+.qa-content {
+  background: var(--vp-c-bg); /* 恢复浅色/深色背景 */
+  color: var(--vp-c-text-1);
+  padding: 16px;
+}
+
+.qa-item {
+  margin-bottom: 12px;
+}
+.qa-item:last-child { margin-bottom: 0; }
+
+.qa-q {
+  font-weight: bold;
+  font-size: 13px;
+  color: var(--vp-c-brand-dark);
+  margin-bottom: 4px;
+}
+
+.qa-a {
   font-size: 13px;
   color: var(--vp-c-text-2);
   line-height: 1.6;
 }
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 640px) {
-  .call-visualization {
-    flex-direction: column;
-  }
-  .signal-area {
-    flex-direction: row;
-    order: -1;
-  }
-  .signal-line {
-    flex-direction: row;
-  }
-  .steps-explanation {
-    flex-direction: column;
-  }
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
index 4463686..f431169 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
@@ -1,197 +1,253 @@
 <!--
   UrlParserDemo.vue
-  URL解析演示 - 交互式可视化组件
+  URL解析演示 - 网购订单隐喻版
   
-  用途：
-  将 URL 解析过程可视化，通过颜色编码和分块展示，
-  直观地展示 URL 的各个组成部分及其对应的技术含义和生活比喻。
+  设计理念：
+  1. 隐喻对齐：严格对应 url-to-browser.md 中的"网购订单"比喻。
+  2. 视觉映射：将枯燥的 URL 字符串映射为一张清晰的"购物清单"。
+  3. 实时交互：输入即解析，所见即所得。
 -->
 <template>
-  <div class="url-parser-demo">
-    <!-- 头部控制区 -->
-    <div class="control-panel">
-      <div class="header-section">
-        <span class="icon">🔍</span>
-        <span class="title">URL 解析器</span>
-      </div>
-      
-      <div class="examples-section">
-        <span class="label">试一试：</span>
-        <div class="button-group">
-          <button
-            v-for="ex in examples"
-            :key="ex.name"
-            @click="useExample(ex)"
-            class="action-btn outline small"
-            :class="{ active: currentExample === ex.name }"
-          >
-            {{ ex.name }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 输入区域 -->
+  <div class="url-parser-order">
+    <!-- 顶部：输入区 -->
     <div class="input-section">
-      <div class="input-wrapper">
+      <div class="url-input-box" :class="{ 'has-error': error }">
+        <span class="input-label">URL</span>
         <input
           v-model="urlInput"
           type="text"
-          placeholder="输入或粘贴一个网址..."
+          placeholder="https://www.example.com/path?query=1"
+          class="real-input"
           @input="parseUrl"
-          class="url-input"
         />
-        <button class="clear-btn" @click="clear" v-if="urlInput">✕</button>
+        <button v-if="urlInput" class="clear-btn" @click="clear">✕</button>
       </div>
-    </div>
-
-    <!-- 可视化展示区 -->
-    <div class="visualization-area" v-if="parsed.protocol">
-      <div class="url-blocks">
-        <div 
-          v-for="(field, key) in formFields" 
-          :key="key"
-          v-show="shouldShowField(key)"
-          class="url-block"
-          :class="[key, { active: hovered === key }]"
-          :style="{ '--block-color': field.color, '--block-bg': hexToRgba(field.color, 0.15) }"
-          @mouseenter="hovered = key"
-          @mouseleave="hovered = null"
+      <div class="quick-actions">
+        <span class="action-label">试一试：</span>
+        <button 
+          v-for="ex in examples" 
+          :key="ex.name"
+          @click="useExample(ex)"
+          class="action-chip"
+          :class="{ active: currentExample === ex.name }"
         >
-          <span class="block-value">{{ getDisplayValue(key) }}</span>
-          <span class="block-label">{{ field.techName }}</span>
-        </div>
+          {{ ex.name }}
+        </button>
       </div>
     </div>
 
-    <!-- 详情说明卡片 -->
-    <div class="info-card" v-if="hovered && formFields[hovered]">
-      <div class="info-header" :style="{ borderLeftColor: formFields[hovered].color }">
-        <span class="info-title">{{ formFields[hovered].techLabel }} ({{ formFields[hovered].techName }})</span>
-        <span class="info-badge" :style="{ backgroundColor: formFields[hovered].color }">
-          {{ formFields[hovered].icon }}
-        </span>
-      </div>
-      
-      <div class="info-content">
-        <div class="info-row">
-          <div class="info-label">技术含义</div>
-          <div class="info-value">
-            <strong>{{ formFields[hovered].techDesc }}</strong>
-            <div class="info-detail">{{ formFields[hovered].techDetail }}</div>
+    <!-- 核心区域：左右对照布局 -->
+    <template v-if="parsed.protocol">
+      <div class="core-stage">
+        <!-- 左侧：解析结果 (技术视角) -->
+        <div class="tech-view">
+          <div class="view-header">
+            <span class="icon">💻</span>
+            <span class="title">技术解析</span>
+          </div>
+          <div class="code-blocks">
+            <div 
+              v-for="(field, key) in formFields" 
+              :key="key"
+              v-show="shouldShowField(key)"
+              class="code-block"
+              :class="[key, { active: hovered === key }]"
+              :style="{ '--color': field.color }"
+              @mouseenter="hovered = key"
+              @mouseleave="hovered = null"
+            >
+              <span class="field-name">{{ key }}</span>
+              <span class="field-value">{{ getDisplayValue(key) }}</span>
+            </div>
           </div>
         </div>
-        <div class="info-divider"></div>
-        <div class="info-row">
-          <div class="info-label">生活比喻</div>
-          <div class="info-value">
-            <strong>{{ formFields[hovered].analogyLabel }}</strong>
-            <div class="info-detail">{{ formFields[hovered].analogyDesc }}</div>
+
+        <!-- 中间：转换箭头 -->
+        <div class="transform-arrow">
+          <span class="arrow-icon">➔</span>
+          <span class="arrow-text">映射为</span>
+        </div>
+
+        <!-- 右侧：购物单 (生活视角) -->
+        <div class="life-view">
+          <div class="view-header">
+            <span class="icon">🧾</span>
+            <span class="title">购物订单</span>
+          </div>
+          <div class="order-ticket">
+            <div class="ticket-hole"></div>
+            
+            <div 
+              v-for="(field, key) in formFields"
+              :key="key"
+              v-show="shouldShowField(key)"
+              class="ticket-row"
+              :class="{ active: hovered === key }"
+              :style="{ '--color': field.color }"
+              @mouseenter="hovered = key"
+              @mouseleave="hovered = null"
+            >
+              <div class="ticket-icon" :style="{ backgroundColor: field.color }">{{ field.icon }}</div>
+              <div class="ticket-content">
+                <span class="ticket-label">{{ field.analogyLabel }}</span>
+                <span class="ticket-desc">{{ field.analogyDesc }}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    
-    <!-- 空状态提示 -->
-    <div class="empty-state" v-else-if="!urlInput">
-      <p>👆 在上方输入网址，查看它是由哪些部分组成的</p>
-    </div>
-    
-    <div class="default-info" v-else>
-      <p>👆 鼠标悬停在上方色块上，查看详细解释</p>
+
+      <!-- 技术答疑面板 -->
+      <transition name="fade">
+        <div class="qa-panel" v-if="activeQa">
+          <div class="qa-header">{{ activeQa.title }}</div>
+          <div class="qa-content">
+            <div v-for="(item, idx) in activeQa.content" :key="idx" class="qa-item">
+              <div class="qa-q">Q: {{ item.q }}</div>
+              <div class="qa-a">A: {{ item.a }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="qa-placeholder" v-else>
+          👆 鼠标悬停在上方色块，查看详细技术解释
+        </div>
+      </transition>
+    </template>
+
+    <!-- 空状态引导 -->
+    <div class="empty-state" v-else>
+      <div class="empty-icon">🛒</div>
+      <div class="empty-text">
+        <p>输入网址，生成你的"数字购物单"</p>
+        <span class="sub-text">看看浏览器如何理解这一长串字符</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const urlInput = ref('')
 const parsed = ref({})
 const hovered = ref(null)
 const currentExample = ref('')
+const error = ref(false)
 
 const examples = [
-  { name: '百度搜索', url: 'https://www.baidu.com/s?wd=hello' },
-  { name: 'GitHub项目', url: 'https://github.com/vuejs/core' },
-  { name: '带端口', url: 'http://localhost:8080/api/users' },
-  { name: '带锚点', url: 'https://vuejs.org/guide/introduction.html#what-is-vue' }
+  { name: '标准网购', url: 'https://www.nike.com/shoes/running?size=42&color=red' },
+  { name: '带端口', url: 'http://localhost:8080/api/status' },
+  { name: '带锚点', url: 'https://vuejs.org/guide.html#setup' }
 ]
 
+// 定义字段映射（严格对齐 url-to-browser.md）
 const formFields = {
   protocol: {
-    techName: 'Protocol',
-    techLabel: '协议',
     color: '#f43f5e', // Red
-    icon: '规',
-    analogyLabel: '快递公司',
-    techDesc: '通信规则',
-    analogyDesc: '决定是用"顺丰"(HTTPS)还是"平邮"(HTTP)传输',
-    techDetail: 'https (加密) 或 http (明文)'
+    icon: '🚚',
+    analogyLabel: '物流方式',
+    analogyDesc: '决定怎么送货（HTTP普通/HTTPS加密保密）。',
+    qa: {
+      title: '🤔 为什么要写 http/https？',
+      content: [
+        {
+          q: '这两者有什么区别？',
+          a: 'HTTP 就像寄明信片，邮递员（黑客）能看到内容。HTTPS 就像寄密封的信封，只有收件人能拆开看。'
+        },
+        {
+          q: '为什么现在都是 https？',
+          a: '为了安全！现在的浏览器如果发现不是 HTTPS，会提示"不安全"，就像快递公司拒收没封口的信件一样。'
+        }
+      ]
+    }
   },
   hostname: {
-    techName: 'Hostname',
-    techLabel: '域名',
     color: '#3b82f6', // Blue
-    icon: '名',
-    analogyLabel: '收件人',
-    techDesc: '服务器地址',
-    analogyDesc: '如 "google.com"，方便人类记忆的名字',
-    techDetail: '最终需要通过 DNS 解析为 IP 地址'
+    icon: '🏠',
+    analogyLabel: '店铺名称',
+    analogyDesc: '告诉浏览器去哪家店（服务器）买东西。',
+    qa: {
+      title: '🤔 域名还是 IP？',
+      content: [
+        {
+          q: '浏览器认识域名吗？',
+          a: '其实不认识。浏览器只认识 IP 地址（一串数字）。域名是为了方便人记的。下一步（DNS 查询）就是把这个名字翻译成数字。'
+        }
+      ]
+    }
   },
   port: {
-    techName: 'Port',
-    techLabel: '端口',
     color: '#f59e0b', // Amber
-    icon: '门',
-    analogyLabel: '门牌号',
-    techDesc: '服务入口',
-    analogyDesc: '如 ":8080"，大楼里的具体房间号',
-    techDetail: '默认端口(80/443)通常会被浏览器省略'
+    icon: '🔢',
+    analogyLabel: '柜台编号',
+    analogyDesc: '店铺很大，指定去几号柜台办理业务。',
+    qa: {
+      title: '🤔 这里的数字是什么意思？',
+      content: [
+        {
+          q: '为什么平时上网看不到它？',
+          a: '因为有默认值！就像去银行默认去"综合柜台"一样。HTTP 默认是 80，HTTPS 默认是 443。只有特殊的才需要写出来。'
+        }
+      ]
+    }
   },
   pathname: {
-    techName: 'Path',
-    techLabel: '路径',
     color: '#10b981', // Emerald
-    icon: '径',
-    analogyLabel: '具体位置',
-    techDesc: '资源路径',
-    analogyDesc: '如 "/files/doc.txt"，文件柜的位置',
-    techDetail: '指向服务器上的具体资源'
+    icon: '📦',
+    analogyLabel: '货架位置',
+    analogyDesc: '商品在仓库里的具体存放位置。',
+    qa: {
+      title: '🤔 这一长串是干嘛的？',
+      content: [
+        {
+          q: '它对应服务器上的文件吗？',
+          a: '通常是的。/shoes/running 就像告诉仓库管理员：去"鞋子区"的"跑步架"上拿货。'
+        }
+      ]
+    }
   },
   search: {
-    techName: 'Query',
-    techLabel: '参数',
     color: '#8b5cf6', // Violet
-    icon: '参',
-    analogyLabel: '备注',
-    techDesc: '查询参数',
-    analogyDesc: '如 "?q=hello"，告诉对方具体要求',
-    techDetail: '键值对形式的附加数据'
+    icon: '📝',
+    analogyLabel: '订单备注',
+    analogyDesc: '给商家的额外要求（如：红色、42码）。',
+    qa: {
+      title: '🤔 问号后面的内容？',
+      content: [
+        {
+          q: '这对网页有什么影响？',
+          a: '就像你点外卖备注"不要香菜"。网页内容会根据这些参数变化，比如只显示红色的鞋子。'
+        }
+      ]
+    }
   },
   hash: {
-    techName: 'Hash',
-    techLabel: '锚点',
     color: '#ec4899', // Pink
-    icon: '锚',
-    analogyLabel: '页码',
-    techDesc: '页内定位',
-    analogyDesc: '如 "#section1"，书的某一页',
-    techDetail: '浏览器滚动到指定位置，不会发送给服务器'
+    icon: '🔖',
+    analogyLabel: '说明书页码',
+    analogyDesc: '拿到商品后，直接翻到说明书的第几页。',
+    qa: {
+      title: '🤔 为什么要用 # 号？',
+      content: [
+        {
+          q: '这部分会发给服务器吗？',
+          a: '不会。这只是给你自己（浏览器）看的。就像你买书回家后翻到第10页，书店老板并不需要知道你看哪一页。'
+        }
+      ]
+    }
   }
 }
 
-const hexToRgba = (hex, alpha) => {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`
-}
+const activeField = computed(() => hovered.value || null)
+
+const activeQa = computed(() => {
+  if (!activeField.value) return null
+  return formFields[activeField.value].qa
+})
 
 const shouldShowField = (key) => {
   const val = parsed.value[key]
   if (!val) return false
-  if (val === '无') return false
   if (key === 'search' && (val === '' || val === '?')) return false
   if (key === 'hash' && (val === '' || val === '#')) return false
   return true
@@ -199,10 +255,8 @@ const shouldShowField = (key) => {
 
 const getDisplayValue = (key) => {
   let val = parsed.value[key]
-  
   if (key === 'protocol') return val + '://'
-  if (key === 'port') return ':' + val.replace('(默认)', '')
-  // simple formatting
+  if (key === 'port') return ':' + val
   return val
 }
 
@@ -216,6 +270,8 @@ const clear = () => {
   urlInput.value = ''
   parsed.value = {}
   currentExample.value = ''
+  hovered.value = null
+  error.value = false
 }
 
 const parseUrl = () => {
@@ -223,295 +279,341 @@ const parseUrl = () => {
     parsed.value = {}
     return
   }
-
   try {
     let urlStr = urlInput.value.trim()
-    // Auto-add protocol if missing for better UX
+    // 自动补全协议以支持 new URL() 解析
     if (!urlStr.match(/^https?:\/\//)) {
-      if (urlStr.startsWith('localhost')) {
-         urlStr = 'http://' + urlStr
-      } else {
-         urlStr = 'https://' + urlStr
-      }
+       urlStr = (urlStr.startsWith('localhost') ? 'http://' : 'https://') + urlStr
     }
-
     const u = new URL(urlStr)
     
-    // Determine if port is explicit or default
-    let portDisplay = u.port
-    if (!portDisplay) {
-        // Just for display logic in the parser, we might not show it if it's default/hidden
-        // But let's show it if we want to be educational
-        // Actually, let's only show if it's in the string or we want to be explicit
-        // For visualizer, maybe better to show what's THERE. 
-        // But to be educational, maybe show implied?
-        // Let's stick to what's in the URL object but handle defaults
-        // If the user typed it, u.port is set. If implied, it's empty string.
-    }
-
     parsed.value = {
       protocol: u.protocol.replace(':', ''),
       hostname: u.hostname,
-      port: u.port, // Only show if explicit
-      pathname: u.pathname === '/' ? '/' : u.pathname,
+      port: u.port || (u.protocol === 'https:' ? '443 (默认)' : '80 (默认)'),
+      pathname: u.pathname,
       search: u.search,
       hash: u.hash
     }
+    error.value = false
   } catch (e) {
-    // simplistic fallback or error state could go here
-    // parsed.value = {}
+    // 解析失败时不更新 parsed，或者显示错误状态
+    // 这里选择静默失败，等待用户输入完整
+    if (urlInput.value.length > 10) {
+        // error.value = true 
+    }
   }
 }
 </script>
 
 <style scoped>
-.url-parser-demo {
+.url-parser-order {
   border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background-color: var(--vp-c-bg);
+  padding: 20px;
+  margin: 16px 0;
+  font-family: var(--vp-font-family-base);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+/* 输入区 */
+.input-section {
+  margin-bottom: 24px;
+}
+.url-input-box {
+  display: flex;
+  align-items: center;
+  background: var(--vp-c-bg-alt);
+  border: 2px solid transparent;
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  padding: 1rem;
-  margin: 1rem 0;
-  font-family: var(--vp-font-family-mono);
-}
-
-.control-panel {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  background: var(--vp-c-bg);
-  padding: 0.75rem;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.header-section {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: bold;
-  color: var(--vp-c-text-1);
-}
-
-.examples-section {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.label {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.button-group {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.action-btn {
-  padding: 0.2rem 0.6rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  cursor: pointer;
-  border: 1px solid var(--vp-c-divider);
-  background: transparent;
-  color: var(--vp-c-text-2);
+  padding: 8px 12px;
   transition: all 0.2s;
 }
-
-.action-btn:hover {
+.url-input-box:focus-within {
   border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-
-.action-btn.active {
-  background-color: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-}
-
-.input-section {
-  margin-bottom: 1.5rem;
-}
-
-.input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.url-input {
-  width: 100%;
-  padding: 0.75rem 2.5rem 0.75rem 1rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
   background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  font-family: inherit;
-  font-size: 1rem;
-  transition: border-color 0.2s;
 }
-
-.url-input:focus {
-  outline: none;
-  border-color: var(--vp-c-brand);
+.input-label {
+  font-weight: bold;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  margin-right: 12px;
+  user-select: none;
 }
-
-.clear-btn {
-  position: absolute;
-  right: 0.75rem;
-  background: none;
+.real-input {
+  flex: 1;
+  background: transparent;
   border: none;
+  font-family: var(--vp-font-family-mono);
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  outline: none;
+  min-width: 0;
+}
+.clear-btn {
   color: var(--vp-c-text-3);
   cursor: pointer;
-  font-size: 1rem;
+  padding: 4px;
 }
+.clear-btn:hover { color: var(--vp-c-text-1); }
 
-.clear-btn:hover {
-  color: var(--vp-c-text-1);
-}
-
-.visualization-area {
-  margin-bottom: 1rem;
-  overflow-x: auto;
-  padding-bottom: 0.5rem;
-}
-
-.url-blocks {
+.quick-actions {
   display: flex;
-  gap: 4px;
-  align-items: flex-start;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+.action-label {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  padding-top: 4px;
+}
+.action-chip {
+  padding: 4px 12px;
+  border-radius: 100px;
+  background: var(--vp-c-bg-soft);
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+.action-chip:hover {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand);
+}
+.action-chip.active {
+  background: var(--vp-c-brand);
+  color: white;
 }
 
-.url-block {
+/* 核心展示区 */
+.core-stage {
+  display: flex;
+  align-items: stretch;
+  gap: 16px;
+  min-height: 200px;
+}
+
+/* 通用标题 */
+.view-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.view-header .icon { font-size: 16px; }
+.view-header .title { font-weight: bold; font-size: 14px; color: var(--vp-c-text-1); }
+
+/* 左侧：技术视图 */
+.tech-view {
+  flex: 1;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  background-color: var(--block-bg);
-  border: 1px solid var(--block-color);
-  cursor: help;
-  transition: all 0.2s;
-  min-width: fit-content;
 }
-
-.url-block:hover, .url-block.active {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  filter: brightness(1.05);
-}
-
-.block-value {
-  font-weight: bold;
-  color: var(--block-color);
-  font-size: 1rem;
-  white-space: nowrap;
-}
-
-.block-label {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  margin-top: 0.25rem;
-  opacity: 0.7;
-  color: var(--block-color);
-}
-
-.info-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  overflow: hidden;
-  animation: slide-up 0.3s ease;
-}
-
-.info-header {
-  padding: 0.75rem 1rem;
-  background: var(--vp-c-bg-alt);
+.code-blocks {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 8px;
+}
+.code-block {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  border-left: 3px solid var(--color);
+  transition: all 0.2s;
+  cursor: default;
+}
+.code-block:hover, .code-block.active {
+  transform: translateX(4px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+.field-name {
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+.field-value {
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+}
+
+/* 中间：箭头 */
+.transform-arrow {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  border-left: 4px solid transparent;
+  color: var(--vp-c-text-3);
+  font-size: 12px;
+  width: 40px;
+}
+.arrow-icon { font-size: 20px; }
+
+/* 右侧：生活视图 (票据样式) */
+.life-view {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  position: relative;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  border: 1px solid var(--vp-c-divider);
+}
+/* 暗黑模式适配票据背景 */
+:root.dark .life-view {
+  background: #1e1e20;
 }
 
-.info-title {
-  font-weight: bold;
-  font-size: 0.95rem;
+.order-ticket {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--vp-c-bg-alt);
+  border: 1px dashed var(--vp-c-divider);
+  padding: 16px;
+  border-radius: 8px;
+  position: relative;
 }
-
-.info-badge {
-  width: 24px;
-  height: 24px;
+.ticket-hole {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  background: var(--vp-c-bg);
+  border-radius: 50%;
+  border: 1px solid var(--vp-c-divider);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+.ticket-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  transition: all 0.2s;
+  opacity: 0.8;
+}
+.ticket-row:hover, .ticket-row.active {
+  background: var(--vp-c-bg-soft);
+  opacity: 1;
+  transform: scale(1.02);
+}
+.ticket-icon {
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 14px;
   color: white;
-  font-size: 0.75rem;
-  font-weight: bold;
+  flex-shrink: 0;
 }
-
-.info-content {
-  padding: 1rem;
-  display: grid;
-  grid-template-columns: 1fr 1px 1fr;
-  gap: 1rem;
-}
-
-.info-divider {
-  background: var(--vp-c-divider);
-  height: 100%;
-}
-
-.info-row {
+.ticket-content {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
 }
-
-.info-label {
-  font-size: 0.75rem;
+.ticket-label {
+  font-weight: bold;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+}
+.ticket-desc {
+  font-size: 12px;
   color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  line-height: 1.4;
 }
 
-.info-value {
-  font-size: 0.9rem;
-}
-
-.info-detail {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-top: 0.25rem;
-}
-
-.empty-state, .default-info {
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: var(--vp-c-text-3);
   text-align: center;
-  padding: 2rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+}
+.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+.empty-text p { font-size: 16px; font-weight: bold; margin: 0 0 8px 0; color: var(--vp-c-text-2); }
+.sub-text { font-size: 13px; }
+
+/* 响应式 */
+@media (max-width: 640px) {
+  .core-stage {
+    flex-direction: column;
+  }
+  .transform-arrow {
+    flex-direction: row;
+    width: 100%;
+    height: 40px;
+    gap: 8px;
+  }
+  .arrow-icon { transform: rotate(90deg); }
+}
+
+/* QA Panel */
+.qa-panel {
+  margin-top: 16px;
   background: var(--vp-c-bg-alt);
-  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 13px;
+}
+.qa-header {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed var(--vp-c-divider);
+}
+.qa-item {
+  margin-bottom: 10px;
+}
+.qa-item:last-child {
+  margin-bottom: 0;
+}
+.qa-q {
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.qa-a {
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+.qa-placeholder {
+  margin-top: 16px;
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
   border: 1px dashed var(--vp-c-divider);
 }
 
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+/* Transitions */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
 }
-
-@media (max-width: 640px) {
-  .info-content {
-    grid-template-columns: 1fr;
-  }
-  .info-divider {
-    height: 1px;
-    width: 100%;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
index a069480..1909314 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
@@ -1,914 +1,637 @@
 <!--
   UrlToBrowserQuickStart.vue
-  网络快递之旅 - 全流程快速体验组件
-
-  用途：
-  用"寄快递"的故事主线，让0基础用户在30秒内体验从输入URL到页面显示的完整过程。
-  设计原则：故事化、可视化、即时反馈
+  网络快递之旅 - 紧凑交互版 (Refactored)
+  
+  设计理念：
+  1. 传送带模式：将纵向卡片改为横向时间轴，大幅节省空间。
+  2. 动态教学：名词解释不再静态展示，而是随着包裹移动实时浮现。
+  3. 极简高度：控制在 200px 以内。
+  4. 手动步进：用户自主控制节奏，避免自动播放跟不上。
 -->
 <template>
-  <div class="delivery-journey">
-    <!-- 故事标题 -->
-    <div class="journey-header">
-      <span class="journey-icon">[包裹]</span>
-      <span class="journey-title">体验一次"网络快递"之旅</span>
-    </div>
-
-    <!-- 快递单填写 -->
-    <div class="delivery-form">
-      <div class="form-label">填写快递单（输入网址）：</div>
-      <div class="address-input">
-        <span class="protocol-badge">https://</span>
-        <input
-          v-model="url"
-          type="text"
-          placeholder="比如：baidu.com"
-          @keyup.enter="startJourney"
-          :disabled="isRunning"
+  <div class="quick-start-compact">
+    <!-- 顶部：极简输入栏 -->
+    <div class="input-bar" :class="{ 'is-active': isActive }">
+      <div class="input-wrapper">
+        <span class="protocol">https://</span>
+        <input 
+          v-model="url" 
+          type="text" 
+          placeholder="输入网址，开始旅程..."
+          @keyup.enter="handleMainAction"
+          :disabled="isActive && !isFinished"
         />
-        <button class="send-btn" @click="startJourney" :disabled="!url || isRunning">
-          {{ isRunning ? '运送中...' : '寄出' }}
+        
+        <!-- 主操作按钮 -->
+        <button 
+          class="start-btn" 
+          :class="{ 'next-btn': isActive && !isFinished, 'reset-btn': isFinished }"
+          @click="handleMainAction" 
+          :disabled="!url"
+        >
+          {{ mainButtonText }}
+        </button>
+      </div>
+      
+      <!-- 步骤控制按钮组 -->
+      <div class="step-controls" v-if="isActive">
+        <button 
+          class="control-btn" 
+          @click="prevStep" 
+          :disabled="currentStep === 0"
+          title="上一步"
+        >
+          ⬅️
+        </button>
+        <button 
+          class="control-btn" 
+          @click="nextStep" 
+          :disabled="isFinished"
+          title="下一步"
+        >
+          ➡️
+        </button>
+      </div>
+
+      <!-- 快速体验按钮 (仅在未开始时显示) -->
+      <div class="quick-chips" v-if="!isActive">
+        <span class="chip-label">试一试:</span>
+        <button v-for="u in quickUrls" :key="u" @click="quickStart(u)" class="chip">
+          {{ u }}
         </button>
       </div>
     </div>
 
-    <!-- 快速选择 -->
-    <div class="quick-select" v-if="!isRunning && !showResult">
-      <span class="quick-hint">快速体验：</span>
-      <button
-        v-for="u in quickUrls"
-        :key="u.domain"
-        @click="url = u.domain; startJourney()"
-        class="quick-btn"
-        :title="u.desc"
+    <!-- 核心舞台：横向传送带 -->
+    <div class="conveyor-stage">
+      <!-- 进度轨道 -->
+      <div class="track-line">
+        <div class="track-progress" :style="{ width: packagePosition + '%' }"></div>
+      </div>
+
+      <!-- 站点节点 -->
+      <div 
+        v-for="(step, index) in steps" 
+        :key="index"
+        class="station"
+        :class="{ 
+          active: currentStep === index, 
+          passed: currentStep > index,
+          'final-station': index === steps.length - 1
+        }"
+        @click="jumpToStep(index)"
       >
-        {{ u.domain }}
-      </button>
-    </div>
-
-    <!-- 双栏对照展示 -->
-    <div class="comparison-view" v-if="isRunning || showResult">
-      <div class="comparison-header">
-        <div class="side-label delivery-side">寄快递流程</div>
-        <div class="connection-hint">对应关系</div>
-        <div class="side-label network-side">网络访问流程</div>
+        <div class="station-icon-box">
+          <span class="station-icon">{{ step.icon }}</span>
+          <div class="station-status-dot"></div>
+        </div>
+        <div class="station-label">{{ step.name }}</div>
       </div>
 
-      <div class="comparison-steps">
-        <div
-          v-for="(step, index) in steps"
-          :key="step.id"
-          class="step-row"
-          :class="{
-            passed: currentStep > index,
-            current: currentStep === index,
-            waiting: currentStep < index
-          }"
-        >
-          <!-- 左侧：快递流程 -->
-          <div class="step-delivery">
-            <div class="step-icon">{{ step.deliveryIcon }}</div>
-            <div class="step-content">
-              <div class="step-title">{{ step.deliveryTitle }}</div>
-              <div class="step-desc">{{ step.deliveryDesc }}</div>
+      <!-- 移动的包裹 (绝对定位) -->
+      <div 
+        class="moving-package"
+        :style="{ '--package-pos': packagePosition }"
+        v-show="isActive"
+      >
+        <div class="package-body">📦</div>
+        <div class="package-shadow"></div>
+        <!-- 动态提示气泡 -->
+        <div class="package-bubble">
+          <span class="bubble-analogy">{{ steps[currentStep]?.analogyAction }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部：动态对照条 -->
+    <div class="dynamic-info-bar">
+      <transition name="slide-up" mode="out-in">
+        <div v-if="isActive" :key="currentStep" class="info-content">
+          <div class="info-left">
+            <span class="stage-badge">第 {{ currentStep + 1 }} 站</span>
+            <span class="stage-title">{{ steps[currentStep].title }}</span>
+          </div>
+          <div class="info-divider"></div>
+          <div class="info-right">
+            <div class="mapping-item">
+              <span class="mapping-icon">🚚</span>
+              <span class="mapping-text">生活：{{ steps[currentStep].analogyDesc }}</span>
             </div>
-          </div>
-
-          <!-- 中间：对应指示 -->
-          <div class="step-connector">
-            <div class="connector-line"></div>
-            <div class="connector-arrow">→</div>
-            <div class="connector-label">{{ step.mappingLabel }}</div>
-          </div>
-
-          <!-- 右侧：网络流程 -->
-          <div class="step-network">
-            <div class="step-icon">{{ step.networkIcon }}</div>
-            <div class="step-content">
-              <div class="step-title">{{ step.networkTitle }}</div>
-              <div class="step-desc">{{ step.networkDesc }}</div>
-              <div class="step-tech" v-if="currentStep >= index">{{ step.techDetail }}</div>
+            <div class="mapping-arrow">↔️</div>
+            <div class="mapping-item">
+              <span class="mapping-icon">💻</span>
+              <span class="mapping-text">技术：{{ steps[currentStep].techDesc }}</span>
             </div>
           </div>
         </div>
-      </div>
-
-      <!-- 当前步骤高亮提示 -->
-      <div class="current-step-hint" v-if="isRunning && steps[currentStep]">
-        <div class="hint-label">当前阶段</div>
-        <div class="hint-content">
-          <span class="hint-delivery">{{ steps[currentStep].deliveryTitle }}</span>
-          <span class="hint-equals">=</span>
-          <span class="hint-network">{{ steps[currentStep].networkTitle }}</span>
+        <div v-else class="info-placeholder">
+          👈 在左上角输入网址，开启网络快递之旅
         </div>
-      </div>
-
-      <!-- 进度条 -->
-      <div class="progress-track" v-if="isRunning">
-        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
-      </div>
-    </div>
-
-    <!-- 送达结果 -->
-    <div class="delivery-result" v-if="showResult">
-      <div class="success-banner">
-        包裹送达！耗时 {{ time }}ms
-      </div>
-
-      <!-- 网页预览 -->
-      <div class="page-preview">
-        <div class="browser-chrome">
-          <div class="chrome-dots">
-            <span></span><span></span><span></span>
-          </div>
-          <div class="chrome-address">{{ url }}</div>
-        </div>
-        <div class="page-content">
-          <div class="skeleton-line" style="width: 70%"></div>
-          <div class="skeleton-line" style="width: 50%"></div>
-          <div class="skeleton-img"></div>
-          <div class="skeleton-line" style="width: 80%"></div>
-        </div>
-      </div>
-
-      <button class="retry-btn" @click="reset">再寄一次</button>
-    </div>
-
-    <!-- 名词对照卡片（默认显示） -->
-    <div class="glossary-cards" v-if="!isRunning && !showResult">
-      <div class="glossary-title">快递 vs 网络 名词对照</div>
-      <div class="cards-grid">
-        <div
-          v-for="item in glossary"
-          :key="item.delivery"
-          class="glossary-card"
-          @mouseenter="hoveredCard = item"
-          @mouseleave="hoveredCard = null"
-        >
-          <div class="card-delivery">
-            <span class="card-label">快递</span>
-            <span class="card-value">{{ item.delivery }}</span>
-          </div>
-          <div class="card-arrow">↔</div>
-          <div class="card-network">
-            <span class="card-label">网络</span>
-            <span class="card-value">{{ item.network }}</span>
-          </div>
-          <div class="card-explanation" v-if="hoveredCard === item">
-            {{ item.explanation }}
-          </div>
-        </div>
-      </div>
+      </transition>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const url = ref('')
-const isRunning = ref(false)
-const showResult = ref(false)
+const isActive = ref(false)
 const currentStep = ref(0)
-const progress = ref(0)
-const time = ref(0)
-const hoveredCard = ref(null)
 
-const quickUrls = [
-  { domain: 'baidu.com', desc: '百度搜索引擎' },
-  { domain: 'github.com', desc: '代码托管平台' },
-  { domain: 'vuejs.org', desc: 'Vue.js 官网' }
-]
+const quickUrls = ['baidu.com', 'bilibili.com', 'github.com']
 
-// 步骤定义
 const steps = [
   {
-    id: 'parse',
-    deliveryIcon: '写',
-    deliveryTitle: '填写快递单',
-    deliveryDesc: '写明收件人、地址、电话',
-    mappingLabel: '对应',
-    networkIcon: '输',
-    networkTitle: '输入网址',
-    networkDesc: '浏览器解析 URL',
-    techDetail: '协议 + 域名 + 路径 + 参数'
+    name: '出发',
+    icon: '🛒',
+    title: 'URL 解析',
+    analogyAction: '填写购物单...',
+    analogyDesc: '列出想要的商品清单',
+    techDesc: '解析协议、域名和路径'
   },
   {
-    id: 'dns',
-    deliveryIcon: '查',
-    deliveryTitle: '查地址簿',
-    deliveryDesc: '姓名 → 门牌号',
-    mappingLabel: '对应',
-    networkIcon: 'DNS',
-    networkTitle: 'DNS 查询',
-    networkDesc: '域名 → IP 地址',
-    techDetail: 'google.com → 142.250.80.46'
+    name: '查仓库',
+    icon: '🗺️',
+    title: 'DNS 查询',
+    analogyAction: '查发货地...',
+    analogyDesc: '在地图上找到商家仓库',
+    techDesc: '将域名解析为 IP 地址'
   },
   {
-    id: 'tcp',
-    deliveryIcon: '电',
-    deliveryTitle: '打电话确认',
-    deliveryDesc: '"在家吗？能收件吗？"',
-    mappingLabel: '对应',
-    networkIcon: 'TCP',
-    networkTitle: 'TCP 三次握手',
-    networkDesc: '建立可靠连接',
-    techDetail: 'SYN → SYN-ACK → ACK'
+    name: '建立通道',
+    icon: '📞',
+    title: 'TCP 握手',
+    analogyAction: '联系商家...',
+    analogyDesc: '确认商家营业且能送货',
+    techDesc: '建立可靠的数据通道'
   },
   {
-    id: 'http',
-    deliveryIcon: '送',
-    deliveryTitle: '快递员送货',
-    deliveryDesc: '把包裹送到对方手中',
-    mappingLabel: '对应',
-    networkIcon: 'HTTP',
-    networkTitle: 'HTTP 传输',
-    networkDesc: '请求网页数据',
-    techDetail: 'GET /index.html → 200 OK'
+    name: '发货',
+    icon: '🚚',
+    title: 'HTTP 请求',
+    analogyAction: '运输中...',
+    analogyDesc: '商家打包发货，快递送达',
+    techDesc: '发送请求并接收响应'
   },
   {
-    id: 'render',
-    deliveryIcon: '拆',
-    deliveryTitle: '拆开包裹',
-    deliveryDesc: '看到礼物内容',
-    mappingLabel: '对应',
-    networkIcon: '渲染',
-    networkTitle: '浏览器渲染',
-    networkDesc: '显示网页内容',
-    techDetail: 'HTML + CSS + JS → 像素'
+    name: '收货',
+    icon: '🎁',
+    title: '浏览器渲染',
+    analogyAction: '拆箱体验！',
+    analogyDesc: '收到包裹，取出商品展示',
+    techDesc: '解析代码绘制页面'
   }
 ]
 
-// 名词对照表
-const glossary = [
-  {
-    delivery: '快递单',
-    network: 'URL',
-    explanation: '网页的完整地址，包含去哪里找、找什么资源'
-  },
-  {
-    delivery: '收件人姓名',
-    network: '域名',
-    explanation: '服务器的名字，如 google.com，方便人类记忆'
-  },
-  {
-    delivery: '门牌号',
-    network: 'IP 地址',
-    explanation: '服务器的数字地址，如 142.250.80.46，计算机使用'
-  },
-  {
-    delivery: '查地址簿',
-    network: 'DNS 查询',
-    explanation: '把域名转换成 IP 地址的查询系统'
-  },
-  {
-    delivery: '打电话确认',
-    network: 'TCP 握手',
-    explanation: '确保双方在线且能正常通信的确认过程'
-  },
-  {
-    delivery: '快递员送货',
-    network: 'HTTP 请求',
-    explanation: '浏览器向服务器请求数据，服务器返回响应'
-  },
-  {
-    delivery: '拆开包裹',
-    network: '浏览器渲染',
-    explanation: '把代码转换成屏幕上看到的图文页面'
-  }
-]
+// 计算属性
+const isFinished = computed(() => currentStep.value === steps.length - 1)
 
-const startJourney = () => {
-  if (!url.value) return
-  isRunning.value = true
-  showResult.value = false
-  currentStep.value = 0
-  progress.value = 0
-  const startTime = Date.now()
+const mainButtonText = computed(() => {
+  if (!isActive.value) return '提交订单'
+  if (isFinished.value) return '再来一单'
+  return '下一步'
+})
 
-  let step = 0
-  const runStep = () => {
-    if (step >= steps.length) {
-      isRunning.value = false
-      showResult.value = true
-      time.value = Date.now() - startTime
-      return
-    }
-    currentStep.value = step
+// 包裹位置 (0-100)
+const packagePosition = computed(() => {
+  if (!isActive.value) return 0
+  const segmentCount = steps.length - 1
+  const segmentWidth = 100 / segmentCount
+  return currentStep.value * segmentWidth
+})
 
-    // 进度动画
-    let p = step * 20
-    const interval = setInterval(() => {
-      p += 1
-      progress.value = p
-      if (p >= (step + 1) * 20) {
-        clearInterval(interval)
-        step++
-        setTimeout(runStep, 600)
-      }
-    }, 80)
-  }
-  runStep()
+// 方法
+const quickStart = (u) => {
+  url.value = u
+  handleMainAction()
 }
 
-const reset = () => {
-  url.value = ''
-  isRunning.value = false
-  showResult.value = false
-  currentStep.value = 0
-  progress.value = 0
+const handleMainAction = () => {
+  if (!url.value) return
+
+  if (!isActive.value) {
+    // 开始
+    isActive.value = true
+    currentStep.value = 0
+  } else if (isFinished.value) {
+    // 重置
+    isActive.value = false
+    currentStep.value = 0
+    url.value = ''
+  } else {
+    // 下一步
+    nextStep()
+  }
+}
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+const prevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+
+const jumpToStep = (index) => {
+  if (!isActive.value) return
+  currentStep.value = index
 }
 </script>
 
 <style scoped>
-.delivery-journey {
-  background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 16px;
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* 头部 */
-.journey-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.journey-icon {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--vp-c-brand);
-}
-.journey-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-
-/* 快递单 */
-.delivery-form {
-  margin-bottom: 16px;
-}
-.form-label {
-  font-size: 14px;
-  color: var(--vp-c-text-2);
-  margin-bottom: 10px;
-  font-weight: 500;
-}
-.address-input {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.quick-start-compact {
   background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 4px;
-  transition: border-color 0.3s;
+  padding: 20px;
+  margin: 16px 0;
+  font-family: var(--vp-font-family-base);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  overflow: hidden;
 }
-.address-input:focus-within {
-  border-color: var(--vp-c-brand);
+
+/* 顶部输入栏 */
+.input-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  gap: 12px;
+  flex-wrap: wrap;
 }
-.protocol-badge {
-  padding: 8px 12px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  font-size: 13px;
-  color: var(--vp-c-text-3);
-  font-family: monospace;
-}
-.address-input input {
+
+.input-wrapper {
   flex: 1;
-  border: none;
-  background: transparent;
-  font-size: 15px;
-  padding: 8px;
-  outline: none;
-  color: var(--vp-c-text-1);
-}
-.send-btn {
-  padding: 10px 20px;
-  background: linear-gradient(135deg, var(--vp-c-brand), #67c23a);
-  color: white;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
+  display: flex;
+  align-items: center;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 4px;
+  min-width: 280px;
   transition: all 0.3s;
 }
-.send-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+.input-wrapper:focus-within {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 2px rgba(var(--vp-c-brand-rgb), 0.2);
 }
-.send-btn:disabled {
-  opacity: 0.6;
+
+.protocol {
+  padding: 0 8px 0 12px;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+  font-family: monospace;
+}
+
+input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: 8px 0;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  outline: none;
+}
+
+.start-btn {
+  background: linear-gradient(135deg, var(--vp-c-brand), var(--vp-c-brand-dark));
+  color: white;
+  border: none;
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  min-width: 80px;
+}
+.start-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  background: var(--vp-c-divider);
+}
+.start-btn:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(var(--vp-c-brand-rgb), 0.4);
+}
+
+.start-btn.next-btn {
+  background: var(--vp-c-brand-light);
+}
+
+.start-btn.reset-btn {
+  background: var(--vp-c-text-3);
+}
+
+.step-controls {
+  display: flex;
+  gap: 4px;
+}
+.control-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.control-btn:hover:not(:disabled) {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand);
+}
+.control-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* 快速选择 */
-.quick-select {
+.quick-chips {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-bottom: 16px;
+  gap: 8px;
 }
-.quick-hint {
-  font-size: 13px;
-  color: var(--vp-c-text-3);
-}
-.quick-btn {
-  padding: 6px 14px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  transition: all 0.2s;
-}
-.quick-btn:hover {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-  transform: translateY(-1px);
-}
-
-/* 双栏对照视图 */
-.comparison-view {
-  margin-top: 20px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 20px;
-}
-
-.comparison-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 16px;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid var(--vp-c-divider);
-}
-
-.side-label {
-  font-size: 14px;
-  font-weight: 600;
-  padding: 8px 16px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.delivery-side {
-  background: linear-gradient(135deg, #e6f7ff, #bae7ff);
-  color: #096dd9;
-}
-
-.network-side {
-  background: linear-gradient(135deg, #f6ffed, #d9f7be);
-  color: #389e0d;
-}
-
-.connection-hint {
+.chip-label {
   font-size: 12px;
   color: var(--vp-c-text-3);
-  padding: 4px 12px;
+}
+.chip {
+  padding: 4px 10px;
   background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.chip:hover {
+  color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
 }
 
-/* 步骤行 */
-.comparison-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.step-row {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 12px;
-  align-items: stretch;
-  padding: 12px;
-  border-radius: 10px;
-  transition: all 0.3s;
-  opacity: 0.4;
-}
-
-.step-row.passed {
-  opacity: 0.7;
-  background: rgba(103, 194, 58, 0.05);
-}
-
-.step-row.current {
-  opacity: 1;
-  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
-  border: 2px solid var(--vp-c-brand);
-  transform: scale(1.02);
-}
-
-/* 左侧：快递流程 */
-.step-delivery {
+/* 核心传送带舞台 */
+.conveyor-stage {
+  position: relative;
+  height: 80px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: linear-gradient(135deg, #e6f7ff, #f0f5ff);
-  border-radius: 10px;
-  border: 1px solid #91d5ff;
+  justify-content: space-between;
+  padding: 0 30px; /* 留出两端空间 */
+  margin-bottom: 20px;
 }
 
-.step-delivery .step-icon {
-  width: 40px;
-  height: 40px;
-  background: #1890ff;
-  color: white;
+.track-line {
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 36px;
+  height: 4px;
+  background: var(--vp-c-divider);
+  border-radius: 2px;
+  z-index: 0;
+}
+.track-progress {
+  height: 100%;
+  background: var(--vp-c-brand);
+  border-radius: 2px;
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.station {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40px; /* 固定宽度以便定位 */
+  cursor: pointer;
+}
+
+.station-icon-box {
+  width: 32px;
+  height: 32px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
-  font-weight: bold;
-  flex-shrink: 0;
+  margin-bottom: 8px;
+  transition: all 0.3s;
 }
-
-.step-delivery .step-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #096dd9;
-}
-
-.step-delivery .step-desc {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  margin-top: 4px;
-}
-
-/* 中间：连接器 */
-.step-connector {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  min-width: 60px;
-}
-
-.connector-line {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--vp-c-divider);
-}
-
-.connector-arrow {
-  width: 28px;
-  height: 28px;
+.station.active .station-icon-box {
+  border-color: var(--vp-c-brand);
   background: var(--vp-c-brand);
   color: white;
+  transform: scale(1.2);
+}
+.station.passed .station-icon-box {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand);
+}
+.station:hover .station-icon-box {
+  border-color: var(--vp-c-brand);
+}
+
+.station-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  position: absolute;
+  top: 40px;
+  width: 80px;
+  text-align: center;
+  transition: all 0.3s;
+}
+.station.active .station-label {
+  color: var(--vp-c-text-1);
+  font-weight: 600;
+  top: 44px;
+}
+
+/* 移动包裹 */
+.moving-package {
+  position: absolute;
+  top: 16px;
+  width: 40px;
+  height: 40px;
+  z-index: 2;
+  pointer-events: none;
+  
+  /* 定位逻辑 */
+  transform: translateX(-50%);
+  left: calc(30px + (100% - 60px) * (var(--package-pos) / 100)); 
+  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.package-body {
+  font-size: 24px;
+  animation: bounce-move 0.5s infinite alternate;
+}
+.package-shadow {
+  width: 20px;
+  height: 6px;
+  background: rgba(0,0,0,0.1);
   border-radius: 50%;
+  margin: -4px auto 0;
+  animation: shadow-scale 0.5s infinite alternate;
+}
+
+.package-bubble {
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--vp-c-brand);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+  opacity: 0.9;
+}
+.package-bubble::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid var(--vp-c-brand);
+}
+
+@keyframes bounce-move {
+  from { transform: translateY(0); }
+  to { transform: translateY(-6px); }
+}
+@keyframes shadow-scale {
+  from { transform: scale(1); opacity: 0.3; }
+  to { transform: scale(0.6); opacity: 0.1; }
+}
+
+/* 底部动态信息条 */
+.dynamic-info-bar {
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  height: 50px; /* 极简高度 */
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-  z-index: 1;
+  padding: 0 16px;
+  border: 1px dashed var(--vp-c-divider);
+  margin-top: 8px;
 }
 
-.connector-label {
+.info-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.info-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.stage-badge {
+  background: var(--vp-c-brand);
+  color: white;
   font-size: 10px;
-  color: var(--vp-c-text-3);
-  margin-top: 4px;
-  background: var(--vp-c-bg-soft);
   padding: 2px 6px;
   border-radius: 4px;
 }
-
-/* 右侧：网络流程 */
-.step-network {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: linear-gradient(135deg, #f6ffed, #f0f9ff);
-  border-radius: 10px;
-  border: 1px solid #b7eb8f;
-}
-
-.step-network .step-icon {
-  width: 40px;
-  height: 40px;
-  background: #52c41a;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-  flex-shrink: 0;
-}
-
-.step-network .step-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #389e0d;
-}
-
-.step-network .step-desc {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  margin-top: 4px;
-}
-
-.step-network .step-tech {
-  font-size: 11px;
-  color: var(--vp-c-brand);
-  margin-top: 6px;
-  padding: 4px 8px;
-  background: rgba(64, 158, 255, 0.1);
-  border-radius: 4px;
-  font-family: monospace;
-}
-
-/* 当前步骤提示 */
-.current-step-hint {
-  margin-top: 20px;
-  padding: 16px;
-  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
-  border-radius: 10px;
-  text-align: center;
-}
-
-.hint-label {
-  font-size: 12px;
-  color: var(--vp-c-text-3);
-  margin-bottom: 8px;
-}
-
-.hint-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.hint-delivery {
-  font-size: 14px;
-  font-weight: 600;
-  color: #096dd9;
-  padding: 6px 12px;
-  background: #e6f7ff;
-  border-radius: 6px;
-}
-
-.hint-equals {
-  font-size: 16px;
-  font-weight: bold;
-  color: var(--vp-c-brand);
-}
-
-.hint-network {
-  font-size: 14px;
-  font-weight: 600;
-  color: #389e0d;
-  padding: 6px 12px;
-  background: #f6ffed;
-  border-radius: 6px;
-}
-
-/* 进度条 */
-.progress-track {
-  height: 8px;
-  background: var(--vp-c-divider);
-  border-radius: 4px;
-  overflow: hidden;
-  margin-top: 16px;
-}
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), #67c23a);
-  border-radius: 4px;
-  transition: width 0.1s linear;
-}
-
-/* 送达结果 */
-.delivery-result {
-  margin-top: 20px;
-  text-align: center;
-}
-.success-banner {
-  font-size: 16px;
-  font-weight: 600;
-  color: #67c23a;
-  margin-bottom: 20px;
-  padding: 12px;
-  background: rgba(103, 194, 58, 0.1);
-  border-radius: 10px;
-}
-.page-preview {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 20px;
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
-}
-.browser-chrome {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.chrome-dots {
-  display: flex;
-  gap: 6px;
-}
-.chrome-dots span {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--vp-c-divider);
-}
-.chrome-dots span:nth-child(1) { background: #ff5f57; }
-.chrome-dots span:nth-child(2) { background: #febc2e; }
-.chrome-dots span:nth-child(3) { background: #28c840; }
-.chrome-address {
-  flex: 1;
-  padding: 4px 10px;
-  background: var(--vp-c-bg);
-  border-radius: 4px;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  text-align: left;
-}
-.page-content {
-  padding: 20px;
-}
-.skeleton-line {
-  height: 12px;
-  background: var(--vp-c-divider);
-  border-radius: 6px;
-  margin-bottom: 12px;
-}
-.skeleton-img {
-  width: 80px;
-  height: 60px;
-  background: linear-gradient(135deg, var(--vp-c-divider), var(--vp-c-bg-soft));
-  border-radius: 8px;
-  margin: 16px auto;
-}
-.retry-btn {
-  padding: 10px 24px;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 24px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--vp-c-text-2);
-  font-weight: 500;
-  transition: all 0.3s;
-}
-.retry-btn:hover {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-
-/* 名词对照卡片 */
-.glossary-cards {
-  margin-top: 24px;
-  padding-top: 20px;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.glossary-title {
-  font-size: 14px;
+.stage-title {
   font-weight: 600;
+  font-size: 13px;
   color: var(--vp-c-text-1);
-  margin-bottom: 16px;
-  text-align: center;
 }
 
-.cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
+.info-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--vp-c-divider);
+  margin: 0 16px;
 }
 
-.glossary-card {
-  position: relative;
-  padding: 12px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.3s;
+.info-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  justify-content: center;
 }
 
-.glossary-card:hover {
-  border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.mapping-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+.mapping-arrow {
+  color: var(--vp-c-divider);
+  font-size: 12px;
+}
+.mapping-text {
+  color: var(--vp-c-text-1);
 }
 
-.card-delivery,
-.card-network {
+.info-placeholder {
+  color: var(--vp-c-text-3);
+  font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.card-network {
-  margin-top: 8px;
+/* 动画过渡 */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s ease;
+}
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
 }
 
-.card-label {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-}
-
-.card-delivery .card-label {
-  background: #e6f7ff;
-  color: #096dd9;
-}
-
-.card-network .card-label {
-  background: #f6ffed;
-  color: #389e0d;
-}
-
-.card-value {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.card-arrow {
-  text-align: center;
-  font-size: 14px;
-  color: var(--vp-c-text-3);
-  margin: 4px 0;
-}
-
-.card-explanation {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--vp-c-divider);
-  font-size: 11px;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .comparison-header {
-    grid-template-columns: 1fr;
-    gap: 8px;
+@media (max-width: 640px) {
+  .conveyor-stage {
+    padding: 0 10px;
   }
-
-  .connection-hint {
-    display: none;
+  .track-line {
+    left: 10px;
+    right: 10px;
   }
-
-  .step-row {
-    grid-template-columns: 1fr;
-    gap: 8px;
+  .info-content {
+    flex-direction: column;
+    align-items: flex-start;
   }
-
-  .step-connector {
-    flex-direction: row;
-    min-height: 40px;
+  .dynamic-info-bar {
+    height: auto;
+    padding: 10px;
   }
-
-  .connector-line {
-    position: static;
-    width: 100%;
-    height: 2px;
-  }
-
-  .cards-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .address-input {
-    flex-wrap: wrap;
-  }
-
-  .protocol-badge {
-    display: none;
+  .info-divider { display: none; }
+  .info-right {
+    margin-top: 8px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
   }
+  .mapping-arrow { display: none; }
 }
 </style>
diff --git a/docs/zh-cn/appendix/url-to-browser.md b/docs/zh-cn/appendix/url-to-browser.md
index 3a5f76b..f27aa73 100644
--- a/docs/zh-cn/appendix/url-to-browser.md
+++ b/docs/zh-cn/appendix/url-to-browser.md
@@ -9,66 +9,66 @@ import HttpExchangeDemo from '../../.vitepress/theme/components/appendix/url-to-
 import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue'
 </script>
 
-> **学习指南**：本章节无需编程基础。我们将用**"寄快递"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
+> **学习指南**：本章节无需编程基础。我们将用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
 
 ---
 
 ## 0. 引言：当你按下回车键的那一刻
 
-想象你要给远方的朋友寄一份礼物。你需要：
-1. **填写快递单**（写明地址、收件人）
-2. **快递公司查地址**（把"XX市XX区"转换成具体的门牌号）
-3. **打电话确认**（确保对方在家能收件）
-4. **快递员送达**（把包裹交给对方）
-5. **朋友拆开包裹**（看到礼物）
+想象你正在进行一次**网购**。你需要：
+1. **填写订单**（选好商品，确认收货地址）
+2. **系统查找仓库**（根据店铺名找到具体的发货仓库）
+3. **建立物流通道**（确保仓库正常营业且能发货）
+4. **仓库发货**（快递员把包裹送上门）
+5. **拆箱体验**（打开包裹，看到心仪的商品）
 
-**访问网页的过程和寄快递惊人地相似！**
+**访问网页的过程和网购惊人地相似！**
 
-当你在浏览器输入 `google.com` 并按下回车，浏览器就是那个"快递员"，它要完成一次从"你的电脑"到"远方服务器"再到"屏幕显示"的完整旅程。
+当你在浏览器输入 `google.com` 并按下回车，你就是那个"买家"，浏览器通过一系列操作，最终把远方服务器上的"商品"（网页内容）送到你的屏幕上。
 
 <UrlToBrowserQuickStart />
 
 ---
 
-## 1. 第一步：填写"快递单" —— URL 解析
+## 1. 第一步：填写"订单" —— URL 解析
 
-### 生活比喻：填写快递单
+### 生活比喻：填写购物单
 
-假设你只在快递单上写"寄给张三"，快递员肯定找不到人。你需要写清楚：
-- **用什么快递**（顺丰/中通）
-- **哪个城市**（北京市）
-- **具体地址**（朝阳区XX街道XX号）
-- **哪栋楼哪间房**（3号楼201）
-- **备注信息**（放快递柜/打电话）
+假设你只在订单上写"买鞋子"，仓库肯定不知道发哪双。你需要写清楚：
+- **店铺类型**（官方旗舰店/普通店）
+- **店铺名称**（Nike 官方店）
+- **商品位置**（男鞋区/跑鞋系列）
+- **具体型号**（Air Max 90）
+- **备注信息**（我要红色的）
 
 ### 真实过程：浏览器解析 URL
 
-**URL（Uniform Resource Locator，统一资源定位符）**就是浏览器世界的"快递单格式"。当你在地址栏输入 `https://www.example.com:8080/path/page.html?id=123#section`，浏览器会立即拆解它：
+**URL（Uniform Resource Locator，统一资源定位符）**就是浏览器世界的"商品定位码"。当你在地址栏输入 `https://www.example.com:8080/path/page.html?id=123#section`，浏览器会立即拆解它：
 
-| URL 部分 | 示例值 | 快递单类比 | 技术作用 |
+| URL 部分 | 示例值 | 网购类比 | 技术作用 |
 |----------|--------|-----------|----------|
-| **协议** `https://` | 安全超文本传输协议 | **快递公司**：顺丰（安全）vs 中通（普通） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输 |
-| **域名** `www.example.com` | 服务器的人类可读名字 | **收件人姓名**：张三 | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址 |
-| **端口** `:8080` | 服务器的具体"门牌号" | **详细门牌号**：3号楼201（默认不写） | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
-| **路径** `/path/page.html` | 服务器上的文件位置 | **房间里的抽屉**：衣柜第二层 | 指定服务器上的具体资源位置 |
-| **查询参数** `?id=123` | 附加信息 | **备注**：请轻拿轻放 | 传递给服务器的额外数据，如搜索关键词、页码等 |
-| **锚点** `#section` | 页面内的位置 | **书里的页码**：翻到第5页 | 页面加载后自动滚动到指定位置，不发送给服务器 |
+| **协议** `https://` | 安全超文本传输协议 | **物流方式**：保密配送（HTTPS）vs 普通配送（HTTP） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输 |
+| **域名** `www.example.com` | 服务器的人类可读名字 | **店铺名称**：京东超市 | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址 |
+| **端口** `:8080` | 服务器的具体"门牌号" | **柜台编号**：3号柜台（默认不写） | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
+| **路径** `/path/page.html` | 服务器上的文件位置 | **货架位置**：日用品区/第三排 | 指定服务器上的具体资源位置 |
+| **查询参数** `?id=123` | 附加信息 | **订单备注**：红色、XL码 | 传递给服务器的额外数据，如搜索关键词、页码等 |
+| **锚点** `#section` | 页面内的位置 | **说明书页码**：翻到第5页 | 页面加载后自动滚动到指定位置，不发送给服务器 |
 
 <UrlParserDemo />
 
-> **关键理解**：URL 的存在是为了让**人类**能记住和输入。计算机最终需要的是 **IP 地址**（就像快递员最终需要的是门牌号，而不是"张三的家"）。
+> **关键理解**：URL 的存在是为了让**人类**能记住和输入。计算机最终需要的是 **IP 地址**（就像快递员最终需要的是具体的仓库地址，而不是"Nike 官方店"这个名字）。
 
 ---
 
 ## 2. 第二步：查"地址簿" —— DNS 查询
 
-### 生活比喻：查地址簿
+### 生活比喻：查仓库地址
 
-你告诉快递员"送到张三那里"，但快递员怎么知道张三住哪？他需要查地址簿：
-1. 先翻**通讯录**（最近联系过的人）→ 浏览器缓存
-2. 没有的话问**社区服务中心**（他们知道各个小区归谁管）→ 本地 DNS 服务器
-3. 社区问**总管理处**（他们知道XX街道归哪个片区管）→ 根域名服务器
-4. 片区查**住户登记**（最终找到张三的门牌号）→ 权威域名服务器
+你下单写的是"Nike 官方店"，但物流系统不知道仓库在哪。它需要查地址簿：
+1. 先查**常用地址**（最近买过这家吗）→ 浏览器缓存
+2. 没有的话问**小区快递点**（他们知道大区域的分配）→ 本地 DNS 服务器
+3. 问**总部调度中心**（知道.com类店铺归谁管）→ 根域名服务器
+4. 问**品牌管理处**（最终找到 Nike 店铺的真实发货仓库）→ 权威域名服务器
 
 ### 真实过程：DNS 分层查询
 
@@ -101,29 +101,29 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 
 ## 3. 第三步：打电话确认 —— TCP 三次握手
 
-### 生活比喻：打电话确认
+### 生活比喻：建立物流通道
 
-假设快递员直接冲到张三家门口，结果：
-- 张三不在家 → 白跑一趟
-- 电话打不通 → 不知道送哪
-- 地址错了 → 送错地方
+假设物流车直接开到仓库，结果：
+- 仓库关门了 → 白跑一趟
+- 仓库爆仓不接单 → 无法发货
+- 找不到卸货口 → 无法对接
 
-**所以在真正送包裹之前，必须先确认"对方能收到"**。
+**所以在真正发货之前，必须先建立可靠的运输通道**。
 
 ### 真实过程：TCP 三次握手
 
-**TCP（Transmission Control Protocol，传输控制协议）**是确保数据可靠传输的规则。在发送任何数据前，客户端和服务器必须通过"三次握手"建立可靠连接：
+**TCP（Transmission Control Protocol，传输控制协议）**是确保数据可靠传输的规则。在传输商品（数据）前，必须通过"三次握手"建立连接：
 
 ```
-客户端（你的浏览器）              服务器（网站）
+客户端（你的电脑）              服务器（商家仓库）
    |                                |
-   |--- SYN=1, seq=x ------------->|  第1次：我想连接你，我的初始序号是 x
+   |--- SYN=1 --------------------->|  第1次：你好，我在家，准备收货！(SYN)
    |                                |
-   |<-- SYN=1, ACK=1, seq=y, ack=x+1 |  第2次：我也想连接你，我的初始序号是 y，期待收到 x+1
+   |<-- SYN=1, ACK=1 ---------------|  第2次：收到！我也准备好发货了，你在家吗？(SYN-ACK)
    |                                |
-   |--- ACK=1, ack=y+1 ----------->|  第3次：确认，期待收到 y+1
+   |--- ACK=1 --------------------->|  第3次：在的！请发货吧。(ACK)
    |                                |
-   ===== 连接建立，开始传输数据 =====
+   ===== 通道建立，开始发货 =====
 ```
 
 **为什么是三次，不是两次？**
@@ -146,16 +146,16 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 
 ---
 
-## 4. 第四步："快递员"和"收件人"的对话 —— HTTP 请求与响应
+## 4. 第四步："买家"和"商家"的对话 —— HTTP 请求与响应
 
-### 生活比喻：快递员送达
+### 生活比喻：仓库发货
 
-快递员敲门："张三在吗？您的快递！"
-张三开门："好的，给我吧。" 或者 "我没买东西啊，退回去吧。"
+物流车到达仓库："这是订单（HTTP请求），**我要取回商品（网页 HTML 源代码）！**"
+仓库管理员核对："订单有效，这是你要的包裹（**HTML 文件**），请拿好。"
 
 ### 真实过程：HTTP 协议通信
 
-**HTTP（HyperText Transfer Protocol，超文本传输协议）**是浏览器和服务器之间的"对话规则"。TCP 连接建立后，浏览器发送 HTTP 请求：
+**HTTP（HyperText Transfer Protocol，超文本传输协议）**是浏览器和服务器之间的"对话规则"。通道建立后，浏览器发送**取货请求**，**核心目标是拿回网页的源代码（HTML 文件）**：
 
 **HTTP 请求示例：**
 ```http
@@ -169,6 +169,20 @@ Connection: keep-alive            ← 保持连接（复用 TCP 连接）
 Cookie: session_id=abc123         ← 身份凭证
 ```
 
+::: tip 💡 开发者顿悟：这不就是 API 吗？
+**一模一样！**
+你平时写的 API 调用（`fetch` / `axios`）和浏览器访问网页，在 **HTTP 层面完全是同一个东西**。
+
+它们都是发送一个请求，服务器返回一段文本数据。
+*   如果服务器给的是 **HTML**，浏览器就把它**画出来**（变成网页）。
+*   如果服务器给的是 **JSON**，你的代码就把它**存起来**（用于逻辑处理）。
+
+**根本就没有"两种"请求，只有同一种 HTTP 请求，只是返回的数据格式（Content-Type）不同而已。**
+这也是为什么理解了 HTTP，你就理解了 90% 的后端 API 原理。
+
+如果你想深入学习 API 开发，请参考 [API 章节](./api-intro.md)。
+:::
+
 **常见 HTTP 方法：**
 - `GET`：获取资源（安全、幂等，可被缓存）
 - `POST`：提交数据（创建资源，如注册、登录）
@@ -193,16 +207,16 @@ Set-Cookie: user_id=xyz789        ← 设置 Cookie
 
 | 状态码 | 类别 | 含义 | 生活类比 |
 |--------|------|------|----------|
-| **200** | 成功 | 请求成功处理 | "给，这是你要的" |
-| **301/302** | 重定向 | 资源已移动 | "搬家了，去新地址取" |
-| **304** | 未修改 | 缓存仍有效 | "和上次一样，不用重新拿" |
-| **400** | 客户端错误 | 请求格式错误 | "你说的话我听不懂" |
-| **401** | 未授权 | 需要身份验证 | "请出示证件" |
-| **403** | 禁止访问 | 权限不足 | "你不准进" |
-| **404** | 未找到 | 资源不存在 | "没这个人/没这个东西" |
-| **500** | 服务器错误 | 服务器内部错误 | "我们这系统出故障了" |
-| **502** | 网关错误 | 上游服务器无响应 | "我们上级部门没回应" |
-| **503** | 服务不可用 | 服务器过载或维护 | "今天休息，不营业" |
+| **200** | 成功 | 请求成功处理 | "订单确认，马上发货" |
+| **301/302** | 重定向 | 资源已移动 | "本店搬家了，请去新店下单" |
+| **304** | 未修改 | 缓存仍有效 | "你上次买的还能用，不用重新发货" |
+| **400** | 客户端错误 | 请求格式错误 | "订单填写模糊，看不懂" |
+| **401** | 未授权 | 需要身份验证 | "请先出示会员卡" |
+| **403** | 禁止访问 | 权限不足 | "非内部人员禁止入内" |
+| **404** | 未找到 | 资源不存在 | "仓库里没这款商品" |
+| **500** | 服务器错误 | 服务器内部错误 | "仓库起火了，暂时发不了货" |
+| **502** | 网关错误 | 上游服务器无响应 | "总仓没货了，分仓也调不到" |
+| **503** | 服务不可用 | 服务器过载或维护 | "爆单了，暂停接单" |
 
 <HttpExchangeDemo />
 
@@ -210,118 +224,89 @@ Set-Cookie: user_id=xyz789        ← 设置 Cookie
 
 ## 5. 第五步：拆开"包裹" —— 浏览器渲染
 
-### 生活比喻：拆开包裹看到礼物
+### 生活比喻：拆箱与组装
 
-快递员把包裹交给张三，张三看到的是**包装盒**。他需要：
-1. **拆开包装**（去掉快递袋）→ 解析 HTML
-2. **查看说明书**（了解怎么用）→ 解析 CSS
-3. **组装零件**（按说明书拼装）→ 构建渲染树
-4. **摆放位置**（确定放哪里）→ 布局计算
-5. **最终呈现**（展示成品）→ 绘制到屏幕
+你终于收到了快递包裹（HTTP 响应），但打开一看，里面不是现成的家具，而是一堆**零件**（HTML）和一本**组装说明书**（CSS）。作为"买家"（浏览器），你需要亲自动手组装：
+
+1.  **拆开包装**：取出所有零件，核对清单（解析 HTML → DOM 树）。
+2.  **阅读说明**：看懂说明书，知道哪个零件该装哪、什么颜色（解析 CSS → CSSOM 树）。
+3.  **分类整理**：挑出需要组装的零件，扔掉包装泡沫（`display: none`），准备组装（构建渲染树）。
+4.  **测量位置**：用尺子量好房间尺寸，决定每个家具具体摆在哪（布局/回流）。
+5.  **上色装饰**：给家具刷漆、贴贴纸（绘制）。
+6.  **最终展示**：打扫干净，开灯展示（合成）。
 
 ### 真实过程：浏览器渲染引擎
 
 浏览器收到的是 **HTML/CSS/JavaScript 代码**（枯燥的文本），但它要变成**像素画面**（精美的网页）。这个过程叫做**渲染（Rendering）**，由浏览器的**渲染引擎**（如 Chrome 的 Blink、Safari 的 WebKit）执行。
 
-#### 步骤1：解析 HTML → 构建 DOM 树
+#### 步骤1：解析 HTML → 构建 DOM 树 (零件清单)
 
-浏览器读取 HTML 字节流，按编码（通常是 UTF-8）转换成字符，通过词法分析生成 Token，再解析成 DOM 节点，最终构建成**DOM（Document Object Model，文档对象模型）树**：
+浏览器读取 HTML 字节流，将其解析为**DOM（Document Object Model，文档对象模型）树**。这就像把一堆散乱的零件整理成一个有层级关系的清单：
 
 ```html
 <!-- 原始 HTML -->
-<html>
-  <body>
-    <div class="header">标题</div>
-    <div class="content">内容</div>
-  </body>
-</html>
+<div class="header">标题</div>
+<div class="content">内容</div>
 ```
 
-```
-变成树形结构：
-        Document
-           │
-        html
-           │
-        body
-       /      \
-    div        div
-  .header    .content
-    │           │
-  "标题"      "内容"
+```text
+DOM 树结构：
+Document
+ └─ html
+     └─ body
+         ├─ div.header ("标题")
+         └─ div.content ("内容")
 ```
 
-**关键特性：**
-- **流式解析**：浏览器边下载边解析，不需要等整个 HTML 下载完
-- **遇到 script 标签**：会暂停解析，先下载并执行 JavaScript（除非加 `async` 或 `defer`）
-- **遇到 css 链接**：不会阻塞解析，但会阻塞渲染（需要等 CSS 下载完）
+#### 步骤2：解析 CSS → 构建 CSSOM 树 (说明书)
 
-#### 步骤2：解析 CSS → 构建 CSSOM 树
-
-浏览器同时解析 CSS（内联样式、`<style>` 标签、外部 `.css` 文件），构建**CSSOM（CSS Object Model，CSS 对象模型）树**：
+浏览器解析所有的 CSS（内联、外部文件），构建**CSSOM（CSS Object Model）树**。这就像理解说明书上的样式规则：
 
 ```css
-.header { color: blue; font-size: 24px; }
-.content { margin: 20px; background: #f0f0f0; }
+.header { color: blue; font-size: 24px; } /* 标题要是蓝色的 */
+.content { display: none; }               /* 内容暂时隐藏 */
 ```
 
-CSSOM 树与 DOM 树结构类似，但存储的是样式规则。
+#### 步骤3：合并 → 渲染树 (准备组装)
 
-**CSS 解析特点：**
-- **阻塞渲染**：CSS 会阻塞渲染，因为浏览器不知道元素长什么样就无法绘制
-- **层叠和继承**：CSS 的"C"就是 Cascading（层叠），遵循特定的优先级规则
+DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
+关键点：**只有"可见"的元素才会在渲染树中**。
+*   `.header`：在渲染树中（可见）。
+*   `.content`：**不在**渲染树中（因为 `display: none`，就像被扔掉的包装纸，不需要组装）。
 
-#### 步骤3：合并 → 渲染树（Render Tree）
+#### 步骤4：布局 (Layout / Reflow) —— 测量尺寸
 
-DOM 树 + CSSOM 树 = **渲染树**。渲染树只包含可见元素（`display: none` 的元素不会进入渲染树）。
+浏览器计算渲染树中每个节点在屏幕上的**精确坐标和大小**。
+*   "这个标题框宽 100px，高 50px，放在屏幕左上角 (0,0) 位置。"
+*   这个过程叫**重排 (Reflow)**。如果窗口大小变了（比如手机横屏），所有元素的位置都要重新计算，非常消耗性能。
 
-```
-渲染树节点示例：
-- 节点类型：div
-- 样式：color: blue, font-size: 24px
-- 内容："标题"
-```
+#### 步骤5：绘制 (Paint) —— 上色
 
-#### 步骤4：布局（Layout / Reflow）
+知道位置后，浏览器开始填充像素：画背景色、文字颜色、边框、阴影等。
 
-浏览器计算渲染树中每个节点的**精确位置和大小**：
-- 视口（viewport）多大？
-- 每个元素占多少空间？
-- 元素之间如何排列？
+#### 步骤6：合成 (Composite) —— 最终展示
 
-这个过程也叫**重排（Reflow）**，是性能开销较大的操作。
-
-**影响布局的因素：**
-- 视口大小变化（窗口缩放）
-- 元素尺寸变化（内容增减）
-- 字体大小变化
-- CSS 布局属性变化（`width`、`height`、`margin` 等）
-
-#### 步骤5：绘制（Paint）→ 合成（Composite）
-
-**绘制阶段**：把渲染树的每个节点绘制成像素，填充到**图层（Layer）**中。
-
-**合成阶段**：如果页面有多个图层（如 `position: fixed`、CSS 动画、3D 变换等），浏览器会把这些图层按正确顺序叠加，最终显示到屏幕上。
-
-**GPU 加速**：现代浏览器会把某些图层交给 GPU 处理，实现流畅的动画效果。
+现代浏览器会将页面分成多个**图层 (Layers)** 分别绘制（比如 3D 变换、滚动条独立图层），最后由 GPU 将它们像 Photoshop 图层一样叠加在一起，呈现在屏幕上。
 
 <BrowserRenderingDemo />
 
-> **关键洞察**：渲染是"渐进式"的。浏览器不需要等所有内容都下载完才开始显示，而是收到一部分就渲染一部分。这就是为什么大网页会"慢慢加载出来"。
+> **💡 你知道吗？**
+>
+> **布局和绘制**是浏览器最忙碌的时候。网页里的元素越多、结构越复杂，浏览器就需要花更多时间来计算位置和上色。这就是为什么有的复杂网页打开会卡顿的原因。
 
 ---
 
-## 6. 总结：一次完整的"网络快递"之旅
+## 6. 总结：一次完整的"网购"之旅
 
 让我们回顾整个旅程：
 
-| 阶段 | 技术术语 | 快递类比 | 核心任务 | 关键技术 |
+| 阶段 | 技术术语 | 网购类比 | 核心任务 | 关键技术 |
 |------|----------|----------|----------|----------|
-| **1. 解析** | URL 解析 | 填写快递单 | 理解用户想访问哪里 | 协议、域名、端口、路径、参数 |
-| **2. 查询** | DNS 查询 | 查地址簿 | 把域名转换成 IP 地址 | 递归/迭代查询、缓存机制 |
-| **3. 连接** | TCP 握手 | 打电话确认 | 确保双方能可靠通信 | 三次握手、序列号、流量控制 |
-| **4. 对话** | HTTP 交换 | 快递员送达 | 请求和传输数据 | 请求方法、状态码、头部字段 |
-| **5. 展示** | 浏览器渲染 | 拆开包裹 | 把代码变成画面 | DOM、CSSOM、渲染树、布局、绘制 |
+| **1. 解析** | URL 解析 | 填写订单 | 理解买家想买什么 | 协议、域名、端口、路径、参数 |
+| **2. 查询** | DNS 查询 | 查仓库址 | 找到店铺的发货仓库 | 递归/迭代查询、缓存机制 |
+| **3. 连接** | TCP 握手 | 建立通道 | 确保物流通畅 | 三次握手、序列号、流量控制 |
+| **4. 对话** | HTTP 交换 | 仓库发货 | 提交订单并收货 | 请求方法、状态码、头部字段 |
+| **5. 展示** | 浏览器渲染 | 拆箱组装 | 把商品展示出来 | DOM、CSSOM、渲染树、布局、绘制 |
 
 **整个过程通常在几百毫秒内完成** —— 想想这有多么不可思议！