feat: 更新附录交互组件和文档

docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue

@@ -72,7 +72,7 @@
               @mouseenter="hoveredPart = 'card'"
               @mouseleave="hoveredPart = null"
             >
-              <div class="card">
+              <div class="player">
             </div>
             <div
               class="line indent-3"
@@ -83,7 +83,7 @@
               @mouseenter="hoveredPart = 'img'"
               @mouseleave="hoveredPart = null"
             >
-              &lt;img class="icon" src="castle.png" /&gt;
+              &lt;img class="cover" src="cat.jpg" /&gt;
             </div>
             <div
               class="line indent-3"
@@ -94,7 +94,7 @@
               @mouseenter="hoveredPart = 'title'"
               @mouseleave="hoveredPart = null"
             >
-              &lt;h2 class="title"&gt;乐高城堡&lt;/h2&gt;
+              &lt;h2 class="title"&gt;搞笑猫咪合集&lt;/h2&gt;
             </div>
             <div
               class="line indent-3"
@@ -105,7 +105,7 @@
               @mouseenter="hoveredPart = 'btn'"
               @mouseleave="hoveredPart = null"
             >
-              &lt;button class="btn"&gt;购买&lt;/button&gt;
+              &lt;button class="btn"&gt;▶️ 播放&lt;/button&gt;
             </div>
             <div
               class="line indent-2"
@@ -154,7 +154,7 @@
               @mouseenter="hoveredPart = 'card'"
               @mouseleave="hoveredPart = null"
             >
-              .card { display: flex; padding: 10px; }
+              .player { margin: auto; padding: 20px; }
             </div>
             <div
               class="line"
@@ -165,7 +165,7 @@
               @mouseenter="hoveredPart = 'img'"
               @mouseleave="hoveredPart = null"
             >
-              .icon { width: 50px; height: 50px; }
+              .cover { width: 100%; height: 200px; }
             </div>
             <!-- Style properties -->
             <div
@@ -177,7 +177,7 @@
               @mouseenter="hoveredPart = 'title'"
               @mouseleave="hoveredPart = null"
             >
-              .title { color: red; }
+              .title { color: #fb7299; /* B站主题色 */ }
             </div>
             <div
               class="line"
@@ -188,7 +188,7 @@
               @mouseenter="hoveredPart = 'btn'"
               @mouseleave="hoveredPart = null"
             >
-              .btn { background: blue; }
+              .btn { background: #00aeec; color: white; }
             </div>
           </div>
         </div>
@@ -233,7 +233,7 @@
                     @mouseenter.stop="hoveredPart = 'card'"
                     @mouseleave="hoveredPart = null"
                   >
-                    <span class="block-label">div.card</span>
+                    <span class="block-label">div.player</span>
 
                     <!-- Image -->
                     <div
@@ -245,11 +245,11 @@
                       @mouseenter.stop="hoveredPart = 'img'"
                       @mouseleave="hoveredPart = null"
                     >
-                      <span class="block-label">img.icon</span>
+                      <span class="block-label">img.cover</span>
                       <span
                         v-if="currentStep >= 3"
                         class="content-img"
-                      >🏰</span>
+                      >🐈</span>
                     </div>
 
                     <!-- Title -->
@@ -267,7 +267,7 @@
                       <span
                         v-if="currentStep >= 3"
                         class="content"
-                      >乐高城堡</span>
+                      >搞笑猫咪合集</span>
                     </div>
 
                     <!-- Button -->
@@ -285,7 +285,7 @@
                       <span
                         v-if="currentStep >= 3"
                         class="content-btn"
-                      >购买</span>
+                      >▶️ 播放</span>
                     </div>
                   </div>
                 </div>
@@ -332,26 +332,26 @@ import { ref } from 'vue'
 const steps = [
   {
     label: 'DOM (搭骨架)',
-    title: '1. 搭建骨架 (DOM)',
-    desc: '浏览器工头 (Parser) 解析 HTML 代码，构建出完整的文档树结构。注意：即使代码中省略了 html/body，浏览器也会自动补全。',
+    title: '1. 搭建骨架 (DOM 解析)',
+    desc: '浏览器工厂看懂了 HTML 代码，搭建好了页面的“骨架”（比如哪里是包裹盒 div，哪里是按钮 button）。',
     resultTitle: 'DOM 树结构'
   },
   {
-    label: 'Style (上色)',
-    title: '2. 计算样式 (Recalculate Style)',
-    desc: '装修工 (CSS Parser) 匹配 CSS 规则。比如发现 .title 需要红色，.btn 需要蓝色背景。此时只关心"长什么样"，不关心"在哪"。',
-    resultTitle: '附带样式的节点'
+    label: 'Style (看图纸)',
+    title: '2. 匹配样式 (CSS 解析)',
+    desc: '仔细看了眼配色的说明书。比如发现 .title 字体要是粉色的，.btn 背景要是蓝色的（此时只在脑子里确立样式，但不计算尺寸）。',
+    resultTitle: '获取了各种配置规则'
   },
   {
-    label: 'Layout (排版)',
-    title: '3. 布局排版 (Layout/Reflow)',
-    desc: '测量员 (Layout) 根据 display:flex 和 padding 等属性，计算每个盒子的精确位置和大小。图片在左，文字在右。',
-    resultTitle: '几何布局'
+    label: 'Layout (定尺寸)',
+    title: '3. 排版规划 (Layout)',
+    desc: '拿尺子量每个骨架的大小。考虑到用户的屏幕尺寸，精确计算出猫咪的图片要多高、播放按钮要挤到哪个坐标上。',
+    resultTitle: '排版布局盒子'
   },
   {
     label: 'Paint (绘制)',
-    title: '4. 像素绘制 (Paint)',
-    desc: '画家 (Paint) 按照计算好的位置和样式，真正把像素点画在屏幕上。最终你看到了一个完整的商品卡片。',
+    title: '4. 像素上色 (Paint)',
+    desc: '根据前面的几何位置和颜色计划，正式拿起画笔，将一个个像素填到你的屏幕上，一个可以看视频的播放器就诞生了。',
     resultTitle: '最终画面'
   }
 ]
@@ -576,34 +576,39 @@ const hoveredPart = ref(null)
 
 /* Step 2: Style */
 .block-box.title.styled {
-  color: red; /* Text color applied but not painted yet */
-  border: 1px solid red; /* Visual cue for style applied */
-  background: #fee2e2;
+  color: #fb7299;
+  border: 1px solid #fb7299;
+  background: #fdf2f8;
 }
 
 .block-box.btn.styled {
-  background: blue;
+  background: #00aeec;
   color: white;
-  border: 1px solid blue;
+  border: 1px solid #00aeec;
 }
 
 /* Step 3: Layout */
 .block-box.card.layout {
   display: flex;
-  flex-direction: row; /* Horizontal layout */
+  flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 15px;
   background: white;
   border: 1px solid #ccc;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
 }
 
 .block-box.img.layout {
-  width: 50px;
-  height: 50px;
+  width: 100%;
+  height: 120px;
   background: #eee;
   border: none;
+  font-size: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .block-box.title.layout {
@@ -614,9 +619,11 @@ const hoveredPart = ref(null)
 }
 
 .block-box.btn.layout {
-  margin-left: auto; /* Push to right */
-  padding: 5px 15px;
+  width: 100%;
+  padding: 8px;
   border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
 }
 
 /* Content visibility for Paint step */