diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/A11yScreenReaderDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/A11yScreenReaderDemo.vue
new file mode 100644
index 0000000..e8a5da9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/A11yScreenReaderDemo.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header">Accessibility (a11y) / 读屏机眼里的你</div>
+    
+    <div class="split-pane">
+      <!-- 糟糕的做法 -->
+      <div class="pane bad-pane">
+        <h4 class="pane-title label-bad">❌ 野路子开发：全是 DIV</h4>
+        
+        <div class="component-card">
+          <!-- 这里全是用 div 伪造的组件 -->
+          <div 
+            class="fake-btn" 
+            @mouseenter="speakBad('提交')" 
+            @mouseleave="stopSpeak"
+            @keydown.enter="showError"
+          >
+            提交
+          </div>
+          
+          <div 
+            class="fake-icon" 
+            @mouseenter="speakBad('叉叉图')" 
+            @mouseleave="stopSpeak"
+          >
+            ✖
+          </div>
+        </div>
+
+        <div class="reader-box">
+          <div class="reader-header">🎧 读屏机播报内容：</div>
+          <div class="reader-text" :class="{ empty: !currentBadSpeech }">
+            {{ currentBadSpeech || '（只有字面，不知用途，键盘 Enter 无效）' }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 优秀做法 -->
+      <div class="pane good-pane">
+        <h4 class="pane-title label-good">✅ 专业前端：语义化 + ARIA</h4>
+        
+        <div class="component-card">
+          <!-- 使用真正的按钮和 ARIA -->
+          <button 
+            class="real-btn" 
+            @mouseenter="speakGood('提交按钮。按下以发送表单。')" 
+            @mouseleave="stopSpeak"
+            @click="triggerAction"
+          >
+            提交
+          </button>
+          
+          <button 
+            class="real-icon-btn" 
+            aria-label="关闭窗口" 
+            @mouseenter="speakGood('关闭窗口，按钮。')" 
+            @mouseleave="stopSpeak"
+          >
+            <span aria-hidden="true">✖</span>
+          </button>
+        </div>
+
+        <div class="reader-box">
+          <div class="reader-header">🎧 读屏机播报内容：</div>
+          <div class="reader-text active">
+            {{ currentGoodSpeech || '（悬停查看播报，支持 Tab 和 Enter 交互）' }}
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="status-msg">
+      💡 提示：将鼠标悬停在上方按钮上，模拟视障用户读屏机“听到”的内容。<br/>
+      可以尝试用键盘 Tab 键选中并按 Enter！只有右侧的按钮会响应。
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const currentBadSpeech = ref('')
+const currentGoodSpeech = ref('')
+
+const speakBad = (text) => {
+  currentBadSpeech.value = `文本："${text}"`
+}
+const speakGood = (text) => {
+  currentGoodSpeech.value = `🗣️ ${text}`
+}
+const stopSpeak = () => {
+  currentBadSpeech.value = ''
+  currentGoodSpeech.value = ''
+}
+const showError = () => {
+  alert('假按钮的 @keydown.enter 事件不会天生自带！')
+}
+const triggerAction = () => {
+  alert('真按钮成功触发！')
+}
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+}
+
+.demo-header {
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+}
+
+.split-pane {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.pane {
+  flex: 1;
+  min-width: 250px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.pane-title {
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.label-bad { color: var(--vp-c-danger, #e74c3c); }
+.label-good { color: var(--vp-c-brand-1, #10b981); }
+
+.component-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex-grow: 1;
+  padding: 2rem 0;
+}
+
+/* 假按钮完全不响应 tab 且无默认高亮样式 */
+.fake-btn, .real-btn {
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  font-weight: bold;
+  text-align: center;
+  user-select: none;
+}
+.fake-btn {
+  background: #e2e8f0;
+  color: #475569;
+  cursor: pointer;
+  /* 缺少 focus 可见轮廓 */
+  outline: none; 
+}
+.real-btn {
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+.real-btn:focus-visible {
+  outline: 3px solid var(--vp-c-brand-soft);
+  outline-offset: 2px;
+}
+
+.fake-icon, .real-icon-btn {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 1.2rem;
+}
+.fake-icon {
+  background: #f1f5f9;
+  cursor: pointer;
+}
+.real-icon-btn {
+  background: #f1f5f9;
+  border: none;
+  cursor: pointer;
+  color: var(--vp-c-text-1);
+}
+.real-icon-btn:focus-visible {
+  outline: 3px solid var(--vp-c-brand-soft);
+}
+
+.reader-box {
+  background: #1e293b;
+  border-radius: 6px;
+  padding: 0.8rem;
+  margin-top: auto;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+}
+
+.reader-header {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-bottom: 0.4rem;
+}
+
+.reader-text {
+  color: white;
+  font-family: monospace;
+  font-size: 0.85rem;
+  font-weight: bold;
+  line-height: 1.4;
+}
+.reader-text.empty {
+  color: #64748b;
+  font-weight: normal;
+}
+.reader-text.active {
+  color: #34d399; /* emerald-400 */
+}
+
+.status-msg {
+  margin-top: 1rem;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  background: var(--vp-c-bg);
+  padding: 0.8rem;
+  border-radius: 6px;
+  border-left: 4px solid var(--vp-c-brand);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/AccessibilityDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/AccessibilityDemo.vue
new file mode 100644
index 0000000..0a3b34b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/AccessibilityDemo.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header">
+      <span class="icon">🔍</span> 
+      <span>无障碍对象模型 (AOM) 视角对比演示</span>
+    </div>
+    
+    <div class="intro-text">
+      请尝试使用<strong>纯键盘（Tab 键与 Enter 键）</strong>分别操作下方两个面板中的元素，并观察右侧“屏幕阅读器”捕获到的 AOM 层解析结果。
+    </div>
+
+    <div class="comparison-container">
+      <!-- 案例 A：仅仅是看起来像按钮 -->
+      <div class="case-panel bad-case">
+        <h3 class="case-title">❌ 案例 A：纯粹的视觉欺骗</h3>
+        <p class="case-desc">使用 <code>&lt;div&gt;</code> 结合 CSS 绘制。在渲染树上很完美，但在 AOM 树中缺失语义。</p>
+        
+        <div class="interactive-area">
+          <div class="label">操作确认：</div>
+          <!-- 伪造的 input -->
+          <div 
+            class="fake-input" 
+            @click="simulateFocus('bad', '文本：请输入验证码')"
+          >
+            请输入验证码
+          </div>
+          <!-- 伪造的 button -->
+          <div 
+            class="fake-button" 
+            @mouseenter="simulateFocus('bad', '文本：确认提交')"
+            @mouseleave="clearFocus('bad')"
+            @click="handleClick('bad')"
+          >
+            确认提交
+          </div>
+        </div>
+
+        <div class="aom-monitor">
+          <div class="monitor-header">💻 屏幕阅读器解析 (AOM)：</div>
+          <div class="monitor-screen" :class="{ 'has-content': badCaseOutput }">
+            {{ badCaseOutput || '（视障用户无法通过 Tab 键选中此区域的任何元素）' }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 案例 B：语义化与 ARIA 规范 -->
+      <div class="case-panel good-case">
+        <h3 class="case-title">✅ 案例 B：语义化 + ARIA 护航</h3>
+        <p class="case-desc">使用 <code>&lt;input&gt;</code>、<code>&lt;button&gt;</code> 等原生标签，补充 <code>aria-label</code>。在 AOM 树中拥有完整交互属性。</p>
+        
+        <div class="interactive-area">
+          <label for="a11y-input" class="label">操作确认：</label>
+          <input 
+            id="a11y-input"
+            type="text" 
+            placeholder="请输入验证码"
+            @focus="simulateFocus('good', '输入框：操作确认，请输入验证码')"
+            @blur="clearFocus('good')"
+            @mouseenter="simulateFocus('good', '输入框：操作确认，请输入验证码')"
+            @mouseleave="clearFocus('good')"
+          />
+          <button 
+            type="button"
+            class="real-button"
+            aria-label="提交确认验证码"
+            @focus="simulateFocus('good', '按钮：提交确认验证码。按下回车键激活。')"
+            @blur="clearFocus('good')"
+            @mouseenter="simulateFocus('good', '按钮：提交确认验证码。')"
+            @mouseleave="clearFocus('good')"
+            @click="handleClick('good')"
+          >
+            确认提交
+          </button>
+        </div>
+
+        <div class="aom-monitor">
+          <div class="monitor-header">💻 屏幕阅读器解析 (AOM)：</div>
+          <div class="monitor-screen" :class="{ 'has-content': goodCaseOutput }">
+            {{ goodCaseOutput || '（鼠标悬停或按 Tab 键切入以查看解析）' }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const badCaseOutput = ref('')
+const goodCaseOutput = ref('')
+let timerBad = null
+let timerGood = null
+
+const simulateFocus = (type, text) => {
+  if (type === 'bad') {
+    if (timerBad) clearTimeout(timerBad)
+    badCaseOutput.value = text
+  } else {
+    if (timerGood) clearTimeout(timerGood)
+    goodCaseOutput.value = '🗣️ 正在朗读：' + text
+  }
+}
+
+const clearFocus = (type) => {
+  if (type === 'bad') {
+    timerBad = setTimeout(() => { badCaseOutput.value = '' }, 400)
+  } else {
+    timerGood = setTimeout(() => { goodCaseOutput.value = '' }, 400)
+  }
+}
+
+const handleClick = (type) => {
+  if (type === 'bad') {
+    alert('【系统提示】普通 div 虽然能绑定点击事件，但键盘用户无法使用 Tab 聚焦它，也无法用 Enter 键触发它。这对肢体障碍人士是灾难。')
+  } else {
+    alert('【系统提示】原生 button 点击触发成功！无论你是用鼠标点击，还是用键盘 Enter 键，都能完美触发。')
+  }
+}
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1.8rem;
+  margin: 2rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+  border-bottom: 2px solid var(--vp-c-divider);
+  padding-bottom: 0.8rem;
+}
+
+.intro-text {
+  font-size: 0.95rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1.8rem;
+  line-height: 1.6;
+}
+
+.comparison-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .comparison-container {
+    flex-direction: row;
+  }
+  .case-panel {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.case-panel {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.bad-case {
+  border-top: 4px solid var(--vp-c-danger-1);
+}
+
+.good-case {
+  border-top: 4px solid var(--vp-c-brand-1);
+}
+
+.case-title {
+  margin: 0 0 0.8rem 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.case-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+  min-height: 2.5rem;
+}
+
+.case-desc code {
+  background: var(--vp-c-bg-alt);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+  color: var(--vp-c-text-1);
+}
+
+.interactive-area {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  border: 1px dashed var(--vp-c-divider);
+}
+
+.label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+/* 伪造元素的样式 */
+.fake-input {
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 0.6rem 0.8rem;
+  font-size: 0.9rem;
+  color: #888;
+  cursor: text;
+  border-radius: 4px;
+}
+.fake-button {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  padding: 0.6rem 1.2rem;
+  text-align: center;
+  font-weight: 600;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid var(--vp-c-brand-soft);
+}
+/* 注意：这里故意不写 :focus 样式，以反映一般野路子开发的现状 */
+
+/* 真实原生元素的样式 */
+#a11y-input {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  padding: 0.6rem 0.8rem;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+#a11y-input:focus {
+  outline: none;
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 0 2px var(--vp-c-brand-soft);
+}
+.real-button {
+  background: var(--vp-c-brand-1);
+  color: #fff;
+  padding: 0.6rem 1.2rem;
+  text-align: center;
+  font-weight: 600;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.real-button:hover {
+  background: var(--vp-c-brand-2);
+}
+.real-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
+}
+
+/* 屏幕阅读器模拟面板 */
+.aom-monitor {
+  margin-top: auto;
+  background: #1e293b;
+  border-radius: 6px;
+  padding: 1rem;
+  border-left: 4px solid #475569;
+}
+
+.monitor-header {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  margin-bottom: 0.6rem;
+  font-weight: 600;
+}
+
+.monitor-screen {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.9rem;
+  color: #64748b;
+  min-height: 2.5rem;
+  line-height: 1.4;
+}
+
+.monitor-screen.has-content {
+  color: #34d399; /* 绿色亮起，表示正确读出语义 */
+  font-weight: bold;
+}
+
+.dark .fake-input { background: #333; border-color: #555; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/I18nFormatDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/I18nFormatDemo.vue
new file mode 100644
index 0000000..90eba5a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/I18nFormatDemo.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="demo-wrapper" :dir="layoutDirection">
+    <div class="demo-header" dir="ltr">i18n / 布局与本地化 API 演示</div>
+
+    <!-- 控制面板 -->
+    <div class="controls" dir="ltr">
+      <div class="lang-selector">
+        <label>选择环境 (Locale)：</label>
+        <select v-model="currentLocale">
+          <option value="zh-CN">🇨🇳 简体中文 (zh-CN)</option>
+          <option value="en-US">🇺🇸 English (en-US)</option>
+          <option value="de-DE">🇩🇪 Deutsch (de-DE) [测试超长文本]</option>
+          <option value="ar-SA">🇸🇦 العربية (ar-SA) [测试从右到左]</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- 演示应用 -->
+    <div class="app-ui">
+      <!-- 头部导航栏 -->
+      <nav class="app-nav">
+        <div class="nav-brand">
+          <span class="logo">⚡</span>
+          <span>{{ t('app_name') }}</span>
+        </div>
+        <div class="nav-links">
+          <a href="#">{{ t('home') }}</a>
+          <a href="#">{{ t('profile') }}</a>
+        </div>
+      </nav>
+
+      <!-- 主要内容区 -->
+      <main class="app-body">
+        <div class="card">
+          <h2 class="card-title">{{ t('payment_title') }}</h2>
+          <p class="card-desc">{{ t('payment_desc') }}</p>
+
+          <div class="data-row">
+            <span class="label">{{ t('date_label') }}：</span>
+            <span class="value date-val">{{ formattedDate }}</span>
+          </div>
+
+          <div class="data-row">
+            <span class="label">{{ t('amount_label') }}：</span>
+            <span class="value amount-val">{{ formattedAmount }}</span>
+          </div>
+
+          <div class="actions">
+            <!-- 演示按钮超长溢出防护 -->
+            <button class="btn btn-primary">
+              {{ t('confirm_btn') }}
+            </button>
+            <button class="btn btn-ghost">
+              {{ t('cancel_btn') }} <span dir="ltr">➔</span>
+            </button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentLocale = ref('zh-CN')
+
+// 极其简易的字典
+const dictionary = {
+  'zh-CN': {
+    app_name: '随星流界',
+    home: '首页',
+    profile: '我的',
+    payment_title: '账单详情',
+    payment_desc: '请在到期前完成支付以避免服务中断。',
+    date_label: '出账日期',
+    amount_label: '应付总额',
+    confirm_btn: '立即确认支付',
+    cancel_btn: '返回上一页'
+  },
+  'en-US': {
+    app_name: 'Easy Vibe',
+    home: 'Home',
+    profile: 'Profile',
+    payment_title: 'Invoice Details',
+    payment_desc: 'Please complete your payment before the due date to avoid service interruption.',
+    date_label: 'Issued Date',
+    amount_label: 'Total Due',
+    confirm_btn: 'Confirm Payment',
+    cancel_btn: 'Go Back'
+  },
+  'de-DE': {
+    app_name: 'Einfache Stimmung',
+    home: 'Startseite',
+    profile: 'Profil',
+    payment_title: 'Rechnungsdetails',
+    payment_desc: 'Bitte schließen Sie Ihre Zahlung vor dem Fälligkeitsdatum ab, um eine Unterbrechung des Dienstes zu vermeiden.',
+    date_label: 'Ausstellungsdatum',
+    amount_label: 'Fälliger Gesamtbetrag',
+    confirm_btn: 'Zahlungsvorgang jetzt bestätigen', // 超长按钮文本
+    cancel_btn: 'Zurück zur vorherigen Seite'
+  },
+  'ar-SA': {
+    app_name: 'إيزي فايب',
+    home: 'الرئيسية',
+    profile: 'الملف الشخصي',
+    payment_title: 'تفاصيل الفاتورة',
+    payment_desc: 'يرجى إتمام عملية الدفع قبل تاريخ الاستحقاق لتجنب انقطاع الخدمة.',
+    date_label: 'تاريخ الإصدار',
+    amount_label: 'الإجمالي المستحق',
+    confirm_btn: 'تأكيد الدفع',
+    cancel_btn: 'العودة'
+  }
+}
+
+// 模拟的原始数据
+const rawDate = new Date()
+const rawAmount = 14590.5
+
+const t = (key) => dictionary[currentLocale.value][key]
+
+// 核心特性：自动计算布局方向
+const layoutDirection = computed(() => {
+  return currentLocale.value === 'ar-SA' ? 'rtl' : 'ltr'
+})
+
+// 核心特性：使用浏览器原生 Intl API 进行本地化格式，告别手写正则
+const formattedDate = computed(() => {
+  return new Intl.DateTimeFormat(currentLocale.value, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'short'
+  }).format(rawDate)
+})
+
+const formattedAmount = computed(() => {
+  let currency = 'CNY'
+  if (currentLocale.value === 'en-US') currency = 'USD'
+  if (currentLocale.value === 'de-DE') currency = 'EUR'
+  if (currentLocale.value === 'ar-SA') currency = 'SAR'
+
+  return new Intl.NumberFormat(currentLocale.value, {
+    style: 'currency',
+    currency: currency
+  }).format(rawAmount)
+})
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.demo-header {
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+}
+
+.controls {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border-left: 4px solid var(--vp-c-brand);
+}
+
+.lang-selector label {
+  font-weight: 600;
+  margin-right: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+select {
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+}
+
+/* 内部 APP 模拟容器 */
+.app-ui {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+/* 如果是 RTL，Flex 的 start 自动会贴到右边！ */
+.app-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: #1e293b;
+  color: white;
+}
+
+.nav-brand {
+  font-weight: 800;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+.nav-links a { color: #cbd5e1; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
+.nav-links a:hover { color: white; }
+
+.app-body {
+  padding: 2rem 1.5rem;
+  background: #f8fafc;
+}
+
+.card {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.card-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+  color: #0f172a;
+  border: none;
+}
+
+.card-desc {
+  color: #64748b;
+  font-size: 0.95rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid #e2e8f0;
+}
+.data-row:last-of-type { border-bottom: none; margin-bottom: 1rem; }
+
+.label { color: #64748b; font-weight: 600; font-size: 0.9rem; }
+
+.value { font-weight: bold; color: #0f172a; }
+.date-val { font-size: 0.9rem; }
+.amount-val { font-size: 1.25rem; color: #10b981; }
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  flex-wrap: wrap; /* 关键：德文过长时允许换行，保护布局 */
+}
+
+.btn {
+  padding: 0.75rem 1.25rem;
+  border-radius: 6px;
+  font-weight: bold;
+  font-size: 0.9rem;
+  cursor: pointer;
+  border: none;
+  min-width: fit-content;
+  flex: 1; /* 按钮自动填满空间 */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-primary { background: var(--vp-c-brand); color: white; }
+.btn-primary:hover { opacity: 0.9; }
+
+.btn-ghost { background: #f1f5f9; color: #475569; }
+.btn-ghost:hover { background: #e2e8f0; }
+
+/* 暗黑模式适配 */
+.dark .app-body { background: var(--vp-c-bg-alt); }
+.dark .card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); }
+.dark .card-title { color: var(--vp-c-text-1); }
+.dark .value { color: var(--vp-c-text-1); }
+.dark .amount-val { color: var(--vp-c-brand-1); }
+.dark .btn-ghost { background: var(--vp-c-bg-soft); color: var(--vp-c-text-2); }
+.dark .data-row { border-color: var(--vp-c-divider); }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/InternationalizationDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/InternationalizationDemo.vue
new file mode 100644
index 0000000..15a7afa
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/InternationalizationDemo.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header" dir="ltr">
+      <span class="icon">🌍</span> 
+      <span>浏览器原生的本地化转换 (i18n) 演示</span>
+    </div>
+    
+    <div class="intro-text" dir="ltr">
+      请在下方切换用户的本地化偏好（环境代号）。体验浏览器引擎在不修改任何底层数据逻辑的前提下，是如何同时处理**语言字典**、**弹性换行**、**排版反转 (RTL)** 以及**原生数据格式转换**的。
+    </div>
+
+    <!-- 顶层控制面板 -->
+    <div class="controls-panel" dir="ltr">
+      <label for="env-selector" class="control-label">🌐 模拟操作系统/浏览器偏好环境：</label>
+      <select id="env-selector" v-model="currentLocale" class="env-select">
+        <option value="zh-CN">🇨🇳 zh-CN (简体中文)</option>
+        <option value="en-US">🇺🇸 en-US (美国英语)</option>
+        <option value="de-DE">🇩🇪 de-DE (德国德语) - 关注文字长度爆增</option>
+        <option value="ar-SA">🇸🇦 ar-SA (沙特阿拉伯语) - 关注 RTL 排版全量反转</option>
+      </select>
+    </div>
+
+    <div class="lab-container">
+      
+      <!-- 实验室 1：排版与字典 -->
+      <div class="lab-section">
+        <h3 class="lab-title" dir="ltr">实战区 1：依赖 Flex 面向字典与排版进行重构</h3>
+        <p class="lab-desc" dir="ltr">
+          由于我们在 CSS 中使用了弹性的 Flex 布局，并且没有写死 `margin-left` 而是用了 `gap` 与 `justify-content`，当切换到阿拉伯语时，`dir="rtl"` 属性会指挥浏览器**完美镜像反转**整个布局。当切换到德语时，超长的按钮文字会自动引发弹性换行，而不会溢出。
+        </p>
+        
+        <!-- 核心演示区域，响应 RTL -->
+        <div class="lab-window" :dir="layoutDirection">
+          <header class="app-nav">
+            <div class="logo-area">
+              <span class="logo">⚡</span>
+              <span class="appName">{{ dictionary[currentLocale].appName }}</span>
+            </div>
+            <div class="links-area">
+              <a href="#">{{ dictionary[currentLocale].navIndex }}</a>
+              <a href="#">{{ dictionary[currentLocale].navMe }}</a>
+            </div>
+          </header>
+
+          <main class="app-content">
+            <div class="alert-box">
+              {{ dictionary[currentLocale].alertDesc }}
+            </div>
+            <div class="action-bar">
+              <button class="btn btn-primary">{{ dictionary[currentLocale].btnPay }}</button>
+              <button class="btn btn-ghost">{{ dictionary[currentLocale].btnBack }} <span dir="ltr">➔</span></button>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <!-- 实验室 2：Intl API 底层转换 -->
+      <div class="lab-section rtl-ignore-section">
+        <h3 class="lab-title" dir="ltr">实战区 2：使用 Intl 引擎接管数据呈现</h3>
+        <p class="lab-desc" dir="ltr">
+          彻底抛弃正则表达式的截取与拼接！看看原生的 <code>Intl.NumberFormat</code> 和 <code>Intl.DateTimeFormat</code> 是如何根据我们上方选择的“环境代号”将下方固定不变的底层二进制数据无缝格式化的。
+        </p>
+
+        <div class="data-compare-window" dir="ltr">
+          <!-- 金钱数据对比 -->
+          <div class="data-row">
+            <div class="raw-data">
+              <span class="data-label">底层内存数值 (Float):</span>
+              <code class="data-code">1459800.5</code>
+            </div>
+            <div class="data-arrow">
+              引擎介入<br/> ➔
+            </div>
+            <div class="intl-data">
+              <span class="data-label">DOM 最终呈现:</span>
+              <span class="formatted-val highlight-money">{{ formattedAmount }}</span>
+            </div>
+          </div>
+
+          <!-- 日期数据对比 -->
+          <div class="data-row">
+            <div class="raw-data">
+              <span class="data-label">底层内存数值 (Timestamp):</span>
+              <code class="data-code">1757430000000</code>
+            </div>
+            <div class="data-arrow">
+              引擎介入<br/> ➔
+            </div>
+            <div class="intl-data">
+              <span class="data-label">DOM 最终呈现:</span>
+              <span class="formatted-val highlight-date">{{ formattedDate }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentLocale = ref('zh-CN')
+
+// 极其简易的本地化字典
+const dictionary = {
+  'zh-CN': {
+    appName: '企业云服务',
+    navIndex: '控制台首页',
+    navMe: '账户设置',
+    alertDesc: '您有一个待支付的云服务器实例账单，请在 24 小时内完成续费操作以免停机。',
+    btnPay: '立即确认并支付款项',
+    btnBack: '取消并返回'
+  },
+  'en-US': {
+    appName: 'Enterprise Cloud',
+    navIndex: 'Dashboard',
+    navMe: 'Account',
+    alertDesc: 'You have a pending cloud server instance bill. Please renew within 24 hours to avoid suspension.',
+    btnPay: 'Confirm & Proceed to Pay',
+    btnBack: 'Cancel'
+  },
+  'de-DE': {
+    appName: 'Unternehmenscloud',
+    navIndex: 'Startseite',
+    navMe: 'Kontoeinstellungen',
+    alertDesc: 'Sie haben eine ausstehende Rechnung für Ihre Cloud-Server-Instanz. Bitte verlängern Sie innerhalb von 24 Stunden, um eine Aussetzung zu vermeiden.',
+    btnPay: 'Bestätigen und sofortigen Zahlungsvorgang abschließen', // 故意设置的德语超长合成词
+    btnBack: 'Abbrechen'
+  },
+  'ar-SA': {
+    appName: 'سحابة المؤسسة',
+    navIndex: 'لوحة القيادة',
+    navMe: 'إعدادات الحساب',
+    alertDesc: 'لديك فاتورة معلقة لمثيل خادم السحابة الخاص بك. يرجى التجديد خلال 24 ساعة لتجنب التعليق.',
+    btnPay: 'تأكيد والمتابعة للدفع',
+    btnBack: 'إلغاء والعودة'
+  }
+}
+
+// 固定的底层原始数据
+const RAW_TIMESTAMP = 1757430000000 // 模拟某个固定时间 2025-09-09(近似)
+const RAW_MONEY = 1459800.5
+
+// 计算布局方向 (核心知识点：处理 RTL)
+const layoutDirection = computed(() => {
+  return currentLocale.value === 'ar-SA' ? 'rtl' : 'ltr'
+})
+
+// 原生 Intl 货币格式化
+const formattedAmount = computed(() => {
+  let currency = 'CNY'
+  if (currentLocale.value === 'en-US') currency = 'USD'
+  if (currentLocale.value === 'de-DE') currency = 'EUR'
+  if (currentLocale.value === 'ar-SA') currency = 'SAR'
+
+  return new Intl.NumberFormat(currentLocale.value, {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2
+  }).format(RAW_MONEY)
+})
+
+// 原生 Intl 日期格式化
+const formattedDate = computed(() => {
+  return new Intl.DateTimeFormat(currentLocale.value, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long'
+  }).format(new Date(RAW_TIMESTAMP))
+})
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 1.8rem;
+  margin: 2rem 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin-bottom: 1rem;
+  border-bottom: 2px solid var(--vp-c-divider);
+  padding-bottom: 0.8rem;
+}
+
+.intro-text {
+  font-size: 0.95rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.controls-panel {
+  background: var(--vp-c-brand-soft);
+  border: 1px solid var(--vp-c-brand-1);
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .controls-panel {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.control-label {
+  font-weight: 700;
+  color: var(--vp-c-brand-1);
+  font-size: 1rem;
+}
+
+.env-select {
+  padding: 0.4rem 1rem;
+  border-radius: 6px;
+  border: 2px solid var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-weight: 600;
+  cursor: pointer;
+  min-width: 280px;
+}
+
+/* 两个实战区的公共样式 */
+.lab-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+.lab-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  margin: 0 0 0.8rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lab-title::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 18px;
+  background: var(--vp-c-brand-1);
+  border-radius: 2px;
+}
+
+.lab-desc {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 1.2rem;
+}
+.lab-desc code {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg-alt);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+}
+
+/* 实验室 1 的内部排版沙盒 */
+.lab-window {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
+  background: var(--vp-c-bg);
+  transition: all 0.3s ease;
+}
+
+.app-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #1e293b;
+  color: white;
+  padding: 1rem 1.5rem;
+}
+
+.logo-area {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.logo { color: #38bdf8; font-size: 1.3rem; }
+
+.links-area {
+  display: flex;
+  gap: 1.5rem;
+}
+.links-area a {
+  color: #94a3b8;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: 0.2s;
+}
+.links-area a:hover { color: white; }
+
+.app-content {
+  padding: 2rem;
+  background: #f8fafc;
+}
+
+.alert-box {
+  background: #fffbeb;
+  border-left: 4px solid #f59e0b;
+  padding: 1.2rem;
+  color: #b45309;
+  border-radius: 0 6px 6px 0;
+  margin-bottom: 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* RTL 环境下，警告框的彩色边框需要自动镜像到了右侧！这通过 CSS 的逻辑属性来实现最佳！但我们还是直接利用 dir 的流式特性。我们把 border-left 改为 border-inline-start */
+[dir="rtl"] .alert-box {
+  border-left: none;
+  border-right: 4px solid #f59e0b;
+  border-radius: 6px 0 0 6px;
+}
+
+.action-bar {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap; /* 核心知识点：弹性拉伸保护 */
+}
+
+.btn {
+  padding: 0.7rem 1.2rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  flex: 1; /* 弹性填满剩余空间，对抗超长德语 */
+  min-width: 150px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-primary { background: #2563eb; color: white; }
+.btn-primary:hover { background: #1d4ed8; }
+.btn-ghost { background: #e2e8f0; color: #475569; border: 1px solid #cbd5e1;}
+.btn-ghost:hover { background: #cbd5e1; }
+
+.dark .app-content { background: var(--vp-c-bg-alt); }
+.dark .alert-box { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
+.dark .btn-ghost { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); border-color: var(--vp-c-divider); }
+.dark .btn-ghost:hover { background: var(--vp-c-divider); }
+
+/* 实验室 2 的转换展示面板 */
+.data-compare-window {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px dashed var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.data-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background: var(--vp-c-bg);
+  padding: 1.2rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
+}
+
+@media (min-width: 768px) {
+  .data-row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.raw-data, .intl-data {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.intl-data {
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .intl-data { text-align: right; }
+}
+
+.data-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.data-code {
+  font-family: monospace;
+  background: #1e293b;
+  color: #a7f3d0;
+  padding: 0.5rem 0.8rem;
+  border-radius: 6px;
+  font-size: 1.05rem;
+  font-weight: bold;
+  word-break: break-all;
+}
+
+.data-arrow {
+  color: var(--vp-c-brand-1);
+  font-weight: 700;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media (max-width: 767px) {
+  .data-arrow { padding: 0.5rem; }
+}
+
+.formatted-val {
+  font-size: 1.2rem;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.highlight-money { color: #f59e0b; } /* 显眼的金色/橙色代表金钱 */
+.highlight-date { color: #3b82f6; } /* 蓝色代表日期体系 */
+
+.dark .data-code { background: #000; color: #10b981; border: 1px solid #333; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/PollingDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/PollingDemo.vue
new file mode 100644
index 0000000..7398d04
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/PollingDemo.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header">Polling / 短轮询交互演示</div>
+    
+    <div class="network-stage">
+      <!-- 客户端 -->
+      <div class="node client">
+        <div class="node-icon">💻</div>
+        <div class="node-label">Client</div>
+      </div>
+
+      <!-- 通信链路 -->
+      <div class="channel">
+        <div class="message req" :class="{ 'moving-right': isRequesting }">
+          <span v-if="isRequesting">"有新消息吗？" →</span>
+        </div>
+        <div class="message res" :class="{ 'moving-left': isResponding }">
+          <span v-if="isResponding">← "{{ serverResponse }}"</span>
+        </div>
+      </div>
+
+      <!-- 服务端 -->
+      <div class="node server">
+        <div class="node-icon">🖧</div>
+        <div class="node-label">Server (无状态)</div>
+        <button class="action-btn" @click="triggerNewMessage" :disabled="hasNewMessage">
+          制造新消息
+        </button>
+      </div>
+    </div>
+
+    <div class="status-panel">
+      <div class="status-controls">
+        <button 
+          class="toggle-btn" 
+          :class="{ active: isPolling }" 
+          @click="togglePolling"
+        >
+          {{ isPolling ? '⏹ 停止轮询' : '▶ 开始定时轮询 (1s)' }}
+        </button>
+      </div>
+      <div class="log-box">
+        <div v-for="(log, idx) in logs" :key="idx" class="log-line">
+          {{ log }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+
+const isPolling = ref(false)
+const isRequesting = ref(false)
+const isResponding = ref(false)
+const serverResponse = ref('')
+const hasNewMessage = ref(false)
+const logs = ref([])
+let timer = null
+
+const addLog = (msg) => {
+  logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
+  if (logs.value.length > 5) logs.value.pop()
+}
+
+const triggerNewMessage = () => {
+  hasNewMessage.value = true
+  addLog('服务端：偷偷准备了一条新消息 🤫')
+}
+
+const performPoll = () => {
+  if (isRequesting.value || isResponding.value) return
+  
+  // 发起请求
+  isRequesting.value = true
+  addLog('客户端：发起 HTTP GET 请求...')
+  
+  setTimeout(() => {
+    isRequesting.value = false
+    // 服务端处理并响应
+    if (hasNewMessage.value) {
+      serverResponse.value = '有啦！这是刚收到的弹幕'
+      hasNewMessage.value = false
+    } else {
+      serverResponse.value = '没有'
+    }
+    isResponding.value = true
+    addLog(`服务端：响应 "${serverResponse.value}"，然后关闭连接。`)
+    
+    setTimeout(() => {
+      isResponding.value = false
+    }, 600)
+  }, 600)
+}
+
+const togglePolling = () => {
+  if (isPolling.value) {
+    clearInterval(timer)
+    isPolling.value = false
+    addLog('停止定时器。')
+  } else {
+    isPolling.value = true
+    addLog('启动 setInterval() 狂轰乱炸模式。')
+    performPoll()
+    timer = setInterval(performPoll, 2500) // 放慢演示速度
+  }
+}
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.demo-header {
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+}
+
+.network-stage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px dashed var(--vp-c-divider);
+}
+
+.node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+}
+
+.node-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.node-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.action-btn {
+  margin-top: 0.5rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.75rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  opacity: 0.9;
+}
+.action-btn:disabled {
+  background: var(--vp-c-text-3);
+  cursor: not-allowed;
+}
+
+.channel {
+  flex-grow: 1;
+  position: relative;
+  height: 60px;
+  border-top: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.message {
+  position: absolute;
+  font-size: 0.75rem;
+  font-weight: bold;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: all 0.6s linear;
+}
+
+.message.req {
+  color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  top: 0;
+  left: 0;
+}
+
+.message.res {
+  color: var(--vp-c-warning-1, #d97706);
+  background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
+  bottom: 0;
+  right: 0;
+}
+
+.moving-right {
+  opacity: 1;
+  transform: translateX(100px);
+}
+
+.moving-left {
+  opacity: 1;
+  transform: translateX(-100px);
+}
+
+.status-panel {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.toggle-btn {
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-weight: bold;
+  transition: 0.2s;
+}
+
+.toggle-btn.active {
+  border-color: var(--vp-c-danger, #e74c3c);
+  color: var(--vp-c-danger, #e74c3c);
+  background: rgba(231, 76, 60, 0.1);
+}
+
+.log-box {
+  background: #1e293b;
+  color: #a7f3d0;
+  padding: 0.8rem;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  min-height: 100px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/SSEDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/SSEDemo.vue
new file mode 100644
index 0000000..fe33417
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/SSEDemo.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header">Server-Sent Events / 单向流推送演示</div>
+    
+    <div class="network-stage">
+      <!-- 客户端 -->
+      <div class="node client">
+        <div class="node-icon">📱</div>
+        <div class="node-label">Client</div>
+      </div>
+
+      <!-- 通信链路（带动画的管道） -->
+      <div class="channel">
+        <div class="pipe" v-show="isConnected">
+          <div class="pipe-flow"></div>
+        </div>
+        <div 
+          v-for="msg in activeMessages" 
+          :key="msg.id" 
+          class="message-chunk" 
+        >
+          ● {{ msg.text }}
+        </div>
+      </div>
+
+      <!-- 服务端 -->
+      <div class="node server">
+        <div class="node-icon">☁️</div>
+        <div class="node-label">Server (流管道)</div>
+        <button 
+          v-if="isConnected" 
+          class="action-btn" 
+          @click="pushEvent"
+        >
+          推送大盘数据 👇
+        </button>
+      </div>
+    </div>
+
+    <div class="status-panel">
+      <div class="status-controls">
+        <button 
+          class="toggle-btn" 
+          :class="{ active: isConnected }" 
+          @click="toggleConnection"
+        >
+          {{ isConnected ? '⏹ 断开 SSE 连接' : '▶ 建立 SSE 流连接' }}
+        </button>
+      </div>
+      <div class="log-box">
+        <div v-for="(log, idx) in logs" :key="idx" class="log-line">
+          {{ log }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+
+const isConnected = ref(false)
+const activeMessages = ref([])
+const logs = ref([])
+let msgId = 0
+
+const addLog = (msg) => {
+  logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
+  if (logs.value.length > 5) logs.value.pop()
+}
+
+const toggleConnection = () => {
+  if (isConnected.value) {
+    isConnected.value = false
+    addLog('客户端：主动断开连接 (Connection: close)')
+    activeMessages.value = []
+  } else {
+    isConnected.value = true
+    addLog('客户端：发起 HTTP Get, Accept: text/event-stream')
+    setTimeout(() => {
+      addLog('服务端：保持连接不断开，随时准备单向下发数据。')
+    }, 600)
+  }
+}
+
+const pushEvent = () => {
+  const stockPrices = ['上证指数 3012.3', '茅台 ¥1750', '宁德时代涨停', '中石油跌 -1%']
+  const randomMsg = stockPrices[Math.floor(Math.random() * stockPrices.length)]
+  
+  const msgObj = { id: msgId++, text: randomMsg }
+  activeMessages.value.push(msgObj)
+  addLog(`服务端：向管道喷射数据 "data: ${randomMsg}\\n\\n"`)
+  
+  // 模拟动画结束移除
+  setTimeout(() => {
+    activeMessages.value = activeMessages.value.filter(m => m.id !== msgObj.id)
+    addLog(`客户端：触发 onmessage 事件，拿到数据：${randomMsg}`)
+  }, 1200)
+}
+
+onUnmounted(() => {
+  isConnected.value = false
+})
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.demo-header {
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+}
+
+.network-stage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px dashed var(--vp-c-brand-soft);
+  position: relative;
+}
+
+.node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+  z-index: 2;
+}
+
+.node-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.node-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.action-btn {
+  margin-top: 0.5rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.75rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  opacity: 0.9;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.action-btn:hover {
+  opacity: 1;
+}
+
+.channel {
+  flex-grow: 1;
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pipe {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: var(--vp-c-brand-soft);
+  transform: translateY(-50%);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.pipe-flow {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--vp-c-brand) 0,
+    var(--vp-c-brand) 10px,
+    transparent 10px,
+    transparent 20px
+  );
+  animation: flow 1s linear infinite;
+}
+
+@keyframes flow {
+  from { background-position: 0 0; }
+  to { background-position: -28px 0; }
+}
+
+.message-chunk {
+  position: absolute;
+  font-size: 0.75rem;
+  font-weight: bold;
+  padding: 0.2rem 0.5rem;
+  color: white;
+  background: var(--vp-c-brand-1);
+  border-radius: 4px;
+  white-space: nowrap;
+  animation: moveLeft 1.2s linear forwards;
+  z-index: 5;
+}
+
+@keyframes moveLeft {
+  0% { right: 0; opacity: 1; transform: scale(1); }
+  90% { right: 90%; opacity: 1; transform: scale(1.1); }
+  100% { right: 100%; opacity: 0; transform: scale(0.5); }
+}
+
+.status-panel {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.toggle-btn {
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-weight: bold;
+  transition: 0.2s;
+}
+
+.toggle-btn.active {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.log-box {
+  background: #1e293b;
+  color: #a7f3d0;
+  padding: 0.8rem;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  min-height: 100px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/browser-frontend/WebSocketDemo.vue b/docs/.vitepress/theme/components/appendix/browser-frontend/WebSocketDemo.vue
new file mode 100644
index 0000000..679b08e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/browser-frontend/WebSocketDemo.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="demo-wrapper">
+    <div class="demo-header">WebSocket / 全双工通信演示</div>
+    
+    <div class="network-stage">
+      <!-- 客户端 -->
+      <div class="node client">
+        <div class="node-icon">🎮</div>
+        <div class="node-label">Player 1</div>
+        <button 
+          v-if="isConnected" 
+          class="action-btn client-btn" 
+          @click="sendMessage('client')"
+        >
+          发招：升龙拳！👊
+        </button>
+      </div>
+
+      <!-- WebSocket 通信链路（包含左右两个方向的车道） -->
+      <div class="channel">
+        <div class="ws-pipe" v-show="isConnected">
+          <div class="line top-line"></div>
+          <div class="line bottom-line"></div>
+        </div>
+        
+        <!-- 流动的数据包 -->
+        <div 
+          v-for="msg in activeMessages" 
+          :key="msg.id" 
+          class="ws-packet"
+          :class="msg.sender" 
+        >
+          {{ msg.text }}
+        </div>
+      </div>
+
+      <!-- 服务端 -->
+      <div class="node server">
+        <div class="node-icon">🖥️</div>
+        <div class="node-label">Game Server</div>
+        <button 
+          v-if="isConnected" 
+          class="action-btn server-btn" 
+          @click="sendMessage('server')"
+        >
+          群发：敌军出动！🛸
+        </button>
+      </div>
+    </div>
+
+    <div class="status-panel">
+      <div class="status-controls">
+        <button 
+          class="toggle-btn" 
+          :class="{ active: isConnected }" 
+          @click="toggleConnection"
+        >
+          {{ isConnected ? '⏹ 挥泪握手告别' : '⚡ Upgrade: websocket 协议质变' }}
+        </button>
+      </div>
+      <div class="log-box">
+        <div v-for="(log, idx) in logs" :key="idx" class="log-line">
+          {{ log }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+
+const isConnected = ref(false)
+const activeMessages = ref([])
+const logs = ref([])
+let msgId = 0
+
+const addLog = (msg) => {
+  logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
+  if (logs.value.length > 5) logs.value.pop()
+}
+
+const toggleConnection = () => {
+  if (isConnected.value) {
+    isConnected.value = false
+    addLog('断开 WebSockets 连接 (TCP 四次挥手).')
+    activeMessages.value = []
+  } else {
+    addLog('客户端发 HTTP 请求：Upgrade: websocket, Connection: Upgrade')
+    setTimeout(() => {
+      addLog('服务端响应：101 Switching Protocols。神级链路建立完成！')
+      isConnected.value = true
+    }, 600)
+  }
+}
+
+const sendMessage = (sender) => {
+  const text = sender === 'client' ? '【二进制帧】走位左移' : '【JSON帧】Boss 释放技能'
+  const msgObj = { id: msgId++, text, sender }
+  activeMessages.value.push(msgObj)
+  
+  if (sender === 'client') {
+    addLog(`客户端：瞬间送出 0101 极简格式数据包`)
+  } else {
+    addLog(`服务端：瞬间下发最新全局状态帧`)
+  }
+  
+  // 模拟极快传输
+  setTimeout(() => {
+    activeMessages.value = activeMessages.value.filter(m => m.id !== msgObj.id)
+    if (sender === 'client') addLog('服务端：光速收到玩家操作响应。')
+    else addLog('客户端：光速渲染 Boss 动画！')
+  }, 800)
+}
+
+onUnmounted(() => {
+  isConnected.value = false
+})
+</script>
+
+<style scoped>
+.demo-wrapper {
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+}
+
+.demo-header {
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 1rem;
+}
+
+.network-stage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px dashed var(--vp-c-divider);
+  position: relative;
+}
+
+.node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 130px;
+  z-index: 2;
+}
+
+.node-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.node-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.action-btn {
+  margin-top: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.75rem;
+  font-weight: bold;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.2s;
+  color: white;
+}
+
+.client-btn {
+  background: #3b82f6; /* Blue for client sending */
+}
+.client-btn:hover { background: #2563eb; }
+
+.server-btn {
+  background: #eab308; /* Yellow for server sending */
+}
+.server-btn:hover { background: #ca8a04; }
+
+.channel {
+  flex-grow: 1;
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ws-pipe {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 40px;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.line {
+  height: 4px;
+  width: 100%;
+  background: repeating-linear-gradient(90deg, #10b981 0px, #10b981 10px, transparent 10px, transparent 20px);
+}
+.top-line {
+  animation: slideRight 1s linear infinite;
+}
+.bottom-line {
+  animation: slideLeft 1s linear infinite;
+}
+
+@keyframes slideRight {
+  from { background-position: 0 0; }
+  to { background-position: 20px 0; }
+}
+@keyframes slideLeft {
+  from { background-position: 0 0; }
+  to { background-position: -20px 0; }
+}
+
+.ws-packet {
+  position: absolute;
+  font-size: 0.7rem;
+  font-weight: bold;
+  padding: 0.3rem 0.6rem;
+  color: white;
+  border-radius: 20px;
+  white-space: nowrap;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  z-index: 5;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.ws-packet.client {
+  background: #3b82f6;
+  top: 0;
+  left: 0;
+  animation-name: shootRight;
+}
+
+.ws-packet.server {
+  background: #eab308;
+  bottom: 0;
+  right: 0;
+  animation-name: shootLeft;
+}
+
+@keyframes shootRight {
+  0% { left: 0; opacity: 1; transform: scale(0.8); }
+  50% { transform: scale(1.1); }
+  100% { left: 85%; opacity: 0; transform: scale(0.5); }
+}
+
+@keyframes shootLeft {
+  0% { right: 0; opacity: 1; transform: scale(0.8); }
+  50% { transform: scale(1.1); }
+  100% { right: 85%; opacity: 0; transform: scale(0.5); }
+}
+
+.status-panel {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.toggle-btn {
+  padding: 0.6rem 1.2rem;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-weight: bold;
+  font-size: 0.9rem;
+  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.toggle-btn:hover {
+  transform: translateY(-2px);
+}
+
+.toggle-btn.active {
+  border-color: #10b981;
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.log-box {
+  background: #1e293b;
+  color: #6ee7b7; /* lighter green for WS logs */
+  padding: 0.8rem;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  min-height: 100px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
index f2db1dd..cf573ea 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
@@ -90,41 +90,11 @@
       />
     </div>
 
-    <div class="code-display">
-      <h4>Animation Loop Code / 动画循环代码</h4>
-      <pre><code>{{ animationCode }}</code></pre>
-    </div>
+    
 
-    <div class="explanation">
-      <h4>Animation Principles / 动画原理</h4>
-      <ul>
-        <li>
-          <strong>requestAnimationFrame：</strong>
-          浏览器提供的动画 API，在每次重绘前调用回调函数，通常为 60FPS
-        </li>
-        <li>
-          <strong>Clear & Redraw：</strong>
-          每帧先清除画布，再重新绘制所有内容
-        </li>
-        <li>
-          <strong>State Update：</strong>
-          更新对象位置、角度等状态
-        </li>
-        <li>
-          <strong>Performance：</strong>
-          使用时间差计算位置，确保不同刷新率下动画速度一致
-        </li>
-      </ul>
-    </div>
+    
 
-    <div class="info-box">
-      <p>
-        <span class="icon">💡</span>
-        <strong>提示：</strong>
-        动画的本质是快速连续绘制静态画面。Canvas 每秒可以绘制 60
-        帧（60FPS），形成流畅的动画效果。
-      </p>
-    </div>
+    
   </div>
 </template>
 
@@ -565,11 +535,12 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
@@ -577,83 +548,7 @@ canvas {
   border-radius: 6px;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.explanation {
-  margin: 1.5rem 0;
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.explanation h4 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.explanation ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.explanation li {
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.info-box {
-  margin-top: 1.5rem;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-  border-radius: 12px;
-  border-left: 4px solid #f59e0b;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
-}
-
-.info-box p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #92400e;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  line-height: 1.6;
-}
-
-.info-box .icon {
-  font-size: 1.125rem;
   flex-shrink: 0;
 }
+
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
index 033c34e..df9a6e5 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
@@ -127,16 +127,10 @@
         />
       </div>
 
-      <div class="code-display">
-        <h4>Code / 代码</h4>
-        <pre><code>{{ currentCode }}</code></pre>
-      </div>
+      
     </div>
 
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>核心思想：</strong>Canvas 是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
-    </div>
+    
   </div>
 </template>
 
@@ -433,75 +427,20 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
   border: 3px solid var(--vp-c-divider);
   border-radius: 6px;
   background: #ffffff;
-  max-width: 100%;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.info-box {
-  margin-top: 1.5rem;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-  padding: 1rem 1.25rem;
-  border-radius: 12px;
-  font-size: 0.875rem;
-  color: #92400e;
-  border-left: 4px solid #f59e0b;
-  display: flex;
-  gap: 0.5rem;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
-}
-
-.info-box p {
-  margin: 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  line-height: 1.6;
-}
-
-.info-box .icon {
-  font-size: 1.125rem;
   flex-shrink: 0;
 }
 
-.info-box strong {
-  color: #78350f;
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
index 0bf09ba..7ed2d22 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
@@ -74,56 +74,11 @@
       />
     </div>
 
-    <div class="explanation">
-      <h4>Canvas Coordinate System / Canvas 坐标系统</h4>
-      <ul>
-        <li><strong>Origin / 原点：</strong>在左上角，坐标为 (0, 0)</li>
-        <li>
-          <strong>X Axis / X 轴：</strong>向右为正方向，从 0 到 canvas.width
-        </li>
-        <li>
-          <strong>Y Axis / Y 轴：</strong>向下为正方向，从 0 到 canvas.height
-        </li>
-        <li><strong>Unit / 单位：</strong>像素 (px)，与 CSS 像素 1:1 对应</li>
-      </ul>
-    </div>
+    
 
-    <div class="code-display">
-      <h4>Example Code / 示例代码</h4>
-      <pre><code>// 绘制坐标轴
-const canvas = document.getElementById('myCanvas')
-const ctx = canvas.getContext('2d')
+    
 
-// X 轴（红色）
-ctx.strokeStyle = '#e74c3c'
-ctx.lineWidth = 2
-ctx.beginPath()
-ctx.moveTo(0, 0)
-ctx.lineTo(canvas.width, 0)
-ctx.stroke()
-
-// Y 轴（蓝色）
-ctx.strokeStyle = '#3498db'
-ctx.beginPath()
-ctx.moveTo(0, 0)
-ctx.lineTo(0, canvas.height)
-ctx.stroke()
-
-// 绘制点
-ctx.fillStyle = '#2ecc71'
-ctx.beginPath()
-ctx.arc({{ Math.round(selectedPoint?.x || 100) }}, {{ Math.round(selectedPoint?.y || 100) }}, 5, 0, Math.PI * 2)
-ctx.fill()</code></pre>
-    </div>
-
-    <div class="info-box">
-      <p>
-        <span class="icon">💡</span>
-        <strong>提示：</strong>
-        Canvas 的 Y
-        轴方向与传统数学坐标系相反，向下为正。这在处理图形定位时需要特别注意。
-      </p>
-    </div>
+    
   </div>
 </template>
 
@@ -360,11 +315,12 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
@@ -373,83 +329,7 @@ canvas {
   cursor: crosshair;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.explanation {
-  margin: 1.5rem 0;
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.explanation h4 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.explanation ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.explanation li {
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.info-box {
-  margin-top: 1.5rem;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-  border-radius: 12px;
-  border-left: 4px solid #f59e0b;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
-}
-
-.info-box p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #92400e;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  line-height: 1.6;
-}
-
-.info-box .icon {
-  font-size: 1.125rem;
   flex-shrink: 0;
 }
+
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
index 7c5bc45..a47ba31 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
@@ -87,32 +87,9 @@
       />
     </div>
 
-    <div class="code-display">
-      <h4>Event Handling Code / 事件处理代码</h4>
-      <pre><code>{{ currentCode }}</code></pre>
-    </div>
+    
 
-    <div class="explanation">
-      <h4>Event Handling Tips / 事件处理要点</h4>
-      <ul>
-        <li>
-          <strong>坐标转换：</strong>
-          使用 getBoundingClientRect() 获取 Canvas 在页面中的位置，计算相对坐标
-        </li>
-        <li>
-          <strong>碰撞检测：</strong>
-          对于圆形，计算鼠标位置到圆心的距离；对于矩形，判断点是否在范围内
-        </li>
-        <li>
-          <strong>事件委托：</strong>
-          Canvas 只有一个元素，需要手动判断事件发生在哪个对象上
-        </li>
-        <li>
-          <strong>性能优化：</strong>
-          使用 requestAnimationFrame 优化重绘，避免频繁操作
-        </li>
-      </ul>
-    </div>
+    
   </div>
 </template>
 
@@ -647,11 +624,12 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
@@ -661,63 +639,11 @@ canvas {
   outline: none;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
 }
 
 canvas:focus {
   border-color: var(--vp-c-brand);
 }
 
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.explanation {
-  margin: 1.5rem 0;
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.explanation h4 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.explanation ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.explanation li {
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
index f343392..2c02269 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
@@ -102,40 +102,11 @@
       />
     </div>
 
-    <div class="code-display">
-      <h4>Particle System Code / 粒子系统代码</h4>
-      <pre><code>{{ particleCode }}</code></pre>
-    </div>
+    
 
-    <div class="explanation">
-      <h4>Particle System Tips / 粒子系统要点</h4>
-      <ul>
-        <li>
-          <strong>粒子类：</strong>
-          每个粒子是一个对象，包含位置、速度、加速度、生命周期等属性
-        </li>
-        <li>
-          <strong>更新循环：</strong>
-          每帧更新所有粒子的位置和状态，移除死亡的粒子
-        </li>
-        <li>
-          <strong>性能优化：</strong>
-          限制粒子数量，使用对象池复用粒子对象
-        </li>
-        <li>
-          <strong>视觉效果：</strong>
-          使用透明度、混合模式、渐变等增强视觉效果
-        </li>
-      </ul>
-    </div>
+    
 
-    <div class="info-box">
-      <p>
-        <span class="icon">💡</span>
-        <strong>提示：</strong>
-        移动鼠标或点击画布来产生粒子！不同的效果有不同的交互方式。
-      </p>
-    </div>
+    
   </div>
 </template>
 
@@ -513,11 +484,12 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
@@ -526,83 +498,7 @@ canvas {
   cursor: crosshair;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.explanation {
-  margin: 1.5rem 0;
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.explanation h4 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.explanation ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.explanation li {
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.info-box {
-  margin-top: 1.5rem;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-  border-radius: 12px;
-  border-left: 4px solid #f59e0b;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
-}
-
-.info-box p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #92400e;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  line-height: 1.6;
-}
-
-.info-box .icon {
-  font-size: 1.125rem;
   flex-shrink: 0;
 }
+
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
index 50539bd..0e57395 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
@@ -174,36 +174,9 @@
       </div>
     </div>
 
-    <div class="code-display">
-      <h4>Optimization Code / 优化代码</h4>
-      <pre><code>{{ optimizationCode }}</code></pre>
-    </div>
+    
 
-    <div class="explanation">
-      <h4>Performance Tips / 性能优化要点</h4>
-      <ul>
-        <li>
-          <strong>减少重绘：</strong>
-          只重绘变化的部分（脏矩形技术），避免不必要的 clearRect
-        </li>
-        <li>
-          <strong>离屏 Canvas：</strong>
-          预渲染静态内容到离屏 Canvas，减少每帧的绘制操作
-        </li>
-        <li>
-          <strong>批量渲染：</strong>
-          减少状态切换（fillStyle、strokeStyle 等），批量处理相同类型的绘制
-        </li>
-        <li>
-          <strong>对象池：</strong>
-          复用对象，减少垃圾回收压力
-        </li>
-        <li>
-          <strong>requestAnimationFrame：</strong>
-          使用浏览器提供的动画 API，优化渲染时机
-        </li>
-      </ul>
-    </div>
+    
   </div>
 </template>
 
@@ -755,11 +728,12 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   margin: 1.5rem 0;
-  padding: 1.5rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
   border-radius: 12px;
   border: 2px solid var(--vp-c-divider);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow-x: auto;
 }
 
 canvas {
@@ -767,6 +741,7 @@ canvas {
   border-radius: 6px;
   background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
 }
 
 .comparison {
@@ -812,57 +787,4 @@ canvas {
   color: var(--vp-c-text-2);
 }
 
-.code-display {
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: #1e293b;
-  border-radius: 12px;
-  overflow-x: auto;
-  border: 2px solid #334155;
-}
-
-.code-display h4 {
-  color: #f8fafc;
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.code-display pre {
-  margin: 0;
-}
-
-.code-display code {
-  color: #e2e8f0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  line-height: 1.7;
-}
-
-.explanation {
-  margin: 1.5rem 0;
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.explanation h4 {
-  margin: 0 0 0.75rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.explanation ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.explanation li {
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue b/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue
index 54ba30d..ffe0c7b 100644
--- a/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="demo ab-testing-demo">
     <div class="header">
-      <span class="icon">🧪</span>
-      <span class="title">A/B 测试交互演示</span>
+      <span class="title">A/B 测试演示</span>
     </div>
 
-    <div class="tabs">
+    <div v-if="!props.tab" class="tabs">
       <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :class="['tab', { active: activeTab === tab.id }]"
-        @click="activeTab = tab.id"
+        v-for="t in tabs"
+        :key="t.id"
+        :class="['tab', { active: activeTab === t.id }]"
+        @click="activeTab = t.id"
       >
-        {{ tab.icon }} {{ tab.name }}
+        {{ t.name }}
       </button>
     </div>
 
@@ -37,15 +36,7 @@
         </div>
       </div>
 
-      <div class="traffic-controls">
-        <button class="btn-primary" @click="allocateUser">
-          👤 分配1个用户
-        </button>
-        <button class="btn-secondary" @click="allocateBatch">
-          👥 分配100个用户
-        </button>
-        <button class="btn-tertiary" @click="resetTraffic">🔄 重置</button>
-      </div>
+
 
       <div class="traffic-stats">
         <div class="stat-item">
@@ -63,7 +54,6 @@
       </div>
 
       <div class="tips">
-        <span class="tips-icon">💡</span>
         <span class="tips-text">50/50分配能最快检测出差异，确保两组样本量足够大以获得统计显著性</span>
       </div>
     </div>
@@ -178,7 +168,7 @@
               'not-significant': !isSignificant
             }"
           >
-            {{ isSignificant ? '显著 ✅' : '不显著 ❌' }}
+            {{ isSignificant ? '显著' : '不显著' }}
           </span>
         </div>
       </div>
@@ -194,7 +184,6 @@
       </div>
 
       <div class="tips">
-        <span class="tips-icon">💡</span>
         <span class="tips-text">P值 &lt; 0.05 表示结果统计显著，说明差异不太可能是随机产生的</span>
       </div>
     </div>
@@ -259,7 +248,7 @@
       </div>
 
       <button class="btn-primary btn-calc" @click="calculateSampleSize">
-        🧮 计算所需样本量
+        计算所需样本量
       </button>
 
       <div v-if="calculatedSampleSize > 0" class="calc-results">
@@ -293,7 +282,6 @@
       </div>
 
       <div class="tips">
-        <span class="tips-icon">💡</span>
         <span class="tips-text">提升目标越小，所需样本量越大。5%的提升比20%的提升需要更多样本</span>
       </div>
     </div>
@@ -305,7 +293,6 @@
       <div class="pitfall-list">
         <div v-for="pitfall in pitfalls" :key="pitfall.id" class="pitfall-card">
           <div class="pitfall-header">
-            <span class="pitfall-icon">{{ pitfall.icon }}</span>
             <span class="pitfall-title">{{ pitfall.title }}</span>
           </div>
           <div class="pitfall-desc">{{ pitfall.description }}</div>
@@ -313,7 +300,7 @@
             <strong>示例：</strong>{{ pitfall.example }}
           </div>
           <div class="pitfall-solution">
-            <strong>✅ 解决方案：</strong>{{ pitfall.solution }}
+            <strong>解决方案：</strong>{{ pitfall.solution }}
           </div>
         </div>
       </div>
@@ -324,13 +311,20 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const activeTab = ref('traffic')
+const props = defineProps({
+  tab: {
+    type: String,
+    default: null
+  }
+})
+
+const activeTab = ref(props.tab || 'traffic')
 
 const tabs = [
-  { id: 'traffic', icon: '🚦', name: '流量分配' },
-  { id: 'results', icon: '📊', name: '结果对比' },
-  { id: 'calculator', icon: '🧮', name: '样本量计算' },
-  { id: 'pitfalls', icon: '⚠️', name: '常见误区' }
+  { id: 'traffic', name: '流量分配' },
+  { id: 'results', name: '结果对比' },
+  { id: 'calculator', name: '样本量计算' },
+  { id: 'pitfalls', name: '常见误区' }
 ]
 
 // 流量分配相关
@@ -490,7 +484,6 @@ function calculateSampleSize() {
 const pitfalls = [
   {
     id: 'early-stop',
-    icon: '🛑',
     title: '过早停止实验',
     description:
       '看到结果"显著"就立即停止实验，实际上只是随机波动',
@@ -500,7 +493,6 @@ const pitfalls = [
   },
   {
     id: 'peeking',
-    icon: '👁️',
     title: '频繁窥探结果',
     description: '每天查看数据，一旦"显著"就停止，这会大幅增加假阳性率',
     example:
@@ -509,7 +501,6 @@ const pitfalls = [
   },
   {
     id: 'simpson',
-    icon: '🔄',
     title: '辛普森悖论',
     description: '分组看B组更差，但合并后B组反而更好（或相反）',
     example:
@@ -518,7 +509,6 @@ const pitfalls = [
   },
   {
     id: 'p-hacking',
-    icon: '🔬',
     title: 'P值操纵（P-hacking）',
     description: '通过尝试不同指标、不同子群体，直到找到"显著"结果',
     example:
@@ -527,7 +517,6 @@ const pitfalls = [
   },
   {
     id: 'novelty',
-    icon: '✨',
     title: '新奇效应',
     description: '用户因好奇点击新功能，导致短期数据虚高',
     example:
@@ -536,7 +525,6 @@ const pitfalls = [
   },
   {
     id: 'underpowered',
-    icon: '🔋',
     title: '样本量不足',
     description: '样本量太小，即使有真实差异也检测不出来',
     example:
diff --git a/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue b/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue
index 4843d3f..d49127a 100644
--- a/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="data-analysis-root">
     <div class="data-analysis-header">
-      <span class="data-analysis-icon">📊</span>
       <span class="data-analysis-title">数据分析演示</span>
     </div>
 
-    <div class="data-analysis-tabs">
+    <div v-if="!props.tab" class="data-analysis-tabs">
       <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :class="['data-analysis-tab', { active: activeTab === tab.id }]"
-        @click="activeTab = tab.id"
+        v-for="t in tabs"
+        :key="t.id"
+        :class="['data-analysis-tab', { active: activeTab === t.id }]"
+        @click="activeTab = t.id"
       >
-        {{ tab.icon }} {{ tab.name }}
+        {{ t.name }}
       </button>
     </div>
 
@@ -32,7 +31,7 @@
                 @input="calculateStats"
               />
               <button class="stats-btn" @click="generateRandomData">
-                🎲 随机生成
+                随机生成
               </button>
             </div>
           </div>
@@ -114,7 +113,7 @@
               :class="['agg-op-btn', { active: activeAggOp === op.id }]"
               @click="activeAggOp = op.id"
             >
-              {{ op.icon }} {{ op.name }}
+              {{ op.name }}
             </button>
           </div>
 
@@ -187,7 +186,6 @@
             <div class="funnel-insights-title">洞察与建议</div>
             <div class="funnel-insights-list">
               <div class="funnel-insight">
-                <span class="funnel-insight-icon">💡</span>
                 <span class="funnel-insight-text">
                   最低转化步骤：<strong>{{ worstStep.name }}</strong> ({{
                     worstStep.rate
@@ -195,13 +193,11 @@
                 </span>
               </div>
               <div class="funnel-insight">
-                <span class="funnel-insight-icon">📈</span>
                 <span class="funnel-insight-text">
                   整体转化率：<strong>{{ overallConversion }}</strong>
                 </span>
               </div>
               <div class="funnel-insight">
-                <span class="funnel-insight-icon">🎯</span>
                 <span class="funnel-insight-text">
                   建议：优化
                   <strong>{{ worstStep.name }}</strong>
@@ -383,14 +379,21 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const activeTab = ref('stats')
+const props = defineProps({
+  tab: {
+    type: String,
+    default: null
+  }
+})
+
+const activeTab = ref(props.tab || 'stats')
 const activeAggOp = ref('groupBy')
 
 const tabs = [
-  { id: 'stats', name: '描述性统计', icon: '📈' },
-  { id: 'aggregation', name: '数据聚合', icon: '🔗' },
-  { id: 'funnel', name: '漏斗分析', icon: '🔽' },
-  { id: 'retention', name: '留存分析', icon: '📊' }
+  { id: 'stats', name: '描述性统计' },
+  { id: 'aggregation', name: '数据聚合' },
+  { id: 'funnel', name: '漏斗分析' },
+  { id: 'retention', name: '留存分析' }
 ]
 
 // 描述性统计
diff --git a/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue b/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue
index cf126cc..6301dd4 100644
--- a/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue
@@ -1,1264 +1,202 @@
 <template>
-  <div class="demo">
-    <div class="header">
-      <span class="icon">🗄️</span>
-      <span class="title">数据模型设计演示</span>
+  <div class="data-models-demo">
+    <div class="demo-header">
+      <span class="icon">🗂️</span>
+      <span class="title">数据模型全景</span>
+      <span class="subtitle">四种主流数据模型对比</span>
     </div>
 
-    <div class="tabs">
+    <div class="intro-text">
+      不是所有数据都适合塞进<span class="highlight">关系型表格</span>。社交网络的人脉关系、IoT 设备的时间流水、AI 搜索的语义向量——不同的数据形态需要不同的<span class="highlight">建模方式</span>。
+    </div>
+
+    <div v-if="!props.tab" class="tabs">
       <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :class="['tab', { active: active === tab.id }]"
-        @click="active = tab.id"
+        v-for="t in tabs"
+        :key="t.id"
+        :class="['tab', { active: active === t.id }]"
+        @click="active = t.id"
       >
-        {{ tab.icon }} {{ tab.name }}
+        {{ t.name }}
       </button>
     </div>
 
-    <div class="content">
-      <!-- ER 图展示 -->
-      <div v-if="active === 'er'" class="section">
-        <h4>实体关系图（ER Diagram）</h4>
-        <div class="er-diagram">
-          <div class="er-table users">
-            <div class="table-header">
-              <span class="table-name">users</span>
-              <span class="table-type">用户表</span>
-            </div>
-            <div class="table-fields">
-              <div class="field pk">
-                <span class="field-key">PK</span>
-                <code>id</code>
-                <span class="field-type">BIGINT</span>
-              </div>
-              <div class="field">
-                <span class="field-key"></span>
-                <code>username</code>
-                <span class="field-type">VARCHAR(50)</span>
-              </div>
-              <div class="field">
-                <span class="field-key"></span>
-                <code>email</code>
-                <span class="field-type">VARCHAR(100)</span>
-              </div>
-              <div class="field">
-                <span class="field-key"></span>
-                <code>created_at</code>
-                <span class="field-type">TIMESTAMP</span>
-              </div>
-            </div>
-          </div>
+    <!-- 文档模型 -->
+    <div v-if="active === 'document'" class="model-panel">
+      <div class="panel-header">
+        <span class="panel-icon">📄</span>
+        <span class="panel-title">文档模型 (Document)</span>
+        <span class="panel-badge">MongoDB / DynamoDB</span>
+      </div>
+      <div class="panel-desc">数据以 JSON 文档存储，每条记录可以有不同的字段结构，天然适合<strong>嵌套、半结构化</strong>数据。</div>
+      <div class="code-block">
+        <pre><code>{
+  "_id": "user_1001",
+  "name": "张三",
+  "tags": ["VIP", "活跃"],
+  "address": {
+    "city": "北京",
+    "district": "朝阳区"
+  },
+  "orders": [
+    { "id": "o1", "amount": 299 },
+    { "id": "o2", "amount": 599 }
+  ]
+}</code></pre>
+      </div>
+      <div class="traits">
+        <div class="trait good">无需预定义 Schema，字段随时扩展</div>
+        <div class="trait good">嵌套数据一次读取，无需 JOIN</div>
+        <div class="trait bad">跨文档关联查询较弱</div>
+      </div>
+      <div class="use-cases">
+        <span class="use-label">典型场景：</span>
+        <span class="use-tag">用户画像</span>
+        <span class="use-tag">CMS 内容</span>
+        <span class="use-tag">商品目录</span>
+        <span class="use-tag">配置中心</span>
+      </div>
+    </div>
 
-          <div class="relationship one-to-many">
-            <div class="rel-line">
-              <span class="rel-cardinality">1</span>
-              <span class="rel-arrow">———⟡</span>
-              <span class="rel-cardinality">N</span>
-            </div>
-            <div class="rel-label">一个用户可以有多个订单</div>
-          </div>
-
-          <div class="er-table orders">
-            <div class="table-header">
-              <span class="table-name">orders</span>
-              <span class="table-type">订单表</span>
-            </div>
-            <div class="table-fields">
-              <div class="field pk">
-                <span class="field-key">PK</span>
-                <code>id</code>
-                <span class="field-type">BIGINT</span>
-              </div>
-              <div class="field fk">
-                <span class="field-key">FK</span>
-                <code>user_id</code>
-                <span class="field-type">BIGINT</span>
-              </div>
-              <div class="field">
-                <span class="field-key"></span>
-                <code>total_amount</code>
-                <span class="field-type">DECIMAL(10,2)</span>
-              </div>
-              <div class="field">
-                <span class="field-key"></span>
-                <code>status</code>
-                <span class="field-type">VARCHAR(20)</span>
-              </div>
-            </div>
-          </div>
+    <!-- 图模型 -->
+    <div v-if="active === 'graph'" class="model-panel">
+      <div class="panel-header">
+        <span class="panel-icon">🕸️</span>
+        <span class="panel-title">图模型 (Graph)</span>
+        <span class="panel-badge">Neo4j / Neptune</span>
+      </div>
+      <div class="panel-desc">数据由<strong>节点</strong>和<strong>边</strong>组成，专门表达实体之间的复杂关系网络。</div>
+      <div class="graph-viz">
+        <div class="graph-nodes">
+          <div class="g-node user" style="grid-area: a">张三</div>
+          <div class="g-node user" style="grid-area: b">李四</div>
+          <div class="g-node user" style="grid-area: c">王五</div>
+          <div class="g-node item" style="grid-area: d">iPhone</div>
         </div>
+        <div class="graph-edges">
+          <div class="g-edge">张三 —<span class="edge-label">关注</span>→ 李四</div>
+          <div class="g-edge">李四 —<span class="edge-label">关注</span>→ 王五</div>
+          <div class="g-edge">张三 —<span class="edge-label">购买</span>→ iPhone</div>
+          <div class="g-edge">王五 —<span class="edge-label">购买</span>→ iPhone</div>
+        </div>
+      </div>
+      <div class="traits">
+        <div class="trait good">多跳关系查询极快（朋友的朋友）</div>
+        <div class="trait good">关系本身可以携带属性</div>
+        <div class="trait bad">不擅长大规模聚合统计</div>
+      </div>
+      <div class="use-cases">
+        <span class="use-label">典型场景：</span>
+        <span class="use-tag">社交网络</span>
+        <span class="use-tag">推荐系统</span>
+        <span class="use-tag">知识图谱</span>
+        <span class="use-tag">欺诈检测</span>
+      </div>
+    </div>
 
-        <div class="legend">
-          <div class="legend-item">
-            <span class="legend-key pk">PK</span>
-            <span>主键 (Primary Key)</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-key fk">FK</span>
-            <span>外键 (Foreign Key)</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-rel">1 ———⟡ N</span>
-            <span>一对多关系</span>
+    <!-- 时序模型 -->
+    <div v-if="active === 'timeseries'" class="model-panel">
+      <div class="panel-header">
+        <span class="panel-icon">📈</span>
+        <span class="panel-title">时序模型 (Time-Series)</span>
+        <span class="panel-badge">InfluxDB / TimescaleDB</span>
+      </div>
+      <div class="panel-desc">以<strong>时间戳</strong>为主轴，针对按时间顺序写入、按时间范围查询的场景深度优化。</div>
+      <div class="ts-table">
+        <div class="ts-row ts-header">
+          <span>timestamp</span>
+          <span>device</span>
+          <span>cpu_usage</span>
+          <span>memory</span>
+        </div>
+        <div v-for="row in tsData" :key="row.ts" class="ts-row">
+          <span class="ts-time">{{ row.ts }}</span>
+          <span>{{ row.device }}</span>
+          <span :class="row.cpu > 80 ? 'val-high' : 'val-normal'">{{ row.cpu }}%</span>
+          <span>{{ row.mem }}GB</span>
+        </div>
+      </div>
+      <div class="traits">
+        <div class="trait good">写入吞吐极高（百万点/秒）</div>
+        <div class="trait good">内置降采样、自动过期策略</div>
+        <div class="trait bad">不支持复杂关联查询</div>
+      </div>
+      <div class="use-cases">
+        <span class="use-label">典型场景：</span>
+        <span class="use-tag">服务器监控</span>
+        <span class="use-tag">IoT 传感器</span>
+        <span class="use-tag">金融行情</span>
+        <span class="use-tag">日志分析</span>
+      </div>
+    </div>
+
+    <!-- 向量模型 -->
+    <div v-if="active === 'vector'" class="model-panel">
+      <div class="panel-header">
+        <span class="panel-icon">🧠</span>
+        <span class="panel-title">向量模型 (Vector)</span>
+        <span class="panel-badge">Pinecone / Milvus / pgvector</span>
+      </div>
+      <div class="panel-desc">将文本、图片等非结构化数据转为<strong>高维向量</strong>，通过计算向量距离实现语义相似度搜索。</div>
+      <div class="vector-viz">
+        <div class="vec-query">
+          <div class="vec-label">查询："好吃的日料"</div>
+          <div class="vec-arrow">→ Embedding →</div>
+          <div class="vec-nums">[0.82, 0.15, 0.91, ...]</div>
+        </div>
+        <div class="vec-results">
+          <div class="vec-result" v-for="r in vecResults" :key="r.text">
+            <span class="vec-score" :style="{ opacity: r.score }">{{ (r.score * 100).toFixed(0) }}%</span>
+            <span class="vec-text">{{ r.text }}</span>
           </div>
         </div>
       </div>
-
-      <!-- 关系类型 -->
-      <div v-if="active === 'relationships'" class="section">
-        <h4>三种基本关系类型</h4>
-        <div class="relationship-cards">
-          <div class="rel-card">
-            <div class="rel-icon">1️⃣</div>
-            <div class="rel-title">一对一 (One-to-One)</div>
-            <div class="rel-example">
-              <div class="rel-tables">
-                <code>users</code> → <code>user_profiles</code>
-              </div>
-              <div class="rel-desc">一个用户只有一个详细资料</div>
-            </div>
-            <div class="rel-sql">
-              <pre>user_id UNIQUE</pre>
-            </div>
-          </div>
-
-          <div class="rel-card">
-            <div class="rel-icon">1️⃣➡️🔢</div>
-            <div class="rel-title">一对多 (One-to-Many)</div>
-            <div class="rel-example">
-              <div class="rel-tables">
-                <code>users</code> → <code>orders</code>
-              </div>
-              <div class="rel-desc">一个用户可以有多个订单</div>
-            </div>
-            <div class="rel-sql">
-              <pre>user_id FOREIGN KEY</pre>
-            </div>
-          </div>
-
-          <div class="rel-card">
-            <div class="rel-icon">🔢↔️🔢</div>
-            <div class="rel-title">多对多 (Many-to-Many)</div>
-            <div class="rel-example">
-              <div class="rel-tables">
-                <code>students</code> ↔ <code>courses</code>
-              </div>
-              <div class="rel-desc">
-                一个学生可以选多门课，一门课可以有多个学生
-              </div>
-            </div>
-            <div class="rel-sql">
-              <pre>
-中间表: enrollments
-- student_id FK
-- course_id FK</pre>
-            </div>
-          </div>
-        </div>
+      <div class="traits">
+        <div class="trait good">语义搜索，理解"意思"而非关键词</div>
+        <div class="trait good">支持多模态（文本、图片、音频）</div>
+        <div class="trait bad">向量生成依赖 Embedding 模型质量</div>
       </div>
-
-      <!-- 范式理论 -->
-      <div v-if="active === 'normalization'" class="section">
-        <h4>范式理论：从混乱到有序</h4>
-        <div class="norm-container">
-          <div class="norm-tabs">
-            <button
-              v-for="norm in norms"
-              :key="norm.id"
-              :class="['norm-tab', { active: normId === norm.id }]"
-              @click="normId = norm.id"
-            >
-              {{ norm.name }}
-            </button>
-          </div>
-
-          <div class="norm-content">
-            <div class="norm-header">
-              <span class="norm-title">{{ currentNorm.name }}</span>
-              <span class="norm-desc">{{ currentNorm.desc }}</span>
-            </div>
-
-            <div class="norm-example">
-              <div v-if="currentNorm.before" class="norm-before">
-                <div class="norm-label">
-                  ❌ {{ currentNorm.beforeTitle || '不符合' }}
-                </div>
-                <pre class="norm-code">{{ currentNorm.before }}</pre>
-              </div>
-              <div v-if="currentNorm.after" class="norm-after">
-                <div class="norm-label">
-                  ✅ {{ currentNorm.afterTitle || '符合' }}
-                </div>
-                <pre class="norm-code">{{ currentNorm.after }}</pre>
-              </div>
-            </div>
-
-            <div v-if="currentNorm.note" class="norm-note">
-              <span class="note-icon">💡</span>
-              <span class="note-text">{{ currentNorm.note }}</span>
-            </div>
-          </div>
-        </div>
+      <div class="use-cases">
+        <span class="use-label">典型场景：</span>
+        <span class="use-tag">RAG 检索增强</span>
+        <span class="use-tag">以图搜图</span>
+        <span class="use-tag">语义搜索</span>
+        <span class="use-tag">推荐系统</span>
       </div>
+    </div>
 
-      <!-- 反范式化 -->
-      <div v-if="active === 'denormalization'" class="section">
-        <h4>反范式化：用空间换时间</h4>
-        <div class="denorm-box">
-          <div class="denorm-scenario">
-            <h5>场景：电商订单查询</h5>
-            <div class="denorm-comparison">
-              <div class="denorm-side norm">
-                <div class="denorm-title">范式化设计</div>
-                <div class="denorm-tables">
-                  <pre class="code-sm">
-orders:      users:
-- id         - id
-- user_id ⟐  - name
-- total      - email
-- status
-                  </pre>
-                </div>
-                <div class="denorm-query">
-                  <div class="query-label">查询 SQL：</div>
-                  <pre class="code-sm">
-SELECT o.*, u.name, u.email
-FROM orders o
-JOIN users u ON o.user_id = u.id
-WHERE o.id = 123;</pre>
-                </div>
-                <div class="denorm-result">
-                  <span class="result-label">结果：</span>
-                  <span class="result-bad">需要 JOIN，查询慢</span>
-                </div>
-              </div>
-
-              <div class="denorm-arrow">→</div>
-
-              <div class="denorm-side denorm">
-                <div class="denorm-title">反范式化设计</div>
-                <div class="denorm-tables">
-                  <pre class="code-sm">
-orders:
-- id
-- user_id
-- user_name     ← 冗余
-- user_email    ← 冗余
-- total
-- status</pre>
-                </div>
-                <div class="denorm-query">
-                  <div class="query-label">查询 SQL：</div>
-                  <pre class="code-sm">
-SELECT *
-FROM orders
-WHERE id = 123;</pre>
-                </div>
-                <div class="denorm-result">
-                  <span class="result-label">结果：</span>
-                  <span class="result-good">单表查询，速度快</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="denorm-tradeoff">
-            <div class="tradeoff-item">
-              <span class="tradeoff-icon">✅</span>
-              <span class="tradeoff-text">查询性能提升，减少 JOIN</span>
-            </div>
-            <div class="tradeoff-item">
-              <span class="tradeoff-icon">⚠️</span>
-              <span class="tradeoff-text">数据冗余，占用更多存储</span>
-            </div>
-            <div class="tradeoff-item">
-              <span class="tradeoff-icon">⚠️</span>
-              <span class="tradeoff-text">更新时需同步冗余字段</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 电商实战 -->
-      <div v-if="active === 'ecommerce'" class="section">
-        <h4>实战：电商系统数据模型</h4>
-        <div class="ecommerce-diagram">
-          <div class="ecosystem">
-            <!-- 用户中心 -->
-            <div class="eco-module users-module">
-              <div class="module-title">用户模块</div>
-              <div class="module-tables">
-                <div class="mini-table">users</div>
-                <div class="mini-table">user_addresses</div>
-                <div class="mini-table">user_profiles</div>
-              </div>
-            </div>
-
-            <!-- 商品中心 -->
-            <div class="eco-module products-module">
-              <div class="module-title">商品模块</div>
-              <div class="module-tables">
-                <div class="mini-table">categories</div>
-                <div class="mini-table">products</div>
-                <div class="mini-table">product_skus</div>
-                <div class="mini-table">product_inventory</div>
-              </div>
-            </div>
-
-            <!-- 订单中心 -->
-            <div class="eco-module orders-module">
-              <div class="module-title">订单模块</div>
-              <div class="module-tables">
-                <div class="mini-table">orders</div>
-                <div class="mini-table">order_items</div>
-                <div class="mini-table">payments</div>
-              </div>
-            </div>
-
-            <!-- 营销中心 -->
-            <div class="eco-module marketing-module">
-              <div class="module-title">营销模块</div>
-              <div class="module-tables">
-                <div class="mini-table">coupons</div>
-                <div class="mini-table">user_coupons</div>
-                <div class="mini-table">promotions</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="relationships">
-            <div class="rel-item">
-              <span class="rel-from">users</span>
-              <span class="rel-type">1:N</span>
-              <span class="rel-to">orders</span>
-            </div>
-            <div class="rel-item">
-              <span class="rel-from">orders</span>
-              <span class="rel-type">1:N</span>
-              <span class="rel-to">order_items</span>
-            </div>
-            <div class="rel-item">
-              <span class="rel-from">products</span>
-              <span class="rel-type">1:N</span>
-              <span class="rel-to">product_skus</span>
-            </div>
-            <div class="rel-item">
-              <span class="rel-from">users & coupons</span>
-              <span class="rel-type">M:N</span>
-              <span class="rel-to">user_coupons</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="design-principles">
-          <div class="principle-item">
-            <span class="principle-icon">📐</span>
-            <div class="principle-text">
-              <strong>适度范式</strong>
-              <div class="principle-desc">
-                核心业务表遵循 3NF，查询表适当反范式化
-              </div>
-            </div>
-          </div>
-          <div class="principle-item">
-            <span class="principle-icon">🔗</span>
-            <div class="principle-text">
-              <strong>明确关系</strong>
-              <div class="principle-desc">通过外键约束保证数据完整性</div>
-            </div>
-          </div>
-          <div class="principle-item">
-            <span class="principle-icon">📊</span>
-            <div class="principle-text">
-              <strong>预留扩展</strong>
-              <div class="principle-desc">
-                使用 JSON 字段存储非结构化扩展数据
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 反模式 -->
-      <div v-if="active === 'antipatterns'" class="section">
-        <h4>常见反模式及改进</h4>
-        <div class="antipatterns-list">
-          <div v-for="anti in antipatterns" :key="anti.id" class="anti-item">
-            <div class="anti-header">
-              <span class="anti-icon">{{ anti.icon }}</span>
-              <span class="anti-title">{{ anti.title }}</span>
-            </div>
-            <div class="anti-problem">
-              <div class="anti-label">❌ 问题</div>
-              <pre class="anti-code">{{ anti.problem }}</pre>
-            </div>
-            <div class="anti-solution">
-              <div class="anti-label">✅ 改进</div>
-              <pre class="anti-code">{{ anti.solution }}</pre>
-            </div>
-            <div v-if="anti.impact" class="anti-impact">
-              <span class="impact-icon">💥</span>
-              <span class="impact-text">{{ anti.impact }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>选型原则：</strong>没有万能数据库。关系型（MySQL/PostgreSQL）仍是大多数业务的基石，但当数据形态明确偏向文档、图、时序或向量时，选择专用模型能获得<span class="highlight">数量级的性能提升</span>。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
-const active = ref('er')
-const normId = ref('1nf')
+const props = defineProps({ tab: { type: String, default: '' } })
+const active = ref(props.tab || 'document')
 
 const tabs = [
-  { id: 'er', icon: '📊', name: 'ER 图' },
-  { id: 'relationships', icon: '🔗', name: '关系类型' },
-  { id: 'normalization', icon: '📐', name: '范式理论' },
-  { id: 'denormalization', icon: '⚡', name: '反范式化' },
-  { id: 'ecommerce', icon: '🛒', name: '电商实战' },
-  { id: 'antipatterns', icon: '⚠️', name: '反模式' }
+  { id: 'document', name: '📄 文档' },
+  { id: 'graph', name: '🕸️ 图' },
+  { id: 'timeseries', name: '📈 时序' },
+  { id: 'vector', name: '🧠 向量' }
 ]
 
-const norms = [
-  {
-    id: '1nf',
-    name: '第一范式 (1NF)',
-    desc: '每个字段都是不可再分的最小数据单元',
-    beforeTitle: '不符合 1NF',
-    before: `users 表:
-| id | name           |
-|----|----------------|
-| 1  | 张三,北京,工程师 |`,
-    afterTitle: '符合 1NF',
-    after: `users 表:
-| id | name | city   | role    |
-|----|------|--------|---------|
-| 1  | 张三 | 北京   | 工程师  |`,
-    note: '字段原子性：一个字段只存储一个值'
-  },
-  {
-    id: '2nf',
-    name: '第二范式 (2NF)',
-    desc: '在 1NF 基础上，非主键字段完全依赖于主键',
-    beforeTitle: '不符合 2NF',
-    before: `order_items 表:
-| id | order_id | product_name | quantity | unit_price |
-|----|----------|--------------|----------|------------|
-| 1  | 100      | iPhone       | 2        | 5999       |`,
-    afterTitle: '符合 2NF',
-    after: `order_items 表:
-| id | order_id | product_id | quantity |
-|----|----------|------------|----------|
-| 1  | 100      | 1          | 2        |
-
-products 表:
-| id | name       | price    |
-|----|------------|----------|
-| 1  | iPhone     | 5999     |`,
-    note: '消除部分依赖：product_name 只依赖 product_id，不依赖 (order_id, product_id) 联合主键'
-  },
-  {
-    id: '3nf',
-    name: '第三范式 (3NF)',
-    desc: '在 2NF 基础上，非主键字段不传递依赖主键',
-    beforeTitle: '不符合 3NF',
-    before: `orders 表:
-| id | user_id | total | user_level | discount |
-|----|---------|-------|------------|----------|
-| 1  | 100     | 500   | VIP        | 0.9      |`,
-    afterTitle: '符合 3NF',
-    after: `orders 表:
-| id | user_id | total | discount |
-|----|---------|-------|----------|
-| 1  | 100     | 500   | 0.9      |
-
-users 表:
-| id | level |
-|----|-------|
-| 100| VIP   |`,
-    note: '消除传递依赖：user_level 依赖 user_id，再依赖 orders.id'
-  }
+const tsData = [
+  { ts: '10:00:01', device: 'server-01', cpu: 45, mem: 12.3 },
+  { ts: '10:00:02', device: 'server-01', cpu: 67, mem: 12.5 },
+  { ts: '10:00:03', device: 'server-01', cpu: 92, mem: 14.1 },
+  { ts: '10:00:04', device: 'server-02', cpu: 23, mem: 8.2 },
+  { ts: '10:00:05', device: 'server-02', cpu: 85, mem: 9.7 }
 ]
 
-const antipatterns = [
-  {
-    id: 'flat',
-    icon: '📋',
-    title: '巨型宽表',
-    problem: `big_table 表:
-- id
-- user_name
-- user_email
-- user_phone
-- user_address_city
-- user_address_street
-- order_1_id
-- order_1_amount
-- order_2_id
-- order_2_amount
-- ...（订单字段重复 100 次）`,
-    solution: `users 表:
-- id
-- name
-- email
-- phone
-
-orders 表:
-- id
-- user_id
-- amount
-- created_at`,
-    impact: '字段数量爆炸，空值多，扩展困难'
-  },
-  {
-    id: 'comma',
-    icon: '🔢',
-    title: '逗号分隔值',
-    problem: `posts 表:
-| id | title      | tags               |
-|----|------------|--------------------|
-| 1  | Vue入门    | vue,frontend,jjs   |`,
-    solution: `posts 表:
-| id | title      |
-|----|------------|
-| 1  | Vue入门    |
-
-post_tags 表:
-| post_id | tag_id |
-|---------|--------|
-| 1       | 1      |
-| 1       | 2      |
-
-tags 表:
-| id | name      |
-|----|-----------|
-| 1  | vue       |
-| 2  | frontend |`,
-    impact: '无法索引，无法关联查询，无法统计'
-  },
-  {
-    id: 'json',
-    icon: '📦',
-    title: '滥用 JSON 字段',
-    problem: `orders 表:
-| id | user_id | items                  | total |
-|----|---------|------------------------|-------|
-| 1  | 100     | [{"pid":1,"qty":2}]    | 200   |`,
-    solution: `orders 表:
-| id | user_id | total |
-|----|---------|-------|
-| 1  | 100     | 200   |
-
-order_items 表:
-| id | order_id | product_id | quantity |
-|----|----------|------------|----------|
-| 1  | 1        | 1          | 2        |`,
-    impact: '无法建立外键约束，无法有效索引，数据完整性差'
-  }
+const vecResults = [
+  { text: '银座寿司之神 — 顶级 omakase', score: 0.96 },
+  { text: '新宿拉面一条街 — 浓厚豚骨汤底', score: 0.82 },
+  { text: '居酒屋深夜食堂 — 烤串与清酒', score: 0.75 },
+  { text: '意大利手工披萨 — 窑烤玛格丽特', score: 0.31 }
 ]
-
-const currentNorm = computed(() => {
-  return norms.find((n) => n.id === normId.value) || norms[0]
-})
 </script>
-
-<style scoped>
-.demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  margin: 24px 0;
-  overflow: hidden;
-}
-
-.header {
-  padding: 14px 20px;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.icon {
-  font-size: 20px;
-}
-
-.title {
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.tabs {
-  display: flex;
-  gap: 4px;
-  padding: 10px 12px;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-  overflow-x: auto;
-}
-
-.tab {
-  padding: 6px 12px;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg-soft);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-}
-
-.tab:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.tab.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-
-.content {
-  padding: 16px;
-}
-
-.section h4 {
-  margin: 0 0 14px 0;
-  font-size: 15px;
-}
-
-/* ER Diagram Styles */
-.er-diagram {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 16px;
-}
-
-.er-table {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  overflow: hidden;
-  min-width: 280px;
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 14px;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.table-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-brand);
-}
-
-.table-type {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-
-.table-fields {
-  display: flex;
-  flex-direction: column;
-}
-
-.field {
-  display: grid;
-  grid-template-columns: 32px 1fr 80px;
-  gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--vp-c-divider);
-  align-items: center;
-  font-size: 12px;
-}
-
-.field:last-child {
-  border-bottom: none;
-}
-
-.field.pk {
-  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
-}
-
-.field.fk {
-  background: color-mix(in srgb, #3b82f6 8%, var(--vp-c-bg));
-}
-
-.field-key {
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--vp-c-text-3);
-}
-
-.field.pk .field-key {
-  color: #22c55e;
-}
-
-.field.fk .field-key {
-  color: #3b82f6;
-}
-
-.field code {
-  font-size: 11px;
-  color: var(--vp-c-text-1);
-}
-
-.field-type {
-  font-size: 10px;
-  color: var(--vp-c-text-3);
-  text-align: right;
-}
-
-.relationship {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.rel-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--vp-c-text-2);
-}
-
-.rel-cardinality {
-  font-weight: 600;
-  color: var(--vp-c-brand);
-}
-
-.rel-arrow {
-  font-size: 16px;
-}
-
-.rel-label {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 12px;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  font-size: 11px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend-key {
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.legend-key.pk {
-  background: color-mix(in srgb, #22c55e 20%, transparent);
-  color: #22c55e;
-}
-
-.legend-key.fk {
-  background: color-mix(in srgb, #3b82f6 20%, transparent);
-  color: #3b82f6;
-}
-
-.legend-rel {
-  font-size: 12px;
-}
-
-/* Relationship Cards */
-.relationship-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 12px;
-}
-
-.rel-card {
-  padding: 14px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-}
-
-.rel-icon {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.rel-title {
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.rel-example {
-  margin-bottom: 10px;
-}
-
-.rel-tables {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-
-.rel-tables code {
-  background: var(--vp-c-bg-soft);
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-}
-
-.rel-desc {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-
-.rel-sql {
-  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
-  padding: 8px;
-  border-radius: 4px;
-}
-
-.rel-sql pre {
-  margin: 0;
-  font-size: 10px;
-  line-height: 1.4;
-  color: var(--vp-c-text-2);
-}
-
-/* Normalization Styles */
-.norm-container {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.norm-tabs {
-  display: flex;
-  gap: 2px;
-  padding: 8px;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.norm-tab {
-  padding: 6px 14px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.norm-tab:hover {
-  background: var(--vp-c-bg-soft);
-}
-
-.norm-tab.active {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.norm-content {
-  padding: 14px;
-}
-
-.norm-header {
-  margin-bottom: 14px;
-}
-
-.norm-title {
-  font-size: 14px;
-  font-weight: 600;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.norm-desc {
-  font-size: 12px;
-  color: var(--vp-c-text-3);
-}
-
-.norm-example {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-@media (min-width: 768px) {
-  .norm-example {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.norm-before,
-.norm-after {
-  padding: 12px;
-  border-radius: 6px;
-}
-
-.norm-before {
-  background: color-mix(in srgb, #ef4444 8%, var(--vp-c-bg));
-  border: 1px solid color-mix(in srgb, #ef4444 20%, transparent);
-}
-
-.norm-after {
-  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
-  border: 1px solid color-mix(in srgb, #22c55e 20%, transparent);
-}
-
-.norm-label {
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.norm-code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 10px;
-  border-radius: 6px;
-  font-family: 'Menlo', monospace;
-  font-size: 10px;
-  line-height: 1.5;
-  overflow-x: auto;
-  margin: 0;
-}
-
-.norm-note {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  font-size: 11px;
-}
-
-.note-icon {
-  font-size: 14px;
-}
-
-.note-text {
-  color: var(--vp-c-text-2);
-}
-
-/* Denormalization */
-.denorm-box {
-  background: var(--vp-c-bg);
-  padding: 14px;
-  border-radius: 8px;
-}
-
-.denorm-scenario {
-  margin-bottom: 14px;
-}
-
-.denorm-scenario h5 {
-  margin: 0 0 12px 0;
-  font-size: 13px;
-}
-
-.denorm-comparison {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 12px;
-  align-items: center;
-}
-
-@media (min-width: 768px) {
-  .denorm-comparison {
-    grid-template-columns: 1fr auto 1fr;
-  }
-}
-
-.denorm-side {
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.denorm-side.norm {
-  background: color-mix(in srgb, #ef4444 5%, var(--vp-c-bg));
-}
-
-.denorm-side.denorm {
-  background: color-mix(in srgb, #22c55e 5%, var(--vp-c-bg));
-}
-
-.denorm-title {
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.denorm-tables {
-  margin-bottom: 10px;
-}
-
-.denorm-query {
-  margin-bottom: 10px;
-}
-
-.query-label {
-  font-size: 11px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.denorm-result {
-  font-size: 11px;
-}
-
-.result-label {
-  font-weight: 600;
-}
-
-.result-bad {
-  color: #ef4444;
-}
-
-.result-good {
-  color: #22c55e;
-}
-
-.denorm-arrow {
-  font-size: 20px;
-  color: var(--vp-c-text-3);
-}
-
-.denorm-tradeoff {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-}
-
-.tradeoff-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-}
-
-.tradeoff-icon {
-  font-size: 14px;
-}
-
-/* E-commerce Diagram */
-.ecommerce-diagram {
-  background: var(--vp-c-bg);
-  padding: 14px;
-  border-radius: 8px;
-  margin-bottom: 14px;
-}
-
-.ecosystem {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-  margin-bottom: 14px;
-}
-
-@media (min-width: 768px) {
-  .ecosystem {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.eco-module {
-  padding: 12px;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-}
-
-.module-title {
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: var(--vp-c-brand);
-}
-
-.module-tables {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.mini-table {
-  padding: 6px 10px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  font-size: 11px;
-  font-family: 'Menlo', monospace;
-}
-
-.relationships {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.rel-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 4px;
-  font-size: 11px;
-}
-
-.rel-from,
-.rel-to {
-  font-family: 'Menlo', monospace;
-  color: var(--vp-c-brand);
-}
-
-.rel-type {
-  font-weight: 600;
-  color: var(--vp-c-text-3);
-}
-
-.design-principles {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.principle-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 12px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-}
-
-.principle-icon {
-  font-size: 18px;
-}
-
-.principle-text {
-  flex: 1;
-}
-
-.principle-text strong {
-  display: block;
-  font-size: 12px;
-  margin-bottom: 2px;
-}
-
-.principle-desc {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-
-/* Antipatterns */
-.antipatterns-list {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.anti-item {
-  background: var(--vp-c-bg);
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.anti-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-
-.anti-icon {
-  font-size: 18px;
-}
-
-.anti-title {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.anti-problem,
-.anti-solution {
-  margin-bottom: 8px;
-}
-
-.anti-label {
-  font-size: 11px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.anti-code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 10px;
-  border-radius: 6px;
-  font-family: 'Menlo', monospace;
-  font-size: 10px;
-  line-height: 1.4;
-  overflow-x: auto;
-  margin: 0;
-}
-
-.anti-impact {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-}
-
-.impact-icon {
-  font-size: 14px;
-}
-
-.code-sm {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 10px;
-  border-radius: 6px;
-  font-family: 'Menlo', monospace;
-  font-size: 10px;
-  line-height: 1.5;
-  overflow-x: auto;
-  margin: 0;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/data/DataTrackingDemo.vue b/docs/.vitepress/theme/components/appendix/data/DataTrackingDemo.vue
new file mode 100644
index 0000000..30d4bf3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/data/DataTrackingDemo.vue
@@ -0,0 +1,490 @@
+<template>
+  <div class="demo data-tracking-demo">
+    <div class="header">
+      <span class="title">数据埋点与采集演示</span>
+    </div>
+
+    <!-- Overview Diagram -->
+    <div v-if="activeTab === 'overview'" class="content">
+      <div class="overview-container">
+        <div class="app-screen">
+          <div class="app-header">电商 App</div>
+          <div class="app-body">
+            <div class="product-card">
+              <div class="product-img"></div>
+              <div class="product-info">新款手机</div>
+              <div class="product-btn">点击购买</div>
+            </div>
+            <!-- Animated click cursor and ripple -->
+            <div class="animation-cursor"></div>
+            <div class="animation-ripple"></div>
+          </div>
+        </div>
+
+        <div class="data-flow">
+          <div class="flow-line"></div>
+          <div class="data-packet">
+            <span class="bracket">{</span>
+            <div class="packet-lines">
+              <div class="pline">e: "click_buy"</div>
+              <div class="pline">u: "user123"</div>
+            </div>
+            <span class="bracket">}</span>
+          </div>
+        </div>
+
+        <div class="server-db">
+          <div class="server-header">后端分析系统</div>
+          <div class="server-body">
+            <div class="db-row">user123 | click_buy | 10:05</div>
+            <div class="db-row skeleton"></div>
+            <div class="db-row skeleton"></div>
+          </div>
+        </div>
+      </div>
+      <p class="desc">用户每一次关键操作都在底层触发了一个埋点事件，飞掠网络被永远记录在案。</p>
+    </div>
+
+    <!-- Methods Compare -->
+    <div v-if="activeTab === 'methods'" class="content">
+      <div class="methods-compare">
+        <div class="method-card">
+          <div class="method-title">代码埋点 (Code)</div>
+          <div class="method-body">
+            <div class="code-block">tracker.track('buy', { price: 299 })</div>
+            <div class="method-pro">极度精准、深入业务字段</div>
+            <div class="method-con">需要开发排期，成本高</div>
+          </div>
+        </div>
+        <div class="method-card">
+          <div class="method-title">可视化埋点 (Visual)</div>
+          <div class="method-body">
+            <div class="visual-tool">
+              <div class="v-box selected"></div>
+              <div class="v-box"></div>
+            </div>
+            <div class="method-pro">产品经理可自行圈选</div>
+            <div class="method-con">只能抓取表层点击，无法获取深层属性</div>
+          </div>
+        </div>
+        <div class="method-card">
+          <div class="method-title">全埋点 (Auto)</div>
+          <div class="method-body">
+            <div class="auto-tool">
+              <div class="noise-line"></div>
+              <div class="noise-line"></div>
+              <div class="noise-line"></div>
+            </div>
+            <div class="method-pro">无死角全量捕捉</div>
+            <div class="method-con">数据如同雪花般庞大，无用噪音极多</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Event Model -->
+    <div v-if="activeTab === 'model'" class="content">
+      <div class="model-container">
+        <div class="json-code">
+{
+  <span class="key">"event_name"</span>: <span class="string">"add_to_cart"</span>, <span class="comment">// 发生了什么 (What)</span>
+  <span class="key">"timestamp"</span>: <span class="number">1723456789000</span>, <span class="comment">// 什么时候 (When)</span>
+  <span class="key">"user_id"</span>: <span class="string">"u_98765"</span>, <span class="comment">// 是谁 (Who)</span>
+  
+  <span class="key">"common_props"</span>: { <span class="comment">// 在哪里/环境 (Where & How)</span>
+    <span class="key">"device"</span>: <span class="string">"iPhone 15Pro"</span>,
+    <span class="key">"network"</span>: <span class="string">"5G"</span>,
+    <span class="key">"os"</span>: <span class="string">"iOS 17"</span>
+  },
+  
+  <span class="key">"custom_props"</span>: { <span class="comment">// 业务详情 (Details)</span>
+    <span class="key">"product_id"</span>: <span class="string">"p_001"</span>,
+    <span class="key">"price"</span>: <span class="number">7999.00</span>
+  }
+}
+        </div>
+      </div>
+      <p class="desc">每一个标准事件都必须回答 4W1H：Who, What, When, Where, How。</p>
+    </div>
+
+    <!-- Data Pipeline -->
+    <div v-if="activeTab === 'pipeline'" class="content">
+       <div class="pipeline-flow">
+          <div class="pipe-node">App 客户端</div>
+          <div class="pipe-arrow">本地缓存<br>批量上报</div>
+          <div class="pipe-node server">接入网关</div>
+          <div class="pipe-arrow">消息队列</div>
+          <div class="pipe-node etl">清洗 (ETL)</div>
+          <div class="pipe-arrow">入库</div>
+          <div class="pipe-node db">数据仓库</div>
+       </div>
+       <p class="desc">数据并非立刻入库，为了抵御高并发和弱网环境，它必须经历缓存、打包、列队和清洗的漫长流水线。</p>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  tab: {
+    type: String,
+    default: 'overview'
+  }
+})
+
+const activeTab = ref(props.tab)
+</script>
+
+<style scoped>
+.demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.content {
+  padding: 24px;
+  background: #f8fafc;
+}
+
+.desc {
+  margin-top: 16px;
+  font-size: 13px;
+  color: #64748b;
+  text-align: center;
+}
+
+/* Overview Styles & Animations */
+.overview-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.app-screen {
+  width: 140px;
+  height: 220px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  border: 4px solid #333;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-header {
+  background: #3b82f6;
+  color: white;
+  text-align: center;
+  font-size: 10px;
+  padding: 8px 0;
+}
+
+.app-body {
+  padding: 10px;
+}
+
+.product-card {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  padding: 8px;
+  text-align: center;
+}
+
+.product-img {
+  height: 60px;
+  background: #e2e8f0;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.product-info {
+  font-size: 10px;
+  margin-bottom: 8px;
+}
+
+.product-btn {
+  background: #ef4444;
+  color: white;
+  font-size: 10px;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+@keyframes cursor-move {
+  0% { transform: translate(60px, 180px); opacity: 0; }
+  20% { opacity: 1; }
+  40% { transform: translate(60px, 120px); }
+  50% { transform: translate(60px, 120px) scale(0.9); }
+  60% { transform: translate(60px, 120px); }
+  80% { opacity: 1; }
+  100% { transform: translate(60px, 180px); opacity: 0; }
+}
+
+@keyframes ripple-effect {
+  0% { transform: scale(0.5); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
+@keyframes packet-fly {
+  0% { left: 0; opacity: 0; }
+  10% { opacity: 1; left: 0;}
+  90% { left: 100%; opacity: 1; }
+  100% { left: 100%; opacity: 0; }
+}
+
+.animation-cursor {
+  position: absolute;
+  top: 0; left: 0;
+  width: 12px; height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  animation: cursor-move 3s infinite;
+}
+
+.animation-ripple {
+  position: absolute;
+  top: 120px; left: 60px;
+  width: 20px; height: 20px;
+  border: 2px solid #ef4444;
+  border-radius: 50%;
+  opacity: 0;
+  animation: ripple-effect 3s infinite;
+  animation-delay: 1.5s;
+}
+
+.data-flow {
+  flex: 1;
+  height: 60px;
+  position: relative;
+  margin: 0 20px;
+}
+
+.flow-line {
+  position: absolute;
+  top: 50%;
+  left: 0; right: 0;
+  height: 2px;
+  background: dashed 2px #cbd5e1;
+}
+
+.data-packet {
+  position: absolute;
+  top: 0;
+  transform: translateY(-5px);
+  display: flex;
+  align-items: center;
+  background: #e0f2fe;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 10px;
+  color: #0369a1;
+  animation: packet-fly 3s infinite;
+  animation-delay: 1.5s;
+}
+
+.server-db {
+  width: 160px;
+  background: #1e293b;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.server-header {
+  background: #334155;
+  color: white;
+  text-align: center;
+  font-size: 12px;
+  padding: 8px 0;
+}
+
+.server-body {
+  padding: 12px;
+}
+
+.db-row {
+  background: #475569;
+  color: #94a3b8;
+  padding: 4px;
+  margin-bottom: 6px;
+  font-size: 8px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.db-row.skeleton {
+  height: 14px;
+  background: #334155;
+}
+
+/* Methods Compare */
+.methods-compare {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.method-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.method-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+  color: #1e293b;
+  text-align: center;
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 8px;
+}
+
+.code-block {
+  background: #1e293b;
+  color: #cbd5e1;
+  padding: 8px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 10px;
+  margin-bottom: 12px;
+}
+
+.visual-tool {
+  background: #f1f5f9;
+  height: 40px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px;
+}
+
+.v-box {
+  width: 20px; height: 20px;
+  background: #cbd5e1;
+  border-radius: 2px;
+}
+
+.v-box.selected {
+  border: 2px dashed #ef4444;
+  background: #fee2e2;
+}
+
+.auto-tool {
+  background: #f1f5f9;
+  height: 40px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.noise-line {
+  height: 4px;
+  background: #cbd5e1;
+  width: 100%;
+}
+
+.method-pro, .method-con {
+  font-size: 11px;
+  margin-bottom: 4px;
+}
+
+.method-pro {
+  color: #16a34a;
+}
+.method-pro::before { content: "优势："; font-weight: bold; }
+.method-con {
+  color: #dc2626;
+}
+.method-con::before { content: "劣势："; font-weight: bold; }
+
+/* JSON Model */
+.model-container {
+  background: #1e293b;
+  border-radius: 8px;
+  padding: 24px;
+  overflow-x: auto;
+}
+
+.json-code {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+  color: #cbd5e1;
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.key { color: #38bdf8; }
+.string { color: #a3e635; }
+.number { color: #f472b6; }
+.comment { color: #64748b; font-style: italic; }
+
+/* Pipeline */
+.pipeline-flow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  overflow-x: auto;
+}
+
+.pipe-node {
+  padding: 12px 16px;
+  background: #e0f2fe;
+  color: #0369a1;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid #bae6fd;
+  text-align: center;
+}
+
+.pipe-node.server { background: #fef08a; color: #854d0e; border-color: #fde047; }
+.pipe-node.etl { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
+.pipe-node.db { background: #bbf7d0; color: #166534; border-color: #86efac; }
+
+.pipe-arrow {
+  position: relative;
+  font-size: 10px;
+  color: #64748b;
+  text-align: center;
+}
+
+.pipe-arrow::after {
+  content: "→";
+  display: block;
+  font-size: 16px;
+  color: #94a3b8;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/AttentionDecompositionDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/AttentionDecompositionDemo.vue
new file mode 100644
index 0000000..ef6a911
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/AttentionDecompositionDemo.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="demo-card">
+    <div class="decomp-title">注意力机制的层层拆解</div>
+    
+    <!-- 第一层：Multi-Head Attention -->
+    <div class="level-section">
+      <div class="level-label">层级 1：Multi-Head Attention</div>
+      <div class="level-content">
+        <div class="multi-head-box">
+          <div class="head-row">
+            <div v-for="i in 8" :key="i" class="head-item">Head {{ i }}</div>
+          </div>
+          <div class="arrow-down">↓ 拆解</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 第二层：Single Head -->
+    <div class="level-section">
+      <div class="level-label">层级 2：单个 Attention Head</div>
+      <div class="level-content">
+        <div class="single-head-box">
+          <div class="step-flow">
+            <div class="step">输入 X</div>
+            <div class="arrow">→</div>
+            <div class="step">线性变换</div>
+            <div class="arrow">→</div>
+            <div class="step">Q, K, V</div>
+            <div class="arrow">→</div>
+            <div class="step">Scaled Dot-Product</div>
+            <div class="arrow">→</div>
+            <div class="step">输出</div>
+          </div>
+          <div class="arrow-down">↓ 拆解</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 第三层：Scaled Dot-Product Attention -->
+    <div class="level-section">
+      <div class="level-label">层级 3：Scaled Dot-Product Attention（核心）</div>
+      <div class="level-content">
+        <div class="dot-product-box">
+          <div class="formula-steps">
+            <div class="formula-step">
+              <div class="step-num">1</div>
+              <div class="step-content">
+                <div class="step-name">计算相似度</div>
+                <div class="step-formula">Score = Q · K<sup>T</sup></div>
+              </div>
+            </div>
+            <div class="formula-step">
+              <div class="step-num">2</div>
+              <div class="step-content">
+                <div class="step-name">缩放</div>
+                <div class="step-formula">Score / √d<sub>k</sub></div>
+              </div>
+            </div>
+            <div class="formula-step">
+              <div class="step-num">3</div>
+              <div class="step-content">
+                <div class="step-name">归一化</div>
+                <div class="step-formula">Attention Weights = Softmax(Score)</div>
+              </div>
+            </div>
+            <div class="formula-step">
+              <div class="step-num">4</div>
+              <div class="step-content">
+                <div class="step-name">加权求和</div>
+                <div class="step-formula">Output = Weights · V</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 组装说明 -->
+    <div class="assembly-note">
+      <div class="note-title">🔧 组装过程</div>
+      <div class="note-content">
+        <span class="note-item">Scaled Dot-Product</span>
+        <span class="note-arrow">→</span>
+        <span class="note-item">单个 Head</span>
+        <span class="note-arrow">→</span>
+        <span class="note-item">Multi-Head（8个并行）</span>
+        <span class="note-arrow">→</span>
+        <span class="note-item">Concat + Linear</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.decomp-title { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); text-align: center; margin-bottom: 1rem; }
+.level-section { margin-bottom: 0.8rem; }
+.level-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); background: var(--vp-c-brand-soft); padding: 0.3rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem; display: inline-block; }
+.level-content { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
+.multi-head-box { text-align: center; }
+.head-row { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
+.head-item { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-2); }
+.arrow-down { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; margin-top: 0.3rem; }
+.single-head-box { text-align: center; }
+.step-flow { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
+.step { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-1); font-weight: 600; }
+.arrow { font-size: 0.75rem; color: var(--vp-c-text-3); }
+.dot-product-box { }
+.formula-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
+@media (max-width: 560px) { .formula-steps { grid-template-columns: 1fr; } }
+.formula-step { display: flex; gap: 0.4rem; background: var(--vp-c-bg-alt); padding: 0.5rem; border-radius: 4px; }
+.step-num { width: 24px; height: 24px; background: var(--vp-c-brand); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; flex-shrink: 0; }
+.step-content { flex: 1; }
+.step-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
+.step-formula { font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); }
+.assembly-note { background: var(--vp-c-bg); border: 2px dashed var(--vp-c-brand); border-radius: 6px; padding: 0.8rem; margin-top: 1rem; }
+.note-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; text-align: center; }
+.note-content { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
+.note-item { font-size: 0.7rem; background: var(--vp-c-brand-soft); color: var(--vp-c-brand); padding: 0.25rem 0.5rem; border-radius: 3px; font-weight: 600; }
+.note-arrow { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/MultiHeadAttentionDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/MultiHeadAttentionDemo.vue
new file mode 100644
index 0000000..99eada2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/MultiHeadAttentionDemo.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="demo-card">
+    <div class="heads-grid">
+      <div v-for="head in heads" :key="head.id" class="head-card">
+        <div class="head-name">{{ head.name }}</div>
+        <div class="head-desc">{{ head.desc }}</div>
+      </div>
+    </div>
+    <div class="summary">8 个头从不同角度理解语义，最后拼接融合</div>
+  </div>
+</template>
+
+<script setup>
+const heads = [
+  { id: 1, name: '语法头', desc: '主谓宾关系' },
+  { id: 2, name: '语义头', desc: '词义关联' },
+  { id: 3, name: '位置头', desc: '距离关系' },
+  { id: 4, name: '指代头', desc: '代词消解' },
+  { id: 5, name: '情感头', desc: '情绪倾向' },
+  { id: 6, name: '实体头', desc: '命名实体' },
+  { id: 7, name: '修饰头', desc: '定状补' },
+  { id: 8, name: '全局头', desc: '整体语境' },
+]
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.heads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
+@media (max-width: 720px) { .heads-grid { grid-template-columns: repeat(2, 1fr); } }
+.head-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; text-align: center; }
+.head-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
+.head-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
+.summary { font-size: 0.75rem; color: var(--vp-c-text-2); text-align: center; font-style: italic; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/PositionalEncodingDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/PositionalEncodingDemo.vue
new file mode 100644
index 0000000..0a3119c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/PositionalEncodingDemo.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="demo-card">
+    <div class="pe-content">
+      <div class="problem">
+        <div class="title">问题：词序很重要</div>
+        <div class="examples">
+          <span class="ex">我爱你</span>
+          <span class="vs">≠</span>
+          <span class="ex">你爱我</span>
+        </div>
+      </div>
+      <div class="solution">
+        <div class="title">解决：位置编码</div>
+        <div class="formula">Token Embedding + Positional Encoding</div>
+        <div class="methods">
+          <div class="method">正弦余弦（Transformer 原始）</div>
+          <div class="method">可学习（BERT、GPT）</div>
+          <div class="method">旋转编码 RoPE（LLaMA）</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.pe-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
+@media (max-width: 560px) { .pe-content { grid-template-columns: 1fr; } }
+.problem, .solution { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
+.title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; }
+.examples { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
+.ex { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); }
+.vs { font-size: 1rem; color: var(--vp-c-brand); }
+.formula { background: var(--vp-c-brand-soft); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; font-size: 0.75rem; color: var(--vp-c-brand); text-align: center; margin-bottom: 0.5rem; font-family: monospace; }
+.methods { display: flex; flex-direction: column; gap: 0.25rem; }
+.method { font-size: 0.7rem; color: var(--vp-c-text-2); background: var(--vp-c-bg-alt); padding: 0.3rem 0.5rem; border-radius: 3px; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/QKVMechanismDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/QKVMechanismDemo.vue
new file mode 100644
index 0000000..6bb6575
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/QKVMechanismDemo.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="demo-card">
+    <div class="qkv-grid">
+      <div class="qkv-item query">
+        <div class="icon">🔍</div>
+        <div class="name">Query</div>
+        <div class="desc">我想找什么</div>
+      </div>
+      <div class="qkv-item key">
+        <div class="icon">🔑</div>
+        <div class="name">Key</div>
+        <div class="desc">我是什么</div>
+      </div>
+      <div class="qkv-item value">
+        <div class="icon">💎</div>
+        <div class="name">Value</div>
+        <div class="desc">我的内容</div>
+      </div>
+    </div>
+    <div class="formula">
+      Attention(Q, K, V) = softmax(QK<sup>T</sup> / √d<sub>k</sub>) V
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.qkv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.8rem; }
+@media (max-width: 560px) { .qkv-grid { grid-template-columns: 1fr; } }
+.qkv-item { background: var(--vp-c-bg); border: 2px solid; border-radius: 6px; padding: 0.7rem; text-align: center; }
+.qkv-item.query { border-color: #3b82f6; }
+.qkv-item.key { border-color: #059669; }
+.qkv-item.value { border-color: #7c3aed; }
+.icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
+.name { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
+.desc { font-size: 0.7rem; color: var(--vp-c-text-2); }
+.formula { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.6rem; text-align: center; font-size: 0.85rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); font-weight: bold; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/RnnVsTransformerDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/RnnVsTransformerDemo.vue
new file mode 100644
index 0000000..a7dbac0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/RnnVsTransformerDemo.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="demo-card">
+    <div class="comparison-grid">
+      <div class="model-col">
+        <div class="model-name">RNN / LSTM</div>
+        <div class="model-desc">顺序处理：词1 → 词2 → 词3</div>
+        <div class="issues">
+          <div class="issue">❌ 长距离依赖衰减</div>
+          <div class="issue">❌ 无法并行训练</div>
+        </div>
+      </div>
+      <div class="model-col highlight">
+        <div class="model-name">Transformer</div>
+        <div class="model-desc">并行处理：所有词同时计算</div>
+        <div class="benefits">
+          <div class="benefit">✅ 全局注意力</div>
+          <div class="benefit">✅ 高效并行</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
+@media (max-width: 560px) { .comparison-grid { grid-template-columns: 1fr; } }
+.model-col { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
+.model-col.highlight { border-color: var(--vp-c-brand); background: linear-gradient(135deg, var(--vp-c-bg), var(--vp-c-brand-soft)); }
+.model-name { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.4rem; }
+.model-desc { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
+.issues, .benefits { display: flex; flex-direction: column; gap: 0.25rem; }
+.issue, .benefit { font-size: 0.7rem; }
+.issue { color: #dc2626; }
+.benefit { color: #059669; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/SelfAttentionDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/SelfAttentionDemo.vue
new file mode 100644
index 0000000..07f7d9b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/SelfAttentionDemo.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="demo-card">
+    <div class="attention-demo">
+      <div class="demo-title">自注意力示例：「他」关注「小明」</div>
+      <div class="sentence">小明 把 苹果 给了 <span class="focus">他</span> 的 母亲</div>
+      <div class="attention-bar">
+        <div class="bar-item" v-for="item in weights" :key="item.word">
+          <span class="word">{{ item.word }}</span>
+          <div class="bar" :style="{ width: item.w * 100 + '%', background: getColor(item.w) }"></div>
+          <span class="pct">{{ Math.round(item.w * 100) }}%</span>
+        </div>
+      </div>
+      <div class="caption">「他」把 65% 注意力投向「小明」，识别代词指代关系</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const weights = [
+  { word: '小明', w: 0.65 },
+  { word: '把', w: 0.05 },
+  { word: '苹果', w: 0.10 },
+  { word: '给了', w: 0.10 },
+  { word: '他', w: 0.05 },
+  { word: '的', w: 0.03 },
+  { word: '母亲', w: 0.02 },
+]
+
+const getColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : '#059669'
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.attention-demo { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
+.demo-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
+.sentence { font-size: 0.9rem; color: var(--vp-c-text-1); margin-bottom: 0.6rem; text-align: center; }
+.sentence .focus { color: var(--vp-c-brand); font-weight: bold; background: var(--vp-c-brand-soft); padding: 0.1rem 0.3rem; border-radius: 3px; }
+.attention-bar { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
+.bar-item { display: flex; align-items: center; gap: 0.3rem; }
+.word { width: 35px; text-align: right; font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-2); }
+.bar { height: 10px; border-radius: 5px; min-width: 2px; }
+.pct { font-size: 0.65rem; color: var(--vp-c-text-3); width: 30px; }
+.caption { font-size: 0.7rem; color: var(--vp-c-text-3); text-align: center; font-style: italic; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerArchitectureDemo.vue
new file mode 100644
index 0000000..e6dffc5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerArchitectureDemo.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="demo-card">
+    <div class="arch-layout">
+      <!-- Encoder 侧 -->
+      <div class="side-col">
+        <div class="side-header encoder-header">Encoder（编码器）</div>
+        <div class="layer-block">
+          <div class="block-label">× N 层</div>
+          <div class="component-box">
+            <div class="comp-name">Multi-Head Self-Attention</div>
+            <div class="comp-desc">捕获输入序列内部依赖</div>
+          </div>
+          <div class="norm-box">Add & Norm</div>
+          <div class="component-box">
+            <div class="comp-name">Feed Forward Network</div>
+            <div class="comp-desc">位置独立的非线性变换</div>
+          </div>
+          <div class="norm-box">Add & Norm</div>
+        </div>
+        <div class="input-box">
+          <div class="input-label">输入</div>
+          <div class="input-desc">Token Embedding + Positional Encoding</div>
+        </div>
+      </div>
+
+      <!-- Decoder 侧 -->
+      <div class="side-col">
+        <div class="side-header decoder-header">Decoder（解码器）</div>
+        <div class="output-box">
+          <div class="output-label">输出</div>
+          <div class="output-desc">Linear + Softmax → 概率分布</div>
+        </div>
+        <div class="layer-block">
+          <div class="block-label">× N 层</div>
+          <div class="component-box">
+            <div class="comp-name">Masked Self-Attention</div>
+            <div class="comp-desc">只看当前位置之前的词</div>
+          </div>
+          <div class="norm-box">Add & Norm</div>
+          <div class="component-box cross">
+            <div class="comp-name">Cross-Attention</div>
+            <div class="comp-desc">关注 Encoder 的输出</div>
+          </div>
+          <div class="norm-box">Add & Norm</div>
+          <div class="component-box">
+            <div class="comp-name">Feed Forward Network</div>
+            <div class="comp-desc">位置独立的非线性变换</div>
+          </div>
+          <div class="norm-box">Add & Norm</div>
+        </div>
+        <div class="input-box">
+          <div class="input-label">输出（移位）</div>
+          <div class="input-desc">Token Embedding + Positional Encoding</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.arch-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+@media (max-width: 720px) { .arch-layout { grid-template-columns: 1fr; } }
+.side-col { display: flex; flex-direction: column; gap: 0.6rem; }
+.side-header { font-size: 0.85rem; font-weight: bold; text-align: center; padding: 0.5rem; border-radius: 6px; color: white; }
+.encoder-header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+.decoder-header { background: linear-gradient(135deg, #7c3aed, #6366f1); }
+.layer-block { background: var(--vp-c-bg); border: 2px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; position: relative; }
+.block-label { position: absolute; top: 0.3rem; right: 0.3rem; font-size: 0.65rem; color: var(--vp-c-text-3); background: var(--vp-c-bg-soft); padding: 0.15rem 0.4rem; border-radius: 3px; font-weight: bold; }
+.component-box { background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; margin-bottom: 0.4rem; }
+.component-box.cross { border-color: #d97706; background: linear-gradient(135deg, var(--vp-c-bg-alt), #fef3c7); }
+.comp-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
+.comp-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
+.norm-box { font-size: 0.68rem; color: var(--vp-c-text-3); text-align: center; padding: 0.25rem; background: var(--vp-c-bg-soft); border-radius: 3px; margin-bottom: 0.4rem; }
+.input-box, .output-box { background: var(--vp-c-brand-soft); border: 1px solid var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; text-align: center; }
+.input-label, .output-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); margin-bottom: 0.2rem; }
+.input-desc, .output-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerQuickStartDemo.vue
new file mode 100644
index 0000000..4ed0b54
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/transformer-attention/TransformerQuickStartDemo.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="demo-card">
+    <div class="quick-start-grid">
+      <div class="qs-item" v-for="item in items" :key="item.icon">
+        <div class="qs-icon">{{ item.icon }}</div>
+        <div class="qs-title">{{ item.title }}</div>
+        <div class="qs-desc">{{ item.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const items = [
+  { icon: '🔄', title: 'RNN 的困境', desc: '顺序处理，长距离依赖衰减' },
+  { icon: '⚡', title: 'Transformer 突破', desc: '并行计算，全局注意力' },
+  { icon: '🎯', title: '注意力机制', desc: '动态关注重要信息' },
+  { icon: '🚀', title: '大模型基石', desc: 'GPT、BERT 的核心架构' },
+]
+</script>
+
+<style scoped>
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.quick-start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
+@media (max-width: 720px) { .quick-start-grid { grid-template-columns: repeat(2, 1fr); } }
+.qs-item { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 1rem; text-align: center; }
+.qs-icon { font-size: 2rem; margin-bottom: 0.5rem; }
+.qs-title { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.3rem; }
+.qs-desc { font-size: 0.72rem; color: var(--vp-c-text-2); line-height: 1.4; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
index 24f7392..8d6f321 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
@@ -1,716 +1,232 @@
 <template>
-  <div class="browser-rendering-demo">
-    <div class="stepper">
-      <button
-        v-for="(step, index) in steps"
-        :key="index"
-        class="step-btn"
-        :class="{
-          active: currentStep === index,
-          completed: currentStep > index
-        }"
-        @click="currentStep = index"
-      >
-        <span class="step-num">{{ index + 1 }}</span>
-        <span class="step-label">{{ step.label }}</span>
-      </button>
-    </div>
-
-    <div class="stage-container">
-      <div class="stage-info">
-        <h3>{{ steps[currentStep].title }}</h3>
-        <p>{{ steps[currentStep].desc }}</p>
+  <div class="browser-rendering-demo custom-demo-base">
+    <div class="demo-label">浏览器渲染 ── 干瘪文字拆解组装变成精美画面</div>
+    <div class="demo-panel">
+      
+      <div class="stepper">
+        <button v-for="(step, index) in steps" :key="index"
+          class="step-btn"
+          :class="{ active: currentStep === index, completed: currentStep > index }"
+          @click="currentStep = index"
+        >
+          <div class="step-icon">{{ step.icon }}</div>
+          <div class="step-name">{{ step.name }}</div>
+        </button>
       </div>
 
-      <div class="visualization-window">
-        <!-- HTML/CSS Source -->
-        <div class="source-view">
-          <div class="window-title">
-            积木说明书 (HTML/CSS)
-          </div>
-          <div class="code-content">
-            <!-- HTML Highlighted always after Step 0 -->
-            <div
-              class="line"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'html'
-              }"
-              @mouseenter="hoveredPart = 'html'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;!DOCTYPE html&gt;
-            </div>
-            <div
-              class="line"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'html'
-              }"
-              @mouseenter="hoveredPart = 'html'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;html&gt;
-            </div>
-            <div
-              class="line indent"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'body'
-              }"
-              @mouseenter="hoveredPart = 'body'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;body&gt;
-            </div>
-            <div
-              class="line indent-2"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'card'
-              }"
-              @mouseenter="hoveredPart = 'card'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;div class="player"&gt;
-            </div>
-            <div
-              class="line indent-3"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'img'
-              }"
-              @mouseenter="hoveredPart = 'img'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;img class="cover" src="cat.jpg" /&gt;
-            </div>
-            <div
-              class="line indent-3"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'title'
-              }"
-              @mouseenter="hoveredPart = 'title'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;h2 class="title"&gt;搞笑猫咪合集&lt;/h2&gt;
-            </div>
-            <div
-              class="line indent-3"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'btn'
-              }"
-              @mouseenter="hoveredPart = 'btn'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;button class="btn"&gt;▶️ 播放&lt;/button&gt;
-            </div>
-            <div
-              class="line indent-2"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'card'
-              }"
-              @mouseenter="hoveredPart = 'card'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;/div&gt;
-            </div>
-            <div
-              class="line indent"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'body'
-              }"
-              @mouseenter="hoveredPart = 'body'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;/body&gt;
-            </div>
-            <div
-              class="line"
-              :class="{
-                active: currentStep >= 0,
-                hovered: hoveredPart === 'html'
-              }"
-              @mouseenter="hoveredPart = 'html'"
-              @mouseleave="hoveredPart = null"
-            >
-              &lt;/html&gt;
-            </div>
-
-            <div class="spacer" />
-
-            <!-- CSS Highlighted precisely based on step usage -->
-            <!-- Layout properties -->
-            <div
-              class="line"
-              :class="{
-                active: currentStep === 2,
-                hovered: hoveredPart === 'card'
-              }"
-              @mouseenter="hoveredPart = 'card'"
-              @mouseleave="hoveredPart = null"
-            >
-              .player { margin: auto; padding: 20px; }
-            </div>
-            <div
-              class="line"
-              :class="{
-                active: currentStep === 2,
-                hovered: hoveredPart === 'img'
-              }"
-              @mouseenter="hoveredPart = 'img'"
-              @mouseleave="hoveredPart = null"
-            >
-              .cover { width: 100%; height: 200px; }
-            </div>
-            <!-- Style properties -->
-            <div
-              class="line"
-              :class="{
-                active: currentStep === 1 || currentStep === 3,
-                hovered: hoveredPart === 'title'
-              }"
-              @mouseenter="hoveredPart = 'title'"
-              @mouseleave="hoveredPart = null"
-            >
-              .title { color: #fb7299; /* B站主题色 */ }
-            </div>
-            <div
-              class="line"
-              :class="{
-                active: currentStep === 1 || currentStep === 3,
-                hovered: hoveredPart === 'btn'
-              }"
-              @mouseenter="hoveredPart = 'btn'"
-              @mouseleave="hoveredPart = null"
-            >
-              .btn { background: #00aeec; color: white; }
-            </div>
-          </div>
+      <div class="stage-window">
+        <!-- 侧边说明 -->
+        <div class="explanations">
+          <div class="exp-title">{{ steps[currentStep].title }}</div>
+          <div class="exp-desc">{{ steps[currentStep].desc }}</div>
         </div>
 
-        <div class="transform-arrow">
-          →
-        </div>
-
-        <!-- Render Result -->
-        <div class="result-view">
-          <div class="window-title">
-            {{ steps[currentStep].resultTitle }}
+        <!-- 当前结果呈现区域 -->
+        <div class="render-canvas">
+          <!-- Step 0: 代码 -->
+          <div v-if="currentStep === 0" class="canvas-item code-raw fade-in">
+            <pre><code><b>&lt;html&gt;</b>
+  <b>&lt;style&gt;</b>
+   .title { color: #f00; }
+  <b>&lt;/style&gt;</b>
+  <b>&lt;body&gt;</b>
+   <b>&lt;h1 class="title"&gt;</b>
+     Google Search
+   <b>&lt;/h1&gt;</b>
+   <b>&lt;input /&gt;</b>
+  <b>&lt;/body&gt;</b>
+<b>&lt;/html&gt;</b></code></pre>
           </div>
 
-          <div class="render-canvas">
-            <!-- Step 1: DOM (Skeleton) -->
-            <transition-group name="block">
-              <div
-                v-if="currentStep >= 0"
-                key="html"
-                class="block-box root"
-                :class="{ hovered: hoveredPart === 'html' }"
-                @mouseenter.stop="hoveredPart = 'html'"
-                @mouseleave="hoveredPart = null"
-              >
-                <span class="block-label">html</span>
-                <div
-                  class="block-box body"
-                  :class="{ hovered: hoveredPart === 'body' }"
-                  @mouseenter.stop="hoveredPart = 'body'"
-                  @mouseleave="hoveredPart = null"
-                >
-                  <span class="block-label">body</span>
-
-                  <!-- Product Card -->
-                  <div
-                    class="block-box card"
-                    :class="{
-                      layout: currentStep >= 2,
-                      hovered: hoveredPart === 'card'
-                    }"
-                    @mouseenter.stop="hoveredPart = 'card'"
-                    @mouseleave="hoveredPart = null"
-                  >
-                    <span class="block-label">div.player</span>
-
-                    <!-- Image -->
-                    <div
-                      class="block-box img"
-                      :class="{
-                        layout: currentStep >= 2,
-                        hovered: hoveredPart === 'img'
-                      }"
-                      @mouseenter.stop="hoveredPart = 'img'"
-                      @mouseleave="hoveredPart = null"
-                    >
-                      <span class="block-label">img.cover</span>
-                      <span
-                        v-if="currentStep >= 3"
-                        class="content-img"
-                      >🐈</span>
-                    </div>
-
-                    <!-- Title -->
-                    <div
-                      class="block-box title"
-                      :class="{
-                        styled: currentStep >= 1,
-                        layout: currentStep >= 2,
-                        hovered: hoveredPart === 'title'
-                      }"
-                      @mouseenter.stop="hoveredPart = 'title'"
-                      @mouseleave="hoveredPart = null"
-                    >
-                      <span class="block-label">h2.title</span>
-                      <span
-                        v-if="currentStep >= 3"
-                        class="content"
-                      >搞笑猫咪合集</span>
-                    </div>
-
-                    <!-- Button -->
-                    <div
-                      class="block-box btn"
-                      :class="{
-                        styled: currentStep >= 1,
-                        layout: currentStep >= 2,
-                        hovered: hoveredPart === 'btn'
-                      }"
-                      @mouseenter.stop="hoveredPart = 'btn'"
-                      @mouseleave="hoveredPart = null"
-                    >
-                      <span class="block-label">button.btn</span>
-                      <span
-                        v-if="currentStep >= 3"
-                        class="content-btn"
-                      >▶️ 播放</span>
-                    </div>
+          <!-- Step 1: DOM树 -->
+          <div v-if="currentStep === 1" class="canvas-item dom-tree fade-in">
+            <div class="tree-node">html
+              <div class="tree-children">
+                <div class="tree-node">body
+                  <div class="tree-children">
+                    <div class="tree-node leaf">h1 (Google)</div>
+                    <div class="tree-node leaf">input (搜索框)</div>
                   </div>
                 </div>
               </div>
-            </transition-group>
-
-            <!-- Overlays for different steps -->
-            <div
-              v-if="currentStep === 1"
-              class="overlay-info style-info"
-            >
-              <div class="brush">
-                🖌️ 正在上色 (Style)...
-              </div>
             </div>
+          </div>
 
-            <div
-              v-if="currentStep === 2"
-              class="overlay-info layout-info"
-            >
-              <div class="ruler">
-                📏 正在排版 (Layout)...
-              </div>
-            </div>
+          <!-- Step 2: 结合 CSS -->
+          <div v-if="currentStep === 2" class="canvas-item css-merge fade-in">
+             <div class="merge-box">
+                <div class="box-left">h1 (Google)</div>
+                <div class="box-plus">+</div>
+                <div class="box-right">.title { color: #f00 }</div>
+                <div class="box-arrow">↓</div>
+                <div class="box-result">h1 (红色文字规则)</div>
+             </div>
+          </div>
 
-            <div
-              v-if="currentStep === 3"
-              class="overlay-info paint-info"
-            >
-              <div class="paint">
-                ✨ 绘制完成 (Paint)!
-              </div>
-            </div>
+          <!-- Step 3: Layout -->
+          <div v-if="currentStep === 3" class="canvas-item layout-plan fade-in">
+             <div class="blueprint">
+                <div class="bp-box bp-h1">x:50, y:20<br>w:200, h:40</div>
+                <div class="bp-box bp-input">x:50, y:80<br>w:400, h:30</div>
+             </div>
+          </div>
+
+          <!-- Step 4: Paint -->
+          <div v-if="currentStep === 4" class="canvas-item final-paint fade-in">
+             <div class="browser-fake">
+               <h1 style="color:red; font-family:sans-serif; margin-bottom:20px; font-weight:normal;">Google Search</h1>
+               <div style="width:100%; max-width:400px; height:36px; border-radius:20px; border:1px solid #dfe1e5; padding:0 20px; display:flex; align-items:center;">
+                  🔍 
+               </div>
+             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="demo-status">点击上方各步骤图标，查看每一阶段的工厂作业产出</div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 
-const steps = [
-  {
-    label: 'DOM (搭骨架)',
-    title: '1. 搭建骨架 (DOM 解析)',
-    desc: '浏览器工厂看懂了 HTML 代码，搭建好了页面的“骨架”（比如哪里是包裹盒 div，哪里是按钮 button）。',
-    resultTitle: 'DOM 树结构'
-  },
-  {
-    label: 'Style (看图纸)',
-    title: '2. 匹配样式 (CSS 解析)',
-    desc: '仔细看了眼配色的说明书。比如发现 .title 字体要是粉色的，.btn 背景要是蓝色的（此时只在脑子里确立样式，但不计算尺寸）。',
-    resultTitle: '获取了各种配置规则'
-  },
-  {
-    label: 'Layout (定尺寸)',
-    title: '3. 排版规划 (Layout)',
-    desc: '拿尺子量每个骨架的大小。考虑到用户的屏幕尺寸，精确计算出猫咪的图片要多高、播放按钮要挤到哪个坐标上。',
-    resultTitle: '排版布局盒子'
-  },
-  {
-    label: 'Paint (绘制)',
-    title: '4. 像素上色 (Paint)',
-    desc: '根据前面的几何位置和颜色计划，正式拿起画笔，将一个个像素填到你的屏幕上，一个可以看视频的播放器就诞生了。',
-    resultTitle: '最终画面'
-  }
-]
-
 const currentStep = ref(0)
-const hoveredPart = ref(null)
+const steps = [
+  { icon: '📄', name: '源码', title: '拿到纯文本源代码', desc: '刚传回来的只是一堆干瘪的 HTML, CSS 等代码字符。这只是建造网页的说明书，不是真正的画面。' },
+  { icon: '🦴', name: 'DOM解析', title: '1. 搭骨架 (DOM 解析)', desc: '第一步通读 HTML 标签，构建树状骨架图（DOM 树），了解结构关系，例如"标题框在身体(body)里"。' },
+  { icon: '🎨', name: 'CSS解析', title: '2. 样式附加 (CSS 解析)', desc: '第二步读 CSS，把对应的样式规则（如"标题为红色"）关联并绑定到我们刚才搭建好的特定骨架节点上。' },
+  { icon: '📏', name: 'Layout排版', title: '3. 几何排版 (Layout)', desc: '第三步拿尺子量每个骨架的大小。结合你的屏幕尺寸，精确计算出每个元素所在的绝对坐标 x, y 和明确的长宽高尺寸。' },
+  { icon: '🖼️', name: 'Paint绘制', title: '4. 像素涂色 (Paint)', desc: '最后，有了骨架、颜色规则、和精准坐标尺寸，浏览器控制像素画笔，在一瞬间完成上色和填充！' }
+]
 </script>
 
 <style scoped>
-.browser-rendering-demo {
+.custom-demo-base {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+}
+
+.demo-label {
+  font-size: 0.78rem;
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+  letter-spacing: 0.2px;
+}
+
+.demo-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   background: var(--vp-c-bg);
-  margin: 0.5rem 0;
-  font-family: var(--vp-font-family-mono);
-  overflow: hidden;
+}
+
+.demo-status {
+  margin-top: 0.75rem;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-3);
+  text-align: center;
+  font-weight: bold;
 }
 
 .stepper {
   display: flex;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
+  justify-content: space-between;
+  border-bottom: 2px solid var(--vp-c-divider);
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
 }
 
 .step-btn {
   flex: 1;
-  padding: 0.75rem;
-  border: none;
   background: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
+  border: none;
   cursor: pointer;
-  position: relative;
-  transition: all 0.2s;
-}
-
-.step-btn:hover {
-  background: var(--vp-c-bg-alt);
-}
-
-.step-btn.active {
-  color: var(--vp-c-brand);
-  background: var(--vp-c-bg);
-  font-weight: bold;
-}
-
-.step-btn.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--vp-c-brand);
-}
-
-.step-num {
-  background: var(--vp-c-bg-alt);
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.step-btn.active .step-num,
-.step-btn.completed .step-num {
-  background: var(--vp-c-brand);
-  color: white;
-  border-color: var(--vp-c-brand);
-}
-
-.stage-container {
-  padding: 1.5rem;
-}
-
-.stage-info {
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.stage-info h3 {
-  margin: 0 0 0.5rem 0;
-  color: var(--vp-c-text-1);
-}
-
-.stage-info p {
-  margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
-
-.visualization-window {
-  display: flex;
-  gap: 1rem;
-  align-items: stretch;
-  min-height: 400px;
-}
-
-.source-view,
-.result-view {
-  flex: 1;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg-alt);
   display: flex;
   flex-direction: column;
-}
-
-.window-title {
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--vp-c-divider);
-  font-size: 0.75rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-  background: var(--vp-c-bg-soft);
-  text-align: center;
-}
-
-.code-content {
-  padding: 0.75rem;
-  font-size: 0.8rem;
-  font-family: monospace;
-  
-}
-
-.line {
-  padding: 2px 4px;
-  border-radius: 2px;
-  opacity: 0.3;
-  transition: opacity 0.5s;
-  white-space: nowrap;
-}
-
-.line.active {
-  opacity: 1;
-  background: rgba(59, 130, 246, 0.1);
-  font-weight: bold;
-  color: #2563eb;
-}
-
-.line.indent {
-  padding-left: 1rem;
-}
-.line.indent-2 {
-  padding-left: 2rem;
-}
-.line.indent-3 {
-  padding-left: 3rem;
-}
-.line.mt-2 {
-  margin-top: 1rem;
-}
-
-.transform-arrow {
-  display: flex;
   align-items: center;
-  font-size: 1.5rem;
-  color: var(--vp-c-text-3);
+  gap: 0.4rem;
+  opacity: 0.5;
+  transition: all 0.3s;
 }
 
-.result-view {
-  background: white;
-  position: relative;
+.step-btn.active { opacity: 1; transform: scale(1.1); }
+.step-btn.completed { opacity: 0.8; }
+
+.step-icon { font-size: 1.5rem; }
+.step-name { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); }
+
+.stage-window {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  min-height: 200px;
 }
 
+.explanations {
+  flex: 1;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  border-left: 4px solid var(--vp-c-brand-1, #3b82f6);
+}
+
+.exp-title { font-weight: bold; font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--vp-c-text-1); }
+.exp-desc { font-size: 0.85rem; color: var(--vp-c-text-2); line-height: 1.6; }
+
 .render-canvas {
-  padding: 2rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  
-}
-
-/* Blocks Animation */
-.block-box {
-  border: 1px dashed #9ca3af;
-  background: #f3f4f6;
-  padding: 0.5rem;
-  margin: 0.2rem;
-  border-radius: 2px;
-  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
-  position: relative;
-  min-width: 50px;
-  min-height: 30px;
-  display: flex;
-  flex-direction: column;
-}
-
-.block-box.root {
-  width: 95%;
-  border-color: #e5e7eb;
-  background: #fff;
-}
-.block-box.body {
-  width: 90%;
-  border-color: #d1d5db;
-  background: #f9fafb;
-}
-.block-box.card {
-  width: 80%;
-  border-color: #9ca3af;
-  background: #e5e7eb;
-}
-
-.block-label {
-  font-size: 0.6rem;
-  color: #9ca3af;
-  position: absolute;
-  top: -8px;
-  left: 4px;
-  background: white;
-  padding: 0 2px;
-}
-
-/* Step 2: Style */
-.block-box.title.styled {
-  color: #fb7299;
-  border: 1px solid #fb7299;
-  background: #fdf2f8;
-}
-
-.block-box.btn.styled {
-  background: #00aeec;
-  color: white;
-  border: 1px solid #00aeec;
-}
-
-/* Step 3: Layout */
-.block-box.card.layout {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 15px;
-  background: white;
-  border: 1px solid #ccc;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  flex: 1.2;
+  height: 280px;
+  border: 2px dashed var(--vp-c-divider);
   border-radius: 8px;
-}
-
-.block-box.img.layout {
-  width: 100%;
-  height: 120px;
-  background: #eee;
-  border: none;
-  font-size: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  background: var(--vp-c-bg-alt);
+  overflow: hidden;
 }
 
-.block-box.title.layout {
-  border: none;
-  background: transparent;
-  margin: 0;
-  padding: 0;
-}
+.canvas-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
+.fade-in { animation: fadeIn 0.4s ease-out; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
-.block-box.btn.layout {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  text-align: center;
-  cursor: pointer;
-}
+/* Code state */
+.code-raw pre { background: var(--vp-code-bg); padding: 1rem; border-radius: 6px; font-size: 0.75rem; color: var(--vp-code-color); width: 100%; height: 100%; overflow: auto; margin:0; line-height: 1.5;}
 
-/* Content visibility for Paint step */
-.content,
-.content-img,
-.content-btn {
-  font-size: 1rem;
-  font-weight: bold;
-  animation: fadeIn 0.5s;
-  align-self: center;
-}
+/* DOM Tree state */
+.tree-node { border: 2px solid var(--vp-c-brand-soft); background: var(--vp-c-bg); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: bold; text-align: center; color: var(--vp-c-text-1); }
+.tree-children { display: flex; gap: 1.5rem; margin-top: 2rem; position: relative; justify-content: center; }
+.tree-children::before { content:''; position: absolute; top: -2rem; left: 50%; width: 2px; height: 2rem; background: var(--vp-c-brand-soft); }
+.tree-children .tree-node { position: relative; }
+.tree-children .tree-node::before { content:''; position: absolute; top: -2rem; left: 50%; width: 2px; height: 2rem; background: var(--vp-c-brand-soft); }
+.tree-node.leaf { background: var(--vp-c-brand-soft, #eff6ff); color: var(--vp-c-brand-1, #3b82f6); border-color: var(--vp-c-brand-1); }
 
-.content-img {
-  font-size: 2rem;
-}
-.content-btn {
-  font-size: 0.8rem;
-}
+/* CSS Merge */
+.merge-box { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--vp-font-family-mono); font-size: 0.85rem;}
+.box-left, .box-right { padding: 0.8rem 1.2rem; border-radius: 6px; border: 2px dashed var(--vp-c-text-3); background: var(--vp-c-bg); color: var(--vp-c-text-1); }
+.box-result { padding: 0.8rem 1.2rem; border-radius: 6px; background: var(--vp-c-danger-soft, #fee2e2); color: var(--vp-c-danger-3, #b91c1c); border: 2px solid var(--vp-c-danger-1, #ef4444); font-weight: bold; }
+.box-arrow, .box-plus { font-size: 1.5rem; font-weight: bold; color: var(--vp-c-text-2); }
 
-/* Overlay Info */
-.overlay-info {
-  position: absolute;
-  bottom: 1rem;
-  left: 0;
-  right: 0;
-  text-align: center;
-  animation: bounceIn 0.5s;
-  pointer-events: none;
-}
+/* Layout Plan */
+.blueprint { width: 100%; height: 100%; position: relative; border: 2px solid var(--vp-c-brand-1); background: rgba(59, 130, 246, 0.05); }
+.blueprint::before { content: 'Viewport Blueprint'; position: absolute; font-size: 0.75rem; color: var(--vp-c-brand-1); top: 8px; left: 8px; font-family: monospace; font-weight: bold; }
+.bp-box { position: absolute; border: 2px dashed var(--vp-c-warning-1, #f59e0b); background: var(--vp-c-warning-soft, #fffbeb); color: var(--vp-c-warning-1); font-size: 0.75rem; padding: 4px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: monospace; font-weight: bold; }
+.bp-box.bp-h1 { top: 25%; left: 10%; width: 50%; height: 25%; }
+.bp-box.bp-input { top: 60%; left: 10%; width: 80%; height: 20%; }
 
-.brush,
-.ruler,
-.paint {
-  display: inline-block;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
+/* Final Paint */
+.browser-fake { width: 100%; height: 100%; background: #fff; padding: 2rem; display: flex; flex-direction: column; justify-content: center; color: #1a1a1a; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }
+html.dark .browser-fake { background: #111; color: #eee; }
 
-/* Vue Transitions */
-.block-enter-active,
-.block-leave-active {
-  transition: all 0.5s ease;
-}
-
-.block-enter-from {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes bounceIn {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  60% {
-    transform: scale(1.1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-/* Hover Interactions */
-.line.hovered {
-  background: rgba(59, 130, 246, 0.15);
-  opacity: 1 !important;
-  cursor: crosshair;
-}
-
-.block-box.hovered {
-  box-shadow: 0 0 0 2px #3b82f6;
-  z-index: 10;
-  background-color: rgba(59, 130, 246, 0.05);
-  cursor: crosshair;
+@media (max-width: 768px) {
+  .stage-window { flex-direction: column; }
+  .stepper { flex-wrap: wrap; gap: 1rem; }
+  .step-btn { flex: 1 1 20%; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
index 7630fd0..0302f44 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
@@ -1,189 +1,308 @@
 <template>
-  <div class="dns-lookup-demo simple-mode">
-    <div class="concept-explanation">
-      <p class="why-text">
-        <strong>为什么需要 DNS？(查导航)</strong>
-      </p>
-      <p class="why-desc-zh">
-        你知道店铺名字叫 "bilibili.com"，但快递员需要知道具体的经纬度坐标 (IP 地址)
-        才能送达。
-        <br>
-        DNS 就像是<strong>地图导航</strong>，输入店名，它通过“114查号台”帮你找到坐标。
-      </p>
-    </div>
-
-    <div class="demo-stage">
-      <div class="input-area">
-        <span class="label">店铺名称 (域名)</span>
-        <div class="fake-input">
-          bilibili.com
-        </div>
-      </div>
-
-      <div class="process-animation">
-        <div class="arrow-down">
-          ⬇️
-        </div>
-        <div class="dns-box">
-          <div class="icon">
-            🧭
-          </div>
-          <div class="title">
-            DNS (查号台)
-          </div>
-          <div class="desc">
-            正在查询 bilibili.com 的 IP...
-          </div>
-        </div>
-        <div class="arrow-down">
-          ⬇️
-        </div>
-      </div>
-
-      <div class="output-area">
-        <span class="label">精准坐标 (IP 地址)</span>
-        <div class="fake-output">
-          110.43.12.55
-        </div>
-      </div>
+  <div class="dns-lookup-demo custom-demo-base">
+    <div class="demo-label">DNS 解析 ── 查地址簿找坐标</div>
+    <div class="demo-panel">
+      
+      <div class="lookup-flow">
+        <!-- 浏览器 -->
+        <div class="flow-node browser-node" :class="{ active: true }">
+          <div class="node-icon">📱</div>
+          <div class="node-title">浏览器</div>
+          <div class="node-desc" v-if="step === 0">要去 www.google.com</div>
+          <div class="node-desc" v-if="step === 1">问 114查号台...</div>
+          <div class="node-desc success" v-if="step === 2">收到: 142... 发车!</div>
+        </div>
+
+        <div class="flow-path-wrapper">
+          <div class="flow-path" :class="{ active: step >= 0 }">
+            <span class="path-label">询问坐标</span>
+            <div class="moving-dot" v-if="step === 1"></div>
+          </div>
+          <div class="flow-path reverse" :class="{ active: step === 2 }">
+            <span class="path-label">返回 IP</span>
+            <div class="moving-dot reverse" v-if="step === 2"></div>
+          </div>
+        </div>
+
+        <!-- 查号台 -->
+        <div class="flow-node dns-node" :class="{ active: step >= 1, flash: step === 1 }">
+          <div class="node-icon">📞</div>
+          <div class="node-title">114查号台 (DNS)</div>
+          <div class="node-desc" v-if="step === 0">待命</div>
+          <div class="node-desc" v-if="step === 1">正在翻地址簿...</div>
+          <div class="node-desc success" v-if="step === 2">找到啦: 142.250.80.46</div>
+        </div>
+      </div>
+
+      <div class="action-bar">
+        <button class="action-btn" @click="runDemo" :disabled="isRunning"> 
+          {{ isRunning ? '查询中...' : (step === 2 ? '重新查询' : '开始 DNS 查询') }} 
+        </button>
+      </div>
+
     </div>
+    <div class="demo-status">{{ statusText }}</div>
   </div>
 </template>
 
 <script setup>
-// Simplified: No need for complex i18n logic anymore as we display both.
-defineProps({
-  lang: String // Accepted but ignored
-})
+import { ref, computed } from 'vue'
+
+const step = ref(0)
+const isRunning = ref(false)
+const statusList = [
+  '点击按钮，告诉浏览器你不知道 Google 服务器在哪',
+  '浏览器向营运商查号台 (DNS) 请求数字坐标...',
+  '拿到具体的 IP 地址，准备开始发车通信！'
+]
+
+const statusText = computed(() => statusList[step.value])
+
+const runDemo = () => {
+  if (isRunning.value) return
+  step.value = 0
+  isRunning.value = true
+  
+  setTimeout(() => {
+    step.value = 1
+    setTimeout(() => {
+      step.value = 2
+      isRunning.value = false
+    }, 1500)
+  }, 300)
+}
 </script>
 
 <style scoped>
-.dns-lookup-demo {
+.custom-demo-base {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  padding: 1.5rem;
-  margin: 0.5rem 0;
-  font-family: var(--vp-font-family-mono);
-}
-
-.concept-explanation {
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 0.75rem;
-  border-radius: 6px;
-  margin-bottom: 2rem;
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
-.why-text {
-  margin: 0 0 0.5rem 0;
-  color: var(--vp-c-brand);
+.demo-label {
+  font-size: 0.78rem;
   font-weight: bold;
-}
-
-.why-desc-en {
-  margin: 0 0 0.5rem 0;
-  color: var(--vp-c-text-1);
-  line-height: 1.5;
-  font-size: 0.95rem;
-}
-
-.why-desc-zh {
-  margin: 0;
   color: var(--vp-c-text-2);
-  line-height: 1.5;
-  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
+  letter-spacing: 0.2px;
 }
 
-.demo-stage {
+.demo-panel {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: 2rem;
+  padding: 2rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
 }
 
-.input-area,
-.output-area {
+.demo-status {
+  margin-top: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-3);
   text-align: center;
+  font-weight: bold;
+}
+
+.lookup-flow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
+  max-width: 500px;
 }
 
-.label {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-3);
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.fake-input,
-.fake-output {
-  background: var(--vp-c-bg-alt);
-  padding: 0.8rem;
-  border-radius: 6px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  border: 2px solid var(--vp-c-divider);
-}
-
-.fake-input {
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.fake-output {
-  border-color: #10b981;
-  color: #10b981;
-}
-
-.process-animation {
+.flow-node {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  border: 4px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
+  transition: all 0.3s;
+  z-index: 2;
 }
 
-.dns-box {
-  background: #fffbeb;
-  border: 2px solid #f59e0b;
-  padding: 1rem 2rem;
-  border-radius: 12px;
-  text-align: center;
-  width: 240px; /* Slightly wider for bilingual text */
+.flow-node.active {
+  border-color: var(--vp-c-brand-1, #3b82f6);
+  background: var(--vp-c-brand-soft, #eff6ff);
 }
 
-.html.dark .dns-box {
-  background: #451a03;
+.flow-node.flash {
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
 }
 
-.icon {
-  font-size: 2rem;
+.dns-node.active {
+  border-color: var(--vp-c-success-1, #10b981);
+  background: var(--vp-c-success-soft, #ecfdf5);
+}
+.dns-node.flash {
+  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
+}
+
+.node-icon {
+  font-size: 2.5rem;
   margin-bottom: 0.5rem;
 }
 
-.title {
-  font-weight: bold;
-  color: #d97706;
+.node-title {
   font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
 }
 
-.desc {
-  font-size: 0.8rem;
-  color: #b45309;
+.node-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
   margin-top: 0.2rem;
+  padding: 0 0.5rem;
+  min-height: 2.2em;
 }
 
-.arrow-down {
-  font-size: 1.5rem;
-  color: var(--vp-c-text-3);
-  animation: bounce 2s infinite;
+.node-desc.success {
+  color: var(--vp-c-success-1, #10b981);
+  font-weight: bold;
 }
 
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(0);
+.flow-path-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  height: 60px;
+  margin: 0 -20px;
+  z-index: 1;
+}
+
+.flow-path {
+  height: 2px;
+  background: var(--vp-c-divider);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+}
+
+.flow-path.active {
+  background: var(--vp-c-brand-1, #3b82f6);
+}
+
+.flow-path.reverse.active {
+  background: var(--vp-c-success-1, #10b981);
+}
+
+.path-label {
+  position: absolute;
+  top: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg);
+  padding: 0 0.4rem;
+  white-space: nowrap;
+}
+
+.flow-path.reverse .path-label {
+  top: auto;
+  bottom: -24px;
+}
+
+.moving-dot {
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--vp-c-brand-1, #3b82f6);
+  animation: moveRight 1.5s linear infinite;
+}
+
+.moving-dot.reverse {
+  background: var(--vp-c-success-1, #10b981);
+  left: auto;
+  right: 0;
+  animation: moveLeft 1.5s linear infinite;
+}
+
+@keyframes moveRight {
+  0% { left: 0%; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { left: 100%; opacity: 0; }
+}
+
+@keyframes moveLeft {
+  0% { right: 0%; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { right: 100%; opacity: 0; }
+}
+
+.action-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.action-btn {
+  background: var(--vp-c-brand-1, #3b82f6);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: var(--vp-c-brand-2, #2563eb);
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@media (max-width: 640px) {
+  .lookup-flow {
+    flex-direction: column;
+    gap: 2rem;
   }
-  50% {
-    transform: translateY(5px);
+  .flow-path-wrapper {
+    height: 40px;
+    width: 2px;
+    margin: -10px 0;
+  }
+  .flow-path {
+    width: 2px;
+    height: 100%;
+    top: 0;
+    left: 50%;
+  }
+  .path-label {
+    top: 50%;
+    left: 10px;
+    transform: translateY(-50%);
+  }
+  .flow-path.reverse .path-label {
+    left: auto;
+    right: 10px;
+  }
+  .moving-dot, .moving-dot.reverse {
+    display: none;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
index c1a8f7b..0215597 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
@@ -1,158 +1,53 @@
 <template>
-  <div class="http-exchange-demo">
-    <div class="browser-frame">
-      <!-- Address Bar (Simplified) -->
-      <div class="address-bar">
-        <select
-          v-model="method"
-          class="method-select"
-          :disabled="loading"
-        >
-          <option>GET</option>
-          <option>POST</option>
-          <option>PUT</option>
-          <option>DELETE</option>
-        </select>
-        <input
-          v-model="path"
-          class="url-input"
-          :disabled="loading"
-        >
-        <button
-          :disabled="loading"
-          class="send-btn"
-          @click="sendRequest"
-        >
-          {{ loading ? '...' : t.send }}
-        </button>
-      </div>
+  <div class="http-exchange-demo custom-demo-base">
+    <div class="demo-label">HTTP 请求与响应 ── 寄纸条买包裹</div>
+    <div class="demo-panel">
 
-      <div class="split-view">
-        <!-- Network Log (Left) -->
-        <div class="network-log">
-          <div class="log-header">
-            <span>{{ t.cols.name }}</span>
-            <span>{{ t.cols.status }}</span>
-            <span>{{ t.cols.type }}</span>
-            <span>{{ t.cols.time }}</span>
-          </div>
-          <div
-            v-if="requestSent"
-            class="log-row"
-            :class="{ active: requestSent, selected: true }"
-          >
-            <span class="col-name">{{ path.split('/').pop() || 'index' }}</span>
-            <span
-              class="col-status"
-              :class="statusClass"
-            >{{
-              responseStatus
-            }}</span>
-            <span class="col-type">document</span>
-            <span class="col-time">{{ loading ? 'Pending' : '45ms' }}</span>
-          </div>
-          <div
-            v-else
-            class="empty-state"
-          >
-            {{ t.noRequests }}
+      <div class="exchange-container">
+        <!-- Request Side -->
+        <div class="card request-card" :class="{ active: state !== 'idle' }">
+          <div class="card-header">📤 【买方发纸条】 HTTP Request</div>
+          <div class="card-body">
+            <div class="line"><span class="hl-blue">GET</span> /search <span class="hl-gray">HTTP/1.1</span></div>
+            <div class="line"><span class="hl-gray">Host:</span> www.google.com</div>
+            <div class="line"><span class="hl-gray">User-Agent:</span> Mac Chrome 浏览器</div>
+            <div class="line"><span class="hl-gray">Accept-Language:</span> zh-CN (我要中文货) </div>
           </div>
         </div>
 
-        <!-- Details Panel (Right) -->
-        <div
-          v-if="requestSent"
-          class="details-panel"
-        >
-          <div class="tabs">
-            <button
-              v-for="tabKey in ['headers', 'response', 'preview']"
-              :key="tabKey"
-              :class="{ active: activeTab === tabKey }"
-              @click="activeTab = tabKey"
-            >
-              {{ t.tabs[tabKey] }}
-            </button>
-          </div>
-
-          <div class="tab-content">
-            <!-- Headers Tab -->
-            <div
-              v-if="activeTab === 'headers'"
-              class="headers-view"
-            >
-              <div class="section">
-                <div class="section-title">
-                  {{ t.general }}
-                </div>
-                <div class="kv-row">
-                  <span class="key">{{ t.requestUrl }}:</span>
-                  <span class="value">https://api.example.com{{ path }}</span>
-                </div>
-                <div class="kv-row">
-                  <span class="key">{{ t.requestMethod }}:</span>
-                  <span class="value">{{ method }}</span>
-                </div>
-                <div class="kv-row">
-                  <span class="key">{{ t.statusCode }}:</span>
-                  <span class="value">
-                    <span
-                      class="status-dot"
-                      :class="statusClass"
-                    />
-                    {{ responseStatus || '...' }}
-                  </span>
-                </div>
-              </div>
-              <div class="section">
-                <div class="section-title">
-                  {{ t.responseHeaders }}
-                </div>
-                <div
-                  v-for="(val, key) in responseHeaders"
-                  :key="key"
-                  class="kv-row"
-                >
-                  <span class="key">{{ key }}:</span>
-                  <span class="value">{{ val }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Response Tab -->
-            <div
-              v-if="activeTab === 'response'"
-              class="code-view"
-            >
-              <pre>{{ responseBody }}</pre>
-            </div>
-
-            <!-- Preview Tab -->
-            <div
-              v-if="activeTab === 'preview'"
-              class="preview-view"
-            >
-              <div
-                v-if="method === 'GET'"
-                class="html-preview"
-                v-html="responseBody"
-              />
-              <div
-                v-else
-                class="json-preview"
-              >
-                JSON Data: {{ responseBody }}
-              </div>
-            </div>
+        <!-- Action Center -->
+        <div class="action-center">
+          <button v-if="state === 'idle'" class="action-btn" @click="sendRequest">塞入通道发送 →</button>
+          <div v-if="state === 'loading'" class="loading-state">
+             <div class="spinner"></div>
+             <div>等包裹寄回...</div>
           </div>
+          <button v-if="state === 'done'" class="action-btn outline" @click="reset">再试一次 ↻</button>
         </div>
-        <div
-          v-else
-          class="details-placeholder"
-        >
-          {{ t.placeholder }}
+
+        <!-- Response Side -->
+        <div class="card response-card" :class="{ active: state === 'done' }">
+          <div class="card-header">📥 【卖方回包裹】 HTTP Response</div>
+          <div class="card-body" v-if="state === 'done'">
+            <div class="line"><span class="hl-gray">HTTP/1.1</span> <span class="hl-green">200 OK</span> (交易成功)</div>
+            <div class="line"><span class="hl-gray">Content-Type:</span> text/html; charset=UTF-8</div>
+            <div class="divider">空行 (分隔快递单和物品正文)</div>
+            <div class="code-block">
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;这里是Google搜索页面的代码&lt;/body&gt;
+&lt;/html&gt;
+            </div>
+          </div>
+          <div class="card-body empty" v-else>
+            这里将显示服务器返回的包裹...
+          </div>
         </div>
       </div>
+
+    </div>
+    <div class="demo-status">
+      {{ statusText }}
     </div>
   </div>
 </template>
@@ -160,290 +55,179 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const props = defineProps({
-  lang: {
-    type: String,
-    default: 'zh'
-  }
-})
-
-const t = {
-  send: '提交订单 (发送请求)',
-  noRequests: '还没发请求 (网络空闲)',
-  placeholder: '点击 "提交订单" 向服务器索要页面',
-  general: '请求概要 (General)',
-  requestUrl: '目标地址 (URL)',
-  requestMethod: '操作类型 (Method)',
-  statusCode: '服务器回复状态 (Status)',
-  responseHeaders: '包裹标签 / 补充说明 (Headers)',
-  tabs: {
-    headers: '头部信息(Headers)',
-    response: '代码内容(Response)',
-    preview: '大致预览(Preview)'
-  },
-  cols: {
-    name: '请求体',
-    status: '状态',
-    type: '类型',
-    time: '耗时'
-  }
+const state = ref('idle') // idle, loading, done
+const statusList = {
+  idle: '组装好 HTTP 请求单，包含请求路径和各项补充情报。',
+  loading: '请求正在通过刚才建立好的 TCP 通道飞速传输给对方...',
+  done: '服务器找到货物 (HTML代码)，贴上 200 OK 标签原路返回送达！'
 }
 
-const method = ref('GET')
-const path = ref('/video/BV1xx411c7mD')
-const loading = ref(false)
-const requestSent = ref(false)
-const activeTab = ref('headers')
+const statusText = computed(() => statusList[state.value])
 
-const responseStatus = ref('')
-const responseBody = ref('')
-const responseHeaders = ref({})
-
-const sendRequest = async () => {
-  if (loading.value) return
-  loading.value = true
-  requestSent.value = true
-  responseStatus.value = '处理中...'
-
-  await new Promise((r) => setTimeout(r, 800))
-
-  loading.value = false
-
-  if (method.value === 'GET') {
-    responseStatus.value = '200 OK (交易成功)'
-    responseHeaders.value = {
-      'Content-Type': 'text/html; charset=utf-8',
-      'Server': 'BWS/1.1 (Bilibili Web Server)',
-      'Date': new Date().toUTCString()
-    }
-    responseBody.value = `<!DOCTYPE html>
-<html>
-<head>
-  <title>【B站】超级搞笑的猫咪合集</title>
-</head>
-<body>
-  <h1>超级搞笑的猫咪合集</h1>
-  <div class="player">
-    <img src="cat_cover.jpg" alt="封面" />
-    <button>▶️ 播放</button>
-  </div>
-</body>
-</html>`
-  } else {
-    responseStatus.value = '201 Created (操作成功)'
-    responseHeaders.value = {
-      'Content-Type': 'application/json',
-      'Server': 'BWS/1.1',
-      'Date': new Date().toUTCString()
-    }
-    responseBody.value = `{\n  "success": true,\n  "message": "点赞成功!"\n}`
-  }
+const sendRequest = () => {
+  state.value = 'loading'
+  setTimeout(() => {
+    state.value = 'done'
+  }, 1500)
 }
 
-const statusClass = computed(() => {
-  if (loading.value) return 'pending'
-  if (responseStatus.value.startsWith('2')) return 'success'
-  return 'error'
-})
+const reset = () => {
+  state.value = 'idle'
+}
 </script>
 
 <style scoped>
-.http-exchange-demo {
+.custom-demo-base {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  margin: 0.5rem 0;
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
-  overflow: hidden;
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
-.browser-frame {
+.demo-label {
+  font-size: 0.78rem;
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+  letter-spacing: 0.2px;
+}
+
+.demo-panel {
   display: flex;
   flex-direction: column;
-  height: 400px;
-}
-
-.address-bar {
-  padding: 0.5rem;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
-  display: flex;
-  gap: 0.5rem;
-}
-
-.method-select {
-  padding: 0.3rem;
-  border-radius: 4px;
+  padding: 1.5rem;
   border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+}
+
+.demo-status {
+  margin-top: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-3);
+  text-align: center;
   font-weight: bold;
 }
 
-.url-input {
-  flex: 1;
-  padding: 0.3rem 0.5rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
+.exchange-container {
+  display: flex;
+  gap: 1.5rem;
+  align-items: stretch;
+  justify-content: space-between;
 }
 
-.send-btn {
-  background: var(--vp-c-brand);
+.card {
+  flex: 1;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-alt);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s;
+  overflow: hidden;
+}
+
+.card.request-card.active { border-color: var(--vp-c-brand-1, #3b82f6); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }
+.card.response-card.active { border-color: var(--vp-c-success-1, #10b981); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
+
+.card-header {
+  padding: 0.8rem;
+  font-weight: bold;
+  font-size: 0.9rem;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+}
+
+.card-body {
+  padding: 1rem;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-body.empty {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+  justify-content: center;
+  align-items: center;
+}
+
+.line { margin-bottom: 0.3rem; word-break: break-all; }
+.hl-blue { color: var(--vp-c-brand-1, #3b82f6); font-weight: bold; }
+.hl-gray { color: var(--vp-c-text-2); }
+.hl-green { color: var(--vp-c-success-1, #10b981); font-weight: bold; }
+
+.divider {
+  border-top: 1px dashed var(--vp-c-divider);
+  margin: 1rem 0;
+  padding-top: 0.5rem;
+  color: var(--vp-c-text-3);
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+.code-block {
+  background: var(--vp-code-bg);
+  padding: 0.8rem;
+  border-radius: 4px;
+  color: var(--vp-code-color);
+  font-size: 0.75rem;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.action-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+}
+
+.action-btn {
+  background: var(--vp-c-brand-1, #3b82f6);
   color: white;
   border: none;
-  padding: 0 1rem;
-  border-radius: 4px;
+  padding: 0.6rem 1rem;
+  border-radius: 6px;
   cursor: pointer;
-}
-
-.split-view {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-}
-
-.network-log {
-  width: 40%;
-  border-right: 1px solid var(--vp-c-divider);
-  display: flex;
-  flex-direction: column;
-  font-size: 0.8rem;
-}
-
-.log-header {
-  display: flex;
-  padding: 0.5rem;
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
   font-weight: bold;
-  color: var(--vp-c-text-2);
-}
-
-.log-header span {
-  flex: 1;
-}
-
-.log-row {
-  display: flex;
-  padding: 0.5rem;
-  cursor: pointer;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.log-row.selected {
-  background: #e0f2fe; /* Light blue */
-}
-
-html.dark .log-row.selected {
-  background: #1e3a8a;
-}
-
-.log-row span {
-  flex: 1;
+  transition: all 0.2s;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.col-status.success {
-  color: #10b981;
-}
-.col-status.pending {
-  color: #9ca3af;
-}
+.action-btn:hover { background: var(--vp-c-brand-2, #2563eb); }
+.action-btn.outline { background: transparent; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-divider); }
+.action-btn.outline:hover { background: var(--vp-c-bg-alt); }
 
-.empty-state {
-  padding: 2rem;
-  text-align: center;
-  color: var(--vp-c-text-3);
-}
-
-.details-panel {
-  flex: 1;
+.loading-state {
   display: flex;
   flex-direction: column;
-  font-size: 0.85rem;
-}
-
-.details-placeholder {
-  flex: 1;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--vp-c-text-3);
-}
-
-.tabs {
-  display: flex;
-  border-bottom: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-soft);
-}
-
-.tabs button {
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
+  gap: 0.5rem;
   color: var(--vp-c-text-2);
+  font-size: 0.8rem;
+  text-align: center;
 }
 
-.tabs button.active {
-  border-bottom-color: var(--vp-c-brand);
-  color: var(--vp-c-text-1);
-}
-
-.tab-content {
-  flex: 1;
-  
-  padding: 0.75rem;
-}
-
-.section {
-  margin-bottom: 1.5rem;
-}
-
-.section-title {
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-  color: var(--vp-c-text-1);
-}
-
-.kv-row {
-  display: flex;
-  margin-bottom: 0.3rem;
-  font-family: monospace;
-}
-
-.kv-row .key {
-  width: 120px;
-  color: var(--vp-c-text-2);
-  flex-shrink: 0;
-}
-
-.kv-row .value {
-  color: var(--vp-c-text-1);
-  word-break: break-all;
-}
-
-.code-view pre {
-  margin: 0;
-  white-space: pre-wrap;
-  font-family: monospace;
-}
-
-.status-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1, #3b82f6);
   border-radius: 50%;
-  margin-right: 4px;
+  animation: spin 1s linear infinite;
 }
-.status-dot.success {
-  background: #10b981;
-}
-.status-dot.pending {
-  background: #9ca3af;
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 800px) {
+  .exchange-container { flex-direction: column; }
+  .action-center { width: 100%; height: 60px; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
index 7a7df47..6b2e384 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
@@ -1,128 +1,74 @@
 <template>
-  <div class="tcp-handshake-demo">
-    <div class="controls">
-      <div class="status-indicator">
-        {{ t.statusLabel }}:
-        <span :class="connectionStatus.toLowerCase()">{{ statusText }}</span>
+  <div class="tcp-handshake-demo custom-demo-base">
+    <div class="demo-label">TCP 三次握手 ── 建立可靠通话渠道</div>
+    <div class="demo-panel">
+      
+      <!-- Sequence Diagram area -->
+      <div class="sequence-container">
+        
+        <!-- Computer Left -->
+        <div class="endpoint client">
+          <div class="icon">💻</div>
+          <div class="name">浏览器 (你)</div>
+          <div class="state" :class="{ established: step >= 3 }">
+            {{ step >= 3 ? '连接成功' : '等待连接' }}
+          </div>
+        </div>
+
+        <!-- Middle Area -->
+        <div class="interaction-area">
+          <div class="timeline-line client-line"></div>
+          <div class="timeline-line server-line"></div>
+
+          <!-- Step 1: SYN -->
+          <transition name="msg-right">
+            <div v-if="step >= 1" class="message msg-syn">
+              <div class="msg-box">
+                <div class="msg-title">第1次握手: SYN</div>
+                <div class="msg-desc">"喂，服务器老哥在吗？我能发信息，你能收到吗？"</div>
+              </div>
+            </div>
+          </transition>
+
+          <!-- Step 2: SYN-ACK -->
+          <transition name="msg-left">
+            <div v-if="step >= 2" class="message msg-syn-ack">
+              <div class="msg-box">
+                <div class="msg-title">第2次握手: SYN-ACK</div>
+                <div class="msg-desc">"在！我收到了！那你现在能听到我说话吗？"</div>
+              </div>
+            </div>
+          </transition>
+
+          <!-- Step 3: ACK -->
+          <transition name="msg-right">
+            <div v-if="step >= 3" class="message msg-ack">
+              <div class="msg-box">
+                <div class="msg-title">第3次握手: ACK</div>
+                <div class="msg-desc">"我就知道你听到了，证实通道没问题，准备聊正事！"</div>
+              </div>
+            </div>
+          </transition>
+        </div>
+
+        <!-- Server Right -->
+        <div class="endpoint server">
+          <div class="icon">🖥️</div>
+          <div class="name">Google 服务器</div>
+          <div class="state" :class="{ established: step >= 3 }">
+            {{ step >= 3 ? '连接成功' : '等待连接' }}
+          </div>
+        </div>
       </div>
-      <div class="buttons">
-        <button
-          v-if="step === 0"
-          class="action-btn"
-          @click="startHandshake"
-        >
-          {{ t.connect }}
-        </button>
-        <button
-          v-else
-          class="reset-btn"
-          @click="reset"
-        >
-          {{ t.reset }}
-        </button>
+
+      <div class="action-bar">
+        <button v-if="step === 0" class="action-btn" @click="startHandshake">发起连接</button>
+        <button v-if="step >= 3" class="action-btn outline" @click="reset">断开重连</button>
       </div>
+
     </div>
-
-    <div class="sequence-diagram">
-      <!-- Client Timeline -->
-      <div class="timeline client">
-        <div class="actor">
-          <span class="icon">💻</span>
-          <span class="name">{{ t.client }}</span>
-        </div>
-        <div class="line" />
-        <div
-          class="state-marker"
-          :class="{ active: step >= 1 }"
-        >
-          SYN_SENT
-        </div>
-        <div
-          class="state-marker"
-          :class="{ active: step >= 3 }"
-        >
-          ESTABLISHED
-        </div>
-      </div>
-
-      <!-- Interaction Area -->
-      <div class="interaction-space">
-        <!-- SYN Packet -->
-        <div class="packet-track">
-          <transition name="slide-right">
-            <div
-              v-if="showSyn"
-              class="packet syn"
-            >
-              <div class="packet-body">
-                SYN
-              </div>
-              <div class="packet-detail">
-                SEQ=0
-              </div>
-            </div>
-          </transition>
-        </div>
-
-        <!-- SYN-ACK Packet -->
-        <div class="packet-track reverse">
-          <transition name="slide-left">
-            <div
-              v-if="showSynAck"
-              class="packet syn-ack"
-            >
-              <div class="packet-body">
-                SYN-ACK
-              </div>
-              <div class="packet-detail">
-                SEQ=0, ACK=1
-              </div>
-            </div>
-          </transition>
-        </div>
-
-        <!-- ACK Packet -->
-        <div class="packet-track">
-          <transition name="slide-right">
-            <div
-              v-if="showAck"
-              class="packet ack"
-            >
-              <div class="packet-body">
-                ACK
-              </div>
-              <div class="packet-detail">
-                SEQ=1, ACK=1
-              </div>
-            </div>
-          </transition>
-        </div>
-      </div>
-
-      <!-- Server Timeline -->
-      <div class="timeline server">
-        <div class="actor">
-          <span class="icon">🖥️</span>
-          <span class="name">{{ t.server }}</span>
-        </div>
-        <div class="line" />
-        <div
-          class="state-marker"
-          :class="{ active: step >= 2 }"
-        >
-          SYN_RCVD
-        </div>
-        <div
-          class="state-marker"
-          :class="{ active: step >= 3 }"
-        >
-          ESTABLISHED
-        </div>
-      </div>
-    </div>
-
-    <div class="description-box">
-      <p>{{ currentDescription }}</p>
+    <div class="demo-status">
+      {{ statusText }}
     </div>
   </div>
 </template>
@@ -130,316 +76,226 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const props = defineProps({
-  lang: {
-    type: String,
-    default: 'zh'
-  }
-})
-
-// Bilingual text directly
-const t = {
-  statusLabel: '连接状态',
-  connect: '建立连接',
-  reset: '断开重连',
-  client: '我 (浏览器)',
-  server: '对面 (B站服务器)',
-  status: {
-    closed: '未连接',
-    handshaking: '正在打招呼确认通道...',
-    established: 'TCP 通道已建立 (ESTABLISHED)'
-  },
-  steps: {
-    0: '点击 "建立连接" 开始三次握手（电话试音）。',
-    1: '第一次握手: "喂，服务器老哥在吗？我能发信息，你能收到吗？" (SYN)',
-    2: '第二次握手: "喂喂在的！我收到了！那你现在能听到我说话吗？" (SYN-ACK)',
-    3: '第三次握手: "妥了，我也能听到！通道没问题，准备看视频！" (ACK)'
-  }
-}
-
 const step = ref(0)
-const showSyn = ref(false)
-const showSynAck = ref(false)
-const showAck = ref(false)
+const statusList = [
+  '点击【发起连接】模拟 TCP 三次握手过程',
+  '发送 SYN 包: 浏览器试探服务器接收能力...',
+  '回复 SYN-ACK 包: 服务器确认接收并试探浏览器...',
+  '回复 ACK 包: 浏览器再次确认。双方通道建立完毕，可以正式发请求！'
+]
 
-const connectionStatus = computed(() => {
-  if (step.value === 0) return 'closed'
-  if (step.value < 3) return 'handshaking'
-  return 'established'
-})
-
-const statusText = computed(() => {
-  const s = connectionStatus.value
-  return t.status[s] || s.toUpperCase()
-})
-
-const currentDescription = computed(() => {
-  return t.steps[step.value] || ''
-})
+const statusText = computed(() => statusList[step.value])
 
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 const startHandshake = async () => {
   if (step.value > 0) return
-
-  // Step 1: SYN
+  
   step.value = 1
-  showSyn.value = true
-  await wait(1500)
-
-  // Step 2: SYN-ACK
+  await wait(1800)
+  
   step.value = 2
-  showSynAck.value = true
-  await wait(1500)
-
-  // Step 3: ACK
+  await wait(1800)
+  
   step.value = 3
-  showAck.value = true
 }
 
 const reset = () => {
   step.value = 0
-  showSyn.value = false
-  showSynAck.value = false
-  showAck.value = false
 }
 </script>
 
 <style scoped>
-.tcp-handshake-demo {
+.custom-demo-base {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  padding: 1.5rem;
-  margin: 0.5rem 0;
-  font-family: var(--vp-font-family-mono);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
-.controls {
+.demo-label {
+  font-size: 0.78rem;
+  font-weight: bold;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+  letter-spacing: 0.2px;
+}
+
+.demo-panel {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--vp-c-divider);
+  flex-direction: column;
+  padding: 1.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
 }
 
-.status-indicator {
+.demo-status {
+  margin-top: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-3);
+  text-align: center;
   font-weight: bold;
 }
-.status-indicator span.closed {
-  color: var(--vp-c-text-3);
-}
-.status-indicator span.handshaking {
-  color: #f59e0b;
-}
-.status-indicator span.established {
-  color: #10b981;
-}
 
-.action-btn {
-  background: #3b82f6;
-  color: white;
-  border: none;
-  padding: 0.5rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.reset-btn {
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  padding: 0.5rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.sequence-diagram {
+.sequence-container {
   display: flex;
   justify-content: space-between;
-  height: 300px;
   position: relative;
+  min-height: 280px;
+  margin-bottom: 1rem;
 }
 
-.timeline {
+.endpoint {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100px;
-  position: relative;
-}
-
-.actor {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 1rem;
   z-index: 2;
-  background: var(--vp-c-bg);
 }
 
-.timeline .line {
-  width: 2px;
-  background: var(--vp-c-divider);
-  flex: 1;
-}
-
-.state-marker {
-  margin-top: 2rem;
-  padding: 0.3rem 0.6rem;
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
+.endpoint .icon { font-size: 3rem; margin-bottom: 0.5rem; }
+.endpoint .name { font-weight: bold; font-size: 0.85rem; text-align: center; color: var(--vp-c-text-1); }
+.endpoint .state {
+  margin-top: 0.5rem;
   font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg-alt);
   color: var(--vp-c-text-3);
+  border: 1px solid var(--vp-c-divider);
   transition: all 0.3s;
 }
 
-.state-marker.active {
-  background: #10b981;
-  color: white;
-  border-color: #10b981;
+.endpoint .state.established {
+  background: var(--vp-c-success-soft, #ecfdf5);
+  color: var(--vp-c-success-1, #10b981);
+  border-color: var(--vp-c-success-1, #10b981);
 }
 
-.interaction-space {
+.interaction-area {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 2rem 0;
-}
-
-.packet-track {
-  height: 40px;
   position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.packet-track.reverse {
-  justify-content: flex-end;
-}
-
-.packet {
-  background: #3b82f6;
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
+  margin: 0 1rem;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  min-width: 120px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 10;
+  padding-top: 3rem;
+  gap: 1.5rem;
 }
 
-.packet.syn-ack {
-  background: #f59e0b;
-}
-.packet.ack {
-  background: #10b981;
+.timeline-line {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  width: 2px;
+  background: var(--vp-c-divider);
+  z-index: 1;
 }
 
-.packet-body {
-  font-weight: bold;
-}
-.packet-detail {
-  font-size: 0.7rem;
-  opacity: 0.9;
+.client-line { left: 0; }
+.server-line { right: 0; }
+
+.message {
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
-/* Animations */
-.slide-right-enter-active {
-  animation: slide-right 1.5s linear;
-}
-.slide-left-enter-active {
-  animation: slide-left 1.5s linear;
-}
-
-@keyframes slide-right {
-  0% {
-    transform: translateX(0);
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%);
-    opacity: 1;
-  } /* Not quite right, need to stick */
-}
-
-/* 
-Vue transitions are tricky for "moving across". 
-Let's use a simpler approach: CSS transitions on left/right property or keyframes.
-Actually, for a "send" animation, we want it to move from A to B and then stay or disappear.
-Here I want it to appear and move.
-*/
-
-.slide-right-enter-active,
-.slide-left-enter-active {
-  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.slide-right-enter-from {
-  transform: translateX(-150px);
-  opacity: 0;
-}
-.slide-right-enter-to {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-/* This is getting complicated with Vue transitions for simple movement.
-   Let's just use CSS keyframes on the element itself when it renders.
-*/
-
-.packet {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in-out;
-}
-
-.packet-track .packet {
-  animation-name: moveRight;
-}
-.packet-track.reverse .packet {
-  animation-name: moveLeft;
-}
-
-@keyframes moveRight {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes moveLeft {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.description-box {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+.msg-box {
+  background: var(--vp-c-brand-soft, #eff6ff);
+  border: 2px solid var(--vp-c-brand-1, #3b82f6);
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  width: 80%;
   text-align: center;
-  min-height: 3rem;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  position: relative;
+}
+
+.msg-box::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0; 
+  height: 0; 
+  border-style: solid;
+}
+
+.msg-syn .msg-box::after, .msg-ack .msg-box::after {
+  content: '→';
+  position: absolute;
+  right: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--vp-c-brand-1, #3b82f6);
+  font-size: 1.5rem;
+}
+
+.msg-syn-ack .msg-box {
+  background: var(--vp-c-warning-soft, #fffbeb);
+  border-color: var(--vp-c-warning-1, #f59e0b);
+}
+
+.msg-syn-ack .msg-box::before {
+  content: '←';
+  position: absolute;
+  left: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--vp-c-warning-1, #f59e0b);
+  border: none;
+  font-size: 1.5rem;
+}
+
+.msg-title {
+  font-weight: bold;
+  font-size: 0.85rem;
+  margin-bottom: 0.3rem;
+  color: var(--vp-c-text-1);
+}
+
+.msg-desc {
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
 }
+
+.action-bar {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.action-btn {
+  background: var(--vp-c-brand-1, #3b82f6);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s;
+}
+
+.action-btn:hover { background: var(--vp-c-brand-2, #2563eb); }
+.action-btn.outline { background: transparent; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-divider); }
+.action-btn.outline:hover { background: var(--vp-c-bg-alt); }
+
+/* Animations */
+.msg-right-enter-active, .msg-left-enter-active {
+  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.msg-right-enter-from { opacity: 0; transform: translateX(-50px); }
+.msg-left-enter-from { opacity: 0; transform: translateX(50px); }
+
+@media (max-width: 640px) {
+  .msg-box { width: 95%; }
+  .msg-syn .msg-box::after, .msg-ack .msg-box::after, .msg-syn-ack .msg-box::before { display: none; }
+  .interaction-area { margin: 0; padding-top: 1rem; }
+  .endpoint { width: 70px; }
+  .timeline-line { top: 0;}
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
index 98c6153..cdd08c5 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
@@ -1,375 +1,180 @@
 <template>
-  <div class="url-parser-demo">
-    <div class="browser-bar">
-      <div class="nav-buttons">
-        <span class="nav-btn">←</span>
-        <span class="nav-btn">→</span>
-        <span class="nav-btn">↻</span>
-      </div>
-      <div class="omnibox">
-        <span class="lock-icon">🔒</span>
-        <!-- Segmented URL Display -->
-        <div
-          v-if="parsedUrl"
-          class="segmented-url"
-        >
-          <span
-            class="url-part protocol"
-            :class="{ active: highlightedPart === 'protocol' }"
-            @mouseover="highlightedPart = 'protocol'"
-            @mouseleave="highlightedPart = null"
-          >{{ parts.protocol }}:</span>
-          <span class="divider">//</span>
-          <span
-            class="url-part host"
-            :class="{ active: highlightedPart === 'host' }"
-            @mouseover="highlightedPart = 'host'"
-            @mouseleave="highlightedPart = null"
-          >{{ parts.host }}</span>
-          <span
-            v-if="parts.port"
-            class="url-part port"
-            :class="{ active: highlightedPart === 'port' }"
-            @mouseover="highlightedPart = 'port'"
-            @mouseleave="highlightedPart = null"
-          >:{{ parts.port }}</span>
-          <span
-            class="url-part pathname"
-            :class="{ active: highlightedPart === 'pathname' }"
-            @mouseover="highlightedPart = 'pathname'"
-            @mouseleave="highlightedPart = null"
-          >{{ parts.pathname }}</span>
-          <span
-            v-if="parts.search"
-            class="url-part search"
-            :class="{ active: highlightedPart === 'search' }"
-            @mouseover="highlightedPart = 'search'"
-            @mouseleave="highlightedPart = null"
-          >{{ parts.search }}</span>
-          <span
-            v-if="parts.hash"
-            class="url-part hash"
-            :class="{ active: highlightedPart === 'hash' }"
-            @mouseover="highlightedPart = 'hash'"
-            @mouseleave="highlightedPart = null"
-          >{{ parts.hash }}</span>
-        </div>
-        <input
-          v-else
-          v-model="inputUrl"
-          type="text"
-          class="url-input"
-          placeholder="https://example.com"
-        >
-      </div>
-    </div>
+  <div class="url-parser-demo custom-demo-base">
+    <div class="demo-label">URL 解析 ── 把人类文字翻译成结构化信息</div>
 
-    <div class="visualization-area">
-      <div
-        v-if="parsedUrl"
-        class="url-breakdown"
-      >
-        <div
-          v-for="(part, key) in parts"
-          :key="key"
-          class="url-segment"
-          :class="[key, { active: highlightedPart === key }]"
-          @mouseover="highlightedPart = key"
-          @mouseleave="highlightedPart = null"
+    <div class="demo-panel url-panel">
+      <!-- url block -->
+      <div class="url-layout">
+        <span 
+          class="url-part protocol" 
+          :class="{ active: activePart === 'protocol' }"
+          @mouseenter="activePart = 'protocol'"
+          @mouseleave="activePart = null"
+        >https://</span>
+        <span 
+          class="url-part host"
+          :class="{ active: activePart === 'host' }"
+          @mouseenter="activePart = 'host'"
+          @mouseleave="activePart = null"
+        >www.google.com</span>
+        <span 
+          class="url-part path"
+          :class="{ active: activePart === 'path' }"
+          @mouseenter="activePart = 'path'"
+          @mouseleave="activePart = null"
+        >/search</span>
+      </div>
+
+      <div class="info-blocks">
+        <div 
+          class="info-card protocol-card"
+          :class="{ active: activePart === 'protocol' }"
+          @mouseenter="activePart = 'protocol'"
+          @mouseleave="activePart = null"
         >
-          <div class="segment-header">
-            <span class="segment-icon">{{ icons[key] }}</span>
-            <span class="segment-label">{{ labels[key] }}</span>
-          </div>
-          <div class="segment-value">
-            {{ part || '-' }}
-          </div>
-          <div class="segment-desc">
-            {{ descriptions[key] }}
-          </div>
+          <div class="card-title">🚛 交通方式 (协议 Protocol)</div>
+          <div class="card-desc">代表你要求坐安全级别最高的"运钞车"（加密通信HTTPS）。如果是 HTTP，就是老式敞篷车，沿途都会被看见。</div>
+        </div>
+
+        <div 
+          class="info-card host-card"
+          :class="{ active: activePart === 'host' }"
+          @mouseenter="activePart = 'host'"
+          @mouseleave="activePart = null"
+        >
+          <div class="card-title">🏢 店铺名 (主机名 Host)</div>
+          <div class="card-desc">这就是你要去哪家店，也是服务器的域名，后续浏览器需要把它翻译成网络世界认的数字 IP。</div>
+        </div>
+
+        <div 
+          class="info-card path-card"
+          :class="{ active: activePart === 'path' }"
+          @mouseenter="activePart = 'path'"
+          @mouseleave="activePart = null"
+        >
+          <div class="card-title">📍 具体货架 (路径 Path)</div>
+          <div class="card-desc">进了店门之后，你要去哪个房间拿具体的哪件商品或执行具体的某个动作。</div>
         </div>
       </div>
-      <div
-        v-else
-        class="error-state"
-      >
-        Invalid URL format / 无效的 URL 格式
-      </div>
     </div>
+    <div class="demo-status">悬停查看每个部分的职责</div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
-const props = defineProps({
-  lang: {
-    type: String,
-    default: 'zh'
-  }
-})
-
-const inputUrl = ref('https://www.bilibili.com/video/BV1xx411c7mD?t=60#comments')
-const highlightedPart = ref(null)
-
-const icons = {
-  protocol: '🚛',
-  host: '🏢',
-  port: '🚪',
-  pathname: '📺',
-  search: '📝',
-  hash: '📍'
-}
-
-const labels = {
-  protocol: '交通方式 (Protocol)',
-  host: '店铺地址 (Host)',
-  port: '大门号 (Port)',
-  pathname: '具体货架 (Path)',
-  search: '特殊要求 (Search/Query)',
-  hash: '直接跳转 (Hash)'
-}
-
-const descriptions = {
-  protocol: '怎么去？(https = 坐押运车去，比 http 安全)',
-  host: '去哪家店？(域名：例如 www.bilibili.com)',
-  port: '走哪个门？(默认隐藏了 443 端口号)',
-  pathname: '拿什么货？(去 /video 区拿编号为 BV... 的视频)',
-  search: '给店员的备注说明 (例如 ?t=60 表示要求从 60 秒开始看)',
-  hash: '拿到货后自己做的事 (例如滚动到评论区 #comments)'
-}
-
-const parsedUrl = computed(() => {
-  try {
-    return new URL(inputUrl.value)
-  } catch (e) {
-    return null
-  }
-})
-
-const parts = computed(() => {
-  if (!parsedUrl.value) return {}
-  return {
-    protocol: parsedUrl.value.protocol.replace(':', ''),
-    host: parsedUrl.value.hostname,
-    port:
-      parsedUrl.value.port ||
-      (parsedUrl.value.protocol === 'https:' ? '443' : '80'),
-    pathname: parsedUrl.value.pathname,
-    search: parsedUrl.value.search,
-    hash: parsedUrl.value.hash
-  }
-})
+const activePart = ref(null)
 </script>
 
 <style scoped>
-.url-parser-demo {
+.custom-demo-base {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background-color: var(--vp-c-bg);
-  overflow: hidden;
-  margin: 0.5rem 0;
-  font-family: var(--vp-font-family-mono);
-}
-
-.browser-bar {
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 0.8rem;
-  border-bottom: 1px solid var(--vp-c-divider);
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
 }
 
-.nav-buttons {
-  display: flex;
-  gap: 0.5rem;
+.demo-label {
+  font-size: 0.78rem;
+  font-weight: bold;
   color: var(--vp-c-text-2);
-  font-size: 1.2rem;
-  user-select: none;
+  margin-bottom: 0.75rem;
+  letter-spacing: 0.2px;
 }
 
-.omnibox {
-  flex: 1;
-  background: var(--vp-c-bg);
+.demo-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 20px;
-  padding: 0.4rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  font-size: 0.9rem;
-  overflow: hidden;
+  border-radius: 8px;
+  background: var(--vp-c-bg);
 }
 
-.lock-icon {
-  font-size: 0.8rem;
+.demo-status {
+  margin-top: 0.75rem;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-3);
+  text-align: center;
 }
 
-/* Segmented URL Styles */
-.segmented-url {
+.url-layout {
+  font-size: 1.8rem;
+  font-weight: bold;
   display: flex;
+  justify-content: center;
   align-items: center;
+  gap: 0.2rem;
   flex-wrap: wrap;
+  font-family: var(--vp-font-family-mono);
+  padding: 1rem;
+  border-radius: 8px;
+  background: var(--vp-c-bg-alt);
 }
 
 .url-part {
-  padding: 2px 4px;
-  border-radius: 4px;
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
-  font-weight: bold;
+  border: 2px solid transparent;
 }
 
-.url-part:hover,
-.url-part.active {
-  transform: scale(1.1);
-}
+.url-part.protocol { color: var(--vp-c-danger-1, #ef4444); }
+.url-part.protocol.active { background: var(--vp-c-danger-soft, #fef2f2); border-color: var(--vp-c-danger-1, #ef4444); transform: scale(1.05); }
 
-.url-part.protocol {
-  color: #ef4444;
-}
-.url-part.host {
-  color: #3b82f6;
-}
-.url-part.port {
-  color: #f59e0b;
-}
-.url-part.pathname {
-  color: #10b981;
-}
-.url-part.search {
-  color: #8b5cf6;
-}
-.url-part.hash {
-  color: #ec4899;
-}
+.url-part.host { color: var(--vp-c-brand-1, #3b82f6); }
+.url-part.host.active { background: var(--vp-c-brand-soft, #eff6ff); border-color: var(--vp-c-brand-1, #3b82f6); transform: scale(1.05); }
 
-.url-part.active.protocol {
-  background: #fef2f2;
-}
-.url-part.active.host {
-  background: #eff6ff;
-}
-.url-part.active.port {
-  background: #fffbeb;
-}
-.url-part.active.pathname {
-  background: #ecfdf5;
-}
-.url-part.active.search {
-  background: #f5f3ff;
-}
-.url-part.active.hash {
-  background: #fdf2f8;
-}
+.url-part.path { color: var(--vp-c-success-1, #10b981); }
+.url-part.path.active { background: var(--vp-c-success-soft, #ecfdf5); border-color: var(--vp-c-success-1, #10b981); transform: scale(1.05); }
 
-.divider {
-  color: var(--vp-c-text-3);
-  margin: 0 1px;
-}
-
-.visualization-area {
-  padding: 1.5rem;
-}
-
-.url-breakdown {
+.info-blocks {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
 }
 
-.url-segment {
-  padding: 0.75rem;
-  border-radius: 6px;
-  border: 2px solid transparent; /* Prepare for border color */
+.info-card {
+  padding: 1.2rem;
+  border-radius: 8px;
+  border: 2px solid transparent;
   background: var(--vp-c-bg-alt);
   transition: all 0.2s;
-  cursor: default;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  cursor: pointer;
 }
 
-.url-segment.active {
+.info-card:hover, .info-card.active {
   transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-/* Color Coding for Cards */
-.url-segment.protocol {
-  border-color: #ef4444;
-}
-.url-segment.host {
-  border-color: #3b82f6;
-}
-.url-segment.port {
-  border-color: #f59e0b;
-}
-.url-segment.pathname {
-  border-color: #10b981;
-}
-.url-segment.search {
-  border-color: #8b5cf6;
-}
-.url-segment.hash {
-  border-color: #ec4899;
-}
+.protocol-card.active { border-color: var(--vp-c-danger-1, #ef4444); background: var(--vp-c-danger-soft, #fef2f2); }
+.host-card.active { border-color: var(--vp-c-brand-1, #3b82f6); background: var(--vp-c-brand-soft, #eff6ff); }
+.path-card.active { border-color: var(--vp-c-success-1, #10b981); background: var(--vp-c-success-soft, #ecfdf5); }
 
-.url-segment.active.protocol {
-  background: #fef2f2;
-}
-.url-segment.active.host {
-  background: #eff6ff;
-}
-.url-segment.active.port {
-  background: #fffbeb;
-}
-.url-segment.active.pathname {
-  background: #ecfdf5;
-}
-.url-segment.active.search {
-  background: #f5f3ff;
-}
-.url-segment.active.hash {
-  background: #fdf2f8;
-}
-
-.segment-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  padding-bottom: 0.5rem;
-}
-
-.segment-icon {
-  font-size: 1.2rem;
-}
-
-.segment-label {
-  font-size: 0.8rem;
+.card-title {
+  font-size: 0.95rem;
   font-weight: bold;
+  margin-bottom: 0.6rem;
   color: var(--vp-c-text-1);
 }
 
-.segment-value {
-  font-size: 1.1rem;
-  font-weight: bold;
-  word-break: break-all;
-  font-family: monospace;
-}
+.protocol-card.active .card-title { color: var(--vp-c-danger-1, #ef4444); }
+.host-card.active .card-title { color: var(--vp-c-brand-1, #3b82f6); }
+.path-card.active .card-title { color: var(--vp-c-success-1, #10b981); }
 
-.segment-desc {
-  font-size: 0.8rem;
+.card-desc {
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  line-height: 1.4;
+  line-height: 1.6;
 }
 
-.error-state {
-  text-align: center;
-  color: #ef4444;
-  padding: 2rem;
+@media (max-width: 640px) {
+  .url-layout { font-size: 1.2rem; }
+  .info-blocks { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 2b2f2d9..b5d9661 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -202,6 +202,10 @@ import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue'
 import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue'
 import BrowserRenderingDemo from './components/appendix/web-basics/BrowserRenderingDemo.vue'
 
+// Browser & Frontend Components (a11y & i18n)
+import AccessibilityDemo from './components/appendix/browser-frontend/AccessibilityDemo.vue'
+import InternationalizationDemo from './components/appendix/browser-frontend/InternationalizationDemo.vue'
+
 // URL to Browser Components
 import UrlToBrowserQuickStart from './components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
 import FrontendEvolutionDemo from './components/appendix/web-basics/FrontendEvolutionDemo.vue'
@@ -228,6 +232,16 @@ import FoundationDemo from './components/appendix/ai-history/FoundationDemo.vue'
 import ExpertSystemWaveDemo from './components/appendix/ai-history/ExpertSystemWaveDemo.vue'
 import AIErasComparisonDemo from './components/appendix/ai-history/AIErasComparisonDemo.vue'
 
+// Transformer & Attention Components
+import TransformerQuickStartDemo from './components/appendix/transformer-attention/TransformerQuickStartDemo.vue'
+import RnnVsTransformerDemo from './components/appendix/transformer-attention/RnnVsTransformerDemo.vue'
+import SelfAttentionDemo from './components/appendix/transformer-attention/SelfAttentionDemo.vue'
+import QKVMechanismDemo from './components/appendix/transformer-attention/QKVMechanismDemo.vue'
+import MultiHeadAttentionDemo from './components/appendix/transformer-attention/MultiHeadAttentionDemo.vue'
+import TransformerArchitectureDemo from './components/appendix/transformer-attention/TransformerArchitectureDemo.vue'
+import PositionalEncodingDemo from './components/appendix/transformer-attention/PositionalEncodingDemo.vue'
+import AttentionDecompositionDemo from './components/appendix/transformer-attention/AttentionDecompositionDemo.vue'
+
 // AI Protocols Components
 import McpVisualDemo from './components/appendix/ai-protocols/McpVisualDemo.vue'
 import A2AVisualDemo from './components/appendix/ai-protocols/A2AVisualDemo.vue'
@@ -636,6 +650,7 @@ import SqlDemo from './components/appendix/data/SqlDemo.vue'
 import DataModelsDemo from './components/appendix/data/DataModelsDemo.vue'
 import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
 import DataAnalysisDemo from './components/appendix/data/DataAnalysisDemo.vue'
+import DataTrackingDemo from './components/appendix/data/DataTrackingDemo.vue'
 
 export default {
   extends: DefaultTheme,
@@ -843,6 +858,11 @@ export default {
     app.component('UrlParserDemo', UrlParserDemo)
     app.component('HttpExchangeDemo', HttpExchangeDemo)
     app.component('BrowserRenderingDemo', BrowserRenderingDemo)
+
+    // Browser & Frontend Components Registration (a11y & i18n)
+    app.component('AccessibilityDemo', AccessibilityDemo)
+    app.component('InternationalizationDemo', InternationalizationDemo)
+
     app.component('FrontendEvolutionDemo', FrontendEvolutionDemo)
     app.component('SliceRequestDemo', SliceRequestDemo)
     app.component('ResponsiveGridDemo', ResponsiveGridDemo)
@@ -873,6 +893,16 @@ export default {
     )
     app.component('GPTEvolutionDemo', GPTEvolutionDemo)
 
+    // Transformer & Attention Components Registration
+    app.component('TransformerQuickStartDemo', TransformerQuickStartDemo)
+    app.component('RnnVsTransformerDemo', RnnVsTransformerDemo)
+    app.component('SelfAttentionDemo', SelfAttentionDemo)
+    app.component('QKVMechanismDemo', QKVMechanismDemo)
+    app.component('MultiHeadAttentionDemo', MultiHeadAttentionDemo)
+    app.component('TransformerArchitectureDemo', TransformerArchitectureDemo)
+    app.component('PositionalEncodingDemo', PositionalEncodingDemo)
+    app.component('AttentionDecompositionDemo', AttentionDecompositionDemo)
+
     // AI Protocols Components Registration
     app.component('McpVisualDemo', McpVisualDemo)
     app.component('A2AVisualDemo', A2AVisualDemo)
@@ -1290,6 +1320,7 @@ export default {
     app.component('DataModelsDemo', DataModelsDemo)
     app.component('ABTestingDemo', ABTestingDemo)
     app.component('DataAnalysisDemo', DataAnalysisDemo)
+    app.component('DataTrackingDemo', DataTrackingDemo)
   },
   setup() {
     const route = useRoute()
diff --git a/docs/zh-cn/appendix/3-browser-and-frontend/a11n-i18n.md b/docs/zh-cn/appendix/3-browser-and-frontend/a11n-i18n.md
index b78aefa..745987e 100644
--- a/docs/zh-cn/appendix/3-browser-and-frontend/a11n-i18n.md
+++ b/docs/zh-cn/appendix/3-browser-and-frontend/a11n-i18n.md
@@ -1,3 +1,82 @@
-# 无障碍与国际化
+# 网页的隐藏维度：国际化与无障碍
 
-> 待实现
+::: tip 核心导读
+**什么是 i18n 及其来龙去脉？**
+在前端和软件工程领域，我们常说的 **i18n** 其实就是指 **多语言支持（国际化，Internationalization）**。因为这个英文单词的首字母 `i` 和尾字母 `n` 之间恰好相隔了 18 个字母，为了书写简便，业界便发明了这个特定的缩写。
+同理，**无障碍访问（Accessibility）** 也因为首字母 `a` 与尾字母 `y` 之间有 11 个字母，因此被统称为 **a11y**。
+
+在浏览器将代码渲染出五彩斑斓的网页背后，其实还并行着两条肉眼往往看不见的“暗线”：
+当你输入网址访问网页时，浏览器怎么知道该给你展示中文还是德文（即 i18n 多语言流程）？在浏览器将 HTML 解析成 DOM 树准备画图的同时，又是如何专门为视障人士构建出另一棵“盲文树”的（即 a11y 无障碍流程）？
+
+本章我们将再次回到“网页访问与渲染”的微观流程中，解码浏览器及前端工程在这两个体现技术人文关怀的领域是如何默默工作的。
+:::
+
+---
+
+## 1. 网页访问中的语言协商 (i18n)
+
+当我们输入一个网址、按下回车，浏览器在向服务器发送 HTTP 请求时，通常会默默附带一个头信息：`Accept-Language`。
+- *例如：`Accept-Language: zh-CN,zh;q=0.9,en;q=0.8`*
+
+这就好比你在餐厅点单前，浏览器私下对服务员说：“我的主人优先看简体中文，如果没有的话，英文也凑合能看。” 这就是 Web 访问时的**初次协商**。
+
+### 1.1 前端工程与字典替换
+而在现代前端框架中，页面的骨架通常是由 JavaScript 在本地动态生成的。在这个阶段，前端应用会主动读取浏览器的本地偏好（例如通过 `navigator.language` API），然后从服务器按需拉取对应的语言“字典包（JSON）”——遇到中文显示“确定”，遇到英文字典则显示“Confirm”。
+
+### 1.2 排版的深渊：文字长度与 RTL 镜像
+但除了字典替换，真正的国际化在浏览器布局（Layout）阶段面临着深渊般的挑战。
+
+不同的语言表达相同的含义时，所需的字母长度可能天差地别。例如德语常将多个词根拼接成巨长的单词。如果我们在编写 CSS 时使用绝对固定宽度，很容易在切换德语时出现文字撑破容器的惨状。因此浏览器鼓励使用弹性盒模型（Flexbox）来自适应不同的文字体量。
+
+更为颠覆的挑战在于阅读方向。阿拉伯语（Arabic）、希伯来语（Hebrew）等语言的阅读习惯是**从右向左（Right-to-Left, 简称 RTL）**。
+当页面切换到这类语言时，不仅仅是文本方向要变，**浏览器引擎还需要对整个网页的内容块进行水平方向的镜像反转**！浏览器为此提供了原生的 `dir="rtl"` 属性。我们在编写 CSS 时，应当避免使用绝对的方向词，例如用 Flexbox 的 `justify-content: flex-start` 来替代硬编码的 `margin-left`，从而让浏览器能够随着区域切换自动化反转布局。
+
+### 1.3 告别正则：拥抱浏览器的 Intl 标准
+除了界面排版，浏览器底层还自带了一个强大的“本地化格式引擎”。
+对于同样的数字 `1200.5`，美国人习惯看到 `$1,200.50`，而欧洲许多国家习惯用逗号做小数点 `€ 1.200,50`。日期格式更是千奇百怪。
+
+现代浏览器暴露了 **`Intl` 核心对象**（例如 `Intl.DateTimeFormat` 和 `Intl.NumberFormat`）。依靠这个 API，我们在代码里只要指明当前环境代号，浏览器便会直接调用底层的操作系统数据规范，准确生成符合当地习惯的展示字符串。
+
+👇 操作下方组件，观察在不改变源数据的前提下，浏览器是如何通过底层 API 完成布局反转（RTL）与系统级数据转换的：
+
+<InternationalizationDemo />
+
+---
+
+## 2. 浏览器内部的无形之树 (a11y)
+
+回到浏览器渲染引擎。我们都知道，浏览器解析 HTML 时会生成一棵 **DOM 树**，然后再结合 CSS 计算生成用于绘制界面的**渲染树 (Render Tree)**。
+
+但鲜为人知的是，在网页访问时，浏览器实际上还在并行构建一棵专供操作系统“看”的树——**AOM 树（Accessibility Object Model，无障碍对象模型）**。
+
+### 2.1 屏幕阅读器与语义化的本质
+为了让视力障碍用户使用计算机，操作系统内置了**屏幕阅读器（Screen Reader）**辅助软件（如 macOS 的 VoiceOver）。这类软件“看不见”屏幕的颜色像素，它们**完全依赖浏览器暴露出来的 AOM 树来朗读网页**。
+
+如果开发者用普通 `<div>` 标签加 CSS 样式，画出了一个外观无可挑剔的按钮，在常规的渲染树中它是完美的。但在屏幕阅读器连接的 AOM 树中，它只是一个毫无意义的纯文本节点。视障用户既无法听到“按钮”提示，也无法用 `Tab` 键选中它。
+
+因此，为何我们要反复强调**“坚持使用语义化的 HTML 标签”**？因为当你使用 `<button>`、`<nav>` 或 `<a>` 标签时，浏览器引擎会自动在 AOM 树里补全它们内置的焦点管理与角色(Role)信息。语义化，本质上是给视障工具绘制出的高质量蓝图。
+
+### 2.2 WAI-ARIA：手动修剪 AOM 树
+在现代 Web 应用中，有很多复杂的定制交互组件（例如弹窗面板、带开关动画的手风琴菜单），浏览器原生标签无法完全覆盖。此时就需要利用 **WAI-ARIA** 规范。
+
+ARIA 本质上是一组特殊的 HTML 属性，**它们不会改变任何视觉呈现，唯一的使命就是向浏览器发送强行修改 AOM 树节点的指令**：
+- `aria-label`：给缺失可见文字的元素补充朗读说明（例如仅一个图标的“关闭”按钮）。
+- `aria-hidden="true"`：告诉浏览器，这个节点仅具装饰性，不要将它塞入 AOM 树中。
+- `role="alert"`：告诉浏览器这个区域极其关键，如果其内容刷新，需要立刻打断当前的语音阅读器进行插播。
+
+👇 体验以下通过 AOM 树感知到的两个截然不同的“世界”：
+
+<AccessibilityDemo />
+
+---
+
+## 3. Web 为所有人服务
+
+结合我们在前面章节所学的网络层与浏览器渲染知识，我们可以重新理解这个宏大的图景：
+
+| 网页访问维度 | 浏览器与工程师共同的职责 | 想要消弭的鸿沟 |
+| :--- | :--- | :--- |
+| **国际化 (i18n)** | 通过请求头协商、基于 Intl API 格式化、弹性支持 RTL 布局镜像反转。 | 跨越**语言与文化的鸿沟**，让应用能够无缝匹配不同国家的语言规范及排版直觉。 |
+| **无障碍访问 (a11y)** | 除了构建渲染树，还要基于语义化 HTML 和 ARIA 规范构建高清晰度的 **AOM 树**。 | 跨越**生理与设备的鸿沟**，将控制权平滑地交接给屏幕阅读器等辅助工具。 |
+
+真正的资深工程师，在其代码编译出绚丽界面的背后，依然精心雕琢着那些看不见的通信头和语义树，使得 Web 的能量能辐射至使用着完全不同语言或操作设备的每一种普通人。这就是 Web 作为全球最大平台最底气十足的人文底色。
diff --git a/docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md b/docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md
index 974ccd5..7b97c7b 100644
--- a/docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md
+++ b/docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md
@@ -2,7 +2,9 @@
 
 ::: tip 🎯 核心问题
 
-以前的网页只能展示干巴巴的文字和图片。但如果你想做打砖块游戏、华丽的动态特效、或是可以自由拖拽的数据报表呢？这就是 **Canvas（画布）** 诞生的原因。
+以前的网页只能展示干巴巴的文字和图片。但如果你想做打砖块游戏、华丽的动态特效、或是可以自由拖拽的数据报表，仅仅靠 `<div>` 是远远不够的。这就是 **Canvas（画布）** 诞生的原因。
+
+本指南将带你从画下第一条线开始，一路打怪升级，最终亲手写出能在浏览器中流畅运行 60 帧的粒子引擎。
 
 :::
 
@@ -10,52 +12,53 @@
 
 ## 1. 什么是 Canvas？
 
-如果说早期的那些 HTML 标签（如 `<div>`、`<img>`）是用**乐高积木**拼起一个静态的网页，那么 HTML5 的 `<canvas>` 标签就是扔给你一张**巨大的数字白纸**，然后递给你一支靠代码控制的**画笔**，剩下的全交给你自由发挥。
+如果说早期的网页是用**乐高积木**（HTML 标签）拼凑起来的静态模型，那么 HTML5 的 `<canvas>` 标签就是扔给你一张**巨大的数字白纸**，然后递给你一支靠代码控制的**画笔**，剩下的全交给你自由发挥。
 
-这里面的画没有任何标签结构，你用画笔涂上去的心血，一旦落笔就变成了最纯粹的**“像素颜料”**。
+这里面的画没有任何标签结构。你用画笔涂上去的心血，一旦落笔就变成了最纯粹的**“像素颜料”**。
 
 ### 1.1 Canvas vs SVG：两种不同流派的艺术家
 
 在前端画图界，Canvas 有个宿敌叫 **SVG**。它们代表了两种截然不同的绘画观念：
 
-**Canvas（位图画板）：**
-* **原理**：就像真实在纸上涂色，几笔画上去就变成一团颜料。
-* **优势**：电脑只管往屏幕上“洒颜料”，性能起飞！能同时画出大几千个活蹦乱跳的闪烁粒子。
-* **缺点**：画完就没法单独反悔（没法被 DOM 直接选择），而且你用浏览器一旦放大，画面就会马赛克发虚。
-
-**SVG（矢量图拼接）：**
-* **原理**：就像在做幻灯片（PPT）。你画一个圆，它就生成一个圆圈的“实体对象”放在画面上。
-* **优势**：不管被放大成 100 倍还是 10 万倍，永远极其清晰。而且因为每一个形状都是一个独立标签，你可以在任何时候用鼠标点中某个小正方形，命令它换一种颜色。
-* **缺点**：如果你试图放几万个对象乱飞，繁重的排版引擎会直接把浏览器卡死。
+- **Canvas（位图画板）：**
+  - **原理**：就像真实在纸上涂色，几笔画上去就变成一团颜料（像素点）。
+  - **优势**：电脑只管往屏幕上“洒颜料”，性能起飞！能同时画出大几千个活蹦乱跳的闪烁粒子。
+  - **缺点**：画完就没法单独反悔（没法通过 DOM 节点选择），且放大会造成马赛克发虚。
+- **SVG（矢量图拼接）：**
+  - **原理**：就像做 PPT。你画一个圆，它就生成一个独立标签的“圆实体”放在画面上。
+  - **优势**：不管放大 100 倍还是 10 万倍，永远极其清晰。每个形状都是独立的 DOM 节点，你可以随时用 CSS 和 JS 改变它的颜色或绑定点击事件。
+  - **缺点**：如果你试图放几万个对象乱飞，繁重的 DOM 树和排版引擎会直接把浏览器卡死。
 
 **🎮 简单总结：玩动态游戏、做酷炫粒子特效用 Canvas；画精密的 Logo、写交互清晰的小图表用 SVG。**
 
 ---
 
-## 2. 第一笔：用代码找坐标
+## 2. 第一笔：理解反直觉的坐标系
 
 ### 2.1 这张纸的上下怎么颠倒了？
 
-当你准备下笔时，得先明白 Canvas 里的尺子是反着的。对于传统的数学课坐标系，中心点零点在中间，越往上越大。
+当你准备下笔时，得先明白 Canvas 里的尺子是反着的。对于传统的数学课坐标系，中心点零点在中间，越往上越大。但在计算机屏幕显示领域，几乎所有设备的“原点（0，0）”都定在**屏幕的最左上角**。向右走 X 轴变大没问题，但是**向下走，Y 轴变大。**
 
-但在屏幕显示领域，几乎所有设备的“原点（0，0）”都定在**屏幕的最左上角**。向右走 X 轴变大没问题，但是**向下走，Y 轴变大。**
+**Canvas 坐标系统的核心原则：**
+- **原生单位：** 像素 (px)，与屏幕物理像素 1:1 对应。
+- **X 轴：** 向右为正方向，从 `0` 到 `canvas.width`。
+- **Y 轴：** 向下为正方向，从 `0` 到 `canvas.height`。
 
-👇 **动手点点看**：
-拖拽下面的这些点，直观地感受一下坐标是如何变化的：
+👇 拖拽下面的小圆点，直观感受计算机图形学中的坐标原点与走向：
 
 <CoordinateSystemDemo />
 
 ### 2.2 给你的魔法画笔上调料
 
-有了坐标，我们就能召唤那支画笔了（在代码里这支笔叫 `Context` 或简称 `ctx`）。
+有了坐标体系，我们就能召唤画笔了（代码中称为 `Context`，或缩写 `ctx`）。就如同拿着真实的调色盘作画，Canvas 的 API 设计完美遵循了物理作画的三个步骤：
 
-就像拿着调色盘作画，流程总是固定的三步：
-1. **调色**：告诉它你需要什么填充色（`fillStyle`）和描边色（`strokeStyle`）
-2. **构形**：构思你是画一个圈、还是一条直线？
-3. **下笔**：实打实地去填充（`fill( )`）还是去勾勒边缘（`stroke( )`）
+1. **调色（State）**：通过 `fillStyle` 设置填充色，`strokeStyle` 设置描边色。
+2. **构形（Path）**：构思你是要画一条线（`lineTo`）、还是一个圆（`arc`）、亦或一个矩形（`rect`）。
+3. **极简下笔（Render）**：决定是内部填充（`fill()`）还是勾勒边缘（`stroke()`）。
 
-👇 **动手点点看**：
-试试把下面代码面板里的形状颜色换换：
+由于 Canvas 是纯粹的位图画布，“落子无悔”，你一旦画下，它立刻干涸成为像素，无法再被撤销为独立对象。
+
+👇 尝试在下面的演示中挑选不同形状和颜色，看看背后的代码是如何执行上述“三步走”的：
 
 <CanvasBasicsDemo />
 
@@ -63,38 +66,36 @@
 
 ## 3. 翻页动画书：如何让画面动起来极度丝滑
 
-我们刚才说过，Canvas 一旦你填上了颜色，这就变成了永久的马赛克。你怎么可能让马赛克奔跑呢？
+既然 Canvas 一旦填色就变成了永久的像素，那么各种 HTML5 页游里满屏乱跑的角色是怎么做出来的？
 
-**答案是“骗过你的眼睛”。这和翻页手翻书或者电影胶片的原理一模一样。**
+答案是**“骗过你的眼睛”**。这和手翻动画书或者电影胶片的原理一模一样。
 
-如果你想让一个球飞起来：
-1. **擦黑板**：用 `clearRect` 把这整块画布上的内容毫不留情地清空！
-2. **挪位置**：让那个球的 X 坐标往前偷偷加 2 毫米。
-3. **下笔重画**：把球在新的位置重新画一次。
-4. **疯狂循环**：浏览器内置了一个极其精准的神仙秒表叫 `requestAnimationFrame`。它会以每秒 60 次（即 60 FPS）的变态速度，重复着【擦除 -> 移动 -> 重绘】。由于人眼自带“视觉残留”，你在屏幕上看到的，不仅不是黑板被擦，反而是如同丝绸般顺滑的动画。
+1. **擦黑板（Clear）：** 用 `clearRect()` 把整块画布上的内容毫不留情地清空。
+2. **计算新位置（Update）：** 让角色的 X 坐标往前偷偷加 2 个像素点。
+3. **下笔重画（Render）：** 把角色在新的位置重新画一次。
+4. **疯狂循环（Loop）：** 结合浏览器内置的极其精准的节拍器 `requestAnimationFrame`。它会以显示器的刷新率（通常是每秒 60 次，即 60 FPS）重复这三个动作。
 
-👇 **动手点点看**：
-尝试添加或者减少物体的数量，感受每秒 60 帧带来的无缝快感：
+由于人眼自带“视觉残留”，在每秒 60 次的【擦除 -> 更新 -> 重绘】中，你看到的不仅不是闪烁的黑板，反而是如同丝绸般顺滑的动画。
+
+👇 在下方的演示中调整播放速度，观察每一帧的位移是如何连缀成流畅运动的：
 
 <AnimationLoopDemo />
 
 ---
 
-## 4. 瞎子摸象：我在 Canvas 里面怎么点击？
+## 4. 瞎子摸象：在 Canvas 里面怎么做点击交互？
 
-因为 Canvas 画布就只是一张没有任何结构的“颜料布”。假设你在这个布上画了一只哥布林：
+因为 Canvas 画布在浏览器眼里只是一张没有任何结构的“颜料布”。假设你在画布上用 `arc()` 画了一只怪兽，当你想要实现“点击怪兽扣血”时，你**根本没法**使用传统的 `document.getElementById` 来获取这个怪兽。因为在 HTML 结构中，只有那个宽 600 像素的死板 `<canvas>` 标签。
 
-如果你想写个代码：“当玩家点中了哥布林，哥布林阵亡”。你根本没法像写普通网页那样通过 `getElementById` 去直接绑定这个外星怪物。因为在浏览器的眼里，**这里永远没有任何怪兽，只有一块宽 600 高 400 的 `<canvas>` 标签死死挡在这里**。
+这就是图形编程中最经典的问题：**碰撞检测 (Collision Detection) 与事件代理**。
 
-那我们要怎么做事件交互呢？
-1. **监听布面被点**：先获取你目前鼠标点在这个死板的 HTML 大布的哪个具体的 XY 位置。
-2. **拿账本去对**：然后你必须自己翻你的代码记录，“我记得刚刚我在（100，100）的位置画了一个半径 50 的哥布林”。
-3. **勾股定理**：我们用初中教的勾股定理公式去疯狂计算——当前鼠标点击的位置，是不是落在了那个（100，100）距离 50 半径的圆内？。
+由于浏览器只知道你的鼠标点击了 Canvas 的屏幕坐标 `(x, y)`，你需要自己去通过初中的几何数学进行反算：
+- **对于圆形：** 通过勾股定理计算 `鼠标点击处` 到 `圆心位置` 的距离，如果距离小于半径，则说明“被点中了”。
+- **对于矩形：** 判断点击的 `x` 是否在矩形的左右边界内，同时 `y` 是否在上下边界内。
 
-恭喜你！这种疯狂算几何数学距离的方法就是你在各大 3A 游戏里听过的 **“碰撞检测 (Collision Detection)”**
+无论你的画布上有多少元素，鼠标悬停或点击事件永远是绑定在 Canvas 这个唯一容器上的，这就是终极的“事件委托”。
 
-👇 **动手点点看**：
-打开最下面的“Hover 悬停模式”，你就能看到它内部拼命去算距离有多累了。
+👇 试着在下面使用鼠标（点击、拖拽、悬停）或键盘（方向键移动），体会这种“手动算距离”的底层交互逻辑：
 
 <EventHandlingDemo />
 
@@ -102,12 +103,16 @@
 
 ## 5. 解放算力：粒子系统与视觉魔法
 
-到了这一步，当你把【坐标不断重绘的动画】跟【颜色和大小变换】融合，再放进成百上千个小碎片里。这就是引爆视觉的终极杀器：**粒子系统**。
+到了这一步，当我们把“坐标系”、“动画循环”以及“颜色与形状”全部融合，并将其数量暴增到成百上千个微小碎片时，你就掌握了引爆视觉的终极杀气：**粒子系统（Particle System）**。
 
-你只需要建立一个巨大的数组，里面塞满了几百个拥有独立生命值、独立初始随机速度的数字对象。每次“重绘”，让所有的点根据重力或者惯性去减速。你的浏览器里马上就能发生逼真的大爆炸或者漫天飞雪。
+其核心思路极其粗暴且有效：
+1. 建立一个巨大的数组，里面塞满了几百个独立的“粒子对象”。
+2. 每个对象拥有自己的独立生命周期（`life`）、加速度（`vx/vy`）、重力阻尼（`gravity`）。
+3. 每次 `requestAnimationFrame` 触发时，遍历更新这几百个粒子，然后渲染，最后悄悄清理掉那些“死亡”（生命值耗尽/掉出屏幕）的粒子。
 
-👇 **动手点点看**：
-试试“烟花”和“鼠标轨迹”！
+你的浏览器一瞬间就能变成一台制造烟花、大雪和爆炸的梦工厂。
+
+👇 点击不同的效果，调整重力与粒子数，观察它们是如何通过最简单的物理数学公式呈现出复杂的群体视觉：
 
 <ParticleSystemDemo />
 
@@ -115,32 +120,35 @@
 
 ## 6. 守护 FPS 荣耀：如何应对高烧的 CPU？
 
-让成千上万个对象在一秒内计算重画 60 遍，这是极其消耗电脑算力（CPU 和内存）的。
-很多野生小白刚做出来的游戏玩了两分钟可能风扇就起飞了。下面是真正的引擎大佬使用的降温护体绝技：
+让成千上万个对象在一秒内计算并重画 60 遍是非常消耗性能的。如果毫无章法，你的电脑风扇很快就会起飞。
 
-1. **局部擦黑板（脏矩形 Dirty Rect）！** 一个角色在一望无际的草原上奔跑。你千万别每帧把整块大草原都擦了重画！角色经过哪一小块，你就用小板擦把哪里擦掉然后只补哪里的洞，这能省下几千倍的力气。
-2. **隐藏后台魔法（离屏 Canvas）！** 如果游戏背景是繁星漫天、有各种复杂绚丽的山脉。最好先偷偷在没人的后台建一个内存 Canvas 把它一次性精美地画上去。以后每秒 60 下的刷新，你直接把这幅“定格全图”通过贴图的方式贴到前端（`drawImage`）就行了。
-3. **批量洗画笔！** 如果画画时你要反复交替使用“红、蓝、红、蓝、红”这几种笔，频繁切换。可以提前把所有红色的兵全归档画完，再清空换蓝颜料画，省去了昂贵的上下文来回切换。
+以下是真正引擎大佬用来抢救帧率的“护体绝技”：
 
-👇 **动手点点看**：
-先把对象数量拉满，看着网页快掉进卡顿的深渊，再依次打开右下方的绝技进行抢救。
+1. **局部擦黑板（脏矩形 Dirty Rect）：**
+   一个角色在宽广的草原上奔跑，你千万不要每帧去 `clearRect` 整片大草原！角色经过哪一小块，你就用“小板擦”擦掉那一块并覆盖重绘，性能立刻飙升指数倍。
+
+2. **后台替身魔法（离屏 Canvas）：**
+   如果背景是繁星漫天、有着各种复杂绚丽的山脉，每次都实时渲染太蠢了。我们通常在内存里偷偷建一个看不见的 `<canvas>`，把它精美地画上去一次。之后的每一帧刷新中，只需要通过 `drawImage()` 将这张合成好的“静态底片”直接贴出，免去了海量的基础计算。
+
+3. **批量洗画笔（Batching）：**
+   调色盘里从红色换到蓝色，在底层是昂贵的。如果画布上有 1000 个红色圆和 1000 个蓝色圆交叉散落。最快的方法是：先把红颜料准备好，遍历画完所有红圈，再换蓝颜料画所有蓝圈。这是著名的批量渲染（Batch Rendering）思想。
+
+👇 将对象数量拉到 3000 以上，看着网页掉进卡顿的深渊，再依次打开右下方的“优化技术”开关，亲眼见证实打实的帧率抢救：
 
 <PerformanceDemo />
 
 ---
 
-## 7. 名词对照表
+## 7. 专业名词总结
 
-| 术语 | 解释 |
+| 术语 | 通俗解释 |
 | --- | --- |
-| **Canvas** | Html5 提供的 2D 画布。绘制极快，但画完就变成颜料像素，不支持通过 DOM 操作内容。 |
-| **SVG** | 矢量图，放大永远不模糊，且每个图形都是独立的标签元素可以单独点击绑定事件。 |
-| **Context (ctx)** | 获取到的“2D 上下文”，可以理解为用来在这张布上调各种颜色、干各种特殊效果的“画笔”。 |
-| **requestAnimationFrame** | 浏览器内置的神级节拍器，会以显示器的刷新率（通常 60FPS）不断狂飙执行，专门用来做完美动画。 |
-| **FPS / Frame Rate** | 帧率。60 FPS 代表一秒钟内浏览器帮我们默默擦除了 60 次黑板并画了 60 副新图，这骗过了视神经，看起来极其丝滑。 |
-| **Dirty Rect / 脏矩形** | 只在画面中发生变化的微小矩形区域内进行擦除和重绘，强力保留性能。 |
-| **Offscreen Canvas** | 藏在内存里的“影子画布”，把静态且复杂的树木和山脉先画好，当作死的一张贴图重复利用。 |
+| **Canvas** | HTML5 提供的 2D 画布。绘制极快，但画完就变成颜料像素，不支持通过 DOM 操作内容。 |
+| **SVG** | 矢量图。放大永远不模糊，且每个图形都是独立的标签元素，可以轻易绑定各种 CSS 样式和交互。 |
+| **Context (ctx)** | 你申请到的那支“2D 魔法画笔”，用来调色、设定形状和绘制各种特殊效果。 |
+| **requestAnimationFrame** | 浏览器内置的神级节拍器，会严格依照显示器的刷新率执行回调，是制作丝滑动画的不二之选。 |
+| **FPS (Frame Rate)** | 帧率。60 FPS 代表一秒内浏览器帮你无缝擦除了 60 次画布并重画了 60 副新图。 |
+| **脏矩形 (Dirty Rect)** | 只在发生变化的那一点微小区域内进行精准擦除和重绘，从而强力保留性能。 |
+| **离屏 Canvas** | 藏在内存里的“影子画布”。把极度复杂但不会动的景物提前画好，以后就当死贴图拿来重复使用。 |
 
----
-
-现在，不管是一把简单的魔法画笔、还是由万千雪花组成的宏大粒子系统，整个能够不断刷新重绘的数字世界引擎，都在你的掌控之中了！
+> 从一条简单的直线段，到宏大绚丽的粒子系统引擎；一切看似魔法的特效，不过是每秒 60 次的坐标计算与重绘轮回罢了。
diff --git a/docs/zh-cn/appendix/3-browser-and-frontend/realtime-communication.md b/docs/zh-cn/appendix/3-browser-and-frontend/realtime-communication.md
index 7801665..77aa388 100644
--- a/docs/zh-cn/appendix/3-browser-and-frontend/realtime-communication.md
+++ b/docs/zh-cn/appendix/3-browser-and-frontend/realtime-communication.md
@@ -1,3 +1,75 @@
-# 实时通信（WebSocket / SSE）
+# 实时通信机制（Polling / SSE / WebSocket）
 
-> 待实现
+::: tip 核心导读
+**浏览器如何实现数据的实时更新？** 
+传统的 HTTP 协议基于“请求-响应”模型，客户端必须主动发起请求，服务端才能返回数据。如果我们需要实现聊天室、股票行情推送等实时场景，这种模型将面临挑战。
+
+本章将介绍前端应对实时数据通信的三种主要技术：短轮询（Polling）、服务器推送事件（SSE）与全双工 WebSocket，并探讨它们的原理与适用场景。
+:::
+
+---
+
+## 1. 传统 HTTP 的局限性
+
+HTTP 协议的设计初衷是用于文档检索，它具有**无状态（Stateless）**和**由客户端单向发起**的特点：
+1. 客户端发起 HTTP 请求。
+2. 服务端处理请求并返回响应。
+3. 连接完成任务后通常会释放对应的逻辑请求（HTTP/1.1 虽然支持长连接复用，但业务层面的请求-响应模型并未改变）。
+
+在此模式下，服务端无法主动将状态的改变随时通知正在等待的客户端。为了获取最新数据，必须寻找其他技术架构方案。
+
+---
+
+## 2. 短轮询（Polling）
+
+最直接的解决方案是**短轮询**。即客户端利用定时器（如 `setInterval`），每隔一段固定的时间，自动向服务端发送 HTTP 请求，询问是否有新数据到达。
+
+<PollingDemo />
+
+**技术特点与局限：**
+- **优点**：实现机制极其简单，完全依赖标准的 HTTP 协议和 AJAX/Fetch 技术。
+- **缺点**：可能产生巨大的网络开销与资源浪费。大多数时间里，服务端的响应可能是“无新数据”。无论有无数据，每次请求都需要携带完整的 HTTP 头部（Headers、Cookies 等），在并发量较高的场景下，会导致网络资源被大量无意义的查询占据。
+
+---
+
+## 3. 服务器推送事件（Server-Sent Events）
+
+为了降低频繁建立 HTTP 连接的开销，**Server-Sent Events (SSE)** 提供了一种轻型的单向数据流推送架构。
+
+SSE 建立在 HTTP 协议之上。客户端发起一个包含特殊请求头（`Accept: text/event-stream`）的 HTTP 请求后，服务端在返回响应时会保持底层的 TCP 连接不断开。随后，服务端可以通过这条持久的通道，持续不断地向客户端推送文本格式的数据。
+
+<SSEDemo />
+
+**技术特点与局限：**
+- **优点**：连接持久化，网络开销小；浏览器原生支持断线自动重连机制；非常适合从服务端向客户端**单向**传输流式数据（例如大语言模型的文本逐字输出、实时交易行情推送）。
+- **缺点**：通信通道是单向的。如果客户端需要向服务端发起控制指令或发送新数据，必须另外建立普通的 HTTP 请求。
+
+---
+
+## 4. WebSocket：全双工通信协议
+
+当应用场景涉及高频的双向交互（如多人在线动作游戏、精密的协同文档编辑）时，我们需要一种既能降低通信开销，又能实现真正双工通信的技术——**WebSocket**。
+
+WebSocket 是一种独立的网络通信协议。它精妙地借助了 HTTP 协议来完成初始建连：
+1. **握手阶段**：客户端发送一个特殊的 HTTP 请求，声明希望将其升级为新协议（携带 `Upgrade: websocket` 头部）。
+2. **连接质变**：服务端若支持并同意该协议，则回复 `101 Switching Protocols` 状态码。
+3. **彻底自由**：此时 HTTP 的规范使命结束，底层的 TCP 连接被移交给 WebSocket 协议。此后，客户端与服务端享有平等的全双工（Full-Duplex）通信权利，双方可随时收发极简格式的数据帧。
+
+<WebSocketDemo />
+
+**技术特点与局限：**
+- **优点**：支持真正意义上的双向实时通信；数据帧的头部信息极小，通信延迟低、吞吐效率高；支持原生二进制数据（ArrayBuffer）的传输。
+- **缺点**：架构与开发复杂性较高；由于维护着持久长连接，对服务器端的系统架构、负载均衡策略和心跳监测设计提出了更严格的工程要求。
+
+---
+
+## 5. 总结：技术选型对比
+
+| 维度 | 短轮询 (Polling) | 服务器推送事件 (SSE) | WebSocket |
+| :--- | :--- | :--- | :--- |
+| **通信方向** | 客户端主动轮询拉取 (单向) | 服务端持续主动推送 (单向) | 客户端与服务端享有平等收发权 (双向全双工) |
+| **底层协议** | 标准 HTTP | 标准 HTTP | 独立的 WebSocket 协议 (基于 TCP) |
+| **数据开销** | 极高 (包含完整的 HTTP 头部) | 较低 | 极低 (极简的数据帧头部) |
+| **典型应用场景** | 定时检查后台异步任务的完成状态 | 大模型对话单向流输出、新闻或系统通知推送 | 实时音视频信令、多人在线对战、协同白板与编辑 |
+
+在实际工程中，开发者应依据具体业务场景对实时性与双向交互频率的要求，在系统的维护复杂度和通信效率之间取得平衡，选择最契合的技术栈。
diff --git a/docs/zh-cn/appendix/4-server-and-backend/client-languages.md b/docs/zh-cn/appendix/4-server-and-backend/client-languages.md
index 7d4bc16..f5083ac 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/client-languages.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/client-languages.md
@@ -1,3 +1,141 @@
-# 客户端语言对比（Swift / Kotlin / Dart）
+# 客户端语言（Swift / Kotlin / Dart）
 
-> 待实现
+::: tip 🎯 核心问题
+**"在移动端应用开发中，应如何进行语言选型？"** 本章将介绍客户端开发的基本概念，梳理移动端编程语言的演进脉络，并详细剖析当前主流的客户端开发语言及其适用场景，帮助读者建立系统性的语言选型认知。
+:::
+
+---
+
+## 1. 客户端开发概述
+
+在现代软件架构中，系统通常由**服务端（Server端，或后端）**与**客户端（Client端，或前端）**两部分构成。
+
+- **服务端**：运行在云端服务器，负责核心业务逻辑处理、数据存储与高并发计算。
+- **客户端**：直接运行在用户的终端设备（如智能手机、平板电脑、PC）上，负责界面的渲染展示、响应用户交互（点击、手势等）以及与硬件底层的通信。
+
+在移动互联网语境下，**"客户端开发"通常特指针对 iOS 和 Android 操作系统的原生应用（Native App）开发**。相比于网页环境，原生客户端开发具有极其重要的优势：它能够深度调用设备的底层硬件能力，如摄像头、GPS 定位、生物识别（面部/指纹解锁）、各类传感器及触觉反馈马达等，从而提供远超网页的极致性能与交互体验。
+
+---
+
+## 2. 移动端语言的适用场景与边界：何时必须使用特定语言？
+
+在进行客户端开发语言选型时，不能脱离具体的业务需求与工程背景。即便现代跨平台技术（如 Flutter / Dart）发展迅猛，但在特定的极客标准与工程红线面前，原生语言（Swift / Kotlin）依旧是无法绕开的唯一解。这就要求架构师必须清晰界定各类语言的应用边界。
+
+### 2.1 适宜拥抱跨平台语言（Dart / Flutter）的典型场景
+
+在以下工程场景中，采用 Dart 等具备跨端潜质的语言架构往往能展现出压倒性的投入产出比优势：
+
+1. **信息展示与内容分发型矩阵应用**：如新闻资讯客户端、在线教育课件容器、企业内部协同 OA 系统等。此类应用以静态图文排版、表单化结构布局和标准的 HTTP 网络请求为主，对底层硬件的并发调度要求极低。
+2. **初创期 MVP（最小可行性产品）验证与敏捷商业试错**：处于发展初期的初创项目或新业务线探索团队，资金储备与时间窗口极为有限。跨平台语言允许团队以单倍的人力储备，在单一代码仓库上迅速构建横跨 iOS 和 Android 的完整原型系统，加速入市投产验证。
+3. **强设计主导的弱交互轻量前端**：基于企业内部标准化的 Design System（设计规范），强制要求 Android 和 iOS 多端在控件样式、边距规范甚至微动效上达到像素级的 100% 绝对同一性。
+
+### 2.2 何时必须坚守深耕原生语言（Swift / Kotlin）？
+
+然而，在涉及极致性能榨取或需要绕开标准通用封装的深海工程区，必须彻底摒弃技术妥协，坚决采用纯血正统的原生语言体系：
+
+1. **系统级常驻服务与内核底层的深度协同**：如深度集成于操作系统底层级 API 的各类创新工具（如苹果生态刚发布的"灵动岛"实时流、iOS 小组件 Widget、跨应用级通知扩展）。这类高度依赖系统迭代首发特性的业务，任何非纯原生语言的中间封装层都会导致严重的不可预测行为与接入延迟。
+2. **重度 3A 级图形渲染计算与实时游戏**：如对渲染流水线负荷、显卡 Draw Call 频次及每秒刷新帧率（60 - 120 FPS）具有极度苛刻要求的图形应用。现代原生方案往往要求 Swift 开发者直接下沉运用 Metal 等高性能协议层；要求 Kotlin/C++ 开发者深度干预 OpenGL / Vulkan 等底层图形接口体系，这是任何跨端中介语言均无法满足的算力天堑。
+3. **高灵敏度的硬件外设独占式调度**：如极高保真的混音编曲软件、多轨视频实时剪辑、低延迟的外接智能硬件总线通信（例如工业级无人机遥测控制基站或专业级心电监测设备）。原生语言所具有的最短命令执行路径（不经过框架桥接序列化）是保障此类应用稳定与不崩溃的底座。
+4. **追求绝对物理平顺极限的骨干级应用交互**：在极其复杂的全屏高频级联滑动、高度定制且包含大量弹簧阻尼模型的回弹交互等极客流应用（如国民级即时通讯应用的主会话列表）中，系统内置的原生 UI 管道依旧具备毫无争议的支配级丝滑度。
+
+---
+
+## 3. 移动端语言的演进脉络
+
+早期的移动端开发受限于历史遗留的语言设计，开发体验较为复杂繁重。近年来，随着软件工程理念的进步，现代编程语言逐渐取代了传统语言。
+
+### 3.1 从繁冗向现代化的转型
+
+在移动互联网发展的早期阶段，开发者必须掌握两种截然不同的语言体系：
+- **iOS 平台（Objective-C）**：作为 C 语言的严格超集，其语法结构较为古老，缺乏现代语言的诸多便利特性，且早期的手动内存管理极易引发内存泄漏与程序崩溃。
+- **Android 平台（早期 Java）**：虽然 Java 生态庞大，但早期 Android 系统支持的 Java 版本较老，导致开发者需要编写大量形式化且冗长的"样板代码"（Boilerplate Code）。
+
+<div style="display: flex; gap: 20px; margin: 20px 0;">
+<div style="flex: 1; padding: 16px; border: 1px solid #e4e7ed; border-radius: 12px;">
+
+**传统开发阶段**
+- **iOS 语言**：Objective-C（语法沉重、学习曲线陡峭）
+- **Android 语言**：Java（代码冗长、异常处理繁琐）
+- **界面构建**：主要依赖可视化拖拽或基于 XML 等配置文件，在面对多屏幕尺寸适配时维护成本极高。
+
+</div>
+<div style="flex: 1; padding: 16px; border: 1px solid #e4e7ed; border-radius: 12px;">
+
+**现代开发阶段**
+- **iOS 语言**：Swift（安全、高效、表达力强）
+- **Android 语言**：Kotlin（简洁、具备强互操作性）
+- **跨平台方案**：Dart / Flutter 等
+- **界面构建**：全面转向"声明式 UI"（通过代码直接描述界面状态，系统自动进行响应式重绘）。
+
+</div>
+</div>
+
+为解决工程痛点并提升研发效能，苹果公司与谷歌公司分别推出了 Swift 和 Kotlin 语言。这些现代语言在设计之初就引入了诸多旨在提升安全性与开发效率的新特性。
+
+### 3.2 核心特性剖析：空安全（Null Safety）机制
+
+在传统语言（如早期 Java）中，最常见的程序崩溃原因之一是"空指针异常"（NullPointerException）。这通常发生于程序尝试访问一个尚未被赋值（初始化）或并不存在的对象引用时。在复杂的业务逻辑中，这种异常极难在编译阶段被完全拦截。
+
+**现代语言的解决之道：空安全（Null Safety）机制**
+Swift 与 Kotlin 均在编译器层面引入了严格的空安全检查。它们强制要求开发者在声明变量时，明确标定该变量是否允许为空（即"可选类型"）。
+借助这一机制，编译器会在代码运行前执行静态分析。若侦测到潜在的空对象访问风险，将直接拒绝编译。**这种将"运行时不确定的崩溃风险"转化为"编译时明确的错误提示"的设计范式，极大地提升了移动端应用的整体稳定性。**
+
+---
+
+## 4. 主流客户端语言详解
+
+在当前的移动端开发领域，主要存在三种语言体系，分别对应着不同的平台战略与技术生态。
+
+### 4.1 Swift：苹果生态的核心基石
+
+::: tip 💡 语言定位
+Swift 由苹果公司于 2014 年正式发布，旨在全面接替 Objective-C。作为构建 iOS、iPadOS、macOS 等全线苹果系统应用的首选语言，其设计理念强调：安全（Safe）、快速（Fast）与强表现力（Expressive）。
+:::
+
+**核心优势**：
+1. **现代化语法体系**：Swift 抛弃了 C 语言的沉重包袱，具备类型推断、泛型、模式匹配等高度现代化的编程特性，代码可读性极强。
+2. **声明式 UI 框架引擎（SwiftUI）**：配合苹果推出的 SwiftUI，开发者可以通过极为精简的声明式代码结构构建复杂的用户界面，且状态改变时，框架会自动完成高效的视图差量更新与渲染。
+
+**局限性**：
+Swift 深度绑定于苹果的闭环生态。要进行原生的 iOS 或 macOS 开发并进行编译打包，开发者必须依赖运行于 macOS 操作系统之上的专属集成开发环境（Xcode）。
+
+---
+
+### 4.2 Kotlin：Android 开发的新标准
+
+::: tip 💡 语言定位
+Kotlin 是由知名开发工具厂商 JetBrains 研发的静态类型编程语言。由于早期 Android 平台的 Java 演进缓慢，谷歌于 2017 年宣布在 Android 系统中引入 Kotlin 支持，并于 2019 年正式确立其为 Android 开发的首选语言（Kotlin First）。
+:::
+
+**核心优势**：
+1. **100% 的 Java 互操作性**：Kotlin 底层运行于 JVM（Java 虚拟机）之上，这意味着它能无缝对接并复用已有的所有 Java 代码与第三方开源库。企业可以在不推翻现有 Java 历史项目的前提下，平滑地引入 Kotlin 进行新功能开发。
+2. **极简的代码表达**：相比传统 Java，Kotlin 削减了大量的形式化样板代码，提升了代码的信噪比。
+3. **强大的并发模型（协程 Coroutines）**：移动端应用中存在大量如网络请求、本地数据读取等耗时阻塞操作。Kotlin 引入了轻量级的"协程"机制，允许开发者以编写同步线性代码的思维，来处理极其复杂的异步并发逻辑，有效避免了代码的"回调地狱"（Callback Hell）。
+
+---
+
+### 4.3 Dart：驱动跨平台渲染引擎的特种语言
+
+::: tip 💡 语言定位
+Dart 是由谷歌研发的编程语言。其真正进入主流视野，得益于跨端 UI 渲染框架 Flutter 的崛起。Flutter 的核心设计目标是"使用一套源代码构建高度一致的多平台应用"，而 Dart 则是 Flutter 所唯一指定使用的开发语言。
+:::
+
+**核心优势**：
+1. **双重编译机制的极致工程体验**：
+   - 在开发阶段（Debug），Dart 采用 **JIT（即时编译）**技术，提供了被称为"热重载"（Hot Reload）的特性。开发者修改界面代码后，设备屏幕能在亚秒级内即时反馈，无需重新安装应用，极大提升了 UI 调试的研发效能。
+   - 在发布部署阶段（Release），Dart 采用 **AOT（提前编译）**技术，将代码编译为极具执行效率的底层机器码，从而保证了接近原生的运行性能。
+
+**局限性**：
+除依托于 Flutter 体系进行界面开发外，Dart 在纯后端服务、系统底层开发等其他技术领域的普及度与生态厚度依旧较为匮乏。它是在特定跨端领域内高度垂直的特化语言。
+
+---
+
+## 5. 总结：客户端语言选型建议
+
+在进行实际的工程技术栈选型时，应基于项目的明确需求、团队现有的资源储备以及产品的目标受众进行综合考量：
+
+| 开发场景与战略目标 | 推荐技术栈 | 核心工程依据 |
+|-------------|----------|------|
+| **深耕苹果生态，构建极高体验上限的纯 iOS/macOS 商业级应用** | 🍎 **Swift** | 享受苹果官方第一方技术红利，具备最极致的系统级渲染性能、最深层次的硬件调度能力及最纯正的视觉动效表现。 |
+| **聚焦 Android 市场，或需维护庞大的原生 Android 遗留业务** | 🤖 **Kotlin** | Android 开发领域的业界最高标准。其极强的 Java 互操作性降低了试错成本，极大提升了中大型工程的代码可维护性。 |
+| **初期团队规模较小，需兼顾成本并达成 iOS/Android 双端快速发布验证** | 🦋 **Dart (Flutter)** | 跨平台落地方案的优选。通过代码的复用显著压降研发与人力成本，是追求"极速试错、快速迭代"的敏捷型商业团队的高性价比路线。 |
diff --git a/docs/zh-cn/appendix/4-server-and-backend/cross-platform.md b/docs/zh-cn/appendix/4-server-and-backend/cross-platform.md
index 8b5fbd8..33c402d 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/cross-platform.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/cross-platform.md
@@ -1,3 +1,95 @@
-# 跨平台方案对比（React Native / Flutter / Electron / Tauri）
+# 跨平台方案（React Native / Flutter / Electron / Tauri）
 
-> 待实现
+::: tip 🎯 核心问题
+**"在软件工程中，为何需要跨平台技术？它能否彻底替代原生开发？"**
+"一次编写，到处运行"（Write once, run anywhere）始终是软件工程领域的终极愿景之一。本章将深入探讨跨平台开发的核心概念、底层架构流派原理，并客观剖析跨平台方案的适用边界及其在特定场景下面临的技术折中。
+:::
+
+---
+
+## 1. 跨平台开发概貌
+
+### 1.1 原生开发的困局与跨平台的核心驱动力
+
+在传统的**"原生开发（Native Development）"**模式下，企业若需要在全终端（iOS、Android、Windows、macOS）部署同一款软件产品，必须分别组建具备不同技术栈的独立研发团队：
+- 针对苹果移动端需使用 Swift / Objective-C
+- 针对安卓移动端需使用 Kotlin / Java
+- 针对桌面端需使用 C++ / C# 等语言
+
+这种完全隔离的工程模式不仅导致了极高的人力成本投入，更造成了多端业务逻辑的重复实现。产品功能迭代的同步率极难保证，多端各自的缺陷（Bug）修补也严重拖慢了研发效能。
+
+**"跨平台开发（Cross-Platform Development）"**技术正是为解决这一工程痛点而生。其核心策略是：通过构建一套高度抽象的中间层（通常基于 JavaScript、TypeScript 或 Dart 等技术栈），使开发者能够维护单一维度的源代码仓库，再通过框架工具链的转译、打包和桥接，最终生成适配不同操作系统的客户端程序。这在极大程度缩减研发时间周期的同时，降低了整体软硬件维护成本。
+
+---
+
+## 2. 跨平台方案的技术边界：何时适合使用？何时必须坚守原生？
+
+虽然跨平台技术在降本增效方面展现出巨大商业价值，但依据计算机科学中经典的"抽象泄漏定律（The Law of Leaky Abstractions）"，任何试图跨越操作系统底层差异的封装，都必然伴随着性能损耗与功能特性的妥协。这就要求架构师必须清晰界定跨平台技术的适用范围。
+
+### 2.1 适宜采用跨平台架构的典型场景
+
+在以下工程场景中，跨平台方案往往能展现出压倒性的投入产出比优势：
+
+1. **信息展示与内容分发型应用**：如新闻资讯客户端、在线教育课件容器、企业内部 OA 系统等。此类应用以图文排版、表单结构和标准的网络请求为主，对底层硬件的调度要求极低，跨平台框架的性能表现与原生开发几乎无肉眼差异。
+2. **重度依赖业务逻辑快速迭代的商业应用**：如电商导购、外卖服务、打车软件等高频在线存量业务。这类系统高度依赖代码的热重载与远程下发（如 React Native 体系的 CodePush），使得开发团队可以绕过应用商店漫长的审核周期，完成页面级的高频更迭或 A/B 测试。
+3. **初创期 MVP（最小可行性产品）验证与敏捷商业试错**：处于发展初期的初创项目或新业务探索团队，资金与时间窗口极为有限。跨平台技术允许团队以最低限度的技术冗余，在单一代码库上迅速构建起横跨 iOS 和 Android 的完整原型系统，加速投入市场进行商业验证。
+4. **统一设计规范驱动下的弱交互轻量前端**：基于内部标准化的 Design System，要求 Android 和 iOS 多端的按钮样式、边距规范达到像素级 100% 同一性（这一点正是 Flutter 天然自建渲染基底的强项领域）。
+
+### 2.2 跨平台并非"银弹"：何时必须坚守原生技术栈
+
+然而，跨平台方案绝非适用于所有场景的万能解药。在以下涉及极致性能或底层深度的工程深水区，必须坚决退回采用纯血正统的**原生技术栈（Swift / Kotlin / C++）**：
+
+1. **重度 3A 级图形渲染与实时游戏**：如大型 3D 角色扮演游戏（RPG）或高并发网络竞速游戏。此类应用对显卡的 Draw Call 频次及每秒渲染帧率（FPS：60 - 120 帧）具有极高要求。跨平台框架的通用 UI 渲染管线无法提供底层图形 API（如 OpenGL / Metal / Vulkan）所具备的直接调度能力，极易导致严重的渲染与计算瓶颈。
+2. **重度硬件外设调度与实时媒体处理矩阵**：如专业的音视频多轨剪辑系统、高保真混音录制、深度蓝牙总线通信及物联网外设操控（例如工业级无人机遥测、智能硬件低延迟控制枢纽）。跨平台框架针对此类非通用标准的深层硬件封装往往严重滞后或直接缺失，强制桥接则会导致巨大的性能开销与偶发崩溃。
+3. **追求绝对物理极限的系统级交互阻尼感知**：在高度复杂的全屏动态多重级联滑动、手势驱离式嵌套瀑布流与高频刷新的即时聊天会话流等极客场景中，跨平台技术由于机制隔离，往往极难 100% 还原宿主系统原生的弹簧阻尼模型及非线性回弹动画。系统自带的原生层代码在主线程 UI 通信调度方面依然具备无可替代的顺滑平顺度。
+4. **即时适配操作系统的最新首发特性**：当系统底层更新了突破性的交互范式与传感组件（如苹果生态刚发布的"灵动岛"深度接口、全新的系统级健康组件或最新的空间雷达 API）时，跨平台框架的适配通常需要漫长的开源社区协同与机制拟合（具有强烈的技术滞后性）。只有原生级开发能够实现首日无缝对接。
+
+---
+
+## 3. 移动端跨平台框架的三大底层架构流派
+
+要在不同操作系统中实现代码的复用，业界在漫长的演进中探索出了三种具有代表性的底层架构思想路线。
+
+### 3.1 容器嵌套流派（WebView 方案）
+**核心原理**：应用程序在本质上是一个基于 HTML/CSS/JS 开发的标准网页体系。框架通过在程序中内嵌一个去除了所有外部浏览器特征（如地址栏、导航条）的原生 WebView（网页浏览器内核组件），将用户的 Web 界面作为内容渲染呈现出来，并借由底层的 JS Bridge 通信层赋予网页有限的本地设备控制能力。
+* **代表框架**：Cordova、Ionic，以及各类内嵌的小程序运行时环境。
+* **工程评价**：研发周期极短，前端代码高度复用且天生支持远程动态热更新。但由于其渲染层全部交由浏览器内核进行复杂的 DOM 树重新计算，性能上限极低，页面滚动时的内存计算消耗大，呈现出明显的"非原生"阻滞感。
+
+### 3.2 原生同构桥接流派（Bridge 方案）
+**核心原理**：开发者在框架层使用统一的语言（通常为 JavaScript/TypeScript）编写声明式 UI 描述指令，但在系统执行层面，并没有引入网页渲染容器。框架内部建立了一个被称为"桥（Bridge）"的异步消息代理中枢。当代码分发"渲染一个按钮"的指令时，该指令被序列化后经由"桥"传递至操作系统的原生环境，最终唤起并渲染 iOS 的真实原生按钮或 Android 的真实原生控件。
+* **代表框架**：**React Native (RN)**
+* **工程评价**：摒弃了拖沓的 Web DOM 渲染机制，用户交互触达的是真实操作系统的原生视图组件，其物理交互反馈显著优于 WebView 方案。但在遇到极端复杂的业务流转、密集动画及海量手势频发时，JS 线程与原生主线程跨越"桥"所进行的巨量通信开销会迅速转化为性能瓶颈（这也促使了现代 RN 体系加速向底层 JSI 内存直调新架构演进）。
+
+### 3.3 独立自绘渲染引擎流派
+**核心原理**：战略性地放弃调用所有操作系统自带的现成 UI 控件库（如不再调用 iOS 的 UIButton），而是将一套高度优化的 2D 渲染引擎（如 Skia 或自研图形引擎）直接编译打包进最终的客户端应用中。该引擎直接接管宿主屏幕界面的底层像素绘制权，越过系统原生组件库，完成由顶到底的闭环绘制。
+* **代表框架**：**Flutter**
+* **工程评价**：彻底斩断了多端平台组件碎片化的干扰，确立了无可匹敌的全平台 100% UI 渲染一致性，且直接对接 GPU 底层渲染管线使得它拥有同类框架中最极致顺畅的帧率表现。其代价是应用分发包体积相对更为庞大，且在需要对接非标准的复杂底层硬件时，仍要求开发人员具备原生系统语言与 C++ 的深度联调能力。
+
+---
+
+## 4. 桌面端（PC）跨平台方案的演进对决
+
+在桌面级软件领域（Windows / macOS / Linux），架构选型同样面临着跨平台开发的重大分歧。当前市场呈现出重型生态级框架与极客级轻量化框架的技术对垒。
+
+### 4.1 传统霸主：Electron 重型框架体系
+以现代著名的生产力工具（VS Code IDE、Figma 设计协作软件等）为代表的众多超级桌面应用，均基于 Electron 架构开发。
+- **架构优势**：它在打包产物中直接内嵌了完整的 **Chromium 浏览器内核底座与 Node.js 运行时环境**。这意味着它继承了目前最为庞大先进的现代 Web API 生态（包含 WebGL、WebRTC 高阶音视频等能力），同时也取得了无限制访问操作底层文件系统与进程的完整控制权限。其功能生态繁荣度与集成便利性在桌面端无出其右。
+- **架构劣势**：**极其庞大的系统内存开销代价**。由于强制挂载重量级的 Chromium 内核，即使是实现一个底层的驻留型工具，应用进程在运行状态中也可轻易占据大量系统级运行内存（RAM），常被业界定义为"资源密集型重型架构"。
+
+### 4.2 激进破局者：Tauri 及其轻量化哲学
+针对 Electron 的极速膨胀争议，Tauri 系统提出了截然相反的现代工程理念：
+- **架构优势**：摒弃捆绑重型浏览器内核的策略。应用界面的可视化部分依旧由 Web 前端技术进行结构描述，但渲染引擎全部**交由宿主操作系统自身内部预置的 WebView 容器调用（如 Windows 环境调用 Edge WebView2，或 macOS 环境下调用 WebKit Safari）**。应用背后的底层极简通讯系统则由具备优异内存调校与绝对并发安全的强类型系统级语言 **Rust** 主导开发。借由这种机制，工程产物可生成低至数兆字节（占用极低物理内存）的极简轻量级安装包。
+- **架构劣势**：这种高度依赖各家操作系统的内建碎片化内核差异的做法，使得开发者重新陷入前端工程中"跨浏览器兼容性陷阱"的历史遗留课题。同时，底层架构约束引入的 Rust 语言极大拔高了整个工程团队的学习与维护招募准入门槛。
+
+---
+
+## 5. 跨平台工程选型决策矩阵
+
+架构的选定是对项目战略目标的直接映射支持。在工程实践中不存在具备绝对优势的技术银弹，只有立足于具体业务场景的合理技术折中。以下为针对不同商业背景构建的架构选型模型：
+
+| 工程战略背景与核心痛点 | 优选架构路线 | 架构逻辑判定说明 |
+|-------------|----------|------|
+| **需要极强硬件干预能力、构建极致视觉表现力及3D性能高敏感度系统、重度依赖最新系统级首发能力的产物** | 🔨 **原生技术（Swift / Kotlin）** | 工业界硬件交互的最后底线与工程深水区。面对高度敏感与极限数据吞吐压力的系统应用，任何中介层框架引发的性能散失或跨调用阻断均是无法承受的技术隐患。 |
+| **团队前身具备显著 Web 前端工程背景（如 React 研发储备），主营具有高频线上业务下发、强热更新修复诉求的中大型在线业务系统** | ⚛️ **React Native** | 依托大前端团队现存大量智力资产及工具链的高效变现手段，工程学习迁移曲线极为平滑，且具备成熟可靠的线上无缝热发布与即时修复能力。 |
+| **旨在重塑复杂业务体验的首发型工程团队，极度重视多终端界面跨界视觉规范的 100% 绝对一致性，严控高帧流畅率指标** | 🦋 **Flutter** | 目前移动端跨体系的综合性能天花板和自绘渲染流核心阵地。以确定的初始语言学习成本与一定的包体积增长作为妥协代价，换取全平台极致视觉交互呈现的绝对统驭权。 |
+| **力求快速构建高度复杂的桌面生态生产力平台级软件，团队具有深厚 Web 端技术能力积淀，且预判受众目标终端的本地计算及内存资源相对富裕可控** | ⚛️ **Electron** | 目前国际一线软件厂商在桌面端领域的首选工程级答案。在生态繁荣度、跨端稳定性与研发效能的巨大红利面前，高内存占用的劣势被商业团队普遍定义为可容忍的架构成本。 |
diff --git a/docs/zh-cn/appendix/5-data/ab-testing.md b/docs/zh-cn/appendix/5-data/ab-testing.md
index e066cef..cb38140 100644
--- a/docs/zh-cn/appendix/5-data/ab-testing.md
+++ b/docs/zh-cn/appendix/5-data/ab-testing.md
@@ -1,2577 +1,100 @@
 # A/B 测试：用数据"做决策"
 
 ::: tip 🎯 核心问题
-**如何科学地验证产品改动的效果？** 这就像问：新按钮真的更好用吗？还是用户只是因为新鲜感多点了一下？A/B 测试解决的就是"用数据说话"的问题——不是我觉得好，而是数据证明真的好。
+**如何科学地验证产品改动的效果？**
+你可能经历过这样的场景：团队花了一个月做的新功能上线后，数据大涨！大家欢呼雀跃，可三周后数据又神秘地跌回了原貌。到底是因为新功能真的好，还是因为刚好赶上节假日流量大？A/B 测试解决的就是如何剔除外界的干扰噪音，让数据说出真相的问题。
 :::
 
 ---
 
-## 0. 先问一个问题：你有没有经历过这些"伪成功"？
+## 0. 全景图：对抗"拍脑袋"的科学武器
 
-**但在讨论这些问题之前，让我们先理解一些基础概念...**
+在探讨具体技术之前，让我们先思考一下人类是如何做决策的。
 
-### 0.1 什么是"实验"？
+当你面临两个按钮颜色设计：一个是沉稳的蓝色，一个是醒目的红色。通常，决策者会依赖于自身的经验、直觉、甚至是最高领导的偏好（业界戏称其为 **HiPPO** —— Highest Paid Person's Opinion，薪水最高者的意见）。
 
-想象你在超市买牙膏，货架上摆着两个品牌：
+但用户的真实反馈往往远超我们的想象力。也许红色太刺眼反而导致转化率下降，也许蓝色不够引人注目……我们怎么能确信某种改动一定是更好的？
 
-- **品牌 A**：你用了 5 年，很熟悉
-- **品牌 B**：新产品，说"美白效果更好"
+答案源自于经典的科学法则，这种法则和现代医学在验证新药时使用的手段如出一辙：**对照实验**。
 
-你会怎么选？
-
-**大多数人会这样做**：
-- 看价格
-- 看包装
-- 看广告
-- 问朋友推荐
-- 或者...两个都买，自己试试哪个更好
-
-**最后一种就是"实验"**——通过实际使用来比较哪个更好。
-
-::: tip 💡 实验的本质
-**实验 = 对比 + 观察**
-
-- **对比**：至少要有两个选项（A 和 B）
-- **观察**：在相同条件下，测量它们的表现
-:::
-
-### 0.2 为什么要做"对比实验"？
-
-**场景：你的老板说**
-
-"我看了竞品，他们的按钮是红色的，很醒目！我们也把按钮改成红色吧，这样点击率肯定会提升！"
-
-**看起来很合理，对吧？**
-
-但是...
-
-**问题 1：竞品的产品和你一样吗？**
-
-- 竞品的用户可能是年轻人（喜欢鲜艳颜色）
-- 你的用户可能是商务人士（偏好专业感）
-- 竞品的页面风格是暗色（红色更突出）
-- 你的页面风格是亮色（红色可能太刺眼）
-
-**问题 2：你怎么知道"醒目"就一定好？**
-
-- 也许红色太刺眼，用户反而觉得不安全
-- 也许用户习惯了蓝色，改成红色会困惑
-- 也许点击率提升了，但转化率下降了（点进去的人不买了）
-
-**问题 3：即使看起来"更好"，这是巧合吗？**
-
-- 也许你改按钮的那一周，刚好赶上促销活动
-- 也许那一周是节假日，用户本身就比较活跃
-- 也许竞争对手刚好那周服务器崩溃，用户都跑到你这里了
-
-::: warning ⚠️ 生活中的"伪因果关系"
-**"我穿上这件球衣后，球队就赢了！"**
-
-真的是球衣的功劳吗？也许：
-- 球队最近状态本来就很好
-- 这场比赛对手较弱
-- 其他队员发挥超常
-
-**单次观察无法确定因果关系**，需要对比实验。
-:::
-
-### 0.3 为什么不能"简单对比"？
-
-**错误的对比方式一：时间先后对比**
-
-```
-第一周：蓝色按钮，点击率 5%
-第二周：改成红色按钮，点击率 7%
-结论：红色按钮更好！
-```
-
-**问题**：这两周的其他条件可能完全不同
-- 第一周可能是工作日，第二周是周末
-- 第一周可能下雨，第二周晴天
-- 第一周可能刚开学，第二周是假期
-
-**错误的对比方式二：不同用户群对比**
-
-```
-移动端用户：使用蓝色按钮，点击率 8%
-桌面端用户：使用红色按钮，点击率 5%
-结论：蓝色按钮更好！
-```
-
-**问题**：移动端和桌面端用户本身的行为就不同
-- 移动端用户可能更年轻、更爱点击
-- 桌面端用户可能更谨慎、更有目的性
-- 设备屏幕大小不同，本身就影响点击行为
-
-::: tip 💡 正确的对比实验
-**同时、随机、相同条件**
-
-- **同时**：两个版本在相同时间段运行
-- **随机**：用户随机分配到不同版本
-- **相同条件**：除了版本不同，其他所有条件都一样
-
-这样，任何差异只能归因于"版本不同"。
-:::
-
-### 0.4 一个完整实验的基本步骤
-
-让我们用一个完整的例子来说明：
-
-**场景**：你想知道"免费试用 7 天"和"首次购买打 8 折"哪个更能吸引用户
-
-**步骤 1：明确问题**
-- 比较对象：免费试用 vs 折扣
-- 成功标准：用户付费率
-
-**步骤 2：设计对比**
-- A 组：看到"免费试用 7 天"
-- B 组：看到"首次购买 8 折"
-- 其他条件完全相同
-
-**步骤 3：随机分配**
-- 来到网站的用户，随机进入 A 组或 B 组
-- 每个人 50% 概率
-
-**步骤 4：收集数据**
-- 记录每组有多少人看到优惠
-- 记录每组有多少人最终付费
-
-**步骤 5：分析结果**
-- A 组：1000 人看到，80 人付费（8%）
-- B 组：1000 人看到，120 人付费（12%）
-- B 组比 A 组高 50%
-
-**步骤 6：得出结论**
-- 折扣比免费试用更有效
-- 以后全部使用折扣策略
-
-**这就是 A/B 测试的完整思路！**
-
----
-
-现在，让我们回到开头的问题...
-
-### 0.5 你有没有经历过这些"伪成功"？
-
-**场景一：被数据骗了**
-
-你改了购物车的结算按钮颜色，从蓝变红。一周后一看数据：点击率提升了 30%！
-
-你很高兴，宣布大获成功。但三周后，点击率悄悄回到了原水平，甚至还不如之前。
-
-**真相**：这是"新奇效应"——用户因为好奇多点了几次，新鲜劲过后就恢复了。
-
-**场景二：假阳性陷阱**
-
-你同时测试了 20 个不同的改进方案。有一个方案显示"统计显著"（p < 0.05），你立即全量上线。
-
-一个月后，用户满意度下降了。
-
-**真相**：同时测试 20 个方案，即使全部无效，也有 64% 的概率至少有一个"显著"（1 - 0.95^20）。你看到的"显著"只是随机波动。
-
-**场景三：辛普森悖论**
-
-你的数据显示：B 版本的转化率（7.3%）高于 A 版本（5.6%）。但拆分数据后却发现：
-
-- 移动端：A 8% > B 6%
-- 桌面端：A 4% > B 3%
-
-**每个渠道 A 都更好，但合并后 B 反而赢了**！
-
-**真相**：流量分配不均（移动端占 80% 流量，且更多分配给了 B），导致加权平均后 B 看起来更好。
-
----
-
-**好的 A/B 测试就像科学的临床试验**——严谨设计、足够样本、长期观察，才能得出可信结论。
-
----
-
-## 1. 什么是 A/B 测试？
-
-### 1.1 最简单的定义
-
-**A/B 测试**就是把用户随机分成两组：
-- **A 组**：看到旧版本
-- **B 组**：看到新版本
-
-然后比较两组的关键指标（比如点击率、转化率），看看哪个版本更好。
-
-**用一句话总结**：让数据告诉我们哪个版本更有效，而不是靠猜测。
-
-### 1.2 A/B 测试的核心要素
-
-要做一个合格的 A/B 测试，需要满足以下几个条件：
-
-**条件 1：随机分配**
-- 每个用户被分配到 A 组或 B 组的概率是相等的
-- 就像抛硬币，正面朝上进 A 组，反面朝上进 B 组
-- 用户自己不能选择，你也"不能挑选"
-
-**为什么随机？**
-假设你想测试新首页设计：
-
-❌ **错误做法**：把新首页给"新用户"，旧首页给"老用户"
-- 问题：新老用户的行为本身就不一样
-- 新用户可能更愿意探索（点击率高）
-- 老用户更习惯旧设计（不愿改变）
-- 你不知道是"首页设计"的差异，还是"用户类型"的差异
-
-✅ **正确做法**：新老用户都随机分配到新旧首页
-- 新用户：一半看新首页，一半看旧首页
-- 老用户：一半看新首页，一半看旧首页
-- 这样才能公平比较
-
-**条件 2：同时运行**
-- A 组和 B 组在相同时间段运行
-- 不能今天跑 A，明天跑 B
-
-**为什么同时？**
-假设你今天测试蓝色按钮，明天测试红色按钮：
-
-❌ **问题**：
-- 今天可能是周一（工作日，用户少）
-- 明天可能是周六（周末，用户多）
-- 今天可能下雨，明天可能晴天
-- 这些"时间因素"会影响结果，和按钮颜色无关
-
-✅ **正确做法**：蓝色和红色按钮在同一天、同一时间测试
-
-**条件 3：只改变一个变量**
-- 除了你要测试的东西（比如按钮颜色），其他所有条件都保持相同
-- 页面布局、文案、位置、功能...都一样
-
-**为什么只改变一个？**
-
-假设你同时改了：
-- 按钮颜色：蓝 → 红
-- 按钮文案："立即购买" → "马上抢购"
-- 按钮大小：小 → 大
-
-如果结果变好了，你不知道是哪个改动起了作用。如果变差了，你也不知道哪个改坏了。
-
-✅ **正确做法**：一次只测试一个变化
-
-**条件 4：定义清晰的指标**
-- 实验前明确要测量什么
-- 不能"到时候看情况"
-
-**常见的指标类型**：
-- **转化率**：完成购买的比例
-- **点击率**：点击按钮的比例
-- **注册率**：完成注册的比例
-- **留存率**：第二天还回来的比例
-
-### 1.3 A/B 测试不是万能的
-
-A/B 测试适合的场景：
-- ✅ 测试页面设计（颜色、布局、文案）
-- ✅ 测试功能流程（注册步骤、结算流程）
-- ✅ 测试推荐算法（商品推荐、内容推荐）
-- ✅ 测试价格策略（折扣、促销）
-
-A/B 测试不适合的场景：
-- ❌ 长期战略调整（品牌定位、市场方向）
-- ❌ 重大产品创新（全新功能、全新业务）
-- ❌ 需要很长时间才能看到效果的改变（SEO、品牌认知）
-
-::: tip 💡 判断是否需要 A/B 测试
-**问自己三个问题**：
-
-1. **能快速看到结果吗？**（几周内，不是几个月）
-2. **能随机分配用户吗？**（不会严重影响用户体验）
-3. **能量化指标吗？**（有明确的数字可以比较）
-
-如果三个答案都是"是"，那就可以考虑 A/B 测试。
-:::
-
-### 1.4 A/B 测试 vs 其他"对比方法"
-
-| 对比方法 | 做法描述 | 问题 |
-| :--- | :--- | :--- |
-| **直觉判断** | "我觉得红色更好" | 你的直觉不代表用户想法 |
-| **竞品模仿** | "竞品这么做，我们也这么做" | 产品不同，用户不同，结果可能不同 |
-| **时间先后对比** | "改完后，数据变好了" | 可能是其他因素（促销、季节）导致的 |
-| **部分用户对比** | "移动端用新设计，桌面端用旧设计" | 移动端和桌面端用户本身行为就不同 |
-| **A/B 测试** | "同时、随机、相同条件对比" | 排除其他因素，结果是可靠的 |
-
-### 1.5 用医学试验来类比
-
-### 1.6 用医学试验来类比
-
-| 医学试验 | A/B 测试 | 说明 |
-| :--- | :--- | :--- |
-| 对照组（安慰剂） | A组（对照组） | 使用当前版本，作为基准 |
-| 实验组（新药） | B组（实验组） | 使用新版本，验证效果 |
-| 治愈率 | 转化率 | 衡量是否"成功"的指标 |
-| 统计显著性 | 统计显著性 | 结果是否可信 |
-
-**关键原则**：除了版本不同，其他所有条件必须相同（随机分配、同时运行、相同用户群）。
-
-### 1.7 A/B 测试的完整流程
-
-```
-1. 提出假设
-   ↓
-2. 设计实验（确定指标、样本量）
-   ↓
-3. 开发并部署实验
-   ↓
-4. 运行实验（收集数据）
-   ↓
-5. 分析结果（统计检验）
-   ↓
-6. 做出决策（全量/放弃/迭代）
-```
-
----
-
-## 2. A/B 测试的核心价值
-
-### 2.1 避免"拍脑袋决策"
-
-没有 A/B 测试时，决策往往依赖：
-
-- **HiPPO**（Highest Paid Person's Opinion）：最高领导说了算
-- **设计直觉**：设计师觉得这样更好看
-- **模仿竞品**：竞争对手这么做，我们也这么做
-
-**问题**：这些方法都忽略了真实的用户行为。
-
-### 2.2 降低风险
-
-上线前不知道用户会不会买账？先小范围测试，用 1% 流量验证，避免全量上线后造成损失。
-
-### 2.3 持续优化
-
-通过不断的小实验，积累小的提升，最终实现显著增长。这就是"增长黑客"的核心方法。
-
----
-
-## 3. 实验设计：对照组与实验组
-
-### 3.0 从一个完整的例子开始
-
-**场景：你的公司要测试一个新的"购物车按钮"**
-
-**当前情况**：
-- 购物车按钮是蓝色的，文案是"立即购买"
-- 放置在页面右下角
-- 当前转化率是 5%（100 个访客，5 个购买）
-
-**你的想法**：
-- 如果把按钮改成红色，更醒目，转化率可能会提升
-- 如果把按钮放得更大，更容易点击，转化率可能会提升
-
-**问题**：怎么知道这些想法是否有效？
-
----
-
-**步骤 1：明确你要测试什么**
-
-你需要先明确：
-- **测试变量**：你要改变什么？
-  - 选项 A：按钮颜色（蓝 → 红）
-  - 选项 B：按钮大小（小 → 大）
-  - 选项 C：按钮位置（右下 → 左下）
-
-**重要**：一次只测试一个变量！
-
-假设你决定测试**按钮颜色**。
-
----
-
-**步骤 2：明确成功指标**
-
-你怎么知道"红色更好"？
-
-- **指标 1**：点击率（点击按钮的人数 / 访问人数）
-- **指标 2**：转化率（购买人数 / 访问人数）
-- **指标 3**：收入（总销售额）
-
-**建议**：选择最能反映业务目标的指标。
-
-对于购物车按钮，**转化率**是最直接的指标。
-
----
-
-**步骤 3：设计实验版本**
-
-**A 组（对照组）**：
-- 蓝色按钮
-- 文案"立即购买"
-- 位置右下角
-- 大小正常
-
-**B 组（实验组）**：
-- **红色按钮**（这是唯一的变化！）
-- 文案"立即购买"（相同）
-- 位置右下角（相同）
-- 大小正常（相同）
-
-**关键原则**：只有按钮颜色不同，其他所有条件都相同。
-
----
-
-**步骤 4：确定流量分配**
-
-**选项 1**：50/50 分配
-- 50% 用户看到 A 组
-- 50% 用户看到 B 组
-
-**选项 2**：90/10 分配
-- 90% 用户看到 A 组（安全版本）
-- 10% 用户看到 B 组（实验版本）
-
-**建议**：
-- 如果对新版本有信心，用 50/50（最快得到结果）
-- 如果担心新版本有风险，用 90/10（更保守）
-
-假设你选择 **50/50 分配**。
-
----
-
-**步骤 5：计算所需样本量**
-
-你需要回答几个问题：
-- **当前转化率**：5%
-- **期望检测的提升**：20%（从 5% 提升到 6%）
-- **显著性水平**：0.05（95% 置信度）
-- **统计功效**：80%
-
-使用在线计算器，得出：
-- **每组需要约 6,000 个样本**
-- **两组共需要 12,000 个样本**
-
-如果你的网站每天有 3,000 个访客，大约需要 **4 天**。
-
----
-
-**步骤 6：确定运行时长**
-
-**最少运行时间**：达到样本量所需时间（4 天）
-
-**建议运行时间**：至少 2 个完整业务周期（通常 2 周）
-
-**为什么？**
-- 覆盖工作日和周末（用户行为不同）
-- 覆盖月初和月末（消费习惯不同）
-- 避免"新奇效应"（用户因好奇产生的短期行为）
-
-假设你决定运行 **2 周**。
-
----
-
-**步骤 7：制定决策规则**
-
-在实验开始前，明确决策规则：
-
-**如果 B 组显著更好（提升 > 20%，p < 0.05）**：
-- 全量上线红色按钮
-
-**如果 B 组显著更差（降低 > 10%，p < 0.05）**：
-- 放弃红色按钮，保持蓝色按钮
-
-**如果结果不显著（p ≥ 0.05）**：
-- 转化率差异不大（在 ±10% 以内）
-- 保持蓝色按钮，尝试其他优化方向
-
----
-
-**步骤 8：准备监控和回滚**
-
-**监控指标**：
-- 每天检查转化率
-- 检查是否有异常（如转化率暴跌）
-- 检查用户投诉
-
-**回滚计划**：
-- 如果发现严重问题，立即停止实验
-- 准备快速切换回蓝色按钮
-
----
-
-**步骤 9：运行实验**
-
-- 开发并部署实验代码
-- 确保随机分配正常工作
-- 开始收集数据
-- 不要中途停止（除非有严重问题）
-
----
-
-**步骤 10：分析结果**
-
-2 周后：
-- A 组：6,000 人，300 人购买（5.0%）
-- B 组：6,000 人，330 人购买（5.5%）
-- 相对提升：+10%
-- P 值：0.12（不显著）
-- 95% CI：[-2%, +22%]
-
-**决策**：结果不显著，置信区间包含 0。保持蓝色按钮。
-
----
-
-**这就是完整的实验设计流程！**
-
-现在，让我们深入了解每个环节...
-
-### 3.1 随机分配的重要性
-
-**正确的做法**：每个用户有 50% 概率进入 A 组，50% 概率进入 B 组
-
-**错误的做法**：
-- 前半天所有用户进 A 组，后半天进 B 组（时间差异）
-- 移动端用户进 A 组，桌面端进 B 组（设备差异）
-- 新用户进 A 组，老用户进 B 组（用户类型差异）
-
-**为什么随机很重要？**
-
-只有随机分配，才能保证两组用户在其他所有方面都相似（年龄、设备、使用习惯等），这样才能公平比较。
-
-### 3.2 流量分配演示
-
-👇 **动手试试看**：点击下方按钮，观察流量如何随机分配到两组：
-
-<ABTestingDemo />
-
-::: tip 💡 50/50 分配是最优的
-虽然有 30/70 或 20/80 的分配策略，但 50/50 能最快检测出差异。除非你对新版本极度不放心，否则不推荐使用非对称分配。
+::: tip 💡 A/B 测试的本质
+**A/B 测试 = 对比 + 观察**
+这就如同医学研究中的"双盲测试"：
+- **对照组（A组）**：吃长得像药的淀粉片（看到老版本的页面）。
+- **实验组（B组）**：吃正在研发的新药（看到新版本的页面）。
+只有当实验组的治愈率（转化率）极其稳定且明显地高于对照组时，我们才能宣告新药（新改动）确实有效。
 :::
 
 ---
 
-## 4. 样本量计算：需要多少用户才够？
+## 1. 流量分配：切割平行宇宙
 
-### 4.1 为什么不能"看着办"？
+做 A/B 测试的第一个铁律就是：**同时、随机、隔离**。
 
-**问题：样本量太小时会发生什么？**
+你绝对不能说：“前半个月所有的用户看蓝按钮，后半个月所有用户看红按钮。” 因为时间跨度带来了无数的变量——你完全无法知道后半个月转化率上涨是因为按钮是红色的，还是因为碰巧到了双十一旺季。
 
-假设你想测试新按钮是否能提升转化率，真实情况是新按钮确实能提升 5%。
+我们要做的是在同一时刻创造"平行宇宙"。每个进入网站的用户，系统都在底层立刻抛出了一枚数字硬币，决定他被分派到 A 宇宙，还是 B 宇宙。
 
-**但你只测试了 100 个用户**：
-- A 组：100 人，5 人点击（5%）
-- B 组：100 人，6 人点击（6%）
-- P 值：0.75（不显著）
+你可以通过下面的演示，直观地观察系统是如何进行流量切割的：
 
-**你会得出错误结论**："新按钮没有效果"
+<ABTestingDemo tab="traffic" />
 
-**真相**：新按钮确实有效，但因为样本量太小，统计功效不足，无法检测出这个差异。
+### 1.1 为什么随机分配如此重要？
 
-这就是**假阴性**（第二类错误）。
+只有百分之百的"随机"，才能最大程度抹平其他一切特征带来的差异。如果在足够大的样本量下进行了完美的随机切割，那么 A 组和 B 组的年轻用户比例、收入水平、地域分布原则上都会惊人的一致。
 
----
-
-**问题：样本量太大时会有什么问题？**
-
-如果你测试了 100 万个用户：
-- 花费 3 个月时间才收集够数据
-- 占用了大量服务器资源
-- 延迟了其他实验的进度
-
-而且，你检测到的是 0.01% 的微小提升，即使真实存在，也没有业务价值。
-
-**样本量太小的风险**：浪费机会（错过真实改进）
-**样本量太大的风险**：浪费时间（运行太久，资源浪费）
-
-**正确做法**：实验前计算所需样本量，在"能够检测到有意义的提升"和"合理的实验时间"之间取得平衡。
-
-### 4.2 用投票来理解样本量
-
-**场景：你想预测选举结果**
-
-假设有 1000 万选民，你想预测候选人 A 和 B 谁会赢。
-
-**问题：你需要调查多少人？**
-
-- 调查 10 个人？太少，不靠谱
-- 调查 100 个人？还是太少
-- 调查 1,000 个人？可以，误差约 ±3%
-- 调查 10,000 个人？更好，误差约 ±1%
-- 调查 1,000,000 个人？没必要，误差只比 1,000 人好一点点
-
-**关键发现**：
-- 样本量从 10 增加到 1,000 → 准确度大幅提升
-- 样本量从 1,000 增加到 1,000,000 → 准确度提升很小
-
-**A/B 测试也是一样的道理**：
-- 不是样本越多越好
-- 而是"足够"就好
-- "足够"取决于你想检测多小的差异
-
-### 4.3 影响样本量的四个因素
-
-| 因素 | 影响 | 典型值 |
-| :--- | :--- | :--- |
-| **基准转化率** | 越高，所需样本越少 | 2% - 10% |
-| **最小检测提升** | 越小，所需样本越多 | 相对提升 5% - 20% |
-| **显著性水平 (α)** | 越小，所需样本越多 | 0.05 (95%置信度) |
-| **统计功效 (1-β)** | 越大，所需样本越多 | 0.8 (80%功效) |
-
-**直觉理解**：
-- 你想检测的差异越小（比如只提升 5%），就需要更多样本才能"看清"
-- 你想要的结果越确定（比如 99% 置信度 vs 95%），就需要更多证据
-
-#### 因素 1：基准转化率
-
-**问题**：为什么基准转化率越高，需要的样本越少？
-
-想象两个场景：
-- **场景 A**：基准转化率 50%（掷硬币，50% 正面）
-- **场景 B**：基准转化率 1%（罕见事件，只有 1% 的人会购买）
-
-**在场景 A**：
-- 你掷 100 次硬币，正面会出现 50 次左右
-- 即使有波动，也在 40-60 次之间
-- 你不需要太多样本就能"确定"正面率
-
-**在场景 B**：
-- 你测试 100 个用户，可能只有 1 个人购买
-- 如果运气好，可能 3 个人购买（3 倍差异！）
-- 如果运气不好，可能 0 个人购买
-- 你需要大量样本才能"确定"真实转化率
-
-**结论**：转化率越低，随机波动越大，需要更多样本来"降噪"。
-
----
-
-#### 因素 2：最小检测提升
-
-**这是最重要的因素！**
-
-**问题**：你想检测多小的差异？
-
-- **检测 20% 的提升**（从 5% 到 6%）：需要约 6,000 样本/组
-- **检测 5% 的提升**（从 5% 到 5.25%）：需要约 100,000 样本/组
-
-**差距巨大！**
-
-**为什么？**
-
-想象你在测量两根头发的长度差异：
-- 差异 1 毫米：用普通尺子就能看出来
-- 差异 0.001 毫米：需要显微镜才能看出来
-
-统计检验也是一样：
-- 大差异（提升 20%）："普通尺子"（小样本）就能看出来
-- 小差异（提升 5%）："显微镜"（大样本）才能看出来
-
-::: tip 💡 如何选择"最小检测提升"？
-**问自己三个问题**：
-
-1. **业务上什么提升是有意义的？**
-   - 提升 1%：太小，没意义
-   - 提升 5%：还行，可以接受
-   - 提升 20%：很好，值得做
-
-2. **你能等待多久？**
-   - 检测 5% 提升 → 需要 1 个月
-   - 检测 20% 提升 → 只需要 1 周
-   - 时间紧迫？选择较大的提升目标
-
-3. **有多少流量？**
-   - 日活 1,000 → 无法检测小提升
-   - 日活 100,000 → 可以检测小提升
-
-**建议**：选择"最小有意义的提升"作为目标，不要贪心求小。
-:::
-
----
-
-#### 因素 3：显著性水平 (α)
-
-**什么是显著性水平？**
-
-显著性水平（α）是你能容忍的"假阳性"概率。
-
-- **α = 0.05**：容忍 5% 的假阳性（95% 置信度）
-- **α = 0.01**：容忍 1% 的假阳性（99% 置信度）
-
-**假阳性是什么？**
-
-假阳性 = "说有效，实际无效"
-
-例子：
-- 新按钮其实没有效果（真实转化率都是 5%）
-- 但因为随机波动，B 组恰好表现更好（5% vs 6%）
-- 你错误地认为"新按钮有效"，并全量上线
-- 上线后，发现转化率并没有提升
-
-**这就是假阳性**！
-
-**为什么 α 越小，样本量越大？**
-
-想象你在做"无罪推定"：
-- α = 0.05：需要"比较确凿的证据"才能定罪
-- α = 0.01：需要"非常确凿的证据"才能定罪
-
-"非常确凿"需要更多证据（更大样本量）。
-
-**建议**：
-- 大多数情况用 α = 0.05（行业标准）
-- 如果是高风险决策（如价格策略），可以用 α = 0.01
-
----
-
-#### 因素 4：统计功效 (1-β)
-
-**什么是统计功效？**
-
-统计功效（1-β）是检测到真实效应的概率。
-
-- **功效 = 80%**：如果有真实差异，有 80% 的概率能检测出来
-- **功效 = 90%**：如果有真实差异，有 90% 的概率能检测出来
-
-**假阴性是什么？**
-
-假阴性 = "说无效，实际有效"
-
-例子：
-- 新按钮确实有效（真实转化率从 5% 提升到 6%）
-- 但因为样本量太小，检验结果显示"不显著"（p = 0.15）
-- 你错误地认为"新按钮无效"，放弃了它
-- 你错过了一个提升 20% 的机会！
-
-**这就是假阴性**！
-
-**为什么功效越大，样本量越大？**
-
-想象你在安检：
-- 功效 80%：能检测出 80% 的危险品（漏掉 20%）
-- 功效 90%：能检测出 90% 的危险品（漏掉 10%）
-
-检测率越高，需要更灵敏的设备（更大样本量）。
-
-**建议**：
-- 大多数情况用功效 80%（行业标准）
-- 如果样本量充足，可以用 90%（更保险）
-
----
-
-### 4.4 样本量计算公式
-
-对于比例指标（转化率），简化的样本量公式为：
-
-```
-n = (Zα + Zβ)² × [p1(1-p1) + p2(1-p2)] / (p2 - p1)²
-```
-
-其中：
-- `n` = 每组所需样本量
-- `Zα` = 显著性水平对应的 Z 值（α=0.05 时，Zα=1.96）
-- `Zβ` = 统计功效对应的 Z 值（80%功效时，Zβ=0.84）
-- `p1` = 基准转化率
-- `p2` = 目标转化率 = p1 × (1 + 相对提升)
-
-### 4.4 样本量计算示例
-
-**场景**：购物车结算按钮，当前转化率 5%，希望检测 20% 的相对提升（即 6%）。
-
-- `p1` = 5% = 0.05
-- `p2` = 6% = 0.06
-- `Zα` = 1.96 (α=0.05)
-- `Zβ` = 0.84 (80%功效)
-
-```
-n = (1.96 + 0.84)² × [0.05×0.95 + 0.06×0.94] / (0.06 - 0.05)²
-n ≈ 6,932
-```
-
-**每组需要 6,932 个样本，两组共需 13,864 个样本**。
-
-如果每天有 5,000 个访客，大约需要 **3 天**才能达到足够样本量。
-
-::: tip 💡 在线计算工具
-- [Evan Miller 的样本量计算器](https://www.evanmiller.org/ab-testing/sample-size.html) - 业界标准
-- [Optimizely 的样本量计算器](https://www.optimizely.com/sample-size-calculator/)
-:::
-
----
-
-## 5. 统计显著性：如何判断结果"可信"？
-
-### 5.0 为什么需要"统计显著性"？
-
-**场景：你做了一个 A/B 测试**
-
-```
-A 组（蓝色按钮）：1000 个用户，50 个点击 → 点击率 5%
-B 组（红色按钮）：1000 个用户，60 个点击 → 点击率 6%
-```
-
-**看起来 B 更好，对吧？**
-
-但是...
-
-**问题：这 10 个点击的差异，是真实的，还是巧合？**
-
-想象一下：
-- 也许分配到 B 组的用户，今天心情特别好，更爱点击
-- 也许 B 组恰好多了几个"重度点击用户"
-- 也许这只是随机波动，下次再测试 A 组反而更好
-
-**这就是"统计显著性"要解决的问题**：
-- 如何判断这个差异是"真实的"，而不是"随机的"？
-- 多大的差异才能相信是真实的？
-
-::: tip 💡 统计显著性的本质
-**统计显著性 = 差异不太可能是随机产生的**
-
-就像抛硬币：
-- 抛 10 次，出现 7 次正面 → 可能是巧合
-- 抛 100 次，出现 70 次正面 → 这枚硬币可能有问题
-
-差异越大、样本越多，越不可能是巧合。
-:::
-
----
-
-### 5.1 P 值是什么？
-
-#### 5.1.1 用抛硬币来理解 P 值
-
-**问题：这枚硬币是公平的吗？**
-
-假设你有一枚硬币，你想知道它是不是公平的（正面和反面的概率各 50%）。
-
-**实验 1：抛 10 次**
-- 结果：7 次正面，3 次反面（正面率 70%）
-
-你会想："这枚硬币可能偏向正面？"
-
-但是，即使硬币是公平的，抛 10 次出现 7 次或更多正面的概率大约是 **17%**。
-
-**P 值 = 17%**
-
-意思是：如果硬币是公平的，有 17% 的概率会看到这种结果（或更极端）。
-
-**结论**：P 值太大，无法确定硬币不公平。7 次正面可能是随机波动。
-
----
-
-**实验 2：抛 100 次**
-- 结果：70 次正面，30 次反面（正面率 70%）
-
-现在的差异还是 70%，但样本量大多了！
-
-如果硬币是公平的，抛 100 次出现 70 次或更多正面的概率大约是 **0.00004%**。
-
-**P 值 < 0.0001%**
-
-意思是：如果硬币是公平的，几乎不可能看到这种结果。
-
-**结论**：P 值非常小，我们可以很有信心地说：这枚硬币确实不公平！
-
----
-
-#### 5.1.2 P 值的正式定义
-
-**P 值**：如果零假设（两组没有差异）为真，观察到当前数据（或更极端数据）的概率。
-
-**用通俗语言说**：
-- P 值 = "纯属巧合"的概率
-- P 值 = "随机波动"的可能性
-- P 值 = "即使版本没有差异，也会看到这种结果"的概率
-
-#### 5.1.3 P 值的判断标准
-
-**常用阈值**：
-
-| P 值范围 | 结论 | 解释 |
-| :--- | :--- | :--- |
-| **p < 0.01** | 高度显著 | 只有 1% 的概率是巧合（99% 信心） |
-| **p < 0.05** | 统计显著 | 只有 5% 的概率是巧合（95% 信心） |
-| **p ≥ 0.05** | 不显著 | 可能是随机波动，无法确定差异真实 |
-
-**为什么是 0.05？**
-
-这是科学界的"传统标准"（可以理解为行业约定俗成）：
-- 意思是：我们容忍 5% 的"假阳性"风险
-- 也就是说，即使两个版本真的没有差异，我们也有 5% 的概率错误地认为"有差异"
-
-::: tip 💡 如何记忆 P 值
-**P 值越小，越可信**
-
-- p = 0.30 → 有 30% 概率是巧合 → 不可信
-- p = 0.10 → 有 10% 概率是巧合 → 不太可信
-- p = 0.05 → 只有 5% 概率是巧合 → 勉强可信
-- p = 0.01 → 只有 1% 概率是巧合 → 很可信
-- p < 0.001 → 几乎不可能是巧合 → 非常可信
-:::
-
-#### 5.1.4 P 值不是什么？
-
-::: warning ⚠️ 常见的 P 值误解
-
-**误解 1："P 值越小，差异越大"**
-
-错误！P 值只告诉你"差异是否真实"，不告诉你"差异有多大"。
-
-例子：
-- 差异 0.1%，样本 100 万 → p < 0.001（显著，但差异很小）
-- 差异 50%，样本 10 → p = 0.15（不显著，但差异很大）
-
-**正确理解**：P 值衡量的是"信心"，不是"效果大小"。
-
----
-
-**误解 2："P < 0.05 就是正确的，P ≥ 0.05 就是错误的"**
-
-错误！0.05 只是一个人为设定的阈值，不是魔法分界线。
-
-- p = 0.049 和 p = 0.051 几乎没有区别
-- 但一个是"显著"，一个是"不显著"
-
-**正确理解**：P 值是一个连续的"信心程度"，不要过度依赖 0.05 这个分界线。
-
----
-
-**误解 3："P < 0.05 意味着有 95% 的概率 B 版本更好"**
-
-错误！P 值不是"B 版本更好的概率"。
-
-P 值说的是：如果两个版本真的没有差异，看到这种结果的概率。
-
-**正确理解**：P 值是对"零假设"的检验，不是直接给出"B 更好的概率"。
-
----
-
-**误解 4："P ≥ 0.05 就证明两个版本没有差异"**
-
-错误！"不显著"只意味着"无法确定差异存在"，不等于"证明差异不存在"。
-
-可能的原因：
-- 样本量太小（没收集足够数据）
-- 差异太小（需要更多样本才能检测到）
-- 确实没有差异
-
-**正确理解**："不显著" = "证据不足"，不是"证明无效"。
-:::
-
-#### 5.1.5 P 值是如何计算的？
-
-**不需要记住公式，但要理解思路**
-
-假设 A/B 测试的结果：
-- A 组：1000 人，50 人点击（5%）
-- B 组：1000 人，60 人点击（6%）
-
-**P 值的计算思路**：
-
-1. **假设零假设成立**：A 和 B 真的没有差异（真实转化率都是 5%）
-2. **计算"标准误"**：在 1000 个样本下，转化率会自然波动多少
-3. **计算 Z 值**：观察到的差异（1%）是标准误的多少倍
-4. **查表得出 P 值**：这个 Z 值对应的概率
-
-**简化版计算（不严谨，但帮助理解）**：
-
-```
-标准误 ≈ √[p×(1-p)/n] = √[0.05×0.95/1000] ≈ 0.7%
-
-观察差异 = 6% - 5% = 1%
-
-Z 值 = 观察差异 / 标准误 = 1% / 0.7% ≈ 1.43
-
-查表：Z = 1.43 → P ≈ 0.15
-```
-
-**结论**：P = 0.15 > 0.05，不显著，这个 1% 的差异可能是随机波动。
-
-::: tip 💡 实际应用
-**你不需要手动计算 P 值！**
-
-使用在线工具：
-- [AB TestGuide 计算器](https://abtestguide.com/calc/)
-- [Evan Miller 计算器](https://www.evanmiller.org/ab-testing/sample-size.html)
-
-你需要做的是：
-1. 输入 A 组和 B 组的样本量、转化数
-2. 工具自动计算 P 值
-3. 根据 P 值判断是否显著
-:::
-
----
-
-### 5.2 置信区间：估计真实的提升范围
-
-#### 5.2.1 为什么要用"区间"而不是"点估计"？
-
-**场景：你做了一次 A/B 测试**
-
-结果：
-- B 版本比 A 版本提升了 10%
-
-**问题**：这个 10% 是"准确的"吗？
-
-答案是：**不准确**
-
-为什么？因为你只测试了一部分用户，不是全部用户。如果你：
-- 换一批用户再测试一次 → 可能是 8%
-- 下个月再测试一次 → 可能是 12%
-- 明年再测试一次 → 可能是 5%
-
-**每次测试的结果都会略有不同**（这就是"抽样波动"）
-
-**所以，我们不应该给出一个精确的数字（点估计），而应该给出一个范围（区间估计）**。
-
-::: tip 💡 区间估计 vs 点估计
-**点估计**："提升 10%"（太精确，不可信）
-
-**区间估计**："提升在 5% 到 15% 之间"（更诚实，更符合实际）
-
-就像你问朋友"从你家到公司要多久？"
-
-**不精确但诚实**："大概 30 到 40 分钟吧，看路况"
-**精确但不现实**："准确需要 34 分 27 秒"
-:::
-
-#### 5.2.2 置信区间是什么？
-
-**置信区间**：真实值可能落入的范围。
-
-**示例**：
-- 你观察到 B 版本比 A 版本提升了 10%
-- 95% 置信区间：[+5%, +15%]
-
-**意思是**：
-- 我们有 95% 的信心，真实提升在 5% 到 15% 之间
-- 真实提升低于 5% 或高于 15% 的概率，只有 5%
-
-#### 5.2.3 理解"95% 置信"
-
-::: warning ⚠️ 常见误解
-**错误理解**："真实值有 95% 的概率在区间内"
-
-**正确理解**："如果我们重复实验 100 次，95 次的区间会包含真实值"
-
-对于单次实验：
-- 真实值要么在区间内，要么不在
-- 我们不知道是哪种情况
-- 但我们有 95% 的信心，这个方法是可靠的
-:::
-
-**用类比来理解**：
-
-想象你是一个射击运动员，你射了 100 枪：
-
-- 95 枪都打在靶子上（"置信区间"覆盖了"真实目标"）
-- 5 枪脱靶了（"置信区间"没有覆盖"真实目标"）
-
-每次射击前，你都有 95% 的信心会打中靶子。
-
-但你射出一枪后，这一枪要么中，要么不中。你不能说"这一枪有 95% 的概率中靶"。
-
-置信区间也是一样：每次实验都有 95% 的可靠性，但对于单次实验，真实值要么在区间内，要么不在。
-
-#### 5.2.4 置信区间的可视化
-
-**场景 1：结果显著**
-
-```
-A 组：5%
-B 组：6%
-相对提升：+20%
-95% CI：[+10%, +30%]
-    0% ─────┼──────────────────┼──── 40%
-           ↑                ↑
-        下限(+10%)      上限(+30%)
-           ✅ 整个区间都 > 0，结果显著
-```
-
-**解读**：我们有 95% 的信心，真实提升在 10% 到 30% 之间。即使是最保守估计（10%），也是正提升。
-
----
-
-**场景 2：结果不显著**
-
-```
-A 组：5%
-B 组：5.5%
-相对提升：+10%
-95% CI：[-5%, +25%]
-   -5% ─┼────┼──────────────────┼──── 30%
-       ↑    ↑
-      0%  上限(+25%)
-       ⚠️ 区间包含 0，结果不显著
-```
-
-**解读**：我们有 95% 的信心，真实提升在 -5% 到 +25% 之间。
-- 可能是正提升（最高 +25%）
-- 可能是负提升（最低 -5%，即 B 更差）
-- 无法确定方向，所以"不显著"
-
-#### 5.2.5 置信区间与 P 值的关系
-
-**重要结论**：
-- 如果 95% 置信区间**不包含 0** → P < 0.05（显著）
-- 如果 95% 置信区间**包含 0** → P ≥ 0.05（不显著）
-
-**记忆技巧**：
-- 区间完全在 0 的右边（都是正数）→ B 更好
-- 区间完全在 0 的左边（都是负数）→ A 更好
-- 区间跨越 0（有正有负）→ 不确定
-
-#### 5.2.6 置信区间的宽度：什么决定了宽度？
-
-**观察**：
-- 样本量越大 → 区间越窄（越精确）
-- 转化率越高 → 区间越窄（越精确）
-- 置信度越高 → 区间越宽（更保守）
-
-**例子**：
-
-```
-场景 1：样本小，区间宽
-A 组：100 人，5 人点击（5%）
-B 组：100 人，6 人点击（6%）
-95% CI：[-8%, +28%]（很宽，不确定）
-
-场景 2：样本大，区间窄
-A 组：10,000 人，500 人点击（5%）
-B 组：10,000 人，600 人点击（6%）
-95% CI：[+10%, +30%]（较窄，较确定）
-```
-
-::: tip 💡 置信区间的实际应用
-**看到置信区间后，你应该想**：
-
-1. **区间是否包含 0？**
-   - 不包含 → 结果显著，可以做决策
-   - 包含 → 结果不显著，需要更多数据
-
-2. **区间有多宽？**
-   - 很宽 → 不确定，需要更多样本
-   - 很窄 → 很确定，可以信任结果
-
-3. **下限是多少？**
-   - 即使是最保守估计，效果如何？
-   - 如果下限已经满足业务需求，可以上线
-
-4. **上限是多少？**
-   - 最好的情况下能提升多少？
-   - 帮助评估"潜在收益"
-:::
-
----
-
-### 5.3 A/B 组结果对比演示
-
-👇 **动手试试看**：调整转化率和样本量，观察统计显著性的变化：
-
-<ABTestingDemo />
-
-**关键观察**：
-1. **相对提升越大**，P 值越小（越容易显著）
-2. **样本量越大**，P 值越小（越容易显著）
-3. **转化率越低**，需要更大样本量才能达到相同显著性
-
----
-
-## 6. A/B 测试的常见误区
-
-### 6.1 过早停止实验（Peeking 问题）
-
-#### 6.1.1 一个真实的故事
-
-**场景：你的老板急于看到结果**
-
-你设计了一个 A/B 测试，测试新的首页设计：
-
-**实验计划**：
-- 需要运行 2 周
-- 每组需要 10,000 个样本
-- 目标：检测 10% 的提升
-
-**第 3 天（早上）**：
-- A 组：1,000 人，50 人点击（5%）
-- B 组：1,000 人，70 人点击（7%）
-- P 值：0.04（显著！）
-
-你的老板看到数据，兴奋地说："B 版本领先了 40%！而且已经显著了！我们不用等 2 周了，今天就全量上线 B 版本吧！"
-
-**你犹豫了一下...但还是上线了。**
-
----
-
-**第 7 天**：
-- A 组：3,000 人，150 人点击（5%）
-- B 组：3,000 人，170 人点击（5.67%）
-- P 值：0.35（不显著了）
-
-老板："没关系，还是 B 更好，只是统计波动。"
-
----
-
-**第 14 天（原计划结束）**：
-- A 组：10,000 人，500 人点击（5%）
-- B 组：10,000 人，510 人点击（5.1%）
-- P 值：0.80（完全不显著）
-- 95% CI：[-6%, +8%]
-
-**真相揭晓**：两个版本几乎没有任何差异！
-
-如果你第 3 天就停止实验，你会错误地认为"B 版本提升 40%"，并全量上线一个实际上没有效果的版本。
-
----
-
-#### 6.1.2 为什么会发生这种情况？
-
-**P 值的波动性**
-
-想象你在抛硬币，判断它是否公平：
-
-- **前 10 次**：7 次正面（p = 0.17，看似不公平）
-- **前 50 次**：30 次正面（p = 0.20，看似不公平）
-- **前 100 次**：55 次正面（p = 0.37，看起来公平）
-
-如果你只抛 10 次就下结论，你会错误地认为"硬币不公平"。
-
-A/B 测试也是一样：
-- 数据少的时候，随机波动大，P 值不稳定
-- 数据多的时候，随机波动小，P 值才稳定
-
-**过早停止 = 在随机波动中做决策**
-
----
-
-#### 6.1.3 正确的做法
-
-**方案 1：预先设定样本量，严格达到后才分析**
-
-```
-步骤：
-1. 实验前计算所需样本量（如 10,000 人/组）
-2. 设置"检查点"：只在第 14 天检查一次
-3. 达到样本量之前，不看数据，不做决策
-4. 第 14 天分析结果，做决策
-```
-
-**优点**：简单、可靠、不会出错
-**缺点**：如果版本有严重问题，要等很久才能发现
-
----
-
-**方案 2：序贯检验（Sequential Testing）**
-
-```
-步骤：
-1. 预设多个"检查点"（如第 3、7、14 天）
-2. 每个检查点使用"更严格"的显著性阈值
-3. 第 3 天：p < 0.01 才停止（更严格）
-4. 第 7 天：p < 0.025 才停止
-5. 第 14 天：p < 0.05 才停止（正常）
-```
-
-**优点**：可以提前发现极端情况（好的或坏的）
-**缺点**：计算复杂，需要专门工具
-
-::: tip 💡 实践建议
-**如果你是初学者**：使用方案 1（简单可靠）
-**如果你有经验**：使用方案 2（更灵活）
-
-无论用哪种方案，都不要"每天看数据，觉得好就停止"。
-:::
-
----
-
-### 6.2 辛普森悖论
-
-#### 6.2.1 一个令人困惑的故事
-
-**场景：你的数据分析结果互相矛盾**
-
-你的电商网站测试了一个新的"推荐算法"：
-
-**整体数据**：
-- A 组（旧算法）：转化率 5.6%
-- B 组（新算法）：转化率 7.3%
-- **结论**：B 版本更好！提升 30%！
-
-你很高兴，准备全量上线新算法。
-
----
-
-**但是，你的同事提出了一个问题**："我们能不能按设备类型分别看看数据？"
-
-**分开后的数据**：
-
-**移动端**：
-- A 组：转化率 8%
-- B 组：转化率 6%
-- **结论**：A 版本更好！
-
-**桌面端**：
-- A 组：转化率 4%
-- B 组：转化率 3%
-- **结论**：A 版本更好！
-
-**等等，发生了什么？**
-
-- 移动端：A 更好（8% > 6%）
-- 桌面端：A 更好（4% > 3%）
-- 合并后：B 更好（7.3% > 5.6%）
-
-**每个分组的赢家都是 A，但合并后赢家却是 B！**
-
-这就是**辛普森悖论**。
-
----
-
-#### 6.2.2 为什么会发生这种情况？
-
-**问题出在"样本分布不均"**
-
-让我们看看真实的样本分布：
-
-**移动端**（80% 的流量）：
-- A 组：40% 流量（4,000 人，320 人购买 → 8%）
-- B 组：40% 流量（4,000 人，240 人购买 → 6%）
-
-**桌面端**（20% 的流量）：
-- A 组：0% 流量（没有人！）
-- B 组：20% 流量（1,000 人，30 人购买 → 3%）
-
-**合并后的数据**（错误计算）：
-- A 组：320 / 4,000 = 8%
-- B 组：(240 + 30) / 5,000 = 5.4%
-
-但如果你直接平均（错误的做法）：
-- A 组：只有移动端数据，8%
-- B 组：(6% + 3%) / 2 = 4.5%？
-
-不对，让我们重新计算正确的加权平均：
-
-**正确的加权平均**：
-- A 组：8%（因为只有移动端）
-- B 组：6% × 80% + 3% × 20% = 5.4%
-
-等等，A 更好才对（8% > 5.4%）！
-
-那为什么你之前看到 B 更好（7.3% > 5.6%）？
-
-**真相**：流量分配完全混乱了！
-
-实际上，如果随机分配正确，移动端和桌面端应该各有 50% 流量进入 A/B 组。
-
----
-
-#### 6.2.3 正确的随机化应该是这样的
-
-**移动端**（假设 8,000 人）：
-- A 组：4,000 人（50%），320 人购买（8%）
-- B 组：4,000 人（50%），240 人购买（6%）
-
-**桌面端**（假设 2,000 人）：
-- A 组：1,000 人（50%），40 人购买（4%）
-- B 组：1,000 人（50%），30 人购买（3%）
-
-**合并后的数据**（正确的加权平均）：
-- A 组：(320 + 40) / 5,000 = 7.2%
-- B 组：(240 + 30) / 5,000 = 5.4%
-
-**结论**：A 更好（7.2% > 5.4%）
-
-移动端和桌面端的结论一致！
-
----
-
-#### 6.2.4 如何避免辛普森悖论？
-
-**方法 1：确保随机化正确**
-
-- 每个子群体（移动端、桌面端）内部，流量必须是 50/50
-- 不能出现"移动端全是 A 组，桌面端全是 B 组"的情况
-
-**方法 2：按关键维度分别分析**
-
-- 不要只看整体数据
-- 分别看移动端、桌面端、新用户、老用户、不同地区...
-- 确保每个分组的结论是一致的
-
-**方法 3：使用 A/A 测试验证随机化**
-
-**A/A 测试**：两个组使用完全相同的版本，看是否有差异
-
-**如果 A/A 测试显示"显著差异"** → 说明随机化有问题
-**如果 A/A 测试显示"无显著差异"** → 说明随机化正常
-
-::: tip 💡 实践建议
-**每次 A/B 测试前，先问自己**：
-
-1. 我的关键维度是什么？（移动端/桌面端？新用户/老用户？）
-2. 每个维度内部的流量分配是否均匀？
-3. 如果按维度分组，结论是否一致？
-
-如果答案不确定，先做 A/A 测试验证随机化。
-:::
-
----
-
-### 6.3 P-hacking（P 值操纵）
-
-#### 6.3.1 一个"只要我想，就能显著"的故事
-
-**场景：你想发表一个"成功"的实验结果**
-
-你的公司鼓励"数据驱动决策"，但你的实验结果总是"不显著"。
-
-压力之下，你想："有没有办法让结果变显著？"
-
----
-
-**尝试 1：主指标不显著，那就换个指标**
-
-**原始计划**：
-- 主指标：购买转化率
-- 结果：A 组 5%，B 组 5.1%，p = 0.60（不显著）
-
-**你试了其他指标**：
-- 点击率：A 组 10%，B 组 11%，p = 0.15（还是不显著）
-- 注册率：A 组 8%，B 组 9%，p = 0.20（不显著）
-- 页面停留时间：A 组 30 秒，B 组 32 秒，p = 0.08（接近了！）
-- 添加购物车率：A 组 15%，B 组 17%，p = 0.03（显著了！）
-
-**你报告说**："新版本提升了添加购物车率，我们应该上线！"
-
-**问题**：你测了 5 个指标，即使全部无效，也有 1 - 0.95^5 = 23% 的概率至少有一个"假阳性"。
-
----
-
-**尝试 2：主指标不显著，那就细分用户群**
-
-**原始数据**（整体）：
-- A 组：5%
-- B 组：5.1%
-- p = 0.60（不显著）
-
-**你开始细分**：
-- 新用户：A 组 4%，B 组 4.5%，p = 0.25
-- 老用户：A 组 6%，B 组 6.2%，p = 0.40
-- 移动端：A 组 5%，B 组 5.3%，p = 0.30
-- 桌面端：A 组 5%，B 组 5.1%，p = 0.50
-- 18-25 岁：A 组 4.5%，B 组 5.5%，p = 0.04（显著了！）
-
-**你报告说**："虽然整体不显著，但对年轻用户效果显著，我们应该针对这个人群上线！"
-
-**问题**：你测了 10 个子群体，即使全部无效，也有 40% 的概率至少有一个"假阳性"。
-
----
-
-**尝试 3：P 值接近 0.05，那就再跑几天**
-
-**第 14 天**：
-- A 组：5%
-- B 组：5.2%
-- p = 0.08（接近显著了！）
-
-你："再跑几天，看看能不能降到 0.05 以下。"
-
-**第 16 天**：
-- A 组：5%
-- B 组：5.25%
-- p = 0.06（更接近了！）
-
-你："再跑一天！"
-
-**第 17 天**：
-- A 组：5%
-- B 组：5.3%
-- p = 0.048（终于显著了！）
-
-你："成功了！我们可以上线了！"
-
-**问题**：如果你一直跑下去，P 值迟早会低于 0.05（纯随机波动），但这不代表真实差异。
-
----
-
-#### 6.3.2 为什么 P-hacking 是危险的？
-
-**故事结局**：
-
-你的"成功"实验上线了。一个月后：
-- 转化率没有提升（因为本来就没有真实效果）
-- 开发团队浪费了一个月时间
-- 其他更有价值的实验被延迟
-
-你失去了团队的信任，以后再也没有人相信你的"数据驱动决策"。
-
----
-
-#### 6.3.3 如何避免 P-hacking？
-
-**原则 1：预先注册假设和指标**
-
-**实验开始前，写下**：
-- 主指标是什么？（只能有 1-2 个）
-- 预期结果是什么？（提升多少？）
-- 如果不显著，怎么办？（放弃、迭代、还是延长？）
-
-**实验过程中，不允许改变**！
-
----
-
-**原则 2：控制多重检验**
-
-**如果你必须测多个指标或子群体**，使用更严格的阈值：
-
-- **Bonferroni 校正**：α = 0.05 / 指标数量
-  - 测 5 个指标 → α = 0.01
-  - 测 10 个指标 → α = 0.005
-  - 只有 p < 0.005 才算显著
-
-- **FDR 控制**：允许一定比例的假阳性，但总体控制误报率
-
----
-
-**原则 3：诚实报告所有结果**
-
-**不要只报告显著的指标**！
-
-**诚实报告示例**：
-```
-我们测试了新版本对 5 个指标的影响：
-
-1. 添加购物车率：+13% (p = 0.03) ✅ 显著
-2. 购买转化率：+2% (p = 0.60) ❌ 不显著
-3. 点击率：+10% (p = 0.15) ❌ 不显著
-4. 注册率：+12% (p = 0.20) ❌ 不显著
-5. 页面停留时间：+7% (p = 0.08) ❌ 不显著
-
-虽然只有"添加购物车率"显著，但其他关键指标（购买转化率）
-没有提升，甚至有下降趋势。建议谨慎上线，或延长观察时间。
-```
-
-::: tip 💡 实践建议
-**问自己**：
-
-"如果所有结果都不显著，我会怎么做？"
-
-如果答案是"我会放弃"，那就不要在结果出来后改变主意，挑选"显著"的指标。
-
-**诚实 > 成功**
-:::
-
----
-
-### 6.4 新奇效应
-
-#### 6.4.1 一个"昙花一现"的故事
-
-**场景：新功能上线，数据暴涨！**
-
-你的公司发布了一个新功能："智能推荐"。
-
-**第 1 周数据**：
-- 点击率：+30%
-- 使用率：+50%
-- 用户反馈："太棒了！"
-
-你高兴极了，准备全量推广并写成功案例。
-
----
-
-**第 2 周数据**：
-- 点击率：+15%
-- 使用率：+20%
-
-你："可能是波动，继续观察。"
-
----
-
-**第 3 周数据**：
-- 点击率：+5%
-- 使用率：+5%
-
-你："怎么突然降了？"
-
----
-
-**第 4 周数据**：
-- 点击率：0%
-- 使用率：-2%（比上线前还差！）
-- 用户反馈："其实不太好用..."
-
-**真相**：前两周的"暴涨"只是新奇效应，用户因为好奇多点了几次。新鲜感过后，真实使用习惯暴露无遗。
-
-如果你第 1 周就全量推广并写成功案例，现在会非常尴尬。
-
----
-
-#### 6.4.2 为什么会有新奇效应？
-
-**人类的好奇心**
-
-想象你走进一家新餐厅：
-- **第 1 次**：你点了招牌菜，觉得很好吃（新奇感）
-- **第 3 次**：你点了其他菜，发现也就那样（新奇感消退）
-- **第 10 次**：你开始觉得"其实家常菜更好吃"（真实偏好）
-
-A/B 测试也是一样：
-- **短期**：用户因好奇点击新功能（虚高）
-- **长期**：用户发现新功能并不符合真实需求（回归真实）
-
----
-
-#### 6.4.3 哪些情况最容易产生新奇效应？
-
-**高风险场景**：
-- ✅ 全新的 UI 设计（用户可能因为"不一样"而点击）
-- ✅ 新功能（用户好奇"这是什么"）
-- ✅ 新的交互方式（用户想"试试看"）
-- ✅ 显眼的位置变化（用户"被迫注意到"）
-
-**低风险场景**：
-- ❌ 后端算法优化（用户感知不到）
-- ❌ 性能优化（加载速度变快，用户不会因为"新奇"而点击）
-- ❌ 文案微调（影响较小）
-
----
-
-#### 6.4.4 如何避免新奇效应？
-
-**方法 1：至少运行 2 个完整业务周期**
-
-- 如果业务有"周末效应"（周末活跃度高），至少运行 2 周
-- 如果业务有"月初月末效应"（月初消费高），至少运行 1 个月
-- 如果业务有"季节效应"（双 11、春节），避开这些时段
-
-**经验法则**：至少 2-4 周，覆盖 2 个完整周期。
-
----
-
-**方法 2：观察趋势，而不是绝对值**
-
-**好的趋势**：
-```
-第 1 周：+10%
-第 2 周：+12%
-第 3 周：+11%
-第 4 周：+13%
-→ 稳定，可信
-```
-
-**不好的趋势**：
-```
-第 1 周：+30%
-第 2 周：+15%
-第 3 周：+5%
-第 4 周：0%
-→ 新奇效应，不可信
-```
-
----
-
-**方法 3：重视长期指标，轻视短期指标**
-
-| 指标类型 | 示例 | 受新奇效应影响 |
-| :--- | :--- | :--- |
-| **短期指标** | 点击率、使用率 | ⚠️ 高 |
-| **中期指标** | 转化率、留存率 | ⚡ 中 |
-| **长期指标** | LTV、NPS | ✅ 低 |
-
-**决策原则**：
-- 如果长期指标（留存率、LTV）没有提升，即使短期指标（点击率）暴涨，也不应该上线。
-
----
-
-### 6.5 统计功效不足
-
-#### 6.5.1 一个"错过机会"的故事
-
-**场景：你做了一个很有前景的改进**
-
-你的公司测试了一个新的"一键购买"功能：
-
-**你的计算**（错误）：
-- "我们每天有 1,000 个访客，跑 1 周应该够了吧？"
-- 所需样本：1,000 人/组
-- 运行时间：7 天
-
-**实验结果**（1 周后）：
-- A 组：1,000 人，50 人购买（5%）
-- B 组：1,000 人，60 人购买（6%）
-- 相对提升：+20%
-- P 值：0.30（不显著）
-
-**你的结论**："一键购买没有效果，放弃这个功能。"
-
----
-
-**但是，你的同事提出了一个问题**："我们的样本量真的够吗？"
-
-**重新计算**（正确）：
-- 基准转化率：5%
-- 期望检测提升：20%（从 5% 到 6%）
-- 显著性水平：α = 0.05
-- 统计功效：80%
-
-**使用在线计算器**：
-- 所需样本：每组约 6,000 人
-- 所需时间：约 6 周（不是 1 周！）
-
-**真相**：你的实验只跑了 1/6 的样本量，统计功效不足，即使有真实差异也检测不出来（假阴性）。
-
-**你错过了一个提升 20% 的机会！**
-
----
-
-#### 6.5.2 为什么会发生这种情况？
-
-**统计功效的直观理解**
-
-想象你在安检：
-- **功效 20%**：只能检测出 20% 的危险品（漏掉 80%）
-- **功效 50%**：能检测出 50% 的危险品（漏掉 50%）
-- **功效 80%**：能检测出 80% 的危险品（漏掉 20%）
-
-如果你的安检设备只有 20% 功效，你会漏掉 80% 的危险品。
-
-A/B 测试也是一样：
-- **功效 20%**：即使有真实差异，只有 20% 的概率能检测出来
-- **功效 80%**：如果有真实差异，有 80% 的概率能检测出来
-
-**样本量越小 → 功效越低 → 越容易假阴性**
-
----
-
-#### 6.5.3 如何避免统计功效不足？
-
-**方法 1：实验前必须计算样本量**
-
-**不要凭感觉！** 使用在线计算器：
-- [Evan Miller 样本量计算器](https://www.evanmiller.org/ab-testing/sample-size.html)
-- [Optimizely 样本量计算器](https://www.optimizely.com/sample-size-calculator/)
-
-**输入**：
-- 基准转化率（如 5%）
-- 期望检测提升（如 20%）
-- 显著性水平（如 0.05）
-- 统计功效（如 80%）
-
-**输出**：
-- 所需样本量（如 6,000 人/组）
-
----
-
-**方法 2：如果资源有限，调整期望**
-
-**场景**：你只有 1,000 个样本，怎么办？
-
-**选项 1**：提高最小检测提升
-- 从检测 20% 提升 → 改为检测 50% 提升
-- 所需样本从 6,000 → 降到 1,000
-
-**选项 2**：降低统计功效
-- 从 80% 功效 → 降到 50% 功效
-- 所需样本从 6,000 → 降到 2,500
-- 但风险：假阴性概率从 20% → 升到 50%
-
-**选项 3**：延长测试时间
-- 从 1 周 → 延长到 6 周
-- 样本量从 1,000 → 增加到 6,000
-
-::: tip 💡 实践建议
-**优先级**：
-
-1. **首选**：延长测试时间（最可靠）
-2. **次选**：提高最小检测提升（接受"只检测大效果"）
-3. **下策**：降低统计功效（增加假阴性风险）
-
-如果三个选项都不可行，说明你的流量不足以做这个实验。考虑：
-- 聚合更长时间的数据
-- 放弃这个实验
-- 先做其他实验
-:::
-
----
-
-## 7. 结果分析：手把手教学
-
-### 7.1 从原始数据到结论
-
-**场景：你的实验结束了，现在要分析结果**
-
-**实验设计回顾**：
-- 测试内容：购物车按钮颜色（蓝 vs 红）
-- 运行时间：2 周
-- 流量分配：50/50
-- 目标指标：购买转化率
-- 期望提升：20%（从 5% 到 6%）
-
----
-
-#### 步骤 1：收集原始数据
-
-**从数据库导出数据**：
-
-| 日期 | A组访客数 | A组购买数 | B组访客数 | B组购买数 |
-| :--- | :--- | :--- | :--- | :--- |
-| 第 1 天 | 500 | 25 | 500 | 30 |
-| 第 2 天 | 520 | 26 | 510 | 28 |
-| ... | ... | ... | ... | ... |
-| 第 14 天 | 480 | 22 | 490 | 25 |
-| **合计** | **7,000** | **350** | **7,000** | **385** |
-
----
-
-#### 步骤 2：计算基本指标
-
-**A 组（对照组）**：
-- 样本量：7,000
-- 购买数：350
-- 转化率：350 / 7,000 = **5.00%**
-
-**B 组（实验组）**：
-- 样本量：7,000
-- 购买数：385
-- 转化率：385 / 7,000 = **5.50%**
-
-**绝对提升**：5.50% - 5.00% = **+0.5 个百分点**
-
-**相对提升**：(5.50% - 5.00%) / 5.00% = **+10%**
-
----
-
-#### 步骤 3：使用在线计算器进行统计检验
-
-**访问**：[AB TestGuide 计算器](https://abtestguide.com/calc/)
-
-**输入数据**：
-- A 组：7,000 样本，350 转化
-- B 组：7,000 样本，385 转化
-
-**计算器输出**：
-- 相对提升：+10%
-- P 值：**0.042**
-- 95% 置信区间：[+0.3%, +19.7%]
-
----
-
-#### 步骤 4：解读统计结果
-
-**P 值解读**：
-- p = 0.042 < 0.05
-- 结论：**统计显著**
-
-**置信区间解读**：
-- 95% CI：[+0.3%, +19.7%]
-- 整个区间都在 0 的右边（都是正数）
-- 结论：**有 95% 信心真实提升在 0.3% 到 19.7% 之间**
-
-**关键观察**：
-- 下限是 +0.3%，即使是最保守估计，也是正提升
-- 上限是 +19.7%，最好情况下可能接近 20% 提升
-- 观察值 10% 在区间中间
-
----
-
-#### 步骤 5：检查数据质量
-
-**检查 1：样本量是否足够？**
-- 实际样本：7,000/组
-- 计划样本：6,000/组
-- 结论：✅ 样本量充足
-
-**检查 2：运行时间是否足够？**
-- 实际运行：14 天（2 周）
-- 计划运行：14 天
-- 结论：✅ 覆盖 2 个完整业务周期
-
-**检查 3：流量分配是否均匀？**
-- A 组：7,000（50%）
-- B 组：7,000（50%）
-- 结论：✅ 分配均匀
-
-**检查 4：是否有异常波动？**
-（绘制每日数据趋势图，观察是否有异常日）
-
-- 如果某天数据异常（如服务器故障），需要排除
-- 如果数据平稳增长，说明正常
-
----
-
-#### 步骤 6：按子群体分析
-
-**移动端**：
-- A 组：5,000 人，250 人购买（5.0%）
-- B 组：5,000 人，280 人购买（5.6%）
-- 相对提升：+12%
-- P 值：0.03（显著）
-
-**桌面端**：
-- A 组：2,000 人，100 人购买（5.0%）
-- B 组：2,000 人，105 人购买（5.25%）
-- 相对提升：+5%
-- P 值：0.70（不显著）
-
-**结论**：
-- 移动端效果显著（+12%）
-- 桌面端不显著（样本小，差异小）
-- 整体显著主要由移动端驱动
-
----
-
-#### 步骤 7：检查其他指标
-
-**点击率**：
-- A 组：10%
-- B 组：11%
-- 结论：✅ 提升（符合预期）
-
-**用户满意度**：
-- A 组：4.2 分
-- B 组：4.1 分
-- 结论：⚠️ 轻微下降（需要关注）
-
-**退款率**：
-- A 组：2%
-- B 组：2.1%
-- 结论：✅ 持平（无负面影响）
-
-**综合评估**：
-- 主指标（转化率）提升 ✅
-- 次指标（点击率）提升 ✅
-- 用户满意度轻微下降 ⚠️
-- 退款率持平 ✅
-
----
-
-#### 步骤 8：做出决策
-
-**情况分析**：
-1. 主指标显著提升（+10%）
-2. 置信区间合理（[+0.3%, +19.7%]）
-3. 移动端效果显著，桌面端不显著
-4. 用户满意度轻微下降，但影响不大
-5. 退款率没有上升（说明用户质量没有下降）
-
-**决策选项**：
-
-**选项 A：全量上线**
-- 优点：获得 +10% 转化率提升
-- 风险：用户满意度可能继续下降
-
-**选项 B：仅移动端上线**
-- 优点：针对显著有效的群体
-- 风险：桌面端失去优化机会
-
-**选项 C：延长观察**
-- 优点：收集更多数据，确认趋势
-- 风险：延迟决策时间
-
-**最终决定**：**全量上线，但持续监控用户满意度**
-
-**理由**：
-1. 转化率提升显著，业务价值明确
-2. 用户满意度下降很小（4.2 → 4.1），可能是随机波动
-3. 退款率没有上升，说明没有严重质量问题
-4. 上线后持续监控，如果满意度继续下降，再考虑回滚
-
----
-
-#### 步骤 9：撰写报告
-
-**实验报告示例**：
-
-```
-【A/B 测试报告】购物车按钮颜色优化
-
-实验周期：2024-01-01 至 2024-01-14（14 天）
-
-实验设计：
-- 对照组（A）：蓝色按钮
-- 实验组（B）：红色按钮
-- 流量分配：50/50
-- 样本量：7,000/组
-
-主要结果：
-- A 组转化率：5.00%（350/7000）
-- B 组转化率：5.50%（385/7000）
-- 相对提升：+10%
-- P 值：0.042（显著）
-- 95% CI：[+0.3%, +19.7%]
-
-子群体分析：
-- 移动端：+12%（p = 0.03，显著）
-- 桌面端：+5%（p = 0.70，不显著）
-
-其他指标：
-- 点击率：+10%（A:10% → B:11%）
-- 用户满意度：-2.4%（A:4.2 → B:4.1）
-- 退款率：持平（A:2% → B:2.1%）
-
-结论与建议：
-✅ 建议全量上线红色按钮
-   - 主指标显著提升 +10%
-   - 置信区间完全为正，下限 +0.3%
-   - 其他指标无负面影响
-
-⚠️ 持续监控：
-   - 用户满意度轻微下降，需持续观察
-   - 建议上线 1 个月后重新评估
-
-报告人：XXX
-日期：2024-01-15
-```
-
----
-
-### 7.2 结果解读决策树
-
-**问题 1：P 值是否显著（p < 0.05）？**
-
-- **否（p ≥ 0.05）** → 转到问题 2
-- **是（p < 0.05）** → 转到问题 3
-
----
-
-**问题 2：置信区间是否包含 0？**
-
-- **包含 0**（如 [-5%, +15%]）→ **不显著**
-  - 决策：保持现状，或延长实验时间
-  - 原因：无法确定方向
-
-- **不包含 0**（如 [+5%, +15%]）→ **显著**
-  - （这种情况少见，因为 P 值和 CI 通常一致）
-
----
-
-**问题 3：提升方向是什么？**
-
-- **B > A**（提升为正）→ 转到问题 4
-- **B < A**（提升为负）→ **放弃 B 版本**
-  - 决策：保持 A 版本
-  - 原因：B 版本显著更差
-
----
-
-**问题 4：提升幅度是否有业务价值？**
-
-- **提升 < 5%** → 转到问题 5
-- **提升 ≥ 5%** → 转到问题 6
-
----
-
-**问题 5：小提升（< 5%），但显著，怎么办？**
-
-**考虑因素**：
-- 置信区间下限是多少？
-  - 如果下限 > 0（如 [+1%, +9%]）：可以上线
-  - 如果下限接近 0（如 [-0.5%, +8.5%]）：谨慎上线
-
-- 实施成本是多少？
-  - 低成本（改文案）：可以考虑上线
-  - 高成本（重构代码）：不建议上线
-
-- 是否有副作用？
-  - 用户满意度下降？保持现状
-  - 其他指标恶化？保持现状
-
-**决策**：
-- 置信区间下限 > 0 + 低成本 + 无副作用 → **上线**
-- 其他情况 → **保持现状或延长观察**
-
----
-
-**问题 6：大提升（≥ 5%），且显著，直接上线？**
-
-**还需要检查**：
-- 用户满意度是否下降？
-- 其他关键指标是否恶化？
-- 是否有子群体效果相反（辛普森悖论）？
-- 是否是新奇效应（短期暴涨，长期回落）？
-
-**决策**：
-- 所有检查通过 → **全量上线**
-- 有任何警告 → **谨慎上线或延长观察**
+此时，如果二者的数据表现不同，那就排除了所有其他的干扰项和狡辩。唯一的不同，只能是因为你改了红色按钮。
 
 ---
 
-### 7.3 实验评估检查清单
+## 2. 样本与检验：战胜假象的数学逻辑
 
-**在做出决策前，确保回答了以下问题**：
+好了，既然分了组，我们找 10 个用户分别看看结果不就行了？这就引出了 A/B 测试里最冷酷无情的数学法则：**大数定律与样本量（Sample Size）**。
 
-#### 数据质量检查
-- [ ] 样本量是否达到计划要求？
-- [ ] 运行时间是否覆盖 2 个完整业务周期？
-- [ ] 流量分配是否均匀（50/50）？
-- [ ] 是否有异常数据或技术故障？
+想象你抛了 10 次硬币，结果 7 次正面、3 次反面，这能说明硬币被人做过手脚吗？显然不能，因为基数太小，7:3 纯粹就是波动、运气。但如果你抛了 10 万次，发现有 7 万次正面，那这时候就可以铁腕断言：硬币一定是偏心的。
 
-#### 统计显著性检查
-- [ ] P 值是否 < 0.05？
-- [ ] 置信区间是否不包含 0？
-- [ ] 置信区间宽度是否合理（不过宽）？
+同样，如果只是 100 个人测试，多一个人点击都会带来 1% 的暴涨暴跌。这就需要我们在实验开始前，通过公式计算必须凑满多少流量。
 
-#### 业务价值检查
-- [ ] 提升幅度是否有业务意义（> 5%）？
-- [ ] 置信区间下限是否可接受？
-- [ ] ROI 是否为正（收益 > 成本）？
+<ABTestingDemo tab="calculator" />
 
-#### 风险检查
-- [ ] 用户满意度是否下降？
-- [ ] 退款率/投诉率是否上升？
-- [ ] 是否存在辛普森悖论？
-- [ ] 是否是新奇效应？
+### 2.1 统计学中的两大守护神
 
-#### 子群体检查
-- [ ] 移动端和桌面端结论是否一致？
-- [ ] 新用户和老用户结论是否一致？
-- [ ] 不同地区结论是否一致？
+一旦跑满了这些流量条件，统计学就在我们寻找真相的旅程中布置了两尊门神：
 
-#### 长期影响检查
-- [ ] 是否观察了足够长的时间（> 2 周）？
-- [ ] 趋势是否稳定（不是昙花一现）？
-- [ ] 是否有长期负面影响（如用户流失）？
+- **统计功效 (Power, 通常要求 80%)**：它代表如果你的新改动确实有效，你有多大的把握能把这个有效的效果侦测出来，而不是将其误认为是一种噪音放任自流。（防止说“无效”但其实“有效”的假阴性漏网之鱼）
+- **显著性水平 (P-Value, 通常要求小于 0.05)**：也就是大家常说的“P<0.05”。它的意思是，两组出现这样区别，如果是纯靠运气导致的概率是否小于 5%？要是运气占比连 5% 都不到，我们就会承认这就是**统计显著**(Significant)，这改动真的发挥了非凡的作用。（防止说“有效”但其实只是走运的假阳性）
 
----
-
-**如果所有检查都通过** → **全量上线**
-
-**如果有任何警告** → **谨慎决策或延长观察**
-
-**如果有多个失败** → **保持现状或放弃**
-
----
-
-## 8. 实战案例
-
-**背景**：电商网站购物车结算按钮，当前为蓝色，想测试红色是否能提升转化率。
-
-**实验设计**：
-- 假设：红色按钮更醒目，能提升转化率 10%
-- 指标：结算按钮点击率（点击次数 / 访问次数）
-- 基准转化率：5%
-- 目标转化率：5.5%（相对提升 10%）
-- 所需样本量：每组约 30,000（使用在线计算器）
-- 流量分配：50/50
-- 显著性水平：α = 0.05
-- 统计功效：80%
-
-**结果**：
-- 运行 7 天后达到所需样本量
-- A 组（蓝）：5.02%
-- B 组（红）：5.15%
-- 相对提升：+2.6%
-- P 值：0.23（不显著）
-- 95% 置信区间：[-1.7%, +6.9%]
-
-**决策**：结果不显著，无法确认红色按钮更好。考虑到：
-1. 转化率提升很小（即使真实，也只有 2.6%）
-2. 置信区间包含 0（甚至包含负值）
-3. 红色按钮可能影响品牌一致性
-
-**最终决定**：保持蓝色按钮，尝试其他优化方向（如按钮文案、大小、位置）。
-
----
-
-### 7.2 案例 2：注册流程简化
-
-**背景**：SaaS 产品注册流程需要填写 10 个字段，想测试减少到 5 个字段是否能提升注册率。
-
-**实验设计**：
-- 假设：字段更少 → 注册率更高
-- 指标：注册完成率（完成注册数 / 开始注册数）
-- 基准转化率：25%
-- 目标转化率：30%（相对提升 20%）
-- 所需样本量：每组约 2,000
-- 流量分配：50/50
-
-**结果**：
-- A 组（10 字段）：24.8%
-- B 组（5 字段）：31.2%
-- 相对提升：+25.8%
-- P 值：< 0.001（高度显著）
-- 95% 置信区间：[+18.2%, +33.4%]
-
-**决策**：结果高度显著，全量上线 5 字段版本。
-
-**后续跟踪**：
-- 新用户注册率提升了 25.8%
-- 用户质量（后续付费率）没有下降
-- 用户反馈"注册很快很方便"
-
----
-
-### 7.3 案例 3：推荐算法优化
-
-**背景**：视频网站推荐算法，想测试新的协同过滤算法是否能提升用户观看时长。
-
-**实验设计**：
-- 假设：新算法推荐更精准 → 观看时长更长
-- 指标：人均每日观看时长（分钟）
-- 基准：45 分钟/天
-- 目标：提升 5% → 47.25 分钟/天
-- 所需样本量：每组约 10,000 用户
-- 运行时间：至少 4 周（覆盖完整用户行为周期）
-
-**结果（4 周后）**：
-- A 组（旧算法）：45.2 分钟/天
-- B 组（新算法）：46.8 分钟/天
-- 相对提升：+3.5%
-- P 值：0.07（接近显著，但未达到 0.05 阈值）
-- 95% 置信区间：[-0.2%, +7.2%]
-
-**决策**：
-1. 统计不显著，但趋势积极（P 值接近 0.05）
-2. 置信区间下限接近 0（-0.2%），风险很小
-3. 新算法成本增加不大（服务器资源 +5%）
-
-**最终决定**：谨慎全量上线，但：
-- 持续监控关键指标
-- 准备快速回滚方案
-- 一个月后重新评估
-
-**一个月后**：
-- 观看时长提升稳定在 +4%
-- 用户留存率无显著变化
-- 服务器成本增加可接受
-
-结论：实验成功。
-
----
-
-## 9. 用 AI 辅助 A/B 测试设计
-
-AI 可以帮助你快速设计实验、计算样本量、分析结果。关键在于提供清晰的上下文。
-
-### 8.1 提示词模板：样本量计算
-
-```
-你是一位资深的 A/B 测试专家。请帮我计算实验所需的样本量。
-
-## 业务背景
-[描述你的业务场景，例如：电商网站、SaaS 产品、移动 App]
-
-## 当前指标
-- 关键指标：[转化率/留存率/点击率等]
-- 当前数值：[基准值，如 5%]
-- 指标类型：[比例指标/均值指标]
-
-## 实验设计
-- 预期相对提升：[如 10%，即从 5% 提升到 5.5%]
-- 显著性水平 (α)：0.05 (95% 置信度)
-- 统计功效 (1-β)：0.8 (80%)
-- 流量分配：50/50
-
-## 请求
-1. 计算每组所需样本量
-2. 假设每天有 [X] 个访问用户，估算需要运行多少天
-3. 给出实验设计建议
-```
-
-### 8.2 提示词模板：结果分析
-
-```
-你是一位资深的 A/B 测试专家。请帮我分析实验结果。
-
-## 实验结果
-- A 组（对照组）：
-  - 样本量：10,000
-  - 转化数：500
-  - 转化率：5.0%
-
-- B 组（实验组）：
-  - 样本量：10,000
-  - 转化数：550
-  - 转化率：5.5%
-
-## 请求
-1. 计算相对提升（百分比）
-2. 计算 Z 值和 P 值
-3. 计算 95% 置信区间
-4. 判断是否统计显著（α = 0.05）
-5. 给出决策建议（全量/放弃/继续观察）
-6. 指出实验可能存在的偏倚或问题
-```
-
-### 8.3 提示词模板：常见问题诊断
-
-```
-你是一位资深的 A/B 测试专家。我的实验遇到了问题，请帮我诊断。
-
-## 问题描述
-[描述你遇到的问题，例如：
-- 运行两周后 P 值仍在 0.5 左右，完全不显著
-- A 组和 B 组数据差异很大，完全不像随机分配
-- 第 3 天结果显示显著，但第 7 天又不显著了]
-
-## 实验信息
-- 指标：[转化率等]
-- 基准值：[如 5%]
-- 预期提升：[如 10%]
-- 流量分配：[50/50]
-- 运行天数：[如 7 天]
-- 总样本量：[如 5,000]
-
-## 请求
-1. 分析可能的原因
-2. 提供诊断建议
-3. 给出解决方案
-```
-
-::: tip 💡 追问技巧
-- "请用通俗语言解释什么是 P 值"
-- "我的置信区间包含 0，这意味着什么？"
-- "如何判断是否存在辛普森悖论？"
-- "什么情况下可以使用非 50/50 的流量分配？"
-:::
-
----
-
-## 10. 决策树：什么时候该做什么？
-
-### 10.1 实验前决策树：是否需要做 A/B 测试？
-
-**问题 1：改动是否可以快速看到结果？**
-
-- **否**（需要几个月才能看到效果）
-  - ❌ 不适合 A/B 测试
-  - 原因：测试时间太长，成本太高
-  - 替代方案：用户调研、专家评估
-
-- **是**（几周内能看到效果）
-  - ✅ 可以考虑，继续下一个问题
-
----
-
-**问题 2：能否随机分配用户？**
-
-- **否**（会严重影响用户体验）
-  - ❌ 不适合 A/B 测试
-  - 原因：无法保证公平对比
-  - 替代方案：渐进式发布、灰度发布
-
-- **是**（随机分配不会有大问题）
-  - ✅ 可以考虑，继续下一个问题
-
----
-
-**问题 3：能量化关键指标吗？**
-
-- **否**（改动是主观的，如品牌形象）
-  - ❌ 不适合 A/B 测试
-  - 原因：无法用数字衡量
-  - 替代方案：用户调研、焦点小组
-
-- **是**（有明确的数字指标，如转化率）
-  - ✅ 适合 A/B 测试！
-
----
-
-**总结**：
-- 三个答案都是"是" → **做 A/B 测试**
-- 任何一个"否" → **考虑其他方法**
-
----
-
-### 10.2 实验中决策树：什么时候该停止？
-
-**问题 1：是否达到预定的样本量？**
-
-- **否**（还没达到）
-  - ⚠️ 不要停止，不要分析
-  - 原因：P 值还不稳定，容易误判
-  - 例外：发现严重问题（如 Bug），立即停止
-
-- **是**（已经达到）
-  - ✅ 可以分析结果了
-
----
-
-**问题 2：是否有严重问题？**
-
-**严重问题的定义**：
-- 转化率暴跌 > 50%
-- 大量用户投诉
-- 系统错误或 Bug
-- 安全问题
-
-- **是**（有严重问题）
-  - 🛑 **立即停止实验，回滚到 A 版本**
-  - 不要等样本量，安全第一
-
-- **否**（没有严重问题）
-  - ✅ 继续运行到预定时间
-
----
-
-**问题 3：是否达到预定时间（如 2 周）？**
-
-- **否**（还没到）
-  - ⏳ 继续运行
-  - 原因：需要覆盖完整业务周期，避免新奇效应
-
-- **是**（已经到了）
-  - ✅ 可以停止并分析结果
-
----
-
-**总结**：
-- 发现严重问题 → **立即停止**
-- 没达到样本量/时间 → **继续运行**
-- 达到样本量 + 时间 → **停止并分析**
-
----
-
-### 10.3 实验后决策树：如何解读结果？
-
-**问题 1：P 值是否 < 0.05？**
-
-- **否**（p ≥ 0.05，不显著）
-  - 转到问题 2
+## 3. 结果对决：真相审判
 
-- **是**（p < 0.05，显著）
-  - 转到问题 3
+收集完充足的数据后，我们需要通过下面这套专业的漏斗模型进行精确评判。对比结果不仅仅是一个简单的加减法，而是牵扯到置信度、正态分布计算的重头戏：
 
----
-
-**问题 2：不显著，怎么办？**
-
-**检查 1：样本量是否足够？**
-- 否（样本太小）
-  - 延长实验时间，收集更多数据
-
-- 是（样本充足）
-  - 继续检查 2
-
-**检查 2：置信区间是否很宽？**
-- 是（如 [-20%, +30%]）
-  - 延长实验，缩小置信区间
-
-- 否（如 [-2%, +8%]）
-  - 继续检查 3
-
-**检查 3：是否有业务价值？**
-- 置信区间下限 > 5%（如 [+6%, +15%]，虽然不显著）
-  - 考虑上线（如果风险低）
-
-- 置信区间下限 < 0（如 [-5%, +15%]）
-  - 保持现状或延长观察
-
----
-
-**问题 3：显著，B 版本更好吗？**
-
-- **否**（B 更差，显著）
-  - ❌ **放弃 B 版本，保持 A 版本**
-  - 原因：B 版本显著损害了指标
-
-- **是**（B 更好，显著）
-  - 转到问题 4
-
----
-
-**问题 4：B 版本更好，提升多大？**
+<ABTestingDemo tab="results" />
 
-- **小提升**（< 5%，如 +2%）
-  - 转到问题 5
-
-- **大提升**（≥ 5%，如 +10%）
-  - 转到问题 6
-
----
-
-**问题 5：小提升但显著，怎么办？**
-
-**检查 1：置信区间下限是多少？**
-- 下限 > 0（如 [+1%, +5%]）
-  - 可以考虑上线
-
-- 下限 ≤ 0（如 [-1%, +5%]）
-  - 谨慎上线或延长观察
-
-**检查 2：实施成本是多少？**
-- 低成本（改文案）
-  - 可以上线
-
-- 高成本（重构代码）
-  - 不建议上线（ROI 太低）
-
-**检查 3：是否有副作用？**
-- 用户满意度下降
-- 其他指标恶化
-  - 不上线或延长观察
-
-- 无副作用
-  - 可以上线
+当你看到页面上反馈了一个明确的**“显著 ✅”**时，那意味着我们可以向全公司自豪地宣布：抛弃我们主观幼稚的争论，立刻全量上线 B 方案！一切都有坚实的数学原理作为后盾。
 
 ---
 
-**问题 6：大提升且显著，直接上线？**
-
-**还需要检查**：
-- [ ] 用户满意度是否下降？
-- [ ] 退款率/投诉率是否上升？
-- [ ] 是否存在辛普森悖论？（子群体结论不一致）
-- [ ] 是否是新奇效应？（短期暴涨，长期回落）
-- [ ] 其他关键指标是否恶化？
-
-**结果**：
-- 所有检查通过 → **全量上线**
-- 有任何警告 → **谨慎上线或延长观察**
+## 4. 幽暗的陷阱：分析中的误区
 
----
-
-### 10.4 快速参考：常见决策场景
+虽然 A/B 测试本身是理性和科学的体现，但操作它的人却深受人性的弱点左右。人们往往只愿意看到自己期望的结果，这很容易让整个测试由于失真而陷入可怕的反噬：
 
-| 场景 | 决策 | 理由 |
-| :--- | :--- | :--- |
-| **p < 0.01，提升 20%** | ✅ 全量上线 | 高度显著，大提升 |
-| **p < 0.05，提升 15%** | ✅ 全量上线 | 显著，中提升 |
-| **p < 0.05，提升 3%** | ⚠️ 谨慎上线 | 显著但提升小，检查副作用 |
-| **p = 0.08，提升 10%** | ⏳ 延长实验 | 接近显著，需要更多数据 |
-| **p = 0.30，提升 2%** | ❌ 保持现状 | 不显著，提升小 |
-| **p < 0.05，降低 10%** | 🛑 放弃 B 版本 | 显著恶化 |
-| **p < 0.05，移动端 +20%，桌面端 -5%** | ⚠️ 分群体决策 | 存在辛普森悖论 |
-| **第 1 周 +30%，第 4 周 0%** | ❌ 保持现状 | 新奇效应，虚假提升 |
-| **p = 0.04，但满意度下降** | ⚠️ 延长观察 | 主指标好，副指标差 |
+<ABTestingDemo tab="pitfalls" />
 
----
+### 4.1 警惕“新奇效应”
 
-## 名词速查表
+当某样东西刚刚出现时，用户会因为纯粹的猎奇和新奇感，去点击你那个看起来乱七八糟的新按钮，这会让你的转化率在头三天呈现火箭式的拉升。
 
-| 名词 | 英文 | 解释 |
-| :--- | :--- | :--- |
-| **A/B 测试** | A/B Testing | 对比实验，随机分配用户到不同版本，比较指标差异 |
-| **对照组** | Control Group | 使用当前版本的组（A 组），作为基准 |
-| **实验组** | Treatment Group | 使用新版本的组（B 组），验证效果 |
-| **转化率** | Conversion Rate | 完成目标行为的用户占比（如购买、注册） |
-| **零假设** | Null Hypothesis | 假设两组没有差异的起点，目标是"推翻"它 |
-| **P 值** | P-value | 如果零假设为真，观察到当前数据的概率 |
-| **统计显著性** | Statistical Significance | P 值 < 0.05，结果不太可能是随机的 |
-| **置信区间** | Confidence Interval | 真实差异可能落入的范围（如 95% CI） |
-| **统计功效** | Statistical Power | 检测到真实效应的概率（1-β），通常 80% |
-| **第一类错误** | Type I Error | 假阳性（说有差异，实际没有），α 控制 |
-| **第二类错误** | Type II Error | 假阴性（说没差异，实际有），β 控制 |
-| **显著性水平** | Significance Level | 容忍第一类错误的概率，通常 α = 0.05 |
-| **效应量** | Effect Size | 差异的大小（相对提升多少），不只是是否显著 |
-| **样本量** | Sample Size | 每组需要的用户数，需提前计算 |
-| **随机分配** | Random Assignment | 每个用户有相同概率进入任一组 |
-| **单尾检验** | One-tailed Test | 只检验"更好"（不关心"更差"） |
-| **双尾检验** | Two-tailed Test | 检验"有差异"（更好或更差都算） |
-| **辛普森悖论** | Simpson's Paradox | 分组看趋势一致，合并后趋势相反 |
-| **P-hacking** | P-hacking | 操纵数据或方法以获得显著结果 |
-| **新奇效应** | Novelty Effect | 用户因好奇产生的短期行为变化 |
-| **序贯检验** | Sequential Testing | 预设多个检查点，动态调整显著性阈值 |
+很多产品经理会在第三天果断拿着完美的数据停止实验并发放战报。但如果你耐心等到两周之后，你会发现用户的新鲜感一过，数据又阴暗地跌到了老版本的红线之下。这就是为什么实验的周期设置尤为关键，切勿被短期的虚高蒙蔽双眼。
 
 ---
 
-## 参考资源
-
-### 在线工具
-- [Evan Miller - A/B 测试样本量计算器](https://www.evanmiller.org/ab-testing/sample-size.html)
-- [Optimizely - 样本量计算器](https://www.optimizely.com/sample-size-calculator/)
-- [AB TestGuide - 统计显著性计算器](https://abtestguide.com/calc/)
+## 5. 总结：培养向数据屈服的勇气
 
-### 经典文章
-- [ Airbnb 的实验设计实践](https://medium.com/airbnb-engineering/experimentation-at-airbnb-acquiring-trust-confidence-through-exploratory-data-analysis-9304de556269)
-- [Netflix 的 A/B 测试指南](https://netflixtechblog.com/its-all-a-bout-testing-the-netflix-experimentation-platform-4e1ca458c55)
-- [Google 的 A/B 测试最佳实践](https://experimentation.com/)
+总而言之，从“直觉式猜想”走向“A/B 测试”，对于任何一个团队来说都是一场巨大的心智蜕变。
 
-### 书籍推荐
-- 《Trustworthy Online Controlled Experiments》- Ron Kohavi 等
-- 《Designing Experiments》- Geoffrey Keppel
+1. **提出谨慎假设**：基于对用户的严谨观察，建立一条可以被量化的假说。
+2. **切分平行世界**：以纯粹的随机撕裂流量，剔除外在的噪音牵绊。
+3. **接受样本洗礼**：等待大数定律生效，用足量的时间和样本降低波动。
+4. **进行数学审判**：让 P 值来宣判方案的好坏，严格服从显著性的事实。
 
-### 相关文章
-- [A/B Testing Pitfalls - Simpson's Paradox, P-hacking, Early Stopping](https://blog.example.com/ab-testing-pitfalls)
-- [Sample Size Calculation for A/B Testing](https://www.evanmiller.org/ab-testing/sample-size.html)
+作为软件的缔造者，最大的智慧莫过于——**学会向事实屈服的勇气。我们不用再花费几个小时在会议室里为蓝色和红色吵得面红耳赤；只需静待两周，点击率会向我们证明，究竟谁才是最受用户拥簇的王者。**
diff --git a/docs/zh-cn/appendix/5-data/data-analysis.md b/docs/zh-cn/appendix/5-data/data-analysis.md
index 09da3df..b6714c5 100644
--- a/docs/zh-cn/appendix/5-data/data-analysis.md
+++ b/docs/zh-cn/appendix/5-data/data-analysis.md
@@ -1,1993 +1,118 @@
-# 数据分析：从数据中"挖掘价值"
+# 数据分析：拨开数字的迷雾
 
-::: tip 核心问题
-**如何从数据中发现规律？** 这就像问：怎么从一堆杂乱的数字里找到有价值的信息？怎么判断业务是否健康？怎么预测未来的趋势？数据分析解决的就是"从数据到洞察"的问题。
+::: tip 🎯 核心问题
+**如果把网站比作人，数据到底是在检查什么？** 
+当我们面对每天产生的惊人数据：几十亿行的日志、数以千万计的点击量，我们该怎么下手？是依靠 DAU (日活) 自满，还是对次日惊人下跌的留存率战战兢兢？本章以侦探探案的视角告诉你，怎样让这些死气沉沉的数字，自己开口说话。
 :::
 
 ---
 
-## 0. 先问一个问题：你有没有经历过这些困惑？
+## 0. 全景图：从数字垃圾到金矿洞察
 
-**场景一：被数据淹没**
+数据本身毫无生命。它们不过是安静地躺在磁盘扇区里，堆砌着毫无温度的 0 和 1。每一天有 100 万人在你的 APP 里注册，但其中可能有 80% 的人在头三分钟内就再也不回来了。
 
-```
-系统日志：10 GB/天
-用户行为：100 万条/天
-订单数据：10 万条/天
-```
+这些就是赤裸裸的“数据”。
+而我们该如何像一名法医或是名侦探一样，从一滩纷乱如麻的现场脚印中，剥茧抽丝，揪出潜藏背后的罪魁祸首呢？“发现问题、分析本质、指引改进”，这套流程的学名叫 **数据分析 (Data Analysis)**。
 
-数据堆积如山，但不知道从哪里入手分析，更不知道这些数据能告诉你什么。
-
-**场景二：只看表面指标**
-
-```
-DAU（日活用户）：10 万 → 看起来不错！
-次日留存：15% → 危险！
-30 日留存：3% → 非常危险！
-```
-
-只看 DAU 以为产品很成功，但留存率暴跌说明用户来一次就走，产品根本没有粘性。
-
-**场景三：不会用 SQL 分析数据**
-
-```
-想统计：每个用户的平均订单额
-只会写：SELECT * FROM orders;
-然后用 Excel 手动计算...
-```
-
-掌握基本的数据分析技能，能让你从"看数据"变成"用数据驱动决策"。
+如果把企业的运营比喻成一个人去医院做了体检：
+1. **收集体检单**：把肝功能、心电图全查出来（数据收集与埋点）。
+2. **血常规初诊**：看看身体各个指标的大概均值是否异常（描述性统计）。
+3. **CT扫出病原**：深入病灶查看到底大面上哪里出问题了（群体过滤与数据聚合）。
+4. **追溯病情**：观察健康下降的全过程，看看这病到底是哪一天落下的（留存和漏斗排查）。
 
 ---
 
-**好的数据分析就像侦探破案**——从蛛丝马迹中发现规律，从混乱中找到真相。
+## 1. 描述性统计：体温计与血常规
+
+“最近我们班的成绩怎么这么差？”
+面对这样的疑问，如果你一条条念名字：“张三 52，李四 95...”，那简直是要发疯的事情。
+
+面对庞杂无垠的海量细节，我们发明了一种极为凝练的力量：用几个极致抽象的**指标**，来一把掐住整体数据的脉络。
+
+<DataAnalysisDemo tab="stats" />
+
+### 1.1 均值 (Mean)
+
+它就如同温度计，一把揽住了班级里的所有成员并简单平摊。但这把标尺有时候会撒谎。如果你正在和比尔盖茨一起吃饭，那你们这桌就拥有两个亿万富翁，但这并不能说明你同样身怀巨款。这就是均值在面对**极端值 (Outliers)** 时的脆弱。
+
+### 1.2 中位数 (Median) 与 众数 (Mode)
+
+此时我们引入了“把大家按名次站成一排”的理念，精确掐住站在正中央（第 50 分位数）的那个人的水平。不管比尔盖茨身价多高，只要他排在队尾，他就完全拉扯不了位于中央的那位普通人。
+而众数则是告诉你货架上卖的最火的那件爆款是什么（因为它是出现次数最多的常客）。
+
+### 1.3 标准差 (Standard Deviation)
+
+如果你和隔壁班的均值都是 80 分。隔壁班所有人考的都是 80 左右，而我们班是一半人满分 100，一半人刚刚及格 60。这怎么区分？
+方差和标准差就是一把尺，专门衡量这种“数据像散沙一样分散”或者“像砖块一样抱团”的聚合程度。
 
 ---
 
-## 1. 什么是数据？
+## 2. 数据聚合：上帝视角鸟瞰众生
 
-**数据**就是关于任何事物的记录。在你的日常生活中，数据无处不在。
+当我们凝视个人时，就像管中窥豹。一个人偶尔退货并不能说明这身衣服的质量有问题。但如果我们打开上帝视角，把零散的一件件碎片拼在一起呢？
 
-### 1.1 生活中的数据例子
+这就来到了 **数据聚合 (Aggregation)** 的领域。
+我们经常会把海量订单，按着地区、年龄、或者是购买时间，像推倒多米诺骨牌一样给拢成一打一打的。
 
-**你的个人数据**：
-- 每天走了多少步（手机会记录）
-- 每月花了多少钱（支付宝/微信账单）
-- 睡了多少小时（健康 App 记录）
-- 看了哪些视频（B站/抖音历史记录）
+<DataAnalysisDemo tab="aggregation" />
 
-**一个咖啡店的数据**：
-- 每天卖了多少杯咖啡
-- 每种咖啡卖了多少杯
-- 每笔订单的金额
-- 顾客的等待时间
+### 2.1 常见的上帝之手
 
-**一个网站的数据**：
-- 每天有多少人访问
-- 用户点击了哪些按钮
-- 用户停留了多长时间
-- 用户从哪里来（搜索引擎、社交媒体等）
+比如我们常用 SQL（结构化查询语言）的：
+- **COUNT ()**：迅速数出这堆究竟有多少人。
+- **SUM ()**：把他们兜里的钱全部卷在一起加总。
+- **GROUP BY**：按照某种鲜明的属性（比如城市、或者是新老用户），把他们硬生生拆开分别摆好，这就叫做分组比对。
 
-::: tip 💡 关键理解
-**数据 = 记录下来的信息**
-只要能被记录、被存储、被计算的，都是数据。
-:::
+这是一种摧枯拉朽的化繁为简：通过聚合，几百 G 巨大的行为轨迹表格被瞬间碾压成了短短的两三行汇总。
 
 ---
 
-## 2. 什么是分析？
+## 3. 漏斗模型：捕捉消失的幸存者
 
-**分析**就是"拆解 + 研究"的意思。就像侦探破案一样，从一堆线索中找到规律。
+当你满心欢喜地投入千万广告费，拉来了 10 万名兴冲冲想要下单的用户。但第二天打开报表却如同坠入冰窟：实际付款到账的只有区区 1,200 人！
 
-### 2.1 用侦探破案来类比
+这几万人都死在这条路上的哪里了？
+这个时候，我们需要一把异常锋利的手术刀——**转化漏斗 (Funnel)**。
 
-**侦探怎么做**：
-1. 收集线索（指纹、脚印、监控录像）
-2. 找线索之间的联系
-3. 推理出真相
-4. 抓住坏人
+<DataAnalysisDemo tab="funnel" />
 
-**数据分析怎么做**：
-1. 收集数据（用户行为、销售记录、日志）
-2. 找数据之间的联系
-3. 发现规律和趋势
-4. 做出决策
+### 3.1 横切业务链的断层
 
-::: tip 💡 关键理解
-**分析 = 从数据中找规律**
-不是"看数据"，而是"理解数据背后的故事"。
-:::
+用户从进入店铺大门到最终结账，中间会经历一系列的惊险跨栏：
 
-### 2.2 生活中的"分析"例子
+- **第一关**：看到商品详情页（10万人）。
+- **第二关**：愿意拉到底点击购买（跌至6万人）。
+- **第三关**：填写那让人烦躁的收货地址（跌至3万人）。
+- **第四关**：打开支付系统输入复杂的验证码验证（终于只剩下最后生还的 1,200 人）。
 
-**例子一：你发现咖啡总是卖完**
-- **数据**：每天早上 10 点，拿铁咖啡就卖完了
-- **分析**：为什么总是 10 点卖完？
-  - 查看销售记录 → 发现 8-10 点是高峰期
-  - 统计销售量 → 发现拿铁占总销量的 60%
-  - 分析顾客 → 发现大部分是上班族
-- **结论**：上班族早高峰喜欢喝拿铁
-- **行动**：多准备一些拿铁，或者提前制作
-
-**例子二：你发现用户不爱用你的 App**
-- **数据**：下载量 1 万，但每天只有 500 人打开
-- **分析**：为什么用户不用？
-  - 查看用户行为 → 发现 80% 的用户注册后就没再回来
-  - 分析注册流程 → 发现需要填写 10 个字段
-  - 对比其他 App → 发现其他 App 只需要 2 个字段
-- **结论**：注册流程太复杂，吓跑了用户
-- **行动**：简化注册流程
+通过这张鲜血淋漓的“阵亡率清单”，你一眼就能看出：绝大多数人倒在了填写地址和支付跳转的过程上！比起盲目地去修改什么按钮颜色，**直接砍掉两项非必要的地址表单，才是救这帮快要在路上死绝的用户的致命灵丹**。
 
 ---
 
-## 3. 为什么要分析数据？
+## 4. 留存分析：忠诚度的生死考验
 
-### 3.1 一个真实的场景
+如果一款产品天天能像抽水机一样抽来大量用户，但池子底部却被挖开了一个大黑洞，漏水漏得精光。这能算是成功的商业模式吗？
 
-**老板问你**："我们的用户增长怎么样？"
+在这个领域，日活跃用户数（DAU）往往是一个自欺欺人的“虚荣指标”，真正照魔镜的是**留存率 (Retention Rate)**。
 
-**如果不懂数据分析，你可能会说**：
-- "挺好的吧，感觉用户变多了"
-- "不太清楚，我看看后台"
-- "昨天有 100 个新用户"
+<DataAnalysisDemo tab="retention" />
 
-**如果懂数据分析，你会这样回答**：
-```
-过去 30 天的数据：
-- 新增用户：3000 人（日均 100 人）
-- 增长趋势：环比增长 15%（上个月是 2600 人）
-- 用户质量：次日留存 45%，7 日留存 25%
-- 来源分布：搜索引擎 40%，社交媒体 35%，直接访问 25%
+### 4.1 留存的衰减断崖
 
-结论：
-1. 用户增长健康，且在加速
-2. 社交媒体来源的留存最高（55%），应该加大投放
-3. 搜索引擎来源的留存较低（30%），需要优化落地页
-```
+留存告诉我们一个真相：在一群人经历狂欢般地第一天疯狂下载使用后，第二天还有多少人记得登录（次日留存），一周后有多少人形成了习惯（7日留存），一个月以后还有没有哪怕是一小撮顽固信徒在这个平台扎根（30日留存）？
 
-**哪个回答更有价值？** 显然是第二个。
-
-::: tip 💡 关键理解
-**数据分析的价值 = 让你做出更好的决策**
-- 不是"我觉得"，而是"数据显示"
-- 不是"大概"，而是"准确"
-- 不是"事后诸葛亮"，而是"提前预测"
-:::
-
-### 3.2 数据分析能帮你做什么？
-
-| 场景 | 问题 | 数据分析能做什么 |
-| :--- | :--- | :--- |
-| **做生意** | 不知道哪个商品好卖 | 统计销售数据，找出爆款 |
-| **做产品** | 不知道用户喜欢什么 | 分析用户行为，优化功能 |
-| **做运营** | 不知道广告效果如何 | 对比不同渠道的转化率 |
-| **做投资** | 不知道买哪只股票 | 分析历史数据，预测趋势 |
-| **个人生活** | 不知道钱花哪了 | 记账分析，找出浪费 |
+这不仅代表着你的产品是不是在玩一场昂贵的拉新骗局。甚至，如果留存跌破 15%，你拉多少人进来都是一场注定向深渊下坠的徒劳。寻找产品初期的破局点（Aha Moment，啊哈时刻），就等于是如何拯救那条惨不忍睹的跌落生命线。
 
 ---
 
-## 4. 数据分析的价值
+## 5. 总结：培养向事实低头的直觉
 
-**数据分析**是从数据中提取有价值信息的过程。它不是简单的"看数字"，而是通过统计、聚合、可视化等方法，发现数据背后的规律和趋势。
+**数据从不撒谎，但人经常说谎。**
 
-### 4.1 用医学检查来类比
+一个优秀的数据大脑不是为了用漂亮的术语去忽悠领导或投资人，而是像医生看化验单一样寻找最深刻的根源：
+1. **寻找异常**：当极差和标准差大幅波动的那些黑天鹅夜晚，到底发生了什么？
+2. **切分颗粒**：用 GROUP BY 不停地顺藤摸瓜，用上帝视角将整体拆成碎片寻找突破。
+3. **定位断崖**：盯着那流血满地的转化漏斗，寻找最薄弱的环节去对症下药。
+4. **守住生命线**：不再为每天短暂飙升的流量叫好，只紧盯留存在一个月后的真实忠诚。
 
-| 医学检查 | 数据分析 | 说明 |
-| :--- | :--- | :--- |
-| 体温计 | 基础指标 | 温度/DAU 等单一数值 |
-| 血常规 | 描述性统计 | 均值、中位数、分布情况 |
-| CT 扫描 | 多维度分析 | 从不同角度看数据 |
-| 趋势图 | 时间序列分析 | 观察变化趋势 |
-| 诊断报告 | 数据洞察 | 得出结论和建议 |
-
-### 1.2 数据分析的核心价值
-
-| 价值 | 说明 | 示例 |
-| :--- | :--- | :--- |
-| **描述现状** | 告诉你"发生了什么" | 今日 DAU 10 万，销售额 50 万 |
-| **诊断问题** | 告诉你"为什么发生" | 留存率低是因为注册流程太长 |
-| **预测趋势** | 告诉你"可能发生什么" | 根据过去 30 天数据，下月 DAU 增长 10% |
-| **指导决策** | 告诉你"应该怎么做" | A/B 测试显示新版按钮转化率提高 20% |
-
----
-
-## 5. 描述性统计：从数据中"提炼信息"
-
-**描述性统计**就是用几个数字来概括大量的数据。
-
-想象一下，如果你要向朋友描述"你们班同学的身高"，你会怎么说？
-- ❌ "张三 170cm，李四 175cm，王五 168cm..."（说 10 分钟都说不完）
-- ✅ "我们班平均身高 172cm"（一句话就说清楚了）
-
-这就是描述性统计的作用：**把复杂的数据变成简单的指标**。
-
-### 5.1 均值：数据的"平均值"
-
-#### 场景：计算平均成绩
-
-你有 5 门课的成绩：80, 85, 90, 75, 95
-
-**计算步骤**：
-```
-步骤 1：把所有成绩加起来
-80 + 85 + 90 + 75 + 95 = 425
-
-步骤 2：数一共有几门课
-一共 5 门课
-
-步骤 3：用总和除以数量
-425 ÷ 5 = 85
-
-所以平均成绩是 85 分。
-```
-
-#### 用数学公式表示
-
-**均值 = (所有数值的和) ÷ (数值的个数)**
-
-**符号表示**：
-- 均值的符号是 x̄（读作"x bar"）
-- 数据用 x₁, x₂, x₃... 表示
-- 数据个数用 n 表示
-
-**公式**：x̄ = (x₁ + x₂ + x₃ + ... + xₙ) ÷ n
-
-**用成绩的例子**：
-```
-x̄ = (80 + 85 + 90 + 75 + 95) ÷ 5
-   = 425 ÷ 5
-   = 85
-```
-
-#### 什么时候用均值？
-
-**适合用均值的场景**：
-- 数据分布比较均匀
-- 想知道"整体水平"
-- 没有极端的异常值
-
-**例子**：
-- ✅ 计算班级平均成绩（成绩通常分布在 60-100 之间）
-- ✅ 计算店铺日均销售额（每天的销售差异不会太大）
-- ✅ 计算用户平均年龄（大部分用户年龄相近）
-
-#### 什么时候不能用均值？
-
-**问题一：极端值会拉偏均值**
-
-**场景：工资调查**
-
-一个公司有 5 个人，工资分别是：
-```
-员工 A：3000 元
-员工 B：4000 元
-员工 C：5000 元
-员工 D：6000 元
-老板：  100000 元
-```
-
-**计算均值**：
-```
-(3000 + 4000 + 5000 + 6000 + 100000) ÷ 5
-= 118000 ÷ 5
-= 23600 元
-```
-
-**问题**：均值显示"平均工资 23600 元"，但实际上 4 个员工工资都不到 6000 元。老板的高工资把均值拉高了。
-
-**这时候应该用中位数（后面会讲）**。
-
----
-
-**问题二：数据分布不均匀**
-
-**场景：电商订单金额**
-
-某电商平台今天的订单：
-```
-9.9 元  × 1000 单 = 9900 元
-99 元   × 100 单  = 9900 元
-999 元  × 10 单   = 9990 元
-9999 元 × 1 单    = 9999 元
-```
-
-**订单数**：1111 单
-**总金额**：39789 元
-**均值**：39789 ÷ 1111 ≈ 35.8 元
-
-**问题**：均值显示"平均订单 35.8 元"，但实际上大部分订单（1000 单）都是 9.9 元。
-
-**这时候应该用众数（后面会讲）**。
-
-::: tip 💡 实战建议
-- **看 DAU、GMV 等**：用均值即可（数据量大，极端值影响小）
-- **看收入、房价等**：用中位数更准确（避免被极端值 skew）
-- **看热销商品等**：用众数（最典型的情况）
-:::
-
----
-
-### 5.2 中位数：排序后"中间"的值
-
-#### 什么是中位数？
-
-**中位数**就是把数据从小到大排序后，位于中间位置的那个值。
-
-#### 场景：计算工资中位数
-
-**数据：一个公司 5 个人的工资**
-```
-3000, 4000, 5000, 6000, 100000
-```
-
-**计算步骤**：
-```
-步骤 1：排序（从小到大）
-3000, 4000, 5000, 6000, 100000 ✓（已经排序）
-
-步骤 2：找到中间的位置
-一共 5 个数，中间是第 3 个
-
-步骤 3：取出中间的值
-中位数 = 5000 元
-```
-
-**对比均值**：
-- 中位数 = 5000 元（更能代表普通员工的工资）
-- 均值 = 23600 元（被老板的高工资拉高了）
-
-#### 如果数据个数是偶数怎么办？
-
-**数据：6 个人的工资**
-```
-3000, 4000, 5000, 6000, 7000, 100000
-```
-
-**计算步骤**：
-```
-步骤 1：排序
-3000, 4000, 5000, 6000, 7000, 100000
-
-步骤 2：找到中间的位置
-一共 6 个数，中间是第 3 和第 4 个之间
-
-步骤 3：计算中间两个数的平均值
-(5000 + 6000) ÷ 2 = 5500
-
-中位数 = 5500 元
-```
-
-#### 什么时候用中位数？
-
-**适合用中位数的场景**：
-- 数据有极端值（比如工资、房价）
-- 想知道"典型情况"
-- 数据分布不均匀
-
-**例子**：
-- ✅ 调查收入（避免被亿万富翁 skew）
-- ✅ 统计房价（避免被豪宅 skew）
-- ✅ 分析订单金额（避免被大单 skew）
-
----
-
-### 5.3 众数：出现"最多"的值
-
-#### 什么是众数？
-
-**众数**就是数据中出现次数最多的值。
-
-#### 场景：找出最畅销的商品
-
-**数据：某咖啡店今天的订单**
-```
-拿铁 × 15 杯
-美式 × 8 杯
-卡布奇诺 × 5 杯
-摩卡 × 3 杯
-玛奇朵 × 2 杯
-```
-
-**计算步骤**：
-```
-步骤 1：统计每种咖啡出现的次数
-拿铁：15 次
-美式：8 次
-卡布奇诺：5 次
-摩卡：3 次
-玛奇朵：2 次
-
-步骤 2：找到出现次数最多的
-拿铁出现 15 次，是最多的
-
-众数 = 拿铁
-```
-
-**结论**：拿铁是最受欢迎的咖啡。
-
-#### 特殊情况：可能有多个众数
-
-**数据：同学们的鞋码**
-```
-37 码 × 2 人
-38 码 × 5 人
-39 码 × 5 人
-40 码 × 3 人
-41 码 × 1 人
-```
-
-**众数**：38 码和 39 码（都出现了 5 次）
-
-**结论**：这个班有两种主流鞋码。
-
-#### 什么时候用众数？
-
-**适合用众数的场景**：
-- 数据是分类（不是数字）
-- 想知道"最热门"的选项
-- 有多个峰值
-
-**例子**：
-- ✅ 最畅销的商品（iPhone、奶茶）
-- ✅ 最常用的功能（点赞、评论）
-- ✅ 最热门的搜索词（用户经常搜什么）
-
----
-
-### 5.4 集中趋势：数据的"中心"在哪里？
-
-现在你已经了解了三个指标，让我们总结一下：
-
-| 指标 | 定义 | 适用场景 | 示例 |
-| :--- | :--- | :--- | :--- |
-| **均值** | 所有数值的平均值 | 数据分布均匀时 | 用户平均年龄：28 岁 |
-| **中位数** | 排序后位于中间的值 | 有极端值时 | 收入中位数：5000 元（避免被亿万富翁 skew） |
-| **众数** | 出现次数最多的值 | 分类数据 | 最常买的商品：iPhone |
-
-#### 为什么需要三个指标？
-
-**场景一：正常分布（三个指标接近）**
-```python
-数据：[1, 2, 3, 4, 5]
-
-均值 = (1 + 2 + 3 + 4 + 5) ÷ 5 = 3
-中位数 = 排序后中间的数 = 3
-众数 = 没有重复的数，无众数
-
-→ 数据分布均匀，均值和中位数接近
-```
-
-**场景二：有极端值（中位数更准确）**
-```python
-数据：[1, 2, 3, 4, 100]
-
-均值 = (1 + 2 + 3 + 4 + 100) ÷ 5 = 22
-中位数 = 排序后中间的数 = 3
-众数 = 没有重复的数，无众数
-
-→ 极端值（100）拉高了均值，中位数（3）更准确
-```
-
-**场景三：电商订单（众数最典型）**
-```python
-数据：[9.9, 9.9, 9.9, 999, 9999]
-
-均值 = (9.9 + 9.9 + 9.9 + 999 + 9999) ÷ 5 = 2005.72
-中位数 = 排序后中间的数 = 9.9
-众数 = 9.9（出现 3 次）
-
-→ 大部分用户买 9.9 元商品，众数（9.9）最典型
-```
-
----
-
-### 5.5 离散程度：数据"分散"还是"集中"?
-
-#### 为什么需要衡量离散程度？
-
-**场景：两个班的平均成绩都是 80 分**
-
-**A 班**：[78, 79, 80, 81, 82]
-- 均值 = 80
-- 标准差 = 1.41（很小）
-- **解读**：成绩很集中，大家水平差不多
-
-**B 班**：[50, 65, 80, 95, 100]
-- 均值 = 80
-- 标准差 = 18.71（很大）
-- **解读**：成绩很分散，有的很好，有的很差
-
-**结论**：虽然两个班平均分相同，但 A 班更"稳定"，B 班差异"很大"。
-
-#### 极差：最简单的衡量方法
-
-**极差 = 最大值 - 最小值**
-
-**例子：考试成绩**
-```
-成绩：[60, 75, 80, 85, 95]
-
-步骤 1：找到最大值
-最大值 = 95
-
-步骤 2：找到最小值
-最小值 = 60
-
-步骤 3：计算极差
-极差 = 95 - 60 = 35
-
-所以成绩的极差是 35 分。
-```
-
-**优点**：计算简单
-**缺点**：只看最大和最小，容易被极端值影响
-
----
-
-#### 方差：衡量每个数据与均值的偏离
-
-**什么是方差？**
-
-方差衡量"每个数据与均值相差多少"，然后取平均值。
-
-**计算步骤**：
-
-**例子：数据 [2, 4, 6, 8, 10]**
-
-```
-步骤 1：计算均值
-(2 + 4 + 6 + 8 + 10) ÷ 5 = 6
-
-步骤 2：计算每个数与均值的差
-2 - 6 = -4
-4 - 6 = -2
-6 - 6 = 0
-8 - 6 = 2
-10 - 6 = 4
-
-步骤 3：把差值平方（去掉负号）
-(-4)² = 16
-(-2)² = 4
-0² = 0
-2² = 4
-4² = 16
-
-步骤 4：计算平方的平均
-(16 + 4 + 0 + 4 + 16) ÷ 5 = 8
-
-所以方差 = 8
-```
-
-**为什么要平方？**
-- 因为差值有正有负（-4, 4），直接加会抵消
-- 平方后都是正数，才能累加
-
-**问题**：方差是"平方"后的单位，不好理解。
-- 如果原始数据是"元"，方差就是"元²"
-- 如果原始数据是"岁"，方差就是"岁²"
-
-**解决方案**：用标准差！
-
----
-
-#### 标准差：更直观的离散程度
-
-**标准差 = 方差的平方根**
-
-**例子：刚才的方差 = 8**
-
-```
-标准差 = √8 ≈ 2.83
-```
-
-**优点**：
-- 单位和原始数据一样（元、岁、分等）
-- 更容易理解
-
-**如何理解标准差？**
-
-**经验法则（正态分布）**：
-- **68% 的数据**在 [均值 - 1 标准差, 均值 + 1 标准差] 之间
-- **95% 的数据**在 [均值 - 2 标准差, 均值 + 2 标准差] 之间
-
-**例子：用户年龄**
-```
-均值 = 28 岁
-标准差 = 5 岁
-
-解读：
-- 68% 的用户年龄在 23-33 岁之间（28 ± 5）
-- 95% 的用户年龄在 18-38 岁之间（28 ± 10）
-```
-
-#### 标准差的应用场景
-
-**场景一：判断用户行为是否一致**
-
-**产品 A**：
-- 日均使用时长：30 分钟
-- 标准差：2 分钟（很小）
-- **解读**：用户行为一致，产品体验稳定
-
-**产品 B**：
-- 日均使用时长：30 分钟
-- 标准差：20 分钟（很大）
-- **解读**：用户行为差异大，可能需要分群分析
-
-**场景二：发现异常值**
-
-**数据**：用户登录次数
-```
-均值 = 10 次/天
-标准差 = 2 次/天
-
-正常范围：[10 - 2×2, 10 + 2×2] = [6, 14]
-
-某用户登录 50 次/天 → 异常！
-（可能是在刷数据，或者是机器人）
-```
-
-::: tip 💡 实战建议
-- **标准差小**：用户行为一致，产品体验稳定
-- **标准差大**：用户群体差异大，可能需要分群分析
-- **超过 3 个标准差**：通常是异常值，需要检查
-:::
-
----
-
-### 5.6 离散程度：数据"分散"还是"集中"？
-
-| 指标 | 定义 | 说明 | 计算复杂度 |
-| :--- | :--- | :--- | :--- |
-| **极差** | 最大值 - 最小值 | 最简单，但易受极端值影响 | ⭐ |
-| **方差** | 各数据与均值差的平方的平均 | 数值越大，数据越分散 | ⭐⭐⭐ |
-| **标准差** | 方差的平方根 | 与原始数据同单位，更直观 | ⭐⭐⭐ |
-
----
-
-### 5.7 交互式演示
-
-👇 **动手试试看**：在下方输入一组数据，实时计算统计指标：
-
-<DataAnalysisDemo />
-
----
-
-## 6. 数据聚合：从明细到"洞察"
-
-**数据聚合**就是把"明细数据"（每一行记录）汇总成"统计数据"（总数、平均值等）。
-
-### 6.1 为什么需要数据聚合？
-
-**场景一：从订单明细到总销售额**
-
-**明细数据（每一笔订单）**：
-```
-订单 1：用户 A，2024-01-01，100 元
-订单 2：用户 B，2024-01-01，150 元
-订单 3：用户 A，2024-01-02，200 元
-订单 4：用户 C，2024-01-02，180 元
-```
-
-**聚合后（总销售额）**：
-```
-总销售额 = 100 + 150 + 200 + 180 = 630 元
-```
-
-**场景二：从用户行为到活跃用户数**
-
-**明细数据（每一条行为记录）**：
-```
-用户 A 在 2024-01-01 点击了 5 次
-用户 B 在 2024-01-01 点击了 3 次
-用户 A 在 2024-01-02 点击了 2 次
-用户 C 在 2024-01-02 点击了 4 次
-```
-
-**聚合后（每日活跃用户数）**：
-```
-2024-01-01：2 个活跃用户（A 和 B）
-2024-01-02：2 个活跃用户（A 和 C）
-```
-
-::: tip 💡 关键理解
-**聚合 = 从"看个体"到"看整体"**
-- **明细数据**：每一行记录（每个订单、每次点击）
-- **聚合数据**：统计结果（总销售额、活跃用户数）
-:::
-
----
-
-### 6.2 常用聚合操作
-
-#### 计数（COUNT）：统计"有多少个"
-
-**场景：统计订单总数**
-
-**明细数据**：
-```
-订单 1：用户 A，100 元
-订单 2：用户 B，150 元
-订单 3：用户 C，200 元
-```
-
-**聚合后**：
-```
-订单总数 = 3
-```
-
-**SQL 代码**：
-```sql
-SELECT COUNT(*) as total_orders
-FROM orders;
-
--- 结果：
--- | total_orders |
--- | :--- |
--- | 3 |
-```
-
----
-
-#### 求和（SUM）：计算"总和"
-
-**场景：计算总销售额**
-
-**明细数据**：
-```
-订单 1：100 元
-订单 2：150 元
-订单 3：200 元
-```
-
-**聚合后**：
-```
-总销售额 = 100 + 150 + 200 = 450 元
-```
-
-**SQL 代码**：
-```sql
-SELECT SUM(amount) as total_sales
-FROM orders;
-
--- 结果：
--- | total_sales |
--- | :--- |
--- | 450 |
-```
-
-**详细注释**：
-```sql
-SELECT
-  SUM(amount) as total_sales  -- 把所有订单金额加起来
-FROM orders;                  -- 从订单表
-```
-
----
-
-#### 均值（AVG）：计算"平均值"
-
-**场景：计算平均订单额**
-
-**明细数据**：
-```
-订单 1：100 元
-订单 2：150 元
-订单 3：200 元
-```
-
-**聚合后**：
-```
-平均订单额 = (100 + 150 + 200) ÷ 3 = 150 元
-```
-
-**SQL 代码**：
-```sql
-SELECT AVG(amount) as avg_order_amount
-FROM orders;
-
--- 结果：
--- | avg_order_amount |
--- | :--- |
--- | 150 |
-```
-
----
-
-#### 最大值（MAX）：找"最大"的
-
-**场景：找出最高单笔订单**
-
-**明细数据**：
-```
-订单 1：100 元
-订单 2：150 元
-订单 3：200 元
-```
-
-**聚合后**：
-```
-最高订单 = 200 元
-```
-
-**SQL 代码**：
-```sql
-SELECT MAX(amount) as max_order_amount
-FROM orders;
-
--- 结果：
--- | max_order_amount |
--- | :--- |
--- | 200 |
-```
-
----
-
-#### 最小值（MIN）：找"最小"的
-
-**场景：找出最低单笔订单**
-
-**明细数据**：
-```
-订单 1：100 元
-订单 2：150 元
-订单 3：200 元
-```
-
-**聚合后**：
-```
-最低订单 = 100 元
-```
-
-**SQL 代码**：
-```sql
-SELECT MIN(amount) as min_order_amount
-FROM orders;
-
--- 结果：
--- | min_order_amount |
--- | :--- |
--- | 100 |
-```
-
----
-
-### 6.3 聚合操作总结
-
-| 操作 | SQL 函数 | 说明 | 示例 | 生活类比 |
-| :--- | :--- | :--- | :--- | :--- |
-| **计数** | COUNT(*) | 统计行数 | 订单总数 | 数一数有几个苹果 |
-| **求和** | SUM(amount) | 累加数值 | 总销售额 | 把所有苹果重量加起来 |
-| **均值** | AVG(amount) | 计算平均 | 平均订单额 | 计算苹果的平均重量 |
-| **最大值** | MAX(amount) | 找最大值 | 最高单笔订单 | 找出最重的苹果 |
-| **最小值** | MIN(amount) | 找最小值 | 最低单笔订单 | 找出最轻的苹果 |
-
----
-
-### 6.4 分组聚合（GROUP BY）：按"类别"统计
-
-#### 什么是 GROUP BY？
-
-**GROUP BY**就是把数据按某个维度"分组"，然后对每组进行统计。
-
-**生活类比**：
-- 你有一堆水果（苹果、香蕉、橘子）
-- 你想统计每种水果有多少个
-- 你会先把它们"分组"（苹果一堆、香蕉一堆、橘子一堆）
-- 然后数每一堆有多少个
-
-这就是 GROUP BY 的思想。
-
-#### 场景一：统计每个用户的订单数和总消费
-
-**明细数据（orders 表）**：
-
-| order_id | user_id | amount |
-| :--- | :--- | :--- |
-| 1 | U001 | 100 |
-| 2 | U002 | 150 |
-| 3 | U001 | 200 |
-| 4 | U003 | 180 |
-| 5 | U002 | 120 |
-
-**问题**：统计每个用户的订单数和总消费？
-
-**SQL 代码**：
-```sql
-SELECT
-  user_id,               -- 选择用户 ID
-  COUNT(*) as order_count,  -- 统计订单数
-  SUM(amount) as total_amount  -- 计算总消费
-FROM orders              -- 从订单表
-GROUP BY user_id;        -- 按用户 ID 分组
-```
-
-**执行过程**：
-
-```
-步骤 1：按 user_id 分组
-
-分组 1（U001）：
-  订单 1：U001, 100
-  订单 3：U001, 200
-
-分组 2（U002）：
-  订单 2：U002, 150
-  订单 5：U002, 120
-
-分组 3（U003）：
-  订单 4：U003, 180
-
-步骤 2：对每组进行聚合
-
-分组 1（U001）：
-  order_count = 2（2 笔订单）
-  total_amount = 100 + 200 = 300
-
-分组 2（U002）：
-  order_count = 2（2 笔订单）
-  total_amount = 150 + 120 = 270
-
-分组 3（U003）：
-  order_count = 1（1 笔订单）
-  total_amount = 180
-```
-
-**聚合后（结果）**：
-
-| user_id | order_count | total_amount |
-| :--- | :--- | :--- |
-| U001 | 2 | 300 |
-| U002 | 2 | 270 |
-| U003 | 1 | 180 |
-
----
-
-#### 场景二：统计每个商品的销售总额
-
-**明细数据（order_items 表）**：
-
-| order_id | product_name | price | quantity |
-| :--- | :--- | :--- | :--- |
-| 1 | iPhone | 5000 | 1 |
-| 1 | 手机壳 | 50 | 2 |
-| 2 | iPad | 3000 | 1 |
-| 3 | iPhone | 5000 | 2 |
-| 3 | AirPods | 1000 | 1 |
-
-**问题**：统计每个商品的销售总额？
-
-**SQL 代码**：
-```sql
-SELECT
-  product_name,                -- 选择商品名称
-  SUM(price * quantity) as total_sales  -- 计算销售总额
-FROM order_items               -- 从订单明细表
-GROUP BY product_name;         -- 按商品名称分组
-```
-
-**详细注释**：
-```sql
-SELECT
-  product_name,                           -- 商品名称
-  SUM(price * quantity) as total_sales    -- 总额 = 单价 × 数量，然后求和
-FROM order_items
-GROUP BY product_name;                    -- 按商品分组
-```
-
-**聚合后（结果）**：
-
-| product_name | total_sales |
-| :--- | :--- |
-| iPhone | 15000（5000×1 + 5000×2） |
-| 手机壳 | 100（50×2） |
-| iPad | 3000（3000×1） |
-| AirPods | 1000（1000×1） |
-
----
-
-### 6.5 多维度聚合：按"多个类别"统计
-
-#### 场景：统计每个用户每天的消费
-
-**明细数据（orders 表）**：
-
-| order_id | user_id | date | amount |
-| :--- | :--- | :--- | :--- |
-| 1 | U001 | 2024-01-01 | 100 |
-| 2 | U002 | 2024-01-01 | 150 |
-| 3 | U001 | 2024-01-02 | 200 |
-| 4 | U002 | 2024-01-02 | 120 |
-| 5 | U001 | 2024-01-02 | 180 |
-
-**问题**：统计每个用户每天的消费？
-
-**SQL 代码**：
-```sql
-SELECT
-  user_id,               -- 用户 ID
-  date,                  -- 日期
-  SUM(amount) as daily_amount  -- 每天消费总额
-FROM orders
-GROUP BY user_id, date;  -- 按用户和日期分组
-```
-
-**执行过程**：
-
-```
-步骤 1：按 user_id 和 date 分组
-
-分组 1（U001, 2024-01-01）：
-  订单 1：U001, 2024-01-01, 100
-
-分组 2（U002, 2024-01-01）：
-  订单 2：U002, 2024-01-01, 150
-
-分组 3（U001, 2024-01-02）：
-  订单 3：U001, 2024-01-02, 200
-  订单 5：U001, 2024-01-02, 180
-
-分组 4（U002, 2024-01-02）：
-  订单 4：U002, 2024-01-02, 120
-
-步骤 2：对每组进行聚合
-
-分组 1（U001, 2024-01-01）：
-  daily_amount = 100
-
-分组 2（U002, 2024-01-01）：
-  daily_amount = 150
-
-分组 3（U001, 2024-01-02）：
-  daily_amount = 200 + 180 = 380
-
-分组 4（U002, 2024-01-02）：
-  daily_amount = 120
-```
-
-**聚合后（结果）**：
-
-| user_id | date | daily_amount |
-| :--- | :--- | :--- |
-| U001 | 2024-01-01 | 100 |
-| U001 | 2024-01-02 | 380 |
-| U002 | 2024-01-01 | 150 |
-| U002 | 2024-01-02 | 120 |
-
-::: tip 💡 GROUP BY 的核心思想
-把"明细数据"按某个维度分组，然后对每组进行统计。
-- **维度**：你想分析的角度（用户、商品、日期等）
-- **指标**：你想统计的数值（订单数、销售额等）
-:::
-
----
-
-### 6.6 常见错误：SELECT 中的字段必须在 GROUP BY 中
-
-#### 错误示例
-
-```sql
--- ❌ 错误：user_id 没有在 GROUP BY 中
-SELECT user_id, SUM(amount) as total_amount
-FROM orders;
-```
-
-**为什么会报错？**
-
-因为你想要按 user_id 显示，但没有按 user_id 分组，数据库不知道"怎么显示 user_id"。
-
-**正确写法**：
-```sql
--- ✅ 正确：所有非聚合字段都要在 GROUP BY 中
-SELECT
-  user_id,               -- 非聚合字段，必须在 GROUP BY 中
-  SUM(amount) as total_amount  -- 聚合字段，可以不在 GROUP BY 中
-FROM orders
-GROUP BY user_id;        -- 按 user_id 分组
-```
-
-#### 记忆规则
-
-**SELECT 中的字段，只有两种情况**：
-1. **聚合函数**：COUNT(), SUM(), AVG(), MAX(), MIN() → 不需要在 GROUP BY 中
-2. **普通字段**：必须在 GROUP BY 中
-
-**例子**：
-```sql
--- ✅ 正确
-SELECT
-  user_id,           -- 普通字段 → 在 GROUP BY 中
-  date,              -- 普通字段 → 在 GROUP BY 中
-  SUM(amount)        -- 聚合函数 → 不需要在 GROUP BY 中
-FROM orders
-GROUP BY user_id, date;  -- 所有普通字段都在这里
-```
-
----
-
-## 7. 可视化基础：让数据"会说话"
-
-好的可视化能让人一眼看懂数据的规律。
-
-### 7.1 常用图表类型
-
-| 图表类型 | 用途 | 示例 |
-| :--- | :--- | :--- |
-| **折线图** | 展示趋势 | DAU 变化、销售额增长 |
-| **柱状图** | 对比数值 | 各渠道用户数、各品类销售额 |
-| **饼图** | 展示占比 | 用户来源分布、商品品类占比 |
-| **散点图** | 探索关系 | 广告投入 vs 销售额 |
-
-### 7.2 图表选择指南
-
-| 想展示 | 选择图表 |
-| :--- | :--- |
-| **随时间的变化** | 折线图 |
-| **类别之间的对比** | 柱状图 |
-| **部分占整体的比例** | 饼图 |
-| **两个变量的关系** | 散点图 |
-| **多个变量的分布** | 箱线图 |
-
-::: tip 💡 可视化原则
-1. **简洁至上**：去掉不必要的装饰（3D 效果、渐变色等）
-2. **突出重点**：用颜色、大小强调关键数据
-3. **标注清晰**：标题、坐标轴、图例都要清楚
-4. **避免误导**：Y 轴从 0 开始，不要截断坐标轴
-:::
-
----
-
-## 8. 数据清洗：垃圾进，垃圾出
-
-**"Garbage In, Garbage Out"** —— 如果数据质量差，分析结果就不可信。
-
-### 8.1 常见数据问题
-
-| 问题类型 | 示例 | 影响 |
-| :--- | :--- | :--- |
-| **缺失值** | 年龄字段为 NULL | 统计结果偏差 |
-| **重复值** | 同一订单出现两次 | 重复计算 |
-| **异常值** | 年龄 = 200 岁 | 均值被拉偏 |
-| **格式不一致** | 日期：2024-01-01 和 01/01/2024 | 无法正确排序 |
-
-### 8.2 数据清洗步骤
-
-| 步骤 | 操作 | SQL 示例 |
-| :--- | :--- | :--- |
-| **1. 去重** | 删除重复记录 | `SELECT DISTINCT * FROM orders;` |
-| **2. 处理缺失值** | 填充或删除 | `WHERE age IS NOT NULL;` |
-| **3. 处理异常值** | 过滤或修正 | `WHERE age BETWEEN 0 AND 120;` |
-| **4. 标准化格式** | 统一日期格式 | `TO_DATE(date_str, 'YYYY-MM-DD');` |
-
----
-
-## 9. 漏斗分析：找到转化瓶颈
-
-**漏斗分析**就是追踪用户在一系列步骤中的转化情况，找到"流失最严重"的环节。
-
-### 9.1 什么是漏斗分析？
-
-#### 用生活例子来理解
-
-**场景：你开了一家咖啡店**
-
-```
-进店的人 → 品尝试饮 → 办理会员卡 → 成为常客
-  100人  →   50人    →    20人    →   10人
-  100%   →   50%     →    20%     →   10%
-```
-
-**问题**：为什么最终只有 10 人成为常客？
-
-**分析**：
-- **进店 → 品尝**：流失 50 人（转化率 50%）
-- **品尝 → 会员**：流失 30 人（转化率 40%）
-- **会员 → 常客**：流失 10 人（转化率 50%）
-
-**结论**：最大流失在"品尝 → 会员"环节，说明会员卡吸引力不够。
-
----
-
-#### 电商购物流程的漏斗分析
-
-**场景：用户在电商 App 购物**
-
-```
-访问商品页 → 加入购物车 → 进入结算页 → 完成支付
-   10000   →    6000     →     4000    →    2500
-   100%    →    60%      →     40%     →    25%
-```
-
-**计算过程**：
-
-**步骤 1：访问商品页**
-```
-访问人数 = 10000 人
-占比 = 10000 / 10000 = 100%
-```
-
-**步骤 2：加入购物车**
-```
-加购人数 = 6000 人
-转化率 = 6000 / 10000 = 60%
-流失率 = 1 - 60% = 40%
-```
-
-**步骤 3：进入结算页**
-```
-结算人数 = 4000 人
-转化率 = 4000 / 10000 = 40%
-流失率 = 1 - 40% = 60%
-```
-
-**步骤 4：完成支付**
-```
-支付人数 = 2500 人
-转化率 = 2500 / 10000 = 25%
-流失率 = 1 - 25% = 75%
-```
-
-#### 漏斗的 ASCII 图示
-
-```
-访问商品页 (10000 人)
-███████████████████████████████████████████████████
-│
-│ 6000 人流失 (40%)
-↓
-加入购物车 (6000 人)
-████████████████████████████████
-│
-│ 2000 人流失 (20%)
-↓
-进入结算页 (4000 人)
-████████████████████
-│
-│ 1500 人流失 (15%)
-↓
-完成支付 (2500 人)
-██████████████
-```
-
-#### 关键指标
-
-| 指标 | 定义 | 计算公式 | 示例 |
-| :--- | :--- | :--- | :--- |
-| **单步转化率** | 进入下一步的人数 / 当前步骤人数 | 下一步人数 / 当前人数 | 60% 的用户加入购物车 |
-| **整体转化率** | 最终完成人数 / 初始人数 | 最终人数 / 初始人数 | 25% 的用户完成购买 |
-| **单步流失率** | 1 - 单步转化率 | 1 - 转化率 | 40% 的用户在购物车环节流失 |
-| **总体流失率** | 1 - 整体转化率 | 1 - 整体转化率 | 75% 的用户最终未完成购买 |
-
----
-
-### 9.2 如何计算漏斗的每一步？
-
-#### SQL 代码示例
-
-假设我们有一个用户行为表 `user_events`：
-
-| event_id | user_id | event_name | timestamp |
-| :--- | :--- | :--- | :--- |
-| 1 | U001 | view_product | 2024-01-01 10:00:00 |
-| 2 | U001 | add_to_cart | 2024-01-01 10:01:00 |
-| 3 | U001 | checkout | 2024-01-01 10:02:00 |
-| 4 | U001 | purchase | 2024-01-01 10:03:00 |
-| 5 | U002 | view_product | 2024-01-01 10:00:00 |
-| 6 | U002 | add_to_cart | 2024-01-01 10:01:00 |
-| 7 | U003 | view_product | 2024-01-01 10:00:00 |
-
-**问题**：计算每个步骤的用户数？
-
-```sql
--- 步骤 1：访问商品页的用户数
-SELECT COUNT(DISTINCT user_id) as view_count
-FROM user_events
-WHERE event_name = 'view_product';
-
--- 结果：
--- | view_count |
--- | :--- |
--- | 10000 |
-
--- 步骤 2：加入购物车的用户数
-SELECT COUNT(DISTINCT user_id) as add_to_cart_count
-FROM user_events
-WHERE event_name = 'add_to_cart';
-
--- 结果：
--- | add_to_cart_count |
--- | :--- |
--- | 6000 |
-
--- 步骤 3：进入结算页的用户数
-SELECT COUNT(DISTINCT user_id) as checkout_count
-FROM user_events
-WHERE event_name = 'checkout';
-
--- 结果：
--- | checkout_count |
--- | :--- |
--- | 4000 |
-
--- 步骤 4：完成支付的用户数
-SELECT COUNT(DISTINCT user_id) as purchase_count
-FROM user_events
-WHERE event_name = 'purchase';
-
--- 结果：
--- | purchase_count |
--- | :--- |
--- | 2500 |
-```
-
----
-
-### 9.3 如何优化漏斗？
-
-#### 步骤 1：找到最弱的环节
-
-**分析漏斗数据**：
-
-```
-访问 → 加购 → 结算 → 支付
-100% → 60% → 40% → 25%
-       -40%  -20%  -15%
-```
-
-**流失分析**：
-- **访问 → 加购**：流失 40%（最大！）
-- **加购 → 结算**：流失 20%
-- **结算 → 支付**：流失 15%
-
-**结论**：最大流失在"访问 → 加购"环节，说明**商品页没有吸引力**。
-
-#### 步骤 2：针对性优化
-
-| 问题环节 | 流失率 | 可能原因 | 优化方案 | 预期效果 |
-| :--- | :--- | :--- | :--- | :--- |
-| **访问 → 加购** | 40% | 商品详情不清晰 | 优化图片、描述、评价 | 提升至 60% |
-| **加购 → 结算** | 20% | 运费不透明 | 明确显示总价（含运费） | 提升至 85% |
-| **结算 → 支付** | 15% | 支付流程复杂 | 减少表单字段，支持一键支付 | 提升至 90% |
-
-#### 步骤 3：验证优化效果
-
-**优化前的漏斗**：
-```
-访问 → 加购 → 结算 → 支付
-100% → 60% → 40% → 25%
-```
-**整体转化率：25%**
-
-**优化后的漏斗**：
-```
-访问 → 加购 → 结算 → 支付
-100% → 60% → 51% → 46%
-```
-**整体转化率：46%**
-
-**提升**：整体转化率从 25% 提升到 46%，增长了 84%！
-
----
-
-### 9.4 实战案例：优化注册流程
-
-#### 背景
-
-某社交 App 的注册流程：
-```
-打开 App → 输入手机号 → 输入验证码 → 设置密码 → 注册成功
- 10000  →    8000     →     6000    →   3000   →   1000
-  100%  →    80%      →     60%     →   30%    →   10%
-```
-
-**问题**：整体转化率只有 10%，太低了！
-
-#### 分析
-
-**最大流失环节**：设置密码 → 注册成功（流失 67%）
-
-**用户调研**：
-- "密码规则太复杂"
-- "不想设置密码，想用微信登录"
-- "输入密码后还要再输一遍，太麻烦"
-
-#### 优化方案
-
-**方案一：简化密码规则**
-- ❌ 原来：必须包含大小写字母、数字、特殊符号，至少 8 位
-- ✅ 优化后：6-20 位，任意字符
-
-**方案二：支持第三方登录**
-- 新增微信、Apple ID 一键登录
-
-**方案三：去掉确认密码**
-- 输入一次密码即可，用"显示密码"按钮代替确认
-
-#### 优化后的漏斗
-
-```
-打开 App → 输入手机号 → 输入验证码 → 注册成功（第三方登录）
- 10000  →    9000     →     8000    →       4000
-  100%  →    90%      →     80%     →       40%
-```
-
-**整体转化率**：从 10% 提升到 40%，增长了 4 倍！
-
----
-
-## 10. 留存分析：衡量产品粘性
-
-**留存率**衡量用户在首次使用后持续使用的情况，是产品健康度的核心指标。
-
-### 10.1 什么是留存？
-
-#### 用通俗的语言来理解
-
-**生活例子**：你开了一家健身房
-
-```
-第一天：100 个人办了健身卡
-第二天：只有 45 个人来锻炼
-第七天：只有 20 个人来锻炼
-第三十天：只有 10 个人来锻炼
-```
-
-**这意味着什么？**
-- **第二天**：55 个人不来了（流失了）
-- **第七天**：80 个人不来了（流失了）
-- **第三十天**：90 个人不来了（流失了）
-
-**问题**：为什么这么多人不来了？
-
-**可能的原因**：
-- 健身房太远
-- 价格太贵
-- 没有私教指导
-- 设施不好
-
----
-
-#### 产品的留存：用户会不会"回头"
-
-**场景：一个新闻 App**
-
-**用户 A 的故事**：
-```
-第 1 天（1 月 1 日）：下载 App，看了 3 篇新闻
-第 2 天（1 月 2 日）：又打开 App，看了 5 篇新闻 ✅ 留存了！
-第 3 天（1 月 3 日）：没打开
-...
-第 7 天（1 月 7 日）：又打开了 App ✅ 留存了！
-...
-第 30 天（1 月 30 日）：没打开 ❌ 没有留存
-```
-
-**用户 A 的留存情况**：
-- **次日留存**：✅ 留存（1 月 2 日打开）
-- **7 日留存**：✅ 留存（1 月 7 日打开）
-- **30 日留存**：❌ 未留存（1 月 30 日没打开）
-
----
-
-### 10.2 留存率类型
-
-#### 次日留存（Day 1 Retention）
-
-**定义**：注册第二天还活跃的用户占比
-
-**计算公式**：
-```
-次日留存率 = 第二天还活跃的用户数 / 第一天注册的用户数
-```
-
-**例子**：
-```
-1 月 1 日注册的用户：1000 人
-1 月 2 日还活跃的用户：450 人
-
-次日留存率 = 450 / 1000 = 45%
-```
-
----
-
-#### 7 日留存（Day 7 Retention）
-
-**定义**：注册第 7 天还活跃的用户占比
-
-**计算公式**：
-```
-7 日留存率 = 第 7 天还活跃的用户数 / 注册用户数
-```
-
-**例子**：
-```
-1 月 1 日注册的用户：1000 人
-1 月 7 日还活跃的用户：320 人
-
-7 日留存率 = 320 / 1000 = 32%
-```
-
----
-
-#### 30 日留存（Day 30 Retention）
-
-**定义**：注册第 30 天还活跃的用户占比
-
-**计算公式**：
-```
-30 日留存率 = 第 30 天还活跃的用户数 / 注册用户数
-```
-
-**例子**：
-```
-1 月 1 日注册的用户：1000 人
-1 月 30 日还活跃的用户：180 人
-
-30 日留存率 = 180 / 1000 = 18%
-```
-
----
-
-### 10.3 留存率总结
-
-| 类型 | 定义 | 计算公式 | 健康标准 |
-| :--- | :--- | :--- | :--- |
-| **次日留存** | 注册第二天还来的用户占比 | Day 1 活跃 / 注册用户 | > 40% |
-| **7 日留存** | 注册第 7 天还来的用户占比 | Day 7 活跃 / 注册用户 | > 20% |
-| **30 日留存** | 注册第 30 天还来的用户占比 | Day 30 活跃 / 注册用户 | > 10% |
-
----
-
-### 10.4 如何计算留存率？
-
-#### 留存表
-
-**示例：1 月 1 日注册的 1000 名用户**
-
-| 日期 | 注册用户 | 次日留存 | 7 日留存 | 30 日留存 |
-| :--- | :--- | :--- | :--- | :--- |
-| 2024-01-01 | 1000 | 45% (450 人) | 32% (320 人) | 18% (180 人) |
-| 2024-01-02 | 1200 | 42% (504 人) | 28% (336 人) | 15% (180 人) |
-| 2024-01-03 | 900 | 48% (432 人) | 35% (315 人) | 20% (180 人) |
-
-**计算示例（1 月 1 日）**：
-```
-次日留存率 = 1 月 2 日还活跃的用户 / 1 月 1 日注册用户
-            = 450 / 1000
-            = 45%
-
-7 日留存率 = 1 月 7 日还活跃的用户 / 1 月 1 日注册用户
-           = 320 / 1000
-           = 32%
-
-30 日留存率 = 1 月 30 日还活跃的用户 / 1 月 1 日注册用户
-            = 180 / 1000
-            = 18%
-```
-
----
-
-### 10.5 留存率的健康标准
-
-| 留存率 | 产品状态 | 说明 | 建议 |
-| :--- | :--- | :--- | :--- |
-| **高留存** (>40%) | 健康增长 | 用户喜欢，持续使用 | 继续保持，扩大规模 |
-| **中等留存** (20-40%) | 需要优化 | 产品还行，但不够吸引人 | 分析用户行为，优化核心功能 |
-| **低留存** (<20%) | 危险 | 用户来一次就走，产品有问题 | 重新审视产品定位，解决核心问题 |
-
-#### 不同产品的留存标准
-
-| 产品类型 | 次日留存 | 7 日留存 | 30 日留存 |
-| :--- | :--- | :--- | :--- |
-| **社交 App** | 40-50% | 25-35% | 15-25% |
-| **游戏** | 35-45% | 15-25% | 5-15% |
-| **电商** | 25-35% | 10-20% | 5-10% |
-| **工具类** | 30-40% | 15-25% | 10-20% |
-
----
-
-### 10.6 留存率的意义
-
-#### 场景一：高 DAU + 低留存 = "烧钱买量"
-
-**数据**：
-```
-DAU：10 万
-次日留存：15%
-```
-
-**分析**：
-- 虽然 DAU 很高，但留存很低
-- 说明大部分用户只来一次就走
-- 这是在"烧钱买量"，不可持续
-
-**问题**：为什么用户不回头？
-
-**可能原因**：
-- 广告宣传与实际产品不符
-- 注册流程太复杂，用户流失
-- 产品没有核心价值
-
----
-
-#### 场景二：低 DAU + 高留存 = "慢热型产品"
-
-**数据**：
-```
-DAU：1 万
-次日留存：50%
-30 日留存：30%
-```
-
-**分析**：
-- 虽然 DAU 不高，但留存很高
-- 说明产品很好，用户很喜欢
-- 这是"慢热型产品"，需要时间积累
-
-**建议**：
-- 继续优化产品
-- 加强口碑传播
-- 逐步扩大用户规模
-
----
-
-#### 场景三：高 DAU + 高留存 = 健康增长
-
-**数据**：
-```
-DAU：10 万
-次日留存：50%
-30 日留存：30%
-```
-
-**分析**：
-- DAU 高，留存也高
-- 说明产品很成功，用户很喜欢
-- 这是健康增长的标志 🎯
-
-**建议**：
-- 继续保持
-- 扩大规模
-- 探索商业模式
-
-::: tip 💡 留存 vs DAU
-- **高 DAU + 低留存** = "烧钱买量"，不可持续
-- **低 DAU + 高留存** = "慢热型产品"，需要时间积累
-- **高 DAU + 高留存** = 健康增长 🎯
-:::
-
----
-
-### 10.7 如何提升留存率？
-
-#### 步骤 1：分析用户流失原因
-
-**方法一：用户访谈**
-- 联系流失用户，问他们为什么不用
-- 找到共性问题
-
-**方法二：行为分析**
-- 分析用户在哪里流失
-- 找到流失前的行为模式
-
-**方法三：A/B 测试**
-- 测试不同的产品改进方案
-- 看哪个方案能提升留存
-
----
-
-#### 步骤 2：针对性优化
-
-**问题一：次日留存低**
-
-**可能原因**：
-- 注册流程太复杂
-- 产品不会用
-- 没有找到核心价值
-
-**优化方案**：
-- 简化注册流程
-- 添加新手引导
-- 优化核心功能的体验
-
----
-
-**问题二：7 日留存低**
-
-**可能原因**：
-- 新鲜感消失
-- 没有持续使用的动力
-- 找不到使用场景
-
-**优化方案**：
-- 添加个性化推荐
-- 推送通知（不要太多）
-- 设计"每日任务"或"签到奖励"
-
----
-
-**问题三：30 日留存低**
-
-**可能原因**：
-- 内容更新太慢
-- 用户需求变化
-- 竞品更好
-
-**优化方案**：
-- 加快内容更新
-- 添加新功能
-- 建立用户社区
-
----
-
-### 10.8 实战案例：如何提升游戏的留存率
-
-#### 背景
-
-某休闲游戏：
-```
-次日留存：25%（目标：40%）
-7 日留存：10%（目标：20%）
-30 日留存：3%（目标：10%）
-```
-
-#### 分析
-
-**用户行为分析**：
-```
-第一天玩游戏的用户：
-- 100% 完成了新手教程
-- 60% 玩到了第 5 关
-- 20% 玩到了第 10 关
-- 5% 玩到了第 20 关
-```
-
-**结论**：大部分用户在第 5-10 关流失。
-
-**用户调研**：
-- "第 6 关太难了"
-- "每次都要从头开始，太累"
-- "没有奖励，不想玩了"
-
-#### 优化方案
-
-**方案一：调整难度曲线**
-- ❌ 原来：第 6 关突然变难
-- ✅ 优化后：难度渐进式提升
-
-**方案二：增加存档点**
-- ❌ 原来：每次都要从头开始
-- ✅ 优化后：每 5 关自动存档
-
-**方案三：添加奖励系统**
-- ❌ 原来：通关没有奖励
-- ✅ 优化后：通关送金币、道具
-
-#### 优化后的效果
-
-```
-次日留存：25% → 45% ✅（提升 80%）
-7 日留存：10% → 25% ✅（提升 150%）
-30 日留存：3% → 12% ✅（提升 300%）
-```
-
----
-
-## 11. 实战：用户行为分析
-
-假设你负责一个电商 App 的数据分析，以下是完整的分析流程。
-
-### 11.1 问题定义
-
-**目标**：提高订单转化率
-
-**现状**：访问商品页 10 万人，最终下单 2000 人，转化率 2%
-
-### 11.2 数据收集
-
-| 维度 | 数据 |
-| :--- | :--- |
-| **用户属性** | 年龄、性别、地域、注册时间 |
-| **行为数据** | 浏览记录、加购、下单、支付 |
-| **交易数据** | 订单金额、商品品类、优惠券使用 |
-
-### 11.3 数据分析
-
-**步骤 1：漏斗分析**
-
-```
-浏览商品 → 加购 → 结算 → 支付
-  10万  → 5万  → 3万  → 2万
-  100%  → 50%  → 30%  → 2%
-```
-
-发现："结算 → 支付"环节流失最严重（30% → 2%）。
-
-**步骤 2：分群分析**
-
-```sql
--- 按用户来源分析转化率
-SELECT
-  traffic_source,
-  COUNT(*) as total_users,
-  SUM(CASE WHEN order_id IS NOT NULL THEN 1 ELSE 0 END) as converted_users,
-  SUM(CASE WHEN order_id IS NOT NULL THEN 1 ELSE 0 END) * 1.0 / COUNT(*) as conversion_rate
-FROM user_events
-GROUP BY traffic_source;
-```
-
-**结果**：
-
-| 来源 | 用户数 | 转化用户 | 转化率 |
-| :--- | :--- | :--- | :--- |
-| 搜索引擎 | 50000 | 500 | 1% |
-| 社交媒体 | 30000 | 900 | 3% |
-| 直接访问 | 20000 | 600 | 3% |
-
-**结论**：搜索引擎用户转化率最低（1%），可能是因为搜索来的用户"只是看看"。
-
-**步骤 3：留存分析**
-
-```sql
--- 不同来源用户的次日留存
-SELECT
-  traffic_source,
-  AVG(retention_day1) as avg_retention
-FROM user_retention
-GROUP BY traffic_source;
-```
-
-**结果**：
-
-| 来源 | 次日留存 |
-| :--- | :--- |
-| 搜索引擎 | 25% |
-| 社交媒体 | 45% |
-| 直接访问 | 55% |
-
-**结论**：搜索引擎用户留存低，说明"质量不高"。
-
-### 11.4 行动建议
-
-| 问题 | 原因 | 建议 |
-| :--- | :--- | :--- |
-| 转化率低 (2%) | 结算流程复杂 | 简化表单，支持一键支付 |
-| 搜索引擎转化低 | 用户意向不明确 | 优化落地页，突出商品价值 |
-| 搜索引擎留存低 | 用户找到就离开 | 增加"相关推荐"，引导浏览更多商品 |
-
----
-
-## 12. 用 AI 辅助数据分析
-
-AI 可以帮你快速生成 SQL、分析数据、生成报告。
-
-### 12.1 提示词模板
-
-```
-你是一位资深的数据分析师，精通 SQL 和数据可视化。请帮我分析以下数据。
-
-## 业务背景
-[描述你的业务场景，例如：电商 App、社交媒体等]
-
-## 数据表结构
-[描述数据表的字段，例如：
-- users: user_id, age, gender, register_date
-- orders: order_id, user_id, amount, created_at]
-
-## 分析需求
-[列出你想回答的问题，例如：
-1. 统计每个用户的订单数和总消费
-2. 找出消费 Top 10 的用户
-3. 分析用户消费的分布情况]
-
-## 输出要求
-1. SQL 查询语句
-2. 结果解读
-3. 数据可视化建议
-4. 业务洞察
-```
-
-### 12.2 实战示例：用户分群
-
-**输入提示词**：
-
-```
-你是一位资深的数据分析师。请帮我设计一个用户分群方案。
-
-## 业务背景
-我是一个电商 App 的数据分析师，我们有 100 万用户，想根据用户的消费行为进行分群，以便精准营销。
-
-## 数据表结构
-- orders: order_id, user_id, amount, created_at
-- users: user_id, age, gender, register_date
-
-## 分析需求
-1. 根据 RFM 模型（最近消费、消费频率、消费金额）对用户分群
-2. 计算每个分群的用户数和贡献的销售额
-3. 为每个分群设计营销策略
-
-## 输出要求
-请提供：
-1. SQL 查询语句
-2. 分群逻辑说明
-3. 每个分群的特征和营销策略
-```
-
-**AI 输出示例**：
-
-```sql
--- RFM 分群 SQL
-WITH rfm AS (
-  SELECT
-    user_id,
-    DATEDIFF('2024-01-31', MAX(created_at)) as recency,
-    COUNT(*) as frequency,
-    SUM(amount) as monetary
-  FROM orders
-  WHERE created_at >= '2024-01-01'
-  GROUP BY user_id
-),
-rfm_scores AS (
-  SELECT
-    user_id,
-    recency,
-    frequency,
-    monetary,
-    NTILE(4) OVER (ORDER BY recency DESC) as r_score,
-    NTILE(4) OVER (ORDER BY frequency) as f_score,
-    NTILE(4) OVER (ORDER BY monetary) as m_score
-  FROM rfm
-)
-SELECT
-  user_id,
-  CASE
-    WHEN r_score IN (3, 4) AND f_score IN (3, 4) AND m_score IN (3, 4) THEN '重要价值用户'
-    WHEN r_score IN (1, 2) AND f_score IN (3, 4) AND m_score IN (3, 4) THEN '重要保持用户'
-    WHEN r_score IN (3, 4) AND f_score IN (1, 2) AND m_score IN (3, 4) THEN '重要发展用户'
-    WHEN r_score IN (1, 2) AND f_score IN (1, 2) AND m_score IN (3, 4) THEN '重要挽留用户'
-    WHEN r_score IN (3, 4) AND f_score IN (3, 4) AND m_score IN (1, 2) THEN '一般价值用户'
-    WHEN r_score IN (1, 2) AND f_score IN (3, 4) AND m_score IN (1, 2) THEN '一般保持用户'
-    WHEN r_score IN (3, 4) AND f_score IN (1, 2) AND m_score IN (1, 2) THEN '一般发展用户'
-    ELSE '流失用户'
-  END as user_segment
-FROM rfm_scores;
-```
-
-**分群策略**：
-
-| 分群 | 特征 | 营销策略 |
-| :--- | :--- | :--- |
-| **重要价值用户** | 最近消费、高频、高金额 | VIP 待遇，专属客服 |
-| **重要保持用户** | 很久没来、但曾经高频 | 唤醒活动，优惠券召回 |
-| **重要发展用户** | 最近消费、低频、高金额 | 引导复购，推荐关联商品 |
-| **重要挽留用户** | 很久没来、低频、高金额 | 主动联系，了解原因 |
-
----
-
-## 名词速查表
-
-| 名词 | 英文 | 解释 |
-| :--- | :--- | :--- |
-| **描述性统计** | Descriptive Statistics | 用均值、中位数、标准差等指标概括数据 |
-| **均值** | Mean | 所有数值的平均值 |
-| **中位数** | Median | 排序后位于中间的值 |
-| **众数** | Mode | 出现次数最多的值 |
-| **标准差** | Standard Deviation | 衡量数据分散程度 |
-| **方差** | Variance | 标准差的平方 |
-| **聚合** | Aggregation | 将明细数据汇总（求和、计数等） |
-| **分组** | Group By | 按某个维度将数据分组 |
-| **漏斗分析** | Funnel Analysis | 分析用户在一系列步骤中的转化情况 |
-| **转化率** | Conversion Rate | 完成目标行为的用户占比 |
-| **留存率** | Retention Rate | 用户持续使用产品的比例 |
-| **次日留存** | Day 1 Retention | 注册第二天还活跃的用户占比 |
-| **数据清洗** | Data Cleaning | 处理缺失值、重复值、异常值 |
-| **可视化** | Visualization | 用图表展示数据 |
-| **折线图** | Line Chart | 展示随时间的变化趋势 |
-| **柱状图** | Bar Chart | 对比不同类别的数值 |
-| **饼图** | Pie Chart | 展示各部分占整体的比例 |
-| **散点图** | Scatter Plot | 展示两个变量的关系 |
-| **RFM 模型** | RFM Model | 根据最近消费、频率、金额对用户分群 |
-| **DAU** | Daily Active Users | 日活跃用户数 |
-| **GMV** | Gross Merchandise Value | 商品交易总额 |
-| **ARPU** | Average Revenue Per User | 每用户平均收入 |
-| **LTV** | Lifetime Value | 用户生命周期价值 |
+这，就是一个真正的破冰者手起刀落的数据修行。
diff --git a/docs/zh-cn/appendix/5-data/data-models.md b/docs/zh-cn/appendix/5-data/data-models.md
index 4ca55be..18d99e3 100644
--- a/docs/zh-cn/appendix/5-data/data-models.md
+++ b/docs/zh-cn/appendix/5-data/data-models.md
@@ -1,2900 +1,114 @@
-# 数据模型：设计的"骨架"
+# 数据模型：设计的强健骨架
 
 ::: tip 🎯 核心问题
-**如何设计合理的数据结构？** 这就像问：盖房子前怎么画图纸？仓库怎么摆放货物最高效？家族谱系怎么记录最清晰？数据模型解决的就是"数据如何组织"的问题。
+**如果房子没有蓝图，那盖到一半该怎么走线和装门呢？** 
+当我们构建一个涉及百万用户和千万订单的电商应用时：用户的地址、订单号、支付状态该如果高效摆放？如果今天加了个折扣功能，明天又要发优惠券该怎么扩展？本章带你重回设计的“地基”，理清这些表该怎么长出最强健的骨架：**数据模型设计 (Data Modeling)**。
 :::
 
 ---
 
 ## 0. 先问一个问题：你有没有经历过这些噩梦？
 
-**场景一：表设计混乱**
+在一个软件项目最初狂欢般的冲刺期，很多人会用最粗暴的方式写下他们的结构。
 
-```
+```text
 users 表：
 | id | name | address | order_1 | order_1_amount | order_2 | order_2_amount | ... |
 ```
 
-订单字段重复 100 次，每次下单都要改表结构。
+这看起来非常省事对吧？直接把这辈子有关张三的一切统统塞到他的这行里！
+但过了三个月，老板满怀希冀地找你说：
+“咱们需要给买了三次以上的大客户发红包。”
 
-**场景二：数据冗余严重**
-
-```
-orders 表：
-| id | user_name | user_email | user_phone | product_name | product_price |
-```
-
-用户信息、商品信息全部复制到订单表，修改用户邮箱需要更新所有历史订单。
-
-**场景三：关系处理错误**
-
-```
-posts 表：
-| id | title | tags |
-| 1  | Vue入门 | vue,frontend,javascript |
-```
-
-用逗号分隔存储标签，无法查询"有哪些文章包含 vue 标签"。
+这下你直接傻眼了：这表不仅已经蔓延出一百多个 `order_n` 的臃肿字段，而且每一次为了查询订单，系统都要横跨几千条记录的一大长串烂摊子进行全盘扫除。
+这，就是没有良好**数据模型（Data Model）**直接硬造的典型**灾难和噩梦**。
 
 ---
 
-**好的数据模型就像建筑蓝图**——结构清晰、扩展灵活、关系明确。
+## 1. 实体与关系：万物皆有连接
+
+我们要建立一个清晰的秩序世界，在这个世界里，首先得有基本的主角和配角：我们称他们为**“实体(Entities)”**。
+它们就是现实世界被抽象到计算机中的那些主要对象。比如：用户、订单、商品。
+
+紧接着最重要的部分来了——如何把这些零散的东西连接起来？
+你总不能让这些主角像孤岛一样吧？张三买了一部手机，这中间发生了一个奇妙的桥梁，这就是**"关系(Relationships)"**。
+
+这套把实体及其关系用精美的符号画出来的世界地图，被称为 **ER 图（Entity-Relationship Diagram）**。
+
+<DataModelsDemo tab="er" />
+
+### 1.1 世界上只有三种最基本的连接
+
+当我们把镜头死死盯在任意两个实体之间时，你会发现所有的连接无外乎可以提纯为下面三种形式：
+
+<DataModelsDemo tab="relationships" />
+
+- **一对一 (One-to-One, 1:1)**：
+  这是非常罕见和亲密的。比如一个中国人唯一对应一张身份证。或者在系统里，一个账号唯一的绝密隐私档案。
+- **一对多 (One-to-Many, 1:N)**：
+  这是我们构建系统打交道最多的一种形态。一个作者能写出几百篇文章，但这几百篇文章的创作者只能是这一个特定的作者。此时在表中增加的外键（FK）就像个锚点，把多的一方牢牢锚向了一的一方。
+- **多对多 (Many-to-Many, M:N)**：
+  这就极其复杂了。一个学生能选五门不同的课，一门课可能坐着五十个不同的学生。想要理顺这个乱作一团的毛线团，我们就得硬生生塞进一张中间表（中间人）：比如“选课记录表”。
 
 ---
 
-## 0.5 从零开始：什么是数据？
+## 2. 范式理论：从混乱到干净利落的切分
 
-在深入了解数据模型之前，我们需要先搞清楚几个最基础的问题。
+如果关系确定了，那我们就在表里面无限塞字段吧？
+绝不！在长达数十年的计算机演进中，顶级的数据库专家们制定了一个近乎严苛的出厂规范，用来防止表中出现垃圾一般的冗余或者逻辑漏洞，这套铁律就叫——**数据库范式 (Normalization)**。
 
-### 0.5.1 什么是数据？
+<DataModelsDemo tab="normalization" />
 
-**数据**就是对事物的记录。
+- **第一范式 (1NF) ：不要大杂烩！** 
+  你不能在一个字段里塞进去“张三，北京，25岁”。每一列都必须劈到底、拆到最细的原子级别。
+- **第二范式 (2NF) ：消除附庸者的脚踏两只船**
+  当主键是两个字段联合组成时，绝对不允许有的杂兵字段只去巴结其中一半的主键而跟另外一半毫无关联。每一列都得完全依附于整体的联合主导。
+- **第三范式 (3NF) ：不要越级传递依赖**
+  这是至高原则。既然你是依附于学号的个人信息，那你就好好当附庸，不能再出现“学号决定学院编号，而学院编号又能决定学院电话”的荒谬级联。
 
-**生活中的例子**：
-
-- 你的购物车里的商品：商品名称、价格、数量、图片链接
-- 你的通讯录：姓名、电话、邮箱、地址
-- 你的书架：书名、作者、出版社、出版年份
-- 你的游戏存档：等级、经验值、装备、金币
-
-这些都是"数据"——它们记录了某种信息。
-
-### 0.5.2 数据为什么要组织？
-
-想象一下这些场景：
-
-**场景一：杂乱的通讯录**
-
-```
-张三 13800138000 北京朝阳区
-李四 13900139000 上海浦东新区
-王五 13700137000 lisi@example.com
-赵六 13600136000 广州天河区 zhaoliu@example.com
-```
-
-所有信息混在一起，你想：
-- 找"李四"的电话号码 → 需要逐行扫描
-- 找所有"广州"的人 → 需要逐行判断
-- 添加一个人的邮箱 → 格式不统一，不知道放哪里
-
-**场景二：有组织的通讯录**
-
-```
-姓名        电话           邮箱                    城市
-张三        13800138000    zhangsan@example.com    北京朝阳区
-李四        13900139000    lisi@example.com        上海浦东新区
-王五        13700137000    wangwu@example.com      深圳南山区
-赵六        13600136000    zhaoliu@example.com     广州天河区
-```
-
-现在：
-- 找"李四"的电话 → 在"姓名"列查找 → 快速定位
-- 找所有"广州"的人 → 在"城市"列筛选 → 一目了然
-- 添加新信息 → 按列填写 → 格式统一
-
-**结论**：**数据需要组织才能高效使用！**
-
-### 0.5.3 一个简单的例子：记录你的书架
-
-让我们用一个最简单的例子——"记录你的书架"——来理解数据模型是如何一步步形成的。
-
-**第一步：原始想法（用一张纸记录）**
-
-```
-我的书架：
-《JavaScript高级程序设计》 Matt Frisbie 2020年 人民邮电出版社
-《Vue.js设计与实现》 霍春阳 2022年 人民邮电出版社
-《深入浅出Node.js》 朴灵 2013年 人民邮电出版社
-```
-
-**问题**：
-- 想找"2022年"出版的书 → 需要逐行看
-- 想找"人民邮电出版社"的所有书 → 需要逐行判断
-- 想按"出版年份"排序 → 需要重新整理
-
-**第二步：用表格组织（这就是数据模型的雏形）**
-
-```
-| 书名                        | 作者       | 出版年份 | 出版社         |
-|---------------------------|-----------|---------|--------------|
-| JavaScript高级程序设计      | Matt Frisbie | 2020   | 人民邮电出版社  |
-| Vue.js设计与实现           | 霍春阳      | 2022   | 人民邮电出版社  |
-| 深入浅出Node.js            | 朴灵       | 2013   | 人民邮电出版社  |
-```
-
-**改进**：
-- 每列有明确的含义（书名、作者、出版年份、出版社）
-- 可以按任意列排序
-- 可以按任意列筛选（比如找出所有"人民邮电出版社"的书）
-
-**第三步：发现新需求（多本书有多个作者）**
-
-```
-问题：《重构：改善既有代码的设计》有两个作者：Martin Fowler 和 Kent Beck
-```
-
-怎么记录？
-
-**错误做法**：把两个名字塞进一个字段
-
-```
-| 书名   | 作者                    |
-|------|------------------------|
-| 重构   | Martin Fowler, Kent Beck |
-```
-
-**问题**：
-- 无法单独查询"Martin Fowler 写了哪些书"
-- 无法统计"每个作者写了几本书"
-- 修改作者名字时需要字符串操作
-
-**正确做法**：拆分成两张表，用"关系"连接
-
-```
-书籍表：
-| 书名           | 出版年份 |
-|--------------|---------|
-| 重构           | 2019    |
-| JavaScript高级程序设计 | 2020   |
-
-作者表：
-| 作者姓名           |
-|------------------|
-| Martin Fowler     |
-| Kent Beck         |
-| Matt Frisbie      |
-
-书籍-作者关联表：
-| 书名           | 作者姓名        |
-|--------------|---------------|
-| 重构           | Martin Fowler |
-| 重构           | Kent Beck     |
-| JavaScript高级程序设计 | Matt Frisbie  |
-```
-
-**这就是数据模型设计的核心**：
-1. **识别实体**（书、作者）
-2. **设计属性**（书名、出版年份、作者姓名）
-3. **建立关系**（一本书可以有多个作者）
-
-### 0.5.4 什么是数据模型？
-
-**数据模型**（Data Model）就是对"数据如何组织、存储、关联"的设计方案。
-
-**用盖房子来类比**：
-
-| 盖房子 | 数据模型 |
-|:-----|:-------|
-| 蓝图设计 | 数据模型设计 |
-| 客厅、卧室、厨房 | 不同的表（用户表、订单表、商品表） |
-| 承重墙、水电管线 | 主键、外键（关系） |
-| 房屋的格局 | 表的结构（字段、类型） |
-
-::: tip 💡 为什么要设计数据模型？
-想象一下：
-- 没有蓝图盖房子 → 房子可能会倒、功能混乱、无法扩建
-- 没有数据模型写程序 → 数据冗余、查询缓慢、难以维护
-
-**好的数据模型让你：**
-- 数据不重复（节省空间）
-- 查询快速（性能好）
-- 易于扩展（新增功能方便）
-- 避免错误（数据一致性强）
-:::
+严苛遵循到 3NF，你的数据将呈现出令人如痴如醉的干净：**没有任何一句废话重复两遍，每次修改信息绝不会拖泥带水！**
 
 ---
 
-## 1. 数据模型的重要性
+## 3. 反范式化：在刀尖上跳舞的设计哲学
 
-**数据模型**（Data Model）是对现实世界的抽象，描述数据如何存储、组织和关联。
+等等，既然范式这么严谨完美。难道所有大厂、千万级并发的电商真的就在 3NF 的象牙塔里搭建一切吗？
 
-### 1.1 用建筑来类比
+**残酷的性能现实很快打脸了：绝对不是。**
 
-| 建筑概念 | 对应概念 | 说明 |
-| :--- | :--- | :--- |
-| 蓝图 | 数据模型 | 设计的"骨架"和结构 |
-| 承重墙 | 主键/外键 | 保证结构稳固的核心 |
-| 房间布局 | 表结构 | 各个功能单元的设计 |
-| 水电管线 | 关系 | 连接各个部分的数据流 |
+<DataModelsDemo tab="denormalization" />
 
-### 1.2 数据模型的层次
+假设你想展现一个带商品名字和买家名字的最终订单页面。按照 3NF：
+“天呐，我需要在一毫秒内把 订单表、用户表、商品表、库存表 进行足足三次的巨大内部 JOIN (狂暴连接计算) 才能凑齐这十几个字段去页面呈现！”
+由于巨大的服务器开销，高并发下数据库瞬间融化。
 
-| 层次 | 内容 | 示例 |
-| :--- | :--- | :--- |
-| **概念模型** | 业务对象和关系 | 用户、订单、商品 |
-| **逻辑模型** | 表结构、关系类型 | users 表 1:N orders 表 |
-| **物理模型** | 具体存储实现 | 字段类型、索引、分区 |
+所以，在极端讲究速度的现代互联网中，我们往往会采取一种逆天之举：**故意破坏范式（Denormalization），空间换时间**。
+通过在订单表里刻意“冗余”了一份本来只该出现在用户表里的买家姓名，虽然占据了一点点磁盘，但这换来了查询时雷霆般惊人的单表吞吐力。
+
+这就是架构师在系统设计时那最精妙的取舍。
 
 ---
 
-## 2. ER 图：实体关系建模
+## 4. 全景实战：拆解电商系统
 
-### 2.0 为什么需要画图？
+理解了以上所有原理，不妨让我们戴上前人的结晶。看一看在现代的电商和社交系统背后，是如何用这些一块块小积木，搭建起了扛得住双十一每秒几十万张海量洪峰订单的巨大钢铁森林。
 
-想象你和朋友聊天，描述你的家庭关系：
+<DataModelsDemo tab="ecommerce" />
 
-**用文字描述**：
-> "我有一个爸爸、一个妈妈、一个哥哥。我爸爸的父母是我爷爷奶奶，我妈妈的父母是我外公外婆。我哥哥结婚了，有一个嫂子。"
+### 4.1 直面反模式设计
 
-听的人可能会困惑：
-- 你哥哥和你嫂子是什么关系？
-- 你和你嫂子是什么关系？
-- 如果你哥哥又有孩子，那孩子和你是什么关系？
+当然，在构建这些巨无霸的过程中。无数的新手总会栽进那些前辈踩烂了的巨幅陷阱中。当你在表里面用逗号狂拼接字段（所谓的 JSON 万金油），或者在一张巨表里面加到第 150 个字段时。
 
-**用图画出来**：
+你必须警惕了，这是一个极度不详的征兆。
 
-```
-        爷爷 -- 奶奶
-            |
-            爸爸  --  妈妈 -- 外公 -- 外婆
-                |       |
-              你    哥哥 -- 嫂子
-```
+<DataModelsDemo tab="antipatterns" />
 
-瞬间就清晰了！
+## 5. 总结：用数据模型构建千秋地基
 
-**ER 图的作用**：
-- 把复杂的"数据关系"可视化
-- 帮助设计者理清思路
-- 方便团队沟通讨论
-- 在写代码前发现问题
+万丈高楼平地起。我们在任何花里胡哨的前端页面、后端微服务设计之前。最朴素的那张在草稿纸上被反复涂改的实体关系图，往往决定了这个团队能不能挺过第三年的需求大爆炸。
 
-**ER 图**（Entity-Relationship Diagram，实体关系图）就是专门用来画"数据关系"的工具。
+- **用理清从属和多维关系（1:1, 1:N, M:N）的基座，框定业务的脉络。**
+- **用严酷的三大范式的修剪，剃除无端的数据黑洞与混乱堆砌。**
+- **用大巧不工的反范式策略平衡，抵御性能瓶颈这头怪兽。**
 
-### 2.1 手把手：从零画出你的第一个 ER 图
-
-让我们用一个**家庭关系**的例子，一步步画出 ER 图。
-
-#### 第一步：识别"实体"
-
-**实体**（Entity）就是现实世界中的"对象"或"事物"。
-
-在家庭关系中，实体有：
-- 人（Person）
-- 家庭（Family）
-
-**问题**：我们把"人"作为核心实体，"家庭"可以暂时忽略。
-
-#### 第二步：确定"属性"
-
-**属性**（Attribute）就是实体的"特征"或"信息"。
-
-"人"这个实体的属性：
-- 姓名（name）
-- 性别（gender）
-- 出生日期（birth_date）
-- 身份证号（id_card）
-
-#### 第三步：识别"关系"
-
-**关系**（Relationship）就是实体之间的"联系"。
-
-家庭中的关系：
-- 结婚（丈夫 ↔ 妻子）
-- 亲子（父母 → 孩子）
-- 兄弟姐妹（兄弟姐妹之间）
-
-#### 第四步：确定"关系类型"
-
-每种关系都有一个"基数"（Cardinality）：
-
-**一对一（1:1）**：
-- 一个丈夫 ↔ 一个妻子（假设一夫一妻制）
-```
-丈夫 1 ---- 1 妻子
-```
-
-**一对多（1:N）**：
-- 一个父母 → 多个孩子
-```
-父母 1 ---- N 孩子
-```
-
-**多对多（M:N）**：
-- 多个兄弟姐妹 ↔ 多个兄弟姐妹
-```
-兄弟姐妹 M ---- N 兄弟姐妹
-```
-
-#### 第五步：画出完整的 ER 图
-
-**ER 图的基本符号**：
-
-| 符号 | 名称 | 含义 | 生活类比 |
-|:---:|:---:|:---|:---|
-| ▭ | 矩形 | 实体（表） | 一个"箱子"装一类数据 |
-| ▭ | 椭圆 | 属性（字段） | 箱子里的"物品" |
-| ◇ | 菱形 | 关系 | 箱子之间的"连线" |
-| — | 线条 | 连接 | 把东西串起来的"绳子" |
-
-**家庭关系的 ER 图示例**：
-
-```
-    ┌─────────┐
-    │   人    │
-    └─────────┘
-    │ 姓名    │
-    │ 性别    │
-    │ 出生日期│
-    └─────────┘
-         │
-         │
-    ┌────┴────┐
-    │         │
-  结婚       亲子
-  1:1       1:N
-```
-
-::: tip 💡 为什么要画 ER 图？
-1. **设计前理清思路**：画图比改代码容易得多
-2. **团队沟通**：一张图胜过千言万语
-3. **发现遗漏**：画图时容易发现"咦，这个关系好像没考虑"
-4. **文档留存**：新人看图就能理解系统结构
-:::
-
-### 2.2 核心概念详解
-
-#### 实体（Entity）
-
-**实体**就是你想记录的"对象"或"事物"。
-
-**示例**：
-- 用户（User）
-- 订单（Order）
-- 商品（Product）
-- 文章（Article）
-
-**如何识别实体？**
-问自己："我需要记录什么信息？"
-- 我需要记录用户 → 用户实体
-- 我需要记录订单 → 订单实体
-- 我需要记录商品 → 商品实体
-
-#### 属性（Attribute）
-
-**属性**就是实体的"特征"或"详细信息"。
-
-**示例**：
-- 用户实体的属性：用户名、邮箱、电话、注册时间
-- 订单实体的属性：订单号、金额、状态、创建时间
-
-**如何识别属性？**
-问自己："这个实体有哪些信息需要记录？"
-
-#### 关系（Relationship）
-
-**关系**就是实体之间的"联系"。
-
-**示例**：
-- 用户**下**订单（下单关系）
-- 订单**包含**商品（包含关系）
-- 用户**购买**商品（购买关系）
-
-**如何识别关系？**
-问自己："这些实体之间有什么关联？"
-
-### 2.3 用一个简单例子练习
-
-让我们画一个**班级管理系统**的 ER 图。
-
-#### 第一步：识别实体
-
-在这个系统中，有哪些实体？
-- 学生（Student）
-- 课程（Course）
-- 老师（Teacher）
-
-#### 第二步：确定属性
-
-每个实体有哪些属性？
-
-**学生**：学号、姓名、班级
-**课程**：课程编号、课程名称、学分
-**老师**：工号、姓名、职称
-
-#### 第三步：识别关系
-
-- 学生**选修**课程（多对多：一个学生可以选多门课，一门课可以被多个学生选）
-- 老师**教授**课程（一对多：一个老师可以教多门课，一门课通常由一个老师教）
-
-#### 第四步：画出 ER 图
-
-```
-  ┌─────────┐
-  │  学生   │
-  └─────────┘
-  │ 学号    │
-  │ 姓名    │
-  │ 班级    │
-  └─────────┘
-      │
-      │ 选修 (M:N)
-      │
-  ┌─────────┐
-  │  课程   │
-  └─────────┘
-  │ 课程编号│
-  │ 课程名称│
-  │ 学分    │
-  └─────────┘
-      │
-      │ 教授 (1:N)
-      │
-  ┌─────────┐
-  │  老师   │
-  └─────────┘
-  │ 工号    │
-  │ 姓名    │
-  │ 职称    │
-  └─────────┘
-```
-
-### 2.4 核心概念总结表
-
-| 符号 | 含义 | 示例 | 通俗理解 |
-| :--- | :--- | :--- | :--- |
-| **矩形** | 实体（表） | 用户、订单、商品 | 一个"箱子"装一类数据 |
-| **椭圆** | 属性（字段） | 用户名、邮箱、电话 | 箱子里的"物品" |
-| **菱形** | 关系 | 下单、支付、评论 | 箱子之间的"连线" |
-| **线条** | 连接 | 表与表的关联 | 把东西串起来的"绳子" |
-
-| 符号 | 含义 | 示例 |
-| :--- | :--- | :--- |
-| **矩形** | 实体（表） | 用户、订单、商品 |
-| **椭圆** | 属性（字段） | 用户名、邮箱、电话 |
-| **菱形** | 关系 | 下单、支付、评论 |
-| **线条** | 连接 | 表与表的关联 |
-
-### 2.5 完整的 ER 图示例
-
-👇 **动手试试看**：探索用户-订单-商品的实体关系模型：
-
-<DataModelsDemo />
-
----
-
-## 3. 关系类型：一对一、一对多、多对多
-
-关系类型决定了表之间如何关联，是数据模型设计的核心。
-
-### 3.1 一对一（One-to-One）
-
-#### 3.1.1 什么是"一对一"？
-
-**定义**：A 表的一条记录对应 B 表的一条记录，反过来也成立。
-
-**生活类比**：
-- 一个人 ↔ 一个身份证号码
-- 一个丈夫 ↔ 一个妻子（一夫一妻制）
-- 一个国家 ↔ 一个首都
-
-#### 3.1.2 用生活场景理解
-
-想象你在做一个**用户系统**：
-
-**场景**：用户基本信息 + 详细资料
-
-你发现用户信息太多了：
-- 基本信息：用户名、邮箱、密码（经常用）
-- 详细资料：昵称、头像、个人简介、生日、地址、手机号（不常用）
-
-**问题**：要不要把所有信息放一张表？
-
-**方案一：全放一张表**
-
-```
-users 表：
-| id | username | email | password | nickname | avatar | bio | birthday | address | phone |
-```
-
-**缺点**：
-- 表太宽，字段太多（超过 20 个）
-- 查询"登录"时只需要基本字段，但会加载所有字段（浪费性能）
-- 详细资料可能很长（bio、avatar），拖慢查询速度
-
-**方案二：拆分成两张表（一对一关系）**
-
-```
-users 表（基本信息）：
-| id | username | email          | password_hash |
-| 1  | zhangsan | zhangsan@qq.com | xxxxx...     |
-
-user_profiles 表（详细资料）：
-| user_id | nickname | avatar | bio          | birthday   |
-| 1       | 小张     | ...    | 热爱编程...   | 1995-06-15 |
-```
-
-**优点**：
-- 登录时只查 users 表，快速
-- 查看资料时再 JOIN user_profiles 表
-- 分离敏感信息（password）和非敏感信息
-
-**关系表示**：
-```
-users (1) ---- (1) user_profiles
-   |                    |
-   id (主键)      user_id (主键 + 外键)
-```
-
-#### 3.1.3 SQL 实现
-
-**方式 1：外键唯一约束（推荐）**
-
-```sql
--- 用户表
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  username VARCHAR(50) NOT NULL,
-  email VARCHAR(100) UNIQUE NOT NULL,
-  password_hash VARCHAR(255) NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 用户详细资料表
-CREATE TABLE user_profiles (
-  user_id BIGINT PRIMARY KEY,           -- user_id 同时是主键和外键
-  nickname VARCHAR(50),
-  avatar VARCHAR(255),
-  bio TEXT,
-  birthday DATE,
-  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-);
-
--- 插入数据
-INSERT INTO users (id, username, email, password_hash) VALUES
-(1, 'zhangsan', 'zhangsan@qq.com', 'hashed_password');
-
-INSERT INTO user_profiles (user_id, nickname, bio) VALUES
-(1, '小张', '热爱编程，热爱生活');
-
--- 查询：获取用户完整信息
-SELECT u.*, p.nickname, p.bio, p.avatar
-FROM users u
-LEFT JOIN user_profiles p ON u.id = p.user_id
-WHERE u.id = 1;
-```
-
-**方式 2：在主表添加外键（不推荐）**
-
-```sql
--- 详细资料表
-CREATE TABLE user_profiles (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  nickname VARCHAR(50),
-  bio TEXT
-);
-
--- 用户表（引用 profile）
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  username VARCHAR(50),
-  profile_id BIGINT UNIQUE,              -- 唯一约束
-  FOREIGN KEY (profile_id) REFERENCES user_profiles(id)
-);
-```
-
-**为什么方式 1 更好？**
-- 用户是"主实体"，资料是"从属信息"
-- 先有用户，再有资料
-- 删除用户时，资料也应该删除（CASCADE）
-
-#### 3.1.4 数据样子
-
-```
-users 表：
-┌────┬──────────┬─────────────────┬───────────────┐
-│ id │ username │ email           │ password_hash │
-├────┼──────────┼─────────────────┼───────────────┤
-│ 1  │ zhangsan │ zhangsan@qq.com │ xxxxx...      │
-│ 2  │ lisi     │ lisi@qq.com     │ yyyyy...      │
-└────┴──────────┴─────────────────┴───────────────┘
-         │
-         │ 一对一关系
-         │
-user_profiles 表：
-┌──────────┬──────────┬─────────┬──────────────┐
-│ user_id  │ nickname │ avatar  │ bio          │
-├──────────┼──────────┼─────────┼──────────────┤
-│ 1        │ 小张     │ avatar1 │ 热爱编程...  │
-│ 2        │ 小李     │ avatar2 │ 喜欢读书...  │
-└──────────┴──────────┴─────────┴──────────────┘
-```
-
-#### 3.1.5 什么时候用一对一？
-
-**适合使用的场景**：
-- 字段数量过多（超过 20 个字段）
-- 需要分离敏感信息（密码、支付信息）
-- 部分字段很少查询（登录时不需要加载简介、头像）
-- 需要独立扩展（用户资料可能有多种类型：个人、企业）
-
-**不适合使用的场景**：
-- 字段不多（少于 15 个），直接放一张表即可
-- 所有字段都会频繁查询（拆分反而需要 JOIN，降低性能）
-
-::: tip 💡 一对一关系的判断标准
-问自己："A 的一条记录能对应 B 的多条记录吗？"
-- 如果能 → 一对多或多对多
-- 如果不能 → 可能是一对一
-
-再问："B 的一条记录能对应 A 的多条记录吗？"
-- 如果能 → 一对多
-- 如果不能 → 一对一
-:::
-
-```sql
-users 表：          user_profiles 表：
-| id | username |   | user_id | bio | avatar |
-| 1  | 张三     |   | 1       | ... | ...    |
-```
-
-**实现方式**：
-
-```sql
--- 方式 1：外键唯一约束
-CREATE TABLE user_profiles (
-  user_id BIGINT PRIMARY KEY,
-  bio TEXT,
-  avatar VARCHAR(255),
-  FOREIGN KEY (user_id) REFERENCES users(id)
-);
-
--- 方式 2：直接在主表扩展
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY,
-  username VARCHAR(50),
-  profile_id BIGINT UNIQUE,
-  FOREIGN KEY (profile_id) REFERENCES user_profiles(id)
-);
-```
-
-**使用场景**：
-- 用户表 + 详细资料表（分离敏感信息）
-- 订单表 + 支付信息表（分离支付数据）
-- 商品表 + 库存表（分离库存管理）
-
-::: tip 💡 一对一关系的判断标准
-问自己："A 的一条记录能对应 B 的多条记录吗？"
-- 如果能 → 一对多或多对多
-- 如果不能 → 可能是一对一
-
-再问："B 的一条记录能对应 A 的多条记录吗？"
-- 如果能 → 一对多
-- 如果不能 → 一对一
-:::
-
-### 3.2 一对多（One-to-Many）
-
-#### 3.2.1 什么是"一对多"？
-
-**定义**：A 表的一条记录可以对应 B 表的多条记录，但 B 的一条记录只能对应 A 的一条记录。
-
-**生活类比**：
-- 一个母亲 → 多个孩子
-- 一个班级 → 多个学生
-- 一个作者 → 多篇文章
-
-**这是最常见的关系！约占数据库关系的 70%。**
-
-#### 3.2.2 用生活场景理解
-
-想象你在做一个**电商系统**：
-
-**场景**：用户和订单
-
-**需求**：
-- 一个用户可以下多个订单
-- 一个订单只能属于一个用户
-
-**怎么设计数据库？**
-
-**方案一：全放一张表（错误）**
-
-```
-users 表：
-| id | username | order_1 | order_1_amount | order_2 | order_2_amount | ... |
-| 1  | 张三     | 100     | 500            | 101     | 300            | ... |
-```
-
-**问题**：
-- 一个用户最多能下多少单？10 个？100 个？
-- 字段数量爆炸，表结构混乱
-- 无法查询"某个订单属于哪个用户"
-
-**方案二：拆分成两张表（一对多关系）**
-
-```
-users 表：
-| id | username | email          |
-| 1  | 张三     | zhangsan@qq.com |
-
-orders 表：
-| id | user_id | amount | status    |
-| 1  | 1       | 500    | paid      |
-| 2  | 1       | 300    | shipping  |
-| 3  | 1       | 800    | completed |
-```
-
-**关系表示**：
-```
-users (1) ---- (N) orders
-   |              |
-   id (主键)  user_id (外键)
-```
-
-**关键点**：在"多"的那张表（orders）添加"外键"（user_id），指向"一"的那张表（users）。
-
-#### 3.2.3 SQL 实现
-
-```sql
--- 用户表（"一"的那一方）
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  username VARCHAR(50) NOT NULL,
-  email VARCHAR(100) UNIQUE NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 订单表（"多"的那一方）
-CREATE TABLE orders (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  user_id BIGINT NOT NULL,                 -- 外键，指向 users 表
-  amount DECIMAL(10, 2) NOT NULL,          -- 订单金额
-  status VARCHAR(20) DEFAULT 'pending',    -- 订单状态
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-);
-
--- 插入数据
-INSERT INTO users (id, username, email) VALUES
-(1, '张三', 'zhangsan@qq.com'),
-(2, '李四', 'lisi@qq.com');
-
-INSERT INTO orders (user_id, amount, status) VALUES
-(1, 500.00, 'paid'),
-(1, 300.00, 'shipping'),
-(1, 800.00, 'completed'),
-(2, 200.00, 'pending');
-
--- 查询 1：查询用户的所有订单
-SELECT o.*
-FROM orders o
-WHERE o.user_id = 1;
-
--- 查询 2：查询订单及对应的用户信息
-SELECT o.*, u.username, u.email
-FROM orders o
-JOIN users u ON o.user_id = u.id
-WHERE o.id = 1;
-
--- 查询 3：统计每个用户的订单数量
-SELECT u.username, COUNT(o.id) as order_count
-FROM users u
-LEFT JOIN orders o ON u.id = o.user_id
-GROUP BY u.id;
-```
-
-#### 3.2.4 数据样子
-
-```
-users 表（"一"的一方）：
-┌────┬──────────┬─────────────────┐
-│ id │ username │ email           │
-├────┼──────────┼─────────────────┤
-│ 1  │ 张三     │ zhangsan@qq.com │
-│ 2  │ 李四     │ lisi@qq.com     │
-└────┴──────────┴─────────────────┘
-         │
-         │ 一对多关系
-         │
-orders 表（"多"的一方）：
-┌────┬─────────┬────────┬───────────┐
-│ id │ user_id │ amount │ status    │
-├────┼─────────┼────────┼───────────┤
-│ 1  │ 1       │ 500.00 │ paid      │  ← 张三的订单
-│ 2  │ 1       │ 300.00 │ shipping  │  ← 张三的订单
-│ 3  │ 1       │ 800.00 │ completed │  ← 张三的订单
-│ 4  │ 2       │ 200.00 │ pending   │  ← 李四的订单
-└────┴─────────┴────────┴───────────┘
-```
-
-#### 3.2.5 什么时候用一对多？
-
-**适合使用的场景**：
-- 父子关系：用户 → 订单、分类 → 商品
-- 包含关系：文章 → 评论、部门 → 员工
-- 层级关系：菜单 → 子菜单
-
-**设计原则**：
-- 在"多"的那张表添加外键
-- 外键指向"一"的那张表的主键
-- 使用 LEFT JOIN 可以查询"即使没有订单的用户"
-
-::: tip 💡 一对多关系的判断标准
-问自己："A 的一条记录能对应 B 的多条记录吗？"
-- 如果能 → 可能是一对多
-- 再问："B 的一条记录能对应 A 的多条记录吗？"
-  - 如果不能 → 确定是一对多
-  - 如果能 → 是多对多
-:::
-
-#### 3.3.1 什么是"多对多"？
-
-**定义**：A 表的多条记录可以对应 B 表的多条记录，反过来也成立。
-
-**生活类比**：
-- 多个学生 ↔ 多门课程（一个学生可以选多门课，一门课可以被多个学生选）
-- 多个顾客 ↔ 多个商品（一个顾客可以买多个商品，一个商品可以被多个顾客买）
-- 多个作者 ↔ 多篇文章（一篇文章可以有多个作者，一个作者可以写多篇文章）
-
-**这是最复杂的关系，需要使用"中间表"！**
-
-#### 3.3.2 用生活场景理解
-
-想象你在做一个**学生选课系统**：
-
-**场景**：学生和课程
-
-**需求**：
-- 一个学生可以选多门课程
-- 一门课程可以被多个学生选
-
-**怎么设计数据库？**
-
-**方案一：在学生表添加课程字段（错误）**
-
-```
-students 表：
-| id | name  | courses          |
-| 1  | 小明  | 1,2,3            |
-| 2  | 小红  | 1,2              |
-```
-
-**问题**：
-- 无法查询"选了数学 1 的所有学生"（需要字符串匹配，很慢）
-- 无法建立外键约束
-- 无法给"选课"添加额外信息（比如：选课时间、成绩）
-
-**方案二：在课程表添加学生字段（同样错误）**
-
-```
-courses 表：
-| id | title | students        |
-| 1  | 数学  | 1,2,3,4,5       |
-```
-
-**同样的问题**：查询慢、无法建立约束、无法添加额外信息。
-
-**方案三：使用中间表（正确！）**
-
-创建三张表：
-1. students 表（学生）
-2. courses 表（课程）
-3. enrollments 表（选课记录，中间表）
-
-**关系表示**：
-```
-students (M) ---- (M) courses
-      |              |
-      |    enrollments（中间表）
-      |    | student_id | course_id |
-```
-
-#### 3.3.3 SQL 实现
-
-```sql
--- 学生表
-CREATE TABLE students (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) NOT NULL,
-  student_no VARCHAR(20) UNIQUE NOT NULL,  -- 学号
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 课程表
-CREATE TABLE courses (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  title VARCHAR(100) NOT NULL,
-  credits DECIMAL(3, 1) NOT NULL,           -- 学分
-  teacher VARCHAR(50)
-);
-
--- 选课记录表（中间表）
-CREATE TABLE enrollments (
-  student_id BIGINT NOT NULL,
-  course_id BIGINT NOT NULL,
-  enrolled_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,  -- 选课时间
-  grade DECIMAL(5, 2),                              -- 成绩（可选）
-  PRIMARY KEY (student_id, course_id),              -- 联合主键，防止重复选课
-  FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE,
-  FOREIGN KEY (course_id) REFERENCES courses(id) ON DELETE CASCADE
-);
-
--- 插入数据
-INSERT INTO students (id, name, student_no) VALUES
-(1, '小明', '2021001'),
-(2, '小红', '2021002'),
-(3, '小刚', '2021003');
-
-INSERT INTO courses (id, title, credits, teacher) VALUES
-(1, '数学', 4.0, '王老师'),
-(2, '英语', 3.0, '李老师'),
-(3, '物理', 4.0, '张老师');
-
--- 学生选课
-INSERT INTO enrollments (student_id, course_id) VALUES
-(1, 1),  -- 小明选了数学
-(1, 2),  -- 小明选了英语
-(2, 1),  -- 小红选了数学
-(2, 3),  -- 小红选了物理
-(3, 2),  -- 小刚选了英语
-(3, 3);  -- 小刚选了物理
-
--- 查询 1：查询小明选了哪些课程
-SELECT c.*
-FROM courses c
-JOIN enrollments e ON c.id = e.course_id
-WHERE e.student_id = 1;
-
--- 查询 2：查询数学课有哪些学生选了
-SELECT s.*
-FROM students s
-JOIN enrollments e ON s.id = e.student_id
-WHERE e.course_id = 1;
-
--- 查询 3：查询每个学生选了多少门课
-SELECT s.name, COUNT(e.course_id) as course_count
-FROM students s
-LEFT JOIN enrollments e ON s.id = e.student_id
-GROUP BY s.id;
-
--- 查询 4：录入成绩
-UPDATE enrollments
-SET grade = 90.5
-WHERE student_id = 1 AND course_id = 1;
-
--- 查询 5：查询小明的选课及成绩
-SELECT c.title, e.grade, e.enrolled_at
-FROM courses c
-JOIN enrollments e ON c.id = e.course_id
-WHERE e.student_id = 1;
-```
-
-#### 3.3.4 数据样子
-
-```
-students 表：
-┌────┬──────┬───────────┐
-│ id │ name │ student_no│
-├────┼──────┼───────────┤
-│ 1  │ 小明 │ 2021001   │
-│ 2  │ 小红 │ 2021002   │
-│ 3  │ 小刚 │ 2021003   │
-└────┴──────┴───────────┘
-     │                    ┌──────────────┐
-     │                    │ courses 表   │
-     │                    ├────┬─────────┬────────┬────────┐
-     │                    │ id │ title   │ credits│ teacher│
-     │                    ├────┼─────────┼────────┼────────┤
-     │                    │ 1  │ 数学    │ 4.0    │ 王老师 │
-     │                    │ 2  │ 英语    │ 3.0    │ 李老师 │
-     │                    │ 3  │ 物理    │ 4.0    │ 张老师 │
-     │                    └────┴─────────┴────────┴────────┘
-     │                            ▲
-     │                            │
-     │                            │ 多对多关系
-     │                            │
-     │                    ┌───────────────────┐
-     │                    │ enrollments（中间表）│
-     │                    ├──────────┬─────────┬──────────────┬───────┐
-     │                    │student_id│course_id│ enrolled_at  │ grade │
-     │                    ├──────────┼─────────┼──────────────┼───────┤
-     │                    │ 1        │ 1       │ 2024-09-01   │ 90.5  │ ← 小明选数学
-     │                    │ 1        │ 2       │ 2024-09-01   │ NULL  │ ← 小明选英语
-     │                    │ 2        │ 1       │ 2024-09-01   │ NULL  │ ← 小红选数学
-     │                    │ 2        │ 3       │ 2024-09-01   │ NULL  │ ← 小红选物理
-     │                    │ 3        │ 2       │ 2024-09-01   │ NULL  │ ← 小刚选英语
-     │                    │ 3        │ 3       │ 2024-09-01   │ NULL  │ ← 小刚选物理
-     │                    └──────────┴─────────┴──────────────┴───────┘
-```
-
-#### 3.3.5 中间表的设计要点
-
-**要点 1：联合主键**
-```sql
-PRIMARY KEY (student_id, course_id)
-```
-作用：防止同一个学生重复选同一门课
-
-**要点 2：外键约束**
-```sql
-FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE,
-FOREIGN KEY (course_id) REFERENCES courses(id) ON DELETE CASCADE
-```
-作用：保证数据完整性
-- 删除学生时，自动删除该学生的选课记录
-- 删除课程时，自动删除该课程的选课记录
-
-**要点 3：中间表可以添加额外字段**
-```sql
-enrolled_at TIMESTAMP,  -- 选课时间
-grade DECIMAL(5, 2),    -- 成绩
-status VARCHAR(20),     -- 状态：选课中、已退课、已完成
-```
-这是多对多关系的一大优势！
-
-#### 3.3.6 什么时候用多对多？
-
-**适合使用的场景**：
-- 标签系统：文章 ↔ 标签
-- 权限系统：用户 ↔ 角色
-- 社交关系：用户 ↔ 用户（关注、好友）
-- 购物车：用户 ↔ 商品
-
-**设计原则**：
-- 必须创建中间表（也叫关联表、桥接表）
-- 中间表包含两个外键，分别指向两张表
-- 使用联合主键防止重复关联
-- 可以在中间表添加额外属性（如：选课时间、成绩）
-
-::: tip 💡 多对多关系的判断标准
-问自己：
-1. "A 的一条记录能对应 B 的多条记录吗？" → 是
-2. "B 的一条记录能对应 A 的多条记录吗？" → 是
-3. "A 和 B 之间的关联需要额外信息吗？" → 可能需要
-
-如果 1 和 2 都是"是"，这就是多对多关系，需要用中间表！
-:::
-
----
-
-## 4. 范式理论：从混乱到有序
-
-### 4.0 什么是"范式"？
-
-**范式**（Normalization，规范化）是数据库设计的"规范"或"标准"。
-
-**目的**：
-- 消除数据冗余（重复的数据）
-- 避免数据异常（插入、更新、删除时的问题）
-- 让数据结构更清晰
-
-**通俗理解**：
-就像整理你的衣柜：
-- 乱七八糟的衣服堆在一起 → 不符合范式
-- 按类别分开（上衣、裤子、袜子）→ 符合第一范式
-- 再按颜色分开 → 符合第二范式
-- 再按季节分开 → 符合第三范式
-
-**范式的级别**：
-- 1NF（第一范式）：基础要求
-- 2NF（第二范式）：在 1NF 基础上进一步优化
-- 3NF（第三范式）：在 2NF 基础上再优化
-- BCNF（BC 范式）：3NF 的增强版
-- 4NF、5NF：更高级的范式（很少用到）
-
-**实际开发中**：
-- 大部分系统做到 3NF 就够了
-- 有时为了性能，会故意违反范式（反范式化，后面会讲）
-
-### 4.1 第一范式（1NF）：消除重复组
-
-#### 4.1.1 1NF 的规则
-
-**规则**：每个字段都应该是"原子性"的，不可再分。
-
-**什么是不符合 1NF？**
-- 一个字段包含多个值
-- 一个字段包含"组合数据"（如：地址 = 城市 + 区 + 详细地址）
-
-**什么是符合 1NF？**
-- 每个字段只存储一个值
-- 每个字段都是"最小数据单元"
-
-#### 4.1.2 问题场景：订单信息重复
-
-想象你在做一个**订单管理系统**：
-
-**场景**：一个订单包含多个商品
-
-**错误的表设计（不符合 1NF）**：
-
-```sql
-orders 表：
-| id | user_id | products                          | total |
-| 1  | 100     | iPhone(2台),iPad(1台),AirPods(3台) | 50000 |
-```
-
-**问题**：
-1. `products` 字段包含多个值（不原子）
-2. 无法查询"哪些订单包含 iPhone"
-3. 无法统计"卖了多少台 iPad"
-4. 修改商品数量需要字符串操作
-5. 无法对商品建立索引
-
-#### 4.1.3 应用 1NF 后
-
-**方案 1：拆分成多行（符合 1NF）**
-
-```sql
-orders 表：
-| id | user_id | product_id | product_name | quantity | price    |
-| 1  | 100     | 1          | iPhone       | 2        | 5999     |
-| 1  | 100     | 2          | iPad         | 1        | 3999     |
-| 1  | 100     | 3          | AirPods      | 3        | 1299     |
-```
-
-**改进**：
-- 每行只记录一个商品（原子性）
-- 可以查询"哪些订单包含 iPhone"
-- 可以统计"卖了多少台 iPad"
-- 可以对 `product_id` 建立索引
-
-**问题**：`user_id` 和 `id` 重复了（这是 2NF 要解决的问题）
-
-#### 4.1.4 另一个例子：地址字段
-
-**不符合 1NF**：
-
-```sql
-users 表：
-| id | name | address              |
-| 1  | 张三 | 北京市朝阳区xxx街道   |
-```
-
-**问题**：`address` 包含多个信息（城市、区、详细地址），不原子。
-
-**符合 1NF**：
-
-```sql
-users 表：
-| id | name | city    | district | detail_address |
-| 1  | 张三 | 北京市  | 朝阳区   | xxx街道        |
-```
-
-**改进**：
-- 每个字段只存储一个信息
-- 可以按城市查询、按区统计
-
-::: tip 💡 1NF 是基础
-所有关系型数据库（MySQL、PostgreSQL、Oracle）默认都满足 1NF，因为字段本身就不能存储复杂对象（JSON 除外）。即使你违反了 1NF（如存储逗号分隔的字符串），数据库也不会报错，但会导致查询和维护困难。
-:::
-
-```sql
--- 用户和地址混在一起
-| id | name | contact_info              |
-| 1  | 张三 | 北京朝阳区,13800138000     |
-```
-
-✅ **符合 1NF**：
-
-```sql
-| id | name | city        | district   | phone        |
-| 1  | 张三 | 北京        | 朝阳区     | 13800138000  |
-```
-
-::: tip 💡 1NF 是基础
-所有关系型数据库（MySQL、PostgreSQL、Oracle）默认都满足 1NF，因为字段本身就不能存储复杂对象（JSON 除外）。即使你违反了 1NF（如存储逗号分隔的字符串），数据库也不会报错，但会导致查询和维护困难。
-:::
-
-### 4.2 第二范式（2NF）：消除部分依赖
-
-#### 4.2.1 2NF 的规则
-
-**前提**：表必须先符合 1NF
-
-**规则**：非主键字段必须**完全依赖于**主键，而不是只依赖主键的一部分。
-
-**什么是"部分依赖"？**
-- 当主键是"复合主键"（多个字段组成的主键）时才存在
-- 某个非主键字段只依赖主键的一部分，而不是全部
-
-**什么是不符合 2NF？**
-- 主键是复合主键（如：order_id + product_id）
-- 某个字段（如 product_name）只依赖 product_id，不依赖 order_id
-
-**什么是符合 2NF？**
-- 消除部分依赖
-- 所有非主键字段都完全依赖主键
-
-#### 4.2.2 问题场景：订单明细表
-
-想象你在设计**订单明细表**：
-
-**场景**：记录每个订单的每个商品
-
-**表设计**：
-```sql
-order_items 表（订单明细）：
-| order_id | product_id | product_name | quantity | unit_price | subtotal |
-| 100      | 1          | iPhone       | 2        | 5999       | 11998    |
-| 100      | 2          | iPad         | 1        | 3999       | 3999     |
-```
-
-**主键**：(order_id, product_id) —— 复合主键
-
-**问题分析**：
-
-| 字段 | 依赖关系 | 是否符合 2NF |
-|:-----|:---------|:------------|
-| quantity | 依赖 (order_id, product_id) | ✅ 符合 |
-| subtotal | 依赖 (order_id, product_id) | ✅ 符合 |
-| product_name | 只依赖 product_id | ❌ 不符合 |
-| unit_price | 只依赖 product_id | ❌ 不符合 |
-
-**为什么不符合？**
-- `product_name` 只依赖 `product_id`
-- 即使我改变 `order_id`，`product_name` 也不会变
-- 这就是"部分依赖"（只依赖主键的一部分）
-
-#### 4.2.3 会有什么问题？
-
-**问题 1：数据冗余**
-```sql
-| order_id | product_id | product_name | quantity |
-| 100      | 1          | iPhone       | 2        |
-| 101      | 1          | iPhone       | 5        |  ← 重复了
-| 102      | 1          | iPhone       | 1        |  ← 又重复了
-```
-每次订购 iPhone，都要重复存储 `product_name`。
-
-**问题 2：更新异常**
-如果 iPhone 改名为 "iPhone 15"，需要更新所有包含该产品的订单记录。
-
-**问题 3：插入异常**
-无法插入一个还没有被订购的新产品（因为 order_id 不能为空）。
-
-#### 4.2.4 应用 2NF 后
-
-**方案：拆分成两张表**
-
-```sql
--- 订单明细表（只依赖复合主键）
-order_items 表：
-| order_id | product_id | quantity | subtotal |
-| 100      | 1          | 2        | 11998    |
-| 100      | 2          | 1        | 3999     |
-| 101      | 1          | 5        | 29995    |
-
--- 商品表（只依赖 product_id）
-products 表：
-| product_id | product_name | unit_price |
-| 1          | iPhone       | 5999       |
-| 2          | iPad         | 3999       |
-```
-
-**改进**：
-- `product_name` 和 `unit_price` 只在 products 表存储一次
-- 修改商品信息时，只需更新 products 表
-- 新商品可以先插入 products 表，即使还没人买
-
-#### 4.2.5 查询数据
-
-**查询订单 100 的所有商品详情**：
-
-```sql
-SELECT
-  oi.order_id,
-  oi.product_id,
-  p.product_name,
-  oi.quantity,
-  oi.subtotal
-FROM order_items oi
-JOIN products p ON oi.product_id = p.product_id
-WHERE oi.order_id = 100;
-```
-
-虽然需要 JOIN，但数据结构更合理，避免了冗余和异常。
-
-::: tip 💡 2NF 针对复合主键
-如果主键是单个字段，则自动满足 2NF。2NF 主要解决复合主键的部分依赖问题。
-
-**判断方法**：
-- 主键是单个字段？ → 自动满足 2NF
-- 主键是复合主键？ → 检查是否有字段只依赖主键的一部分
-:::
-
-### 4.3 第三范式（3NF）：消除传递依赖
-
-#### 4.3.1 3NF 的规则
-
-**前提**：表必须先符合 2NF
-
-**规则**：非主键字段不**传递依赖**于主键。
-
-**什么是"传递依赖"？**
-- A → B → C
-- C 依赖 B，B 依赖 A
-- 所以 C 传递依赖 A
-
-**什么是不符合 3NF？**
-- 非主键字段之间有依赖关系
-- 比如：user_level 依赖 user_id，而 user_id 又依赖 id
-
-**什么是符合 3NF？**
-- 所有非主键字段只直接依赖主键
-- 非主键字段之间没有依赖关系
-
-#### 4.3.2 问题场景：订单表包含用户等级
-
-想象你在设计**订单表**：
-
-**场景**：记录订单时，需要记录用户的等级（用于计算折扣）
-
-**表设计**：
-```sql
-orders 表：
-| id | user_id | total | user_level | discount | pay_amount |
-| 1  | 100     | 500   | VIP        | 0.9      | 450        |
-| 2  | 101     | 300   | 普通       | 1.0      | 300        |
-```
-
-**主键**：id
-
-**问题分析**：
-
-| 字段 | 依赖关系 | 是否符合 3NF |
-|:-----|:---------|:------------|
-| total | 直接依赖 id | ✅ 符合 |
-| user_id | 直接依赖 id | ✅ 符合 |
-| user_level | 依赖 user_id，再依赖 id | ❌ 不符合（传递依赖） |
-| discount | 依赖 user_level | ❌ 不符合（传递依赖） |
-
-**为什么不符合？**
-- `user_level` 依赖 `user_id`（用户的等级存在用户表中）
-- `user_id` 依赖 `id`（订单属于用户）
-- 所以 `user_level` 传递依赖 `id`
-- 同理，`discount` 依赖 `user_level`，也传递依赖 `id`
-
-#### 4.3.3 会有什么问题？
-
-**问题 1：数据冗余**
-```sql
-| id | user_id | user_level | discount |
-| 1  | 100     | VIP        | 0.9      |
-| 2  | 100     | VIP        | 0.9      |  ← 重复了
-| 3  | 100     | VIP        | 0.9      |  ← 又重复了
-```
-同一用户的多个订单，重复存储 `user_level` 和 `discount`。
-
-**问题 2：更新异常**
-如果用户从"VIP"升级到"SVIP"，需要更新该用户的所有历史订单。
-
-**问题 3：数据不一致**
-```sql
-| id | user_id | user_level | discount |
-| 1  | 100     | VIP        | 0.9      |
-| 2  | 100     | SVIP       | 0.8      |  ← 不一致！
-```
-同一用户的不同订单，等级可能不同（数据更新不一致）。
-
-#### 4.3.4 应用 3NF 后
-
-**方案：把用户等级放到用户表**
-
-```sql
--- 订单表（只存储订单相关字段）
-orders 表：
-| id | user_id | total | discount | pay_amount |
-| 1  | 100     | 500   | 0.9      | 450        |
-| 2  | 100     | 300   | 0.9      | 270        |
-
--- 用户表（存储用户等级）
-users 表：
-| id  | username | level |
-| 100 | 张三     | VIP   |
-```
-
-**改进**：
-- `user_level` 只在 users 表存储一次
-- 修改用户等级时，只需更新 users 表
-- 订单表只存储 `discount`（下单时的折扣），作为历史记录
-
-::: tip 💡 3NF 与历史数据
-有些场景需要"冗余"历史数据：
-- 订单的折扣（下单时的折扣，即使后来用户等级变了）
-- 商品的快照（下单时的价格，即使后来商品改价了）
-
-这不是违反 3NF，而是为了"历史准确性"故意保留的冗余。
-:::
-
-#### 4.3.5 另一个例子：员工表
-
-**不符合 3NF**：
-
-```sql
-employees 表：
-| id | name | dept_id | dept_name | dept_location |
-| 1  | 张三 | 10      | 技术部    | 北京         |
-| 2  | 李四 | 10      | 技术部    | 北京         |  ← 重复
-| 3  | 王五 | 20      | 销售部    | 上海         |
-| 4  | 赵六 | 20      | 销售部    | 上海         |  ← 重复
-```
-
-**问题**：`dept_name` 和 `dept_location` 依赖 `dept_id`，再依赖 `id`（传递依赖）
-
-**符合 3NF**：
-
-```sql
--- 员工表
-employees 表：
-| id | name | dept_id |
-| 1  | 张三 | 10      |
-| 2  | 李四 | 10      |
-| 3  | 王五 | 20      |
-
--- 部门表
-departments 表：
-| dept_id | dept_name | dept_location |
-| 10      | 技术部    | 北京          |
-| 20      | 销售部    | 上海          |
-```
-
-::: tip 💡 3NF 是最常见的范式
-实际业务中，大部分表设计都遵循 3NF，它在数据冗余和查询性能之间取得了平衡。
-
-**判断方法**：
-- 非主键字段之间有依赖关系吗？ → 有，可能不符合 3NF
-- 这个依赖是"历史快照"还是"可以外键关联"？ → 可以外键关联，应该拆分
-:::
-
-```sql
--- 订单明细表：(order_id, product_id) 是复合主键
-| order_id | product_id | product_name | quantity | unit_price |
-| 100      | 1          | iPhone       | 2        | 5999       |
-```
-
-**问题**：`product_name` 和 `unit_price` 只依赖 `product_id`，不依赖 `order_id`。
-
-✅ **符合 2NF**：
-
-```sql
--- 订单明细表
-| order_id | product_id | quantity |
-| 100      | 1          | 2        |
-
--- 商品表
-| product_id | name   | price    |
-| 1          | iPhone | 5999     |
-```
-
-::: tip 💡 2NF 针对复合主键
-如果主键是单个字段，则自动满足 2NF。2NF 主要解决复合主键的部分依赖问题。
-:::
-
-### 4.3 第三范式（3NF）：消除传递依赖
-
-**要求**：非主键字段不传递依赖于主键。
-
-❌ **不符合 3NF**：
-
-```sql
--- 订单表
-| id | user_id | total | user_level | discount |
-| 1  | 100     | 500   | VIP        | 0.9      |
-```
-
-**问题**：`user_level` 依赖 `user_id`，再依赖 `id`（传递依赖）。
-
-✅ **符合 3NF**：
-
-```sql
--- 订单表
-| id | user_id | total | discount |
-| 1  | 100     | 500   | 0.9      |
-
--- 用户表
-| id | level |
-| 100| VIP   |
-```
-
-::: tip 💡 3NF 是最常见的范式
-实际业务中，大部分表设计都遵循 3NF，它在数据冗余和查询性能之间取得了平衡。
-:::
-
-### 4.4 范式对比演示
-
-👇 **点击下方标签页，查看各范式的对比**：
-
-<DataModelsDemo />
-
----
-
-## 5. 反范式化：用空间换时间
-
-**范式化**虽然能消除冗余，但查询时需要多次 JOIN，影响性能。
-
-**反范式化**（Denormalization）是有意增加冗余，换取查询性能提升。
-
-### 5.1 何时需要反范式化？
-
-| 场景 | 说明 |
-| :--- | :--- |
-| **高频查询** | 每秒数百次查询，JOIN 成为瓶颈 |
-| **大数据量** | 表数据超过千万级，JOIN 性能下降 |
-| **报表统计** | 需要聚合计算，预先存储结果 |
-| **分布式系统** | 跨库 JOIN 困难，需要冗余数据 |
-
-### 5.2 反范式化实战
-
-**场景**：电商订单查询
-
-**范式化设计**：
-
-```sql
--- 订单表
-orders (id, user_id, total, status)
-users (id, name, email)
-
--- 查询订单及用户信息
-SELECT o.*, u.name, u.email
-FROM orders o
-JOIN users u ON o.user_id = u.id
-WHERE o.id = 123;
-```
-
-**性能问题**：每次查询都需要 JOIN，数据量大时慢。
-
-**反范式化设计**：
-
-```sql
--- 订单表（冗余用户信息）
-orders (id, user_id, user_name, user_email, total, status)
-
--- 查询订单（单表查询）
-SELECT * FROM orders WHERE id = 123;
-```
-
-**性能提升**：无需 JOIN，单表查询速度快 5-10 倍。
-
-**代价**：
-- 存储空间增加（每个订单多存用户名和邮箱）
-- 更新成本增加（修改用户邮箱需更新所有历史订单）
-
-### 5.3 反范式化的设计原则
-
-| 原则 | 说明 |
-| :--- | :--- |
-| **冗余不经常变化的数据** | 如用户名、商品名称（很少修改） |
-| **冗余查询频繁的字段** | 如订单列表展示的用户名、商品图片 |
-| **保留原始表** | 范式化表作为"主表"，反范式化表作为"查询表" |
-| **数据同步策略** | 通过定时任务、消息队列同步冗余字段 |
-
-::: warning ⚠️ 反范式化的风险
-- 数据冗余：占用更多存储空间
-- 更新异常：修改数据需同步多处
-- 数据不一致：同步失败导致数据不匹配
-
-**建议**：核心交易表保持范式化，查询表、统计表适当反范式化。
-:::
-
----
-
-## 6. 常见反模式及改进
-
-**反模式**（Antipattern）是"看似正确但实际有害"的设计模式。
-
-就像生活中的"误区"：
-- 为了省钱买便宜的鞋子 → 结果经常坏，花更多钱
-- 为了省时间不睡觉 → 结果身体垮了，效率更低
-
-数据库设计也有很多"反模式"，看起来方便，实际上埋雷。
-
-### 6.1 反模式 1：巨型宽表
-
-#### 6.1.1 错误的做法
-
-**错误设计**：把所有数据塞进一张表
-
-```sql
--- 巨型宽表（错误示例）
-CREATE TABLE big_table (
-  id BIGINT,
-  -- 用户字段
-  user_name VARCHAR(50),
-  user_email VARCHAR(100),
-  user_phone VARCHAR(20),
-  -- 订单字段（重复 100 次！）
-  order_1_id BIGINT,
-  order_1_amount DECIMAL(10, 2),
-  order_1_status VARCHAR(20),
-  order_2_id BIGINT,
-  order_2_amount DECIMAL(10, 2),
-  order_2_status VARCHAR(20),
-  -- ...
-  order_100_id BIGINT,
-  order_100_amount DECIMAL(10, 2),
-  order_100_status VARCHAR(20)
-);
-
--- 数据样子
-| id | user_name | user_email | order_1_id | order_1_amount | order_2_id | order_2_amount | ... |
-| 1  | 张三     | zhang@qq.com | 100      | 500.00        | 101       | 300.00        | ... |
-```
-
-#### 6.1.2 为什么会这样做？
-
-**当时的需求**：
-- 产品经理说："我们想在一个页面显示用户的所有订单"
-- 开发者想："少 JOIN 几次，查询更快"
-- 时间紧："先赶上线，以后再优化"
-
-**看起来很合理**：
-- 查询用户订单时，不需要 JOIN，单表查询快
-- SQL 简单：`SELECT * FROM big_table WHERE id = 1`
-
-#### 6.1.3 会有什么问题？
-
-**问题 1：字段数量爆炸**
-
-```sql
--- MySQL 对表字段数量有限制
--- InnoDB: 最多 1017 列
--- MyISAM: 最多 259 列
-
--- 如果用户下了 1000 个订单怎么办？
-order_1_id, order_2_id, ..., order_1000_id  ← 字段爆炸！
-```
-
-**问题 2：大量空值，浪费存储**
-
-```sql
--- 大部分用户只有 5-10 个订单，其他 90-95 个字段都是 NULL
-| id | order_1_amount | order_2_amount | order_3_amount | ... | order_100_amount |
-| 1  | 500.00         | 300.00         | 800.00         | ... | NULL             |  ← 浪费 97 个字段
-```
-
-**存储浪费**：
-- 假设每个字段占用 8 字节（DECIMAL(10,2)）
-- 100 个字段 × 8 字节 = 800 字节/行
-- 实际只用 3 个字段 = 24 字节
-- 浪费了 97% 的存储空间！
-
-**问题 3：新增订单需要修改表结构（DDL 操作）**
-
-```sql
--- 用户下了第 101 个订单，需要加字段
-ALTER TABLE big_table ADD COLUMN order_101_id BIGINT;
-ALTER TABLE big_table ADD COLUMN order_101_amount DECIMAL(10, 2);
-
--- 问题：
--- 1. DDL 操作会锁表，影响线上服务
--- 2. 大表加字段非常慢（可能需要几小时）
--- 3. 需要停机维护，用户体验差
-```
-
-**问题 4：无法查询"某个订单的所有信息"**
-
-```sql
--- 想查询订单 100 的信息
--- 需要扫描所有 order_XX_id 字段
-SELECT *
-FROM big_table
-WHERE order_1_id = 100
-   OR order_2_id = 100
-   OR order_3_id = 100
-   -- ...
-   OR order_100_id = 100;  ← SQL 非常复杂，性能极差！
-```
-
-**问题 5：无法统计订单数据**
-
-```sql
--- 想统计"所有订单的总金额"
--- 需要写复杂的 SQL
-SELECT
-  SUM(order_1_amount) +
-  SUM(order_2_amount) +
-  -- ...
-  SUM(order_100_amount) as total  ← 无法维护！
-FROM big_table;
-```
-
-#### 6.1.4 正确的做法
-
-**正确设计**：拆分成多张表，用外键关联
-
-```sql
--- 用户表
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) NOT NULL,
-  email VARCHAR(100) UNIQUE NOT NULL,
-  phone VARCHAR(20),
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 订单表
-CREATE TABLE orders (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  user_id BIGINT NOT NULL,              -- 外键，指向 users 表
-  amount DECIMAL(10, 2) NOT NULL,
-  status VARCHAR(20) DEFAULT 'pending',
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-);
-
--- 创建索引（提升查询性能）
-CREATE INDEX idx_orders_user_id ON orders(user_id);
-```
-
-#### 6.1.5 数据样子
-
-```sql
--- users 表
-| id | name | email          | phone         |
-| 1  | 张三 | zhang@qq.com   | 13800138000   |
-
--- orders 表
-| id  | user_id | amount | status   | created_at         |
-| 100 | 1       | 500.00 | paid     | 2024-01-01 10:00:00|
-| 101 | 1       | 300.00 | shipping | 2024-01-05 14:30:00|
-| 102 | 1       | 800.00 | completed| 2024-01-10 09:15:00|
-```
-
-#### 6.1.6 查询数据
-
-**查询用户的所有订单**：
-
-```sql
-SELECT o.*
-FROM orders o
-WHERE o.user_id = 1;  -- 利用索引，快速查询
-```
-
-**查询订单及对应的用户信息**：
-
-```sql
-SELECT o.*, u.name, u.email
-FROM orders o
-JOIN users u ON o.user_id = u.id
-WHERE o.id = 100;  -- 只 JOIN 需要的字段
-```
-
-**统计用户的订单总数和总金额**：
-
-```sql
-SELECT
-  u.name,
-  COUNT(o.id) as order_count,
-  SUM(o.amount) as total_amount
-FROM users u
-LEFT JOIN orders o ON u.id = o.user_id
-GROUP BY u.id;
-```
-
-#### 6.1.7 优缺点对比
-
-| 对比项 | 宽表（错误） | 分表（正确） |
-|:-----|:-----------|:-----------|
-| **存储空间** | 大量空值，浪费 90%+ | 紧凑存储，无浪费 |
-| **扩展性** | 需要修改表结构（DDL） | 直接 INSERT，无需改表 |
-| **查询性能** | 简单查询快，复杂查询极慢 | 利用索引，整体性能好 |
-| **维护性** | 字段数量爆炸，无法维护 | 结构清晰，易于维护 |
-| **数据完整性** | 无法建立外键约束 | 外键保证数据一致 |
-
-**结论**：**不要用宽表！用一对多关系 + 索引来解决！**
-
----
-
-### 6.2 反模式 2：逗号分隔值
-
-#### 6.2.1 错误的做法
-
-**错误设计**：用逗号分隔存储多个值
-
-```sql
--- 文章表（错误示例）
-CREATE TABLE posts (
-  id BIGINT PRIMARY KEY,
-  title VARCHAR(200),
-  content TEXT,
-  tags VARCHAR(500)  -- 用逗号分隔存储标签
-);
-
--- 数据样子
-| id | title    | tags                    |
-| 1  | Vue入门  | vue,frontend,javascript |
-| 2  | React实战 | react,frontend          |
-| 3  | Node.js后端 | node,backend          |
-```
-
-#### 6.2.2 为什么会这样做？
-
-**当时的需求**：
-- 产品经理说："一篇文章可以有多个标签"
-- 开发者想："用逗号分隔最简单，不用建中间表"
-- 时间紧："先赶上线，以后再优化"
-
-**看起来很合理**：
-- 存储简单：直接 `'vue,frontend,javascript'`
-- 查询简单：`SELECT * FROM posts WHERE id = 1`
-- 不用 JOIN：少一张表，少麻烦
-
-#### 6.2.3 会有什么问题？
-
-**问题 1：无法有效索引**
-
-```sql
--- 即使给 tags 字段建索引
-CREATE INDEX idx_tags ON posts(tags);
-
--- 查询包含 "vue" 标签的文章
-SELECT * FROM posts WHERE tags LIKE '%vue%';
-
--- 问题：
--- 1. LIKE '%xxx%' 无法使用索引（全表扫描）
--- 2. 查询 "vue" 会匹配 "javascript"（包含 "vue" 字符）
--- 3. 性能极差，数据量大时数据库卡死
-```
-
-**问题 2：无法精确查询**
-
-```sql
--- 想查询"有哪些文章包含 frontend 标签"
-SELECT * FROM posts WHERE tags LIKE '%frontend%';
-
--- 问题：会匹配到错误的记录
--- 'vue,frontend,javascript'  ← 正确
--- 'frontendend'              ← 错误！但会被匹配到
--- 'myfrontendapp'            ← 错误！但会被匹配到
-```
-
-**问题 3：无法统计查询**
-
-```sql
--- 想统计"每个标签有多少篇文章"
--- 几乎无法用 SQL 实现！
--- 需要：
--- 1. 查出所有文章
--- 2. 在应用层分割 tags 字符串
--- 3. 手动统计
-
--- 或者用复杂的 SQL（性能极差）
-SELECT
-  SUBSTRING_INDEX(SUBSTRING_INDEX(tags, ',', n), ',', -1) as tag,
-  COUNT(*) as count
-FROM posts
-JOIN (
-  SELECT 1 as n UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4
-) numbers
-ON CHAR_LENGTH(tags) - CHAR_LENGTH(REPLACE(tags, ',', '')) >= n - 1
-GROUP BY tag;
-```
-
-**问题 4：无法关联查询**
-
-```sql
--- 想查询"包含 vue 标签的文章 + 作者信息"
--- 需要字符串匹配，无法用 JOIN
-SELECT p.*, u.name
-FROM posts p
-JOIN users u ON p.user_id = u.id
-WHERE p.tags LIKE '%vue%';  ← 性能差，不准确
-```
-
-**问题 5：修改标签需要字符串操作**
-
-```sql
--- 想给文章 1 添加一个 "tutorial" 标签
--- 需要分步操作
--- 1. 查询当前 tags
-SELECT tags FROM posts WHERE id = 1;  -- 'vue,frontend,javascript'
-
--- 2. 在应用层拼接字符串
-new_tags = old_tags + ',tutorial'  -- 'vue,frontend,javascript,tutorial'
-
--- 3. 更新数据库
-UPDATE posts SET tags = 'vue,frontend,javascript,tutorial' WHERE id = 1;
-
--- 问题：
--- 1. 需要 3 步操作，代码复杂
--- 2. 并发修改时可能丢失数据
--- 3. 无法保证标签唯一性（可能添加重复标签）
-```
-
-#### 6.2.4 正确的做法
-
-**正确设计**：用中间表（多对多关系）
-
-```sql
--- 文章表
-CREATE TABLE posts (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  title VARCHAR(200) NOT NULL,
-  content TEXT,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 标签表
-CREATE TABLE tags (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) UNIQUE NOT NULL  -- 标签名称唯一
-);
-
--- 文章-标签关联表（中间表）
-CREATE TABLE post_tags (
-  post_id BIGINT NOT NULL,
-  tag_id BIGINT NOT NULL,
-  PRIMARY KEY (post_id, tag_id),  -- 联合主键，防止重复关联
-  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
-  FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
-);
-
--- 创建索引（提升查询性能）
-CREATE INDEX idx_post_tags_tag_id ON post_tags(tag_id);
-```
-
-#### 6.2.5 数据样子
-
-```sql
--- posts 表
-| id | title    | content               |
-| 1  | Vue入门  | Vue 是一个渐进式框架... |
-| 2  | React实战| React 是一个 UI 库...   |
-
--- tags 表
-| id | name       |
-| 1  | vue        |
-| 2  | frontend   |
-| 3  | javascript |
-| 4  | react      |
-
--- post_tags 表
-| post_id | tag_id |
-| 1       | 1      |  ← 文章 1 有 vue 标签
-| 1       | 2      |  ← 文章 1 有 frontend 标签
-| 1       | 3      |  ← 文章 1 有 javascript 标签
-| 2       | 2      |  ← 文章 2 有 frontend 标签
-| 2       | 4      |  ← 文章 2 有 react 标签
-```
-
-#### 6.2.6 查询数据
-
-**查询包含 "vue" 标签的所有文章**：
-
-```sql
-SELECT p.*
-FROM posts p
-JOIN post_tags pt ON p.id = pt.post_id
-JOIN tags t ON pt.tag_id = t.id
-WHERE t.name = 'vue';  -- 利用索引，快速查询
-```
-
-**查询文章的所有标签**：
-
-```sql
-SELECT t.name
-FROM tags t
-JOIN post_tags pt ON t.id = pt.tag_id
-WHERE pt.post_id = 1;
-
--- 结果
-| name       |
-| vue        |
-| frontend   |
-| javascript |
-```
-
-**统计每个标签的文章数量**：
-
-```sql
-SELECT t.name, COUNT(pt.post_id) as post_count
-FROM tags t
-LEFT JOIN post_tags pt ON t.id = pt.tag_id
-GROUP BY t.id
-ORDER BY post_count DESC;
-
--- 结果
-| name       | post_count |
-| frontend   | 2          |
-| vue        | 1          |
-| javascript | 1          |
-| react      | 1          |
-```
-
-**给文章添加标签**：
-
-```sql
--- 先查询或创建标签
-INSERT IGNORE INTO tags (name) VALUES ('tutorial');
-
--- 添加关联
-INSERT INTO post_tags (post_id, tag_id)
-VALUES (1, (SELECT id FROM tags WHERE name = 'tutorial'));
-
--- 完事！一条 SQL 搞定
-```
-
-#### 6.2.7 优缺点对比
-
-| 对比项 | 逗号分隔（错误） | 中间表（正确） |
-|:-----|:--------------|:-------------|
-| **查询性能** | 无法使用索引，全表扫描 | 利用索引，快速查询 |
-| **查询精确度** | LIKE 匹配不准确 | 精确匹配 |
-| **统计查询** | 几乎无法实现 | 简单的 GROUP BY |
-| **数据完整性** | 无约束，可重复、格式混乱 | 外键 + 唯一约束 |
-| **维护性** | 字符串操作，复杂 | 标准 SQL，简单 |
-| **扩展性** | 难以扩展（如标签权重） | 易于扩展 |
-
-**结论**：**不要用逗号分隔！用多对多关系 + 中间表来解决！**
-
----
-
-### 6.3 反模式 3：滥用 JSON 字段
-
-#### 6.3.1 错误的做法
-
-**错误设计**：把订单明细存为 JSON
-
-```sql
--- 订单表（错误示例）
-CREATE TABLE orders (
-  id BIGINT PRIMARY KEY,
-  user_id BIGINT,
-  items JSON,           -- 订单明细存为 JSON
-  total DECIMAL(10, 2),
-  created_at TIMESTAMP
-);
-
--- 数据样子
-| id | user_id | items                                            | total |
-| 1  | 100     | [{"pid":1,"qty":2},{"pid":2,"qty":1}]            | 500   |
-| 2  | 101     | [{"pid":3,"qty":5}]                              | 300   |
-```
-
-#### 6.3.2 为什么会这样做？
-
-**当时的需求**：
-- 产品经理说："订单明细结构复杂，字段不固定"
-- 开发者想："JSON 灵活，不用定义字段"
-- 时间紧："先赶上线，以后再优化"
-
-**看起来很合理**：
-- 灵活：可以存储任意结构的数据
-- 简单：不需要建 order_items 表
-- 查询快：单表查询，不需要 JOIN
-
-#### 6.3.3 会有什么问题？
-
-**问题 1：无法建立外键约束**
-
-```sql
--- 无法保证 JSON 中的 pid（商品 ID）真实存在
-INSERT INTO orders (id, user_id, items, total) VALUES
-(1, 100, '[{"pid":9999,"qty":1}]', 500);  ← pid 9999 不存在，但能插入！
-
--- 问题：数据完整性无法保证
-```
-
-**问题 2：无法有效索引（MySQL 5.7 之前）**
-
-```sql
--- MySQL 5.7+ 支持生成列 + 索引，但很复杂
--- MySQL 5.6 及之前版本，JSON 字段完全无法索引
-
--- 查询"购买了商品 1 的所有订单"
-SELECT * FROM orders
-WHERE JSON_CONTAINS(items, '{"pid": 1}');  ← 全表扫描！
-```
-
-**问题 3：数据完整性差**
-
-```sql
--- 可以插入错误格式的 JSON
-INSERT INTO orders (id, user_id, items, total) VALUES
-(1, 100, '[{"pid":1}]', 500),          -- 缺少 qty
-(2, 100, '[{"qty":2}]', 300),          -- 缺少 pid
-(3, 100, 'not-a-json', 200);           -- 不是 JSON
-
--- 问题：数据库无法检测 JSON 内容的正确性
-```
-
-**问题 4：查询"某个商品的所有订单"需要全文扫描**
-
-```sql
--- 想查询"购买了 iPhone 的所有订单"
--- 需要扫描所有订单的 JSON 字段
-SELECT * FROM orders
-WHERE JSON_CONTAINS(items, '{"pid": 1}');  ← 全表扫描，性能极差！
-```
-
-**问题 5：修改商品信息很困难**
-
-```sql
--- 想把商品 1 的名称从 "iPhone" 改为 "iPhone 15"
--- 需要更新所有包含该商品的订单的 JSON 字段
--- 但 JSON 无法用 UPDATE 语句部分更新，只能整体替换
-
--- 步骤：
--- 1. 查询订单
-SELECT items FROM orders WHERE id = 1;
-
--- 2. 在应用层解析 JSON，修改，再序列化
-items = JSON.parse(items)
-items.forEach(item => {
-  if (item.pid === 1) {
-    item.name = "iPhone 15"  -- 但订单表没存 name！
-  }
-})
-new_items = JSON.stringify(items)
-
--- 3. 更新数据库
-UPDATE orders SET items = new_items WHERE id = 1;
-
--- 问题：操作复杂，性能差，容易出错
-```
-
-**问题 6：无法统计商品销量**
-
-```sql
--- 想统计"每个商品卖了多少"
--- 需要在应用层遍历所有订单的 JSON
--- 或用复杂的 SQL（MySQL 5.7+）
-SELECT
-  JSON_UNQUOTE(JSON_EXTRACT(items, '$[0].pid')) as pid,
-  SUM(JSON_EXTRACT(items, '$[0].qty')) as total_qty
-FROM orders
-GROUP BY pid;  ← 假设每个订单只有一个商品，不通用！
-```
-
-#### 6.3.4 正确的做法
-
-**正确设计**：用关联表（一对多关系）
-
-```sql
--- 订单表
-CREATE TABLE orders (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  user_id BIGINT NOT NULL,
-  total DECIMAL(10, 2) NOT NULL,
-  status VARCHAR(20) DEFAULT 'pending',
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (user_id) REFERENCES users(id)
-);
-
--- 订单明细表
-CREATE TABLE order_items (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  order_id BIGINT NOT NULL,           -- 外键，指向 orders 表
-  product_id BIGINT NOT NULL,         -- 外键，指向 products 表
-  product_name VARCHAR(200),          -- 冗余，保存下单时的商品名称
-  price DECIMAL(10, 2) NOT NULL,      -- 冗余，保存下单时的价格
-  quantity INT NOT NULL,
-  subtotal DECIMAL(10, 2) NOT NULL,   -- 小计 = price * quantity
-  FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE,
-  FOREIGN KEY (product_id) REFERENCES products(id)
-);
-
--- 创建索引（提升查询性能）
-CREATE INDEX idx_order_items_order_id ON order_items(order_id);
-CREATE INDEX idx_order_items_product_id ON order_items(product_id);
-```
-
-#### 6.3.5 数据样子
-
-```sql
--- orders 表
-| id | user_id | total | status   | created_at         |
-| 1  | 100     | 500.00| paid     | 2024-01-01 10:00:00|
-
--- order_items 表
-| id | order_id | product_id | product_name | price  | quantity | subtotal|
-| 1  | 1        | 1          | iPhone       | 5999.00| 2        | 11998.00|
-| 2  | 1        | 2          | iPad         | 3999.00| 1        | 3999.00 |
-```
-
-#### 6.3.6 查询数据
-
-**查询订单的所有商品**：
-
-```sql
-SELECT oi.*
-FROM order_items oi
-WHERE oi.order_id = 1;  -- 利用索引，快速查询
-```
-
-**查询"购买了商品 1 的所有订单"**：
-
-```sql
-SELECT DISTINCT o.*
-FROM orders o
-JOIN order_items oi ON o.id = oi.order_id
-WHERE oi.product_id = 1;  -- 利用索引，快速查询
-```
-
-**统计每个商品的销量**：
-
-```sql
-SELECT
-  p.name,
-  SUM(oi.quantity) as total_qty,
-  SUM(oi.subtotal) as total_amount
-FROM products p
-JOIN order_items oi ON p.id = oi.product_id
-GROUP BY p.id
-ORDER BY total_qty DESC;
-```
-
-#### 6.3.7 什么时候可以用 JSON？
-
-JSON 不是"洪水猛兽"，在以下场景可以使用：
-
-**适合使用 JSON 的场景**：
-
-1. **非结构化数据**
-   ```sql
-   -- 用户的扩展配置信息（每个用户配置不同）
-   ALTER TABLE users ADD COLUMN preferences JSON;
-
-   -- 数据样子
-   | id | username | preferences                                |
-   | 1  | zhangsan | {"theme":"dark","lang":"zh","fontSize":14} |
-   | 2  | lisi     | {"theme":"light","lang":"en"}              |
-   ```
-
-2. **低频查询的数据**
-   ```sql
-   -- 日志、埋点数据（查询频率低）
-   CREATE TABLE events (
-     id BIGINT PRIMARY KEY,
-     user_id BIGINT,
-     event_data JSON,  -- 事件详情（字段不固定）
-     created_at TIMESTAMP
-   );
-   ```
-
-3. **动态属性**
-   ```sql
-   -- 商品的动态属性（不同品类属性不同）
-   -- 手机：屏幕尺寸、电池容量
-   -- 衣服：尺码、材质、颜色
-   CREATE TABLE products (
-     id BIGINT PRIMARY KEY,
-     name VARCHAR(200),
-     attributes JSON  -- 动态属性
-   );
-
-   -- 数据样子
-   | id | name   | attributes                                        |
-   | 1  | iPhone | {"screen":"6.1 inch","battery":"3000mAh"}         |
-   | 2  | T恤    | {"size":"L","material":"cotton","color":"blue"}    |
-   ```
-
-**不适合使用 JSON 的场景**：
-- 核心业务数据（订单、用户、商品）
-- 需要频繁查询的字段
-- 需要建立索引的字段
-- 需要保证数据完整性的字段（外键约束）
-
-::: tip 💡 JSON 的使用原则
-**能用关系表就用关系表，实在不行才用 JSON。**
-
-判断标准：
-1. 这个字段需要查询吗？ → 需要，别用 JSON
-2. 这个字段需要建立索引吗？ → 需要，别用 JSON
-3. 这个字段需要保证数据完整性吗？ → 需要，别用 JSON
-4. 这个字段结构经常变化吗？ → 是，可以考虑 JSON
-:::
-
----
-
-## 7. 实战：电商系统数据模型
-
-下面是一个完整的电商系统数据模型设计。
-
-### 7.1 核心模块
-
-**用户模块**：
-
-```sql
--- 用户表
-users (id, username, email, password_hash, created_at)
-
--- 用户地址表
-user_addresses (id, user_id, province, city, district, detail, is_default)
-
--- 用户资料表
-user_profiles (id, user_id, nickname, avatar, bio)
-```
-
-**商品模块**：
-
-```sql
--- 分类表
-categories (id, name, parent_id, level)
-
--- 商品表
-products (id, category_id, name, description, created_at)
-
--- 商品 SKU 表
-product_skus (id, product_id, specs, price, stock)
-
--- 库存表
-product_inventory (sku_id, warehouse_id, quantity)
-```
-
-**订单模块**：
-
-```sql
--- 订单表
-orders (
-  id,
-  user_id,
-  user_name,          -- 冗余，反范式化
-  total_amount,
-  discount_amount,
-  pay_amount,
-  status,
-  created_at
-)
-
--- 订单明细表
-order_items (
-  id,
-  order_id,
-  product_id,
-  product_name,       -- 冗余，反范式化
-  product_sku_id,
-  price,
-  quantity
-)
-
--- 支付记录表
-payments (id, order_id, amount, method, status, transaction_id)
-```
-
-**营销模块**：
-
-```sql
--- 优惠券表
-coupons (id, name, type, discount, min_amount, stock)
-
--- 用户优惠券表
-user_coupons (id, user_id, coupon_id, status, used_at)
-
--- 促销活动表
-promotions (id, name, type, discount, start_time, end_time)
-```
-
-### 7.2 关系设计
-
-| 关系 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| users ↔ orders | 1:N | 一个用户有多个订单 |
-| orders ↔ order_items | 1:N | 一个订单有多个明细 |
-| products ↔ product_skus | 1:N | 一个商品有多个 SKU |
-| users & coupons | M:N | 通过 user_coupons 中间表 |
-| products & categories | M:N | 一个商品可属于多个分类 |
-
-### 7.3 反范式化策略
-
-| 字段 | 冗余位置 | 原因 |
-| :--- | :--- | :--- |
-| user_name | orders 表 | 避免查询订单时 JOIN users 表 |
-| product_name | order_items 表 | 避免商品改名后历史订单显示问题 |
-| product_price | order_items 表 | 保存下单时价格，避免价格变动影响 |
-
----
-
-## 8. 数据模型设计流程
-
-### 8.0 手把手：从零设计一个数据模型
-
-让我们用一个**图书馆管理系统**的例子，从头到尾演示数据模型设计过程。
-
-#### 第一步：识别实体（识别"对象"）
-
-**问题**：这个系统需要管理哪些"东西"？
-
-**需求分析**：
-- 图书馆有很多书
-- 书有不同的类别（小说、科技、历史）
-- 读者可以借书、还书
-- 每本书可以被多次借阅
-
-**识别出的实体**：
-1. **图书**（Book）：书的基本信息
-2. **读者**（Reader）：借书的人
-3. **借阅记录**（Borrow）：谁借了哪本书
-4. **分类**（Category）：书的分类
-
-#### 第二步：确定属性（识别"特征"）
-
-**问题**：每个实体有哪些信息需要记录？
-
-**图书的属性**：
-- 书名（title）
-- 作者（author）
-- ISBN（isbn）- 唯一标识
-- 出版社（publisher）
-- 出版年份（publish_year）
-- 库存数量（stock）
-
-**读者的属性**：
-- 姓名（name）
-- 电话（phone）
-- 邮箱（email）
-- 注册日期（registered_at）
-
-**借阅记录的属性**：
-- 借阅日期（borrowed_at）
-- 应还日期（due_date）
-- 实还日期（returned_at）
-- 状态（status）：借阅中、已归还、逾期
-
-**分类的属性**：
-- 分类名称（name）
-- 分类描述（description）
-
-#### 第三步：确定关系（识别"关联"）
-
-**问题**：这些实体之间有什么关系？
-
-**分析**：
-
-1. **图书 ↔ 读者**：多对多？
-   - 一个读者可以借多本书
-   - 一本书可以被多个读者借（不同时间）
-   - **但是**：同一时间，一本书只能被一个读者借
-   - **所以**：需要**借阅记录**来记录"谁借了哪本书"
-
-2. **图书 ↔ 分类**：多对多
-   - 一本书可以属于多个分类（如：《Python编程》属于"编程"和"Python"）
-   - 一个分类包含多本书
-   - **需要中间表**：book_categories
-
-3. **读者 ↔ 借阅记录**：一对多
-   - 一个读者可以有多条借阅记录
-   - 一条借阅记录只属于一个读者
-
-4. **图书 ↔ 借阅记录**：一对多
-   - 一本书可以有多条借阅记录（被不同人借过）
-   - 一条借阅记录只针对一本书
-
-#### 第四步：画出 ER 图
-
-```
-    ┌─────────┐
-    │  图书   │
-    └─────────┘
-    │ id      │
-    │ title   │
-    │ author  │
-    │ isbn    │
-    └─────────┘
-         │
-         │ 1:N
-         │
-    ┌─────────┐     ┌─────────┐
-    │ 借阅记录│────│  读者   │
-    └─────────┘     └─────────┘
-    │ book_id │     │ id      │
-    │ reader_id│    │ name    │
-    │ borrowed_at│  │ phone   │
-    └─────────┘     └─────────┘
-         │
-         │ N:M
-         │
-    ┌─────────┐
-    │  分类   │
-    └─────────┘
-    │ id      │
-    │ name    │
-    └─────────┘
-```
-
-#### 第五步：设计表结构（SQL）
-
-```sql
--- 图书表
-CREATE TABLE books (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  title VARCHAR(200) NOT NULL,
-  author VARCHAR(100) NOT NULL,
-  isbn VARCHAR(20) UNIQUE NOT NULL,  -- ISBN 唯一
-  publisher VARCHAR(100),
-  publish_year INT,
-  stock INT DEFAULT 1,               -- 库存数量
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 读者表
-CREATE TABLE readers (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) NOT NULL,
-  phone VARCHAR(20) UNIQUE NOT NULL,  -- 电话唯一
-  email VARCHAR(100) UNIQUE,
-  registered_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 借阅记录表
-CREATE TABLE borrows (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  book_id BIGINT NOT NULL,
-  reader_id BIGINT NOT NULL,
-  borrowed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  due_date TIMESTAMP NOT NULL,         -- 应还日期
-  returned_at TIMESTAMP NULL,          -- 实还日期（NULL 表示未还）
-  status VARCHAR(20) DEFAULT 'borrowed', -- borrowed: 借阅中, returned: 已归还, overdue: 逾期
-  FOREIGN KEY (book_id) REFERENCES books(id),
-  FOREIGN KEY (reader_id) REFERENCES readers(id)
-);
-
--- 分类表
-CREATE TABLE categories (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) NOT NULL,
-  description TEXT
-);
-
--- 图书-分类关联表（多对多）
-CREATE TABLE book_categories (
-  book_id BIGINT NOT NULL,
-  category_id BIGINT NOT NULL,
-  PRIMARY KEY (book_id, category_id),  -- 联合主键
-  FOREIGN KEY (book_id) REFERENCES books(id),
-  FOREIGN KEY (category_id) REFERENCES categories(id)
-);
-
--- 创建索引（提升查询性能）
-CREATE INDEX idx_borrows_reader_id ON borrows(reader_id);
-CREATE INDEX idx_borrows_book_id ON borrows(book_id);
-CREATE INDEX idx_borrows_status ON borrows(status);
-CREATE INDEX idx_book_categories_category_id ON book_categories(category_id);
-```
-
-#### 第六步：应用范式（检查和优化）
-
-**检查 1NF**：
-- ✅ 所有字段都是原子的（没有字段包含多个值）
-- ✅ 没有重复组
-
-**检查 2NF**：
-- ✅ 没有复合主键的情况（除了 book_categories 的联合主键）
-- ✅ 所有非主键字段完全依赖于主键
-
-**检查 3NF**：
-- ✅ 没有传递依赖
-- 例如：借阅记录中的 `status` 不会因为 `reader_id` 的变化而变化
-
-**优化**：
-- 考虑是否需要冗余字段？
-  - 例如：在 `borrows` 表中冗余 `book_title` 和 `reader_name`，避免查询时 JOIN
-  - **决策**：不冗余，因为查询频率不高，保持数据一致性更重要
-
-#### 第七步：设计查询（验证设计）
-
-**查询 1：查询读者当前借阅的所有图书**
-
-```sql
-SELECT
-  b.title,
-  b.author,
-  bor.borrowed_at,
-  bor.due_date,
-  bor.status
-FROM borrows bor
-JOIN books b ON bor.book_id = b.id
-WHERE bor.reader_id = 1
-  AND bor.status = 'borrowed';  -- 只查未还的
-```
-
-**查询 2：查询某本书的所有借阅历史**
-
-```sql
-SELECT
-  r.name,
-  bor.borrowed_at,
-  bor.returned_at,
-  bor.status
-FROM borrows bor
-JOIN readers r ON bor.reader_id = r.id
-WHERE bor.book_id = 1
-ORDER BY bor.borrowed_at DESC;
-```
-
-**查询 3：查询逾期未还的图书**
-
-```sql
-SELECT
-  r.name as reader_name,
-  r.phone as reader_phone,
-  b.title as book_title,
-  bor.due_date
-FROM borrows bor
-JOIN readers r ON bor.reader_id = r.id
-JOIN books b ON bor.book_id = b.id
-WHERE bor.status = 'borrowed'
-  AND bor.due_date < NOW();  -- 应还日期早于当前时间
-```
-
-**查询 4：查询某个分类的所有图书**
-
-```sql
-SELECT b.*
-FROM books b
-JOIN book_categories bc ON b.id = bc.book_id
-JOIN categories c ON bc.category_id = c.id
-WHERE c.name = '编程';
-```
-
-#### 第八步：迭代优化（根据实际情况调整）
-
-**问题发现**：
-- 每次查询"读者借阅的图书"都需要 JOIN 3 张表（borrows、books、readers）
-- 如果数据量大，查询可能慢
-
-**优化方案 1：添加冗余字段（反范式化）**
-
-```sql
--- 在 borrows 表添加冗余字段
-ALTER TABLE borrows ADD COLUMN book_title VARCHAR(200);
-ALTER TABLE borrows ADD COLUMN reader_name VARCHAR(50);
-
--- 修改插入逻辑
-INSERT INTO borrows (book_id, reader_id, book_title, reader_name, ...)
-VALUES (1, 2, (SELECT title FROM books WHERE id = 1),
-             (SELECT name FROM readers WHERE id = 2), ...);
-
--- 现在查询可以简化
-SELECT book_title, borrowed_at, due_date, status
-FROM borrows
-WHERE reader_id = 1 AND status = 'borrowed';  -- 无需 JOIN
-```
-
-**代价**：
-- 存储空间增加（每次借阅都存储书名和读者名）
-- 更新复杂（修改书名时需要同步更新所有借阅记录）
-
-**优化方案 2：添加缓存**
-- 把热门读者的借阅记录缓存到 Redis
-- 定期刷新缓存
-
-**优化方案 3：添加视图**
-- 创建视图简化查询
-
-```sql
-CREATE VIEW reader_borrows AS
-SELECT
-  bor.id,
-  r.name as reader_name,
-  b.title as book_title,
-  bor.borrowed_at,
-  bor.due_date,
-  bor.status
-FROM borrows bor
-JOIN readers r ON bor.reader_id = r.id
-JOIN books b ON bor.book_id = b.id;
-
--- 查询时直接用视图
-SELECT * FROM reader_borrows WHERE reader_name = '张三';
-```
-
-::: tip 💡 数据模型设计是个迭代过程
-1. **第一步**：先设计一个满足 3NF 的规范模型
-2. **第二步**：根据实际查询需求，考虑反范式化
-3. **第三步**：通过性能测试，找出瓶颈
-4. **第四步**：优化（添加索引、缓存、冗余字段）
-5. **第五步**：重复 2-4 步
-
-**不要一开始就过度优化**！先保证正确性，再优化性能。
-:::
-
-### 8.1 数据模型设计流程总结
-
-| 阶段 | 目标 | 产出 | 工具 |
-|:---|:---|:---|:---|
-| **需求分析** | 识别实体和关系 | 实体清单、关系描述 | 文档、脑图 |
-| **概念设计** | 画出 ER 图 | ER 图 | draw.io、Workbench |
-| **逻辑设计** | 设计表结构 | 表结构 SQL | 文本编辑器 |
-| **范式检查** | 消除冗余 | 符合 3NF 的表 | 检查清单 |
-| **物理设计** | 索引、分区 | 建表 SQL + 索引 | 数据库工具 |
-| **性能优化** | 反范式化 | 冗余字段、缓存 | 慢查询日志 |
-3. **数据归档**：历史数据迁移到归档表
-
----
-
-## 9. 用 AI 辅助设计数据模型
-
-AI 可以帮你快速生成符合规范的数据模型。关键在于提供清晰的业务描述。
-
-### 9.1 提示词模板
-
-```
-你是一位资深的数据库架构师，精通关系型数据库设计。请帮我设计数据模型。
-
-## 业务背景
-[描述你的业务场景，例如：电商系统、博客平台、任务管理系统]
-
-## 核心实体
-[列出主要的业务对象，例如：
-- 用户：注册、登录、个人信息
-- 订单：下单、支付、发货
-- 商品：分类、库存、价格]
-
-## 关系说明
-[描述实体之间的关系，例如：
-- 一个用户可以有多个订单
-- 一个订单包含多个商品
-- 商品属于分类，多级分类]
-
-## 设计要求
-1. 遵循 3NF 范式
-2. 明确标注主键（PK）和外键（FK）
-3. 说明表之间的一对一、一对多、多对多关系
-4. 考虑反范式化策略（如果需要）
-5. 提供完整的建表 SQL（MySQL 语法）
-
-## 输出格式
-请按以下格式输出：
-
-### 表结构
-- 表名：说明
-  - 字段定义
-
-### 关系图
-用文字描述表之间的关系
-
-### 索引建议
-列出需要建立的索引
-
-### 反范式化建议
-说明哪些字段需要冗余，为什么
-```
-
-### 9.2 实战示例：博客系统
-
-**输入提示词**：
-
-```
-你是一位资深的数据库架构师。请帮我设计一个博客系统的数据模型。
-
-## 业务背景
-一个多用户博客平台，用户可以发布文章、评论、点赞。
-
-## 核心实体
-- 用户：昵称、邮箱、密码
-- 文章：标题、内容、发布时间
-- 评论：评论内容、评论时间
-- 标签：文章可以打多个标签
-
-## 关系说明
-- 一个用户可以发表多篇文章
-- 一篇文章可以有多个评论
-- 一篇文章可以有多个标签
-- 一个用户可以点赞多篇文章
-
-## 设计要求
-1. 遵循 3NF 范式
-2. 标注 PK 和 FK
-3. 说明关系类型
-4. 提供建表 SQL
-```
-
-**AI 输出示例**：
-
-```sql
--- 用户表
-CREATE TABLE users (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  nickname VARCHAR(50) NOT NULL,
-  email VARCHAR(100) UNIQUE NOT NULL,
-  password_hash VARCHAR(255) NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- 文章表
-CREATE TABLE posts (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  user_id BIGINT NOT NULL,
-  title VARCHAR(200) NOT NULL,
-  content TEXT NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
-);
-
--- 评论表
-CREATE TABLE comments (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  post_id BIGINT NOT NULL,
-  user_id BIGINT NOT NULL,
-  content TEXT NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
-  FOREIGN KEY (user_id) REFERENCES users(id)
-);
-
--- 标签表
-CREATE TABLE tags (
-  id BIGINT PRIMARY KEY AUTO_INCREMENT,
-  name VARCHAR(50) UNIQUE NOT NULL
-);
-
--- 文章-标签关联表
-CREATE TABLE post_tags (
-  post_id BIGINT NOT NULL,
-  tag_id BIGINT NOT NULL,
-  PRIMARY KEY (post_id, tag_id),
-  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
-  FOREIGN KEY (tag_id) REFERENCES tags(id)
-);
-
--- 点赞表
-CREATE TABLE likes (
-  user_id BIGINT NOT NULL,
-  post_id BIGINT NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (user_id, post_id),
-  FOREIGN KEY (user_id) REFERENCES users(id),
-  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
-);
-
--- 索引建议
-CREATE INDEX idx_posts_user_id ON posts(user_id);
-CREATE INDEX idx_posts_created_at ON posts(created_at DESC);
-CREATE INDEX idx_comments_post_id ON comments(post_id);
-CREATE INDEX idx_post_tags_tag_id ON post_tags(tag_id);
-```
-
-### 9.3 AI 辅助设计的注意事项
-
-| 注意点 | 说明 |
-| :--- | :--- |
-| **提供完整上下文** | 业务场景、数据量级、查询模式都要说明 |
-| **明确关系类型** | 一对一、一对多、多对多要说清楚 |
-| **要求解释原因** | 让 AI 说明为什么这样设计 |
-| **检查约束条件** | 主键、外键、唯一索引是否合理 |
-| **考虑扩展性** | 询问未来可能的扩展场景 |
-| **人工审核** | AI 生成的内容需要人工检查是否符合业务需求 |
-
-::: tip 💡 追问技巧
-- "请说明这个设计遵循了哪些范式"
-- "如果数据量达到千万级，如何优化"
-- "哪些字段可以考虑反范式化"
-- "请补充索引设计的理由"
-:::
-
----
-
-## 名词速查表
-
-| 名词 | 英文 | 解释 |
-| :--- | :--- | :--- |
-| **数据模型** | Data Model | 对现实世界的抽象，描述数据如何存储、组织和关联 |
-| **ER 图** | Entity-Relationship Diagram | 用图形化方式描述实体关系的工具 |
-| **主键** | Primary Key | 唯一标识表中每条记录的字段 |
-| **外键** | Foreign Key | 关联另一张表主键的字段 |
-| **范式** | Normalization | 数据库设计的规范，消除数据冗余 |
-| **反范式化** | Denormalization | 有意增加冗余，换取查询性能提升 |
-| **一对一** | One-to-One | A 表一条记录对应 B 表一条记录 |
-| **一对多** | One-to-Many | A 表一条记录对应 B 表多条记录 |
-| **多对多** | Many-to-Many | A 表多条记录对应 B 表多条记录 |
-| **中间表** | Junction Table | 实现多对多关系的关联表 |
-| **冗余** | Redundancy | 数据重复存储 |
-| **传递依赖** | Transitive Dependency | A → B → C，C 传递依赖 A |
-| **部分依赖** | Partial Dependency | 非主键字段只依赖复合主键的一部分 |
-| **原子性** | Atomicity | 字段不可再分的最小数据单元 |
-| **宽表** | Wide Table | 字段数量特别多的表 |
-| **索引** | Index | 加速查询的数据结构 |
-| **约束** | Constraint | 保证数据完整性的规则（如 NOT NULL、UNIQUE） |
+所以，在下次打开代码编辑器兴奋地敲击之前，先买一张大大的白板。跟你的伙伴讨论出你们心中最干净的那个模型。因为只有拥有了强健的数据骨架，这头怪兽才能放肆奔跑。
diff --git a/docs/zh-cn/appendix/5-data/data-tracking.md b/docs/zh-cn/appendix/5-data/data-tracking.md
index b656e41..925418b 100644
--- a/docs/zh-cn/appendix/5-data/data-tracking.md
+++ b/docs/zh-cn/appendix/5-data/data-tracking.md
@@ -1,1092 +1,136 @@
-# 数据埋点与用户行为采集
-> 💡 **学习指南**：本章节带你深入理解数据采集的基石——埋点设计。我们将从最基础的"为什么要埋点"讲起，一步步掌握埋点方案、数据模型、处理流程，以及实战中的坑与解决方案。
+# 数据埋点：数字化帝国的全视之眼
 
-<TrackingOverviewDemo />
+::: tip 🎯 核心问题
+**如果看不见用户，我们要怎么做业务？**
 
-## 0. 引言：数据驱动决策的基石
+每天有 100 万人登录你的应用，但如果没有埋点，你面对的就像是 100 万个飘忽不定的黑箱幽灵。你不知道他们点击了什么，不知道他们在哪里离开，更不知道他们为什么不买单。
 
-你刷抖音时，为什么总能刷到感兴趣的视频？
-你逛淘宝时，为什么推荐的商品总是那么精准？
-你打开 App 时，为什么收到的推送总是恰到好处？
-
-这背后都有一个功臣：**埋点 (Event Tracking)**。
-
-如果产品是"眼睛"，那埋点就是"视神经"。
-它把用户的一举一动转化为数据，帮助产品经理、开发者、运营人员理解用户、优化产品。
-
-### 0.1 为什么要埋点？
-
-只有一个理由：**数据驱动决策**。
-
-| 决策方式   | 依赖         | 准确率 | 风险 |
-| :--------- | :----------- | :----- | :--- |
-| **凭感觉** | 个人经验     | ~30%   | 高   |
-| **看反馈** | 少数用户声音 | ~50%   | 中   |
-| **看数据** | 全量用户行为 | ~90%   | 低   |
-
-**关键点**：埋点的本质是**把用户行为转化为可量化的数据**，让产品决策从"我觉得"变成"数据显示"。
+这个看似极其抽象的词汇——"埋点"（Event Tracking），其实就是在用户必经之路上安插"隐形探头"。本章，我们将不讲枯燥的大数据黑话，而是顺着**"画出监控图纸 -> 规范笔录格式 -> 装车寄送包裹 -> 海关质检入库"**这条主线，带你零基础看清海量用户行为是如何一步步被抓取、清洗，并最终变成报表上的黄金的。
+:::
 
 ---
 
-## 1. 第一步：理解埋点的基本概念
+## 第一步：画出监控图纸 (采集方案选择)
 
-### 1.1 什么是埋点？
+**目标**：决定在产品的哪些角落，使用什么样的手段安放"监控探头"。
 
-埋点（Event Tracking），是指在应用程序的关键位置添加代码，收集用户行为数据的过程。
+当产品经理想要知道"到底有多少人点击了购买按钮"时，程序员第一步要做的，就是去代码里埋下采集器。但这就像在商场里装监控，你是紧紧盯着收银台，还是无死角地布满整个商场？
 
-**生活中的例子**：
+<DataTrackingDemo tab="methods" />
 
-想象你在经营一家实体店：
+**💡 核心原理解析：三大埋点流派**
 
-- **没有埋点**：你只能看到门口人来人往，但不知道他们看了什么、买了什么。
-- **有埋点**：你能知道每个顾客进店后走了哪条路线、拿起过哪些商品、在哪个货架停留最久、最后买了什么。
+目前业界在经历了不断的摩擦和演进后，确定了三种最主流的探头安放方式：
 
-这个"监控系统"就是**埋点系统**。
+- **代码埋点 (Code Tracking)：最精准的狙击枪**
+  程序员深入到最核心的业务代码内部，当用户真正点击"购买"按下确定的那一刹那，手动写下一行拦截代码。
+  *优势*：它可以顺藤摸瓜，把你兜里的余额、优惠券编号一并死死抓走发给服务器。这是所有核心业务（如支付、注册）的唯一依靠。
+  *代价*：每加一个埋点都要等下一次 App 发版，极其缓慢笨重。
+- **可视化埋点 (Visual Tracking)：产品经理的魔法棒**
+  通过在手机屏幕上蒙上一层可视化的透明层，产品经理直接在屏幕上画个框："凡是点这个框的人，都给我记下来。"
+  *优势*：极度快捷，完全不需要程序员写代码，所见即所得。
+  *代价*：它只能抓到"表面点击"，无法获取内存深处的订单号等深度信息。
+- **全埋点 (Auto Tracking)：无死角的超级雷达**
+  直接在 App 里塞入一个"核弹级"的 SDK，它会像吸尘器一样把你点击的长宽高等所有屏幕动作统统暴力记录。
+  *优势*：绝对不会漏掉任何一个角落的行为。
+  *代价*：数据量如同雪花般庞大，无用的噪音极多，极其考验后期的算力和清洗能力。
 
-### 1.2 埋点的分类
+**这一步完成了什么？** 我们成功在用户的手机里埋下了探头，只要用户有动作，探头就会被触发。
 
-按采集位置分类：
-
-| 类型           | 位置             | 数据特点                   | 典型场景                     |
-| :------------- | :--------------- | :------------------------- | :--------------------------- |
-| **前端埋点**   | Web、App、小程序 | 实时、可视化、全量         | 页面浏览、按钮点击、表单提交 |
-| **后端埋点**   | 服务器           | 准确、不可篡改、服务端视角 | API 调用、订单创建、支付成功 |
-| **全链路埋点** | 前端 + 后端      | 端到端追踪、完整链路       | 用户旅程分析、转化漏斗       |
-
-<TrackingTypesDemo />
-
-### 1.3 埋点数据的基本要素
-
-一个完整的埋点事件 (Event) 通常包含：
-
-```javascript
-{
-  // 1. 事件身份
-  "event_id": "click_button",           // 事件名称
-  "timestamp": 1704067200000,            // 时间戳
-
-  // 2. 用户身份
-  "user_id": "user_12345",               // 用户 ID
-  "device_id": "device_67890",           // 设备 ID（匿名用户）
-  "session_id": "session_abc",           // 会话 ID
-
-  // 3. 公共属性 (Common Properties)
-  "platform": "iOS",                     // 平台
-  "app_version": "1.2.3",                // 应用版本
-  "os_version": "iOS 17.0",              // 系统版本
-  "screen_size": "390x844",              // 屏幕尺寸
-  "network": "WiFi",                     // 网络类型
-
-  // 4. 自定义属性 (Custom Properties)
-  "properties": {
-    "button_name": "立即购买",
-    "page": "商品详情页",
-    "product_id": "prod_98765",
-    "price": 299.00
-  }
-}
-```
-
-**关键点**：设计埋点时，**公共属性**要统一、**自定义属性**要灵活。
+**但问题来了**：探头虽然抓到了动作，如果每个探头都按自己的心情随便乱写信息（有的写中文，有的写英文，有的不写时间），服务器拿到后根本无法阅读。下一步，我们需要规定一套极其严格的书写规范。
 
 ---
 
-## 2. 埋点方案对比
+## 第二步：规范笔录格式 (事件与数据模型)
 
-### 2.1 代码埋点 (Code-based Tracking) ⭐ 最常用
+**上一步完成了**：我们已经在客户端选择了合适的探头（如代码埋点），成功拦截到了用户的点击动作。
 
-**原理**：在代码中显式调用埋点 SDK。
+**这一步要实现**：让所有探头都必须使用一种统一结构化的格式，把数据汇报给服务器。
 
-**优点**：
+**目的**：把全世界最复杂的、因人而异的操作，全部降维、拍扁成一张清清爽爽的数据明细表。
 
-- ✅ 灵活可控，可以收集任意数据
-- ✅ 数据准确，时机可控
-- ✅ 可以传递自定义属性
+<DataTrackingDemo tab="model" />
 
-**缺点**：
+**💡 核心原理解析：4W1H 数据模型**
 
-- ❌ 需要开发资源，每次新增都要发版
-- ❌ 维护成本高
+不管你用什么语言开发，这团数据到了服务器门口，就必须回答出极其关键的 `4W1H` 灵魂拷问。你可以把它看作一份给警察局的审讯笔录：
 
-**代码示例**：
+- **Who (是谁 - user_id/device_id)**：这简直是最核心的部分。如果用户没登录，我们就抓他手机底层的 MAC 地址或 UUID（设备指纹）；如果登录了，就死死绑定他的 `user_id`。
+- **When (何时 - timestamp)**：精确到毫秒的时间戳。特别注意，针对跨国业务，必须强制换算成格林威治标准时间 (UTC)，否则你会看到昨天的人穿越到了明天。
+- **Where & How (何地与如何 - 公共属性)**：被统称为**公共属性 (Common Properties)**。它交代了作案环境：不管你在干什么，你的手机型号（iPhone 15）、网络环境（5G）、App 版本号（v1.2.3）都会被系统自动提取，像一个标签一样死死贴在这条数据上。
+- **What (业务详情 - 自定义属性)**：被统称为**自定义属性 (Custom Properties)**。如果你的动作是 `add_to_cart` (加入购物车)，那我们就必须自定义几个专属的细作：比如商品型号是 iPhone，价格是 7999 元。
 
-```javascript
-// 点击"购买"按钮
-function onBuyButtonClick() {
-  // 业务逻辑
-  addToCart(product)
+**这一步完成了什么？** 这是一场混乱向秩序的妥协，我们终于拿到了一份极致规范、机器可读的 JSON 代码（就像你在上面组件模型中看到的那样）。
 
-  // 埋点
-  track('click_buy_button', {
-    product_id: product.id,
-    product_name: product.name,
-    price: product.price,
-    page: 'product_detail'
-  })
-}
-```
-
-### 2.2 可视化埋点 (Visual Tracking)
-
-**原理**：通过可视化工具圈选元素，自动生成埋点代码。
-
-**优点**：
-
-- ✅ 无需编码，产品经理可操作
-- ✅ 快速验证埋点方案
-
-**缺点**：
-
-- ❌ 只能采集标准事件（点击、浏览）
-- ❌ 自定义属性能力弱
-- ❌ 页面改版后埋点易失效
-
-**典型工具**：GrowingIO、神策数据、Google Tag Manager
-
-### 2.3 无埋点 / 全埋点 (Auto-tracking)
-
-**原理**：SDK 自动采集所有用户行为，无需手动添加代码。
-
-**优点**：
-
-- ✅ 零开发成本
-- ✅ 一次性采集，回溯分析
-
-**缺点**：
-
-- ❌ 数据量大，噪声多
-- ❌ 无法自定义属性
-- ❌ 隐私合规风险
-
-**典型场景**：
-
-- 页面浏览 (Page View)
-- 元素点击 (Element Click)
-- 表单提交 (Form Submit)
-
-<TrackingMethodsComparisonDemo />
-
-### 2.4 三种方案对比总结
-
-| 方案           | 灵活性     | 开发成本 | 维护成本 | 数据质量   | 适用场景               |
-| :------------- | :--------- | :------- | :------- | :--------- | :--------------------- |
-| **代码埋点**   | ⭐⭐⭐⭐⭐ | 高       | 高       | ⭐⭐⭐⭐⭐ | 核心业务指标、复杂分析 |
-| **可视化埋点** | ⭐⭐⭐     | 低       | 中       | ⭐⭐⭐     | 快速验证、运营活动     |
-| **全埋点**     | ⭐         | 低       | 低       | ⭐⭐       | 探索性分析、行为回溯   |
-
-**最佳实践**：
-
-- **核心业务指标**（支付、注册）：用代码埋点
-- **运营活动埋点**：用可视化埋点
-- **页面浏览等基础数据**：用全埋点
+**但问题来了**：一份标准的 JSON 准备好了。但如果是双十一，一秒钟有一万个人点击了加入购物车。如果我们让手机直接一秒钟发一万次请求给远方的数据库，数据库瞬间就会被这股洪水打穿融化，手机电量也会瞬间耗尽。下一步，我们要解决运输问题。
 
 ---
 
-## 3. 数据采集方案
+## 第三步：装车与寄送包裏 (本地缓存与管道传输)
 
-### 3.1 客户端埋点
+**上一步完成了**：我们将用户行为封装成了标准的、带有时间戳和属性的格式化数据块。
 
-**流程**：App/Web → 埋点 SDK → 本地缓存 → 批量上报 → 服务器
+**这一步要实现**：确保数据在极端的弱网、高并发等恶劣环境下，能够安全、不翻车地送达公司的服务器。
 
-**优点**：
+**目的**：通过缓存和攒批机制，保护用户的手机电量，同时拯救公司脆弱的数据库。
 
-- 实时性好（用户在线时立即上报）
-- 可以采集设备信息、网络状态
-- 离线数据缓存，联网后补传
+<DataTrackingDemo tab="pipeline" />
 
-**缺点**：
+**💡 核心原理解析：漫长而致命的数据长征**
 
-- 数据可能被篡改
-- 耗电、流量消耗
-- App 崩溃可能丢失数据
+数据绝不是“点一下按钮，就嗖地一声飞进数据库”的。在它真正被数据分析师查到之前，它在黑暗的管道中经历了一场你无法想象的跋涉：
 
-**代码示例**：
+1. **装车攒批 (Batching)**：SDK 本质上是个老司机，它绝不会拿到一个包裹就发车。它会把用户的点击行为死死扣留在手机内存里。直到积攒了 30 条数据，或者熬过了 5 秒钟的倒计时，它才会把它们压缩成一个大包裹一次性掷出。这样不仅省流量，更是省下了几十倍的 HTTP 网络握手开销。
+2. **断网地堡 (本地存储)**：如果你刚好走进电梯或者高铁进入隧道，网络断了怎么办？这口数据如果在内存里，App 一关就灰飞烟灭了。所以埋点 SDK 在发车前，必须把数据悄悄写进手机的 SQLite 或者 IndexedDB 硬盘缓存中。即使手机没电关机了，一个月后你重新连上 WiFi，它也会像诈尸一般疯狂补发。
+3. **削峰填谷 (消息队列)**：当大包裹终于跨越太平洋抵达公司网关时，服务器仍旧不敢直接把它写进硬盘。所有的包裹都会被全数接入卡夫卡（Kafka）等**消息队列**的汪洋大海中。无论流量多么残暴，消息队列都会温柔地将其吸收，然后像涓涓细流一样，慢慢排队喂给后端的数据库。
 
-```javascript
-// 前端埋点 SDK 初始化
-import { Tracker } from '@analytics/sdk'
+**这一步完成了什么？** 历经千难万险，无数个封装好的 JSON 包裹，终于安全平稳地度过了网络高峰，抵达了后端机房。
 
-const tracker = new Tracker({
-  serverUrl: 'https://analytics.example.com/collect',
-  batchSize: 10, // 批量上报：每 10 个事件上报一次
-  flushInterval: 5000, // 定时上报：每 5 秒上报一次
-  maxCacheSize: 100 // 本地缓存：最多存 100 个事件
-})
-
-// 采集事件
-tracker.track('page_view', {
-  page_title: document.title,
-  page_url: window.location.href
-})
-```
-
-### 3.2 服务端埋点
-
-**流程**：业务逻辑 → 埋点代码 → 异步队列 → 数据仓库
-
-**优点**：
-
-- 数据准确、不可篡改
-- 可以采集服务端特有数据（数据库查询、API 调用）
-- 不依赖客户端网络状态
-
-**缺点**：
-
-- 无法采集客户端信息（设备型号、网络类型）
-- 需要业务代码侵入
-
-**代码示例**：
-
-```python
-# 后端埋点：订单创建
-from celery import Celery
-
-# 异步任务队列
-analytics_queue = Celery('analytics', broker='redis://localhost:6379')
-
-@analytics_queue.task
-def track_order_created(order_id, user_id, amount):
-    """异步上报埋点数据，不阻塞主业务"""
-    event = {
-        'event': 'order_created',
-        'user_id': user_id,
-        'properties': {
-            'order_id': order_id,
-            'amount': amount,
-            'timestamp': datetime.now().isoformat()
-        }
-    }
-    # 发送到埋点服务器
-    requests.post('https://analytics.example.com/collect', json=event)
-
-# 业务代码
-def create_order(user, cart):
-    order = Order.objects.create(user=user, total=cart.total)
-
-    # 触发埋点（异步，不阻塞）
-    track_order_created.delay(order.id, user.id, order.total)
-
-    return order
-```
-
-### 3.3 CDN 日志采集
-
-**原理**：通过 CDN 访问日志分析用户行为。
-
-**优点**：
-
-- 零代码侵入
-- 覆盖所有用户（包括失败请求）
-- 成本低（CDN 日志本身就有）
-
-**缺点**：
-
-- 数据维度有限（只有 URL、User-Agent 等）
-- 无法获取业务数据
-
-**典型场景**：
-
-- 页面 PV/UV 统计
-- 资源加载性能分析
-- 错误监控
-
-### 3.4 第三方统计
-
-**典型工具**：
-
-- **Google Analytics**：免费、功能强大
-- **Mixpanel**：事件分析专业
-- **神策数据**：国内领先
-- **GrowingIO**：增长分析
-
-**选择建议**：
-
-- 小团队、预算有限：Google Analytics
-- 中大型团队、需要私有化部署：神策数据
-- 增长黑客、产品优化：Mixpanel / GrowingIO
-
-<DataCollectionDemo />
+**但问题来了**：包裹虽然到了，但在客户端疯狂的断点续传甚至重试机制下，我们极大概率会收到两份完全一样的双胞胎数据。直接存起来，财务看到报表会当场崩溃（销售额翻倍的假象）。下一步，必须进行海关重重清洗。
 
 ---
 
-## 4. 数据模型设计
+## 第四步：海关质检与入库 (ETL 清洗)
 
-### 4.1 事件模型 (Event Model)
+**上一步完成了**：数据安全度过了网络拥堵，平稳地来到了后端服务器的内存里。
 
-**核心原则**：一个事件 = 一个动作（动词 + 名词）
+**这一步要实现**：剔除水分和杂质，把原本泥沙俱下的原石，提炼成绝对纯净的数据金条。
 
-**命名规范**：
+**目的**：确保入库的数据无重复、无错漏，供分析师直接查询使用。
 
-| 好的事件名     | ❌ 坏的事件名  | 原因               |
-| :------------- | :------------- | :----------------- |
-| `click_button` | `button_click` | 动词在前，语义清晰 |
-| `view_page`    | `page_view`    | 同上               |
-| `add_to_cart`  | `cart_add`     | 同上               |
-| `submit_form`  | `form_submit`  | 同上               |
+<DataTrackingDemo tab="overview" />
 
-**事件属性设计**：
+**💡 核心原理解析：ETL (提取、转换、加载) 提纯车间**
 
-```javascript
-// ✅ 好的设计：属性清晰、维度丰富
-{
-  event: "add_to_cart",
-  properties: {
-    product_id: "12345",          // 必填：商品 ID
-    product_name: "iPhone 15",    // 必填：商品名称
-    category: "电子产品",          // 必填：商品类目
-    price: 7999.00,               // 必填：价格
-    quantity: 1,                  // 必填：数量
-    source: "recommendation",     // 可选：来源（推荐/搜索/浏览）
-    position: 3                   // 可选：在列表中的位置
-  }
-}
+数据在最终落入冰冷的 ClickHouse 或 Hive 这样的庞大**数据仓库 (Data Warehouse)** 之前，需要经历最后一道关卡——数据清洗室。
 
-// ❌ 坏的设计：属性冗余、维度不足
-{
-  event: "add_to_cart",
-  properties: {
-    product: "iPhone 15",         // ❌ 应该拆分为 id + name
-    info: "电子产品|7999"         // ❌ 不应该把多个字段拼在一起
-  }
-}
-```
+- **无情的去重杀手 (De-duplication)**：
+  因为手机网络很差，可能第一次发出了包裹，但没收到服务器的回复，手机以为没发成功，就又发了一遍。服务器怎么辨别？
+  答案是在第一步打包时，手机就给每一条数据生成了一个极其唯一的 `dedup_id` (比如全球唯一的 UUID)。服务器清洗站有一个滤网，看到同样的 ID，直接把第二条丢进垃圾桶，保证数据绝对唯一。
+- **修剪畸形儿 (Validation & Transformation)**：
+  早期版本 App 发来的数据可能是 `userId`，而最新版叫 `user_id`。如果带着这种混乱入库会导致灾难。此时在这里必须写脚本强制把它们全部对齐。发现有的时间戳是未来时间？抛弃！发现有的国家代码写了外星文字？直接打上 `unknown`。
 
-### 4.2 用户模型 (User Model)
-
-**核心原则**：一个用户 = 唯一身份 + 多个设备
-
-**身份识别**：
-
-| ID 类型        | 来源             | 稳定性 | 用途                   |
-| :------------- | :--------------- | :----- | :--------------------- |
-| **user_id**    | 注册后由后端分配 | 极高   | 跨设备关联、长期分析   |
-| **device_id**  | 设备指纹（UUID） | 高     | 匿名用户分析、设备去重 |
-| **cookie_id**  | 浏览器 Cookie    | 中     | 短期追踪（用户可清除） |
-| **session_id** | 当前会话         | 低     | 单次会话分析           |
-
-**ID Mapping（身份打通）**：
-
-```python
-# 用户注册前
-event1 = {
-    "device_id": "device_123",
-    "user_id": null,           # 匿名用户
-    "event": "view_product"
-}
-
-# 用户注册后
-event2 = {
-    "device_id": "device_123", # 同一台设备
-    "user_id": "user_456",     # 已注册
-    "event": "purchase"
-}
-
-# 数据分析时，可以通过 device_id 将两个事件关联
-# → 用户在注册前浏览了商品，注册后购买了
-```
-
-### 4.3 会话模型 (Session Model)
-
-**什么是会话 (Session)**？
-
-会话 = 用户一次连续的使用过程。
-
-**会话划分规则**：
-
-| 平台    | 会话定义                 | 超时时间 |
-| :------ | :----------------------- | :------- |
-| **Web** | 连续浏览，无操作超过阈值 | 30 分钟  |
-| **App** | App 从后台回到前台       | 5 分钟   |
-
-**会话的作用**：
-
-- 计算转化率（注册转化、购买转化）
-- 分析用户粘性（会话时长、会话深度）
-- 漏斗分析（注册漏斗、购买漏斗）
-
-### 4.4 公共属性与自定义属性
-
-**公共属性 (Common Properties)**：
-
-所有事件都自动携带的属性，由 SDK 自动采集。
-
-```javascript
-const commonProperties = {
-  // 设备信息
-  platform: 'iOS', // 平台：iOS / Android / Web
-  device_id: 'device_123', // 设备 ID
-  app_version: '1.2.3', // App 版本
-
-  // 环境信息
-  network: 'WiFi', // 网络类型：WiFi / 4G / 5G
-  screen_size: '390x844', // 屏幕尺寸
-  os_version: 'iOS 17.0', // 系统版本
-
-  // 用户信息
-  user_id: 'user_456', // 用户 ID（登录后）
-  is_login: true, // 是否登录
-
-  // 时间信息
-  timestamp: 1704067200000, // 事件时间戳
-  timezone: '+08:00' // 时区
-}
-```
-
-**自定义属性 (Custom Properties)**：
-
-针对具体事件的业务属性。
-
-```javascript
-// 商品详情页浏览事件
-track('view_product', {
-  product_id: '12345', // 商品 ID
-  product_name: 'iPhone 15', // 商品名称
-  category: '电子产品', // 商品类目
-  price: 7999.0, // 商品价格
-  source: 'search' // 来源：搜索 / 推荐 / 浏览
-})
-```
-
-**关键点**：
-
-- **公共属性**要少而精，避免数据冗余
-- **自定义属性**要丰富，满足分析需求
-
-<DataModelDesignDemo />
+**这一步完成了什么？** 沙子被洗成了真金。这些被抚平了所有褶皱、格式统一、完美无缝的数据，终于静静地躺在了数据仓库里。只需分析师一句 `SELECT * FROM events` 的 SQL 召唤，它们就会在 0.1 秒内呈现出人类群体最深的奥秘。
 
 ---
 
-## 5. 数据处理流程
+## 完整流程回顾
 
-### 5.1 完整的数据管道 (Data Pipeline)
+让我们把整个万里长征串联起来看一看：
 
-```
-┌─────────────┐
-│  用户行为   │  (点击、浏览、购买)
-└──────┬──────┘
-       ↓
-┌─────────────────────────────────────────┐
-│  1. 数据采集 (Collection)               │
-│  - 前端埋点 SDK                         │
-│  - 后端埋点代码                         │
-│  - CDN 日志                             │
-└──────┬──────────────────────────────────┘
-       ↓
-┌─────────────────────────────────────────┐
-│  2. 数据传输 (Transmission)             │
-│  - HTTP/HTTPS 上报                      │
-│  - 批量上报（减少请求）                  │
-│  - 断点续传（失败重试）                  │
-└──────┬──────────────────────────────────┘
-       ↓
-┌─────────────────────────────────────────┐
-│  3. 数据清洗 (Cleaning)                 │
-│  - 去重（重复数据）                      │
-│  - 校验（格式错误）                      │
-│  - 补全（缺失字段）                      │
-└──────┬──────────────────────────────────┘
-       ↓
-┌─────────────────────────────────────────┐
-│  4. 数据存储 (Storage)                  │
-│  - 数据仓库：ClickHouse / Snowflake     │
-│  - 实时分析：Redis / Elasticsearch      │
-│  - 离线分析：Hive / Spark               │
-└──────┬──────────────────────────────────┘
-       ↓
-┌─────────────────────────────────────────┐
-│  5. 数据分析 (Analysis)                 │
-│  - BI 工具：Tableau / PowerBI           │
-│  - 自助查询：SQL / Python               │
-│  - 可视化报表：Grafana / Metabase       │
-└─────────────────────────────────────────┘
-```
-
-### 5.2 数据采集最佳实践
-
-**批量上报**：
-
-```javascript
-// ❌ 坏的做法：每次点击立即上报
-track('click_button') // 1 个 HTTP 请求
-track('scroll_page') // 1 个 HTTP 请求
-track('view_image') // 1 个 HTTP 请求
-// → 3 个请求，浪费资源
-
-// ✅ 好的做法：批量上报
-tracker.track('click_button')
-tracker.track('scroll_page')
-tracker.track('view_image')
-// SDK 自动打包成 1 个请求上报
-// → 1 个请求，节省资源
-```
-
-**断点续传**：
-
-```javascript
-// SDK 本地缓存 + 失败重试
-const tracker = new Tracker({
-  serverUrl: 'https://analytics.example.com/collect',
-  batchSize: 10,
-  flushInterval: 5000,
-
-  // 本地缓存（IndexedDB / LocalStorage）
-  storage: new IndexedDBStorage(),
-
-  // 失败重试策略
-  retryTimes: 3, // 失败后重试 3 次
-  retryDelay: 2000, // 每次重试间隔 2 秒
-
-  // 离线支持
-  offline: true // 离线时缓存，联网后补传
-})
-```
-
-### 5.3 数据清洗常见问题
-
-**问题 1：数据重复**
-
-原因：网络超时导致客户端重发。
-
-解决方案：
-
-```sql
--- 使用事件去重键（dedup_id）
-CREATE TABLE events (
-  event_id STRING,
-  dedup_id STRING UNIQUE,  -- 客户端生成的唯一 ID
-  timestamp TIMESTAMP,
-  properties JSON
-)
-
--- 插入时去重
-INSERT INTO events (event_id, dedup_id, timestamp, properties)
-VALUES ('click_button', 'uuid_123', NOW(), '{"page": "home"}')
-ON CONFLICT (dedup_id) DO NOTHING;
-```
-
-**问题 2：时间戳错误**
-
-原因：客户端时间不准。
-
-解决方案：
-
-```javascript
-// SDK 使用服务器时间校准
-const serverTime = await fetchServerTime()
-const clientTime = Date.now()
-const timeDiff = serverTime - clientTime
-
-// 后续事件使用校准后的时间
-track('click_button', {
-  timestamp: Date.now() + timeDiff
-})
-```
-
-**问题 3：格式不统一**
-
-原因：不同客户端、不同版本的数据格式不一致。
-
-解决方案：
-
-```python
-# 数据清洗脚本（ETL）
-def clean_event(raw_event):
-    # 统一字段名
-    if 'userId' in raw_event:
-        raw_event['user_id'] = raw_event.pop('userId')
-
-    # 统一时间格式
-    if isinstance(raw_event['timestamp'], str):
-        raw_event['timestamp'] = parse_iso_8601(raw_event['timestamp'])
-
-    # 补全缺失字段
-    if 'platform' not in raw_event:
-        raw_event['platform'] = 'unknown'
-
-    return raw_event
-```
-
-<DataPipelineDemo />
+| 步骤 | 行动 | 完成了什么 | 下一步我们需要解决 |
+|------|-----------|---------------|----------------|
+| **1. 采集方案选择** | 决定用代码还是全埋点 | 在客户端深处安插了吸取操作的探头 | 探头抓到的数据像乱码一样，需要规范 |
+| **2. 事件与数据模型** | 建立 4W1H 模板 | 将乱码收敛为格式完美的极简 JSON | 手机网络极端脆弱，没法立刻发这么标准的数据 |
+| **3. 数据管道与缓存** | 缓冲攒批，重试补传 | 保证数据扛住了电梯断网和双十一洪峰 | 安全抵达但可能存在重复发包的脏数据 |
+| **4. ETL 清洗入库** | 去除重复、修复乱码 | ✅ 落入数据仓库，变成 BI 报表上的增长金条 | （完美结束，开始分析数据反哺商业） |
 
 ---
 
-## 6. 常见问题与解决方案
+## 结语：不可见的地下长城
 
-### 6.1 数据丢失
+当我们点一下外卖的付款界面的那 1 毫秒内，我们几乎感觉不到任何的波动甚至是迟滞。
 
-**原因**：
+但此时此刻，这段包含了你买的黄焖鸡、花了 20 元、用着一台 iPhone 的微小包裹，正在你的手机后台默默组装。它也许潜伏在内存里等了 3 秒钟，随后化作一段无线电波飞向基站，在光纤中跨越几百个路由器，抵达了网关机房，随后被吸入消息队列排队、被清洗掉一切污垢，最终永久固化在一块闪烁着冷光的磁盘扇区深处。
 
-- App 崩溃
-- 网络断开
-- 用户关闭浏览器
-
-**解决方案**：
-
-| 方案           | 原理                    | 效果          | 成本 |
-| :------------- | :---------------------- | :------------ | :--- |
-| **本地缓存**   | 本地存储 + 联网后补传   | 减少 90% 丢失 | 低   |
-| **断点续传**   | 失败自动重试            | 减少 95% 丢失 | 中   |
-| **多通道上报** | HTTP + WebSocket 双通道 | 减少 99% 丢失 | 高   |
-
-**代码示例**：
-
-```javascript
-// 本地缓存 + 失败重试
-class ReliableTracker {
-  constructor() {
-    this.cache = new IndexedDBStorage('events_cache')
-    this.queue = []
-  }
-
-  async track(event) {
-    // 1. 先存本地缓存
-    await this.cache.add(event)
-
-    // 2. 尝试上报
-    this.flush()
-  }
-
-  async flush() {
-    const events = await this.cache.getAll()
-
-    try {
-      await fetch('/api/collect', {
-        method: 'POST',
-        body: JSON.stringify(events)
-      })
-
-      // 成功后删除缓存
-      await this.cache.clear()
-    } catch (error) {
-      // 失败：下次重试（数据仍在缓存中）
-      console.error('上报失败，下次重试', error)
-    }
-  }
-}
-```
-
-### 6.2 数据重复
-
-**原因**：网络超时导致客户端重复上报。
-
-**解决方案**：
-
-```python
-# 服务端去重（使用 Redis Set）
-def save_event(event):
-    dedup_id = event.get('dedup_id')
-
-    # 检查是否已处理过
-    if redis.sismember('processed_events', dedup_id):
-        return {'status': 'duplicate'}
-
-    # 首次处理
-    process_event(event)
-
-    # 标记已处理（24 小时过期）
-    redis.sadd('processed_events', dedup_id)
-    redis.expire('processed_events', 86400)
-
-    return {'status': 'success'}
-```
-
-### 6.3 时区问题
-
-**问题**：跨国业务时，用户时区不同，导致日期统计错误。
-
-**解决方案**：
-
-```javascript
-// 前端：上报时携带时区
-track('page_view', {
-  timestamp: Date.now(),
-  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone // 'Asia/Shanghai'
-})
-
-// 后端：统一转换为 UTC
-def save_event(event):
-    local_time = event['timestamp']
-    timezone = event['timezone']
-
-    # 转换为 UTC
-    utc_time = convert_to_utc(local_time, timezone)
-
-    # 存储 UTC 时间
-    db.save(utc_time=utc_time, timezone=timezone)
-```
-
-### 6.4 隐私合规
-
-**核心原则**：用户知情、用户同意、用户可控。
-
-**合规要求**：
-
-| 法规     | 适用范围 | 核心要求                         |
-| :------- | :------- | :------------------------------- |
-| **GDPR** | 欧盟     | 用户同意、数据可删除、数据可导出 |
-| **CCPA** | 美国加州 | 用户可拒绝出售数据               |
-| **PIPL** | 中国     | 明确告知、最小必要、用户同意     |
-
-**实践方案**：
-
-```javascript
-// 1. 隐私弹窗获取同意
-if (!hasUserConsent()) {
-  showPrivacyDialog({
-    onAccept: () => {
-      grantTrackingConsent()
-      tracker.start()
-    },
-    onReject: () => {
-      denyTrackingConsent()
-      tracker.stop()
-    }
-  })
-}
-
-// 2. 数据脱敏
-track('user_register', {
-  user_id: hash('user_123'), // 用户 ID 加密
-  phone: mask_phone('138****1234'), // 手机号脱敏
-  email: mask_email('u***@example.com') // 邮箱脱敏
-})
-
-// 3. 提供数据删除接口
-function deleteUserData(userId) {
-  // 响应用户的"被遗忘权"
-  database.delete_all_events(userId)
-  database.delete_user_profile(userId)
-}
-```
-
-<PrivacyComplianceDemo />
-
-### 6.5 性能影响
-
-**问题**：埋点代码影响 App 性能。
-
-**解决方案**：
-
-| 优化点       | 方案                         | 效果                |
-| :----------- | :--------------------------- | :------------------ |
-| **上报时机** | 异步、批量上报               | 减少 80% 主线程阻塞 |
-| **数据压缩** | Gzip 压缩                    | 减少 70% 流量消耗   |
-| **采样上报** | 低价值事件采样（只上报 10%） | 减少 90% 数据量     |
-| **懒加载**   | 非核心 SDK 延迟加载          | 减少 50% 首屏时间   |
-
-**代码示例**：
-
-```javascript
-// 1. 异步批量上报
-tracker.track('click_button', { async: true })
-
-// 2. 采样上报
-if (shouldSample('page_view', 0.1)) {
-  // 10% 采样
-  tracker.track('page_view')
-}
-
-// 3. 数据压缩
-const compressed = pako.gzip(JSON.stringify(events))
-fetch('/api/collect', {
-  method: 'POST',
-  body: compressed,
-  headers: { 'Content-Encoding': 'gzip' }
-})
-```
-
----
-
-## 7. 实战案例
-
-### 7.1 电商系统埋点设计
-
-**业务目标**：分析购买转化漏斗，优化用户体验。
-
-**关键埋点**：
-
-| 埋点             | 时机           | 核心属性                       |
-| :--------------- | :------------- | :----------------------------- |
-| `view_product`   | 商品详情页浏览 | product_id, category, source   |
-| `add_to_cart`    | 加入购物车     | product_id, quantity, price    |
-| `view_cart`      | 查看购物车     | cart_total, item_count         |
-| `begin_checkout` | 开始结算       | cart_total, payment_method     |
-| `purchase`       | 支付成功       | order_id, total_amount, coupon |
-
-**转化漏斗分析**：
-
-```sql
--- 计算转化漏斗
-WITH funnel AS (
-  -- 1. 浏览商品
-  SELECT
-    user_id,
-    COUNT(DISTINCT product_id) as view_count
-  FROM events
-  WHERE event = 'view_product'
-  GROUP BY user_id
-
-  -- 2. 加入购物车
-  SELECT
-    user_id,
-    COUNT(DISTINCT product_id) as cart_count
-  FROM events
-  WHERE event = 'add_to_cart'
-  GROUP BY user_id
-
-  -- 3. 支付成功
-  SELECT
-    user_id,
-    COUNT(DISTINCT order_id) as purchase_count
-  FROM events
-  WHERE event = 'purchase'
-  GROUP BY user_id
-)
-SELECT
-  view_count,
-  cart_count,
-  purchase_count,
-  cart_count / view_count as cart_rate,
-  purchase_count / cart_count as purchase_rate
-FROM funnel
-```
-
-### 7.2 内容推荐埋点设计
-
-**业务目标**：优化推荐算法，提高点击率。
-
-**关键埋点**：
-
-| 埋点                    | 时机         | 核心属性                     |
-| :---------------------- | :----------- | :--------------------------- |
-| `recommend_exposure`    | 推荐内容曝光 | item_id, position, algorithm |
-| `recommend_click`       | 点击推荐内容 | item_id, position, algorithm |
-| `content_view_duration` | 内容观看时长 | item_id, duration            |
-| `content_like`          | 点赞内容     | item_id, is_liked            |
-
-**A/B 测试分析**：
-
-```sql
--- 对比不同推荐算法的点击率
-SELECT
-  properties->>'algorithm' as algorithm,
-  COUNT(*) as exposure_count,
-  SUM(CASE WHEN event = 'recommend_click' THEN 1 ELSE 0 END) as click_count,
-  SUM(CASE WHEN event = 'recommend_click' THEN 1 ELSE 0 END) / COUNT(*) as ctr
-FROM events
-WHERE event IN ('recommend_exposure', 'recommend_click')
-GROUP BY algorithm
-ORDER BY ctr DESC
-```
-
-### 7.3 用户行为分析埋点
-
-**业务目标**：分析用户粘性，识别流失风险。
-
-**关键埋点**：
-
-| 埋点             | 时机         | 核心属性                     |
-| :--------------- | :----------- | :--------------------------- |
-| `app_start`      | App 启动     | source, is_first_launch      |
-| `app_background` | App 进入后台 | session_duration             |
-| `daily_active`   | 每日活跃     | last_active_date             |
-| `feature_usage`  | 功能使用     | feature_name, usage_duration |
-
-**用户分群**：
-
-```sql
--- RFM 模型用户分群
-WITH user_rfm AS (
-  SELECT
-    user_id,
-
-    -- Recency: 最近一次活跃距今天数
-    DATEDIFF('day', MAX(timestamp), CURRENT_DATE) as recency,
-
-    -- Frequency: 最近 30 天活跃天数
-    COUNT(DISTINCT DATE(timestamp)) as frequency,
-
-    -- Monetary: 最近 30 天消费金额
-    SUM(CASE WHEN event = 'purchase' THEN properties->>'total_amount' ELSE 0 END) as monetary
-  FROM events
-  WHERE timestamp >= CURRENT_DATE - INTERVAL '30 days'
-  GROUP BY user_id
-)
-SELECT
-  user_id,
-  CASE
-    WHEN recency <= 7 AND frequency >= 10 THEN '高价值用户'
-    WHEN recency <= 7 AND frequency < 10 THEN '新用户'
-    WHEN recency > 7 AND recency <= 30 THEN '流失风险用户'
-    WHEN recency > 30 THEN '已流失用户'
-  END as user_segment
-FROM user_rfm
-```
-
-<RealWorldCaseDemo />
-
----
-
-## 8. 工具选型
-
-### 8.1 开源方案
-
-| 工具                 | 特点            | 适用场景            | 成本            |
-| :------------------- | :-------------- | :------------------ | :-------------- |
-| **Google Analytics** | 免费、功能强大  | 小型项目、个人网站  | 免费            |
-| **Umami**            | 开源、隐私友好  | 需要私有化部署      | 服务器成本      |
-| **Matomo**           | 开源、GDPR 合规 | 欧洲项目、注重隐私  | 服务器成本      |
-| **PostHog**          | 开源、产品分析  | SaaS 产品、初创公司 | 免费 / $20/月起 |
-
-### 8.2 商业方案
-
-| 工具          | 特点                 | 适用场景           | 价格        |
-| :------------ | :------------------- | :----------------- | :---------- |
-| **神策数据**  | 国内领先、私有化部署 | 中大型企业         | $10,000+/年 |
-| **GrowingIO** | 增长分析、无埋点     | 增长团队、产品优化 | $5,000+/年  |
-| **Mixpanel**  | 事件分析专业         | 产品数据分析       | $25,000+/年 |
-| **Amplitude** | 产品分析、用户分群   | 移动应用分析       | $1,000+/月  |
-
-### 8.3 自建方案
-
-**技术栈**：
-
-```
-数据采集：自建 SDK
-数据传输：Kafka / Kinesis
-数据存储：ClickHouse / Snowflake / BigQuery
-数据分析：SQL / Python / Metabase / Superset
-```
-
-**成本对比**：
-
-| 方案            | 初期成本 | 维护成本 | 灵活性 | 数据安全 |
-| :-------------- | :------- | :------- | :----- | :------- |
-| **第三方 SaaS** | 低       | 低       | 中     | 中       |
-| **开源方案**    | 中       | 中       | 高     | 高       |
-| **完全自建**    | 高       | 高       | 极高   | 极高     |
-
-**选择建议**：
-
-- **0-1 阶段**：使用 Google Analytics / Umami（快速验证）
-- **1-10 阶段**：使用神策 / Mixpanel（专业分析）
-- **10-100 阶段**：自建埋点系统（数据安全、成本控制）
-
-<ToolSelectionDemo />
-
----
-
-## 9. 总结与最佳实践
-
-### 9.1 埋点设计核心原则
-
-| 原则         | 说明                             | 示例                              |
-| :----------- | :------------------------------- | :-------------------------------- |
-| **业务驱动** | 埋点服务于业务目标，不要盲目采集 | 电商核心指标：转化率、客单价      |
-| **最小必要** | 只采集必要数据，减少隐私风险     | 不采集手机号、身份证等敏感信息    |
-| **命名规范** | 统一命名规范，便于理解           | 事件名：动词\_名词 (click_button) |
-| **属性完整** | 公共属性 + 自定义属性            | 公共属性：平台、版本、网络        |
-| **可扩展性** | 预留扩展空间，避免频繁重构       | 支持动态属性、自定义维度          |
-
-### 9.2 埋点实施流程
-
-```
-1. 需求分析
-   └─ 明确业务目标（提升转化率、优化用户体验）
-
-2. 方案设计
-   ├─ 事件设计（命名、属性）
-   ├─ 技术选型（代码埋点 / 可视化埋点 / 全埋点）
-   └─ 数据模型设计（用户、事件、会话）
-
-3. 开发实施
-   ├─ 前端埋点 SDK 集成
-   ├─ 后端埋点代码开发
-   └─ 数据采集管道搭建
-
-4. 测试验证
-   ├─ 埋点数据完整性测试
-   ├─ 数据准确性测试
-   └─ 性能影响测试
-
-5. 上线监控
-   ├─ 数据量监控（日活、事件数）
-   ├─ 数据质量监控（缺失率、重复率）
-   └─ 异常告警（数据丢失、格式错误）
-
-6. 持续优化
-   ├─ 根据分析需求新增埋点
-   ├─ 清理无效埋点
-   └─ 优化数据管道性能
-```
-
-### 9.3 学习路线
-
-**入门**（1-2 天）：
-
-- 理解埋点的价值和基本概念
-- 使用 Google Analytics 实战一次
-- 掌握事件、用户、会话模型
-
-**进阶**（1 周）：
-
-- 设计一个完整的埋点方案
-- 实现前端 + 后端埋点
-- 搭建数据采集管道（Kafka + ClickHouse）
-
-**实战**（2-4 周）：
-
-- 为一个真实产品设计埋点系统
-- 实现转化漏斗分析、用户分群
-- 优化埋点性能、数据质量
-
-**深入**（持续）：
-
-- 学习数据仓库建模（星型模型、雪花模型）
-- 研究 A/B 测试系统设计
-- 探索实时数据分析（Flink、Spark Streaming）
-
-### 9.4 推荐资源
-
-**书籍**：
-
-- 《数据驱动：从数据中掘金》
-- 《增长黑客：如何低成本实现爆发式成长》
-
-**文章**：
-
-- Google Analytics 官方文档
-- 神策数据《数据驱动入门》系列
-
-**工具**：
-
-- Google Analytics（免费、易上手）
-- Umami（开源、隐私友好）
-- ClickHouse（高性能数据仓库）
-
----
-
-## 10. 名词速查表 (Glossary)
-
-| 名词                | 全称                                | 解释                                                       |
-| :------------------ | :---------------------------------- | :--------------------------------------------------------- |
-| **Event Tracking**  | -                                   | **埋点**。在应用程序中添加代码，收集用户行为数据。         |
-| **Event**           | -                                   | **事件**。用户的一次行为（点击、浏览、购买）。             |
-| **User ID**         | -                                   | **用户 ID**。注册后由后端分配的唯一标识，用于跨设备关联。  |
-| **Device ID**       | -                                   | **设备 ID**。设备的唯一标识（如 UUID），用于匿名用户分析。 |
-| **Session ID**      | -                                   | **会话 ID**。用户一次连续使用过程的标识。                  |
-| **Page View**       | PV                                  | **页面浏览**。用户访问页面的次数。                         |
-| **Unique Visitor**  | UV                                  | **独立访客**。访问网站的不同用户数。                       |
-| **Conversion Rate** | CR                                  | **转化率**。完成目标行为的用户占总用户数的比例。           |
-| **Funnel Analysis** | -                                   | **漏斗分析**。分析用户在转化流程各环节的流失情况。         |
-| **Cohort Analysis** | -                                   | **同期群分析**。分析同一时期进入的用户的行为特征。         |
-| **Retention Rate**  | -                                   | **留存率**。用户在一段时间后继续使用的比例。               |
-| **Churn Rate**      | -                                   | **流失率**。用户停止使用的比例。                           |
-| **ARPU**            | Average Revenue Per User            | **每用户平均收入**。总收入 / 用户数。                      |
-| **LTV**             | Lifetime Value                      | **用户生命周期价值**。用户在整个使用期间带来的总收入。     |
-| **A/B Testing**     | -                                   | **A/B 测试**。对比两个版本，找出效果更好的方案。           |
-| **SDK**             | Software Development Kit            | **软件开发工具包**。埋点 SDK 用于采集数据并上报。          |
-| **Data Pipeline**   | -                                   | **数据管道**。数据从采集到分析的完整流程。                 |
-| **ETL**             | Extract, Transform, Load            | **数据抽取、转换、加载**。数据清洗的标准流程。             |
-| **GDPR**            | General Data Protection Regulation  | **欧盟数据保护法规**。要求数据采集需用户同意。             |
-| **PIPL**            | Personal Information Protection Law | **中国个人信息保护法**。规范个人信息处理活动。             |
+正是这种从“采集 -> 建模 -> 传输 -> 清洗”长达千万里的坚固体系，用一根根最枯燥的数据流水线，反向拼凑出了商业世界上极度生动、甚至比你自己还要了解你自己的用户画像图腾。这，就是代码之外最伟大的工程之一。
diff --git a/docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md b/docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md
index 9528cc3..2c04107 100644
--- a/docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md
+++ b/docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md
@@ -1,3 +1,258 @@
-# Transformer 与注意力机制
+---
+title: 'Transformer 与注意力机制：大模型的核心引擎'
+description: '深入理解 Transformer 架构和注意力机制，揭秘 GPT、BERT 等大模型的技术基石。'
+---
 
-> 待实现
+# Transformer 与注意力机制：大模型的核心引擎
+
+2017 年，Google 在论文《Attention Is All You Need》中提出的 Transformer 架构，彻底改变了自然语言处理的游戏规则。它抛弃了传统的循环神经网络（RNN），仅依靠注意力机制就实现了更强的性能和更高的训练效率。今天，几乎所有的大语言模型——GPT、BERT、T5、LLaMA——都建立在 Transformer 的基础之上。
+
+<TransformerQuickStartDemo />
+
+---
+
+## 一、RNN 的困境与 Transformer 的突破
+
+在 Transformer 出现之前，处理序列数据（如文本、语音）的主流方法是循环神经网络（RNN）及其变体 LSTM、GRU。这些模型通过循环结构，逐个处理序列中的元素，并维护一个隐藏状态来记忆历史信息。
+
+### 1.1 RNN 的三大致命缺陷
+
+**顺序依赖，无法并行**：RNN 必须等待前一个时间步的计算完成，才能处理下一个词。这导致训练速度极慢，无法充分利用现代 GPU 的并行计算能力。
+
+**长距离依赖衰减**：即使是改进的 LSTM，在处理长文本时，早期信息也会逐渐被"遗忘"。比如在一篇 500 字的文章中，模型很难记住开头提到的关键信息。
+
+**梯度消失/爆炸**：在反向传播时，梯度需要沿着时间步逐层传递，容易出现梯度消失或爆炸，导致训练不稳定。
+
+### 1.2 Transformer 的革命性突破
+
+Transformer 通过**自注意力机制（Self-Attention）**，让模型能够"一眼看全"整个序列，直接计算任意两个位置之间的关系，无需逐步传递信息。
+
+<RnnVsTransformerDemo />
+
+::: tip Transformer 的核心优势
+- **并行计算**：所有位置的注意力可以同时计算，训练速度提升数十倍
+- **全局视野**：直接捕获长距离依赖，不受序列长度限制
+- **可扩展性**：架构简洁统一，易于堆叠更深的网络
+:::
+
+---
+
+## 二、Transformer 完整架构：从整体到细节
+
+Transformer 的完整架构由**编码器（Encoder）**和**解码器（Decoder）**两部分组成，分别负责理解输入和生成输出。
+
+<TransformerArchitectureDemo />
+
+### 2.1 编码器（Encoder）
+
+以句子"银行账户里的余额不足"为例。当模型处理"余额"这个词时，它会自动计算与其他词的相关性：
+
+- "余额"与"账户"高度相关（0.35）
+- "余额"与"银行"中度相关（0.20）
+- "余额"与"的"、"里"等虚词相关性低（0.05-0.10）
+
+这种相关性不是人工规定的，而是模型通过大量数据自动学习出来的。
+
+<SelfAttentionDemo />
+
+### 2.2 注意力的计算过程
+
+自注意力机制通过三个关键步骤实现：
+
+1. **生成 Q、K、V 向量**：每个词通过三个不同的线性变换，生成 Query（查询）、Key（键）、Value（值）三个向量
+2. **计算注意力权重**：用 Query 与所有 Key 做点积，得到相似度分数
+3. **加权求和**：用注意力权重对 Value 向量加权求和，得到最终输出
+
+---
+
+## 三、Query、Key、Value：注意力的三剑客
+
+Transformer 的注意力机制借鉴了信息检索的思想，将每个词映射到三个不同的向量空间。
+
+### 3.1 三个向量的角色
+
+**Query（查询）**：代表"我想找什么"。当前词的查询意图，用于与其他词的 Key 匹配。
+
+**Key（键）**：代表"我是什么"。每个词的特征标识，用于被 Query 检索。
+
+**Value（值）**：代表"我的内容是什么"。实际要传递的信息，根据注意力权重被加权求和。
+
+这种设计的巧妙之处在于：**相似度计算（Q·K）和信息传递（V）是解耦的**。模型可以学习到"哪些词应该关注"和"关注后应该提取什么信息"是两个独立的问题。
+
+<QKVMechanismDemo />
+
+### 3.2 注意力计算公式
+
+完整的注意力计算公式为：
+
+```
+Attention(Q, K, V) = softmax(QK^T / √d_k) V
+```
+
+其中：
+- `QK^T`：计算 Query 和 Key 的点积，得到相似度矩阵
+- `√d_k`：缩放因子，防止点积值过大导致 softmax 梯度消失
+- `softmax`：将相似度转换为概率分布（注意力权重）
+- 最后与 `V` 相乘：用注意力权重对 Value 加权求和
+
+---
+
+## 四、多头注意力：从多个角度理解语义
+
+单个注意力头只能捕获一种类型的依赖关系。为了让模型从多个角度理解句子，Transformer 引入了**多头注意力（Multi-Head Attention）**。
+
+### 4.1 多头的工作机制
+
+多头注意力将输入投影到多个不同的子空间，每个"头"独立计算注意力，最后将所有头的输出拼接起来。
+
+典型的 Transformer 使用 8 个或 16 个注意力头，每个头可能专注于不同的语言现象：
+
+- **语法头**：识别主谓宾、定状补等语法关系
+- **语义头**：捕获词义相关性（如"银行"与"账户"）
+- **位置头**：关注相邻词的局部依赖
+- **指代头**：解析代词指向（如"他"指向"小明"）
+- **情感头**：识别褒贬色彩和情绪倾向
+- **实体头**：识别人名、地名等命名实体
+
+<MultiHeadAttentionDemo />
+
+### 4.2 多头的优势
+
+**表达能力更强**：不同的头可以捕获不同类型的依赖关系，避免单一视角的局限。
+
+**并行计算**：多个头可以同时计算，不增加计算时间。
+
+**鲁棒性更好**：即使某些头学习失败，其他头仍能提供有效信息。
+
+::: tip 多头注意力的数学表达
+```
+MultiHead(Q, K, V) = Concat(head_1, ..., head_h) W^O
+其中 head_i = Attention(QW_i^Q, KW_i^K, VW_i^V)
+```
+每个头有独立的权重矩阵 W^Q、W^K、W^V，最后通过 W^O 融合所有头的输出。
+:::
+
+---
+
+## 五、Transformer 完整架构：编码器与解码器
+
+Transformer 的完整架构由**编码器（Encoder）**和**解码器（Decoder）**两部分组成，分别负责理解输入和生成输出。
+
+### 5.1 编码器（Encoder）
+
+编码器由多层（通常 6-12 层）相同的结构堆叠而成，每层包含两个子层：
+
+1. **多头自注意力层**：捕获输入序列内部的依赖关系
+2. **前馈神经网络（Feed Forward）**：对每个位置独立进行非线性变换
+
+每个子层后面都有**残差连接（Residual Connection）**和**层归一化（Layer Normalization）**，确保深层网络的训练稳定性。
+
+### 5.2 解码器（Decoder）
+
+解码器也由多层堆叠，但每层有三个子层：
+
+1. **掩码多头自注意力（Masked Multi-Head Attention）**：只能看到当前位置之前的词，防止"作弊"
+2. **交叉注意力（Cross-Attention）**：连接编码器和解码器，让解码器关注输入序列
+3. **前馈神经网络**：与编码器相同
+
+<TransformerArchitectureDemo />
+
+### 5.3 现代变体：仅编码器 vs 仅解码器
+
+虽然原始 Transformer 包含编码器和解码器，但现代大模型通常只使用其中一种：
+
+| 架构类型 | 代表模型 | 适用任务 |
+| --- | --- | --- |
+| **仅编码器** | BERT、RoBERTa | 文本分类、命名实体识别、问答 |
+| **仅解码器** | GPT、LLaMA、Claude | 文本生成、对话、代码补全 |
+| **编码器-解码器** | T5、BART | 翻译、摘要、文本改写 |
+
+::: tip GPT 为什么只用解码器？
+GPT 系列模型采用**自回归生成**方式，逐个预测下一个词。仅解码器架构天然适合这种生成任务，且结构更简洁，易于扩展到千亿参数规模。
+:::
+
+---
+
+## 六、位置编码：告诉模型词的顺序
+
+Transformer 的自注意力机制本身是**位置无关**的——它把句子看作一个词的集合，而不关心词的顺序。但词序对语义至关重要："我爱你"和"你爱我"意思完全不同！
+
+### 6.1 位置编码的必要性
+
+为了让模型感知位置信息，Transformer 在输入嵌入中加入**位置编码（Positional Encoding）**。位置编码是一个与词嵌入维度相同的向量，直接加到词嵌入上。
+
+<PositionalEncodingDemo />
+
+### 6.2 正弦余弦位置编码
+
+原始 Transformer 使用固定的正弦余弦函数生成位置编码：
+
+```
+PE(pos, 2i) = sin(pos / 10000^(2i/d))
+PE(pos, 2i+1) = cos(pos / 10000^(2i/d))
+```
+
+这种设计的优点：
+- **唯一性**：每个位置有唯一的编码
+- **相对位置**：模型可以学习到相对距离关系
+- **外推性**：可以处理比训练时更长的序列
+
+### 6.3 现代位置编码方案
+
+随着研究深入，出现了更多位置编码方案：
+
+**可学习位置编码**：BERT、GPT 将位置编码作为可训练参数，而非固定函数。
+
+**相对位置编码**：T5、DeBERTa 不编码绝对位置，而是编码词之间的相对距离。
+
+**旋转位置编码（RoPE）**：LLaMA、GPT-NeoX 使用的方案，通过旋转 Q 和 K 向量注入位置信息，外推性能更好。
+
+**ALiBi**：通过在注意力分数上加偏置项实现位置感知，无需额外参数。
+
+---
+
+## 七、Transformer 的影响与未来
+
+Transformer 的出现，不仅仅是一个新架构的诞生，更是整个 AI 研究范式的转变。
+
+### 7.1 统一的预训练范式
+
+Transformer 让"预训练 + 微调"成为 NLP 的标准流程。通过在海量无标注文本上预训练，模型学会了语言的通用表示，然后只需少量标注数据就能适应各种下游任务。
+
+### 7.2 跨模态的通用架构
+
+Transformer 的成功不局限于文本。它已经被成功应用到：
+
+- **计算机视觉**：Vision Transformer (ViT) 在图像分类上超越 CNN
+- **语音识别**：Whisper 使用 Transformer 实现多语言语音转文字
+- **蛋白质结构预测**：AlphaFold 2 用 Transformer 预测蛋白质 3D 结构
+- **强化学习**：Decision Transformer 将 RL 问题转化为序列建模
+
+### 7.3 大模型时代的基石
+
+从 GPT-3 的 1750 亿参数，到 GPT-4 的万亿参数，Transformer 展现出惊人的可扩展性。它的并行计算特性，让我们能够训练前所未有的巨型模型，并观察到**涌现能力（Emergent Abilities）**——当模型足够大时，自动"悟"出推理、代码、多语言等能力。
+
+### 7.4 未来的挑战与方向
+
+尽管 Transformer 取得了巨大成功，但仍面临挑战：
+
+**计算复杂度**：自注意力的复杂度是 O(n²)，处理长文本时计算量巨大。
+
+**长文本建模**：虽然理论上可以处理任意长度，但实际受限于显存和计算资源。
+
+**可解释性**：注意力权重虽然提供了一定的可解释性，但深层网络的决策过程仍是黑盒。
+
+当前的研究方向包括：
+- **高效 Transformer**：Linformer、Performer、Flash Attention 等降低复杂度
+- **长上下文建模**：Sparse Attention、Sliding Window、Memory 机制
+- **多模态融合**：统一处理文本、图像、音频的原生多模态架构
+
+---
+
+## 八、总结
+
+Transformer 和注意力机制的提出，标志着深度学习从"手工设计特征"到"端到端学习"的彻底转变。它不仅解决了 RNN 的技术瓶颈，更重要的是提供了一个简洁、通用、可扩展的架构，成为大模型时代的基石。
+
+理解 Transformer，就是理解现代 AI 的核心。从 BERT 的双向编码，到 GPT 的自回归生成，再到多模态大模型的统一表示，所有这些突破都建立在 Transformer 的肩膀上。
+
+未来，随着算力的提升和算法的优化，Transformer 还将继续演化，推动 AI 向更强大、更通用的方向发展。
diff --git a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
index 31940fa..57e4158 100644
--- a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
+++ b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
@@ -194,6 +194,15 @@ Cline 是 VS Code（Visual Studio Code）的一款 AI 编程 Agent 插件，可
 ![](images/image14.png)
 :::
 
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro 是 AWS（亚马逊云科技）推出的 AI 编程 IDE，深度集成 Amazon Bedrock 和 AWS 云服务生态。它支持 Claude、Nova 等多种大模型，特别适合需要与 AWS 云服务紧密集成的开发场景。Kiro 提供了智能代码生成、自动化测试、以及与 AWS 资源（如 Lambda、S3、DynamoDB）的无缝对接能力，对于云原生应用开发具有独特优势。
+
+> **备注**：如果你想使用 Anthropic Claude 相关的模型，需要使用 Cursor、Kiro 或 Antigravity 作为 IDE 才行。这些 IDE 与 Anthropic 有官方合作或深度集成，能够提供更稳定、更完整的 Claude 模型体验。
+:::
+
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="1" :items="[