feat: enhance demo components with consistent styling and info boxes

- Add standardized header and info box components to all demo files
- Improve visual consistency with theme colors and spacing
- Add max-height and overflow-y for better content containment
- Update package.json build script with --force flag
- Add .gitignore entries for REFACTORING files
- Fix table formatting in audio-intro.md

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="demo-container">
+  <div class="access-analytics-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">📊</span>
+      <span class="title">访问分析</span>
+      <span class="subtitle">理解 CDN 访问统计和日志分析</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         访问分析演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过日志分析，可以了解谁在何时访问了什么资源，帮助发现异常访问模式和安全事件。
+    </div>
   </div>
 </template>
 
@@ -20,31 +26,58 @@ const description = ref('展示CDN和对象存储的访问统计分析，包括
 </script>
 
 <style scoped>
-.demo-container {
+.access-analytics-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="demo-container">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">⚙️</span>
+      <span class="title">{{ title }}</span>
+      <span class="subtitle">{{ description }}</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         缓存策略演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>缓存策略平衡命中率和新鲜度，TTL 设置太短会导致频繁回源，太长会导致内容过期。
+    </div>
   </div>
 </template>
 

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue

@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="cdn-acceleration-demo">
-    <div class="header">
-      <div class="title">CDN 加速原理</div>
-      <div class="subtitle">边缘节点、源站与回源的协同工作</div>
+    <div class="demo-header">
+      <span class="icon">🌐</span>
+      <span class="title">CDN 加速原理</span>
+      <span class="subtitle">边缘节点、源站与回源的协同工作</span>
     </div>
 
     <div class="cdn-architecture">
@@ -64,7 +65,7 @@
               </div>
               <div class="stat">
                 <span class="stat-label">命中</span>
-                <span class="stat-value" :style="{ color: node.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+                <span class="stat-value" :style="{ color: node.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
                   {{ node.hitRate }}%
                 </span>
               </div>
@@ -135,25 +136,30 @@
       <div class="stats-title">📊 访问统计</div>
       <div class="stats-grid">
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#22c55e' }">{{ stats.cacheHit }}</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-1)' }">{{ stats.cacheHit }}</div>
           <div class="stat-label">缓存命中</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#ef4444' }">{{ stats.cacheMiss }}</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-delta)' }">{{ stats.cacheMiss }}</div>
           <div class="stat-label">缓存未命中</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
             {{ stats.hitRate }}%
           </div>
           <div class="stat-label">命中率</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#3b82f6' }">{{ stats.avgResponseTime }}ms</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand)' }">{{ stats.avgResponseTime }}ms</div>
           <div class="stat-label">平均响应</div>
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>CDN就像在全球开了分店——用户访问最近的分店拿资源，不用都跑总店来，速度自然快。
+    </div>
   </div>
 </template>
 
@@ -285,21 +291,32 @@ const resetDemo = () => {
   padding: 1.5rem;
   margin: 1.5rem 0;
   font-family: var(--vp-font-family-base);
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1.5rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.2rem;
-  margin-bottom: 0.25rem;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .cdn-architecture {
@@ -338,27 +355,27 @@ const resetDemo = () => {
 }
 
 .layer-status.hit {
-  background: #dcfce7;
-  color: #166534;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
 }
 
 .layer-status.miss {
-  background: #fee2e2;
-  color: #991b1b;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
+  color: var(--vp-c-brand-delta);
 }
 
 .layer-status.active {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
 }
 
 /* 用户层 */
 .users-map {
   position: relative;
   height: 120px;
-  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  background: var(--vp-c-bg-soft);
   border-radius: 8px;
-  border: 1px solid #bae6fd;
+  border: 1px solid var(--vp-c-divider);
   overflow: hidden;
 }
 
@@ -396,18 +413,18 @@ const resetDemo = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
+  background: var(--vp-c-bg);
   border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .user-label {
   font-size: 0.65rem;
   font-weight: 600;
-  color: #0369a1;
+  color: var(--vp-c-brand-1);
   margin-top: 0.25rem;
   white-space: nowrap;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--vp-c-bg);
   padding: 0.1rem 0.4rem;
   border-radius: 4px;
 }
@@ -511,8 +528,8 @@ const resetDemo = () => {
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem;
-  background: linear-gradient(135deg, #fef3c7, #fde68a);
-  border: 2px solid #f59e0b;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
 }
 
@@ -528,12 +545,12 @@ const resetDemo = () => {
 .server-name {
   font-weight: 600;
   font-size: 0.9rem;
-  color: #92400e;
+  color: var(--vp-c-text-1);
 }
 
 .server-address {
   font-size: 0.75rem;
-  color: #b45309;
+  color: var(--vp-c-text-2);
   font-family: var(--vp-font-family-mono);
 }
 
@@ -543,14 +560,14 @@ const resetDemo = () => {
   gap: 0.4rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #15803d;
+  color: var(--vp-c-brand-1);
 }
 
 .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #22c55e;
+  background: var(--vp-c-brand-1);
   animation: statusPulse 2s infinite;
 }
 
@@ -560,8 +577,8 @@ const resetDemo = () => {
 }
 
 .back-to-source-flow {
-  background: #fef2f2;
-  border: 1px solid #fecaca;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   padding: 1rem;
   margin-top: 0.5rem;
@@ -571,7 +588,7 @@ const resetDemo = () => {
   text-align: center;
   font-size: 0.9rem;
   font-weight: 600;
-  color: #dc2626;
+  color: var(--vp-c-brand-delta);
   margin-bottom: 0.5rem;
 }
 
@@ -589,11 +606,11 @@ const resetDemo = () => {
 
 .flow-step {
   font-size: 0.75rem;
-  color: #991b1b;
-  background: white;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
   padding: 0.4rem 0.6rem;
   border-radius: 4px;
-  border-left: 3px solid #dc2626;
+  border-left: 3px solid var(--vp-c-brand);
 }
 
 /* 控制区 */
@@ -639,13 +656,13 @@ const resetDemo = () => {
 }
 
 .control-btn.reset {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #dc2626;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.1);
+  border-color: var(--vp-c-brand-delta);
+  color: var(--vp-c-brand-delta);
 }
 
 .control-btn.reset:hover {
-  background: #fee2e2;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
 }
 
 /* 统计面板 */
@@ -693,4 +710,23 @@ const resetDemo = () => {
   font-size: 0.7rem;
   color: var(--vp-c-text-2);
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue

@@ -1,50 +1,83 @@
 <template>
-  <div class="demo-container">
+  <div class="https-optimization-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🔒</span>
+      <span class="title">HTTPS 优化</span>
+      <span class="subtitle">理解 CDN 的 HTTPS 协议和证书管理</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
-        HTTPS优化演示组件占位符 - 待实现具体交互
+        HTTPS 优化演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>HTTPS 通过 TLS/SSL 加密数据传输，防止中间人攻击和数据泄露，是现代 Web 应用的安全基础。
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 
-const title = ref('HTTPS优化演示')
+const title = ref('HTTPS 优化演示')
 const description = ref('展示CDN的HTTPS优化技术，包括TLS握手优化、证书管理、HSTS等')
 </script>
 
 <style scoped>
-.demo-container {
+.https-optimization-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue

@@ -1,12 +1,9 @@
-<!--
-  ObjectStorageDemo.vue
-  对象存储架构演示 - 展示桶、对象、元数据的核心概念
--->
 <template>
   <div class="object-storage-demo">
-    <div class="header">
-      <div class="title">对象存储架构</div>
-      <div class="subtitle">理解 Bucket、Object 和 Metadata 的关系</div>
+    <div class="demo-header">
+      <span class="icon">🗄️</span>
+      <span class="title">对象存储架构</span>
+      <span class="subtitle">理解 Bucket、Object 和 Metadata 的关系</span>
     </div>
 
     <div class="storage-architecture">
@@ -113,38 +110,9 @@
       </div>
     </div>
 
-    <div class="architecture-summary">
-      <div class="summary-title">架构要点总结</div>
-      <div class="summary-grid">
-        <div class="summary-item">
-          <div class="summary-icon">📦</div>
-          <div class="summary-text">
-            <strong>Bucket（桶）</strong>
-            <span>全局命名空间，用于组织和隔离数据</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">📄</div>
-          <div class="summary-text">
-            <strong>Object（对象）</strong>
-            <span>键值对存储，包含数据、元数据和唯一 Key</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">🏷️</div>
-          <div class="summary-text">
-            <strong>Metadata（元数据）</strong>
-            <span>系统元数据 + 自定义标签，支持检索和管理</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">🔐</div>
-          <div class="summary-text">
-            <strong>Access Control（访问控制）</strong>
-            <span>Bucket Policy、ACL、STS 临时凭证多层权限</span>
-          </div>
-        </div>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>对象存储采用三层架构：Account（账户）→ Bucket（桶）→ Object（对象），每个对象都附带丰富的元数据用于检索和管理。理解这个层次结构是掌握对象存储的第一步。
     </div>
   </div>
 </template>
@@ -262,69 +230,67 @@ const getFileIcon = (type) => {
 .object-storage-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1.5rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.2rem;
-  margin-bottom: 0.25rem;
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
+.demo-header .icon { font-size: 1.25rem; }
+.demo-header .title { font-weight: bold; font-size: 1rem; }
+.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
 .storage-architecture {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .account-layer {
-  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
-  padding: 1rem;
-  border-radius: 10px;
+  background: var(--vp-c-brand-soft);
+  padding: 0.75rem;
+  border-radius: 8px;
   text-align: center;
-  border: 2px solid #6366f1;
+  border: 2px solid var(--vp-c-brand);
 }
 
 .account-icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin-bottom: 0.25rem;
 }
 
 .account-name {
   font-weight: 600;
-  font-size: 0.95rem;
-  color: #4338ca;
+  font-size: 0.9rem;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 0.25rem;
 }
 
 .account-desc {
-  font-size: 0.75rem;
-  color: #6366f1;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
   margin-top: 0.25rem;
 }
 
 .connector {
   text-align: center;
   color: var(--vp-c-text-3);
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .buckets-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
+  border-radius: 8px;
+  padding: 0.75rem;
 }
 
 .section-title {
@@ -332,13 +298,13 @@ const getFileIcon = (type) => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
   color: var(--vp-c-text-1);
 }
 
 .section-desc {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   font-weight: normal;
   color: var(--vp-c-text-2);
   margin-left: auto;
@@ -346,17 +312,17 @@ const getFileIcon = (type) => {
 
 .buckets-row {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .bucket-card {
   flex: 1;
-  min-width: 140px;
+  min-width: 120px;
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 0.75rem;
+  border-radius: 6px;
+  padding: 0.5rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
@@ -370,29 +336,26 @@ const getFileIcon = (type) => {
 .bucket-card.active {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-soft);
-  box-shadow: 0 0 0 3px var(--vp-c-brand-dimm);
+  box-shadow: 0 0 3px var(--vp-c-brand-dimm);
 }
 
-.bucket-icon {
-  font-size: 1.75rem;
-  margin-bottom: 0.25rem;
-}
+.bucket-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
 
 .bucket-name {
   font-weight: 600;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
   word-break: break-all;
 }
 
 .bucket-meta {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
   margin-top: 0.25rem;
 }
 
 .bucket-size {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--vp-c-brand);
   font-weight: 600;
   margin-top: 0.25rem;
@@ -401,30 +364,30 @@ const getFileIcon = (type) => {
 .objects-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
-  min-height: 150px;
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-height: 120px;
 }
 
 .objects-list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .object-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .object-item:hover {
-  background: var(--vp-c-bg-mute);
+  background: var(--vp-c-bg-alt);
 }
 
 .object-item.selected {
@@ -432,9 +395,7 @@ const getFileIcon = (type) => {
   border: 1px solid var(--vp-c-brand);
 }
 
-.object-icon {
-  font-size: 1.25rem;
-}
+.object-icon { font-size: 1rem; }
 
 .object-info {
   flex: 1;
@@ -442,7 +403,7 @@ const getFileIcon = (type) => {
 }
 
 .object-key {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
   white-space: nowrap;
@@ -451,33 +412,35 @@ const getFileIcon = (type) => {
 }
 
 .object-meta {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
 .object-arrow {
   color: var(--vp-c-text-3);
+  font-size: 0.8rem;
 }
 
-.objects-placeholder {
+.objects-placeholder,
+.metadata-placeholder {
   text-align: center;
-  padding: 2rem;
+  padding: 1.5rem;
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .metadata-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
-  min-height: 150px;
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-height: 120px;
 }
 
 .metadata-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 @media (max-width: 768px) {
@@ -488,30 +451,30 @@ const getFileIcon = (type) => {
 
 .metadata-section {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 0.75rem;
+  border-radius: 6px;
+  padding: 0.5rem;
 }
 
 .metadata-section-title {
   font-weight: 600;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-brand);
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .metadata-list {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.3rem;
 }
 
 .metadata-item {
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
 }
 
 .metadata-key {
@@ -525,66 +488,16 @@ const getFileIcon = (type) => {
   word-break: break-all;
 }
 
-.metadata-placeholder {
-  text-align: center;
-  padding: 2rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
-
-.architecture-summary {
-  background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1.25rem;
-  margin-top: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.summary-title {
-  font-weight: 700;
-  font-size: 1rem;
-  margin-bottom: 1rem;
-  color: var(--vp-c-text-1);
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-@media (max-width: 640px) {
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.summary-item {
-  display: flex;
-  gap: 0.75rem;
+.info-box {
+  background: var(--vp-c-bg-alt);
   padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-}
-
-.summary-icon {
-  font-size: 1.5rem;
-}
-
-.summary-text {
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
   gap: 0.25rem;
 }
 
-.summary-text strong {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
-
-.summary-text span {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.4;
-}
+.info-box .icon { flex-shrink: 0; }
 </style>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="demo-container">
+  <div class="traffic-scheduling-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🚦</span>
+      <span class="title">流量调度</span>
+      <span class="subtitle">理解 CDN 智能调度和负载均衡</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         流量调度演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>智能调度通过就近访问、负载均衡和故障切换，实现全球加速和高可用性。
+    </div>
   </div>
 </template>
 
@@ -20,31 +26,58 @@ const description = ref('展示CDN的智能流量调度机制，包括负载均
 </script>
 
 <style scoped>
-.demo-container {
+.traffic-scheduling-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top:  0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>

docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue

@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="upload-process-demo">
-    <div class="header">
-      <div class="title">文件上传流程</div>
-      <div class="subtitle">直传 vs 分片上传 vs 断点续传</div>
+    <div class="demo-header">
+      <span class="icon">📤</span>
+      <span class="title">文件上传流程</span>
+      <span class="subtitle">理解直传、分片、断点续传三种方式</span>
     </div>
 
     <!-- 上传方式选择 -->
@@ -179,6 +180,11 @@
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>大文件分片上传提高可靠性，网络中断可以从断点续传，避免重复上传整个文件。
+    </div>
   </div>
 </template>