diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 1176f95..ac3f1da 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -338,11 +338,11 @@ export default defineConfig({
           },
           {
             text: '初中级开发',
-            link: '/zh-cn/stage-2/intro'
+            link: '/zh-cn/stage-2/'
           },
           {
             text: '高级开发',
-            link: '/zh-cn/stage-3/intro'
+            link: '/zh-cn/stage-3/'
           },
           { text: '附录', link: '/zh-cn/appendix/index' }
         ],
@@ -754,13 +754,13 @@ export default defineConfig({
           },
           {
             text: 'Full-Stack Development',
-            link: '/en-us/stage-2/intro'
+            link: '/en-us/stage-2/'
           },
           {
             text: 'Advanced Development',
-            link: '/en-us/stage-3/intro'
+            link: '/en-us/stage-3/'
           },
-          { text: 'Appendix', link: '/en-us/appendix/intro' }
+          { text: 'Appendix', link: '/en-us/appendix/' }
         ],
         // TODO: Add English sidebar when content is ready
         sidebar: {}
@@ -794,13 +794,13 @@ export default defineConfig({
           },
           {
             text: 'フルスタック開発',
-            link: '/ja-jp/stage-2/intro'
+            link: '/ja-jp/stage-2/'
           },
           {
             text: '上級開発',
-            link: '/ja-jp/stage-3/intro'
+            link: '/ja-jp/stage-3/'
           },
-          { text: '付録', link: '/ja-jp/appendix/intro' }
+          { text: '付録', link: '/ja-jp/appendix/' }
         ],
         // TODO: Add Japanese sidebar when content is ready
         sidebar: {}
@@ -832,13 +832,13 @@ export default defineConfig({
           },
           {
             text: '初中級開發',
-            link: '/zh-tw/stage-2/intro'
+            link: '/zh-tw/stage-2/'
           },
           {
             text: '高級開發',
-            link: '/zh-tw/stage-3/intro'
+            link: '/zh-tw/stage-3/'
           },
-          { text: '附錄', link: '/zh-tw/appendix/intro' }
+          { text: '附錄', link: '/zh-tw/appendix/' }
         ],
         sidebar: {}
       }
@@ -866,13 +866,13 @@ export default defineConfig({
           { text: '초보자 & PM', link: '/ko-kr/stage-0/' },
           {
             text: '풀스택 개발',
-            link: '/ko-kr/stage-2/intro'
+            link: '/ko-kr/stage-2/'
           },
           {
             text: '고급 개발',
-            link: '/ko-kr/stage-3/intro'
+            link: '/ko-kr/stage-3/'
           },
-          { text: '부록', link: '/ko-kr/appendix/intro' }
+          { text: '부록', link: '/ko-kr/appendix/' }
         ],
         sidebar: {}
       }
@@ -903,13 +903,13 @@ export default defineConfig({
           },
           {
             text: 'Desarrollo Full Stack',
-            link: '/es-es/stage-2/intro'
+            link: '/es-es/stage-2/'
           },
           {
             text: 'Desarrollo Avanzado',
-            link: '/es-es/stage-3/intro'
+            link: '/es-es/stage-3/'
           },
-          { text: 'Apéndice', link: '/es-es/appendix/intro' }
+          { text: 'Apéndice', link: '/es-es/appendix/' }
         ],
         sidebar: {}
       }
@@ -937,13 +937,13 @@ export default defineConfig({
           { text: 'Débutant & PM', link: '/fr-fr/stage-0/' },
           {
             text: 'Développement Full Stack',
-            link: '/fr-fr/stage-2/intro'
+            link: '/fr-fr/stage-2/'
           },
           {
             text: 'Développement Avancé',
-            link: '/fr-fr/stage-3/intro'
+            link: '/fr-fr/stage-3/'
           },
-          { text: 'Annexe', link: '/fr-fr/appendix/intro' }
+          { text: 'Annexe', link: '/fr-fr/appendix/' }
         ],
         sidebar: {}
       }
@@ -971,13 +971,13 @@ export default defineConfig({
           { text: 'Anfänger & PM', link: '/de-de/stage-0/' },
           {
             text: 'Full Stack Entwicklung',
-            link: '/de-de/stage-2/intro'
+            link: '/de-de/stage-2/'
           },
           {
             text: 'Fortgeschrittene Entwicklung',
-            link: '/de-de/stage-3/intro'
+            link: '/de-de/stage-3/'
           },
-          { text: 'Anhang', link: '/de-de/appendix/intro' }
+          { text: 'Anhang', link: '/de-de/appendix/' }
         ],
         sidebar: {}
       }
@@ -1008,13 +1008,13 @@ export default defineConfig({
           },
           {
             text: 'تطوير Full Stack',
-            link: '/ar-sa/stage-2/intro'
+            link: '/ar-sa/stage-2/'
           },
           {
             text: 'تطوير متقدم',
-            link: '/ar-sa/stage-3/intro'
+            link: '/ar-sa/stage-3/'
           },
-          { text: 'ملحق', link: '/ar-sa/appendix/intro' }
+          { text: 'ملحق', link: '/ar-sa/appendix/' }
         ],
         sidebar: {}
       }
@@ -1045,13 +1045,13 @@ export default defineConfig({
           },
           {
             text: 'Phát triển Full Stack',
-            link: '/vi-vn/stage-2/intro'
+            link: '/vi-vn/stage-2/'
           },
           {
             text: 'Phát triển Nâng cao',
-            link: '/vi-vn/stage-3/intro'
+            link: '/vi-vn/stage-3/'
           },
-          { text: 'Phụ lục', link: '/vi-vn/appendix/intro' }
+          { text: 'Phụ lục', link: '/vi-vn/appendix/' }
         ],
         sidebar: {}
       }
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 006483f..0fa5be8 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -270,7 +270,11 @@ watch(lineHeight, (next) => {
     <template #nav-bar-content-after>
       <GitHubStars />
       <ClientOnly>
-        <el-popover placement="bottom-end" trigger="click" :width="260">
+        <el-popover
+          placement="bottom-end"
+          trigger="click"
+          :width="260"
+        >
           <template #reference>
             <button
               class="ev-fontsize-button"
@@ -278,14 +282,20 @@ watch(lineHeight, (next) => {
               aria-label="阅读设置"
               style="margin-left: 16px; padding: 0; width: 32px"
             >
-              <el-icon :size="16"><Setting /></el-icon>
+              <el-icon :size="16">
+                <Setting />
+              </el-icon>
             </button>
           </template>
           <div class="ev-fontsize-panel">
             <div class="ev-setting-group">
               <div class="ev-setting-header">
-                <div class="ev-setting-title">字号</div>
-                <div class="ev-setting-value">{{ fontSize }}px</div>
+                <div class="ev-setting-title">
+                  字号
+                </div>
+                <div class="ev-setting-value">
+                  {{ fontSize }}px
+                </div>
               </div>
               <div class="ev-fontsize-actions">
                 <button
@@ -320,8 +330,12 @@ watch(lineHeight, (next) => {
 
             <div class="ev-setting-group">
               <div class="ev-setting-header">
-                <div class="ev-setting-title">行距</div>
-                <div class="ev-setting-value">{{ lineHeight.toFixed(2) }}</div>
+                <div class="ev-setting-title">
+                  行距
+                </div>
+                <div class="ev-setting-value">
+                  {{ lineHeight.toFixed(2) }}
+                </div>
               </div>
               <div class="ev-fontsize-actions">
                 <button
@@ -361,7 +375,7 @@ watch(lineHeight, (next) => {
       <div
         v-if="
           frontmatter.layout === 'home' &&
-          (frontmatter.hero?.tagline || frontmatter.hero?.typingTagline)
+            (frontmatter.hero?.tagline || frontmatter.hero?.typingTagline)
         "
         class="vp-typed-tagline"
       >
diff --git a/docs/.vitepress/theme/components/ArticleCard.vue b/docs/.vitepress/theme/components/ArticleCard.vue
index 36709cf..e0ed1f9 100644
--- a/docs/.vitepress/theme/components/ArticleCard.vue
+++ b/docs/.vitepress/theme/components/ArticleCard.vue
@@ -10,12 +10,22 @@ defineProps({
 </script>
 
 <template>
-  <a :href="withBase(link)" class="article-card">
+  <a
+    :href="withBase(link)"
+    class="article-card"
+  >
     <div class="card-content">
       <h3 class="title">{{ title }}</h3>
       <p class="description">{{ description }}</p>
-      <div v-if="tags && tags.length" class="tags">
-        <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
+      <div
+        v-if="tags && tags.length"
+        class="tags"
+      >
+        <span
+          v-for="tag in tags"
+          :key="tag"
+          class="tag"
+        >{{ tag }}</span>
       </div>
     </div>
     <div class="arrow">→</div>
diff --git a/docs/.vitepress/theme/components/ArticleGrid.vue b/docs/.vitepress/theme/components/ArticleGrid.vue
index 7bdea52..339ac51 100644
--- a/docs/.vitepress/theme/components/ArticleGrid.vue
+++ b/docs/.vitepress/theme/components/ArticleGrid.vue
@@ -11,7 +11,11 @@ defineProps({
 
 <template>
   <div class="article-grid">
-    <ArticleCard v-for="(item, i) in items" :key="i" v-bind="item" />
+    <ArticleCard
+      v-for="(item, i) in items"
+      :key="i"
+      v-bind="item"
+    />
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/CategoryIndex.vue b/docs/.vitepress/theme/components/CategoryIndex.vue
index 203c543..8f267c7 100644
--- a/docs/.vitepress/theme/components/CategoryIndex.vue
+++ b/docs/.vitepress/theme/components/CategoryIndex.vue
@@ -16,8 +16,16 @@ defineProps({
       :key="index"
       class="category-section"
     >
-      <h2 v-if="category.title" class="category-title">{{ category.title }}</h2>
-      <p v-if="category.description" class="category-desc">
+      <h2
+        v-if="category.title"
+        class="category-title"
+      >
+        {{ category.title }}
+      </h2>
+      <p
+        v-if="category.description"
+        class="category-desc"
+      >
         {{ category.description }}
       </p>
 
diff --git a/docs/.vitepress/theme/components/ChapterIntroduction.vue b/docs/.vitepress/theme/components/ChapterIntroduction.vue
index 4060385..ece524d 100644
--- a/docs/.vitepress/theme/components/ChapterIntroduction.vue
+++ b/docs/.vitepress/theme/components/ChapterIntroduction.vue
@@ -44,52 +44,97 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
       </div>
       <div class="content">
         <!-- If tags are provided, show tags list -->
-        <div v-if="hasTags" class="tags-container">
-          <span v-for="(tag, index) in tags" :key="index" class="objective-tag">
+        <div
+          v-if="hasTags"
+          class="tags-container"
+        >
+          <span
+            v-for="(tag, index) in tags"
+            :key="index"
+            class="objective-tag"
+          >
             {{ tag }}
           </span>
         </div>
 
         <!-- Slot content (full description) always rendered below tags if tags exist, or alone if not -->
-        <div class="description-text" :class="{ 'has-tags': hasTags }">
-          <slot></slot>
+        <div
+          class="description-text"
+          :class="{ 'has-tags': hasTags }"
+        >
+          <slot />
         </div>
       </div>
     </div>
 
     <!-- Metrics Grid -->
-    <div v-if="hasMeta" class="metrics-grid">
+    <div
+      v-if="hasMeta"
+      class="metrics-grid"
+    >
       <!-- Duration Card -->
-      <div v-if="duration" class="metric-card time-card">
-        <div class="card-icon">⏱️</div>
+      <div
+        v-if="duration"
+        class="metric-card time-card"
+      >
+        <div class="card-icon">
+          ⏱️
+        </div>
         <div class="card-content">
-          <div class="card-label">预计耗时</div>
-          <div class="card-value" v-html="duration"></div>
+          <div class="card-label">
+            预计耗时
+          </div>
+          <div
+            class="card-value"
+            v-html="duration"
+          />
         </div>
       </div>
 
       <!-- Output Card -->
-      <div v-if="expectedOutput || coreOutput" class="metric-card output-card">
-        <div class="card-icon">📦</div>
+      <div
+        v-if="expectedOutput || coreOutput"
+        class="metric-card output-card"
+      >
+        <div class="card-icon">
+          📦
+        </div>
         <div class="card-content">
-          <div class="card-label">预期产出</div>
+          <div class="card-label">
+            预期产出
+          </div>
           <div class="output-container">
-            <div v-if="coreOutput" class="core-output">{{ coreOutput }}</div>
+            <div
+              v-if="coreOutput"
+              class="core-output"
+            >
+              {{ coreOutput }}
+            </div>
             <div
               v-if="expectedOutput"
               class="output-desc"
               v-html="expectedOutput"
-            ></div>
+            />
           </div>
         </div>
       </div>
 
       <!-- Assignment Card -->
-      <div v-if="assignment" class="metric-card task-card">
-        <div class="card-icon">📝</div>
+      <div
+        v-if="assignment"
+        class="metric-card task-card"
+      >
+        <div class="card-icon">
+          📝
+        </div>
         <div class="card-content">
-          <div class="card-label">课后任务</div>
-          <div class="card-value" v-html="assignment"></div>
+          <div class="card-label">
+            课后任务
+          </div>
+          <div
+            class="card-value"
+            v-html="assignment"
+          />
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/GitHubStars.vue b/docs/.vitepress/theme/components/GitHubStars.vue
index b5bad57..d52db04 100644
--- a/docs/.vitepress/theme/components/GitHubStars.vue
+++ b/docs/.vitepress/theme/components/GitHubStars.vue
@@ -70,7 +70,10 @@ onMounted(async () => {
           />
         </svg>
       </span>
-      <span v-if="formattedStars" class="stars-count">{{
+      <span
+        v-if="formattedStars"
+        class="stars-count"
+      >{{
         formattedStars
       }}</span>
     </a>
diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
index f4c85c4..f1c9504 100644
--- a/docs/.vitepress/theme/components/HomeFeatures.vue
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -1674,12 +1674,15 @@ const appendixCards = [
                 @click.stop="toggleLangMenu"
               >
                 <span class="text">
-                  <span class="vpi-languages option-icon"></span>
-                  <span class="vpi-chevron-down text-icon"></span>
+                  <span class="vpi-languages option-icon" />
+                  <span class="vpi-chevron-down text-icon" />
                 </span>
               </button>
               <!-- Dropdown Menu -->
-              <div class="lang-dropdown glass" v-if="showLangMenu">
+              <div
+                v-if="showLangMenu"
+                class="lang-dropdown glass"
+              >
                 <button
                   v-for="locale in locales"
                   :key="locale.code"
@@ -1697,21 +1700,33 @@ const appendixCards = [
           <a
             class="buy-btn"
             :href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
-            >{{ t.footer.btn }}</a
-          >
+          >{{ t.footer.btn }}</a>
         </div>
       </div>
     </nav>
 
     <!-- Home Anchor -->
-    <div id="home" style="height: 0"></div>
+    <div
+      id="home"
+      style="height: 0"
+    />
 
     <!-- Stage 1: Product Manager -->
-    <section id="pm" class="section-container">
+    <section
+      id="pm"
+      class="section-container"
+    >
       <div class="section-header">
-        <h2 class="section-category">{{ t.stage1.cat }}</h2>
-        <h3 class="section-headline" v-html="t.stage1.title"></h3>
-        <p class="section-sub">{{ t.stage1.sub }}</p>
+        <h2 class="section-category">
+          {{ t.stage1.cat }}
+        </h2>
+        <h3
+          class="section-headline"
+          v-html="t.stage1.title"
+        />
+        <p class="section-sub">
+          {{ t.stage1.sub }}
+        </p>
       </div>
 
       <div class="feature-grid">
@@ -1721,7 +1736,10 @@ const appendixCards = [
           :href="withBase(t.stage1.cards[i].link)"
           class="feature-card glass"
         >
-          <div class="feature-icon" :style="{ background: card.color }">
+          <div
+            class="feature-icon"
+            :style="{ background: card.color }"
+          >
             {{ card.icon }}
           </div>
           <div class="feature-content">
@@ -1733,11 +1751,21 @@ const appendixCards = [
     </section>
 
     <!-- Stage 2: Junior/Mid Dev -->
-    <section id="junior" class="section-container">
+    <section
+      id="junior"
+      class="section-container"
+    >
       <div class="section-header">
-        <h2 class="section-category">{{ t.stage2.cat }}</h2>
-        <h3 class="section-headline" v-html="t.stage2.title"></h3>
-        <p class="section-sub">{{ t.stage2.sub }}</p>
+        <h2 class="section-category">
+          {{ t.stage2.cat }}
+        </h2>
+        <h3
+          class="section-headline"
+          v-html="t.stage2.title"
+        />
+        <p class="section-sub">
+          {{ t.stage2.sub }}
+        </p>
       </div>
 
       <div class="comm-grid">
@@ -1751,7 +1779,7 @@ const appendixCards = [
             class="comm-visual"
             :style="{ backgroundColor: card.imageColor }"
           >
-            <div class="visual-placeholder"></div>
+            <div class="visual-placeholder" />
           </div>
           <div class="comm-text">
             <h4 class="comm-title">{{ t.stage2.cards[index].title }}</h4>
@@ -1763,11 +1791,21 @@ const appendixCards = [
     </section>
 
     <!-- Stage 3: Senior Dev -->
-    <section id="senior" class="section-container">
+    <section
+      id="senior"
+      class="section-container"
+    >
       <div class="section-header">
-        <h2 class="section-category">{{ t.stage3.cat }}</h2>
-        <h3 class="section-headline" v-html="t.stage3.title"></h3>
-        <p class="section-sub">{{ t.stage3.sub }}</p>
+        <h2 class="section-category">
+          {{ t.stage3.cat }}
+        </h2>
+        <h3
+          class="section-headline"
+          v-html="t.stage3.title"
+        />
+        <p class="section-sub">
+          {{ t.stage3.sub }}
+        </p>
       </div>
 
       <div class="scroll-container">
@@ -1781,21 +1819,34 @@ const appendixCards = [
             <div class="prod-tag">{{ card.tag }}</div>
             <h4>{{ t.stage3.cards[index].title }}</h4>
             <p>{{ t.stage3.cards[index].desc }}</p>
-            <div class="prod-visual"></div>
+            <div class="prod-visual" />
           </a>
         </div>
       </div>
     </section>
 
     <!-- Appendix -->
-    <section id="appendix" class="section-container">
+    <section
+      id="appendix"
+      class="section-container"
+    >
       <div class="section-header">
-        <h2 class="section-category">{{ t.appendix.cat }}</h2>
-        <h3 class="section-headline" v-html="t.appendix.title"></h3>
-        <p class="section-sub">{{ t.appendix.sub }}</p>
+        <h2 class="section-category">
+          {{ t.appendix.cat }}
+        </h2>
+        <h3
+          class="section-headline"
+          v-html="t.appendix.title"
+        />
+        <p class="section-sub">
+          {{ t.appendix.sub }}
+        </p>
       </div>
 
-      <div class="appendix-scroll-wrapper" ref="appendixWrapper">
+      <div
+        ref="appendixWrapper"
+        class="appendix-scroll-wrapper"
+      >
         <div class="appendix-track">
           <a
             v-for="(card, index) in t.appendix.cards"
@@ -1803,7 +1854,10 @@ const appendixCards = [
             :href="withBase(card.link)"
             class="appendix-card"
           >
-            <div class="appendix-icon-wrapper" :class="'icon-' + (index % 4)">
+            <div
+              class="appendix-icon-wrapper"
+              :class="'icon-' + (index % 4)"
+            >
               <span class="appendix-emoji">{{
                 ['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚'
               }}</span>
@@ -1819,11 +1873,14 @@ const appendixCards = [
       </div>
 
       <!-- Slider Indicator -->
-      <div class="appendix-controls" v-if="totalPages > 1">
+      <div
+        v-if="totalPages > 1"
+        class="appendix-controls"
+      >
         <button
           class="control-btn play-btn"
-          @click="autoScroll"
           aria-label="Auto Scroll"
+          @click="autoScroll"
         >
           <svg
             width="12"
@@ -1845,20 +1902,19 @@ const appendixCards = [
             class="indicator-dot"
             :class="{ active: currentPage === i - 1 }"
             @click="scrollToPage(i - 1)"
-          ></div>
+          />
         </div>
       </div>
     </section>
 
     <!-- Footer Callout -->
     <div class="footer-callout">
-      <h2 v-html="t.footer.title"></h2>
+      <h2 v-html="t.footer.title" />
       <p>{{ t.footer.desc }}</p>
       <a
         class="buy-btn large"
         :href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
-        >{{ t.footer.btn }}</a
-      >
+      >{{ t.footer.btn }}</a>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/NavCard.vue b/docs/.vitepress/theme/components/NavCard.vue
index b034f1c..7012d63 100644
--- a/docs/.vitepress/theme/components/NavCard.vue
+++ b/docs/.vitepress/theme/components/NavCard.vue
@@ -20,13 +20,22 @@ defineProps({
 </script>
 
 <template>
-  <a :href="href" class="nav-card-link">
+  <a
+    :href="href"
+    class="nav-card-link"
+  >
     <div class="nav-card">
       <div class="card-header">
-        <span v-if="icon" class="card-icon">{{ icon }}</span>
+        <span
+          v-if="icon"
+          class="card-icon"
+        >{{ icon }}</span>
         <span class="card-title">{{ title }}</span>
       </div>
-      <div v-if="description" class="card-desc">{{ description }}</div>
+      <div
+        v-if="description"
+        class="card-desc"
+      >{{ description }}</div>
     </div>
   </a>
 </template>
diff --git a/docs/.vitepress/theme/components/NavGrid.vue b/docs/.vitepress/theme/components/NavGrid.vue
index 40360e8..91b6a3b 100644
--- a/docs/.vitepress/theme/components/NavGrid.vue
+++ b/docs/.vitepress/theme/components/NavGrid.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="nav-grid">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/StepBar.vue b/docs/.vitepress/theme/components/StepBar.vue
index 9f1db96..64d5c92 100644
--- a/docs/.vitepress/theme/components/StepBar.vue
+++ b/docs/.vitepress/theme/components/StepBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-steps :active="active" align-center>
+  <el-steps
+    :active="active"
+    align-center
+  >
     <el-step
       v-for="(item, index) in items"
       :key="index"
diff --git a/docs/.vitepress/theme/components/SummaryCard.vue b/docs/.vitepress/theme/components/SummaryCard.vue
index f58adea..9e2e465 100644
--- a/docs/.vitepress/theme/components/SummaryCard.vue
+++ b/docs/.vitepress/theme/components/SummaryCard.vue
@@ -18,39 +18,67 @@ const props = defineProps({
 <template>
   <div class="summary-card">
     <div class="summary-header">
-      <div class="header-icon">📚</div>
+      <div class="header-icon">
+        📚
+      </div>
       <div class="header-content">
-        <div class="summary-title">{{ title }}</div>
+        <div class="summary-title">
+          {{ title }}
+        </div>
       </div>
     </div>
 
     <div class="summary-body">
       <!-- Sections -->
-      <div v-if="sections.length > 0" class="sections-container">
-        <div v-for="(section, index) in sections" :key="index" class="section-item">
+      <div
+        v-if="sections.length > 0"
+        class="sections-container"
+      >
+        <div
+          v-for="(section, index) in sections"
+          :key="index"
+          class="section-item"
+        >
           <div class="section-header">
             <span class="section-number">{{ section.number }}</span>
             <span class="section-title">{{ section.title }}</span>
           </div>
           <ul class="section-list">
-            <li v-for="(item, itemIndex) in section.items" :key="itemIndex" class="list-item">
+            <li
+              v-for="(item, itemIndex) in section.items"
+              :key="itemIndex"
+              class="list-item"
+            >
               <span class="item-marker">•</span>
-              <span class="item-content" v-html="item"></span>
+              <span
+                class="item-content"
+                v-html="item"
+              />
             </li>
           </ul>
         </div>
       </div>
 
       <!-- Outputs -->
-      <div v-if="outputs.length > 0" class="outputs-section">
+      <div
+        v-if="outputs.length > 0"
+        class="outputs-section"
+      >
         <div class="outputs-header">
           <span class="outputs-icon">📦</span>
           <span class="outputs-title">本幕输出：</span>
         </div>
         <ul class="outputs-list">
-          <li v-for="(output, index) in outputs" :key="index" class="output-item">
+          <li
+            v-for="(output, index) in outputs"
+            :key="index"
+            class="output-item"
+          >
             <span class="output-marker">✓</span>
-            <span class="output-content" v-html="output"></span>
+            <span
+              class="output-content"
+              v-html="output"
+            />
           </li>
         </ul>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue
index 4921341..f8387d5 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentArchitectureDemo.vue
@@ -6,8 +6,12 @@
   <div class="arch">
     <div class="header">
       <div>
-        <div class="title">Agent 由哪些模块拼起来？</div>
-        <div class="subtitle">点一下模块，看它“负责什么”。</div>
+        <div class="title">
+          Agent 由哪些模块拼起来？
+        </div>
+        <div class="subtitle">
+          点一下模块，看它“负责什么”。
+        </div>
       </div>
     </div>
 
@@ -24,21 +28,33 @@
         </button>
 
         <div class="pipes">
-          <div class="pipe">用户目标 → 计划 → 工具调用 → 结果 → 再计划…</div>
-          <div class="pipe small">（记忆会贯穿整个过程）</div>
+          <div class="pipe">
+            用户目标 → 计划 → 工具调用 → 结果 → 再计划…
+          </div>
+          <div class="pipe small">
+            （记忆会贯穿整个过程）
+          </div>
         </div>
       </div>
 
       <div class="panel">
-        <div class="panel-title">{{ current.icon }} {{ current.name }}</div>
-        <div class="panel-body">{{ current.desc }}</div>
+        <div class="panel-title">
+          {{ current.icon }} {{ current.name }}
+        </div>
+        <div class="panel-body">
+          {{ current.desc }}
+        </div>
 
         <div class="io">
-          <div class="io-title">典型输入</div>
+          <div class="io-title">
+            典型输入
+          </div>
           <pre><code>{{ current.input }}</code></pre>
         </div>
         <div class="io">
-          <div class="io-title">典型输出</div>
+          <div class="io-title">
+            典型输出
+          </div>
           <pre><code>{{ current.output }}</code></pre>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue
index 74880d6..9ce8e87 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentChallengesDemo.vue
@@ -8,31 +8,46 @@
   <div class="risk">
     <div class="header">
       <div>
-        <div class="title">Agent 的挑战：没护栏就容易“翻车”</div>
-        <div class="subtitle">打开这些护栏，风险会明显下降。</div>
+        <div class="title">
+          Agent 的挑战：没护栏就容易“翻车”
+        </div>
+        <div class="subtitle">
+          打开这些护栏，风险会明显下降。
+        </div>
+      </div>
+      <div
+        class="score"
+        :class="scoreClass"
+      >
+        风险分数：{{ score }}/100
       </div>
-      <div class="score" :class="scoreClass">风险分数：{{ score }}/100</div>
     </div>
 
     <div class="controls">
-      <label class="toggle"
-        ><input type="checkbox" v-model="maxSteps" />
-        最大迭代次数（防死循环）</label
-      >
-      <label class="toggle"
-        ><input type="checkbox" v-model="budget" /> 预算上限（防烧钱）</label
-      >
-      <label class="toggle"
-        ><input type="checkbox" v-model="confirm" /> 危险操作二次确认</label
-      >
-      <label class="toggle"
-        ><input type="checkbox" v-model="sandbox" /> 沙箱执行（隔离系统）</label
+      <label class="toggle"><input
+        v-model="maxSteps"
+        type="checkbox"
       >
+        最大迭代次数（防死循环）</label>
+      <label class="toggle"><input
+        v-model="budget"
+        type="checkbox"
+      > 预算上限（防烧钱）</label>
+      <label class="toggle"><input
+        v-model="confirm"
+        type="checkbox"
+      > 危险操作二次确认</label>
+      <label class="toggle"><input
+        v-model="sandbox"
+        type="checkbox"
+      > 沙箱执行（隔离系统）</label>
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="k">常见风险</div>
+        <div class="k">
+          常见风险
+        </div>
         <ul>
           <li>重复尝试 → 死循环</li>
           <li>乱用工具 → 误删/误发</li>
@@ -41,13 +56,23 @@
         </ul>
       </div>
       <div class="card">
-        <div class="k">你现在开启了什么？</div>
-        <div class="v">{{ enabledList }}</div>
-        <div class="note">建议：最少也要有“最大步数 + 确认”。</div>
+        <div class="k">
+          你现在开启了什么？
+        </div>
+        <div class="v">
+          {{ enabledList }}
+        </div>
+        <div class="note">
+          建议：最少也要有“最大步数 + 确认”。
+        </div>
       </div>
       <div class="card">
-        <div class="k">一句话建议</div>
-        <div class="v">{{ advice }}</div>
+        <div class="k">
+          一句话建议
+        </div>
+        <div class="v">
+          {{ advice }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue
index f1936d3..2923fa0 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentFutureDemo.vue
@@ -6,8 +6,12 @@
   <div class="future">
     <div class="header">
       <div>
-        <div class="title">Agent 的未来：更稳、更强、更协作</div>
-        <div class="subtitle">点一个趋势，看它意味着什么。</div>
+        <div class="title">
+          Agent 的未来：更稳、更强、更协作
+        </div>
+        <div class="subtitle">
+          点一个趋势，看它意味着什么。
+        </div>
       </div>
     </div>
 
@@ -23,16 +27,28 @@
     </div>
 
     <div class="panel">
-      <div class="p-title">{{ current.label }}</div>
-      <div class="p-body">{{ current.desc }}</div>
+      <div class="p-title">
+        {{ current.label }}
+      </div>
+      <div class="p-body">
+        {{ current.desc }}
+      </div>
       <div class="grid">
         <div class="card">
-          <div class="k">会带来什么？</div>
-          <div class="v">{{ current.impact }}</div>
+          <div class="k">
+            会带来什么？
+          </div>
+          <div class="v">
+            {{ current.impact }}
+          </div>
         </div>
         <div class="card">
-          <div class="k">你现在能做什么准备？</div>
-          <div class="v">{{ current.prepare }}</div>
+          <div class="k">
+            你现在能做什么准备？
+          </div>
+          <div class="v">
+            {{ current.prepare }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue
index 15a74c8..fb780fc 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentLevelDemo.vue
@@ -6,35 +6,68 @@
   <div class="levels">
     <div class="header">
       <div>
-        <div class="title">Agent 能力分级（从聊天到协作）</div>
-        <div class="subtitle">拖动看看：等级越高，越像“能独立干活的同事”。</div>
+        <div class="title">
+          Agent 能力分级（从聊天到协作）
+        </div>
+        <div class="subtitle">
+          拖动看看：等级越高，越像“能独立干活的同事”。
+        </div>
+      </div>
+      <div class="badge">
+        当前：{{ current.name }}
       </div>
-      <div class="badge">当前：{{ current.name }}</div>
     </div>
 
     <div class="slider">
-      <input type="range" min="0" max="5" step="1" v-model.number="level" />
+      <input
+        v-model.number="level"
+        type="range"
+        min="0"
+        max="5"
+        step="1"
+      >
       <div class="ticks">
-        <span v-for="n in 6" :key="n">{{ n - 1 }}</span>
+        <span
+          v-for="n in 6"
+          :key="n"
+        >{{ n - 1 }}</span>
       </div>
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="k">能做什么</div>
+        <div class="k">
+          能做什么
+        </div>
         <ul>
-          <li v-for="x in current.can" :key="x">{{ x }}</li>
+          <li
+            v-for="x in current.can"
+            :key="x"
+          >
+            {{ x }}
+          </li>
         </ul>
       </div>
       <div class="card">
-        <div class="k">容易出的问题</div>
+        <div class="k">
+          容易出的问题
+        </div>
         <ul>
-          <li v-for="x in current.risk" :key="x">{{ x }}</li>
+          <li
+            v-for="x in current.risk"
+            :key="x"
+          >
+            {{ x }}
+          </li>
         </ul>
       </div>
       <div class="card">
-        <div class="k">典型任务</div>
-        <div class="v">{{ current.example }}</div>
+        <div class="k">
+          典型任务
+        </div>
+        <div class="v">
+          {{ current.example }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryDemo.vue
index 4d50d8d..3cb4f78 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryDemo.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="memory-demo">
     <div class="header">
-      <div class="title">💾 Agent 的记忆系统</div>
+      <div class="title">
+        💾 Agent 的记忆系统
+      </div>
     </div>
 
     <!-- 快捷操作 -->
@@ -10,29 +12,52 @@
         v-for="action in quickActions"
         :key="action"
         class="action-btn"
-        @click="sendMessage(action)"
         :disabled="isTyping"
+        @click="sendMessage(action)"
       >
         {{ action }}
       </button>
-      <button class="action-btn reset" @click="resetConversation">🔄 重置</button>
+      <button
+        class="action-btn reset"
+        @click="resetConversation"
+      >
+        🔄 重置
+      </button>
     </div>
 
     <!-- 主区域 -->
     <div class="main-area">
       <!-- 对话区 -->
       <div class="chat-box">
-        <div class="box-header">💬 对话</div>
-        <div class="messages" ref="chatContainer">
-          <div v-for="(msg, i) in messages.slice(-4)" :key="i" class="msg-row" :class="msg.role">
+        <div class="box-header">
+          💬 对话
+        </div>
+        <div
+          ref="chatContainer"
+          class="messages"
+        >
+          <div
+            v-for="(msg, i) in messages.slice(-4)"
+            :key="i"
+            class="msg-row"
+            :class="msg.role"
+          >
             <span class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</span>
             <span class="text">{{ msg.content }}</span>
           </div>
-          <div v-if="isTyping" class="msg-row assistant typing">
+          <div
+            v-if="isTyping"
+            class="msg-row assistant typing"
+          >
             <span class="avatar">🤖</span>
-            <span class="dots"><span></span><span></span><span></span></span>
+            <span class="dots"><span /><span /><span /></span>
+          </div>
+          <div
+            v-if="messages.length === 0"
+            class="empty-msg"
+          >
+            点击上方按钮开始对话
           </div>
-          <div v-if="messages.length === 0" class="empty-msg">点击上方按钮开始对话</div>
         </div>
       </div>
 
@@ -44,11 +69,20 @@
             <span class="count">{{ shortTermMemory.length }}</span>
           </div>
           <div class="card-body">
-            <div v-for="(item, i) in shortTermMemory.slice(-3)" :key="i" class="mem-item">
+            <div
+              v-for="(item, i) in shortTermMemory.slice(-3)"
+              :key="i"
+              class="mem-item"
+            >
               <span class="role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
               <span class="content">{{ truncate(item.content, 20) }}</span>
             </div>
-            <div v-if="shortTermMemory.length === 0" class="empty">空</div>
+            <div
+              v-if="shortTermMemory.length === 0"
+              class="empty"
+            >
+              空
+            </div>
           </div>
         </div>
 
@@ -58,11 +92,20 @@
             <span class="count">{{ Object.keys(workingMemory).length }}</span>
           </div>
           <div class="card-body">
-            <div v-for="(v, k) in workingMemory" :key="k" class="mem-item kv">
+            <div
+              v-for="(v, k) in workingMemory"
+              :key="k"
+              class="mem-item kv"
+            >
               <span class="key">{{ k }}</span>
               <span class="value">{{ v }}</span>
             </div>
-            <div v-if="Object.keys(workingMemory).length === 0" class="empty">空</div>
+            <div
+              v-if="Object.keys(workingMemory).length === 0"
+              class="empty"
+            >
+              空
+            </div>
           </div>
         </div>
 
@@ -72,18 +115,30 @@
             <span class="count">{{ longTermMemory.length }}</span>
           </div>
           <div class="card-body">
-            <div v-for="(item, i) in longTermMemory.slice(-2)" :key="i" class="mem-item">
+            <div
+              v-for="(item, i) in longTermMemory.slice(-2)"
+              :key="i"
+              class="mem-item"
+            >
               <span class="tag">{{ item.category }}</span>
               <span class="content">{{ item.content }}</span>
             </div>
-            <div v-if="longTermMemory.length === 0" class="empty">空</div>
+            <div
+              v-if="longTermMemory.length === 0"
+              class="empty"
+            >
+              空
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 记忆操作提示 -->
-    <div v-if="lastOp" class="op-bar">
+    <div
+      v-if="lastOp"
+      class="op-bar"
+    >
       <span>{{ lastOp.icon }}</span>
       <span>{{ lastOp.text }}</span>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryPrinciple.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryPrinciple.vue
index 52b4477..d6d0db0 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryPrinciple.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMemoryPrinciple.vue
@@ -1,52 +1,121 @@
 <template>
   <div class="memory-principle">
     <div class="header">
-      <div class="title">🧠 Agent 记忆系统原理：如何让 AI "记得"你</div>
-      <div class="subtitle">理解短期记忆、工作记忆、长期记忆的协同工作机制</div>
+      <div class="title">
+        🧠 Agent 记忆系统原理：如何让 AI "记得"你
+      </div>
+      <div class="subtitle">
+        理解短期记忆、工作记忆、长期记忆的协同工作机制
+      </div>
     </div>
 
     <!-- 记忆类型概览 -->
     <div class="memory-overview">
-      <div class="overview-title">📊 三层记忆架构</div>
+      <div class="overview-title">
+        📊 三层记忆架构
+      </div>
       <div class="memory-cards">
-        <div class="memory-card short-term" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
-          <div class="card-icon">⏱️</div>
-          <div class="card-name">短期记忆</div>
-          <div class="card-desc">当前对话上下文</div>
-          <div class="card-lifetime">⚡ 会话级</div>
+        <div
+          class="memory-card short-term"
+          :class="{ active: activeTab === 'short' }"
+          @click="activeTab = 'short'"
+        >
+          <div class="card-icon">
+            ⏱️
+          </div>
+          <div class="card-name">
+            短期记忆
+          </div>
+          <div class="card-desc">
+            当前对话上下文
+          </div>
+          <div class="card-lifetime">
+            ⚡ 会话级
+          </div>
         </div>
-        <div class="memory-card working" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
-          <div class="card-icon">📝</div>
-          <div class="card-name">工作记忆</div>
-          <div class="card-desc">任务相关变量</div>
-          <div class="card-lifetime">🔄 任务级</div>
+        <div
+          class="memory-card working"
+          :class="{ active: activeTab === 'working' }"
+          @click="activeTab = 'working'"
+        >
+          <div class="card-icon">
+            📝
+          </div>
+          <div class="card-name">
+            工作记忆
+          </div>
+          <div class="card-desc">
+            任务相关变量
+          </div>
+          <div class="card-lifetime">
+            🔄 任务级
+          </div>
         </div>
-        <div class="memory-card long-term" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
-          <div class="card-icon">💾</div>
-          <div class="card-name">长期记忆</div>
-          <div class="card-desc">用户偏好与知识</div>
-          <div class="card-lifetime">♾️ 持久化</div>
+        <div
+          class="memory-card long-term"
+          :class="{ active: activeTab === 'long' }"
+          @click="activeTab = 'long'"
+        >
+          <div class="card-icon">
+            💾
+          </div>
+          <div class="card-name">
+            长期记忆
+          </div>
+          <div class="card-desc">
+            用户偏好与知识
+          </div>
+          <div class="card-lifetime">
+            ♾️ 持久化
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 交互演示区 -->
     <div class="demo-section">
-      <div class="demo-title">🎮 交互演示：观察记忆如何工作</div>
+      <div class="demo-title">
+        🎮 交互演示：观察记忆如何工作
+      </div>
       
       <!-- 对话区 -->
       <div class="chat-area">
         <div class="chat-header">
           <span>💬 对话窗口</span>
-          <button class="reset-btn" @click="resetDemo">🔄 重置</button>
+          <button
+            class="reset-btn"
+            @click="resetDemo"
+          >
+            🔄 重置
+          </button>
         </div>
-        <div class="messages" ref="messageContainer">
-          <div v-for="(msg, idx) in messages" :key="idx" class="message" :class="msg.role">
-            <div class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
+        <div
+          ref="messageContainer"
+          class="messages"
+        >
+          <div
+            v-for="(msg, idx) in messages"
+            :key="idx"
+            class="message"
+            :class="msg.role"
+          >
+            <div class="avatar">
+              {{ msg.role === 'user' ? '👤' : '🤖' }}
+            </div>
             <div class="bubble">
-              <div class="msg-text">{{ msg.text }}</div>
-              <div v-if="msg.memoryOps && msg.memoryOps.length" class="memory-ops">
-                <div v-for="(op, i) in msg.memoryOps" :key="i" class="memory-op" :class="op.type">
+              <div class="msg-text">
+                {{ msg.text }}
+              </div>
+              <div
+                v-if="msg.memoryOps && msg.memoryOps.length"
+                class="memory-ops"
+              >
+                <div
+                  v-for="(op, i) in msg.memoryOps"
+                  :key="i"
+                  class="memory-op"
+                  :class="op.type"
+                >
                   <span class="op-icon">{{ op.icon }}</span>
                   <span class="op-text">{{ op.text }}</span>
                 </div>
@@ -71,115 +140,214 @@
 
       <!-- 记忆状态面板 -->
       <div class="memory-panels">
-        <div class="panel-title">📂 记忆状态实时监控</div>
+        <div class="panel-title">
+          📂 记忆状态实时监控
+        </div>
         
         <!-- 短期记忆 -->
-        <div class="memory-panel" :class="{ highlight: activeTab === 'short' }" @click="activeTab = 'short'">
+        <div
+          class="memory-panel"
+          :class="{ highlight: activeTab === 'short' }"
+          @click="activeTab = 'short'"
+        >
           <div class="panel-header">
             <span class="panel-icon">⏱️</span>
             <span class="panel-name">短期记忆</span>
             <span class="panel-count">{{ shortTermMemory.length }} 条</span>
           </div>
           <div class="panel-content">
-            <div v-if="shortTermMemory.length === 0" class="empty">暂无对话记录</div>
-            <div v-for="(item, idx) in shortTermMemory.slice(-5)" :key="idx" class="memory-item">
-              <span class="item-role" :class="item.role">{{ item.role === 'user' ? 'U' : 'A' }}</span>
+            <div
+              v-if="shortTermMemory.length === 0"
+              class="empty"
+            >
+              暂无对话记录
+            </div>
+            <div
+              v-for="(item, idx) in shortTermMemory.slice(-5)"
+              :key="idx"
+              class="memory-item"
+            >
+              <span
+                class="item-role"
+                :class="item.role"
+              >{{ item.role === 'user' ? 'U' : 'A' }}</span>
               <span class="item-text">{{ truncate(item.content, 25) }}</span>
             </div>
           </div>
-          <div class="panel-footer">💡 保存最近的对话轮次，超出上下文窗口会被遗忘</div>
+          <div class="panel-footer">
+            💡 保存最近的对话轮次，超出上下文窗口会被遗忘
+          </div>
         </div>
 
         <!-- 工作记忆 -->
-        <div class="memory-panel" :class="{ highlight: activeTab === 'working' }" @click="activeTab = 'working'">
+        <div
+          class="memory-panel"
+          :class="{ highlight: activeTab === 'working' }"
+          @click="activeTab = 'working'"
+        >
           <div class="panel-header">
             <span class="panel-icon">📝</span>
             <span class="panel-name">工作记忆</span>
             <span class="panel-count">{{ Object.keys(workingMemory).length }} 个变量</span>
           </div>
           <div class="panel-content">
-            <div v-if="Object.keys(workingMemory).length === 0" class="empty">暂无任务变量</div>
-            <div v-for="(value, key) in workingMemory" :key="key" class="memory-item working-item">
+            <div
+              v-if="Object.keys(workingMemory).length === 0"
+              class="empty"
+            >
+              暂无任务变量
+            </div>
+            <div
+              v-for="(value, key) in workingMemory"
+              :key="key"
+              class="memory-item working-item"
+            >
               <span class="item-key">{{ key }}:</span>
               <span class="item-value">{{ value }}</span>
             </div>
           </div>
-          <div class="panel-footer">💡 临时存储任务相关变量，任务结束后清除</div>
+          <div class="panel-footer">
+            💡 临时存储任务相关变量，任务结束后清除
+          </div>
         </div>
 
         <!-- 长期记忆 -->
-        <div class="memory-panel" :class="{ highlight: activeTab === 'long' }" @click="activeTab = 'long'">
+        <div
+          class="memory-panel"
+          :class="{ highlight: activeTab === 'long' }"
+          @click="activeTab = 'long'"
+        >
           <div class="panel-header">
             <span class="panel-icon">💾</span>
             <span class="panel-name">长期记忆</span>
             <span class="panel-count">{{ longTermMemory.length }} 条知识</span>
           </div>
           <div class="panel-content">
-            <div v-if="longTermMemory.length === 0" class="empty">暂无持久化知识</div>
-            <div v-for="(item, idx) in longTermMemory" :key="idx" class="memory-item long-item">
-              <span class="item-type" :class="item.type">{{ item.type }}</span>
+            <div
+              v-if="longTermMemory.length === 0"
+              class="empty"
+            >
+              暂无持久化知识
+            </div>
+            <div
+              v-for="(item, idx) in longTermMemory"
+              :key="idx"
+              class="memory-item long-item"
+            >
+              <span
+                class="item-type"
+                :class="item.type"
+              >{{ item.type }}</span>
               <span class="item-content">{{ item.key }} = {{ truncate(item.value, 20) }}</span>
             </div>
           </div>
-          <div class="panel-footer">💡 跨会话持久保存，需要显式写入</div>
+          <div class="panel-footer">
+            💡 跨会话持久保存，需要显式写入
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 记忆流转示意 -->
     <div class="memory-flow">
-      <div class="flow-title">🔄 记忆流转机制</div>
+      <div class="flow-title">
+        🔄 记忆流转机制
+      </div>
       <div class="flow-diagram">
         <div class="flow-step">
           <div class="step-box user-input">
-            <div class="step-icon">👤</div>
-            <div class="step-text">用户输入</div>
+            <div class="step-icon">
+              👤
+            </div>
+            <div class="step-text">
+              用户输入
+            </div>
+          </div>
+          <div class="step-arrow">
+            ➡️
           </div>
-          <div class="step-arrow">➡️</div>
         </div>
         
         <div class="flow-step">
           <div class="step-box">
-            <div class="step-icon">⏱️</div>
-            <div class="step-text">短期记忆</div>
-            <div class="step-desc">自动记录对话</div>
+            <div class="step-icon">
+              ⏱️
+            </div>
+            <div class="step-text">
+              短期记忆
+            </div>
+            <div class="step-desc">
+              自动记录对话
+            </div>
+          </div>
+          <div class="step-arrow">
+            ➡️
           </div>
-          <div class="step-arrow">➡️</div>
         </div>
         
         <div class="flow-step">
           <div class="step-box">
-            <div class="step-icon">🧠</div>
-            <div class="step-text">LLM 处理</div>
-            <div class="step-desc">理解+决策</div>
+            <div class="step-icon">
+              🧠
+            </div>
+            <div class="step-text">
+              LLM 处理
+            </div>
+            <div class="step-desc">
+              理解+决策
+            </div>
+          </div>
+          <div class="step-arrow">
+            ➡️
           </div>
-          <div class="step-arrow">➡️</div>
         </div>
         
         <div class="flow-branch">
           <div class="branch-option">
-            <div class="branch-arrow">⬇️</div>
+            <div class="branch-arrow">
+              ⬇️
+            </div>
             <div class="step-box small">
-              <div class="step-icon">📝</div>
-              <div class="step-text">工作记忆</div>
-              <div class="step-desc">临时变量</div>
+              <div class="step-icon">
+                📝
+              </div>
+              <div class="step-text">
+                工作记忆
+              </div>
+              <div class="step-desc">
+                临时变量
+              </div>
             </div>
           </div>
           <div class="branch-option">
-            <div class="branch-arrow">⬇️</div>
+            <div class="branch-arrow">
+              ⬇️
+            </div>
             <div class="step-box small">
-              <div class="step-icon">💾</div>
-              <div class="step-text">长期记忆</div>
-              <div class="step-desc">持久化存储</div>
+              <div class="step-icon">
+                💾
+              </div>
+              <div class="step-text">
+                长期记忆
+              </div>
+              <div class="step-desc">
+                持久化存储
+              </div>
             </div>
           </div>
         </div>
         
         <div class="flow-step">
-          <div class="step-arrow">➡️</div>
+          <div class="step-arrow">
+            ➡️
+          </div>
           <div class="step-box agent-output">
-            <div class="step-icon">🤖</div>
-            <div class="step-text">Agent 回复</div>
+            <div class="step-icon">
+              🤖
+            </div>
+            <div class="step-text">
+              Agent 回复
+            </div>
           </div>
         </div>
       </div>
@@ -187,9 +355,15 @@
 
     <!-- 核心机制解释 -->
     <div class="mechanism-section">
-      <div class="mechanism-title">⚙️ 核心机制详解</div>
+      <div class="mechanism-title">
+        ⚙️ 核心机制详解
+      </div>
       <div class="mechanism-grid">
-        <div class="mechanism-card" :class="{ active: activeTab === 'short' }" @click="activeTab = 'short'">
+        <div
+          class="mechanism-card"
+          :class="{ active: activeTab === 'short' }"
+          @click="activeTab = 'short'"
+        >
           <div class="card-header">
             <span class="card-icon">⏱️</span>
             <span class="card-title">短期记忆 (Short-term)</span>
@@ -217,7 +391,11 @@
           </div>
         </div>
 
-        <div class="mechanism-card" :class="{ active: activeTab === 'working' }" @click="activeTab = 'working'">
+        <div
+          class="mechanism-card"
+          :class="{ active: activeTab === 'working' }"
+          @click="activeTab = 'working'"
+        >
           <div class="card-header">
             <span class="card-icon">📝</span>
             <span class="card-title">工作记忆 (Working)</span>
@@ -245,7 +423,11 @@
           </div>
         </div>
 
-        <div class="mechanism-card" :class="{ active: activeTab === 'long' }" @click="activeTab = 'long'">
+        <div
+          class="mechanism-card"
+          :class="{ active: activeTab === 'long' }"
+          @click="activeTab = 'long'"
+        >
           <div class="card-header">
             <span class="card-icon">💾</span>
             <span class="card-title">长期记忆 (Long-term)</span>
@@ -277,34 +459,60 @@
 
     <!-- 最佳实践 -->
     <div class="best-practices">
-      <div class="practices-title">💡 记忆系统最佳实践</div>
+      <div class="practices-title">
+        💡 记忆系统最佳实践
+      </div>
       <div class="practices-list">
         <div class="practice-item">
-          <div class="practice-icon">1️⃣</div>
+          <div class="practice-icon">
+            1️⃣
+          </div>
           <div class="practice-content">
-            <div class="practice-title">短期记忆优化</div>
-            <div class="practice-desc">定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩</div>
+            <div class="practice-title">
+              短期记忆优化
+            </div>
+            <div class="practice-desc">
+              定期清理无关历史，保留关键上下文；超长对话使用摘要技术压缩
+            </div>
           </div>
         </div>
         <div class="practice-item">
-          <div class="practice-icon">2️⃣</div>
+          <div class="practice-icon">
+            2️⃣
+          </div>
           <div class="practice-content">
-            <div class="practice-title">工作记忆管理</div>
-            <div class="practice-desc">任务开始时初始化，结束时清理；避免存储大量中间结果</div>
+            <div class="practice-title">
+              工作记忆管理
+            </div>
+            <div class="practice-desc">
+              任务开始时初始化，结束时清理；避免存储大量中间结果
+            </div>
           </div>
         </div>
         <div class="practice-item">
-          <div class="practice-icon">3️⃣</div>
+          <div class="practice-icon">
+            3️⃣
+          </div>
           <div class="practice-content">
-            <div class="practice-title">长期记忆构建</div>
-            <div class="practice-desc">定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好</div>
+            <div class="practice-title">
+              长期记忆构建
+            </div>
+            <div class="practice-desc">
+              定期总结对话提炼知识；使用向量检索实现语义搜索；区分事实和偏好
+            </div>
           </div>
         </div>
         <div class="practice-item">
-          <div class="practice-icon">4️⃣</div>
+          <div class="practice-icon">
+            4️⃣
+          </div>
           <div class="practice-content">
-            <div class="practice-title">记忆一致性</div>
-            <div class="practice-desc">长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆</div>
+            <div class="practice-title">
+              记忆一致性
+            </div>
+            <div class="practice-desc">
+              长期记忆更新前验证；处理矛盾信息；支持用户显式修改记忆
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMultiToolPrinciple.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMultiToolPrinciple.vue
index 875714a..a126064 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentMultiToolPrinciple.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentMultiToolPrinciple.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="multi-tool-principle">
     <div class="header">
-      <div class="title">🔧 多工具调用原理：Agent 如何"串联"工具完成任务</div>
-      <div class="subtitle">理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制</div>
+      <div class="title">
+        🔧 多工具调用原理：Agent 如何"串联"工具完成任务
+      </div>
+      <div class="subtitle">
+        理解 Agent 的链式思考(Chain-of-Thought)和工具编排机制
+      </div>
     </div>
 
     <!-- 场景选择 -->
@@ -20,24 +24,40 @@
 
     <!-- 用户意图 -->
     <div class="intent-box">
-      <div class="intent-label">👤 用户意图</div>
-      <div class="intent-text">{{ currentData.intent }}</div>
+      <div class="intent-label">
+        👤 用户意图
+      </div>
+      <div class="intent-text">
+        {{ currentData.intent }}
+      </div>
     </div>
 
     <!-- 执行流程可视化 -->
     <div class="execution-flow">
-      <div class="flow-title">🔄 工具调用执行流程</div>
+      <div class="flow-title">
+        🔄 工具调用执行流程
+      </div>
       
       <!-- 思考阶段 -->
-      <div class="phase thinking-phase" :class="{ active: currentPhase >= 0 }">
+      <div
+        class="phase thinking-phase"
+        :class="{ active: currentPhase >= 0 }"
+      >
         <div class="phase-header">
           <span class="phase-icon">🧠</span>
           <span class="phase-name">思考规划</span>
           <span class="phase-status">{{ currentPhase > 0 ? '✅ 完成' : currentPhase === 0 ? '🔄 进行中' : '⏳ 等待' }}</span>
         </div>
-        <div v-if="currentPhase >= 0" class="phase-content">
+        <div
+          v-if="currentPhase >= 0"
+          class="phase-content"
+        >
           <div class="thought-steps">
-            <div v-for="(step, idx) in currentData.planningSteps" :key="idx" class="thought-step">
+            <div
+              v-for="(step, idx) in currentData.planningSteps"
+              :key="idx"
+              class="thought-step"
+            >
               <span class="step-num">{{ idx + 1 }}</span>
               <span class="step-text">{{ step }}</span>
             </div>
@@ -46,13 +66,19 @@
       </div>
 
       <!-- 工具执行阶段 -->
-      <div class="phase tools-phase" :class="{ active: currentPhase >= 1 }">
+      <div
+        class="phase tools-phase"
+        :class="{ active: currentPhase >= 1 }"
+      >
         <div class="phase-header">
           <span class="phase-icon">🔧</span>
           <span class="phase-name">工具执行</span>
           <span class="phase-status">{{ currentPhase > 1 ? '✅ 完成' : currentPhase === 1 ? '🔄 进行中' : '⏳ 等待' }}</span>
         </div>
-        <div v-if="currentPhase >= 1" class="phase-content">
+        <div
+          v-if="currentPhase >= 1"
+          class="phase-content"
+        >
           <div class="tools-chain">
             <div 
               v-for="(tool, idx) in currentData.tools" 
@@ -64,28 +90,53 @@
                 pending: currentTool < idx 
               }"
             >
-              <div class="node-connector" v-if="idx > 0">
-                <div class="connector-line" :class="{ active: currentTool >= idx }"></div>
+              <div
+                v-if="idx > 0"
+                class="node-connector"
+              >
+                <div
+                  class="connector-line"
+                  :class="{ active: currentTool >= idx }"
+                />
               </div>
               <div class="node-content">
-                <div class="node-icon">{{ tool.icon }}</div>
-                <div class="node-name">{{ tool.name }}</div>
+                <div class="node-icon">
+                  {{ tool.icon }}
+                </div>
+                <div class="node-name">
+                  {{ tool.name }}
+                </div>
                 <div class="node-status">
-                  <span v-if="currentTool > idx" class="status-done">✓</span>
-                  <span v-else-if="currentTool === idx" class="status-running">
-                    <span class="pulse"></span>
+                  <span
+                    v-if="currentTool > idx"
+                    class="status-done"
+                  >✓</span>
+                  <span
+                    v-else-if="currentTool === idx"
+                    class="status-running"
+                  >
+                    <span class="pulse" />
                   </span>
-                  <span v-else class="status-wait">○</span>
+                  <span
+                    v-else
+                    class="status-wait"
+                  >○</span>
                 </div>
               </div>
               
               <!-- 工具详情 -->
-              <div v-if="currentTool >= idx" class="tool-detail-popup">
+              <div
+                v-if="currentTool >= idx"
+                class="tool-detail-popup"
+              >
                 <div class="detail-row">
                   <span class="detail-label">输入:</span>
                   <code class="detail-code">{{ tool.input }}</code>
                 </div>
-                <div v-if="currentTool > idx" class="detail-row">
+                <div
+                  v-if="currentTool > idx"
+                  class="detail-row"
+                >
                   <span class="detail-label">输出:</span>
                   <span class="detail-output">{{ truncate(tool.output, 50) }}</span>
                 </div>
@@ -94,34 +145,57 @@
           </div>
           
           <!-- 数据流转示意 -->
-          <div v-if="currentPhase === 1" class="data-flow-hint">
-            <div class="flow-arrow">⬇️ 数据在工具间流转，上一步的输出成为下一步的输入</div>
+          <div
+            v-if="currentPhase === 1"
+            class="data-flow-hint"
+          >
+            <div class="flow-arrow">
+              ⬇️ 数据在工具间流转，上一步的输出成为下一步的输入
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 结果整合阶段 -->
-      <div class="phase result-phase" :class="{ active: currentPhase >= 2 }">
+      <div
+        class="phase result-phase"
+        :class="{ active: currentPhase >= 2 }"
+      >
         <div class="phase-header">
           <span class="phase-icon">📝</span>
           <span class="phase-name">结果整合</span>
           <span class="phase-status">{{ currentPhase > 2 ? '✅ 完成' : currentPhase === 2 ? '🔄 进行中' : '⏳ 等待' }}</span>
         </div>
-        <div v-if="currentPhase >= 2" class="phase-content">
+        <div
+          v-if="currentPhase >= 2"
+          class="phase-content"
+        >
           <div class="integration-steps">
-            <div class="integration-step" :class="{ done: integrationStep >= 0 }">
+            <div
+              class="integration-step"
+              :class="{ done: integrationStep >= 0 }"
+            >
               <span class="check">{{ integrationStep >= 0 ? '✓' : '○' }}</span>
               <span>收集所有工具输出</span>
             </div>
-            <div class="integration-step" :class="{ done: integrationStep >= 1 }">
+            <div
+              class="integration-step"
+              :class="{ done: integrationStep >= 1 }"
+            >
               <span class="check">{{ integrationStep >= 1 ? '✓' : '○' }}</span>
               <span>去重与验证</span>
             </div>
-            <div class="integration-step" :class="{ done: integrationStep >= 2 }">
+            <div
+              class="integration-step"
+              :class="{ done: integrationStep >= 2 }"
+            >
               <span class="check">{{ integrationStep >= 2 ? '✓' : '○' }}</span>
               <span>结构化整理</span>
             </div>
-            <div class="integration-step" :class="{ done: integrationStep >= 3 }">
+            <div
+              class="integration-step"
+              :class="{ done: integrationStep >= 3 }"
+            >
               <span class="check">{{ integrationStep >= 3 ? '✓' : '○' }}</span>
               <span>生成自然语言回复</span>
             </div>
@@ -130,15 +204,23 @@
       </div>
 
       <!-- 最终输出 -->
-      <div class="phase output-phase" :class="{ active: currentPhase >= 3 }">
+      <div
+        class="phase output-phase"
+        :class="{ active: currentPhase >= 3 }"
+      >
         <div class="phase-header">
           <span class="phase-icon">💬</span>
           <span class="phase-name">最终输出</span>
           <span class="phase-status">{{ currentPhase >= 3 ? '✅ 完成' : '⏳ 等待' }}</span>
         </div>
-        <div v-if="currentPhase >= 3" class="phase-content">
+        <div
+          v-if="currentPhase >= 3"
+          class="phase-content"
+        >
           <div class="final-output">
-            <div class="output-bubble">{{ currentData.finalOutput }}</div>
+            <div class="output-bubble">
+              {{ currentData.finalOutput }}
+            </div>
           </div>
         </div>
       </div>
@@ -146,57 +228,113 @@
 
     <!-- 控制按钮 -->
     <div class="controls">
-      <button v-if="!isRunning && currentPhase === -1" class="control-btn primary" @click="startDemo">
+      <button
+        v-if="!isRunning && currentPhase === -1"
+        class="control-btn primary"
+        @click="startDemo"
+      >
         ▶ 开始演示
       </button>
-      <button v-else-if="isRunning" class="control-btn" disabled>
+      <button
+        v-else-if="isRunning"
+        class="control-btn"
+        disabled
+      >
         ⏳ 执行中...
       </button>
-      <button v-else class="control-btn secondary" @click="reset">
+      <button
+        v-else
+        class="control-btn secondary"
+        @click="reset"
+      >
         🔄 重新演示
       </button>
     </div>
 
     <!-- 原理说明 -->
     <div class="principle-explanation">
-      <div class="explanation-title">📚 核心原理</div>
+      <div class="explanation-title">
+        📚 核心原理
+      </div>
       <div class="explanation-grid">
         <div class="explanation-card">
-          <div class="card-icon">🧩</div>
-          <div class="card-title">任务分解</div>
-          <div class="card-desc">Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用</div>
+          <div class="card-icon">
+            🧩
+          </div>
+          <div class="card-title">
+            任务分解
+          </div>
+          <div class="card-desc">
+            Agent 将复杂任务拆解为多个子任务，每个子任务对应一个工具调用
+          </div>
         </div>
         <div class="explanation-card">
-          <div class="card-icon">🔗</div>
-          <div class="card-title">链式调用</div>
-          <div class="card-desc">工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入</div>
+          <div class="card-icon">
+            🔗
+          </div>
+          <div class="card-title">
+            链式调用
+          </div>
+          <div class="card-desc">
+            工具按依赖关系串联执行，前一个工具的输出成为后一个工具的输入
+          </div>
         </div>
         <div class="explanation-card">
-          <div class="card-icon">🔄</div>
-          <div class="card-title">动态调整</div>
-          <div class="card-desc">根据中间结果，Agent 可以动态决定下一步调用哪个工具</div>
+          <div class="card-icon">
+            🔄
+          </div>
+          <div class="card-title">
+            动态调整
+          </div>
+          <div class="card-desc">
+            根据中间结果，Agent 可以动态决定下一步调用哪个工具
+          </div>
         </div>
         <div class="explanation-card">
-          <div class="card-icon">🎯</div>
-          <div class="card-title">结果整合</div>
-          <div class="card-desc">将所有工具输出整合为连贯、有用的最终回复</div>
+          <div class="card-icon">
+            🎯
+          </div>
+          <div class="card-title">
+            结果整合
+          </div>
+          <div class="card-desc">
+            将所有工具输出整合为连贯、有用的最终回复
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 与 LLM 对比 -->
     <div class="comparison-section">
-      <div class="comparison-title">⚖️ 为什么需要多工具调用？</div>
+      <div class="comparison-title">
+        ⚖️ 为什么需要多工具调用？
+      </div>
       <div class="comparison-table">
         <div class="comparison-row header">
-          <div class="col scenario">场景</div>
-          <div class="col llm">普通 LLM</div>
-          <div class="col agent">Agent + 多工具</div>
+          <div class="col scenario">
+            场景
+          </div>
+          <div class="col llm">
+            普通 LLM
+          </div>
+          <div class="col agent">
+            Agent + 多工具
+          </div>
         </div>
-        <div v-for="(item, idx) in comparisons" :key="idx" class="comparison-row">
-          <div class="col scenario">{{ item.scenario }}</div>
-          <div class="col llm">{{ item.llm }}</div>
-          <div class="col agent">{{ item.agent }}</div>
+        <div
+          v-for="(item, idx) in comparisons"
+          :key="idx"
+          class="comparison-row"
+        >
+          <div class="col scenario">
+            {{ item.scenario }}
+          </div>
+          <div class="col llm">
+            {{ item.llm }}
+          </div>
+          <div class="col agent">
+            {{ item.agent }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentPlanningDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentPlanningDemo.vue
index ef91e13..e2516bc 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentPlanningDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentPlanningDemo.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="planning-demo">
     <div class="header">
-      <div class="title">📋 Agent 的规划能力</div>
+      <div class="title">
+        📋 Agent 的规划能力
+      </div>
     </div>
 
     <!-- 任务选择 -->
@@ -14,7 +16,10 @@
       >
         <span>{{ task.icon }}</span>
         <span>{{ task.name }}</span>
-        <span class="complexity" :class="task.complexity">{{ task.complexityLabel }}</span>
+        <span
+          class="complexity"
+          :class="task.complexity"
+        >{{ task.complexityLabel }}</span>
       </button>
     </div>
 
@@ -34,9 +39,16 @@
           class="step-node"
           :class="{ completed: stepStatus[index] === 'completed', running: stepStatus[index] === 'running' }"
         >
-          <div class="node-circle">{{ index + 1 }}</div>
-          <div class="node-name">{{ step.name }}</div>
-          <div v-if="index < currentTaskData.steps.length - 1" class="node-line"></div>
+          <div class="node-circle">
+            {{ index + 1 }}
+          </div>
+          <div class="node-name">
+            {{ step.name }}
+          </div>
+          <div
+            v-if="index < currentTaskData.steps.length - 1"
+            class="node-line"
+          />
         </div>
       </div>
 
@@ -45,46 +57,91 @@
         <div class="log-box">
           <div class="box-header">
             <span>📝 执行日志</span>
-            <span v-if="executionStatus === 'running'" class="status running">执行中</span>
-            <span v-else-if="executionStatus === 'completed'" class="status completed">已完成</span>
+            <span
+              v-if="executionStatus === 'running'"
+              class="status running"
+            >执行中</span>
+            <span
+              v-else-if="executionStatus === 'completed'"
+              class="status completed"
+            >已完成</span>
           </div>
           <div class="log-content">
-            <div v-if="logs.length === 0" class="empty">点击"开始执行"查看过程</div>
-            <div v-for="(log, i) in logs.slice(-4)" :key="i" class="log-line" :class="log.type">
+            <div
+              v-if="logs.length === 0"
+              class="empty"
+            >
+              点击"开始执行"查看过程
+            </div>
+            <div
+              v-for="(log, i) in logs.slice(-4)"
+              :key="i"
+              class="log-line"
+              :class="log.type"
+            >
               <span class="time">{{ log.time }}</span>
               <span class="icon">{{ log.icon }}</span>
-              <span class="msg" v-html="log.message"></span>
+              <span
+                class="msg"
+                v-html="log.message"
+              />
             </div>
           </div>
         </div>
 
-        <div v-if="currentThought" class="thought-box">
-          <div class="box-header">🧠 正在思考</div>
-          <div class="thought-content">{{ currentThought }}</div>
+        <div
+          v-if="currentThought"
+          class="thought-box"
+        >
+          <div class="box-header">
+            🧠 正在思考
+          </div>
+          <div class="thought-content">
+            {{ currentThought }}
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 控制栏 -->
     <div class="control-bar">
-      <button v-if="executionStatus === 'idle'" class="ctrl-btn primary" @click="startExecution">
+      <button
+        v-if="executionStatus === 'idle'"
+        class="ctrl-btn primary"
+        @click="startExecution"
+      >
         ▶ 开始执行
       </button>
-      <button v-else-if="executionStatus === 'running'" class="ctrl-btn" disabled>
+      <button
+        v-else-if="executionStatus === 'running'"
+        class="ctrl-btn"
+        disabled
+      >
         ⏳ 执行中...
       </button>
-      <button v-else class="ctrl-btn" @click="reset">
+      <button
+        v-else
+        class="ctrl-btn"
+        @click="reset"
+      >
         🔄 重置
       </button>
 
-      <div v-if="executionStatus === 'completed'" class="stats">
+      <div
+        v-if="executionStatus === 'completed'"
+        class="stats"
+      >
         <span class="stat">{{ currentTaskData.steps.length }} 步骤</span>
         <span class="stat">{{ executionTime }}s</span>
         <span class="stat">{{ toolCalls }} 调用</span>
       </div>
 
       <div class="step-dots">
-        <span v-for="n in currentTaskData.steps.length" :key="n" :class="['dot', { active: stepStatus[n-1] === 'completed' }]"></span>
+        <span
+          v-for="n in currentTaskData.steps.length"
+          :key="n"
+          :class="['dot', { active: stepStatus[n-1] === 'completed' }]"
+        />
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentQuickStartDemo.vue
index 7d76427..200131f 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentQuickStartDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="agent-chat-demo">
     <div class="header">
-      <div class="title">🤖 Agent 初体验：从"能说"到"能做"</div>
-      <div class="subtitle">体验 Agent 如何自动调用工具完成任务</div>
+      <div class="title">
+        🤖 Agent 初体验：从"能说"到"能做"
+      </div>
+      <div class="subtitle">
+        体验 Agent 如何自动调用工具完成任务
+      </div>
     </div>
 
     <!-- 场景选择 -->
@@ -22,43 +26,78 @@
     <div class="chat-window">
       <!-- 用户消息 -->
       <div class="message user">
-        <div class="avatar">👤</div>
-        <div class="bubble">{{ currentScenarioData.query }}</div>
+        <div class="avatar">
+          👤
+        </div>
+        <div class="bubble">
+          {{ currentScenarioData.query }}
+        </div>
       </div>
 
       <!-- LLM 回复（对比） -->
       <div class="message llm">
-        <div class="avatar">🤖</div>
+        <div class="avatar">
+          🤖
+        </div>
         <div class="bubble llm-bubble">
-          <div class="llm-label">普通 LLM</div>
-          <div class="llm-content">{{ currentScenarioData.llmResponse }}</div>
+          <div class="llm-label">
+            普通 LLM
+          </div>
+          <div class="llm-content">
+            {{ currentScenarioData.llmResponse }}
+          </div>
         </div>
       </div>
 
       <!-- Agent 回复 -->
       <div class="message agent">
-        <div class="avatar agent-avatar">🦾</div>
+        <div class="avatar agent-avatar">
+          🦾
+        </div>
         <div class="bubble agent-bubble">
-          <div class="agent-label">Agent 智能体</div>
+          <div class="agent-label">
+            Agent 智能体
+          </div>
           
           <!-- 思考过程（可折叠） -->
-          <div v-if="showThinking" class="thinking-section">
-            <div class="thinking-header" @click="toggleThinking">
+          <div
+            v-if="showThinking"
+            class="thinking-section"
+          >
+            <div
+              class="thinking-header"
+              @click="toggleThinking"
+            >
               <span>🧠 思考过程</span>
               <span class="toggle-icon">{{ thinkingExpanded ? '▼' : '▶' }}</span>
             </div>
-            <div v-if="thinkingExpanded" class="thinking-content">
-              <div class="thought-item">{{ currentScenarioData.thinking }}</div>
+            <div
+              v-if="thinkingExpanded"
+              class="thinking-content"
+            >
+              <div class="thought-item">
+                {{ currentScenarioData.thinking }}
+              </div>
             </div>
           </div>
 
           <!-- 工具调用（可折叠） -->
-          <div v-if="showTools" ref="toolsSection" class="tools-section">
-            <div class="tools-header" @click="toggleTools">
+          <div
+            v-if="showTools"
+            ref="toolsSection"
+            class="tools-section"
+          >
+            <div
+              class="tools-header"
+              @click="toggleTools"
+            >
               <span>🔧 工具调用 ({{ currentScenarioData.tools.length }}个)</span>
               <span class="toggle-icon">{{ toolsExpanded ? '▼' : '▶' }}</span>
             </div>
-            <div v-if="toolsExpanded" class="tools-list">
+            <div
+              v-if="toolsExpanded"
+              class="tools-list"
+            >
               <div 
                 v-for="(tool, idx) in currentScenarioData.tools" 
                 :key="idx"
@@ -68,14 +107,27 @@
               >
                 <div class="tool-status">
                   <span v-if="toolExecuted > idx">✅</span>
-                  <span v-else-if="toolExecuting === idx" class="spinner">⏳</span>
+                  <span
+                    v-else-if="toolExecuting === idx"
+                    class="spinner"
+                  >⏳</span>
                   <span v-else>⏸️</span>
                 </div>
                 <div class="tool-info">
-                  <div class="tool-name">{{ tool.name }}</div>
-                  <div v-if="toolExecuted > idx || toolExecuting === idx" class="tool-detail">
+                  <div class="tool-name">
+                    {{ tool.name }}
+                  </div>
+                  <div
+                    v-if="toolExecuted > idx || toolExecuting === idx"
+                    class="tool-detail"
+                  >
                     <code class="tool-params">{{ tool.params }}</code>
-                    <div v-if="toolExecuted > idx" class="tool-result">{{ tool.result }}</div>
+                    <div
+                      v-if="toolExecuted > idx"
+                      class="tool-result"
+                    >
+                      {{ tool.result }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -83,16 +135,31 @@
           </div>
 
           <!-- 最终回复 -->
-          <div v-if="showResponse" class="final-response">
-            <div class="response-header">💬 最终回复</div>
-            <div class="response-content">{{ currentScenarioData.agentResponse }}</div>
+          <div
+            v-if="showResponse"
+            class="final-response"
+          >
+            <div class="response-header">
+              💬 最终回复
+            </div>
+            <div class="response-content">
+              {{ currentScenarioData.agentResponse }}
+            </div>
           </div>
 
           <!-- 执行按钮 -->
-          <button v-if="!isExecuting && !executionComplete" class="execute-btn" @click="startExecution">
+          <button
+            v-if="!isExecuting && !executionComplete"
+            class="execute-btn"
+            @click="startExecution"
+          >
             ▶ 让 Agent 执行
           </button>
-          <button v-else-if="executionComplete" class="execute-btn reset" @click="reset">
+          <button
+            v-else-if="executionComplete"
+            class="execute-btn reset"
+            @click="reset"
+          >
             🔄 重置对话
           </button>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue
index 054f46e..b8f4bf8 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue
@@ -6,21 +6,25 @@
   <div class="flow">
     <div class="header">
       <div>
-        <div class="title">任务回放：Agent 怎么一步步做完？</div>
-        <div class="subtitle">点步骤，看“工具调用”和“中间结果”。</div>
+        <div class="title">
+          任务回放：Agent 怎么一步步做完？
+        </div>
+        <div class="subtitle">
+          点步骤，看“工具调用”和“中间结果”。
+        </div>
       </div>
       <div class="actions">
         <button
           class="btn"
-          @click="step = Math.max(0, step - 1)"
           :disabled="step === 0"
+          @click="step = Math.max(0, step - 1)"
         >
           上一步
         </button>
         <button
           class="btn primary"
-          @click="step = Math.min(steps.length - 1, step + 1)"
           :disabled="step === steps.length - 1"
+          @click="step = Math.min(steps.length - 1, step + 1)"
         >
           下一步
         </button>
@@ -41,15 +45,23 @@
 
     <div class="grid">
       <div class="panel">
-        <div class="panel-title">当前步骤</div>
-        <div class="panel-body">{{ steps[step].desc }}</div>
+        <div class="panel-title">
+          当前步骤
+        </div>
+        <div class="panel-body">
+          {{ steps[step].desc }}
+        </div>
       </div>
       <div class="panel">
-        <div class="panel-title">工具调用（示意）</div>
+        <div class="panel-title">
+          工具调用（示意）
+        </div>
         <pre><code>{{ steps[step].tool }}</code></pre>
       </div>
       <div class="panel">
-        <div class="panel-title">结果（示意）</div>
+        <div class="panel-title">
+          结果（示意）
+        </div>
         <pre><code>{{ steps[step].result }}</code></pre>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentToolUseDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentToolUseDemo.vue
index 79092a4..6d3e6e1 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentToolUseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentToolUseDemo.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="tool-use-demo">
     <div class="header">
-      <div class="title">🔧 揭秘：Agent 如何调用工具？</div>
+      <div class="title">
+        🔧 揭秘：Agent 如何调用工具？
+      </div>
     </div>
 
     <!-- 场景选择 -->
@@ -24,35 +26,73 @@
     </div>
 
     <!-- 横向流程 -->
-    <div ref="flowRowRef" class="flow-row">
+    <div
+      ref="flowRowRef"
+      class="flow-row"
+    >
       <!-- 步骤1: 理解 -->
-      <div class="flow-card" :class="{ active: currentStep >= 1 }">
-        <div class="card-num">1</div>
+      <div
+        class="flow-card"
+        :class="{ active: currentStep >= 1 }"
+      >
+        <div class="card-num">
+          1
+        </div>
         <div class="card-body">
-          <div class="card-title">分析需求</div>
-          <div v-if="currentStep >= 1" class="card-content">
+          <div class="card-title">
+            分析需求
+          </div>
+          <div
+            v-if="currentStep >= 1"
+            class="card-content"
+          >
             <div class="intent-box">
-              <div class="intent-label">用户想要：</div>
-              <div class="intent-value">{{ currentData.intent.type }}</div>
+              <div class="intent-label">
+                用户想要：
+              </div>
+              <div class="intent-value">
+                {{ currentData.intent.type }}
+              </div>
             </div>
             <div class="extract-box">
-              <div class="extract-label">提取信息：</div>
+              <div class="extract-label">
+                提取信息：
+              </div>
               <div class="extract-tags">
-                <span v-for="(e, i) in currentData.intent.entities" :key="i" class="entity">{{ e }}</span>
+                <span
+                  v-for="(e, i) in currentData.intent.entities"
+                  :key="i"
+                  class="entity"
+                >{{ e }}</span>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="flow-arrow" :class="{ active: currentStep >= 2 }">→</div>
+      <div
+        class="flow-arrow"
+        :class="{ active: currentStep >= 2 }"
+      >
+        →
+      </div>
 
       <!-- 步骤2: 选工具 -->
-      <div class="flow-card" :class="{ active: currentStep >= 2 }">
-        <div class="card-num">2</div>
+      <div
+        class="flow-card"
+        :class="{ active: currentStep >= 2 }"
+      >
+        <div class="card-num">
+          2
+        </div>
         <div class="card-body">
-          <div class="card-title">选择工具</div>
-          <div v-if="currentStep >= 2" class="card-content">
+          <div class="card-title">
+            选择工具
+          </div>
+          <div
+            v-if="currentStep >= 2"
+            class="card-content"
+          >
             <div class="tool-list">
               <div
                 v-for="tool in currentData.availableTools.slice(0, 2)"
@@ -62,34 +102,67 @@
               >
                 <span>{{ tool.icon }}</span>
                 <span class="tool-name">{{ tool.name }}</span>
-                <span v-if="tool.selected" class="check">✓</span>
+                <span
+                  v-if="tool.selected"
+                  class="check"
+                >✓</span>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="flow-arrow" :class="{ active: currentStep >= 3 }">→</div>
+      <div
+        class="flow-arrow"
+        :class="{ active: currentStep >= 3 }"
+      >
+        →
+      </div>
 
       <!-- 步骤3: 构造参数 -->
-      <div class="flow-card" :class="{ active: currentStep >= 3 }">
-        <div class="card-num">3</div>
+      <div
+        class="flow-card"
+        :class="{ active: currentStep >= 3 }"
+      >
+        <div class="card-num">
+          3
+        </div>
         <div class="card-body">
-          <div class="card-title">构造参数</div>
-          <div v-if="currentStep >= 3" class="card-content">
+          <div class="card-title">
+            构造参数
+          </div>
+          <div
+            v-if="currentStep >= 3"
+            class="card-content"
+          >
             <code class="params-code">{{ JSON.stringify(currentData.finalParams.params) }}</code>
           </div>
         </div>
       </div>
 
-      <div class="flow-arrow" :class="{ active: currentStep >= 4 }">→</div>
+      <div
+        class="flow-arrow"
+        :class="{ active: currentStep >= 4 }"
+      >
+        →
+      </div>
 
       <!-- 步骤4: 执行 -->
-      <div class="flow-card" :class="{ active: currentStep >= 4 }">
-        <div class="card-num">4</div>
+      <div
+        class="flow-card"
+        :class="{ active: currentStep >= 4 }"
+      >
+        <div class="card-num">
+          4
+        </div>
         <div class="card-body">
-          <div class="card-title">执行返回</div>
-          <div v-if="currentStep >= 4" class="card-content">
+          <div class="card-title">
+            执行返回
+          </div>
+          <div
+            v-if="currentStep >= 4"
+            class="card-content"
+          >
             <div class="exec-flow">
               <span class="from">Agent</span>
               <span class="arrow">→</span>
@@ -103,25 +176,44 @@
     </div>
 
     <!-- 最终结果 -->
-    <div v-if="currentStep >= 4" class="final-result">
+    <div
+      v-if="currentStep >= 4"
+      class="final-result"
+    >
       <span class="result-label">💬 回复：</span>
       <span class="result-text">{{ currentData.finalResponse }}</span>
     </div>
 
     <!-- 控制栏 -->
     <div class="control-bar">
-      <button v-if="currentStep === 0" class="ctrl-btn primary" @click="nextStep">
+      <button
+        v-if="currentStep === 0"
+        class="ctrl-btn primary"
+        @click="nextStep"
+      >
         ▶ 开始演示
       </button>
-      <button v-else-if="currentStep < 4" class="ctrl-btn primary" @click="nextStep">
+      <button
+        v-else-if="currentStep < 4"
+        class="ctrl-btn primary"
+        @click="nextStep"
+      >
         下一步 →
       </button>
-      <button v-else class="ctrl-btn" @click="reset">
+      <button
+        v-else
+        class="ctrl-btn"
+        @click="reset"
+      >
         🔄 重置
       </button>
       
       <div class="step-dots">
-        <span v-for="n in 4" :key="n" :class="['dot', { active: currentStep >= n }]"></span>
+        <span
+          v-for="n in 4"
+          :key="n"
+          :class="['dot', { active: currentStep >= n }]"
+        />
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue
index c53fe8e..eb17e92 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/AgentWorkflowDemo.vue
@@ -8,12 +8,24 @@
   <div class="workflow">
     <div class="header">
       <div>
-        <div class="title">先玩一下：Agent 不是“聊天”，是“循环行动”</div>
-        <div class="subtitle">它会反复：观察 → 计划 → 用工具 → 检查结果。</div>
+        <div class="title">
+          先玩一下：Agent 不是“聊天”，是“循环行动”
+        </div>
+        <div class="subtitle">
+          它会反复：观察 → 计划 → 用工具 → 检查结果。
+        </div>
       </div>
       <div class="actions">
-        <button class="btn" @click="reset">重置</button>
-        <button class="btn primary" @click="nextRound">
+        <button
+          class="btn"
+          @click="reset"
+        >
+          重置
+        </button>
+        <button
+          class="btn primary"
+          @click="nextRound"
+        >
           下一轮 ({{ round }}/3)
         </button>
       </div>
@@ -33,19 +45,27 @@
 
     <div class="panels">
       <div class="panel">
-        <div class="panel-title">任务</div>
+        <div class="panel-title">
+          任务
+        </div>
         <div class="panel-body">
           帮我找 3 篇 “Agent” 入门文章，并输出：标题 + 一句话总结。
         </div>
       </div>
       <div class="panel">
-        <div class="panel-title">这一轮发生了什么？</div>
-        <div class="panel-body">{{ detail }}</div>
+        <div class="panel-title">
+          这一轮发生了什么？
+        </div>
+        <div class="panel-body">
+          {{ detail }}
+        </div>
       </div>
     </div>
 
     <div class="log">
-      <div class="log-title">Agent 运行日志（示意）</div>
+      <div class="log-title">
+        Agent 运行日志（示意）
+      </div>
       <pre><code>{{ logText }}</code></pre>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue
index a1da030..ebf0817 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkComparisonDemo.vue
@@ -6,8 +6,12 @@
   <div class="cmp">
     <div class="header">
       <div>
-        <div class="title">主流框架对比（先看“适配度”）</div>
-        <div class="subtitle">先选你的关注点，再看推荐。</div>
+        <div class="title">
+          主流框架对比（先看“适配度”）
+        </div>
+        <div class="subtitle">
+          先选你的关注点，再看推荐。
+        </div>
       </div>
       <div class="focus">
         <button
@@ -34,17 +38,25 @@
         :key="fw.name"
         :class="['row', { best: fw.name === best }]"
       >
-        <div class="name">{{ fw.name }}</div>
+        <div class="name">
+          {{ fw.name }}
+        </div>
         <div>{{ fw.learn }}</div>
         <div>{{ fw.control }}</div>
         <div>{{ fw.multi }}</div>
-        <div class="use">{{ fw.use }}</div>
+        <div class="use">
+          {{ fw.use }}
+        </div>
       </div>
     </div>
 
     <div class="rec">
-      <div class="rec-title">此刻更推荐：{{ best }}</div>
-      <div class="rec-body">{{ reason }}</div>
+      <div class="rec-title">
+        此刻更推荐：{{ best }}
+      </div>
+      <div class="rec-body">
+        {{ reason }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue
index 5447f73..8814186 100644
--- a/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/agent-intro/FrameworkSelectionDemo.vue
@@ -6,13 +6,19 @@
   <div class="sel">
     <div class="header">
       <div>
-        <div class="title">三问选框架</div>
-        <div class="subtitle">目标：先跑通一个最小 Agent，再逐步增强。</div>
+        <div class="title">
+          三问选框架
+        </div>
+        <div class="subtitle">
+          目标：先跑通一个最小 Agent，再逐步增强。
+        </div>
       </div>
     </div>
 
     <div class="q">
-      <div class="q-title">1) 你更在乎什么？</div>
+      <div class="q-title">
+        1) 你更在乎什么？
+      </div>
       <div class="opts">
         <button
           v-for="o in q1"
@@ -26,7 +32,9 @@
     </div>
 
     <div class="q">
-      <div class="q-title">2) 你的任务像哪种？</div>
+      <div class="q-title">
+        2) 你的任务像哪种？
+      </div>
       <div class="opts">
         <button
           v-for="o in q2"
@@ -40,7 +48,9 @@
     </div>
 
     <div class="q">
-      <div class="q-title">3) 需要多 Agent 分工吗？</div>
+      <div class="q-title">
+        3) 需要多 Agent 分工吗？
+      </div>
       <div class="opts">
         <button
           v-for="o in q3"
@@ -54,10 +64,18 @@
     </div>
 
     <div class="result">
-      <div class="r-title">推荐：{{ rec.name }}</div>
-      <div class="r-body">{{ rec.reason }}</div>
-      <div class="r-note"><strong>注意：</strong>{{ rec.note }}</div>
-      <div class="r-next"><strong>下一步：</strong>{{ rec.next }}</div>
+      <div class="r-title">
+        推荐：{{ rec.name }}
+      </div>
+      <div class="r-body">
+        {{ rec.reason }}
+      </div>
+      <div class="r-note">
+        <strong>注意：</strong>{{ rec.note }}
+      </div>
+      <div class="r-next">
+        <strong>下一步：</strong>{{ rec.next }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
index ca65dd5..962c5a0 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
@@ -1,15 +1,24 @@
 <template>
   <div class="ai-evolution-timeline-demo">
-    <el-card shadow="hover" class="main-card">
+    <el-card
+      shadow="hover"
+      class="main-card"
+    >
       <template #header>
         <div class="card-header">
           <h3>AI 进化时间轴</h3>
-          <p class="subtitle">点击不同时期，查看 AI 是如何一步步进化的</p>
+          <p class="subtitle">
+            点击不同时期，查看 AI 是如何一步步进化的
+          </p>
         </div>
       </template>
 
       <div class="demo-content">
-        <el-tabs v-model="activeEraName" type="border-card" class="timeline-tabs">
+        <el-tabs
+          v-model="activeEraName"
+          type="border-card"
+          class="timeline-tabs"
+        >
           <el-tab-pane
             v-for="(era, index) in eras"
             :key="index"
@@ -18,19 +27,32 @@
           >
             <div class="era-content">
               <div class="era-header">
-                <el-tag effect="dark" size="large" class="year-tag">{{ era.year }}</el-tag>
+                <el-tag
+                  effect="dark"
+                  size="large"
+                  class="year-tag"
+                >
+                  {{ era.year }}
+                </el-tag>
                 <span class="era-desc-short">{{ era.desc }}</span>
               </div>
               
               <div class="era-body">
-                <p class="full-desc">{{ era.fullDesc }}</p>
+                <p class="full-desc">
+                  {{ era.fullDesc }}
+                </p>
                 
                 <div class="info-grid">
                   <div class="info-column">
                     <span class="column-title">💡 核心特点</span>
                     <ul class="key-points-list">
-                      <li v-for="(point, i) in era.keyPoints" :key="i">
-                        <el-icon class="point-icon"><CaretRight /></el-icon>
+                      <li
+                        v-for="(point, i) in era.keyPoints"
+                        :key="i"
+                      >
+                        <el-icon class="point-icon">
+                          <CaretRight />
+                        </el-icon>
                         {{ point }}
                       </li>
                     </ul>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
index 103a423..edf1468 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
@@ -1,27 +1,54 @@
 <template>
   <div class="evolution-demo">
-    <el-card class="main-card" shadow="hover">
+    <el-card
+      class="main-card"
+      shadow="hover"
+    >
       <template #header>
         <div class="header-container">
           <div class="title-area">
             <span class="main-title">AI 进化模拟器</span>
           </div>
-          <el-steps :active="currentStage" finish-status="success" align-center class="compact-steps" simple>
-            <el-step v-for="stage in stages" :key="stage.id" :title="stage.label" />
+          <el-steps
+            :active="currentStage"
+            finish-status="success"
+            align-center
+            class="compact-steps"
+            simple
+          >
+            <el-step
+              v-for="stage in stages"
+              :key="stage.id"
+              :title="stage.label"
+            />
           </el-steps>
         </div>
       </template>
 
       <!-- Stage 1: Rule Based (Traffic Light Example) -->
-      <div v-if="currentStage === 0" class="stage-pane">
-        <el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
-          <template #title><span class="alert-title">阶段一：规则时代 (Rule-Based)</span></template>
-          <template #default><span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span></template>
+      <div
+        v-if="currentStage === 0"
+        class="stage-pane"
+      >
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+          class="compact-alert mb-2"
+        >
+          <template #title>
+            <span class="alert-title">阶段一：规则时代 (Rule-Based)</span>
+          </template>
+          <template #default>
+            <span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span>
+          </template>
         </el-alert>
         
         <div class="game-area-grid">
           <div class="panel left-panel">
-            <div class="panel-header">规则库 (Code)</div>
+            <div class="panel-header">
+              规则库 (Code)
+            </div>
             <div class="code-block">
               <div class="code-line">
                 <span class="keyword">function</span> <span class="function">decideTrafficLight</span>(color) {
@@ -35,27 +62,55 @@
               <div class="code-line indent">
                 <span class="keyword">else if</span> (color === <span class="string">'green'</span>) <span class="keyword">return</span> <span class="string">'go'</span>
               </div>
-              <div class="code-line">}</div>
+              <div class="code-line">
+                }
+              </div>
             </div>
           </div>
           <div class="panel right-panel">
-            <div class="panel-header">测试输入</div>
+            <div class="panel-header">
+              测试输入
+            </div>
             <div class="input-controls">
-              <el-select v-model="ruleColor" size="small" style="width: 120px;">
-                <el-option value="red" label="🔴 红灯" />
-                <el-option value="yellow" label="🟡 黄灯" />
-                <el-option value="green" label="🟢 绿灯" />
-                <el-option value="blue" label="🔵 蓝灯" />
+              <el-select
+                v-model="ruleColor"
+                size="small"
+                style="width: 120px;"
+              >
+                <el-option
+                  value="red"
+                  label="🔴 红灯"
+                />
+                <el-option
+                  value="yellow"
+                  label="🟡 黄灯"
+                />
+                <el-option
+                  value="green"
+                  label="🟢 绿灯"
+                />
+                <el-option
+                  value="blue"
+                  label="🔵 蓝灯"
+                />
               </el-select>
-              <div class="arrow">→</div>
+              <div class="arrow">
+                →
+              </div>
               <el-tag :type="ruleResult === 'stop' ? 'danger' : ruleResult === 'caution' ? 'warning' : ruleResult === 'go' ? 'success' : 'info'">
                 {{ ruleResult }}
               </el-tag>
             </div>
-            <div class="hint-text" v-if="ruleResult === 'Unknown'">
+            <div
+              v-if="ruleResult === 'Unknown'"
+              class="hint-text"
+            >
               规则库中没有定义"蓝灯"，所以系统不知道该做什么。这就是规则系统的局限性：无法处理未定义的规则。
             </div>
-            <div class="hint-text" v-else>
+            <div
+              v-else
+              class="hint-text"
+            >
               系统严格按照预定义的规则执行指令。
             </div>
           </div>
@@ -63,122 +118,245 @@
       </div>
 
       <!-- Stage 2: Machine Learning (Interactive 2D Plot) -->
-      <div v-else-if="currentStage === 1" class="stage-pane">
-        <el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
-          <template #title><span class="alert-title">阶段二：机器学习 (Machine Learning)</span></template>
-          <template #default><span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span></template>
+      <div
+        v-else-if="currentStage === 1"
+        class="stage-pane"
+      >
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+          class="compact-alert mb-2"
+        >
+          <template #title>
+            <span class="alert-title">阶段二：机器学习 (Machine Learning)</span>
+          </template>
+          <template #default>
+            <span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span>
+          </template>
         </el-alert>
 
         <div class="game-area-grid">
-          <div class="panel left-panel canvas-container" @click="addPoint">
-             <!-- Simple SVG Plot -->
-             <svg width="100%" height="200" class="ml-plot">
-                <!-- Background Regions (Visible after training) -->
-                <rect v-if="modelTrained" x="0" y="0" width="100%" height="100%" :fill="boundaryColor" />
+          <div
+            class="panel left-panel canvas-container"
+            @click="addPoint"
+          >
+            <!-- Simple SVG Plot -->
+            <svg
+              width="100%"
+              height="200"
+              class="ml-plot"
+            >
+              <!-- Background Regions (Visible after training) -->
+              <rect
+                v-if="modelTrained"
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+                :fill="boundaryColor"
+              />
                 
-                <!-- Decision Line -->
-                <line v-if="modelTrained" :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2" stroke="#333" stroke-width="2" stroke-dasharray="4" />
+              <!-- Decision Line -->
+              <line
+                v-if="modelTrained"
+                :x1="line.x1"
+                :y1="line.y1"
+                :x2="line.x2"
+                :y2="line.y2"
+                stroke="#333"
+                stroke-width="2"
+                stroke-dasharray="4"
+              />
 
-                <!-- Points -->
-                <circle 
-                  v-for="(p, i) in points" 
-                  :key="i" 
-                  :cx="p.x" 
-                  :cy="p.y" 
-                  r="6" 
-                  :fill="p.type === 'A' ? '#409eff' : '#e6a23c'" 
-                  stroke="white" 
-                  stroke-width="2" 
-                />
-             </svg>
-             <div class="canvas-hint" v-if="points.length === 0">👆 点击此处添加数据点</div>
+              <!-- Points -->
+              <circle 
+                v-for="(p, i) in points" 
+                :key="i" 
+                :cx="p.x" 
+                :cy="p.y" 
+                r="6" 
+                :fill="p.type === 'A' ? '#409eff' : '#e6a23c'" 
+                stroke="white" 
+                stroke-width="2" 
+              />
+            </svg>
+            <div
+              v-if="points.length === 0"
+              class="canvas-hint"
+            >
+              👆 点击此处添加数据点
+            </div>
           </div>
 
           <div class="panel right-panel">
-            <div class="panel-header">控制面板</div>
+            <div class="panel-header">
+              控制面板
+            </div>
             <div class="control-group">
               <span class="label">当前类别:</span>
-              <el-radio-group v-model="currentClass" size="small">
-                <el-radio-button label="A"><span style="color: #409eff">● 蓝类</span></el-radio-button>
-                <el-radio-button label="B"><span style="color: #e6a23c">● 橙类</span></el-radio-button>
+              <el-radio-group
+                v-model="currentClass"
+                size="small"
+              >
+                <el-radio-button label="A">
+                  <span style="color: #409eff">● 蓝类</span>
+                </el-radio-button>
+                <el-radio-button label="B">
+                  <span style="color: #e6a23c">● 橙类</span>
+                </el-radio-button>
               </el-radio-group>
             </div>
             
             <div class="control-group mt-2">
-              <el-button type="primary" size="small" @click="trainLinearModel" :disabled="points.length < 2">
+              <el-button
+                type="primary"
+                size="small"
+                :disabled="points.length < 2"
+                @click="trainLinearModel"
+              >
                 ⚡ 开始训练 (Fit)
               </el-button>
-              <el-button size="small" :icon="Delete" circle @click="clearPoints" />
+              <el-button
+                size="small"
+                :icon="Delete"
+                circle
+                @click="clearPoints"
+              />
             </div>
 
             <div class="stats-info mt-2">
-              <p v-if="!modelTrained" class="text-desc">机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。</p>
-              <p v-else class="text-desc">模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。</p>
+              <p
+                v-if="!modelTrained"
+                class="text-desc"
+              >
+                机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。
+              </p>
+              <p
+                v-else
+                class="text-desc"
+              >
+                模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。
+              </p>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Stage 3: Deep Learning (3x3 Grid Feature Extraction) -->
-      <div v-else class="stage-pane">
-        <el-alert type="info" :closable="false" show-icon class="compact-alert mb-2">
-          <template #title><span class="alert-title">阶段三：深度学习 (Deep Learning)</span></template>
-          <template #default><span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span></template>
+      <div
+        v-else
+        class="stage-pane"
+      >
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+          class="compact-alert mb-2"
+        >
+          <template #title>
+            <span class="alert-title">阶段三：深度学习 (Deep Learning)</span>
+          </template>
+          <template #default>
+            <span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span>
+          </template>
         </el-alert>
 
         <div class="game-area-grid">
           <div class="panel left-panel grid-container">
-             <div class="pixel-grid">
-               <div 
-                 v-for="(pixel, i) in pixels" 
-                 :key="i" 
-                 class="pixel" 
-                 :class="{ active: pixel }"
-                 @click="togglePixel(i)"
-               ></div>
-             </div>
-             <div class="grid-actions">
-               <el-button size="small" link @click="preset('x')">❌ X型</el-button>
-               <el-button size="small" link @click="preset('plus')">➕ 十字</el-button>
-               <el-button size="small" link @click="clearPixels">清空</el-button>
-             </div>
+            <div class="pixel-grid">
+              <div 
+                v-for="(pixel, i) in pixels" 
+                :key="i" 
+                class="pixel" 
+                :class="{ active: pixel }"
+                @click="togglePixel(i)"
+              />
+            </div>
+            <div class="grid-actions">
+              <el-button
+                size="small"
+                link
+                @click="preset('x')"
+              >
+                ❌ X型
+              </el-button>
+              <el-button
+                size="small"
+                link
+                @click="preset('plus')"
+              >
+                ➕ 十字
+              </el-button>
+              <el-button
+                size="small"
+                link
+                @click="clearPixels"
+              >
+                清空
+              </el-button>
+            </div>
           </div>
 
           <div class="panel right-panel">
-            <div class="panel-header">神经网络层级透视</div>
+            <div class="panel-header">
+              神经网络层级透视
+            </div>
             
             <!-- Visualization of Layers -->
             <div class="network-viz">
               <div class="layer input-layer">
-                <div class="layer-label">输入层 (Pixels)</div>
+                <div class="layer-label">
+                  输入层 (Pixels)
+                </div>
                 <div class="nodes">
-                  <span v-for="n in 9" :key="n" class="node mini" :class="{active: pixels[n-1]}"></span>
+                  <span
+                    v-for="n in 9"
+                    :key="n"
+                    class="node mini"
+                    :class="{active: pixels[n-1]}"
+                  />
                 </div>
               </div>
               
-              <div class="arrow-down">⬇️ 卷积/提取特征</div>
+              <div class="arrow-down">
+                ⬇️ 卷积/提取特征
+              </div>
 
               <div class="layer hidden-layer">
-                <div class="layer-label">隐藏层 (Features)</div>
+                <div class="layer-label">
+                  隐藏层 (Features)
+                </div>
                 <div class="feature-detectors">
-                  <div class="feature" :class="{detected: features.center}">
+                  <div
+                    class="feature"
+                    :class="{detected: features.center}"
+                  >
                     <span class="f-icon">⏺</span> 中心点
                   </div>
-                  <div class="feature" :class="{detected: features.corners}">
+                  <div
+                    class="feature"
+                    :class="{detected: features.corners}"
+                  >
                     <span class="f-icon">Corners</span> 四角
                   </div>
-                  <div class="feature" :class="{detected: features.cross}">
+                  <div
+                    class="feature"
+                    :class="{detected: features.cross}"
+                  >
                     <span class="f-icon">➕</span> 交叉
                   </div>
                 </div>
               </div>
 
-              <div class="arrow-down">⬇️ 输出层</div>
+              <div class="arrow-down">
+                ⬇️ 输出层
+              </div>
 
               <div class="layer output-layer">
-                 <div class="prediction-box">
-                   识别结果: <span class="result-text">{{ prediction }}</span>
-                 </div>
+                <div class="prediction-box">
+                  识别结果: <span class="result-text">{{ prediction }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -187,12 +365,24 @@
 
       <!-- Footer Navigation -->
       <div class="footer-nav mt-2 flex justify-end">
-         <el-button-group>
-          <el-button size="small" :disabled="currentStage === 0" @click="currentStage--">上一步</el-button>
-          <el-button size="small" type="primary" :disabled="currentStage === 2" @click="currentStage++">下一步</el-button>
+        <el-button-group>
+          <el-button
+            size="small"
+            :disabled="currentStage === 0"
+            @click="currentStage--"
+          >
+            上一步
+          </el-button>
+          <el-button
+            size="small"
+            type="primary"
+            :disabled="currentStage === 2"
+            @click="currentStage++"
+          >
+            下一步
+          </el-button>
         </el-button-group>
       </div>
-
     </el-card>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
index 2dbf367..8a928d1 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
@@ -4,7 +4,9 @@
       <template #header>
         <div class="card-header">
           <h4>👁️ 注意力机制演示</h4>
-          <p class="subtitle">点击词语，观察它如何"关注"句子中的其他词</p>
+          <p class="subtitle">
+            点击词语，观察它如何"关注"句子中的其他词
+          </p>
         </div>
       </template>
 
@@ -22,13 +24,18 @@
           </el-tag>
         </div>
 
-        <div class="attention-bars" v-if="activeIndex !== null">
+        <div
+          v-if="activeIndex !== null"
+          class="attention-bars"
+        >
           <div
             v-for="(attention, index) in attentionWeights"
             :key="index"
             class="attention-item"
           >
-            <div class="word-label">{{ attention.word }}</div>
+            <div class="word-label">
+              {{ attention.word }}
+            </div>
             <el-progress
               :percentage="Math.round(attention.weight * 100)"
               :status="attention.weight > 0.5 ? 'exception' : ''"
@@ -45,7 +52,10 @@
       </div>
 
       <el-collapse-transition>
-        <div v-if="activeIndex !== null" class="explanation-panel">
+        <div
+          v-if="activeIndex !== null"
+          class="explanation-panel"
+        >
           <el-alert
             type="success"
             :closable="false"
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
index 98e9331..bcfd67d 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
@@ -4,15 +4,23 @@
       <template #header>
         <div class="card-header">
           <h4>🔄 反向传播演示</h4>
-          <p class="subtitle">观察神经网络如何通过误差反向调整权重</p>
+          <p class="subtitle">
+            观察神经网络如何通过误差反向调整权重
+          </p>
         </div>
       </template>
 
       <div class="demo-content">
         <div class="network-view">
-          <svg class="network-svg" viewBox="0 0 600 300">
+          <svg
+            class="network-svg"
+            viewBox="0 0 600 300"
+          >
             <!-- Layers visualization -->
-            <g v-for="(layer, lIndex) in 3" :key="lIndex">
+            <g
+              v-for="(layer, lIndex) in 3"
+              :key="lIndex"
+            >
               <text
                 :x="100 + lIndex * 200"
                 y="20"
@@ -54,7 +62,11 @@
         <el-divider />
 
         <div class="controls-panel">
-          <el-steps :active="currentStep" align-center finish-status="success">
+          <el-steps
+            :active="currentStep"
+            align-center
+            finish-status="success"
+          >
             <el-step
               v-for="(step, index) in steps"
               :key="index"
@@ -84,13 +96,16 @@
           />
 
           <div class="action-buttons mt-4 flex justify-center gap-4">
-            <el-button @click="resetDemo" :disabled="currentStep === 0">
+            <el-button
+              :disabled="currentStep === 0"
+              @click="resetDemo"
+            >
               重置
             </el-button>
             <el-button
               type="primary"
-              @click="nextStep"
               :disabled="currentStep >= 4"
+              @click="nextStep"
             >
               {{ currentStep < 4 ? '下一步' : '完成' }}
             </el-button>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
index 87a6aa2..90e5add 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
@@ -4,7 +4,9 @@
       <template #header>
         <div class="card-header">
           <h4>🎯 组合爆炸模拟器</h4>
-          <p class="subtitle">亲手体验"规则指数增长"的恐怖</p>
+          <p class="subtitle">
+            亲手体验"规则指数增长"的恐怖
+          </p>
         </div>
       </template>
 
@@ -38,9 +40,7 @@
           <div class="control-item">
             <div class="label-row">
               <span class="label-icon">🔢</span>
-              <span class="label-text"
-                >每个特征的可能值: {{ valuesPerFeature }}</span
-              >
+              <span class="label-text">每个特征的可能值: {{ valuesPerFeature }}</span>
             </div>
             <el-slider
               v-model="valuesPerFeature"
@@ -62,12 +62,14 @@
               value-style="font-weight: bold; color: var(--el-color-primary)"
             >
               <template #suffix>
-                <span class="formula-suffix"
-                  >= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span
-                >
+                <span class="formula-suffix">= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span>
               </template>
             </el-statistic>
-            <el-tag :type="complexityInfo.type" effect="dark" class="mt-2">
+            <el-tag
+              :type="complexityInfo.type"
+              effect="dark"
+              class="mt-2"
+            >
               {{ complexityInfo.label }}
             </el-tag>
           </div>
@@ -75,30 +77,38 @@
           <div class="action-buttons mt-4">
             <el-button
               type="primary"
-              @click="addRule"
               :disabled="ruleCount >= maxRules"
+              @click="addRule"
             >
               ✨ 添加规则 ({{ ruleCount }}/{{ maxRules }})
             </el-button>
-            <el-button @click="resetRules">🔄 重置</el-button>
+            <el-button @click="resetRules">
+              🔄 重置
+            </el-button>
           </div>
 
           <div class="rules-container mt-4">
-            <transition-group name="el-zoom-in-center" tag="div" class="rules-grid">
+            <transition-group
+              name="el-zoom-in-center"
+              tag="div"
+              class="rules-grid"
+            >
               <div
                 v-for="(rule, index) in displayedRules"
                 :key="rule.id"
                 class="rule-card-mini"
                 :style="{ borderColor: rule.color }"
               >
-                <div class="rule-idx">#{{ index + 1 }}</div>
+                <div class="rule-idx">
+                  #{{ index + 1 }}
+                </div>
                 <div class="rule-dots">
                   <span
                     v-for="d in 3"
                     :key="d"
                     class="dot"
                     :style="{ backgroundColor: rule.color }"
-                  ></span>
+                  />
                 </div>
               </div>
             </transition-group>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
index ebf6b9c..41e87e8 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
@@ -4,14 +4,19 @@
       <template #header>
         <div class="card-header">
           <h4>🎯 判别式 vs 生成式 AI</h4>
-          <p class="subtitle">理解两种不同的 AI 范式</p>
+          <p class="subtitle">
+            理解两种不同的 AI 范式
+          </p>
         </div>
       </template>
 
       <div class="comparison-container">
         <el-row :gutter="20">
           <!-- Discriminative AI -->
-          <el-col :xs="24" :sm="12">
+          <el-col
+            :xs="24"
+            :sm="12"
+          >
             <el-card
               shadow="always"
               class="ai-panel discriminative"
@@ -19,15 +24,24 @@
               @click="mode = 'discriminative'"
             >
               <div class="panel-header">
-                <div class="icon">🔍</div>
+                <div class="icon">
+                  🔍
+                </div>
                 <h5>判别式 AI</h5>
-                <el-tag size="small" type="success">分类/识别</el-tag>
+                <el-tag
+                  size="small"
+                  type="success"
+                >
+                  分类/识别
+                </el-tag>
               </div>
 
               <div class="panel-content">
                 <div class="input-output">
                   <div class="io-box input">
-                    <div class="io-label">输入</div>
+                    <div class="io-label">
+                      输入
+                    </div>
                     <div class="io-content">
                       <div class="svg-placeholder green">
                         <span class="svg-text">猫图</span>
@@ -40,10 +54,19 @@
                   </div>
 
                   <div class="io-box output">
-                    <div class="io-label">输出</div>
+                    <div class="io-label">
+                      输出
+                    </div>
                     <div class="io-content">
-                      <el-tag effect="dark" type="success">这是猫</el-tag>
-                      <div class="probability">置信度: 98%</div>
+                      <el-tag
+                        effect="dark"
+                        type="success"
+                      >
+                        这是猫
+                      </el-tag>
+                      <div class="probability">
+                        置信度: 98%
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -52,8 +75,6 @@
                   <h6>典型应用:</h6>
                   <div class="example-tags">
                     <el-tag
-                      size="small"
-                      effect="plain"
                       v-for="tag in [
                         '图像分类',
                         '垃圾邮件过滤',
@@ -61,8 +82,11 @@
                         '人脸识别'
                       ]"
                       :key="tag"
-                      >{{ tag }}</el-tag
+                      size="small"
+                      effect="plain"
                     >
+                      {{ tag }}
+                    </el-tag>
                   </div>
                 </div>
               </div>
@@ -70,7 +94,10 @@
           </el-col>
 
           <!-- Generative AI -->
-          <el-col :xs="24" :sm="12">
+          <el-col
+            :xs="24"
+            :sm="12"
+          >
             <el-card
               shadow="always"
               class="ai-panel generative"
@@ -78,17 +105,28 @@
               @click="mode = 'generative'"
             >
               <div class="panel-header">
-                <div class="icon">✨</div>
+                <div class="icon">
+                  ✨
+                </div>
                 <h5>生成式 AI</h5>
-                <el-tag size="small" type="primary">创造/生成</el-tag>
+                <el-tag
+                  size="small"
+                  type="primary"
+                >
+                  创造/生成
+                </el-tag>
               </div>
 
               <div class="panel-content">
                 <div class="input-output">
                   <div class="io-box input">
-                    <div class="io-label">输入</div>
+                    <div class="io-label">
+                      输入
+                    </div>
                     <div class="io-content">
-                      <div class="prompt-text">"一只戴墨镜的猫"</div>
+                      <div class="prompt-text">
+                        "一只戴墨镜的猫"
+                      </div>
                     </div>
                   </div>
 
@@ -97,7 +135,9 @@
                   </div>
 
                   <div class="io-box output">
-                    <div class="io-label">输出</div>
+                    <div class="io-label">
+                      输出
+                    </div>
                     <div class="io-content">
                       <div class="svg-placeholder blue">
                         <span class="svg-text">生成图像 ✓</span>
@@ -110,9 +150,6 @@
                   <h6>典型应用:</h6>
                   <div class="example-tags">
                     <el-tag
-                      size="small"
-                      effect="plain"
-                      type="primary"
                       v-for="tag in [
                         'ChatGPT',
                         'Midjourney',
@@ -120,8 +157,12 @@
                         '音乐创作'
                       ]"
                       :key="tag"
-                      >{{ tag }}</el-tag
+                      size="small"
+                      effect="plain"
+                      type="primary"
                     >
+                      {{ tag }}
+                    </el-tag>
                   </div>
                 </div>
               </div>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
index 0c65092..d55f8f6 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="gpt-evolution-demo">
-    <el-card shadow="hover" class="main-card">
+    <el-card
+      shadow="hover"
+      class="main-card"
+    >
       <template #header>
         <div class="card-header">
           <span class="title">🚀 GPT 进化历程</span>
@@ -10,7 +13,12 @@
 
       <div class="demo-content">
         <!-- Replace Vertical Timeline with Horizontal Tabs -->
-        <el-tabs v-model="activeModelName" type="card" class="evolution-tabs" @tab-click="handleTabClick">
+        <el-tabs
+          v-model="activeModelName"
+          type="card"
+          class="evolution-tabs"
+          @tab-click="handleTabClick"
+        >
           <el-tab-pane
             v-for="(model, index) in gptModels"
             :key="index"
@@ -19,7 +27,12 @@
           >
             <div class="model-view">
               <div class="model-info-header">
-                <el-tag effect="dark" size="large">{{ model.year }}</el-tag>
+                <el-tag
+                  effect="dark"
+                  size="large"
+                >
+                  {{ model.year }}
+                </el-tag>
                 <div class="model-stats">
                   <div class="stat-item">
                     <span class="label">参数量</span>
@@ -53,7 +66,9 @@
           </el-tab-pane>
         </el-tabs>
 
-        <el-divider class="compact-divider">进化趋势</el-divider>
+        <el-divider class="compact-divider">
+          进化趋势
+        </el-divider>
 
         <div class="evolution-insight">
           <div class="insight-row">
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
index 6095a26..ee0b935 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
@@ -12,23 +12,41 @@
 
       <div class="controls mb-4 flex gap-2">
         <el-button-group>
-          <el-button type="primary" @click="start" :disabled="step !== 0">
-            开始
-          </el-button>
-          <el-button @click="prev" :disabled="step <= 1">上一步</el-button>
           <el-button
             type="primary"
-            @click="next"
+            :disabled="step !== 0"
+            @click="start"
+          >
+            开始
+          </el-button>
+          <el-button
+            :disabled="step <= 1"
+            @click="prev"
+          >
+            上一步
+          </el-button>
+          <el-button
+            type="primary"
             :disabled="step === 0 || step >= maxStep"
+            @click="next"
           >
             下一步
           </el-button>
-          <el-button @click="reset">重置</el-button>
+          <el-button @click="reset">
+            重置
+          </el-button>
         </el-button-group>
       </div>
 
-      <div v-if="step > 0" class="progress mb-4">
-        <el-steps :active="step" align-center finish-status="success">
+      <div
+        v-if="step > 0"
+        class="progress mb-4"
+      >
+        <el-steps
+          :active="step"
+          align-center
+          finish-status="success"
+        >
           <el-step title="输入层" />
           <el-step title="隐藏层" />
           <el-step title="输出层" />
@@ -39,14 +57,28 @@
       </div>
 
       <div class="grid-layout">
-        <el-card shadow="never" class="viz-card">
+        <el-card
+          shadow="never"
+          class="viz-card"
+        >
           <template #header>
-            <div class="card-title">网络结构</div>
+            <div class="card-title">
+              网络结构
+            </div>
           </template>
           <div class="network-container">
-            <svg class="network-svg" :viewBox="`0 0 ${svgWidth} ${svgHeight}`">
+            <svg
+              class="network-svg"
+              :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
+            >
               <defs>
-                <linearGradient id="conn" x1="0%" y1="0%" x2="100%" y2="0%">
+                <linearGradient
+                  id="conn"
+                  x1="0%"
+                  y1="0%"
+                  x2="100%"
+                  y2="0%"
+                >
                   <stop
                     offset="0%"
                     :style="{
@@ -115,9 +147,14 @@
           />
         </el-card>
 
-        <el-card shadow="never" class="info-card">
+        <el-card
+          shadow="never"
+          class="info-card"
+        >
           <template #header>
-            <div class="card-title">每一层在做什么</div>
+            <div class="card-title">
+              每一层在做什么
+            </div>
           </template>
           <div class="layers-info">
             <el-collapse v-model="activeCollapse">
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
index 47b07ea..076af94 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
@@ -4,7 +4,9 @@
       <template #header>
         <div class="card-header">
           <h4>感知机 (Perceptron) 演示</h4>
-          <p class="subtitle">最简单的神经元：输入 x 权重 + 偏置 = 输出</p>
+          <p class="subtitle">
+            最简单的神经元：输入 x 权重 + 偏置 = 输出
+          </p>
         </div>
       </template>
 
@@ -12,12 +14,24 @@
         <!-- Inputs -->
         <div class="col inputs-col">
           <div class="node-wrapper">
-            <el-tag effect="dark">输入 A</el-tag>
-            <el-input-number v-model="x1" size="small" :step="1" />
+            <el-tag effect="dark">
+              输入 A
+            </el-tag>
+            <el-input-number
+              v-model="x1"
+              size="small"
+              :step="1"
+            />
           </div>
           <div class="node-wrapper">
-            <el-tag effect="dark">输入 B</el-tag>
-            <el-input-number v-model="x2" size="small" :step="1" />
+            <el-tag effect="dark">
+              输入 B
+            </el-tag>
+            <el-input-number
+              v-model="x2"
+              size="small"
+              :step="1"
+            />
           </div>
         </div>
 
@@ -30,7 +44,7 @@
                 height: Math.abs(w1) * 2 + 2 + 'px',
                 opacity: Math.abs(w1) / 5 + 0.2
               }"
-            ></div>
+            />
             <div class="weight-control">
               <span class="label">权重 A: {{ w1 }}</span>
               <el-slider
@@ -50,7 +64,7 @@
                 height: Math.abs(w2) * 2 + 2 + 'px',
                 opacity: Math.abs(w2) / 5 + 0.2
               }"
-            ></div>
+            />
             <div class="weight-control">
               <span class="label">权重 B: {{ w2 }}</span>
               <el-slider
@@ -67,23 +81,39 @@
         <!-- Neuron Body -->
         <div class="col neuron-col">
           <div class="neuron-circle">
-            <div class="sum-symbol">总分</div>
-            <div class="sum-value">{{ weightedSum.toFixed(1) }}</div>
+            <div class="sum-symbol">
+              总分
+            </div>
+            <div class="sum-value">
+              {{ weightedSum.toFixed(1) }}
+            </div>
           </div>
           <div class="bias-control mt-2">
             <span class="label">基础分 (Bias):</span>
-            <el-input-number v-model="bias" size="small" :step="1" />
+            <el-input-number
+              v-model="bias"
+              size="small"
+              :step="1"
+            />
           </div>
         </div>
 
         <!-- Output -->
         <div class="col output-col">
-          <el-icon class="arrow-icon"><Right /></el-icon>
+          <el-icon class="arrow-icon">
+            <Right />
+          </el-icon>
           <div class="node-wrapper">
-            <el-tag :type="output > 0 ? 'success' : 'info'" effect="dark"
-              >结果 (Output)</el-tag
+            <el-tag
+              :type="output > 0 ? 'success' : 'info'"
+              effect="dark"
+            >
+              结果 (Output)
+            </el-tag>
+            <div
+              class="output-value"
+              :class="{ active: output > 0 }"
             >
-            <div class="output-value" :class="{ active: output > 0 }">
               {{ output }}
             </div>
           </div>
@@ -93,7 +123,10 @@
       <el-divider />
 
       <div class="formula-bar">
-        <el-alert type="info" :closable="false">
+        <el-alert
+          type="info"
+          :closable="false"
+        >
           <template #title>
             <div class="formula-content">
               <div>
@@ -106,8 +139,8 @@
               <div class="mt-1">
                 <strong>判断结果: </strong>
                 <span class="calc-step"> 
-                   {{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0 
-                   → 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
+                  {{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0 
+                  → 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
                 </span>
               </div>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
index 7253124..757660d 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
@@ -12,10 +12,19 @@
 
       <el-row :gutter="20">
         <!-- Rule Based -->
-        <el-col :xs="24" :md="12" class="mb-4-xs">
-          <el-card shadow="never" class="panel-card">
+        <el-col
+          :xs="24"
+          :md="12"
+          class="mb-4-xs"
+        >
+          <el-card
+            shadow="never"
+            class="panel-card"
+          >
             <template #header>
-              <div class="panel-title">规则系统（手写 If/Else）</div>
+              <div class="panel-title">
+                规则系统（手写 If/Else）
+              </div>
             </template>
             <div class="panel-content">
               <div class="control-row">
@@ -48,8 +57,12 @@
                   bad: ruleResult.label === '🍒'
                 }"
               >
-                <div class="result-title">输出</div>
-                <div class="result-value">{{ ruleResult.text }}</div>
+                <div class="result-title">
+                  输出
+                </div>
+                <div class="result-value">
+                  {{ ruleResult.text }}
+                </div>
                 <div class="result-code">
                   if (size &gt; {{ ruleThreshold }}) return 🍎 else return 🍒
                 </div>
@@ -66,10 +79,18 @@
         </el-col>
 
         <!-- Machine Learning -->
-        <el-col :xs="24" :md="12">
-          <el-card shadow="never" class="panel-card">
+        <el-col
+          :xs="24"
+          :md="12"
+        >
+          <el-card
+            shadow="never"
+            class="panel-card"
+          >
             <template #header>
-              <div class="panel-title">机器学习（从样本推断边界）</div>
+              <div class="panel-title">
+                机器学习（从样本推断边界）
+              </div>
             </template>
             <div class="panel-content">
               <div class="control-row">
@@ -86,12 +107,22 @@
                   placeholder="Label"
                   style="width: 120px"
                 >
-                  <el-option label="🍒 樱桃" value="🍒" />
-                  <el-option label="🍎 苹果" value="🍎" />
+                  <el-option
+                    label="🍒 樱桃"
+                    value="🍒"
+                  />
+                  <el-option
+                    label="🍎 苹果"
+                    value="🍎"
+                  />
                 </el-select>
-                <el-button type="primary" size="small" @click="addSample"
-                  >添加样本</el-button
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="addSample"
                 >
+                  添加样本
+                </el-button>
               </div>
 
               <div class="samples-area mt-4">
@@ -100,14 +131,17 @@
                   description="还没有样本：先添加 2-4 个样本再训练"
                   :image-size="40"
                 />
-                <div v-else class="sample-chips">
+                <div
+                  v-else
+                  class="sample-chips"
+                >
                   <el-tag
                     v-for="(p, i) in trainingData"
                     :key="p.id"
                     closable
-                    @close="removeSample(i)"
                     :type="p.label === '🍎' ? 'danger' : 'info'"
                     effect="plain"
+                    @close="removeSample(i)"
                   >
                     {{ p.size }} → {{ p.label }}
                   </el-tag>
@@ -117,15 +151,20 @@
               <div class="actions mt-4 flex gap-2">
                 <el-button
                   type="success"
-                  @click="train"
                   :disabled="trainingData.length < 2"
+                  @click="train"
                 >
                   训练（推断阈值）
                 </el-button>
-                <el-button @click="resetLearning">重置</el-button>
+                <el-button @click="resetLearning">
+                  重置
+                </el-button>
               </div>
 
-              <div v-if="learnedThreshold !== null" class="learned-result mt-4">
+              <div
+                v-if="learnedThreshold !== null"
+                class="learned-result mt-4"
+              >
                 <el-alert
                   type="success"
                   :closable="false"
diff --git a/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
index bb459eb..fc52cee 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
@@ -23,11 +23,21 @@
         </button>
       </div>
 
-      <div class="tool-detail" v-if="currentTool">
+      <div
+        v-if="currentTool"
+        class="tool-detail"
+      >
         <div class="tool-header">
-          <div class="tool-title">{{ currentTool.name }}</div>
+          <div class="tool-title">
+            {{ currentTool.name }}
+          </div>
           <div class="tool-tags">
-            <span class="tag" :class="tag.class" v-for="tag in currentTool.tags" :key="tag.text">
+            <span
+              v-for="tag in currentTool.tags"
+              :key="tag.text"
+              class="tag"
+              :class="tag.class"
+            >
               {{ tag.text }}
             </span>
           </div>
@@ -40,7 +50,11 @@
         <div class="feature-section">
           <h4>核心特性</h4>
           <div class="feature-list">
-            <div v-for="(feature, idx) in currentTool.features" :key="idx" class="feature-item">
+            <div
+              v-for="(feature, idx) in currentTool.features"
+              :key="idx"
+              class="feature-item"
+            >
               <span class="feature-icon">✓</span>
               <span class="feature-text">{{ feature }}</span>
             </div>
@@ -57,9 +71,17 @@
         <div class="tools-section">
           <h4>🔧 推荐工具</h4>
           <div class="tools-grid">
-            <div v-for="(rec, idx) in currentTool.recommendations" :key="idx" class="tool-card">
-              <div class="rec-name">{{ rec.name }}</div>
-              <div class="rec-desc">{{ rec.description }}</div>
+            <div
+              v-for="(rec, idx) in currentTool.recommendations"
+              :key="idx"
+              class="tool-card"
+            >
+              <div class="rec-name">
+                {{ rec.name }}
+              </div>
+              <div class="rec-desc">
+                {{ rec.description }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
index 320b2e5..31c72f1 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
@@ -28,7 +28,10 @@
       </div>
 
       <!-- 错误示范 -->
-      <div v-if="selectedTab === 'bad'" class="comparison bad">
+      <div
+        v-if="selectedTab === 'bad'"
+        class="comparison bad"
+      >
         <div class="response-preview">
           <div class="status-line bad">
             <span>HTTP/1.1</span>
@@ -65,7 +68,10 @@
       </div>
 
       <!-- 正确示范 -->
-      <div v-if="selectedTab === 'good'" class="comparison good">
+      <div
+        v-if="selectedTab === 'good'"
+        class="comparison good"
+      >
         <div class="response-preview">
           <div class="status-line">
             <span>HTTP/1.1</span>
@@ -105,7 +111,11 @@
         <div class="error-codes">
           <h4>错误码体系</h4>
           <div class="code-list">
-            <div v-for="item in errorCodeItems" :key="item.code" class="code-item">
+            <div
+              v-for="item in errorCodeItems"
+              :key="item.code"
+              class="code-item"
+            >
               <span class="code-badge">{{ item.code }}</span>
               <span class="code-desc">{{ item.desc }}</span>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
index b3490d2..94308ad 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/HttpMethodsDemo.vue
@@ -114,7 +114,7 @@ const methods = [
             { product_id: 'P001', quantity: 2 },
             { product_id: 'P002', quantity: 1 }
           ],
-          shipping_address: {...}
+          shipping_address: { /* ... */ }
         }
       }
     ]
diff --git a/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
index 6bd4578..34a4f5b 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/RequestStructureDemo.vue
@@ -2,12 +2,16 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>HTTP 请求结构解析</h4>
-      <p class="hint">详解 HTTP 请求的组成部分</p>
+      <p class="hint">
+        详解 HTTP 请求的组成部分
+      </p>
     </div>
     <div class="demo-content">
       <div class="structure-box">
         <div class="section request-line">
-          <div class="label">请求行</div>
+          <div class="label">
+            请求行
+          </div>
           <div class="content">
             <code>GET /api/users/123 HTTP/1.1</code>
           </div>
@@ -17,24 +21,32 @@
         </div>
 
         <div class="section headers">
-          <div class="label">请求头</div>
+          <div class="label">
+            请求头
+          </div>
           <div class="content header-list">
             <div><code>Host: api.example.com</code></div>
             <div><code>Content-Type: application/json</code></div>
             <div><code>Authorization: Bearer token123</code></div>
           </div>
-          <div class="explain">元信息：域名、数据格式、认证等</div>
+          <div class="explain">
+            元信息：域名、数据格式、认证等
+          </div>
         </div>
 
         <div class="section body">
-          <div class="label">请求体 (可选)</div>
+          <div class="label">
+            请求体 (可选)
+          </div>
           <div class="content">
             <pre>{
   "name": "张三",
   "email": "zhangsan@example.com"
 }</pre>
           </div>
-          <div class="explain">POST/PUT 请求携带的数据</div>
+          <div class="explain">
+            POST/PUT 请求携带的数据
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue b/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
index 5c4741f..8ae1ace 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/ResourceAnalogy.vue
@@ -2,26 +2,34 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>RESTful 资源类比</h4>
-      <p class="hint">通过生活中的类比理解 RESTful 资源概念</p>
+      <p class="hint">
+        通过生活中的类比理解 RESTful 资源概念
+      </p>
     </div>
     <div class="demo-content">
       <div class="analogy-box">
         <div class="analogy-item">
-          <div class="icon">📚</div>
+          <div class="icon">
+            📚
+          </div>
           <div class="text">
             <strong>资源 = 图书</strong>
             <p>每本书有唯一的 ISBN（资源标识）</p>
           </div>
         </div>
         <div class="analogy-item">
-          <div class="icon">🏪</div>
+          <div class="icon">
+            🏪
+          </div>
           <div class="text">
             <strong>URL = 书架位置</strong>
             <p>/library/books/123 表示第 123 号书</p>
           </div>
         </div>
         <div class="analogy-item">
-          <div class="icon">📝</div>
+          <div class="icon">
+            📝
+          </div>
           <div class="text">
             <strong>HTTP 方法 = 操作</strong>
             <p>GET(查看)、POST(借书)、PUT(修改)、DELETE(还书)</p>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
index 4554ccb..9d66787 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
@@ -26,7 +26,10 @@
         <div class="response-header">
           <div class="status-line">
             <span class="http-version">HTTP/1.1</span>
-            <span class="status-code" :class="getStatusClass(currentResponse.status)">{{ currentResponse.status }}</span>
+            <span
+              class="status-code"
+              :class="getStatusClass(currentResponse.status)"
+            >{{ currentResponse.status }}</span>
             <span class="status-text">{{ currentResponse.statusText }}</span>
           </div>
         </div>
@@ -53,12 +56,18 @@
         <div class="field-descriptions">
           <h4>字段说明</h4>
           <div class="field-list">
-            <div v-for="field in currentResponse.fields" :key="field.name" class="field-item">
+            <div
+              v-for="field in currentResponse.fields"
+              :key="field.name"
+              class="field-item"
+            >
               <div class="field-name">
                 <code>{{ field.name }}</code>
                 <span class="field-type">{{ field.type }}</span>
               </div>
-              <div class="field-desc">{{ field.description }}</div>
+              <div class="field-desc">
+                {{ field.description }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
index 89dbfb7..6177fb0 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/RestfulDesignDemo.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="restful-design-demo">
     <div class="header">
-      <div class="title">RESTful API 设计核心原则</div>
+      <div class="title">
+        RESTful API 设计核心原则
+      </div>
       <div class="subtitle">
         REST（Representational State Transfer）是一种架构风格，让接口设计像自然资源一样直观
       </div>
@@ -15,9 +17,15 @@
         :class="{ active: selectedPrinciple === principle.id }"
         @click="selectedPrinciple = principle.id"
       >
-        <div class="principle-icon">{{ principle.icon }}</div>
-        <div class="principle-name">{{ principle.name }}</div>
-        <div class="principle-brief">{{ principle.brief }}</div>
+        <div class="principle-icon">
+          {{ principle.icon }}
+        </div>
+        <div class="principle-name">
+          {{ principle.name }}
+        </div>
+        <div class="principle-brief">
+          {{ principle.brief }}
+        </div>
       </div>
     </div>
 
@@ -37,11 +45,15 @@
           <h4>对比示例</h4>
           <div class="code-comparison">
             <div class="code-block bad">
-              <div class="code-label">传统方式（不推荐）</div>
+              <div class="code-label">
+                传统方式（不推荐）
+              </div>
               <pre><code>{{ activePrinciple.badExample }}</code></pre>
             </div>
             <div class="code-block good">
-              <div class="code-label">RESTful 方式（推荐）</div>
+              <div class="code-label">
+                RESTful 方式（推荐）
+              </div>
               <pre><code>{{ activePrinciple.goodExample }}</code></pre>
             </div>
           </div>
@@ -50,7 +62,12 @@
         <div class="tips">
           <h4>设计要点</h4>
           <ul>
-            <li v-for="(tip, index) in activePrinciple.tips" :key="index">{{ tip }}</li>
+            <li
+              v-for="(tip, index) in activePrinciple.tips"
+              :key="index"
+            >
+              {{ tip }}
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
index 37a39ff..a6bb1d5 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/StatusCodeDemo.vue
@@ -23,7 +23,10 @@
         </button>
       </div>
 
-      <div class="status-codes" v-if="filteredCodes.length > 0">
+      <div
+        v-if="filteredCodes.length > 0"
+        class="status-codes"
+      >
         <div
           v-for="code in filteredCodes"
           :key="code.number"
@@ -32,12 +35,18 @@
           @click="toggleExpand(code.number)"
         >
           <div class="status-header">
-            <span class="status-number" :class="getCategoryClass(code.number)">{{ code.number }}</span>
+            <span
+              class="status-number"
+              :class="getCategoryClass(code.number)"
+            >{{ code.number }}</span>
             <span class="status-name">{{ code.name }}</span>
             <span class="expand-icon">{{ expandedCode === code.number ? '▼' : '▶' }}</span>
           </div>
 
-          <div class="status-detail" v-show="expandedCode === code.number">
+          <div
+            v-show="expandedCode === code.number"
+            class="status-detail"
+          >
             <div class="detail-section">
               <h4>💡 含义解释</h4>
               <p>{{ code.description }}</p>
@@ -46,15 +55,26 @@
             <div class="detail-section">
               <h4>📝 使用场景</h4>
               <ul>
-                <li v-for="(scenario, idx) in code.scenarios" :key="idx">{{ scenario }}</li>
+                <li
+                  v-for="(scenario, idx) in code.scenarios"
+                  :key="idx"
+                >
+                  {{ scenario }}
+                </li>
               </ul>
             </div>
 
-            <div class="detail-section" v-if="code.example">
+            <div
+              v-if="code.example"
+              class="detail-section"
+            >
               <h4>💻 示例代码</h4>
               <div class="code-example">
                 <div class="code-request">
-                  <span class="method-badge" :class="getCategoryClass(code.number)">{{ code.example.method }}</span>
+                  <span
+                    class="method-badge"
+                    :class="getCategoryClass(code.number)"
+                  >{{ code.example.method }}</span>
                   <code>{{ code.example.path }}</code>
                 </div>
                 <div class="code-response">
diff --git a/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
index 233fbe5..06a3347 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
@@ -19,19 +19,35 @@
           @click="selectedStrategy = strategy.id"
         >
           <div class="strategy-header">
-            <div class="strategy-name">{{ strategy.name }}</div>
+            <div class="strategy-name">
+              {{ strategy.name }}
+            </div>
             <div class="strategy-stars">
-              <span v-for="n in strategy.stars" :key="n" class="star">⭐</span>
+              <span
+                v-for="n in strategy.stars"
+                :key="n"
+                class="star"
+              >⭐</span>
             </div>
           </div>
-          <div class="strategy-example">{{ strategy.example }}</div>
+          <div class="strategy-example">
+            {{ strategy.example }}
+          </div>
         </div>
       </div>
 
-      <div class="strategy-detail" v-if="currentStrategy">
+      <div
+        v-if="currentStrategy"
+        class="strategy-detail"
+      >
         <div class="detail-header">
-          <div class="detail-title">{{ currentStrategy.name }}</div>
-          <div class="detail-recommendation" :class="currentStrategy.level">
+          <div class="detail-title">
+            {{ currentStrategy.name }}
+          </div>
+          <div
+            class="detail-recommendation"
+            :class="currentStrategy.level"
+          >
             {{ currentStrategy.level === 'high' ? '强烈推荐' : currentStrategy.level === 'medium' ? '可以使用' : '不推荐' }}
           </div>
         </div>
@@ -40,14 +56,24 @@
           <div class="detail-section">
             <h4>✅ 优点</h4>
             <ul>
-              <li v-for="(pro, idx) in currentStrategy.pros" :key="idx">{{ pro }}</li>
+              <li
+                v-for="(pro, idx) in currentStrategy.pros"
+                :key="idx"
+              >
+                {{ pro }}
+              </li>
             </ul>
           </div>
 
           <div class="detail-section">
             <h4>❌ 缺点</h4>
             <ul>
-              <li v-for="(con, idx) in currentStrategy.cons" :key="idx">{{ con }}</li>
+              <li
+                v-for="(con, idx) in currentStrategy.cons"
+                :key="idx"
+              >
+                {{ con }}
+              </li>
             </ul>
           </div>
         </div>
@@ -55,9 +81,13 @@
         <div class="detail-section example">
           <h4>💻 实现示例</h4>
           <div class="code-box">
-            <div class="code-header">Request</div>
+            <div class="code-header">
+              Request
+            </div>
             <pre><code>{{ currentStrategy.codeExample.request }}</code></pre>
-            <div class="code-header">Response Headers</div>
+            <div class="code-header">
+              Response Headers
+            </div>
             <pre><code>{{ currentStrategy.codeExample.response }}</code></pre>
           </div>
         </div>
@@ -65,7 +95,12 @@
         <div class="detail-section tips">
           <h4>💡 最佳实践</h4>
           <ul>
-            <li v-for="(tip, idx) in currentStrategy.tips" :key="idx">{{ tip }}</li>
+            <li
+              v-for="(tip, idx) in currentStrategy.tips"
+              :key="idx"
+            >
+              {{ tip }}
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
index 5cc2ad4..071c0d6 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
@@ -23,7 +23,7 @@
               type="text"
               class="endpoint-input"
               placeholder="/users"
-            />
+            >
           </div>
         </div>
       </div>
@@ -37,23 +37,44 @@
           <div class="params-box">
             <div class="params-row">
               <span class="param-label">页码：</span>
-              <input v-model.number="page" type="number" class="param-input" min="1" />
+              <input
+                v-model.number="page"
+                type="number"
+                class="param-input"
+                min="1"
+              >
             </div>
             <div class="params-row">
               <span class="param-label">每页数量：</span>
-              <input v-model.number="limit" type="number" class="param-input small" min="1" max="100" />
+              <input
+                v-model.number="limit"
+                type="number"
+                class="param-input small"
+                min="1"
+                max="100"
+              >
             </div>
           </div>
         </div>
       </div>
 
-      <button class="send-btn" @click="sendRequest" :disabled="loading">
+      <button
+        class="send-btn"
+        :disabled="loading"
+        @click="sendRequest"
+      >
         {{ loading ? '发送中...' : '🚀 发送请求' }}
       </button>
 
-      <div class="response" v-if="response">
+      <div
+        v-if="response"
+        class="response"
+      >
         <div class="response-header">
-          <span class="status-badge" :class="response.status >= 200 && response.status < 300 ? 'success' : 'error'">
+          <span
+            class="status-badge"
+            :class="response.status >= 200 && response.status < 300 ? 'success' : 'error'"
+          >
             {{ response.status }} {{ response.statusText }}
           </span>
           <span class="response-time">耗时: {{ response.time }}ms</span>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
index ea6765d..4b26948 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
@@ -9,7 +9,10 @@
         <span class="icon">📖</span>
         <span class="title">API 文档翻译机</span>
       </div>
-      <button class="translate-btn" @click="isHuman = !isHuman">
+      <button
+        class="translate-btn"
+        @click="isHuman = !isHuman"
+      >
         {{ isHuman ? '🔄 还原回黑话' : '✨ 翻译成人话' }}
       </button>
     </div>
@@ -19,21 +22,30 @@
       <div class="api-doc">
         <div class="doc-row method-row">
           <span class="label">Method:</span>
-          <span class="value method" :class="{ human: isHuman }">
+          <span
+            class="value method"
+            :class="{ human: isHuman }"
+          >
             {{ isHuman ? '我要下单 (POST)' : 'POST' }}
           </span>
         </div>
 
         <div class="doc-row url-row">
           <span class="label">Endpoint:</span>
-          <span class="value url" :class="{ human: isHuman }">
+          <span
+            class="value url"
+            :class="{ human: isHuman }"
+          >
             {{ isHuman ? '去哪里找厨师' : 'https://api.deepseek.com/chat' }}
           </span>
         </div>
 
         <div class="doc-row headers-row">
           <span class="label">Headers:</span>
-          <div class="code-block" :class="{ human: isHuman }">
+          <div
+            class="code-block"
+            :class="{ human: isHuman }"
+          >
             <div class="line">
               <span class="key">{{
                 isHuman ? '我是谁:' : 'Authorization:'
@@ -55,25 +67,41 @@
 
         <div class="doc-row body-row">
           <span class="label">Body:</span>
-          <div class="code-block" :class="{ human: isHuman }">
-            <div class="line">{</div>
+          <div
+            class="code-block"
+            :class="{ human: isHuman }"
+          >
+            <div class="line">
+              {
+            </div>
             <div class="line indent">
               <span class="key">"model":</span>
               <span class="val">"deepseek-chat",</span>
-              <span class="comment" v-if="isHuman"> // 选个聪明的厨师</span>
+              <span
+                v-if="isHuman"
+                class="comment"
+              > // 选个聪明的厨师</span>
             </div>
             <div class="line indent">
               <span class="key">"messages":</span>
               <span class="val">[...]</span>
-              <span class="comment" v-if="isHuman"> // 我要说的话</span>
+              <span
+                v-if="isHuman"
+                class="comment"
+              > // 我要说的话</span>
+            </div>
+            <div class="line">
+              }
             </div>
-            <div class="line">}</div>
           </div>
         </div>
 
         <div class="doc-row response-row">
           <span class="label">Response:</span>
-          <div class="code-block" :class="{ human: isHuman }">
+          <div
+            class="code-block"
+            :class="{ human: isHuman }"
+          >
             <div class="line">
               <span class="key">{{ isHuman ? '状态:' : 'Status:' }}</span>
               <span class="status-ok">{{
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
index fa1b1ed..2306972 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
@@ -4,81 +4,143 @@
 -->
 <template>
   <div class="demo">
-    <div class="title">🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？</div>
-    <p class="subtitle">把它们想象成对数据的"操作方式"</p>
+    <div class="title">
+      🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？
+    </div>
+    <p class="subtitle">
+      把它们想象成对数据的"操作方式"
+    </p>
 
     <div class="methods-grid">
       <div class="method-card get">
-        <div class="method-badge">GET</div>
-        <div class="method-title">📖 获取（查询）</div>
+        <div class="method-badge">
+          GET
+        </div>
+        <div class="method-title">
+          📖 获取（查询）
+        </div>
         <div class="method-desc">
           <p><strong>只看不改</strong> - 从服务器获取数据</p>
           <div class="method-examples">
-            <div class="example-item">• 查询用户信息</div>
-            <div class="example-item">• 搜索商品</div>
-            <div class="example-item">• 获取文章列表</div>
+            <div class="example-item">
+              • 查询用户信息
+            </div>
+            <div class="example-item">
+              • 搜索商品
+            </div>
+            <div class="example-item">
+              • 获取文章列表
+            </div>
           </div>
         </div>
-        <div class="method-tip">💡 可以安全重试，不会改变服务器数据</div>
+        <div class="method-tip">
+          💡 可以安全重试，不会改变服务器数据
+        </div>
       </div>
 
       <div class="method-card post">
-        <div class="method-badge">POST</div>
-        <div class="method-title">➕ 创建（新增）</div>
+        <div class="method-badge">
+          POST
+        </div>
+        <div class="method-title">
+          ➕ 创建（新增）
+        </div>
         <div class="method-desc">
           <p><strong>新建数据</strong> - 在服务器创建新资源</p>
           <div class="method-examples">
-            <div class="example-item">• 创建新用户</div>
-            <div class="example-item">• 提交订单</div>
-            <div class="example-item">• 发表评论</div>
+            <div class="example-item">
+              • 创建新用户
+            </div>
+            <div class="example-item">
+              • 提交订单
+            </div>
+            <div class="example-item">
+              • 发表评论
+            </div>
           </div>
         </div>
-        <div class="method-tip">⚠️ 不能随意重试，可能会重复创建</div>
+        <div class="method-tip">
+          ⚠️ 不能随意重试，可能会重复创建
+        </div>
       </div>
 
       <div class="method-card put">
-        <div class="method-badge">PUT</div>
-        <div class="method-title">✏️ 更新（替换）</div>
+        <div class="method-badge">
+          PUT
+        </div>
+        <div class="method-title">
+          ✏️ 更新（替换）
+        </div>
         <div class="method-desc">
           <p><strong>整体替换</strong> - 用新数据完全替换旧数据</p>
           <div class="method-examples">
-            <div class="example-item">• 修改用户全部信息</div>
-            <div class="example-item">• 更换文章全部内容</div>
+            <div class="example-item">
+              • 修改用户全部信息
+            </div>
+            <div class="example-item">
+              • 更换文章全部内容
+            </div>
           </div>
         </div>
-        <div class="method-tip">⚠️ 会覆盖整个资源，需要提供完整数据</div>
+        <div class="method-tip">
+          ⚠️ 会覆盖整个资源，需要提供完整数据
+        </div>
       </div>
 
       <div class="method-card patch">
-        <div class="method-badge">PATCH</div>
-        <div class="method-title">🔧 修改（部分）</div>
+        <div class="method-badge">
+          PATCH
+        </div>
+        <div class="method-title">
+          🔧 修改（部分）
+        </div>
         <div class="method-desc">
           <p><strong>局部更新</strong> - 只修改资源的部分字段</p>
           <div class="method-examples">
-            <div class="example-item">• 只修改用户昵称</div>
-            <div class="example-item">• 更新文章标题</div>
+            <div class="example-item">
+              • 只修改用户昵称
+            </div>
+            <div class="example-item">
+              • 更新文章标题
+            </div>
           </div>
         </div>
-        <div class="method-tip">💡 只传需要修改的字段，更灵活</div>
+        <div class="method-tip">
+          💡 只传需要修改的字段，更灵活
+        </div>
       </div>
 
       <div class="method-card delete">
-        <div class="method-badge">DELETE</div>
-        <div class="method-title">🗑️ 删除</div>
+        <div class="method-badge">
+          DELETE
+        </div>
+        <div class="method-title">
+          🗑️ 删除
+        </div>
         <div class="method-desc">
           <p><strong>移除数据</strong> - 从服务器删除资源</p>
           <div class="method-examples">
-            <div class="example-item">• 删除用户</div>
-            <div class="example-item">• 取消订单</div>
-            <div class="example-item">• 删除评论</div>
+            <div class="example-item">
+              • 删除用户
+            </div>
+            <div class="example-item">
+              • 取消订单
+            </div>
+            <div class="example-item">
+              • 删除评论
+            </div>
           </div>
         </div>
-        <div class="method-tip">⚠️ 操作不可逆，删除后无法恢复</div>
+        <div class="method-tip">
+          ⚠️ 操作不可逆，删除后无法恢复
+        </div>
       </div>
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">📊 快速对比</div>
+      <div class="table-title">
+        📊 快速对比
+      </div>
       <table>
         <thead>
           <tr>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
index 94666b8..2d8a750 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="api-playground">
     <div class="header">
-      <div class="title">🧪 API 练手场</div>
-      <div class="subtitle">随便玩，坏了算我的</div>
+      <div class="title">
+        🧪 API 练手场
+      </div>
+      <div class="subtitle">
+        随便玩，坏了算我的
+      </div>
     </div>
 
     <div class="playground-layout">
       <div class="left-panel">
-        <div class="panel-title">发送请求</div>
+        <div class="panel-title">
+          发送请求
+        </div>
 
         <div class="input-group">
           <label>Endpoint（网址）</label>
@@ -16,7 +22,7 @@
             type="text"
             placeholder="/users/123"
             class="input"
-          />
+          >
         </div>
 
         <div class="input-group">
@@ -33,13 +39,16 @@
           </div>
         </div>
 
-        <div class="input-group" v-if="method === 'POST'">
+        <div
+          v-if="method === 'POST'"
+          class="input-group"
+        >
           <label>Body（JSON）</label>
           <textarea
             v-model="body"
             class="textarea"
-            placeholder='{"name": "张三"}'
-          ></textarea>
+            placeholder="{&quot;name&quot;: &quot;张三&quot;}"
+          />
         </div>
 
         <div class="input-group">
@@ -49,25 +58,42 @@
             type="password"
             placeholder="sk-..."
             class="input"
-          />
+          >
         </div>
 
-        <button class="send-btn" @click="sendRequest" :disabled="loading">
+        <button
+          class="send-btn"
+          :disabled="loading"
+          @click="sendRequest"
+        >
           {{ loading ? '发送中...' : '🚀 发送请求' }}
         </button>
       </div>
 
       <div class="right-panel">
-        <div class="panel-title">响应结果</div>
-
-        <div v-if="!response" class="empty-state">
-          <span class="empty-icon">📭</span>
-          <p>点击发送按钮，看看会发生什么</p>
-          <p class="hint">可以试试输入错误的地址或 Key</p>
+        <div class="panel-title">
+          响应结果
         </div>
 
-        <div v-else class="response-content">
-          <div class="status-bar" :class="getStatusClass(response.status)">
+        <div
+          v-if="!response"
+          class="empty-state"
+        >
+          <span class="empty-icon">📭</span>
+          <p>点击发送按钮，看看会发生什么</p>
+          <p class="hint">
+            可以试试输入错误的地址或 Key
+          </p>
+        </div>
+
+        <div
+          v-else
+          class="response-content"
+        >
+          <div
+            class="status-bar"
+            :class="getStatusClass(response.status)"
+          >
             <span class="status-code">{{ response.status }}</span>
             <span class="status-text">{{ response.statusText }}</span>
           </div>
@@ -76,7 +102,10 @@
             <pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
           </div>
 
-          <div class="explanation" v-if="response.explanation">
+          <div
+            v-if="response.explanation"
+            class="explanation"
+          >
             💡 {{ response.explanation }}
           </div>
         </div>
@@ -84,14 +113,28 @@
     </div>
 
     <div class="tips">
-      <div class="tip-title">可以试试这些玩法：</div>
+      <div class="tip-title">
+        可以试试这些玩法：
+      </div>
       <div class="tip-list">
-        <button @click="tryEndpoint('/users')">✅ GET /users</button>
-        <button @click="tryEndpoint('/users/123')">✅ GET /users/123</button>
-        <button @click="tryEndpoint('/posts')">✅ GET /posts</button>
-        <button @click="tryError401">❌ 401 没带 Key</button>
-        <button @click="tryError404">❌ 404 地址错了</button>
-        <button @click="tryError429">❌ 429 点太快了</button>
+        <button @click="tryEndpoint('/users')">
+          ✅ GET /users
+        </button>
+        <button @click="tryEndpoint('/users/123')">
+          ✅ GET /users/123
+        </button>
+        <button @click="tryEndpoint('/posts')">
+          ✅ GET /posts
+        </button>
+        <button @click="tryError401">
+          ❌ 401 没带 Key
+        </button>
+        <button @click="tryError404">
+          ❌ 404 地址错了
+        </button>
+        <button @click="tryError429">
+          ❌ 429 点太快了
+        </button>
       </div>
     </div>
   </div>
@@ -208,7 +251,7 @@ function sendRequest() {
         data: { error: 'Resource not found' },
         explanation: '地址错了，这个接口不存在'
       }
-    } else if (endpoint.value === '/users' && method.value === 'GET') {
+    } else if (endpoint.value === '/users' && method.value === 'DELETE') {
       response.value = {
         status: 429,
         statusText: 'Too Many Requests',
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
index 51c6743..97377fa 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
@@ -11,24 +11,41 @@
 
     <div class="content">
       <div class="action-area">
-        <button class="call-btn" :disabled="calling" @click="callApi">
+        <button
+          class="call-btn"
+          :disabled="calling"
+          @click="callApi"
+        >
           <span v-if="!calling">📡 发起 API 请求</span>
           <span v-else>🔄 请求处理中...</span>
         </button>
       </div>
 
-      <div class="result-area" v-if="result || calling">
-        <div class="loading-dots" v-if="calling">
+      <div
+        v-if="result || calling"
+        class="result-area"
+      >
+        <div
+          v-if="calling"
+          class="loading-dots"
+        >
           <span>.</span><span>.</span><span>.</span>
         </div>
-        <div class="response-card" v-else-if="result">
+        <div
+          v-else-if="result"
+          class="response-card"
+        >
           <div class="response-header">
             <span class="status-badge success">200 OK</span>
             <span class="time">耗时: {{ result.time }}ms</span>
           </div>
           <div class="response-body">
-            <div class="time-display">{{ result.timeString }}</div>
-            <div class="timezone">{{ result.timezone }}</div>
+            <div class="time-display">
+              {{ result.timeString }}
+            </div>
+            <div class="timezone">
+              {{ result.timezone }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
index 6ac8df8..839db1e 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
@@ -1,14 +1,20 @@
 <template>
   <div class="function-api-demo">
     <div class="header">
-      <div class="title">🔧 你早就在用 API 了</div>
-      <div class="subtitle">函数就是最基础的 API</div>
+      <div class="title">
+        🔧 你早就在用 API 了
+      </div>
+      <div class="subtitle">
+        函数就是最基础的 API
+      </div>
     </div>
 
     <div class="demo-container">
       <div class="left">
         <div class="code-panel">
-          <div class="code-title">📝 代码</div>
+          <div class="code-title">
+            📝 代码
+          </div>
           <pre><code><span class="keyword">def</span> <span class="function">greet</span>(name, greeting=<span class="string">"你好"</span>):
     <span class="keyword">return</span> f<span class="string">"{greeting}，{name}！"</span>
 
@@ -48,22 +54,43 @@ print(result)</code></pre>
         </div>
 
         <div class="try-it">
-          <div class="try-title">🎮 试试调用：</div>
+          <div class="try-title">
+            🎮 试试调用：
+          </div>
           <div class="interactive">
             <input
               v-model="name"
               placeholder="输入名字"
               class="name-input"
-            />
-            <select v-model="greeting" class="greeting-select">
-              <option value="你好">你好</option>
-              <option value="Hello">Hello</option>
-              <option value="早上好">早上好</option>
-              <option value="晚安">晚安</option>
+            >
+            <select
+              v-model="greeting"
+              class="greeting-select"
+            >
+              <option value="你好">
+                你好
+              </option>
+              <option value="Hello">
+                Hello
+              </option>
+              <option value="早上好">
+                早上好
+              </option>
+              <option value="晚安">
+                晚安
+              </option>
             </select>
-            <button @click="callFunction" class="call-btn">调用 greet()</button>
+            <button
+              class="call-btn"
+              @click="callFunction"
+            >
+              调用 greet()
+            </button>
           </div>
-          <div class="result" v-if="result">
+          <div
+            v-if="result"
+            class="result"
+          >
             <span class="arrow">→</span>
             <code>{{ result }}</code>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue
index b58e803..5b6f057 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue
@@ -4,8 +4,12 @@
 -->
 <template>
   <div class="demo">
-    <div class="title">🤖 真实场景：让 AI 帮你写产品文案</div>
-    <p class="subtitle">体验两种调用方式的区别</p>
+    <div class="title">
+      🤖 真实场景：让 AI 帮你写产品文案
+    </div>
+    <p class="subtitle">
+      体验两种调用方式的区别
+    </p>
 
     <div class="scenario">
       <div class="scenario-header">
@@ -35,53 +39,84 @@
 
       <div class="mode-content">
         <!-- HTTP 模式 -->
-        <div v-if="mode === 'http'" class="mode-details">
+        <div
+          v-if="mode === 'http'"
+          class="mode-details"
+        >
           <div class="steps">
-            <div class="step" :class="{ active: currentStep >= 1 }">
-              <div class="step-number">1</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 1 }"
+            >
+              <div class="step-number">
+                1
+              </div>
               <div class="step-content">
-                <div class="step-title">找到网址（打开外卖 APP）</div>
+                <div class="step-title">
+                  找到网址（打开外卖 APP）
+                </div>
                 <div class="step-code">
                   https://api.openai.com/v1/chat/completions
                 </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 2 }">
-              <div class="step-number">2</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 2 }"
+            >
+              <div class="step-number">
+                2
+              </div>
               <div class="step-content">
-                <div class="step-title">准备订单（填写信息）</div>
+                <div class="step-title">
+                  准备订单（填写信息）
+                </div>
                 <div class="step-code">
-                  Authorization: Bearer 你的API密钥<br />
+                  Authorization: Bearer 你的API密钥<br>
                   Content-Type: application/json
                 </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 3 }">
-              <div class="step-number">3</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 3 }"
+            >
+              <div class="step-number">
+                3
+              </div>
               <div class="step-content">
-                <div class="step-title">下单（发送请求）</div>
+                <div class="step-title">
+                  下单（发送请求）
+                </div>
                 <div class="step-code">
-                  {<br />
-                  &nbsp;&nbsp;"model": "gpt-4",<br />
-                  &nbsp;&nbsp;"messages": [<br />
+                  {<br>
+                  &nbsp;&nbsp;"model": "gpt-4",<br>
+                  &nbsp;&nbsp;"messages": [<br>
                   &nbsp;&nbsp;&nbsp;&nbsp;{ "role": "system", "content":
-                  "你是营销文案专家" },<br />
+                  "你是营销文案专家" },<br>
                   &nbsp;&nbsp;&nbsp;&nbsp;{ "role": "user", "content":
-                  "写智能手表文案" }<br />
-                  &nbsp;&nbsp;]<br />
+                  "写智能手表文案" }<br>
+                  &nbsp;&nbsp;]<br>
                   }
                 </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 4 }">
-              <div class="step-number">4</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 4 }"
+            >
+              <div class="step-number">
+                4
+              </div>
               <div class="step-content">
-                <div class="step-title">等待配送（解析响应）</div>
+                <div class="step-title">
+                  等待配送（解析响应）
+                </div>
                 <div class="step-code">
-                  response.choices[0].message.content<br />
+                  response.choices[0].message.content<br>
                   <span class="step-hint">⚠️ 需要自己处理解析错误</span>
                 </div>
               </div>
@@ -99,52 +134,85 @@
         </div>
 
         <!-- SDK 模式 -->
-        <div v-else class="mode-details">
+        <div
+          v-else
+          class="mode-details"
+        >
           <div class="steps">
-            <div class="step" :class="{ active: currentStep >= 1 }">
-              <div class="step-number">1</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 1 }"
+            >
+              <div class="step-number">
+                1
+              </div>
               <div class="step-content">
-                <div class="step-title">走进餐厅（安装 SDK）</div>
-                <div class="step-code">import OpenAI from 'openai'</div>
+                <div class="step-title">
+                  走进餐厅（安装 SDK）
+                </div>
+                <div class="step-code">
+                  import OpenAI from 'openai'
+                </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 2 }">
-              <div class="step-number">2</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 2 }"
+            >
+              <div class="step-number">
+                2
+              </div>
               <div class="step-content">
-                <div class="step-title">找服务员（初始化客户端）</div>
+                <div class="step-title">
+                  找服务员（初始化客户端）
+                </div>
                 <div class="step-code">
-                  const client = new OpenAI({<br />
-                  &nbsp;&nbsp;apiKey: '你的密钥'<br />
+                  const client = new OpenAI({<br>
+                  &nbsp;&nbsp;apiKey: '你的密钥'<br>
                   })
                 </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 3 }">
-              <div class="step-number">3</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 3 }"
+            >
+              <div class="step-number">
+                3
+              </div>
               <div class="step-content">
-                <div class="step-title">直接点菜（调用函数）</div>
+                <div class="step-title">
+                  直接点菜（调用函数）
+                </div>
                 <div class="step-code">
-                  const response = await client.chat.completions.create({<br />
-                  &nbsp;&nbsp;model: 'gpt-4',<br />
-                  &nbsp;&nbsp;messages: [<br />
+                  const response = await client.chat.completions.create({<br>
+                  &nbsp;&nbsp;model: 'gpt-4',<br>
+                  &nbsp;&nbsp;messages: [<br>
                   &nbsp;&nbsp;&nbsp;&nbsp;{ role: 'system', content:
-                  '你是营销文案专家' },<br />
+                  '你是营销文案专家' },<br>
                   &nbsp;&nbsp;&nbsp;&nbsp;{ role: 'user', content:
-                  '写智能手表文案' }<br />
-                  &nbsp;&nbsp;]<br />
+                  '写智能手表文案' }<br>
+                  &nbsp;&nbsp;]<br>
                   })
                 </div>
               </div>
             </div>
 
-            <div class="step" :class="{ active: currentStep >= 4 }">
-              <div class="step-number">4</div>
+            <div
+              class="step"
+              :class="{ active: currentStep >= 4 }"
+            >
+              <div class="step-number">
+                4
+              </div>
               <div class="step-content">
-                <div class="step-title">享用美食（直接使用）</div>
+                <div class="step-title">
+                  享用美食（直接使用）
+                </div>
                 <div class="step-code">
-                  console.log(response.choices[0].message.content)<br />
+                  console.log(response.choices[0].message.content)<br>
                   <span class="step-hint">✅ SDK 帮你处理好了所有细节</span>
                 </div>
               </div>
@@ -163,11 +231,18 @@
       </div>
 
       <div class="action">
-        <button class="run-btn" :disabled="running" @click="runDemo">
+        <button
+          class="run-btn"
+          :disabled="running"
+          @click="runDemo"
+        >
           {{ running ? '调用中...' : '🚀 开始调用 AI' }}
         </button>
 
-        <div class="result" v-if="result">
+        <div
+          v-if="result"
+          class="result"
+        >
           <div class="result-header">
             {{ mode === 'http' ? '🌐 HTTP API 返回' : '📦 SDK 返回' }}
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue b/docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue
index 0360b84..5a6c572 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue
@@ -4,38 +4,65 @@
 -->
 <template>
   <div class="demo">
-    <div class="title">🔄 一次 API 调用的流程</div>
-    <p class="subtitle">点一下按钮，看请求怎么飞过去再飞回来</p>
+    <div class="title">
+      🔄 一次 API 调用的流程
+    </div>
+    <p class="subtitle">
+      点一下按钮，看请求怎么飞过去再飞回来
+    </p>
 
     <div class="flow-container">
       <div class="side you">
         <div class="window">
-          <div class="window-header">👤 你这边</div>
+          <div class="window-header">
+            👤 你这边
+          </div>
           <div class="window-body">
-            <div class="message">我想调用 API</div>
+            <div class="message">
+              我想调用 API
+            </div>
           </div>
         </div>
       </div>
 
       <div class="middle">
-        <div class="arrow" :class="{ animating: isAnimating }">➔</div>
-        <button class="send-btn" :disabled="isAnimating" @click="send">
+        <div
+          class="arrow"
+          :class="{ animating: isAnimating }"
+        >
+          ➔
+        </div>
+        <button
+          class="send-btn"
+          :disabled="isAnimating"
+          @click="send"
+        >
           {{ isAnimating ? '发送中...' : '🚀 发送请求' }}
         </button>
       </div>
 
       <div class="side server">
         <div class="window">
-          <div class="window-header">🖥️ 对方服务器</div>
+          <div class="window-header">
+            🖥️ 对方服务器
+          </div>
           <div class="window-body">
-            <div class="message">{{ serverMessage }}</div>
+            <div class="message">
+              {{ serverMessage }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="result" v-if="result">
-      <div class="result-box" :class="result.type">
+    <div
+      v-if="result"
+      class="result"
+    >
+      <div
+        class="result-box"
+        :class="result.type"
+      >
         {{ result.text }}
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/ASRvsTTSDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/ASRvsTTSDemo.vue
index bd2f89b..d25fe63 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/ASRvsTTSDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/ASRvsTTSDemo.vue
@@ -8,7 +8,9 @@
 <template>
   <div class="asr-tts-demo">
     <div class="header">
-      <div class="title">🔄 ASR ↔ TTS：语音的双向转换</div>
+      <div class="title">
+        🔄 ASR ↔ TTS：语音的双向转换
+      </div>
       <div class="subtitle">
         探索语音识别和语音合成的互逆过程
       </div>
@@ -20,8 +22,12 @@
         <div class="section-header">
           <span class="section-icon">🎙️</span>
           <div>
-            <div class="section-name">ASR 语音识别</div>
-            <div class="section-desc">音频 → 文本</div>
+            <div class="section-name">
+              ASR 语音识别
+            </div>
+            <div class="section-desc">
+              音频 → 文本
+            </div>
           </div>
         </div>
 
@@ -35,14 +41,26 @@
               <span class="record-icon">{{ isRecording ? '⏹' : '🎤' }}</span>
               <span>{{ isRecording ? '停止录音' : '开始录音' }}</span>
             </button>
-            <div class="or-text">或</div>
-            <button class="upload-audio-btn" @click="uploadAudio">
+            <div class="or-text">
+              或
+            </div>
+            <button
+              class="upload-audio-btn"
+              @click="uploadAudio"
+            >
               📁 上传音频
             </button>
           </div>
 
-          <div v-if="recordedAudio" class="audio-preview">
-            <canvas ref="inputWaveform" width="300" height="60"></canvas>
+          <div
+            v-if="recordedAudio"
+            class="audio-preview"
+          >
+            <canvas
+              ref="inputWaveform"
+              width="300"
+              height="60"
+            />
           </div>
 
           <button
@@ -50,13 +68,23 @@
             :disabled="!recordedAudio || isProcessingASR"
             @click="processASR"
           >
-            <span v-if="isProcessingASR" class="spinner"></span>
+            <span
+              v-if="isProcessingASR"
+              class="spinner"
+            />
             <span v-else>🔍 识别语音</span>
           </button>
 
-          <div v-if="asrResult" class="result-box">
-            <div class="result-label">识别结果</div>
-            <div class="result-text">{{ asrResult }}</div>
+          <div
+            v-if="asrResult"
+            class="result-box"
+          >
+            <div class="result-label">
+              识别结果
+            </div>
+            <div class="result-text">
+              {{ asrResult }}
+            </div>
             <div class="result-meta">
               <span>置信度: {{ asrConfidence }}%</span>
               <span>耗时: {{ asrTime }}ms</span>
@@ -67,7 +95,7 @@
 
       <!-- 中间转换 -->
       <div class="flow-arrow">
-        <div class="arrow-line"></div>
+        <div class="arrow-line" />
         <div class="arrow-btns">
           <button
             class="arrow-btn"
@@ -91,8 +119,12 @@
         <div class="section-header">
           <span class="section-icon">🔊</span>
           <div>
-            <div class="section-name">TTS 语音合成</div>
-            <div class="section-desc">文本 → 音频</div>
+            <div class="section-name">
+              TTS 语音合成
+            </div>
+            <div class="section-desc">
+              文本 → 音频
+            </div>
           </div>
         </div>
 
@@ -102,7 +134,7 @@
               v-model="ttsInput"
               placeholder="输入要合成的文本..."
               rows="3"
-            ></textarea>
+            />
           </div>
 
           <div class="voice-select">
@@ -125,19 +157,37 @@
             :disabled="!ttsInput.trim() || isProcessingTTS"
             @click="processTTS"
           >
-            <span v-if="isProcessingTTS" class="spinner"></span>
+            <span
+              v-if="isProcessingTTS"
+              class="spinner"
+            />
             <span v-else>🗣 合成语音</span>
           </button>
 
-          <div v-if="ttsResult" class="result-box audio-result">
-            <div class="result-label">合成结果</div>
-            <canvas ref="outputWaveform" width="300" height="60"></canvas>
+          <div
+            v-if="ttsResult"
+            class="result-box audio-result"
+          >
+            <div class="result-label">
+              合成结果
+            </div>
+            <canvas
+              ref="outputWaveform"
+              width="300"
+              height="60"
+            />
             <div class="audio-controls">
-              <button class="play-btn" @click="playResult">
+              <button
+                class="play-btn"
+                @click="playResult"
+              >
                 {{ playing ? '⏸' : '▶' }}
               </button>
               <div class="progress-bar">
-                <div class="progress" :style="{ width: playProgress + '%' }"></div>
+                <div
+                  class="progress"
+                  :style="{ width: playProgress + '%' }"
+                />
               </div>
             </div>
           </div>
@@ -146,11 +196,17 @@
     </div>
 
     <div class="comparison-section">
-      <div class="comp-title">📊 ASR vs TTS 对比</div>
+      <div class="comp-title">
+        📊 ASR vs TTS 对比
+      </div>
       <div class="comp-grid">
         <div class="comp-card">
-          <div class="comp-icon">🎙️</div>
-          <div class="comp-name">ASR</div>
+          <div class="comp-icon">
+            🎙️
+          </div>
+          <div class="comp-name">
+            ASR
+          </div>
           <div class="comp-items">
             <div class="comp-item">
               <span class="label">输入:</span>
@@ -168,8 +224,12 @@
         </div>
 
         <div class="comp-card">
-          <div class="comp-icon">🔊</div>
-          <div class="comp-name">TTS</div>
+          <div class="comp-icon">
+            🔊
+          </div>
+          <div class="comp-name">
+            TTS
+          </div>
           <div class="comp-items">
             <div class="comp-item">
               <span class="label">输入:</span>
@@ -189,35 +249,61 @@
     </div>
 
     <div class="pipeline-comparison">
-      <div class="pipe-title">🔀 架构对比</div>
+      <div class="pipe-title">
+        🔀 架构对比
+      </div>
       <div class="pipeline-diagram">
         <div class="pipeline asr-pipe">
-          <div class="pipe-label">ASR Pipeline</div>
+          <div class="pipe-label">
+            ASR Pipeline
+          </div>
           <div class="pipe-flow">
-            <div class="pipe-step">音频</div>
+            <div class="pipe-step">
+              音频
+            </div>
             <span>→</span>
-            <div class="pipe-step">特征</div>
+            <div class="pipe-step">
+              特征
+            </div>
             <span>→</span>
-            <div class="pipe-step">Encoder</div>
+            <div class="pipe-step">
+              Encoder
+            </div>
             <span>→</span>
-            <div class="pipe-step">Decoder</div>
+            <div class="pipe-step">
+              Decoder
+            </div>
             <span>→</span>
-            <div class="pipe-step output">文本</div>
+            <div class="pipe-step output">
+              文本
+            </div>
           </div>
         </div>
 
         <div class="pipeline tts-pipe">
-          <div class="pipe-label">TTS Pipeline</div>
+          <div class="pipe-label">
+            TTS Pipeline
+          </div>
           <div class="pipe-flow">
-            <div class="pipe-step">文本</div>
+            <div class="pipe-step">
+              文本
+            </div>
             <span>→</span>
-            <div class="pipe-step">Encoder</div>
+            <div class="pipe-step">
+              Encoder
+            </div>
             <span>→</span>
-            <div class="pipe-step">Decoder</div>
+            <div class="pipe-step">
+              Decoder
+            </div>
             <span>→</span>
-            <div class="pipe-step">声码器</div>
+            <div class="pipe-step">
+              声码器
+            </div>
             <span>→</span>
-            <div class="pipe-step output">音频</div>
+            <div class="pipe-step output">
+              音频
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/AudioQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/AudioQuickStartDemo.vue
index 2ae3040..56c3ee7 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/AudioQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/AudioQuickStartDemo.vue
@@ -13,7 +13,9 @@
 <template>
   <div class="audio-quick-start">
     <div class="header">
-      <div class="title">🎙️ AI 音频初体验：让机器开口说话</div>
+      <div class="title">
+        🎙️ AI 音频初体验：让机器开口说话
+      </div>
       <div class="subtitle">
         从语音合成到声音克隆，探索 AI 如何让机器拥有"声音"
       </div>
@@ -25,9 +27,9 @@
         <button
           v-for="scene in scenes"
           :key="scene.id"
-          @click="selectScene(scene)"
           class="scene-btn"
           :class="{ active: currentScene?.id === scene.id }"
+          @click="selectScene(scene)"
         >
           <span class="scene-icon">{{ scene.icon }}</span>
           <span class="scene-name">{{ scene.name }}</span>
@@ -36,58 +38,86 @@
 
       <!-- 演示区域 -->
       <div class="demo-area">
-        <div v-if="!currentScene" class="empty-state">
-          <div class="emoji">🎵</div>
+        <div
+          v-if="!currentScene"
+          class="empty-state"
+        >
+          <div class="emoji">
+            🎵
+          </div>
           <p>选择一个场景开始体验 AI 音频</p>
         </div>
 
         <!-- TTS 场景 -->
-        <div v-else-if="currentScene.id === 'tts'" class="tts-demo">
+        <div
+          v-else-if="currentScene.id === 'tts'"
+          class="tts-demo"
+        >
           <div class="input-section">
             <textarea
               v-model="ttsText"
               rows="3"
               placeholder="输入要合成的文本..."
-            ></textarea>
+            />
           </div>
           <div class="voice-selector">
             <span class="label">声音:</span>
             <button
               v-for="voice in voices"
               :key="voice.id"
-              @click="selectedVoice = voice.id"
               class="voice-btn"
               :class="{ active: selectedVoice === voice.id }"
+              @click="selectedVoice = voice.id"
             >
               {{ voice.icon }} {{ voice.name }}
             </button>
           </div>
-          <button @click="synthesize" class="action-btn primary" :disabled="isProcessing">
+          <button
+            class="action-btn primary"
+            :disabled="isProcessing"
+            @click="synthesize"
+          >
             <span v-if="isProcessing">合成中...</span>
             <span v-else>🎙️ 合成语音</span>
           </button>
 
           <!-- 波形可视化 -->
-          <div v-if="showWaveform" class="waveform-container">
-            <canvas ref="waveformCanvas" width="400" height="80"></canvas>
+          <div
+            v-if="showWaveform"
+            class="waveform-container"
+          >
+            <canvas
+              ref="waveformCanvas"
+              width="400"
+              height="80"
+            />
             <div class="audio-controls">
-              <button @click="togglePlay" class="play-btn">
+              <button
+                class="play-btn"
+                @click="togglePlay"
+              >
                 {{ isPlaying ? '⏸️' : '▶️' }}
               </button>
               <div class="progress-bar">
-                <div class="progress" :style="{ width: progress + '%' }"></div>
+                <div
+                  class="progress"
+                  :style="{ width: progress + '%' }"
+                />
               </div>
             </div>
           </div>
         </div>
 
         <!-- ASR 场景 -->
-        <div v-else-if="currentScene.id === 'asr'" class="asr-demo">
+        <div
+          v-else-if="currentScene.id === 'asr'"
+          class="asr-demo"
+        >
           <div class="record-section">
             <button
-              @click="toggleRecording"
               class="record-btn"
               :class="{ recording: isRecording }"
+              @click="toggleRecording"
             >
               <span class="record-icon">{{ isRecording ? '⏹️' : '🎤' }}</span>
               <span>{{ isRecording ? '停止录音' : '开始录音' }}</span>
@@ -95,64 +125,134 @@
           </div>
 
           <!-- 录音波形 -->
-          <div v-if="isRecording || hasRecorded" class="waveform-container">
-            <canvas ref="recordCanvas" width="400" height="80"></canvas>
+          <div
+            v-if="isRecording || hasRecorded"
+            class="waveform-container"
+          >
+            <canvas
+              ref="recordCanvas"
+              width="400"
+              height="80"
+            />
           </div>
 
           <!-- 识别结果 -->
-          <div v-if="transcription" class="result-box">
-            <div class="result-label">识别结果:</div>
-            <div class="result-text">{{ transcription }}</div>
+          <div
+            v-if="transcription"
+            class="result-box"
+          >
+            <div class="result-label">
+              识别结果:
+            </div>
+            <div class="result-text">
+              {{ transcription }}
+            </div>
           </div>
         </div>
 
         <!-- 声音克隆场景 -->
-        <div v-else-if="currentScene.id === 'clone'" class="clone-demo">
+        <div
+          v-else-if="currentScene.id === 'clone'"
+          class="clone-demo"
+        >
           <div class="clone-steps">
-            <div class="step" :class="{ active: cloneStep >= 1, done: cloneStep > 1 }">
-              <div class="step-num">1</div>
+            <div
+              class="step"
+              :class="{ active: cloneStep >= 1, done: cloneStep > 1 }"
+            >
+              <div class="step-num">
+                1
+              </div>
               <div class="step-content">
-                <div class="step-title">录制参考音频</div>
-                <button @click="recordReference" class="step-btn" :disabled="cloneStep !== 1">
+                <div class="step-title">
+                  录制参考音频
+                </div>
+                <button
+                  class="step-btn"
+                  :disabled="cloneStep !== 1"
+                  @click="recordReference"
+                >
                   {{ cloneStep > 1 ? '✓ 已完成' : '🎙️ 录制 5 秒' }}
                 </button>
               </div>
             </div>
-            <div class="step-arrow">→</div>
-            <div class="step" :class="{ active: cloneStep >= 2, done: cloneStep > 2 }">
-              <div class="step-num">2</div>
+            <div class="step-arrow">
+              →
+            </div>
+            <div
+              class="step"
+              :class="{ active: cloneStep >= 2, done: cloneStep > 2 }"
+            >
+              <div class="step-num">
+                2
+              </div>
               <div class="step-content">
-                <div class="step-title">提取声纹特征</div>
-                <div v-if="cloneStep === 2" class="processing">
-                  <div class="spinner"></div>
+                <div class="step-title">
+                  提取声纹特征
+                </div>
+                <div
+                  v-if="cloneStep === 2"
+                  class="processing"
+                >
+                  <div class="spinner" />
                   <span>分析中...</span>
                 </div>
               </div>
             </div>
-            <div class="step-arrow">→</div>
-            <div class="step" :class="{ active: cloneStep >= 3 }">
-              <div class="step-num">3</div>
+            <div class="step-arrow">
+              →
+            </div>
+            <div
+              class="step"
+              :class="{ active: cloneStep >= 3 }"
+            >
+              <div class="step-num">
+                3
+              </div>
               <div class="step-content">
-                <div class="step-title">合成克隆语音</div>
-                <div v-if="cloneStep === 3" class="clone-input">
-                  <input v-model="cloneText" placeholder="输入要合成的文本" />
-                  <button @click="synthesizeClone" class="step-btn">合成</button>
+                <div class="step-title">
+                  合成克隆语音
+                </div>
+                <div
+                  v-if="cloneStep === 3"
+                  class="clone-input"
+                >
+                  <input
+                    v-model="cloneText"
+                    placeholder="输入要合成的文本"
+                  >
+                  <button
+                    class="step-btn"
+                    @click="synthesizeClone"
+                  >
+                    合成
+                  </button>
+                </div>
+                <div
+                  v-if="cloneStep > 3"
+                  class="success-msg"
+                >
+                  ✓ 克隆成功!
                 </div>
-                <div v-if="cloneStep > 3" class="success-msg">✓ 克隆成功!</div>
               </div>
             </div>
           </div>
 
           <!-- 声纹可视化 -->
-          <div v-if="cloneStep >= 2" class="embedding-viz">
-            <div class="viz-title">声纹特征向量 (256维)</div>
+          <div
+            v-if="cloneStep >= 2"
+            class="embedding-viz"
+          >
+            <div class="viz-title">
+              声纹特征向量 (256维)
+            </div>
             <div class="embedding-bars">
               <div
                 v-for="(val, i) in embeddingValues"
                 :key="i"
                 class="bar"
                 :style="{ height: val + '%', opacity: 0.3 + val / 100 }"
-              ></div>
+              />
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/AudioTokenizationDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/AudioTokenizationDemo.vue
index 755cff7..33a9f13 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/AudioTokenizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/AudioTokenizationDemo.vue
@@ -25,28 +25,51 @@
         <!-- 流程图 -->
         <div class="codec-flow">
           <div class="flow-section encode">
-            <div class="section-title">🔽 编码器 (Encoder)</div>
+            <div class="section-title">
+              🔽 编码器 (Encoder)
+            </div>
             <div class="flow-steps">
               <div class="codec-step">
                 <div class="step-visual">
-                  <canvas ref="originalWaveformCanvas" width="150" height="60" />
+                  <canvas
+                    ref="originalWaveformCanvas"
+                    width="150"
+                    height="60"
+                  />
+                </div>
+                <div class="step-label">
+                  原始波形
+                </div>
+                <div class="step-meta">
+                  24kHz, 16-bit
                 </div>
-                <div class="step-label">原始波形</div>
-                <div class="step-meta">24kHz, 16-bit</div>
               </div>
-              <el-icon class="flow-arrow"><ArrowRight /></el-icon>
+              <el-icon class="flow-arrow">
+                <ArrowRight />
+              </el-icon>
               <div class="codec-step">
                 <div class="step-visual">
                   <div class="cnn-layers">
-                    <div class="cnn-layer" v-for="i in 4" :key="i" :style="{ opacity: 0.3 + i * 0.2 }">
+                    <div
+                      v-for="i in 4"
+                      :key="i"
+                      class="cnn-layer"
+                      :style="{ opacity: 0.3 + i * 0.2 }"
+                    >
                       Conv {{ i }}
                     </div>
                   </div>
                 </div>
-                <div class="step-label">CNN 下采样</div>
-                <div class="step-meta">降维 320x</div>
+                <div class="step-label">
+                  CNN 下采样
+                </div>
+                <div class="step-meta">
+                  降维 320x
+                </div>
               </div>
-              <el-icon class="flow-arrow"><ArrowRight /></el-icon>
+              <el-icon class="flow-arrow">
+                <ArrowRight />
+              </el-icon>
               <div class="codec-step">
                 <div class="step-visual">
                   <div class="vq-codebook">
@@ -60,20 +83,28 @@
                     </div>
                   </div>
                 </div>
-                <div class="step-label">VQ 量化</div>
-                <div class="step-meta">离散 Token</div>
+                <div class="step-label">
+                  VQ 量化
+                </div>
+                <div class="step-meta">
+                  离散 Token
+                </div>
               </div>
             </div>
           </div>
 
           <div class="flow-divider">
-            <div class="divider-line"></div>
-            <div class="divider-label">压缩后: ~1.5 kbps</div>
-            <div class="divider-line"></div>
+            <div class="divider-line" />
+            <div class="divider-label">
+              压缩后: ~1.5 kbps
+            </div>
+            <div class="divider-line" />
           </div>
 
           <div class="flow-section decode">
-            <div class="section-title">🔼 解码器 (Decoder)</div>
+            <div class="section-title">
+              🔼 解码器 (Decoder)
+            </div>
             <div class="flow-steps reverse">
               <div class="codec-step">
                 <div class="step-visual">
@@ -88,28 +119,53 @@
                     </span>
                   </div>
                 </div>
-                <div class="step-label">离散 Token</div>
-                <div class="step-meta">Codebook 索引</div>
+                <div class="step-label">
+                  离散 Token
+                </div>
+                <div class="step-meta">
+                  Codebook 索引
+                </div>
               </div>
-              <el-icon class="flow-arrow"><ArrowRight /></el-icon>
+              <el-icon class="flow-arrow">
+                <ArrowRight />
+              </el-icon>
               <div class="codec-step">
                 <div class="step-visual">
                   <div class="cnn-layers">
-                    <div class="cnn-layer" v-for="i in 4" :key="i" :style="{ opacity: 1 - i * 0.15 }">
+                    <div
+                      v-for="i in 4"
+                      :key="i"
+                      class="cnn-layer"
+                      :style="{ opacity: 1 - i * 0.15 }"
+                    >
                       ConvT {{ 5 - i }}
                     </div>
                   </div>
                 </div>
-                <div class="step-label">转置卷积</div>
-                <div class="step-meta">上采样</div>
+                <div class="step-label">
+                  转置卷积
+                </div>
+                <div class="step-meta">
+                  上采样
+                </div>
               </div>
-              <el-icon class="flow-arrow"><ArrowRight /></el-icon>
+              <el-icon class="flow-arrow">
+                <ArrowRight />
+              </el-icon>
               <div class="codec-step">
                 <div class="step-visual">
-                  <canvas ref="reconstructedWaveformCanvas" width="150" height="60" />
+                  <canvas
+                    ref="reconstructedWaveformCanvas"
+                    width="150"
+                    height="60"
+                  />
+                </div>
+                <div class="step-label">
+                  重建波形
+                </div>
+                <div class="step-meta">
+                  24kHz
                 </div>
-                <div class="step-label">重建波形</div>
-                <div class="step-meta">24kHz</div>
               </div>
             </div>
           </div>
@@ -117,7 +173,9 @@
 
         <!-- 码率对比 -->
         <div class="bitrate-comparison">
-          <div class="comparison-title">📊 不同码率对比</div>
+          <div class="comparison-title">
+            📊 不同码率对比
+          </div>
           <div class="bitrate-cards">
             <div
               v-for="config in bitrateConfigs"
@@ -126,8 +184,12 @@
               :class="{ active: selectedBitrate === config.name }"
               @click="selectedBitrate = config.name"
             >
-              <div class="bitrate-value">{{ config.bitrate }}</div>
-              <div class="bitrate-name">{{ config.name }}</div>
+              <div class="bitrate-value">
+                {{ config.bitrate }}
+              </div>
+              <div class="bitrate-name">
+                {{ config.name }}
+              </div>
               <div class="bitrate-detail">
                 <div class="detail-item">
                   <span class="label">采样率:</span>
@@ -154,10 +216,16 @@
 
         <!-- Token 可视化 -->
         <div class="token-visualization">
-          <div class="viz-title">🔢 Token 序列可视化</div>
+          <div class="viz-title">
+            🔢 Token 序列可视化
+          </div>
           <div class="token-display">
             <div class="token-ruler">
-              <span v-for="i in 20" :key="i" class="ruler-mark">{{ i * 0.1 }}s</span>
+              <span
+                v-for="i in 20"
+                :key="i"
+                class="ruler-mark"
+              >{{ i * 0.1 }}s</span>
             </div>
             <div class="token-stream">
               <div
@@ -174,15 +242,24 @@
           </div>
           <div class="token-legend">
             <span class="legend-item">
-              <span class="legend-color" style="background: #409eff"></span>
+              <span
+                class="legend-color"
+                style="background: #409eff"
+              />
               低频成分
             </span>
             <span class="legend-item">
-              <span class="legend-color" style="background: #67c23a"></span>
+              <span
+                class="legend-color"
+                style="background: #67c23a"
+              />
               中频成分
             </span>
             <span class="legend-item">
-              <span class="legend-color" style="background: #e6a23c"></span>
+              <span
+                class="legend-color"
+                style="background: #e6a23c"
+              />
               高频成分
             </span>
           </div>
@@ -190,32 +267,50 @@
 
         <!-- 应用场景 -->
         <div class="applications">
-          <div class="apps-title">🎯 为什么需要音频 Tokenization？</div>
+          <div class="apps-title">
+            🎯 为什么需要音频 Tokenization？
+          </div>
           <div class="apps-grid">
             <div class="app-card">
-              <div class="app-icon">🚀</div>
-              <div class="app-title">高效传输</div>
+              <div class="app-icon">
+                🚀
+              </div>
+              <div class="app-title">
+                高效传输
+              </div>
               <div class="app-desc">
                 将音频压缩到 ~1.5 kbps，比原始音频小 256 倍，适合网络传输
               </div>
             </div>
             <div class="app-card">
-              <div class="app-icon">🧠</div>
-              <div class="app-title">语言模型友好</div>
+              <div class="app-icon">
+                🧠
+              </div>
+              <div class="app-title">
+                语言模型友好
+              </div>
               <div class="app-desc">
                 离散 Token 可以被 LLM 直接处理，实现文本到音频的统一建模
               </div>
             </div>
             <div class="app-card">
-              <div class="app-icon">🎵</div>
-              <div class="app-title">音乐生成</div>
+              <div class="app-icon">
+                🎵
+              </div>
+              <div class="app-title">
+                音乐生成
+              </div>
               <div class="app-desc">
                 MusicGen、AudioLDM 等模型使用音频 Token 生成音乐和音效
               </div>
             </div>
             <div class="app-card">
-              <div class="app-icon">🗣️</div>
-              <div class="app-title">语音合成</div>
+              <div class="app-icon">
+                🗣️
+              </div>
+              <div class="app-title">
+                语音合成
+              </div>
               <div class="app-desc">
                 VALL-E、SoundStorm 等 TTS 模型直接生成音频 Token
               </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/AudioWaveformDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/AudioWaveformDemo.vue
index 90c8fd1..8cd9c41 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/AudioWaveformDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/AudioWaveformDemo.vue
@@ -3,9 +3,14 @@
     <div class="demo-container">
       <!-- Step 1: Sound Wave -->
       <div class="step-box">
-        <div class="label">🌊 声波</div>
+        <div class="label">
+          🌊 声波
+        </div>
         <div class="wave-visual">
-          <svg viewBox="0 0 200 60" class="wave-svg">
+          <svg
+            viewBox="0 0 200 60"
+            class="wave-svg"
+          >
             <path
               d="M 0 30 Q 10 10, 20 30 T 40 30 T 60 30 T 80 30 T 100 30 T 120 30 T 140 30 T 160 30 T 180 30 T 200 30"
               fill="none"
@@ -14,40 +19,60 @@
             />
           </svg>
         </div>
-        <div class="desc">连续模拟信号</div>
+        <div class="desc">
+          连续模拟信号
+        </div>
       </div>
 
-      <div class="arrow">→</div>
+      <div class="arrow">
+        →
+      </div>
 
       <!-- Step 2: Sampling -->
       <div class="step-box">
-        <div class="label">📊 采样</div>
-        <div class="sample-visual">
-          <div v-for="n in 10" :key="n" class="sample-bar"></div>
+        <div class="label">
+          📊 采样
+        </div>
+        <div class="sample-visual">
+          <div
+            v-for="n in 10"
+            :key="n"
+            class="sample-bar"
+          />
+        </div>
+        <div class="desc">
+          44100 点/秒
         </div>
-        <div class="desc">44100 点/秒</div>
       </div>
 
-      <div class="arrow">→</div>
+      <div class="arrow">
+        →
+      </div>
 
       <!-- Step 3: Digital -->
       <div class="step-box">
-        <div class="label">🔢 数字化</div>
+        <div class="label">
+          🔢 数字化
+        </div>
         <div class="digital-visual">
-          <div v-for="n in 8" :key="n" class="bit">
+          <div
+            v-for="n in 8"
+            :key="n"
+            class="bit"
+          >
             {{ Math.floor(Math.random() * 2) }}
           </div>
         </div>
-        <div class="desc">PCM 数据</div>
+        <div class="desc">
+          PCM 数据
+        </div>
       </div>
     </div>
 
     <div class="explanation">
       <p>
         <span class="icon">💡</span>
-        计算机无法直接处理连续的声波，需要把它转换成数字。 这个过程叫<strong
-          >模数转换 (ADC)</strong
-        >：每隔一小段时间测量一次声音的强度，记录成数字。
+        计算机无法直接处理连续的声波，需要把它转换成数字。 这个过程叫<strong>模数转换 (ADC)</strong>：每隔一小段时间测量一次声音的强度，记录成数字。
       </p>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/AutoregressiveAudioDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/AutoregressiveAudioDemo.vue
index f4b8365..5cf3a5e 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/AutoregressiveAudioDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/AutoregressiveAudioDemo.vue
@@ -4,9 +4,9 @@
       <div class="controls">
         <el-button
           type="primary"
-          @click="playDemo"
           :loading="isPlaying"
           icon="VideoPlay"
+          @click="playDemo"
         >
           开始对比演示
         </el-button>
@@ -14,10 +14,18 @@
 
       <div class="comparison-container">
         <!-- Left: Autoregressive -->
-        <el-card shadow="hover" class="method-card">
+        <el-card
+          shadow="hover"
+          class="method-card"
+        >
           <template #header>
             <div class="method-header">
-              <el-icon :size="20" color="#F56C6C"><Timer /></el-icon>
+              <el-icon
+                :size="20"
+                color="#F56C6C"
+              >
+                <Timer />
+              </el-icon>
               <span class="method-title">自回归 (Autoregressive)</span>
             </div>
           </template>
@@ -38,12 +46,21 @@
               </div>
             </div>
             <div class="stats">
-              <el-descriptions :column="1" size="small" border>
-                <el-descriptions-item label="生成方式"
-                  >串行 (Serial)</el-descriptions-item
-                >
+              <el-descriptions
+                :column="1"
+                size="small"
+                border
+              >
+                <el-descriptions-item label="生成方式">
+                  串行 (Serial)
+                </el-descriptions-item>
                 <el-descriptions-item label="速度">
-                  <el-tag type="danger" size="small">慢 (Slow)</el-tag>
+                  <el-tag
+                    type="danger"
+                    size="small"
+                  >
+                    慢 (Slow)
+                  </el-tag>
                 </el-descriptions-item>
               </el-descriptions>
             </div>
@@ -51,16 +68,27 @@
         </el-card>
 
         <!-- Right: Flow Matching -->
-        <el-card shadow="hover" class="method-card">
+        <el-card
+          shadow="hover"
+          class="method-card"
+        >
           <template #header>
             <div class="method-header">
-              <el-icon :size="20" color="#67C23A"><Lightning /></el-icon>
+              <el-icon
+                :size="20"
+                color="#67C23A"
+              >
+                <Lightning />
+              </el-icon>
               <span class="method-title">流匹配 (Flow Matching)</span>
             </div>
           </template>
           <div class="method-body">
             <div class="visual-area">
-              <div class="flow-field" :style="{ opacity: flowProgress }">
+              <div
+                class="flow-field"
+                :style="{ opacity: flowProgress }"
+              >
                 <div
                   v-for="n in 20"
                   :key="n"
@@ -69,23 +97,34 @@
                     height: flowProgress * (30 + Math.random() * 70) + '%',
                     transitionDelay: n * 0.02 + 's'
                   }"
-                ></div>
+                />
               </div>
               <div
-                class="flow-overlay"
                 v-if="flowProgress < 1 && flowProgress > 0"
+                class="flow-overlay"
               >
-                <el-icon class="is-loading"><Loading /></el-icon>
+                <el-icon class="is-loading">
+                  <Loading />
+                </el-icon>
                 <span>Denoising...</span>
               </div>
             </div>
             <div class="stats">
-              <el-descriptions :column="1" size="small" border>
-                <el-descriptions-item label="生成方式"
-                  >并行 (Parallel)</el-descriptions-item
-                >
+              <el-descriptions
+                :column="1"
+                size="small"
+                border
+              >
+                <el-descriptions-item label="生成方式">
+                  并行 (Parallel)
+                </el-descriptions-item>
                 <el-descriptions-item label="速度">
-                  <el-tag type="success" size="small">极快 (Fast)</el-tag>
+                  <el-tag
+                    type="success"
+                    size="small"
+                  >
+                    极快 (Fast)
+                  </el-tag>
                 </el-descriptions-item>
               </el-descriptions>
             </div>
@@ -95,12 +134,17 @@
 
       <el-divider />
 
-      <el-alert title="技术演进" type="success" :closable="false" show-icon>
+      <el-alert
+        title="技术演进"
+        type="success"
+        :closable="false"
+        show-icon
+      >
         <template #default>
           <p>
             <strong>自回归</strong> (如 VALL-E)
             像人说话一样，必须说完上一个字才能说下一个字，所以很慢。
-            <br />
+            <br>
             <strong>流匹配</strong> (如 F5-TTS)
             像画画一样，可以同时在画布的所有角落开始上色，效率提升了 10-20 倍。
           </p>
@@ -139,13 +183,12 @@ const playDemo = async () => {
   })
 
   // Start AR (Slow)
-  const arPromise = new Promise(async (resolve) => {
+  const arPromise = (async () => {
     for (const token of arTokensSource) {
       await new Promise((r) => setTimeout(r, 400)) // 400ms per token
       displayedArTokens.value.push(token)
     }
-    resolve()
-  })
+  })()
 
   await Promise.all([flowPromise, arPromise])
   isPlaying.value = false
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/EmotionControlDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/EmotionControlDemo.vue
index 72015fd..0e38745 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/EmotionControlDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/EmotionControlDemo.vue
@@ -24,7 +24,9 @@
       <div class="demo-content">
         <!-- 情感选择 -->
         <div class="emotion-selector">
-          <div class="selector-title">选择情感风格</div>
+          <div class="selector-title">
+            选择情感风格
+          </div>
           <div class="emotion-grid">
             <div
               v-for="emotion in emotions"
@@ -33,16 +35,24 @@
               :class="{ active: selectedEmotion === emotion.id }"
               @click="selectEmotion(emotion.id)"
             >
-              <div class="emotion-emoji">{{ emotion.emoji }}</div>
-              <div class="emotion-name">{{ emotion.name }}</div>
-              <div class="emotion-desc">{{ emotion.description }}</div>
+              <div class="emotion-emoji">
+                {{ emotion.emoji }}
+              </div>
+              <div class="emotion-name">
+                {{ emotion.name }}
+              </div>
+              <div class="emotion-desc">
+                {{ emotion.description }}
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 情感向量可视化 -->
         <div class="emotion-embedding">
-          <div class="embedding-title">情感向量空间 (Emotion Embedding)</div>
+          <div class="embedding-title">
+            情感向量空间 (Emotion Embedding)
+          </div>
           <canvas
             ref="emotionCanvas"
             width="400"
@@ -66,14 +76,23 @@
 
         <!-- 参数控制 -->
         <div class="parameter-controls">
-          <div class="control-title">🎚️ 细粒度控制</div>
+          <div class="control-title">
+            🎚️ 细粒度控制
+          </div>
           <div class="controls-grid">
             <div class="control-item">
               <div class="control-label">
                 <span>语速</span>
-                <el-tag size="small">{{ speed }}x</el-tag>
+                <el-tag size="small">
+                  {{ speed }}x
+                </el-tag>
               </div>
-              <el-slider v-model="speed" :min="0.5" :max="2" :step="0.1" />
+              <el-slider
+                v-model="speed"
+                :min="0.5"
+                :max="2"
+                :step="0.1"
+              />
               <div class="control-hint">
                 <span>慢</span>
                 <span>正常</span>
@@ -84,9 +103,16 @@
             <div class="control-item">
               <div class="control-label">
                 <span>音调</span>
-                <el-tag size="small">{{ pitch > 0 ? '+' : '' }}{{ pitch }}</el-tag>
+                <el-tag size="small">
+                  {{ pitch > 0 ? '+' : '' }}{{ pitch }}
+                </el-tag>
               </div>
-              <el-slider v-model="pitch" :min="-10" :max="10" :step="1" />
+              <el-slider
+                v-model="pitch"
+                :min="-10"
+                :max="10"
+                :step="1"
+              />
               <div class="control-hint">
                 <span>低</span>
                 <span>正常</span>
@@ -97,9 +123,16 @@
             <div class="control-item">
               <div class="control-label">
                 <span>音量动态</span>
-                <el-tag size="small">{{ energy }}%</el-tag>
+                <el-tag size="small">
+                  {{ energy }}%
+                </el-tag>
               </div>
-              <el-slider v-model="energy" :min="50" :max="150" :step="5" />
+              <el-slider
+                v-model="energy"
+                :min="50"
+                :max="150"
+                :step="5"
+              />
               <div class="control-hint">
                 <span>柔和</span>
                 <span>适中</span>
@@ -110,9 +143,16 @@
             <div class="control-item">
               <div class="control-label">
                 <span>停顿控制</span>
-                <el-tag size="small">{{ pause }}ms</el-tag>
+                <el-tag size="small">
+                  {{ pause }}ms
+                </el-tag>
               </div>
-              <el-slider v-model="pause" :min="0" :max="500" :step="50" />
+              <el-slider
+                v-model="pause"
+                :min="0"
+                :max="500"
+                :step="50"
+              />
               <div class="control-hint">
                 <span>紧凑</span>
                 <span>自然</span>
@@ -124,7 +164,9 @@
 
         <!-- 文本输入和预览 -->
         <div class="preview-section">
-          <div class="preview-title">🎙️ 预览合成</div>
+          <div class="preview-title">
+            🎙️ 预览合成
+          </div>
           <el-input
             v-model="previewText"
             type="textarea"
@@ -133,7 +175,10 @@
             class="preview-input"
           />
           <div class="preview-actions">
-            <el-button type="primary" @click="synthesize">
+            <el-button
+              type="primary"
+              @click="synthesize"
+            >
               <el-icon><VideoPlay /></el-icon>
               合成预览
             </el-button>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/MelSpectrogramDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/MelSpectrogramDemo.vue
index 7f3172a..af48ed5 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/MelSpectrogramDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/MelSpectrogramDemo.vue
@@ -14,7 +14,9 @@
 <template>
   <div class="mel-spec-demo">
     <div class="header">
-      <div class="title">📊 梅尔频谱：AI 如何"看懂"声音</div>
+      <div class="title">
+        📊 梅尔频谱：AI 如何"看懂"声音
+      </div>
       <div class="subtitle">
         声音是波，但 AI 看到的是频谱图。探索波形如何变成 AI 能理解的"图像"
       </div>
@@ -25,9 +27,9 @@
         <button
           v-for="type in audioTypes"
           :key="type.id"
-          @click="selectType(type.id)"
           class="type-btn"
           :class="{ active: selectedType === type.id }"
+          @click="selectType(type.id)"
         >
           <span class="type-icon">{{ type.icon }}</span>
           <span>{{ type.name }}</span>
@@ -38,23 +40,23 @@
         <div class="param">
           <label>FFT 窗口</label>
           <input
-            type="range"
             v-model="fftSize"
+            type="range"
             min="256"
             max="2048"
             step="256"
-          />
+          >
           <span class="value">{{ fftSize }}</span>
         </div>
         <div class="param">
           <label>梅尔滤波器</label>
           <input
-            type="range"
             v-model="melBins"
+            type="range"
             min="20"
             max="128"
             step="4"
-          />
+          >
           <span class="value">{{ melBins }}</span>
         </div>
       </div>
@@ -67,7 +69,11 @@
           <span class="viz-title">🔊 波形 (时域)</span>
           <span class="viz-desc">原始音频振幅随时间变化</span>
         </div>
-        <canvas ref="waveformCanvas" width="600" height="100"></canvas>
+        <canvas
+          ref="waveformCanvas"
+          width="600"
+          height="100"
+        />
       </div>
 
       <div class="transform-arrow">
@@ -82,31 +88,55 @@
             <span class="viz-title">📈 线性频谱</span>
             <span class="viz-tag">高频分辨率低</span>
           </div>
-          <canvas ref="linearCanvas" width="280" height="150"></canvas>
+          <canvas
+            ref="linearCanvas"
+            width="280"
+            height="150"
+          />
         </div>
 
-        <div class="vs">VS</div>
+        <div class="vs">
+          VS
+        </div>
 
         <div class="viz-section highlight">
           <div class="viz-header">
             <span class="viz-title">🎯 梅尔频谱</span>
             <span class="viz-tag success">符合人耳感知</span>
           </div>
-          <canvas ref="melCanvas" width="280" height="150"></canvas>
+          <canvas
+            ref="melCanvas"
+            width="280"
+            height="150"
+          />
         </div>
       </div>
     </div>
 
     <div class="explanation">
-      <div class="exp-title">🎧 为什么用梅尔刻度？</div>
+      <div class="exp-title">
+        🎧 为什么用梅尔刻度？
+      </div>
       <div class="exp-content">
         <div class="exp-item">
           <div class="exp-visual">
             <div class="freq-bars human">
-              <div class="bar" style="height: 80%"></div>
-              <div class="bar" style="height: 60%"></div>
-              <div class="bar" style="height: 40%"></div>
-              <div class="bar" style="height: 20%"></div>
+              <div
+                class="bar"
+                style="height: 80%"
+              />
+              <div
+                class="bar"
+                style="height: 60%"
+              />
+              <div
+                class="bar"
+                style="height: 40%"
+              />
+              <div
+                class="bar"
+                style="height: 20%"
+              />
             </div>
           </div>
           <div class="exp-text">
@@ -117,10 +147,22 @@
         <div class="exp-item">
           <div class="exp-visual">
             <div class="freq-bars linear">
-              <div class="bar" style="height: 10%"></div>
-              <div class="bar" style="height: 20%"></div>
-              <div class="bar" style="height: 70%"></div>
-              <div class="bar" style="height: 90%"></div>
+              <div
+                class="bar"
+                style="height: 10%"
+              />
+              <div
+                class="bar"
+                style="height: 20%"
+              />
+              <div
+                class="bar"
+                style="height: 70%"
+              />
+              <div
+                class="bar"
+                style="height: 90%"
+              />
             </div>
           </div>
           <div class="exp-text">
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/SpectrogramViz.vue b/docs/.vitepress/theme/components/appendix/audio-intro/SpectrogramViz.vue
index 2c81e97..55eae7d 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/SpectrogramViz.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/SpectrogramViz.vue
@@ -6,7 +6,12 @@
         <div class="viz-box">
           <div class="viz-header">
             <span class="viz-title">🌊 波形 (Waveform)</span>
-            <el-tag size="small" type="success">Time Domain</el-tag>
+            <el-tag
+              size="small"
+              type="success"
+            >
+              Time Domain
+            </el-tag>
           </div>
           <div class="viz-content waveform-container">
             <div class="wave-bars">
@@ -18,10 +23,14 @@
                   height: 20 + Math.random() * 60 + '%',
                   animationDelay: n * 0.05 + 's'
                 }"
-              ></div>
+              />
+            </div>
+            <div class="axis-label x-axis">
+              时间 (Time) →
+            </div>
+            <div class="axis-label y-axis">
+              振幅 (Amplitude) ↑
             </div>
-            <div class="axis-label x-axis">时间 (Time) →</div>
-            <div class="axis-label y-axis">振幅 (Amplitude) ↑</div>
           </div>
         </div>
 
@@ -36,12 +45,25 @@
         <div class="viz-box">
           <div class="viz-header">
             <span class="viz-title">🎨 频谱图 (Spectrogram)</span>
-            <el-tag size="small" type="warning">Freq Domain</el-tag>
+            <el-tag
+              size="small"
+              type="warning"
+            >
+              Freq Domain
+            </el-tag>
           </div>
           <div class="viz-content spectrogram-container">
-            <canvas ref="canvasRef" width="200" height="100"></canvas>
-            <div class="axis-label x-axis">时间 (Time) →</div>
-            <div class="axis-label y-axis">频率 (Freq) ↑</div>
+            <canvas
+              ref="canvasRef"
+              width="200"
+              height="100"
+            />
+            <div class="axis-label x-axis">
+              时间 (Time) →
+            </div>
+            <div class="axis-label y-axis">
+              频率 (Freq) ↑
+            </div>
           </div>
         </div>
       </div>
@@ -57,11 +79,11 @@
         <template #default>
           <div class="legend">
             <div class="legend-item">
-              <div class="color-box low"></div>
+              <div class="color-box low" />
               低能量 (安静)
             </div>
             <div class="legend-item">
-              <div class="color-box high"></div>
+              <div class="color-box high" />
               高能量 (响亮)
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/TTSPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/TTSPipelineDemo.vue
index f46c976..68f9a80 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/TTSPipelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/TTSPipelineDemo.vue
@@ -8,7 +8,9 @@
 <template>
   <div class="tts-pipeline-demo">
     <div class="header">
-      <div class="title">🔄 TTS 架构演进：从慢到快</div>
+      <div class="title">
+        🔄 TTS 架构演进：从慢到快
+      </div>
       <div class="subtitle">
         探索文本如何变成语音，以及不同架构的优劣对比
       </div>
@@ -18,13 +20,16 @@
       <button
         v-for="arch in architectures"
         :key="arch.id"
-        @click="selectArch(arch.id)"
         class="arch-btn"
         :class="{ active: selectedArch === arch.id }"
+        @click="selectArch(arch.id)"
       >
         <span class="arch-icon">{{ arch.icon }}</span>
         <span class="arch-name">{{ arch.name }}</span>
-        <span class="arch-tag" :class="arch.tagClass">{{ arch.tag }}</span>
+        <span
+          class="arch-tag"
+          :class="arch.tagClass"
+        >{{ arch.tag }}</span>
       </button>
     </div>
 
@@ -36,26 +41,50 @@
         :class="{ active: activeStage === index }"
         @click="activeStage = index"
       >
-        <div class="stage-num">{{ index + 1 }}</div>
-        <div class="stage-content">
-          <div class="stage-icon">{{ stage.icon }}</div>
-          <div class="stage-name">{{ stage.name }}</div>
-          <div class="stage-desc">{{ stage.shortDesc }}</div>
+        <div class="stage-num">
+          {{ index + 1 }}
+        </div>
+        <div class="stage-content">
+          <div class="stage-icon">
+            {{ stage.icon }}
+          </div>
+          <div class="stage-name">
+            {{ stage.name }}
+          </div>
+          <div class="stage-desc">
+            {{ stage.shortDesc }}
+          </div>
+        </div>
+        <div
+          v-if="index < currentStages.length - 1"
+          class="stage-arrow"
+        >
+          →
         </div>
-        <div v-if="index < currentStages.length - 1" class="stage-arrow">→</div>
       </div>
     </div>
 
-    <div class="stage-detail" v-if="currentStage">
+    <div
+      v-if="currentStage"
+      class="stage-detail"
+    >
       <div class="detail-header">
         <span class="detail-icon">{{ currentStage.icon }}</span>
         <div>
-          <div class="detail-name">{{ currentStage.name }}</div>
-          <div class="detail-desc">{{ currentStage.description }}</div>
+          <div class="detail-name">
+            {{ currentStage.name }}
+          </div>
+          <div class="detail-desc">
+            {{ currentStage.description }}
+          </div>
         </div>
       </div>
       <div class="detail-canvas">
-        <canvas ref="detailCanvas" width="500" height="150"></canvas>
+        <canvas
+          ref="detailCanvas"
+          width="500"
+          height="150"
+        />
       </div>
       <div class="detail-meta">
         <div class="meta-item">
@@ -74,29 +103,58 @@
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">📊 架构对比</div>
+      <div class="table-title">
+        📊 架构对比
+      </div>
       <div class="table">
         <div class="table-header">
-          <div class="cell">特性</div>
-          <div class="cell">自回归</div>
-          <div class="cell">非自回归</div>
-          <div class="cell">流匹配</div>
+          <div class="cell">
+            特性
+          </div>
+          <div class="cell">
+            自回归
+          </div>
+          <div class="cell">
+            非自回归
+          </div>
+          <div class="cell">
+            流匹配
+          </div>
         </div>
         <div
           v-for="row in comparisonRows"
           :key="row.feature"
           class="table-row"
         >
-          <div class="cell feature">{{ row.feature }}</div>
-          <div class="cell" :class="{ highlight: selectedArch === 'ar' }">{{ row.ar }}</div>
-          <div class="cell" :class="{ highlight: selectedArch === 'nar' }">{{ row.nar }}</div>
-          <div class="cell" :class="{ highlight: selectedArch === 'flow' }">{{ row.flow }}</div>
+          <div class="cell feature">
+            {{ row.feature }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: selectedArch === 'ar' }"
+          >
+            {{ row.ar }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: selectedArch === 'nar' }"
+          >
+            {{ row.nar }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: selectedArch === 'flow' }"
+          >
+            {{ row.flow }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="models-section">
-      <div class="models-title">🏆 代表模型</div>
+      <div class="models-title">
+        🏆 代表模型
+      </div>
       <div class="models-grid">
         <div
           v-for="model in models"
@@ -104,9 +162,16 @@
           class="model-card"
           :class="{ active: model.arch === selectedArch }"
         >
-          <div class="model-name">{{ model.name }}</div>
-          <span class="model-tag" :class="model.tagClass">{{ model.type }}</span>
-          <div class="model-desc">{{ model.desc }}</div>
+          <div class="model-name">
+            {{ model.name }}
+          </div>
+          <span
+            class="model-tag"
+            :class="model.tagClass"
+          >{{ model.type }}</span>
+          <div class="model-desc">
+            {{ model.desc }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/audio-intro/VoiceCloningDemo.vue b/docs/.vitepress/theme/components/appendix/audio-intro/VoiceCloningDemo.vue
index 7f62ca2..9717109 100644
--- a/docs/.vitepress/theme/components/appendix/audio-intro/VoiceCloningDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/audio-intro/VoiceCloningDemo.vue
@@ -8,7 +8,9 @@
 <template>
   <div class="voice-clone-demo">
     <div class="header">
-      <div class="title">🎭 声音克隆：让 AI 模仿任何人</div>
+      <div class="title">
+        🎭 声音克隆：让 AI 模仿任何人
+      </div>
       <div class="subtitle">
         只需几秒钟的参考音频，AI 就能学会任何人的声音
       </div>
@@ -18,9 +20,9 @@
       <button
         v-for="mode in modes"
         :key="mode.id"
-        @click="selectMode(mode.id)"
         class="mode-btn"
         :class="{ active: selectedMode === mode.id }"
+        @click="selectMode(mode.id)"
       >
         <span class="mode-icon">{{ mode.icon }}</span>
         <span>{{ mode.name }}</span>
@@ -36,22 +38,36 @@
         </div>
         <div class="audio-grid">
           <div
-            v-for="ref in references"
-            :key="ref.id"
+            v-for="reference in references"
+            :key="reference.id"
             class="audio-card"
-            :class="{ selected: selectedRef === ref.id }"
-            @click="selectRef(ref.id)"
+            :class="{ selected: selectedRef === reference.id }"
+            @click="selectRef(reference.id)"
           >
-            <div class="audio-avatar">{{ ref.avatar }}</div>
-            <div class="audio-name">{{ ref.name }}</div>
-            <div class="audio-desc">{{ ref.desc }}</div>
-            <button class="play-btn" @click.stop="playRef(ref.id)">
+            <div class="audio-avatar">
+              {{ ref.avatar }}
+            </div>
+            <div class="audio-name">
+              {{ ref.name }}
+            </div>
+            <div class="audio-desc">
+              {{ ref.desc }}
+            </div>
+            <button
+              class="play-btn"
+              @click.stop="playRef(ref.id)"
+            >
               {{ playingRef === ref.id ? '⏸' : '▶' }}
             </button>
           </div>
         </div>
-        <div class="or-divider">或</div>
-        <button class="upload-btn" @click="uploadRef">
+        <div class="or-divider">
+          或
+        </div>
+        <button
+          class="upload-btn"
+          @click="uploadRef"
+        >
           📤 上传自己的音频
         </button>
       </div>
@@ -69,14 +85,32 @@
             class="process-step"
             :class="{ active: currentStep >= index }"
           >
-            <div class="step-icon">{{ step.icon }}</div>
-            <div class="step-name">{{ step.name }}</div>
-            <div v-if="index < processSteps.length - 1" class="step-arrow">→</div>
+            <div class="step-icon">
+              {{ step.icon }}
+            </div>
+            <div class="step-name">
+              {{ step.name }}
+            </div>
+            <div
+              v-if="index < processSteps.length - 1"
+              class="step-arrow"
+            >
+              →
+            </div>
           </div>
         </div>
-        <div class="feature-viz" v-if="currentStep >= 2">
-          <canvas ref="featureCanvas" width="400" height="100"></canvas>
-          <div class="viz-label">提取的声音特征向量</div>
+        <div
+          v-if="currentStep >= 2"
+          class="feature-viz"
+        >
+          <canvas
+            ref="featureCanvas"
+            width="400"
+            height="100"
+          />
+          <div class="viz-label">
+            提取的声音特征向量
+          </div>
         </div>
       </div>
 
@@ -91,31 +125,47 @@
             v-model="inputText"
             placeholder="输入要合成的文本..."
             rows="3"
-          ></textarea>
+          />
           <button
             class="generate-btn"
             :disabled="!canGenerate"
             @click="generate"
           >
-            <span v-if="isGenerating" class="spinner"></span>
+            <span
+              v-if="isGenerating"
+              class="spinner"
+            />
             <span v-else>🎙 生成语音</span>
           </button>
         </div>
 
-        <div v-if="generatedAudio" class="result-area">
+        <div
+          v-if="generatedAudio"
+          class="result-area"
+        >
           <div class="result-header">
             <span class="result-icon">🎵</span>
             <span>生成结果</span>
             <span class="similarity">相似度: {{ similarity }}%</span>
           </div>
           <div class="waveform-mini">
-            <canvas ref="resultCanvas" width="400" height="60"></canvas>
+            <canvas
+              ref="resultCanvas"
+              width="400"
+              height="60"
+            />
           </div>
           <div class="result-actions">
-            <button class="action-btn" @click="playResult">
+            <button
+              class="action-btn"
+              @click="playResult"
+            >
               {{ playingResult ? '⏸ 暂停' : '▶ 播放' }}
             </button>
-            <button class="action-btn secondary" @click="download">
+            <button
+              class="action-btn secondary"
+              @click="download"
+            >
               ⬇ 下载
             </button>
           </div>
@@ -124,24 +174,32 @@
     </div>
 
     <div class="tips-section">
-      <div class="tips-title">💡 声音克隆小贴士</div>
+      <div class="tips-title">
+        💡 声音克隆小贴士
+      </div>
       <div class="tips-grid">
         <div class="tip-card">
-          <div class="tip-icon">⏱️</div>
+          <div class="tip-icon">
+            ⏱️
+          </div>
           <div class="tip-text">
             <strong>参考音频时长</strong>
             <p>3-10 秒即可，质量比时长更重要</p>
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">🔇</div>
+          <div class="tip-icon">
+            🔇
+          </div>
           <div class="tip-text">
             <strong>环境要求</strong>
             <p>安静环境，避免背景噪音</p>
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">🗣️</div>
+          <div class="tip-icon">
+            🗣️
+          </div>
           <div class="tip-text">
             <strong>内容选择</strong>
             <p>包含多种音调和语速效果更好</p>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue
index 513a6fa..a6e3518 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthBasicsDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="auth-basics-demo">
     <div class="header">
-      <div class="title">🧰 鉴权的 4 种常见“凭证”</div>
+      <div class="title">
+        🧰 鉴权的 4 种常见“凭证”
+      </div>
       <div class="subtitle">
         选一个方案，看看请求长什么样、优缺点是什么、最常见坑是什么。
       </div>
@@ -26,24 +28,44 @@
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">请求长什么样</div>
+        <div class="card-title">
+          请求长什么样
+        </div>
         <pre class="code"><code>{{ active.example }}</code></pre>
-        <div class="hint">{{ active.note }}</div>
+        <div class="hint">
+          {{ active.note }}
+        </div>
       </div>
 
       <div class="card">
-        <div class="card-title">什么时候用 / 不用</div>
+        <div class="card-title">
+          什么时候用 / 不用
+        </div>
         <div class="two">
           <div class="box">
-            <div class="box-title">✅ 适合</div>
+            <div class="box-title">
+              ✅ 适合
+            </div>
             <ul class="list">
-              <li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
+              <li
+                v-for="(x, i) in active.pros"
+                :key="i"
+              >
+                {{ x }}
+              </li>
             </ul>
           </div>
           <div class="box">
-            <div class="box-title">⚠️ 不适合 / 风险</div>
+            <div class="box-title">
+              ⚠️ 不适合 / 风险
+            </div>
             <ul class="list">
-              <li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
+              <li
+                v-for="(x, i) in active.cons"
+                :key="i"
+              >
+                {{ x }}
+              </li>
             </ul>
           </div>
         </div>
@@ -51,10 +73,11 @@
     </div>
 
     <div class="card">
-      <div class="card-title">一句话口诀</div>
+      <div class="card-title">
+        一句话口诀
+      </div>
       <div class="desc">
-        <strong>先认证（你是谁）</strong
-        >，再授权（你能做什么）。凭证只是“证明身份的方式”，授权永远要在服务端执行。
+        <strong>先认证（你是谁）</strong>，再授权（你能做什么）。凭证只是“证明身份的方式”，授权永远要在服务端执行。
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue
index ee697fe..856fcb2 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="auth-evolution-demo">
     <div class="header">
-      <div class="title">🧭 鉴权方案演进：从 Basic 到 OAuth2</div>
-      <div class="subtitle">点击卡片，快速建立“场景 → 方案”的直觉。</div>
+      <div class="title">
+        🧭 鉴权方案演进：从 Basic 到 OAuth2
+      </div>
+      <div class="subtitle">
+        点击卡片，快速建立“场景 → 方案”的直觉。
+      </div>
     </div>
 
     <div class="timeline">
@@ -21,25 +25,45 @@
           <span class="icon">{{ s.icon }}</span>
           <span class="name">{{ s.name }}</span>
         </div>
-        <div class="stage-sub">{{ s.when }}</div>
+        <div class="stage-sub">
+          {{ s.when }}
+        </div>
       </button>
     </div>
 
     <div class="card">
-      <div class="card-title">{{ active.icon }} {{ active.name }}</div>
-      <div class="desc">{{ active.desc }}</div>
+      <div class="card-title">
+        {{ active.icon }} {{ active.name }}
+      </div>
+      <div class="desc">
+        {{ active.desc }}
+      </div>
 
       <div class="grid">
         <div class="box">
-          <div class="box-title">✅ 适合</div>
+          <div class="box-title">
+            ✅ 适合
+          </div>
           <ul class="list">
-            <li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
+            <li
+              v-for="(x, i) in active.pros"
+              :key="i"
+            >
+              {{ x }}
+            </li>
           </ul>
         </div>
         <div class="box">
-          <div class="box-title">⚠️ 主要风险</div>
+          <div class="box-title">
+            ⚠️ 主要风险
+          </div>
           <ul class="list">
-            <li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
+            <li
+              v-for="(x, i) in active.cons"
+              :key="i"
+            >
+              {{ x }}
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthInteractiveLoginDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthInteractiveLoginDemo.vue
index 4e47b6a..c0a0811 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/AuthInteractiveLoginDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthInteractiveLoginDemo.vue
@@ -13,13 +13,19 @@
 <template>
   <div class="auth-interactive-login">
     <div class="header">
-      <div class="title">🔐 认证流程演示</div>
-      <div class="subtitle">模拟登录过程，理解认证与授权的区别</div>
+      <div class="title">
+        🔐 认证流程演示
+      </div>
+      <div class="subtitle">
+        模拟登录过程，理解认证与授权的区别
+      </div>
     </div>
 
     <!-- 模式切换 -->
     <div class="mode-selector">
-      <div class="mode-label">选择鉴权方式：</div>
+      <div class="mode-label">
+        选择鉴权方式：
+      </div>
       <div class="mode-buttons">
         <button
           class="mode-btn"
@@ -42,110 +48,140 @@
       <!-- 登录表单 -->
       <div class="login-section">
         <div class="form-container">
-          <div class="form-title">登录表单</div>
+          <div class="form-title">
+            登录表单
+          </div>
           <div class="form-fields">
             <div class="field-group">
               <label>用户名</label>
               <input
-                type="text"
                 v-model="username"
+                type="text"
                 placeholder="输入用户名"
                 :disabled="locked"
-              />
+              >
             </div>
             <div class="field-group">
               <label>密码</label>
               <input
-                type="password"
                 v-model="password"
+                type="password"
                 placeholder="输入密码"
                 :disabled="locked"
                 @keyup.enter="startDemo"
-              />
+              >
             </div>
             <button
               class="login-btn"
-              @click="startDemo"
               :disabled="!username || !password || locked"
+              @click="startDemo"
             >
               开始演示
             </button>
           </div>
 
           <div class="hints">
-            <div class="hint-title">💡 提示</div>
+            <div class="hint-title">
+              💡 提示
+            </div>
             <div class="hint-text">
               试试用户名 <code>admin</code>，密码 <code>123456</code>
             </div>
           </div>
 
-          <div class="stepper" v-if="flowStep > 0">
+          <div
+            v-if="flowStep > 0"
+            class="stepper"
+          >
             <div class="stepper-title">
               当前步骤：{{ flowStep }} / {{ maxStep }}
-              <span class="stepper-hint"
-                >（手动推进，避免“自动下一步”误解）</span
-              >
+              <span class="stepper-hint">（手动推进，避免“自动下一步”误解）</span>
             </div>
             <div class="stepper-actions">
               <button
                 class="step-btn"
-                @click="prevStep"
                 :disabled="flowStep <= 1"
+                @click="prevStep"
               >
                 上一步
               </button>
               <button
                 class="step-btn primary"
-                @click="nextStep"
                 :disabled="flowStep >= maxStep"
+                @click="nextStep"
               >
                 下一步
               </button>
-              <button class="step-btn" @click="resetDemo">重置</button>
+              <button
+                class="step-btn"
+                @click="resetDemo"
+              >
+                重置
+              </button>
             </div>
           </div>
         </div>
 
         <!-- 实时数据流 -->
         <div class="data-flow">
-          <div class="flow-title">📊 数据流可视化</div>
+          <div class="flow-title">
+            📊 数据流可视化
+          </div>
 
           <!-- 请求阶段 -->
-          <div class="flow-stage request-stage" v-if="currentStage >= 1">
+          <div
+            v-if="currentStage >= 1"
+            class="flow-stage request-stage"
+          >
             <div class="stage-header">
               <span class="stage-badge">{{
                 currentStage === 1 ? '📤' : '✅'
               }}</span>
               <span class="stage-name">1. 客户端发送登录请求</span>
             </div>
-            <div class="request-content" v-if="currentStage >= 1">
+            <div
+              v-if="currentStage >= 1"
+              class="request-content"
+            >
               <div class="request-line">
                 <span class="method">POST</span>
                 <span class="path">/api/login</span>
               </div>
               <div class="request-body">
-                <div class="body-title">Body:</div>
+                <div class="body-title">
+                  Body:
+                </div>
                 <pre>
 {
   "username": "{{ username }}",
   "password": "******"
-}</pre
-                >
+}</pre>
               </div>
             </div>
           </div>
 
-          <div class="flow-arrow" v-if="currentStage >= 1">⬇️</div>
+          <div
+            v-if="currentStage >= 1"
+            class="flow-arrow"
+          >
+            ⬇️
+          </div>
 
           <!-- 服务器验证阶段 -->
-          <div class="flow-stage server-stage" v-if="currentStage >= 2">
+          <div
+            v-if="currentStage >= 2"
+            class="flow-stage server-stage"
+          >
             <div class="stage-header">
               <span class="stage-badge">{{
                 currentStage === 2 ? '⚙️' : '✅'
               }}</span>
               <span class="stage-name">2. 服务器验证身份</span>
             </div>
-            <div class="server-content" v-if="currentStage >= 2">
+            <div
+              v-if="currentStage >= 2"
+              class="server-content"
+            >
               <div class="verification-steps">
                 <div
                   class="verify-step"
@@ -172,30 +208,43 @@
                   <span class="step-icon">{{
                     verificationStep >= 3 ? '✅' : '⏳'
                   }}</span>
-                  <span class="step-text"
-                    >生成{{
-                      mode === 'session' ? 'Session' : 'JWT Token'
-                    }}</span
-                  >
+                  <span class="step-text">生成{{
+                    mode === 'session' ? 'Session' : 'JWT Token'
+                  }}</span>
                 </div>
               </div>
             </div>
           </div>
 
-          <div class="flow-arrow" v-if="currentStage >= 2">⬇️</div>
+          <div
+            v-if="currentStage >= 2"
+            class="flow-arrow"
+          >
+            ⬇️
+          </div>
 
           <!-- 响应阶段 -->
-          <div class="flow-stage response-stage" v-if="currentStage >= 3">
+          <div
+            v-if="currentStage >= 3"
+            class="flow-stage response-stage"
+          >
             <div class="stage-header">
               <span class="stage-badge">{{
                 currentStage === 3 ? '📥' : '✅'
               }}</span>
               <span class="stage-name">3. 服务器返回认证结果</span>
             </div>
-            <div class="response-content" v-if="authResult">
-              <div class="response-status success">✅ 登录成功</div>
+            <div
+              v-if="authResult"
+              class="response-content"
+            >
+              <div class="response-status success">
+                ✅ 登录成功
+              </div>
               <div class="response-body">
-                <div class="body-title">Response:</div>
+                <div class="body-title">
+                  Response:
+                </div>
                 <pre v-if="mode === 'session'">
 {
   "status": "success",
@@ -203,8 +252,7 @@
     "id": 123,
     "username": "{{ username }}"
   }
-}</pre
-                >
+}</pre>
                 <pre v-else>
 {
   "status": "success",
@@ -213,26 +261,24 @@
     "id": 123,
     "username": "{{ username }}"
   }
-}</pre
-                >
+}</pre>
               </div>
-              <div class="auth-mechanism" v-if="currentStage >= 4">
+              <div
+                v-if="currentStage >= 4"
+                class="auth-mechanism"
+              >
                 <div class="mechanism-title">
                   {{ mode === 'session' ? '🍪 Cookie 设置' : '🎫 Token 存储' }}
                 </div>
                 <div class="mechanism-content">
                   <div v-if="mode === 'session'">
-                    <code
-                      >Set-Cookie: session_id={{ authResult?.sessionId }};
-                      HttpOnly; Secure</code
-                    >
+                    <code>Set-Cookie: session_id={{ authResult?.sessionId }};
+                      HttpOnly; Secure</code>
                   </div>
                   <div v-else>
-                    <code
-                      >localStorage.setItem("token", "{{
-                        authResult?.token
-                      }}")</code
-                    >
+                    <code>localStorage.setItem("token", "{{
+                      authResult?.token
+                    }}")</code>
                   </div>
                 </div>
               </div>
@@ -240,7 +286,10 @@
           </div>
 
           <!-- 后续请求 -->
-          <div class="flow-stage request-stage" v-if="currentStage >= 5">
+          <div
+            v-if="currentStage >= 5"
+            class="flow-stage request-stage"
+          >
             <div class="stage-header">
               <span class="stage-badge">🔄</span>
               <span class="stage-name">4. 后续请求自动携带认证信息</span>
@@ -251,7 +300,9 @@
                 <span class="path">/api/user/profile</span>
               </div>
               <div class="auth-header">
-                <div class="header-title">Header:</div>
+                <div class="header-title">
+                  Header:
+                </div>
                 <div v-if="mode === 'session'">
                   <code>Cookie: session_id={{ authResult?.sessionId }}</code>
                 </div>
@@ -266,7 +317,10 @@
     </div>
 
     <!-- 状态说明 -->
-    <div class="state-description" v-if="currentStage >= 4">
+    <div
+      v-if="currentStage >= 4"
+      class="state-description"
+    >
       <div class="description-title">
         📖 {{ mode === 'session' ? 'Session' : 'JWT' }} 工作原理
       </div>
@@ -287,8 +341,16 @@
     </div>
 
     <!-- 重置按钮 -->
-    <div class="reset-section" v-if="currentStage >= 5">
-      <button class="reset-btn" @click="resetDemo">🔄 重新演示</button>
+    <div
+      v-if="currentStage >= 5"
+      class="reset-section"
+    >
+      <button
+        class="reset-btn"
+        @click="resetDemo"
+      >
+        🔄 重新演示
+      </button>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue
index df1c000..5fa2860 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/AuthNvsAuthZDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="authn-authz-demo">
     <div class="header">
-      <div class="title">🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？</div>
+      <div class="title">
+        🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？
+      </div>
       <div class="subtitle">
         选择“谁在请求”与“要做什么”，看看认证/授权分别在哪一步起作用。
       </div>
@@ -13,7 +15,9 @@
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">选择请求</div>
+        <div class="card-title">
+          选择请求
+        </div>
 
         <label class="label">身份（AuthN：你是谁）</label>
         <div class="row">
@@ -48,18 +52,26 @@
       </div>
 
       <div class="card">
-        <div class="card-title">模拟结果</div>
+        <div class="card-title">
+          模拟结果
+        </div>
 
         <div class="result">
           <div class="line">
             <span class="k">AuthN（认证）</span>
-            <span class="v" :class="authn.ok ? 'ok' : 'bad'">
+            <span
+              class="v"
+              :class="authn.ok ? 'ok' : 'bad'"
+            >
               {{ authn.ok ? '通过' : '失败' }}
             </span>
           </div>
           <div class="line">
             <span class="k">AuthZ（授权）</span>
-            <span class="v" :class="authz.ok ? 'ok' : 'bad'">
+            <span
+              class="v"
+              :class="authz.ok ? 'ok' : 'bad'"
+            >
               {{ authz.ok ? '允许' : '拒绝' }}
             </span>
           </div>
@@ -74,7 +86,9 @@
     </div>
 
     <div class="card">
-      <div class="card-title">关键点</div>
+      <div class="card-title">
+        关键点
+      </div>
       <ul class="list">
         <li><strong>认证失败：</strong>你是谁都不确定 → 通常返回 401。</li>
         <li>
@@ -82,8 +96,7 @@
           403。
         </li>
         <li>
-          <strong>授权规则要在服务端：</strong
-          >别相信前端的“是否显示按钮”，那只是 UX。
+          <strong>授权规则要在服务端：</strong>别相信前端的“是否显示按钮”，那只是 UX。
         </li>
       </ul>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue
index dcd1559..fc82672 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/CSRFDefenseDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="csrf-demo">
     <div class="header">
-      <div class="title">🛡️ CSRF：为什么“自动带 Cookie”会出事？</div>
+      <div class="title">
+        🛡️ CSRF：为什么“自动带 Cookie”会出事？
+      </div>
       <div class="subtitle">
         手动推进一个最小攻击链，再看 3 个最常用防护手段（SameSite / CSRF Token /
         双重提交）。
@@ -13,51 +15,78 @@
     </div>
 
     <div class="controls">
-      <button class="btn primary" @click="start" :disabled="step !== 0">
-        开始
-      </button>
-      <button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
       <button
         class="btn primary"
-        @click="next"
+        :disabled="step !== 0"
+        @click="start"
+      >
+        开始
+      </button>
+      <button
+        class="btn"
+        :disabled="step <= 1"
+        @click="prev"
+      >
+        上一步
+      </button>
+      <button
+        class="btn primary"
         :disabled="step === 0 || step >= maxStep"
+        @click="next"
       >
         下一步
       </button>
-      <button class="btn" @click="reset">重置</button>
+      <button
+        class="btn"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
-    <div v-if="step > 0" class="progress">
+    <div
+      v-if="step > 0"
+      class="progress"
+    >
       Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">场景</div>
+        <div class="card-title">
+          场景
+        </div>
         <div class="desc">
           假设你登录了 <strong>bank.com</strong>（Cookie
           已存在）。你又打开了一个恶意网站
           <strong>evil.com</strong>，它偷偷发起转账请求。
         </div>
         <div class="box">
-          <div class="box-title">你的 Cookie（浏览器会自动带）</div>
+          <div class="box-title">
+            你的 Cookie（浏览器会自动带）
+          </div>
           <code class="mono">Cookie: session_id=abc123</code>
         </div>
       </div>
 
       <div class="card">
-        <div class="card-title">本步请求</div>
+        <div class="card-title">
+          本步请求
+        </div>
         <pre class="code"><code>{{ requestText }}</code></pre>
-        <div class="desc">{{ steps[step - 1]?.desc }}</div>
+        <div class="desc">
+          {{ steps[step - 1]?.desc }}
+        </div>
       </div>
     </div>
 
     <div class="card">
-      <div class="card-title">防护怎么选？（优先顺序）</div>
+      <div class="card-title">
+        防护怎么选？（优先顺序）
+      </div>
       <ol class="list">
         <li>
-          <strong>SameSite Cookie：</strong
-          >对大多数“跨站表单/图片”请求非常有效（Lax/Strict）。
+          <strong>SameSite Cookie：</strong>对大多数“跨站表单/图片”请求非常有效（Lax/Strict）。
         </li>
         <li>
           <strong>CSRF Token：</strong>在表单/请求头里带
@@ -69,7 +98,9 @@
         </li>
       </ol>
       <div class="warn">
-        <div class="warn-title">注意</div>
+        <div class="warn-title">
+          注意
+        </div>
         <div class="warn-text">
           CSRF 主要针对“Cookie 自动携带”的场景。若你用 Authorization:
           Bearer（不自动发送），CSRF 风险会显著降低，但仍要考虑 XSS/Token
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue
index a540122..4287dca 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/JWTWorkflowDemo.vue
@@ -5,34 +5,56 @@
 <template>
   <div class="jwt-workflow-demo">
     <div class="header">
-      <div class="title">🎫 JWT：生成 → 发送 → 验证 → 解析</div>
+      <div class="title">
+        🎫 JWT：生成 → 发送 → 验证 → 解析
+      </div>
       <div class="subtitle">
         默认“手动推进”，不自动下一步；避免把演示误当成真实系统的安全边界。
       </div>
     </div>
 
     <div class="controls">
-      <button class="btn primary" @click="start" :disabled="step !== 0">
-        开始
-      </button>
-      <button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
       <button
         class="btn primary"
-        @click="next"
+        :disabled="step !== 0"
+        @click="start"
+      >
+        开始
+      </button>
+      <button
+        class="btn"
+        :disabled="step <= 1"
+        @click="prev"
+      >
+        上一步
+      </button>
+      <button
+        class="btn primary"
         :disabled="step === 0 || step >= maxStep"
+        @click="next"
       >
         下一步
       </button>
-      <button class="btn" @click="reset">重置</button>
+      <button
+        class="btn"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
-    <div v-if="step > 0" class="progress">
+    <div
+      v-if="step > 0"
+      class="progress"
+    >
       Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">用户声明（Payload 示例）</div>
+        <div class="card-title">
+          用户声明（Payload 示例）
+        </div>
         <pre class="code"><code>{{ payloadJson }}</code></pre>
         <div class="hint">
           注意：JWT 的 payload 只是 Base64Url
@@ -41,45 +63,90 @@
       </div>
 
       <div class="card">
-        <div class="card-title">JWT Token（示意）</div>
+        <div class="card-title">
+          JWT Token（示意）
+        </div>
         <div class="token">
-          <div class="part" :class="{ active: step >= 1 }">
-            <div class="part-label">Header</div>
+          <div
+            class="part"
+            :class="{ active: step >= 1 }"
+          >
+            <div class="part-label">
+              Header
+            </div>
             <code class="mono">{{ step >= 1 ? headerB64 : '...' }}</code>
           </div>
-          <div class="dot">.</div>
-          <div class="part" :class="{ active: step >= 2 }">
-            <div class="part-label">Payload</div>
+          <div class="dot">
+            .
+          </div>
+          <div
+            class="part"
+            :class="{ active: step >= 2 }"
+          >
+            <div class="part-label">
+              Payload
+            </div>
             <code class="mono">{{ step >= 2 ? payloadB64 : '...' }}</code>
           </div>
-          <div class="dot">.</div>
-          <div class="part" :class="{ active: step >= 3 }">
-            <div class="part-label">Signature</div>
+          <div class="dot">
+            .
+          </div>
+          <div
+            class="part"
+            :class="{ active: step >= 3 }"
+          >
+            <div class="part-label">
+              Signature
+            </div>
             <code class="mono">{{ step >= 3 ? signatureB64 : '...' }}</code>
           </div>
         </div>
 
-        <div class="mono-box" v-if="step >= 4">
-          <div class="mono-label">完整 Token</div>
+        <div
+          v-if="step >= 4"
+          class="mono-box"
+        >
+          <div class="mono-label">
+            完整 Token
+          </div>
           <code class="mono">{{ token }}</code>
-          <button class="copy" @click="copy(token)">
+          <button
+            class="copy"
+            @click="copy(token)"
+          >
             {{ copied ? '已复制' : '复制 Token' }}
           </button>
         </div>
 
-        <div class="mono-box" v-if="step >= 5">
-          <div class="mono-label">请求头示例</div>
+        <div
+          v-if="step >= 5"
+          class="mono-box"
+        >
+          <div class="mono-label">
+            请求头示例
+          </div>
           <code class="mono">Authorization: Bearer {{ token }}</code>
         </div>
       </div>
     </div>
 
     <div class="card">
-      <div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
-      <div class="desc">{{ steps[step - 1]?.desc }}</div>
-      <div v-if="steps[step - 1]?.warn" class="warn">
-        <div class="warn-title">注意</div>
-        <div class="warn-text">{{ steps[step - 1]?.warn }}</div>
+      <div class="card-title">
+        {{ steps[step - 1]?.title || '流程说明' }}
+      </div>
+      <div class="desc">
+        {{ steps[step - 1]?.desc }}
+      </div>
+      <div
+        v-if="steps[step - 1]?.warn"
+        class="warn"
+      >
+        <div class="warn-title">
+          注意
+        </div>
+        <div class="warn-text">
+          {{ steps[step - 1]?.warn }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue
index 16e1ed3..55ba921 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/OAuth2FlowDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="oauth2-demo">
     <div class="header">
-      <div class="title">🔑 OAuth2：第三方登录（授权码流程）</div>
+      <div class="title">
+        🔑 OAuth2：第三方登录（授权码流程）
+      </div>
       <div class="subtitle">
         用最常见的 Authorization Code Flow（建议配合
         PKCE）。默认手动推进，不自动下一步。
@@ -13,34 +15,64 @@
     </div>
 
     <div class="controls">
-      <button class="btn primary" @click="start" :disabled="step !== 0">
-        开始
-      </button>
-      <button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
       <button
         class="btn primary"
-        @click="next"
+        :disabled="step !== 0"
+        @click="start"
+      >
+        开始
+      </button>
+      <button
+        class="btn"
+        :disabled="step <= 1"
+        @click="prev"
+      >
+        上一步
+      </button>
+      <button
+        class="btn primary"
         :disabled="step === 0 || step >= maxStep"
+        @click="next"
       >
         下一步
       </button>
-      <button class="btn" @click="reset">重置</button>
-      <button class="btn" @click="copy(currentCmd)" :disabled="!currentCmd">
+      <button
+        class="btn"
+        @click="reset"
+      >
+        重置
+      </button>
+      <button
+        class="btn"
+        :disabled="!currentCmd"
+        @click="copy(currentCmd)"
+      >
         {{ copied ? '已复制' : '复制命令' }}
       </button>
     </div>
 
-    <div v-if="step > 0" class="progress">
+    <div
+      v-if="step > 0"
+      class="progress"
+    >
       Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">角色</div>
+        <div class="card-title">
+          角色
+        </div>
         <div class="role">
-          <div class="pill">Client（你的应用）</div>
-          <div class="pill">Authorization Server（微信/Google 等）</div>
-          <div class="pill">Resource Server（你的 API）</div>
+          <div class="pill">
+            Client（你的应用）
+          </div>
+          <div class="pill">
+            Authorization Server（微信/Google 等）
+          </div>
+          <div class="pill">
+            Resource Server（你的 API）
+          </div>
         </div>
         <div class="desc">
           OAuth2
@@ -49,17 +81,30 @@
       </div>
 
       <div class="card">
-        <div class="card-title">本步要做什么</div>
-        <div class="desc">{{ steps[step - 1]?.desc || '点击开始' }}</div>
-        <div v-if="steps[step - 1]?.warn" class="warn">
-          <div class="warn-title">注意</div>
-          <div class="warn-text">{{ steps[step - 1]?.warn }}</div>
+        <div class="card-title">
+          本步要做什么
+        </div>
+        <div class="desc">
+          {{ steps[step - 1]?.desc || '点击开始' }}
+        </div>
+        <div
+          v-if="steps[step - 1]?.warn"
+          class="warn"
+        >
+          <div class="warn-title">
+            注意
+          </div>
+          <div class="warn-text">
+            {{ steps[step - 1]?.warn }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="card">
-      <div class="card-title">请求/命令示例（可照抄）</div>
+      <div class="card-title">
+        请求/命令示例（可照抄）
+      </div>
       <pre
         class="code"
       ><code>{{ currentCmd || '（点击开始后显示）' }}</code></pre>
@@ -70,7 +115,9 @@
     </div>
 
     <div class="card">
-      <div class="card-title">你真正需要记住的 4 件事</div>
+      <div class="card-title">
+        你真正需要记住的 4 件事
+      </div>
       <ul class="list">
         <li>
           <strong>redirect_uri 必须白名单：</strong>避免被人把 code
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue
index 0df0890..aaca36a 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/PasswordHashingDemo.vue
@@ -9,7 +9,9 @@
 <template>
   <div class="password-hashing-demo">
     <div class="header">
-      <div class="title">🔐 密码存储：哈希 + 盐 + 慢</div>
+      <div class="title">
+        🔐 密码存储：哈希 + 盐 + 慢
+      </div>
       <div class="subtitle">
         演示 PBKDF2（模拟慢哈希）如何抵抗彩虹表/暴力破解；真实项目通常选
         bcrypt/Argon2。
@@ -18,7 +20,9 @@
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">输入</div>
+        <div class="card-title">
+          输入
+        </div>
 
         <label class="label">密码</label>
         <input
@@ -27,7 +31,7 @@
           class="input"
           placeholder="例如：123456"
           @input="debouncedRecompute"
-        />
+        >
 
         <div class="row">
           <div class="col">
@@ -42,29 +46,43 @@
               max="200000"
               step="1000"
               @input="debouncedRecompute"
-            />
-            <div class="hint">越大越慢，暴力破解成本越高（但登录也更慢）。</div>
+            >
+            <div class="hint">
+              越大越慢，暴力破解成本越高（但登录也更慢）。
+            </div>
           </div>
         </div>
 
         <div class="row">
           <label class="toggle">
-            <input v-model="saltEnabled" type="checkbox" @change="recompute" />
+            <input
+              v-model="saltEnabled"
+              type="checkbox"
+              @change="recompute"
+            >
             <span>启用盐（salt）</span>
           </label>
-          <button class="btn" @click="regenSalt" :disabled="!saltEnabled">
+          <button
+            class="btn"
+            :disabled="!saltEnabled"
+            @click="regenSalt"
+          >
             生成新盐
           </button>
         </div>
 
         <div class="mono-box">
-          <div class="mono-label">salt</div>
+          <div class="mono-label">
+            salt
+          </div>
           <code class="mono">{{ saltEnabled ? saltHex : '(disabled)' }}</code>
         </div>
       </div>
 
       <div class="card">
-        <div class="card-title">输出（模拟）</div>
+        <div class="card-title">
+          输出（模拟）
+        </div>
 
         <div class="status">
           <span class="badge">Algorithm: PBKDF2-SHA256</span>
@@ -72,12 +90,16 @@
         </div>
 
         <div class="mono-box">
-          <div class="mono-label">derived key (hex)</div>
+          <div class="mono-label">
+            derived key (hex)
+          </div>
           <code class="mono">{{ hashHex || '（请输入密码）' }}</code>
         </div>
 
         <div class="alert">
-          <div class="alert-title">结论</div>
+          <div class="alert-title">
+            结论
+          </div>
           <div class="alert-text">
             不要存明文；不要用无盐的快速哈希（MD5/SHA1/SHA256 直接 hash 密码）。
             应使用“专门的密码哈希/KDF（慢 + 盐）”，并设置合理成本。
@@ -92,15 +114,23 @@
       </div>
       <div class="two">
         <div class="mono-box">
-          <div class="mono-label">salt A</div>
+          <div class="mono-label">
+            salt A
+          </div>
           <code class="mono">{{ saltA }}</code>
-          <div class="mono-label">hash A</div>
+          <div class="mono-label">
+            hash A
+          </div>
           <code class="mono">{{ hashA || '-' }}</code>
         </div>
         <div class="mono-box">
-          <div class="mono-label">salt B</div>
+          <div class="mono-label">
+            salt B
+          </div>
           <code class="mono">{{ saltB }}</code>
-          <div class="mono-label">hash B</div>
+          <div class="mono-label">
+            hash B
+          </div>
           <code class="mono">{{ hashB || '-' }}</code>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue
index 7fb4644..7fc2a05 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/SessionCookieDemo.vue
@@ -5,77 +5,148 @@
 <template>
   <div class="session-demo">
     <div class="header">
-      <div class="title">🍪 Session + Cookie：有状态登录</div>
+      <div class="title">
+        🍪 Session + Cookie：有状态登录
+      </div>
       <div class="subtitle">
         默认手动推进：先看清楚状态再进入下一步（避免“自动下一步”误解）。
       </div>
     </div>
 
     <div class="controls">
-      <button class="btn primary" @click="start" :disabled="step !== 0">
-        开始
-      </button>
-      <button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
       <button
         class="btn primary"
-        @click="next"
+        :disabled="step !== 0"
+        @click="start"
+      >
+        开始
+      </button>
+      <button
+        class="btn"
+        :disabled="step <= 1"
+        @click="prev"
+      >
+        上一步
+      </button>
+      <button
+        class="btn primary"
         :disabled="step === 0 || step >= maxStep"
+        @click="next"
       >
         下一步
       </button>
-      <button class="btn" @click="reset">重置</button>
+      <button
+        class="btn"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
-    <div v-if="step > 0" class="progress">
+    <div
+      v-if="step > 0"
+      class="progress"
+    >
       Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
     </div>
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">浏览器（客户端）</div>
+        <div class="card-title">
+          浏览器（客户端）
+        </div>
         <div class="box">
-          <div class="box-title">Cookie Jar</div>
-          <div v-if="cookie" class="kv">
-            <div class="k">session_id</div>
-            <div class="v mono">{{ cookie }}</div>
+          <div class="box-title">
+            Cookie Jar
+          </div>
+          <div
+            v-if="cookie"
+            class="kv"
+          >
+            <div class="k">
+              session_id
+            </div>
+            <div class="v mono">
+              {{ cookie }}
+            </div>
+          </div>
+          <div
+            v-else
+            class="empty"
+          >
+            暂无 Cookie
           </div>
-          <div v-else class="empty">暂无 Cookie</div>
         </div>
 
         <div class="box">
-          <div class="box-title">本步请求</div>
+          <div class="box-title">
+            本步请求
+          </div>
           <pre class="code"><code>{{ clientRequest }}</code></pre>
         </div>
       </div>
 
       <div class="card">
-        <div class="card-title">服务器</div>
+        <div class="card-title">
+          服务器
+        </div>
         <div class="box">
-          <div class="box-title">Session Store（Redis/Memory）</div>
-          <div v-if="session" class="kv">
-            <div class="k mono">{{ cookie }}</div>
+          <div class="box-title">
+            Session Store（Redis/Memory）
+          </div>
+          <div
+            v-if="session"
+            class="kv"
+          >
+            <div class="k mono">
+              {{ cookie }}
+            </div>
             <div class="v">
-              <div class="row"><span class="muted">user_id</span> 123</div>
-              <div class="row"><span class="muted">username</span> alice</div>
-              <div class="row"><span class="muted">role</span> admin</div>
+              <div class="row">
+                <span class="muted">user_id</span> 123
+              </div>
+              <div class="row">
+                <span class="muted">username</span> alice
+              </div>
+              <div class="row">
+                <span class="muted">role</span> admin
+              </div>
             </div>
           </div>
-          <div v-else class="empty">暂无 Session</div>
+          <div
+            v-else
+            class="empty"
+          >
+            暂无 Session
+          </div>
         </div>
 
         <div class="box">
-          <div class="box-title">本步响应</div>
+          <div class="box-title">
+            本步响应
+          </div>
           <pre class="code"><code>{{ serverResponse }}</code></pre>
         </div>
       </div>
     </div>
 
     <div class="card">
-      <div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
-      <div class="desc">{{ steps[step - 1]?.desc }}</div>
-      <div v-if="steps[step - 1]?.warn" class="warn">
-        <div class="warn-title">注意</div>
-        <div class="warn-text">{{ steps[step - 1]?.warn }}</div>
+      <div class="card-title">
+        {{ steps[step - 1]?.title || '流程说明' }}
+      </div>
+      <div class="desc">
+        {{ steps[step - 1]?.desc }}
+      </div>
+      <div
+        v-if="steps[step - 1]?.warn"
+        class="warn"
+      >
+        <div class="warn-title">
+          注意
+        </div>
+        <div class="warn-text">
+          {{ steps[step - 1]?.warn }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue b/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue
index 7223edb..0fd568a 100644
--- a/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/auth-design/SessionVsJWTDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="session-vs-jwt-demo">
     <div class="header">
-      <div class="title">🧩 Session vs JWT：怎么选？</div>
+      <div class="title">
+        🧩 Session vs JWT：怎么选？
+      </div>
       <div class="subtitle">
         选你的约束条件，得到推荐方案（并解释原因）。这比“背结论”更好用。
       </div>
@@ -13,7 +15,9 @@
 
     <div class="grid">
       <div class="card">
-        <div class="card-title">你的场景</div>
+        <div class="card-title">
+          你的场景
+        </div>
 
         <label class="label">主要客户端</label>
         <div class="row">
@@ -96,30 +100,52 @@
       </div>
 
       <div class="card">
-        <div class="card-title">推荐</div>
+        <div class="card-title">
+          推荐
+        </div>
         <div class="recommend">
-          <div class="pill primary">{{ recommendation.title }}</div>
-          <div class="desc">{{ recommendation.desc }}</div>
+          <div class="pill primary">
+            {{ recommendation.title }}
+          </div>
+          <div class="desc">
+            {{ recommendation.desc }}
+          </div>
         </div>
 
         <div class="box">
-          <div class="box-title">为什么</div>
+          <div class="box-title">
+            为什么
+          </div>
           <ul class="list">
-            <li v-for="(x, i) in recommendation.reasons" :key="i">{{ x }}</li>
+            <li
+              v-for="(x, i) in recommendation.reasons"
+              :key="i"
+            >
+              {{ x }}
+            </li>
           </ul>
         </div>
 
         <div class="box">
-          <div class="box-title">落地建议</div>
+          <div class="box-title">
+            落地建议
+          </div>
           <ul class="list">
-            <li v-for="(x, i) in recommendation.tips" :key="i">{{ x }}</li>
+            <li
+              v-for="(x, i) in recommendation.tips"
+              :key="i"
+            >
+              {{ x }}
+            </li>
           </ul>
         </div>
       </div>
     </div>
 
     <div class="card">
-      <div class="card-title">常见误区</div>
+      <div class="card-title">
+        常见误区
+      </div>
       <ul class="list">
         <li>
           <strong>JWT ≠ 更安全：</strong>JWT
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
index 3d1b2e0..5797ece 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
@@ -7,15 +7,32 @@
     </div>
 
     <div class="comparison-grid">
-      <div class="era-card" v-for="era in eras" :key="era.name" :class="{ active: selectedEra === era.name }" @click="selectedEra = era.name">
-        <div class="era-icon">{{ era.icon }}</div>
-        <div class="era-name">{{ era.name }}</div>
-        <div class="era-year">{{ era.year }}</div>
-        <div class="era-tag">{{ era.tag }}</div>
+      <div
+        v-for="era in eras"
+        :key="era.name"
+        class="era-card"
+        :class="{ active: selectedEra === era.name }"
+        @click="selectedEra = era.name"
+      >
+        <div class="era-icon">
+          {{ era.icon }}
+        </div>
+        <div class="era-name">
+          {{ era.name }}
+        </div>
+        <div class="era-year">
+          {{ era.year }}
+        </div>
+        <div class="era-tag">
+          {{ era.tag }}
+        </div>
       </div>
     </div>
 
-    <div class="detail-panel" v-if="selectedEra">
+    <div
+      v-if="selectedEra"
+      class="detail-panel"
+    >
       <div class="detail-header">
         <span class="detail-icon">{{ currentEra.icon }}</span>
         <h5>{{ currentEra.name }} ({{ currentEra.year }})</h5>
@@ -25,28 +42,47 @@
         <div class="feature-section">
           <h6>🏗️ 架构特征</h6>
           <ul>
-            <li v-for="(feat, i) in currentEra.features" :key="i">{{ feat }}</li>
+            <li
+              v-for="(feat, i) in currentEra.features"
+              :key="i"
+            >
+              {{ feat }}
+            </li>
           </ul>
         </div>
 
         <div class="feature-section">
           <h6>✅ 优点</h6>
           <ul>
-            <li v-for="(pro, i) in currentEra.pros" :key="i">{{ pro }}</li>
+            <li
+              v-for="(pro, i) in currentEra.pros"
+              :key="i"
+            >
+              {{ pro }}
+            </li>
           </ul>
         </div>
 
         <div class="feature-section">
           <h6>❌ 痛点</h6>
           <ul>
-            <li v-for="(con, i) in currentEra.cons" :key="i">{{ con }}</li>
+            <li
+              v-for="(con, i) in currentEra.cons"
+              :key="i"
+            >
+              {{ con }}
+            </li>
           </ul>
         </div>
 
         <div class="tech-stack">
           <h6>🔧 典型技术</h6>
           <div class="tech-tags">
-            <span v-for="(tech, i) in currentEra.techs" :key="i" class="tech-tag">{{ tech }}</span>
+            <span
+              v-for="(tech, i) in currentEra.techs"
+              :key="i"
+              class="tech-tag"
+            >{{ tech }}</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue
index 016be34..c3f5a7b 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendEvolutionDemo.vue
@@ -2,7 +2,7 @@
   <div class="backend-evolution-demo">
     <!-- Timeline -->
     <div class="timeline-container">
-      <div class="timeline-track"></div>
+      <div class="timeline-track" />
       <button
         v-for="(stage, index) in stages"
         :key="index"
@@ -14,7 +14,7 @@
         @click="currentStage = index"
       >
         <div class="node-dot">
-          <div class="inner-dot"></div>
+          <div class="inner-dot" />
         </div>
         <div class="node-content">
           <span class="year-badge">{{ stage.year }}</span>
@@ -25,13 +25,17 @@
 
     <!-- Content -->
     <div class="content-wrapper">
-      <transition name="fade-slide" mode="out-in">
-        <div :key="currentStage" class="stage-content">
+      <transition
+        name="fade-slide"
+        mode="out-in"
+      >
+        <div
+          :key="currentStage"
+          class="stage-content"
+        >
           <div class="header-section">
             <h3>
-              <span class="stage-index"
-                >{{ indexToRoman(currentStage + 1) }}.</span
-              >
+              <span class="stage-index">{{ indexToRoman(currentStage + 1) }}.</span>
               {{ stages[currentStage].title }}
             </h3>
             <p>{{ stages[currentStage].desc }}</p>
@@ -42,21 +46,34 @@
             <div class="mac-window arch-window">
               <div class="window-bar">
                 <div class="traffic-lights">
-                  <span class="light red"></span>
-                  <span class="light yellow"></span>
-                  <span class="light green"></span>
+                  <span class="light red" />
+                  <span class="light yellow" />
+                  <span class="light green" />
+                </div>
+                <div class="window-title">
+                  Server Architecture
                 </div>
-                <div class="window-title">Server Architecture</div>
               </div>
               <div class="arch-canvas">
                 <!-- Stage 0: CGI/Static -->
-                <div v-if="currentStage === 0" class="arch-static">
+                <div
+                  v-if="currentStage === 0"
+                  class="arch-static"
+                >
                   <div class="server-box">
-                    <div class="server-icon">🖥️ Physical Server</div>
+                    <div class="server-icon">
+                      🖥️ Physical Server
+                    </div>
                     <div class="file-system">
-                      <div class="file">index.html</div>
-                      <div class="file">script.pl</div>
-                      <div class="file">image.jpg</div>
+                      <div class="file">
+                        index.html
+                      </div>
+                      <div class="file">
+                        script.pl
+                      </div>
+                      <div class="file">
+                        image.jpg
+                      </div>
                     </div>
                   </div>
                   <div class="request-arrow">
@@ -66,26 +83,42 @@
                 </div>
 
                 <!-- Stage 1: Monolith -->
-                <div v-if="currentStage === 1" class="arch-monolith">
+                <div
+                  v-if="currentStage === 1"
+                  class="arch-monolith"
+                >
                   <div class="server-box big">
                     <div class="server-icon">
                       🦍 Monolithic App (Tomcat/Django)
                     </div>
                     <div class="modules-grid">
-                      <div class="module">User</div>
-                      <div class="module">Order</div>
-                      <div class="module">Payment</div>
-                      <div class="module">Product</div>
+                      <div class="module">
+                        User
+                      </div>
+                      <div class="module">
+                        Order
+                      </div>
+                      <div class="module">
+                        Payment
+                      </div>
+                      <div class="module">
+                        Product
+                      </div>
                     </div>
                     <div class="db-connection">
                       <span>⬇ SQL</span>
-                      <div class="db-icon">🗄️ Single DB</div>
+                      <div class="db-icon">
+                        🗄️ Single DB
+                      </div>
                     </div>
                   </div>
                 </div>
 
                 <!-- Stage 2: Microservices -->
-                <div v-if="currentStage === 2" class="arch-micro">
+                <div
+                  v-if="currentStage === 2"
+                  class="arch-micro"
+                >
                   <div class="cloud-bg">
                     <div class="service-mesh">
                       <div class="service user">
@@ -102,15 +135,26 @@
                       </div>
                     </div>
                   </div>
-                  <div class="comm-lines">HTTP/gRPC</div>
+                  <div class="comm-lines">
+                    HTTP/gRPC
+                  </div>
                 </div>
 
                 <!-- Stage 3: Serverless -->
-                <div v-if="currentStage === 3" class="arch-serverless">
+                <div
+                  v-if="currentStage === 3"
+                  class="arch-serverless"
+                >
                   <div class="function-cloud">
-                    <div class="func-node">λ Login</div>
-                    <div class="func-node">λ Checkout</div>
-                    <div class="func-node">λ ResizeImg</div>
+                    <div class="func-node">
+                      λ Login
+                    </div>
+                    <div class="func-node">
+                      λ Checkout
+                    </div>
+                    <div class="func-node">
+                      λ ResizeImg
+                    </div>
                   </div>
                   <div class="baas-layer">
                     <span>BaaS (Auth0, Supabase, Stripe)</span>
@@ -122,15 +166,21 @@
             <!-- Deployment/Ops View -->
             <div class="mac-window ops-window">
               <div class="window-bar">
-                <div class="window-title">Deployment & Ops</div>
+                <div class="window-title">
+                  Deployment & Ops
+                </div>
               </div>
               <div class="ops-canvas">
                 <div class="ops-card">
-                  <div class="ops-icon">{{ stages[currentStage].opsIcon }}</div>
+                  <div class="ops-icon">
+                    {{ stages[currentStage].opsIcon }}
+                  </div>
                   <div class="ops-title">
                     {{ stages[currentStage].opsTitle }}
                   </div>
-                  <div class="ops-desc">{{ stages[currentStage].opsDesc }}</div>
+                  <div class="ops-desc">
+                    {{ stages[currentStage].opsDesc }}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendQuickStartDemo.vue
index f8f8868..58479e9 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/BackendQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/BackendQuickStartDemo.vue
@@ -14,8 +14,14 @@
     </div>
 
     <div class="be-stage-content">
-      <Transition name="be-fade" mode="out-in">
-        <div :key="currentStage" class="be-stage-panel">
+      <Transition
+        name="be-fade"
+        mode="out-in"
+      >
+        <div
+          :key="currentStage"
+          class="be-stage-panel"
+        >
           <div class="be-visual-section">
             <div class="be-arch-diagram">
               <div
@@ -24,10 +30,17 @@
                 :class="['be-arch-node', node.type]"
                 :style="node.style"
               >
-                <div class="be-node-icon">{{ node.icon }}</div>
-                <div class="be-node-label">{{ node.label }}</div>
+                <div class="be-node-icon">
+                  {{ node.icon }}
+                </div>
+                <div class="be-node-label">
+                  {{ node.label }}
+                </div>
               </div>
-              <svg class="be-connections" viewBox="0 0 600 300">
+              <svg
+                class="be-connections"
+                viewBox="0 0 600 300"
+              >
                 <path
                   v-for="(conn, idx) in currentStageData.connections"
                   :key="idx"
@@ -39,7 +52,9 @@
           </div>
 
           <div class="be-info-section">
-            <h3 class="be-section-title">💡 核心特点</h3>
+            <h3 class="be-section-title">
+              💡 核心特点
+            </h3>
             <ul class="be-feature-list">
               <li
                 v-for="(feature, idx) in currentStageData.features"
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/CacheHitRatioDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/CacheHitRatioDemo.vue
index bd4cef2..2615a9d 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/CacheHitRatioDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/CacheHitRatioDemo.vue
@@ -5,41 +5,72 @@
 <template>
   <div class="cache-demo">
     <div class="header">
-      <div class="title">缓存命中率：速度与成本的杠杆</div>
-      <div class="subtitle">调整命中率，观察平均延迟与数据库压力</div>
+      <div class="title">
+        缓存命中率：速度与成本的杠杆
+      </div>
+      <div class="subtitle">
+        调整命中率，观察平均延迟与数据库压力
+      </div>
     </div>
 
     <div class="controls">
       <label>
         缓存命中率：<strong>{{ hitRatio }}%</strong>
       </label>
-      <input v-model="hitRatio" type="range" min="0" max="100" step="1" />
+      <input
+        v-model="hitRatio"
+        type="range"
+        min="0"
+        max="100"
+        step="1"
+      >
       <label class="toggle">
-        <input v-model="cacheEnabled" type="checkbox" />
+        <input
+          v-model="cacheEnabled"
+          type="checkbox"
+        >
         启用缓存
       </label>
     </div>
 
     <div class="metrics">
       <div class="metric-card">
-        <div class="label">平均延迟</div>
-        <div class="value">{{ avgLatency }} ms</div>
+        <div class="label">
+          平均延迟
+        </div>
+        <div class="value">
+          {{ avgLatency }} ms
+        </div>
         <div class="meter">
-          <div class="bar" :style="{ width: latencyBar + '%' }"></div>
+          <div
+            class="bar"
+            :style="{ width: latencyBar + '%' }"
+          />
         </div>
       </div>
       <div class="metric-card">
-        <div class="label">数据库请求比例</div>
-        <div class="value">{{ dbRate }}%</div>
+        <div class="label">
+          数据库请求比例
+        </div>
+        <div class="value">
+          {{ dbRate }}%
+        </div>
         <div class="meter">
-          <div class="bar warn" :style="{ width: dbRate + '%' }"></div>
+          <div
+            class="bar warn"
+            :style="{ width: dbRate + '%' }"
+          />
         </div>
       </div>
     </div>
 
     <div class="legend">
-      <div class="item"><span class="dot cache"></span>缓存命中</div>
-      <div class="item"><span class="dot db"></span>数据库读取</div>
+      <div class="item">
+        <span class="dot cache" />缓存命中
+      </div>
+      <div class="item">
+        <span class="dot db" />数据库读取
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/CgiQueueDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/CgiQueueDemo.vue
index ca3db91..7a4ecd5 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/CgiQueueDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/CgiQueueDemo.vue
@@ -6,8 +6,12 @@
   <div class="cgi-demo">
     <div class="panel">
       <div class="panel-header">
-        <div class="title">CGI 串行处理：排队效应</div>
-        <div class="subtitle">请求越多，响应越慢</div>
+        <div class="title">
+          CGI 串行处理：排队效应
+        </div>
+        <div class="subtitle">
+          请求越多，响应越慢
+        </div>
       </div>
 
       <div class="controls">
@@ -20,36 +24,61 @@
           min="1"
           max="200"
           step="1"
-        />
+        >
 
         <div class="toggles">
           <label class="toggle">
-            <input v-model="staticCache" type="checkbox" />
+            <input
+              v-model="staticCache"
+              type="checkbox"
+            >
             启用静态缓存 (减少脚本开销)
           </label>
-          <button class="burst" @click="simulateBurst">模拟秒杀</button>
+          <button
+            class="burst"
+            @click="simulateBurst"
+          >
+            模拟秒杀
+          </button>
         </div>
       </div>
 
       <div class="stats">
         <div class="stat">
-          <div class="label">平均响应时间</div>
-          <div class="value">{{ avgResponse }} ms</div>
+          <div class="label">
+            平均响应时间
+          </div>
+          <div class="value">
+            {{ avgResponse }} ms
+          </div>
           <div class="meter">
-            <div class="bar" :style="{ width: responseBar + '%' }"></div>
+            <div
+              class="bar"
+              :style="{ width: responseBar + '%' }"
+            />
           </div>
         </div>
         <div class="stat">
-          <div class="label">排队请求数</div>
-          <div class="value">{{ queueLength }}</div>
+          <div class="label">
+            排队请求数
+          </div>
+          <div class="value">
+            {{ queueLength }}
+          </div>
           <div class="meter">
-            <div class="bar warn" :style="{ width: queueBar + '%' }"></div>
+            <div
+              class="bar warn"
+              :style="{ width: queueBar + '%' }"
+            />
           </div>
         </div>
       </div>
 
       <div class="note">
-        <span class="dot" :class="statusClass"></span>
+        <span
+          class="dot"
+          :class="statusClass"
+        />
         <span>{{ statusText }}</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
index 85693a7..4c5b82f 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
@@ -7,44 +7,91 @@
     </div>
 
     <div class="docker-visualization">
-      <div class="layer traditional" :class="{ active: showTraditional }" @click="showTraditional = true; showDocker = false">
+      <div
+        class="layer traditional"
+        :class="{ active: showTraditional }"
+        @click="showTraditional = true; showDocker = false"
+      >
         <h5>传统部署</h5>
         <div class="server-stack">
-          <div class="layer-item app">应用 A</div>
-          <div class="layer-item conflict" v-if="showConflict">依赖冲突!</div>
-          <div class="layer-item deps">依赖库 v1.0</div>
-          <div class="layer-item os">操作系统</div>
-          <div class="layer-item hardware">物理服务器</div>
+          <div class="layer-item app">
+            应用 A
+          </div>
+          <div
+            v-if="showConflict"
+            class="layer-item conflict"
+          >
+            依赖冲突!
+          </div>
+          <div class="layer-item deps">
+            依赖库 v1.0
+          </div>
+          <div class="layer-item os">
+            操作系统
+          </div>
+          <div class="layer-item hardware">
+            物理服务器
+          </div>
         </div>
       </div>
 
-      <div class="vs-divider">VS</div>
+      <div class="vs-divider">
+        VS
+      </div>
 
-      <div class="layer docker" :class="{ active: showDocker }" @click="showDocker = true; showTraditional = false">
+      <div
+        class="layer docker"
+        :class="{ active: showDocker }"
+        @click="showDocker = true; showTraditional = false"
+      >
         <h5>Docker 容器</h5>
         <div class="docker-stack">
           <div class="containers">
             <div class="container-box">
-              <div class="container-app">应用 A</div>
-              <div class="container-deps">依赖 v1.0</div>
+              <div class="container-app">
+                应用 A
+              </div>
+              <div class="container-deps">
+                依赖 v1.0
+              </div>
             </div>
             <div class="container-box">
-              <div class="container-app">应用 B</div>
-              <div class="container-deps">依赖 v2.0</div>
+              <div class="container-app">
+                应用 B
+              </div>
+              <div class="container-deps">
+                依赖 v2.0
+              </div>
             </div>
           </div>
-          <div class="docker-engine">Docker Engine</div>
-          <div class="host-os">宿主机操作系统</div>
-          <div class="hardware">物理服务器</div>
+          <div class="docker-engine">
+            Docker Engine
+          </div>
+          <div class="host-os">
+            宿主机操作系统
+          </div>
+          <div class="hardware">
+            物理服务器
+          </div>
         </div>
       </div>
     </div>
 
     <div class="benefits-grid">
-      <div class="benefit-card" v-for="benefit in benefits" :key="benefit.title">
-        <div class="benefit-icon">{{ benefit.icon }}</div>
-        <div class="benefit-title">{{ benefit.title }}</div>
-        <div class="benefit-desc">{{ benefit.desc }}</div>
+      <div
+        v-for="benefit in benefits"
+        :key="benefit.title"
+        class="benefit-card"
+      >
+        <div class="benefit-icon">
+          {{ benefit.icon }}
+        </div>
+        <div class="benefit-title">
+          {{ benefit.title }}
+        </div>
+        <div class="benefit-desc">
+          {{ benefit.desc }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
index 3f1e105..546aaba 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/DeploymentFlowDemo.vue
@@ -13,18 +13,30 @@
         :class="{ active: currentStep === idx }"
         @click="currentStep = idx"
       >
-        <div class="step-connector" v-if="idx > 0">
-          <div class="connector-line"></div>
+        <div
+          v-if="idx > 0"
+          class="step-connector"
+        >
+          <div class="connector-line" />
         </div>
         <div class="step-content">
-          <div class="step-icon">{{ step.icon }}</div>
-          <div class="step-era">{{ step.era }}</div>
-          <div class="step-title">{{ step.title }}</div>
+          <div class="step-icon">
+            {{ step.icon }}
+          </div>
+          <div class="step-era">
+            {{ step.era }}
+          </div>
+          <div class="step-title">
+            {{ step.title }}
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="step-detail" v-if="currentStep !== null">
+    <div
+      v-if="currentStep !== null"
+      class="step-detail"
+    >
       <h5>{{ steps[currentStep].title }}</h5>
       <div class="detail-grid">
         <div class="detail-item">
@@ -42,7 +54,11 @@
       </div>
       <div class="tools-list">
         <span class="tools-label">代表工具:</span>
-        <span v-for="tool in steps[currentStep].tools" :key="tool" class="tool-tag">{{ tool }}</span>
+        <span
+          v-for="tool in steps[currentStep].tools"
+          :key="tool"
+          class="tool-tag"
+        >{{ tool }}</span>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
index 0223cd5..572c43b 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
@@ -14,16 +14,33 @@
         :class="{ active: currentStage === idx }"
         @click="currentStage = idx"
       >
-        <div class="stage-era">{{ stage.era }}</div>
-        <div class="stage-icon">{{ stage.icon }}</div>
-        <div class="stage-name">{{ stage.name }}</div>
-        <div class="stage-arch">{{ stage.arch }}</div>
+        <div class="stage-era">
+          {{ stage.era }}
+        </div>
+        <div class="stage-icon">
+          {{ stage.icon }}
+        </div>
+        <div class="stage-name">
+          {{ stage.name }}
+        </div>
+        <div class="stage-arch">
+          {{ stage.arch }}
+        </div>
       </div>
     </div>
 
-    <div class="stage-detail" v-if="currentStage !== null">
-      <Transition name="fade" mode="out-in">
-        <div :key="currentStage" class="detail-panel">
+    <div
+      v-if="currentStage !== null"
+      class="stage-detail"
+    >
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          :key="currentStage"
+          class="detail-panel"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ stages[currentStage].icon }}</span>
             <h4>{{ stages[currentStage].restaurant }}</h4>
@@ -40,7 +57,12 @@
             <div class="detail-section">
               <h5>⚡ 核心痛点</h5>
               <ul>
-                <li v-for="(pain, i) in stages[currentStage].pains" :key="i">{{ pain }}</li>
+                <li
+                  v-for="(pain, i) in stages[currentStage].pains"
+                  :key="i"
+                >
+                  {{ pain }}
+                </li>
               </ul>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
index b7e6947..e0e6809 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/KubernetesDemo.vue
@@ -7,58 +7,99 @@
 
     <div class="k8s-architecture">
       <div class="control-plane">
-        <div class="plane-title">控制平面 (Control Plane)</div>
+        <div class="plane-title">
+          控制平面 (Control Plane)
+        </div>
         <div class="components">
-          <div class="component" v-for="comp in controlPlane" :key="comp.name"
-               :class="{ active: activeComponent === comp.name }"
-               @click="activeComponent = comp.name">
-            <div class="comp-icon">{{ comp.icon }}</div>
-            <div class="comp-name">{{ comp.name }}</div>
-            <div class="comp-desc">{{ comp.desc }}</div>
+          <div
+            v-for="comp in controlPlane"
+            :key="comp.name"
+            class="component"
+            :class="{ active: activeComponent === comp.name }"
+            @click="activeComponent = comp.name"
+          >
+            <div class="comp-icon">
+              {{ comp.icon }}
+            </div>
+            <div class="comp-name">
+              {{ comp.name }}
+            </div>
+            <div class="comp-desc">
+              {{ comp.desc }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="worker-nodes">
-        <div class="plane-title">工作节点 (Worker Nodes)</div>
+        <div class="plane-title">
+          工作节点 (Worker Nodes)
+        </div>
         <div class="nodes-container">
-          <div class="node" v-for="node in workerNodes" :key="node.name"
-               :class="{
-                 active: node.status === 'active',
-                 failed: node.status === 'failed',
-                 selected: selectedNode === node.name
-               }"
-               @click="selectNode(node.name)">
+          <div
+            v-for="node in workerNodes"
+            :key="node.name"
+            class="node"
+            :class="{
+              active: node.status === 'active',
+              failed: node.status === 'failed',
+              selected: selectedNode === node.name
+            }"
+            @click="selectNode(node.name)"
+          >
             <div class="node-header">
               <span class="node-icon">{{ node.icon }}</span>
               <span class="node-name">{{ node.name }}</span>
-              <span class="node-status" :class="node.status">{{ node.statusText }}</span>
+              <span
+                class="node-status"
+                :class="node.status"
+              >{{ node.statusText }}</span>
             </div>
             <div class="node-resources">
               <div class="resource">
                 <span class="res-label">CPU:</span>
                 <div class="res-bar">
-                  <div class="res-fill" :style="{ width: node.cpu + '%' }" :class="{ high: node.cpu > 80 }"></div>
+                  <div
+                    class="res-fill"
+                    :style="{ width: node.cpu + '%' }"
+                    :class="{ high: node.cpu > 80 }"
+                  />
                 </div>
                 <span class="res-value">{{ node.cpu }}%</span>
               </div>
               <div class="resource">
                 <span class="res-label">内存:</span>
                 <div class="res-bar">
-                  <div class="res-fill" :style="{ width: node.memory + '%' }" :class="{ high: node.memory > 80 }"></div>
+                  <div
+                    class="res-fill"
+                    :style="{ width: node.memory + '%' }"
+                    :class="{ high: node.memory > 80 }"
+                  />
                 </div>
                 <span class="res-value">{{ node.memory }}%</span>
               </div>
             </div>
             <div class="node-pods">
-              <div class="pods-label">运行 Pod: {{ node.pods }} 个</div>
+              <div class="pods-label">
+                运行 Pod: {{ node.pods }} 个
+              </div>
               <div class="pods-grid">
-                <div v-for="n in Math.min(node.pods, 8)" :key="n" class="pod-dot" :class="{
-                  running: node.status === 'active',
-                  pending: node.status === 'pending',
-                  failed: node.status === 'failed'
-                }"></div>
-                <div v-if="node.pods > 8" class="pod-more">+{{ node.pods - 8 }}</div>
+                <div
+                  v-for="n in Math.min(node.pods, 8)"
+                  :key="n"
+                  class="pod-dot"
+                  :class="{
+                    running: node.status === 'active',
+                    pending: node.status === 'pending',
+                    failed: node.status === 'failed'
+                  }"
+                />
+                <div
+                  v-if="node.pods > 8"
+                  class="pod-more"
+                >
+                  +{{ node.pods - 8 }}
+                </div>
               </div>
             </div>
           </div>
@@ -67,14 +108,45 @@
     </div>
 
     <div class="k8s-controls">
-      <button class="control-btn" @click="simulateScheduling" :disabled="isScheduling">{{ isScheduling ? '调度中...' : '🚀 模拟 Pod 调度' }}</button>
-      <button class="control-btn" @click="simulateScaling" :disabled="isScaling">{{ isScaling ? '扩容中...' : '📈 自动扩容' }}</button>
-      <button class="control-btn danger" @click="simulateFailure" :disabled="isFailing">{{ isFailing ? '故障注入中...' : '💥 模拟节点故障' }}</button>
-      <button class="control-btn" @click="resetCluster">🔄 重置集群</button>
+      <button
+        class="control-btn"
+        :disabled="isScheduling"
+        @click="simulateScheduling"
+      >
+        {{ isScheduling ? '调度中...' : '🚀 模拟 Pod 调度' }}
+      </button>
+      <button
+        class="control-btn"
+        :disabled="isScaling"
+        @click="simulateScaling"
+      >
+        {{ isScaling ? '扩容中...' : '📈 自动扩容' }}
+      </button>
+      <button
+        class="control-btn danger"
+        :disabled="isFailing"
+        @click="simulateFailure"
+      >
+        {{ isFailing ? '故障注入中...' : '💥 模拟节点故障' }}
+      </button>
+      <button
+        class="control-btn"
+        @click="resetCluster"
+      >
+        🔄 重置集群
+      </button>
     </div>
 
-    <div class="k8s-logs" v-if="logs.length > 0">
-      <div class="log-entry" v-for="(log, idx) in logs.slice(-5)" :key="idx" :class="log.level">
+    <div
+      v-if="logs.length > 0"
+      class="k8s-logs"
+    >
+      <div
+        v-for="(log, idx) in logs.slice(-5)"
+        :key="idx"
+        class="log-entry"
+        :class="log.level"
+      >
         <span class="log-time">{{ log.time }}</span>
         <span class="log-message">{{ log.message }}</span>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue
index bf398cc..b1abbd3 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroserviceLatencyDemo.vue
@@ -5,65 +5,110 @@
 <template>
   <div class="microservice-latency-demo">
     <div class="header">
-      <div class="title">微服务延迟：网络调用的代价</div>
+      <div class="title">
+        微服务延迟：网络调用的代价
+      </div>
       <div class="subtitle">
         每次服务间调用都增加网络延迟，累积后响应时间变长
       </div>
     </div>
 
     <div class="controls">
-      <label
-        >服务间调用次数：<strong>{{ callCount }}</strong></label
+      <label>服务间调用次数：<strong>{{ callCount }}</strong></label>
+      <input
+        v-model="callCount"
+        type="range"
+        min="1"
+        max="10"
+        step="1"
       >
-      <input v-model="callCount" type="range" min="1" max="10" step="1" />
 
-      <label
-        >网络延迟：<strong>{{ networkLatency }} ms</strong></label
+      <label>网络延迟：<strong>{{ networkLatency }} ms</strong></label>
+      <input
+        v-model="networkLatency"
+        type="range"
+        min="1"
+        max="50"
+        step="1"
       >
-      <input v-model="networkLatency" type="range" min="1" max="50" step="1" />
     </div>
 
     <div class="comparison">
       <div class="architecture monolith">
-        <div class="arch-title">单体架构</div>
+        <div class="arch-title">
+          单体架构
+        </div>
         <div class="arch-box">
           <div class="single-process">
-            <div class="module">User</div>
-            <div class="module">Order</div>
-            <div class="module">Payment</div>
+            <div class="module">
+              User
+            </div>
+            <div class="module">
+              Order
+            </div>
+            <div class="module">
+              Payment
+            </div>
           </div>
         </div>
         <div class="latency">
-          <div class="latency-value">{{ monolithLatency }} ms</div>
-          <div class="latency-label">内存调用（~0ms）</div>
+          <div class="latency-value">
+            {{ monolithLatency }} ms
+          </div>
+          <div class="latency-label">
+            内存调用（~0ms）
+          </div>
         </div>
       </div>
 
       <div class="architecture microservices">
-        <div class="arch-title">微服务架构</div>
+        <div class="arch-title">
+          微服务架构
+        </div>
         <div class="arch-box">
           <div class="services">
-            <div class="service">User Svc</div>
-            <div class="network-arrow" v-if="callCount > 1">
+            <div class="service">
+              User Svc
+            </div>
+            <div
+              v-if="callCount > 1"
+              class="network-arrow"
+            >
               ⇄ {{ networkLatency }}ms
             </div>
-            <div class="service">Order Svc</div>
-            <div class="network-arrow" v-if="callCount > 2">
+            <div class="service">
+              Order Svc
+            </div>
+            <div
+              v-if="callCount > 2"
+              class="network-arrow"
+            >
               ⇄ {{ networkLatency }}ms
             </div>
-            <div class="service">Payment Svc</div>
+            <div class="service">
+              Payment Svc
+            </div>
           </div>
         </div>
         <div class="latency">
-          <div class="latency-value high">{{ microLatency }} ms</div>
-          <div class="latency-label">网络调用累积</div>
+          <div class="latency-value high">
+            {{ microLatency }} ms
+          </div>
+          <div class="latency-label">
+            网络调用累积
+          </div>
         </div>
       </div>
     </div>
 
     <div class="insight">
-      <div class="insight-icon" v-html="insightIcon"></div>
-      <div class="insight-text">{{ insight }}</div>
+      <div
+        class="insight-icon"
+        v-html="insightIcon"
+      />
+      <div class="insight-text">
+        {{ insight }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
index 7f603d7..a5a1fdc 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MicroservicesDemo.vue
@@ -16,7 +16,10 @@
         <div class="service-header">
           <span class="service-icon">{{ service.icon }}</span>
           <span class="service-name">{{ service.name }}</span>
-          <span class="service-status" :class="service.status">{{ service.statusText }}</span>
+          <span
+            class="service-status"
+            :class="service.status"
+          >{{ service.statusText }}</span>
         </div>
         <div class="service-details">
           <div class="detail-row">
@@ -38,18 +41,39 @@
     <div class="communication-flow">
       <h5>服务间通信链路</h5>
       <div class="flow-visualization">
-        <div class="flow-step" v-for="(step, idx) in flowSteps" :key="idx"
-             :class="{ active: currentFlowStep === idx, completed: currentFlowStep > idx }">
-          <div class="step-number">{{ idx + 1 }}</div>
+        <div
+          v-for="(step, idx) in flowSteps"
+          :key="idx"
+          class="flow-step"
+          :class="{ active: currentFlowStep === idx, completed: currentFlowStep > idx }"
+        >
+          <div class="step-number">
+            {{ idx + 1 }}
+          </div>
           <div class="step-content">
-            <div class="step-service">{{ step.service }}</div>
-            <div class="step-action">{{ step.action }}</div>
+            <div class="step-service">
+              {{ step.service }}
+            </div>
+            <div class="step-action">
+              {{ step.action }}
+            </div>
           </div>
         </div>
       </div>
       <div class="flow-controls">
-        <button class="flow-btn" @click="startFlow" :disabled="isFlowRunning">开始流程</button>
-        <button class="flow-btn" @click="resetFlow">重置</button>
+        <button
+          class="flow-btn"
+          :disabled="isFlowRunning"
+          @click="startFlow"
+        >
+          开始流程
+        </button>
+        <button
+          class="flow-btn"
+          @click="resetFlow"
+        >
+          重置
+        </button>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
index 171e36d..d3e1ac7 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
@@ -7,8 +7,13 @@
     </div>
 
     <div class="monolith-diagram">
-      <div class="monolith-box" :class="{ crashed: hasCrashed }">
-        <div class="monolith-header">单体应用进程</div>
+      <div
+        class="monolith-box"
+        :class="{ crashed: hasCrashed }"
+      >
+        <div class="monolith-header">
+          单体应用进程
+        </div>
         <div class="modules-container">
           <div
             v-for="module in modules"
@@ -17,14 +22,27 @@
             :class="{ active: activeModule === module.name, crashed: crashedModule === module.name }"
             @click="triggerModule(module.name)"
           >
-            <div class="module-icon">{{ module.icon }}</div>
-            <div class="module-name">{{ module.name }}</div>
-            <div class="module-status" :class="module.status">{{ module.statusText }}</div>
+            <div class="module-icon">
+              {{ module.icon }}
+            </div>
+            <div class="module-name">
+              {{ module.name }}
+            </div>
+            <div
+              class="module-status"
+              :class="module.status"
+            >
+              {{ module.statusText }}
+            </div>
           </div>
         </div>
         <div class="shared-db">
-          <div class="db-icon">🗄️</div>
-          <div class="db-label">共享数据库</div>
+          <div class="db-icon">
+            🗄️
+          </div>
+          <div class="db-label">
+            共享数据库
+          </div>
         </div>
       </div>
 
@@ -43,9 +61,24 @@
     </div>
 
     <div class="controls">
-      <button class="control-btn" @click="simulateNormalRequest">正常请求</button>
-      <button class="control-btn danger" @click="simulateCrash">模拟模块故障</button>
-      <button class="control-btn" @click="reset">重置</button>
+      <button
+        class="control-btn"
+        @click="simulateNormalRequest"
+      >
+        正常请求
+      </button>
+      <button
+        class="control-btn danger"
+        @click="simulateCrash"
+      >
+        模拟模块故障
+      </button>
+      <button
+        class="control-btn"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
     <div class="info-box">
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue
index 90b1f0b..9e25ac8 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithReleaseRiskDemo.vue
@@ -5,13 +5,19 @@
 <template>
   <div class="release-demo">
     <div class="header">
-      <div class="title">单体发布：牵一发而动全身</div>
-      <div class="subtitle">选择修改范围，看看“爆炸半径”</div>
+      <div class="title">
+        单体发布：牵一发而动全身
+      </div>
+      <div class="subtitle">
+        选择修改范围，看看“爆炸半径”
+      </div>
     </div>
 
     <div class="content">
       <div class="modules">
-        <div class="section-title">本次改动涉及</div>
+        <div class="section-title">
+          本次改动涉及
+        </div>
         <div class="module-grid">
           <button
             v-for="module in modules"
@@ -28,31 +34,59 @@
           <label>
             改动规模：<strong>{{ changeSizeLabel }}</strong>
           </label>
-          <input v-model="changeSize" type="range" min="1" max="5" step="1" />
+          <input
+            v-model="changeSize"
+            type="range"
+            min="1"
+            max="5"
+            step="1"
+          >
         </div>
       </div>
 
       <div class="result">
         <div class="risk-meter">
-          <div class="risk-title">故障概率</div>
-          <div class="risk-value">{{ riskPercent }}%</div>
+          <div class="risk-title">
+            故障概率
+          </div>
+          <div class="risk-value">
+            {{ riskPercent }}%
+          </div>
           <div class="meter">
-            <div class="bar" :style="{ width: riskPercent + '%' }"></div>
+            <div
+              class="bar"
+              :style="{ width: riskPercent + '%' }"
+            />
           </div>
         </div>
 
-        <button class="deploy-btn" @click="deployRelease">模拟发布</button>
-        <div class="status" :class="deployStatusClass">
+        <button
+          class="deploy-btn"
+          @click="deployRelease"
+        >
+          模拟发布
+        </button>
+        <div
+          class="status"
+          :class="deployStatusClass"
+        >
           {{ deployStatus }}
         </div>
 
         <div class="history">
-          <div class="section-title">最近 3 次发布</div>
+          <div class="section-title">
+            最近 3 次发布
+          </div>
           <ul>
-            <li v-for="(item, index) in deployHistory" :key="index">
+            <li
+              v-for="(item, index) in deployHistory"
+              :key="index"
+            >
               {{ item }}
             </li>
-            <li v-if="deployHistory.length === 0">暂无记录</li>
+            <li v-if="deployHistory.length === 0">
+              暂无记录
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue
index a906c21..e039cad 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithVsMicroserviceDemo.vue
@@ -1,23 +1,43 @@
 <template>
   <div class="monolith-microservice-demo">
     <div class="controls">
-      <button class="action-btn crash-btn" @click="triggerCrash">
+      <button
+        class="action-btn crash-btn"
+        @click="triggerCrash"
+      >
         💥 Simulate Order Service Crash
       </button>
-      <button class="action-btn reset-btn" @click="reset">🔄 Reset</button>
+      <button
+        class="action-btn reset-btn"
+        @click="reset"
+      >
+        🔄 Reset
+      </button>
     </div>
 
     <div class="comparison-view">
       <!-- Monolith -->
       <div class="architecture-block monolith">
-        <div class="arch-header">Monolith Architecture</div>
-        <div class="server-container" :class="{ crashed: monolithCrashed }">
+        <div class="arch-header">
+          Monolith Architecture
+        </div>
+        <div
+          class="server-container"
+          :class="{ crashed: monolithCrashed }"
+        >
           <div class="process-box">
-            <div class="module user">User</div>
-            <div class="module order" :class="{ error: monolithCrashed }">
+            <div class="module user">
+              User
+            </div>
+            <div
+              class="module order"
+              :class="{ error: monolithCrashed }"
+            >
               Order
             </div>
-            <div class="module pay">Payment</div>
+            <div class="module pay">
+              Payment
+            </div>
           </div>
           <div class="status-indicator">
             Status:
@@ -32,19 +52,27 @@
 
       <!-- Microservices -->
       <div class="architecture-block microservices">
-        <div class="arch-header">Microservices Architecture</div>
+        <div class="arch-header">
+          Microservices Architecture
+        </div>
         <div class="services-container">
           <div class="service-box user">
             <span>User Svc</span>
-            <div class="dot green"></div>
+            <div class="dot green" />
           </div>
-          <div class="service-box order" :class="{ crashed: microCrashed }">
+          <div
+            class="service-box order"
+            :class="{ crashed: microCrashed }"
+          >
             <span>Order Svc</span>
-            <div class="dot" :class="microCrashed ? 'red' : 'green'"></div>
+            <div
+              class="dot"
+              :class="microCrashed ? 'red' : 'green'"
+            />
           </div>
           <div class="service-box pay">
             <span>Payment Svc</span>
-            <div class="dot green"></div>
+            <div class="dot green" />
           </div>
         </div>
         <div class="status-indicator">
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
index d1abbd2..85979bd 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
@@ -8,7 +8,9 @@
 
     <div class="demo-stage">
       <div class="client-zone">
-        <div class="zone-title">👤 用户浏览器</div>
+        <div class="zone-title">
+          👤 用户浏览器
+        </div>
         <div class="request-queue">
           <div
             v-for="(req, idx) in pendingRequests"
@@ -30,7 +32,10 @@
       </div>
 
       <div class="connection-zone">
-        <div class="network-line" :class="{ busy: isProcessing }">
+        <div
+          class="network-line"
+          :class="{ busy: isProcessing }"
+        >
           <div class="packets">
             <div
               v-for="pkt in packets"
@@ -43,27 +48,35 @@
             </div>
           </div>
         </div>
-        <div class="latency-display" v-if="currentLatency > 0">
+        <div
+          v-if="currentLatency > 0"
+          class="latency-display"
+        >
           ⏱️ {{ currentLatency }}ms
         </div>
       </div>
 
       <div class="server-zone">
-        <div class="zone-title">🖥️ CGI 服务器</div>
+        <div class="zone-title">
+          🖥️ CGI 服务器
+        </div>
         <div class="server-status">
           <div
             class="status-indicator"
             :class="{ processing: isProcessing }"
           >
-            <span class="status-dot"></span>
+            <span class="status-dot" />
             <span class="status-text">{{ serverStatus }}</span>
           </div>
-          <div class="cpu-usage" v-if="isProcessing">
+          <div
+            v-if="isProcessing"
+            class="cpu-usage"
+          >
             <div class="cpu-bar">
               <div
                 class="cpu-fill"
                 :style="{ width: cpuUsage + '%' }"
-              ></div>
+              />
             </div>
             <span class="cpu-text">CPU: {{ cpuUsage }}%</span>
           </div>
@@ -79,7 +92,7 @@
               <div
                 class="proc-bar"
                 :style="{ width: proc.progress + '%' }"
-              ></div>
+              />
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
index a2a8381..f5c713e 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ScalingStrategyDemo.vue
@@ -6,25 +6,58 @@
     </div>
 
     <div class="strategies">
-      <div class="strategy-card" :class="{ active: activeStrategy === 'vertical' }" @click="activeStrategy = 'vertical'">
-        <div class="strategy-icon">📦</div>
-        <div class="strategy-name">垂直扩展</div>
-        <div class="strategy-desc">买更强的机器</div>
+      <div
+        class="strategy-card"
+        :class="{ active: activeStrategy === 'vertical' }"
+        @click="activeStrategy = 'vertical'"
+      >
+        <div class="strategy-icon">
+          📦
+        </div>
+        <div class="strategy-name">
+          垂直扩展
+        </div>
+        <div class="strategy-desc">
+          买更强的机器
+        </div>
         <div class="visual-vertical">
-          <div class="server" :class="{ scale: activeStrategy === 'vertical' }">
-            <div class="cpu">CPU</div>
-            <div class="memory">内存</div>
+          <div
+            class="server"
+            :class="{ scale: activeStrategy === 'vertical' }"
+          >
+            <div class="cpu">
+              CPU
+            </div>
+            <div class="memory">
+              内存
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="strategy-card" :class="{ active: activeStrategy === 'horizontal' }" @click="activeStrategy = 'horizontal'">
-        <div class="strategy-icon">🔄</div>
-        <div class="strategy-name">水平扩展</div>
-        <div class="strategy-desc">加更多机器</div>
+      <div
+        class="strategy-card"
+        :class="{ active: activeStrategy === 'horizontal' }"
+        @click="activeStrategy = 'horizontal'"
+      >
+        <div class="strategy-icon">
+          🔄
+        </div>
+        <div class="strategy-name">
+          水平扩展
+        </div>
+        <div class="strategy-desc">
+          加更多机器
+        </div>
         <div class="visual-horizontal">
           <div class="servers">
-            <div class="server-mini" v-for="n in 4" :key="n" :class="{ active: activeStrategy === 'horizontal' && n <= serverCount }" :style="{ animationDelay: (n * 0.1) + 's' }"></div>
+            <div
+              v-for="n in 4"
+              :key="n"
+              class="server-mini"
+              :class="{ active: activeStrategy === 'horizontal' && n <= serverCount }"
+              :style="{ animationDelay: (n * 0.1) + 's' }"
+            />
           </div>
         </div>
       </div>
@@ -36,7 +69,11 @@
         <span>垂直扩展</span>
         <span>水平扩展</span>
       </div>
-      <div class="table-row" v-for="item in comparisonData" :key="item.dim">
+      <div
+        v-for="item in comparisonData"
+        :key="item.dim"
+        class="table-row"
+      >
         <span>{{ item.dim }}</span>
         <span :class="{ better: item.verticalBetter }">{{ item.vertical }}</span>
         <span :class="{ better: item.horizontalBetter }">{{ item.horizontal }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue
index 3e57ae4..e5d0a73 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessCostAutoScaleDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="serverless-demo">
     <div class="header">
-      <div class="title">Serverless：按需付费 + 自动扩缩</div>
-      <div class="subtitle">调整调用量与耗时，比较固定服务器成本</div>
+      <div class="title">
+        Serverless：按需付费 + 自动扩缩
+      </div>
+      <div class="subtitle">
+        调整调用量与耗时，比较固定服务器成本
+      </div>
     </div>
 
     <div class="controls">
@@ -20,39 +24,68 @@
           min="0"
           max="5000000"
           step="50000"
-        />
+        >
       </div>
       <div class="control">
         <label>
           平均耗时：<strong>{{ durationMs }} ms</strong>
         </label>
-        <input v-model="durationMs" type="range" min="20" max="800" step="10" />
+        <input
+          v-model="durationMs"
+          type="range"
+          min="20"
+          max="800"
+          step="10"
+        >
       </div>
       <div class="control">
         <label>
           峰值并发：<strong>{{ peakRps }}</strong> rps
         </label>
-        <input v-model="peakRps" type="range" min="10" max="8000" step="50" />
+        <input
+          v-model="peakRps"
+          type="range"
+          min="10"
+          max="8000"
+          step="50"
+        >
       </div>
     </div>
 
     <div class="cards">
       <div class="card">
-        <div class="card-title">Serverless 估算</div>
-        <div class="card-value">${{ serverlessCost }}</div>
-        <div class="card-desc">按量计费（示意）</div>
+        <div class="card-title">
+          Serverless 估算
+        </div>
+        <div class="card-value">
+          ${{ serverlessCost }}
+        </div>
+        <div class="card-desc">
+          按量计费（示意）
+        </div>
       </div>
       <div class="card">
-        <div class="card-title">固定服务器</div>
-        <div class="card-value">${{ serverCost }}</div>
-        <div class="card-desc">需预留 {{ requiredServers }} 台服务器</div>
+        <div class="card-title">
+          固定服务器
+        </div>
+        <div class="card-value">
+          ${{ serverCost }}
+        </div>
+        <div class="card-desc">
+          需预留 {{ requiredServers }} 台服务器
+        </div>
       </div>
     </div>
 
     <div class="autoscale">
-      <div class="label">扩缩容状态</div>
+      <div class="label">
+        扩缩容状态
+      </div>
       <div class="scale-bar">
-        <div class="scale" :style="{ width: scalePercent + '%' }"></div>
+        <div
+          class="scale"
+          :style="{ width: scalePercent + '%' }"
+        />
       </div>
       <div class="scale-text">
         {{ scaleHint }}
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
index 193698a..9e4e0a3 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ServerlessDemo.vue
@@ -7,11 +7,29 @@
 
     <div class="serverless-visualization">
       <div class="function-grid">
-        <div v-for="func in functions" :key="func.name" class="function-card" :class="{ active: func.state === 'running', cold: func.state === 'cold', warming: func.state === 'warming' }" @click="triggerFunction(func.name)">
-          <div class="function-icon">{{ func.icon }}</div>
-          <div class="function-name">{{ func.name }}</div>
-          <div class="function-state" :class="func.state">{{ stateText(func.state) }}</div>
-          <div class="function-metrics" v-if="func.invocations > 0">
+        <div
+          v-for="func in functions"
+          :key="func.name"
+          class="function-card"
+          :class="{ active: func.state === 'running', cold: func.state === 'cold', warming: func.state === 'warming' }"
+          @click="triggerFunction(func.name)"
+        >
+          <div class="function-icon">
+            {{ func.icon }}
+          </div>
+          <div class="function-name">
+            {{ func.name }}
+          </div>
+          <div
+            class="function-state"
+            :class="func.state"
+          >
+            {{ stateText(func.state) }}
+          </div>
+          <div
+            v-if="func.invocations > 0"
+            class="function-metrics"
+          >
             <span>调用: {{ func.invocations }}</span>
             <span>平均: {{ func.avgDuration }}ms</span>
           </div>
@@ -19,7 +37,9 @@
       </div>
 
       <div class="auto-scaling-panel">
-        <div class="scaling-title">自动扩缩容状态</div>
+        <div class="scaling-title">
+          自动扩缩容状态
+        </div>
         <div class="scaling-metrics">
           <div class="metric">
             <span class="metric-label">并发请求:</span>
@@ -35,15 +55,29 @@
           </div>
         </div>
         <div class="scaling-chart">
-          <div v-for="(point, idx) in scalingHistory" :key="idx" class="chart-bar" :style="{ height: point + '%' }" :class="{ high: point > 70 }"></div>
+          <div
+            v-for="(point, idx) in scalingHistory"
+            :key="idx"
+            class="chart-bar"
+            :style="{ height: point + '%' }"
+            :class="{ high: point > 70 }"
+          />
         </div>
       </div>
     </div>
 
     <div class="traffic-simulator">
-      <div class="simulator-title">流量模拟器</div>
+      <div class="simulator-title">
+        流量模拟器
+      </div>
       <div class="traffic-patterns">
-        <button v-for="pattern in trafficPatterns" :key="pattern.name" class="pattern-btn" :class="{ active: currentPattern === pattern.name }" @click="applyPattern(pattern)">
+        <button
+          v-for="pattern in trafficPatterns"
+          :key="pattern.name"
+          class="pattern-btn"
+          :class="{ active: currentPattern === pattern.name }"
+          @click="applyPattern(pattern)"
+        >
           <span class="pattern-icon">{{ pattern.icon }}</span>
           <span class="pattern-name">{{ pattern.name }}</span>
           <span class="pattern-desc">{{ pattern.desc }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
index 07b31d7..509edae 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
@@ -15,8 +15,8 @@
         @click="activeEra = idx"
       >
         <div class="era-marker">
-          <div class="era-dot"></div>
-          <div class="era-line"></div>
+          <div class="era-dot" />
+          <div class="era-line" />
         </div>
 
         <div class="era-content">
@@ -27,8 +27,14 @@
           </div>
 
           <div class="tech-categories">
-            <div class="category" v-for="(cat, cIdx) in era.categories" :key="cIdx">
-              <div class="category-name">{{ cat.name }}</div>
+            <div
+              v-for="(cat, cIdx) in era.categories"
+              :key="cIdx"
+              class="category"
+            >
+              <div class="category-name">
+                {{ cat.name }}
+              </div>
               <div class="tech-tags">
                 <span
                   v-for="(tech, tIdx) in cat.techs"
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue
index d2c3020..560677d 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/BackendLanguagesDemo.vue
@@ -18,15 +18,26 @@
         :class="{ active: selectedLang === lang.name }"
         @click="selectedLang = lang.name"
       >
-        <div class="lang-icon">{{ lang.icon }}</div>
-        <div class="lang-name">{{ lang.name }}</div>
-        <div class="lang-metaphor">{{ lang.metaphor }}</div>
-        <div class="lang-description">{{ lang.description }}</div>
+        <div class="lang-icon">
+          {{ lang.icon }}
+        </div>
+        <div class="lang-name">
+          {{ lang.name }}
+        </div>
+        <div class="lang-metaphor">
+          {{ lang.metaphor }}
+        </div>
+        <div class="lang-description">
+          {{ lang.description }}
+        </div>
       </div>
     </div>
 
     <Transition name="fade">
-      <div v-if="selectedLang" class="lang-detail">
+      <div
+        v-if="selectedLang"
+        class="lang-detail"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ getCurrentLang().icon }}</span>
           <span class="detail-title">{{ getCurrentLang().name }}</span>
@@ -36,7 +47,10 @@
           <div class="detail-section">
             <h6>🎯 适用场景</h6>
             <ul>
-              <li v-for="scenario in getCurrentLang().scenarios" :key="scenario">
+              <li
+                v-for="scenario in getCurrentLang().scenarios"
+                :key="scenario"
+              >
                 {{ scenario }}
               </li>
             </ul>
@@ -45,21 +59,34 @@
           <div class="detail-section">
             <h6>✅ 优势</h6>
             <ul>
-              <li v-for="pro in getCurrentLang().pros" :key="pro">{{ pro }}</li>
+              <li
+                v-for="pro in getCurrentLang().pros"
+                :key="pro"
+              >
+                {{ pro }}
+              </li>
             </ul>
           </div>
 
           <div class="detail-section">
             <h6>❌ 劣势</h6>
             <ul>
-              <li v-for="con in getCurrentLang().cons" :key="con">{{ con }}</li>
+              <li
+                v-for="con in getCurrentLang().cons"
+                :key="con"
+              >
+                {{ con }}
+              </li>
             </ul>
           </div>
         </div>
       </div>
     </Transition>
 
-    <div v-if="!selectedLang" class="hint-text">
+    <div
+      v-if="!selectedLang"
+      class="hint-text"
+    >
       👆 点击上方任意语言，查看详细说明
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue
index 5ad545f..571bc14 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/ConcurrencyModelDemo.vue
@@ -18,15 +18,30 @@
         :class="{ active: selectedModel === model.name }"
         @click="selectedModel = model.name"
       >
-        <div class="model-icon">{{ model.icon }}</div>
-        <div class="model-name">{{ model.name }}</div>
-        <div class="model-lang">{{ model.language }}</div>
-        <div class="model-desc">{{ model.description }}</div>
+        <div class="model-icon">
+          {{ model.icon }}
+        </div>
+        <div class="model-name">
+          {{ model.name }}
+        </div>
+        <div class="model-lang">
+          {{ model.language }}
+        </div>
+        <div class="model-desc">
+          {{ model.description }}
+        </div>
       </div>
     </div>
 
-    <Transition name="fade" mode="out-in">
-      <div v-if="selectedModel" :key="selectedModel" class="model-detail">
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        v-if="selectedModel"
+        :key="selectedModel"
+        class="model-detail"
+      >
         <div class="detail-header">
           <h6>{{ getModelInfo().title }}</h6>
         </div>
@@ -35,13 +50,19 @@
           <div class="stat-item">
             <span class="stat-label">并发能力</span>
             <div class="stat-bar">
-              <div class="stat-fill" :style="{ width: getModelInfo().concurrency + '%' }"></div>
+              <div
+                class="stat-fill"
+                :style="{ width: getModelInfo().concurrency + '%' }"
+              />
             </div>
           </div>
           <div class="stat-item">
             <span class="stat-label">内存开销</span>
             <div class="stat-bar">
-              <div class="stat-fill memory" :style="{ width: getModelInfo().memory + '%' }"></div>
+              <div
+                class="stat-fill memory"
+                :style="{ width: getModelInfo().memory + '%' }"
+              />
             </div>
           </div>
         </div>
@@ -54,13 +75,23 @@
           <div class="pros">
             <strong>✅ 优势</strong>
             <ul>
-              <li v-for="pro in getModelInfo().pros" :key="pro">{{ pro }}</li>
+              <li
+                v-for="pro in getModelInfo().pros"
+                :key="pro"
+              >
+                {{ pro }}
+              </li>
             </ul>
           </div>
           <div class="cons">
             <strong>❌ 劣势</strong>
             <ul>
-              <li v-for="con in getModelInfo().cons" :key="con">{{ con }}</li>
+              <li
+                v-for="con in getModelInfo().cons"
+                :key="con"
+              >
+                {{ con }}
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue
index 145dc0f..e4a827b 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/DeveloperEfficiencyDemo.vue
@@ -13,9 +13,15 @@
     <div class="task-selector">
       <label>选择任务：</label>
       <select v-model="selectedTask">
-        <option value="rest">REST API</option>
-        <option value="web">Web 应用</option>
-        <option value="script">数据处理脚本</option>
+        <option value="rest">
+          REST API
+        </option>
+        <option value="web">
+          Web 应用
+        </option>
+        <option value="script">
+          数据处理脚本
+        </option>
       </select>
     </div>
 
@@ -29,7 +35,9 @@
           :key="lang.name"
           class="bar-wrapper"
         >
-          <div class="bar-label">{{ lang.name }}</div>
+          <div class="bar-label">
+            {{ lang.name }}
+          </div>
           <div class="bar-track">
             <div
               class="bar-fill"
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue
index ea68d3a..60982f4 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageComparisonDemo.vue
@@ -11,7 +11,9 @@
     </div>
 
     <div class="dimension-selector">
-      <div class="dimension-label">选择比较维度：</div>
+      <div class="dimension-label">
+        选择比较维度：
+      </div>
       <div class="dimension-buttons">
         <button
           v-for="dim in dimensions"
@@ -37,7 +39,9 @@
           :key="lang.name"
           class="bar-wrapper"
         >
-          <div class="bar-label">{{ lang.name }}</div>
+          <div class="bar-label">
+            {{ lang.name }}
+          </div>
           <div class="bar-track">
             <div
               class="bar-fill"
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue
index a95ccfa..46432e0 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageEcosystemDemo.vue
@@ -16,9 +16,15 @@
         :key="eco.name"
         class="eco-card"
       >
-        <div class="eco-icon">{{ eco.icon }}</div>
-        <div class="eco-name">{{ eco.name }}</div>
-        <div class="eco-lang">{{ eco.language }}</div>
+        <div class="eco-icon">
+          {{ eco.icon }}
+        </div>
+        <div class="eco-name">
+          {{ eco.name }}
+        </div>
+        <div class="eco-lang">
+          {{ eco.language }}
+        </div>
         <div class="eco-stats">
           <div class="stat">
             <span class="stat-label">包数量</span>
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue
index f8a6ac2..1e2127f 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/LanguageSelectorDemo.vue
@@ -17,7 +17,9 @@
         class="question-card"
         :class="{ active: currentQuestion === index }"
       >
-        <div class="question-number">{{ index + 1 }}</div>
+        <div class="question-number">
+          {{ index + 1 }}
+        </div>
         <div class="question-content">
           <h6>{{ question.text }}</h6>
           <div class="options">
@@ -36,19 +38,29 @@
     </div>
 
     <Transition name="fade">
-      <div v-if="recommendation" class="recommendation-panel">
+      <div
+        v-if="recommendation"
+        class="recommendation-panel"
+      >
         <div class="rec-header">
           <span class="rec-icon">{{ recommendation.icon }}</span>
           <div class="rec-title">
             <h6>推荐语言</h6>
-            <div class="rec-name">{{ recommendation.language }}</div>
+            <div class="rec-name">
+              {{ recommendation.language }}
+            </div>
           </div>
         </div>
         <div class="rec-reason">
           <strong>选择理由：</strong>
           <p>{{ recommendation.reason }}</p>
         </div>
-        <button class="reset-btn" @click="reset">🔄 重新选择</button>
+        <button
+          class="reset-btn"
+          @click="reset"
+        >
+          🔄 重新选择
+        </button>
       </div>
     </Transition>
 
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
index 55bd66b..00d87ed 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/MemoryManagementDemo.vue
@@ -16,9 +16,15 @@
         :key="model.name"
         class="model-card"
       >
-        <div class="model-icon">{{ model.icon }}</div>
-        <div class="model-name">{{ model.name }}</div>
-        <div class="model-desc">{{ model.description }}</div>
+        <div class="model-icon">
+          {{ model.icon }}
+        </div>
+        <div class="model-name">
+          {{ model.name }}
+        </div>
+        <div class="model-desc">
+          {{ model.description }}
+        </div>
         <div class="model-languages">
           <span
             v-for="lang in model.languages"
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue
index 483c6f5..18b7092 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/PerformanceBenchmarkDemo.vue
@@ -13,13 +13,24 @@
     <div class="control-panel">
       <div class="scenario-selector">
         <label>选择赛道：</label>
-        <select v-model="selectedScenario" @change="runBenchmark">
-          <option v-for="scenario in scenarios" :key="scenario.id" :value="scenario.id">
+        <select
+          v-model="selectedScenario"
+          @change="runBenchmark"
+        >
+          <option
+            v-for="scenario in scenarios"
+            :key="scenario.id"
+            :value="scenario.id"
+          >
             {{ scenario.label }}
           </option>
         </select>
       </div>
-      <button class="run-btn" @click="runBenchmark" :disabled="isRunning">
+      <button
+        class="run-btn"
+        :disabled="isRunning"
+        @click="runBenchmark"
+      >
         {{ isRunning ? '测试中...' : '▶ 开始测试' }}
       </button>
     </div>
@@ -34,7 +45,9 @@
           :key="result.language"
           class="bar-wrapper"
         >
-          <div class="bar-label">{{ result.language }}</div>
+          <div class="bar-label">
+            {{ result.language }}
+          </div>
           <div class="bar-track">
             <div
               class="bar-fill"
diff --git a/docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue
index 79dea60..2939e4d 100644
--- a/docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-languages/SyntaxComparisonDemo.vue
@@ -23,16 +23,24 @@
       </button>
     </div>
 
-    <Transition name="fade" mode="out-in">
-      <div :key="selectedLang" class="code-display">
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        :key="selectedLang"
+        class="code-display"
+      >
         <div class="code-window">
           <div class="window-header">
             <div class="window-controls">
-              <span class="control red"></span>
-              <span class="control yellow"></span>
-              <span class="control green"></span>
+              <span class="control red" />
+              <span class="control yellow" />
+              <span class="control green" />
+            </div>
+            <div class="file-name">
+              {{ getCode(selectedLang).filename }}
             </div>
-            <div class="file-name">{{ getCode(selectedLang).filename }}</div>
           </div>
           <pre class="code-content">{{ getCode(selectedLang).code }}</pre>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
index 896ef11..dececfa 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/CleanArchitectureDemo.vue
@@ -2,7 +2,9 @@
   <div class="clean-architecture-demo">
     <div class="demo-header">
       <h4>🏗️ 整洁架构（Clean Architecture）与分层架构</h4>
-      <p class="subtitle">分层架构是整洁架构的基础，理解两者的关系有助于构建更灵活的系统</p>
+      <p class="subtitle">
+        分层架构是整洁架构的基础，理解两者的关系有助于构建更灵活的系统
+      </p>
     </div>
 
     <!-- 架构对比 -->
@@ -20,26 +22,51 @@
 
       <div class="comparison-content">
         <!-- 传统分层架构 -->
-        <div v-if="currentTab === 'layered'" class="tab-panel">
+        <div
+          v-if="currentTab === 'layered'"
+          class="tab-panel"
+        >
           <div class="arch-diagram layered">
             <div class="layer-box controller">
-              <div class="layer-title">Controller 层</div>
-              <div class="layer-desc">接收请求、参数校验</div>
+              <div class="layer-title">
+                Controller 层
+              </div>
+              <div class="layer-desc">
+                接收请求、参数校验
+              </div>
+            </div>
+            <div class="arrow down">
+              ⬇️ 依赖
             </div>
-            <div class="arrow down">⬇️ 依赖</div>
             <div class="layer-box service">
-              <div class="layer-title">Service 层</div>
-              <div class="layer-desc">业务逻辑、事务管理</div>
+              <div class="layer-title">
+                Service 层
+              </div>
+              <div class="layer-desc">
+                业务逻辑、事务管理
+              </div>
+            </div>
+            <div class="arrow down">
+              ⬇️ 依赖
             </div>
-            <div class="arrow down">⬇️ 依赖</div>
             <div class="layer-box repository">
-              <div class="layer-title">Repository 层</div>
-              <div class="layer-desc">数据访问、ORM 映射</div>
+              <div class="layer-title">
+                Repository 层
+              </div>
+              <div class="layer-desc">
+                数据访问、ORM 映射
+              </div>
+            </div>
+            <div class="arrow down">
+              ⬇️ 依赖
             </div>
-            <div class="arrow down">⬇️ 依赖</div>
             <div class="layer-box domain">
-              <div class="layer-title">Domain 层</div>
-              <div class="layer-desc">实体定义、业务规则</div>
+              <div class="layer-title">
+                Domain 层
+              </div>
+              <div class="layer-desc">
+                实体定义、业务规则
+              </div>
             </div>
           </div>
 
@@ -55,30 +82,49 @@
         </div>
 
         <!-- 整洁架构 -->
-        <div v-else-if="currentTab === 'clean'" class="tab-panel">
+        <div
+          v-else-if="currentTab === 'clean'"
+          class="tab-panel"
+        >
           <div class="arch-diagram clean">
             <div class="clean-layers">
               <div class="clean-layer framework">
-                <div class="layer-name">框架与驱动层</div>
-                <div class="layer-items">Web / DB / UI / 外部接口</div>
+                <div class="layer-name">
+                  框架与驱动层
+                </div>
+                <div class="layer-items">
+                  Web / DB / UI / 外部接口
+                </div>
               </div>
               <div class="clean-layer interface">
-                <div class="layer-name">接口适配层</div>
-                <div class="layer-items">Controller / Gateway / Presenter</div>
+                <div class="layer-name">
+                  接口适配层
+                </div>
+                <div class="layer-items">
+                  Controller / Gateway / Presenter
+                </div>
               </div>
               <div class="clean-layer application">
-                <div class="layer-name">应用层</div>
-                <div class="layer-items">Service / UseCase / DTO</div>
+                <div class="layer-name">
+                  应用层
+                </div>
+                <div class="layer-items">
+                  Service / UseCase / DTO
+                </div>
               </div>
               <div class="clean-layer domain">
-                <div class="layer-name">领域层（核心）</div>
-                <div class="layer-items">Entity / ValueObject / DomainService</div>
+                <div class="layer-name">
+                  领域层（核心）
+                </div>
+                <div class="layer-items">
+                  Entity / ValueObject / DomainService
+                </div>
               </div>
             </div>
 
             <div class="dependency-rule">
               <div class="rule-arrow">
-                <span class="arrow-line"></span>
+                <span class="arrow-line" />
                 <span class="arrow-head">◀ 依赖方向</span>
               </div>
               <div class="rule-text">
@@ -99,7 +145,10 @@
         </div>
 
         <!-- 对比总结 -->
-        <div v-else class="tab-panel">
+        <div
+          v-else
+          class="tab-panel"
+        >
           <div class="comparison-table">
             <table>
               <thead>
@@ -148,7 +197,9 @@
             <h5>💡 选型建议</h5>
             <div class="rec-grid">
               <div class="rec-card">
-                <div class="rec-title">选择传统分层架构当...</div>
+                <div class="rec-title">
+                  选择传统分层架构当...
+                </div>
                 <ul>
                   <li>项目规模较小，业务相对简单</li>
                   <li>团队对 DDD 不熟悉</li>
@@ -157,14 +208,18 @@
                 </ul>
               </div>
               <div class="rec-card recommended">
-                <div class="rec-title">选择整洁架构当...</div>
+                <div class="rec-title">
+                  选择整洁架构当...
+                </div>
                 <ul>
                   <li>业务复杂，领域模型丰富</li>
                   <li>需要长期维护和演进</li>
                   <li>需要频繁切换技术栈</li>
                   <li>团队有较强的设计能力</li>
                 </ul>
-                <div class="rec-badge">推荐</div>
+                <div class="rec-badge">
+                  推荐
+                </div>
               </div>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
index e17f054..914ecb4 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ControllerLayerDemo.vue
@@ -2,28 +2,36 @@
   <div class="controller-layer-demo">
     <div class="demo-header">
       <h4>🎮 Controller 层：请求的"接待员"</h4>
-      <p class="subtitle">点击流程节点查看 Controller 如何接收和处理请求</p>
+      <p class="subtitle">
+        点击流程节点查看 Controller 如何接收和处理请求
+      </p>
     </div>
 
     <div class="flow-container">
       <!-- 请求发起 -->
       <div class="flow-step">
-        <div class="step-icon">🌐</div>
+        <div class="step-icon">
+          🌐
+        </div>
         <div class="step-content">
-          <div class="step-title">客户端发起请求</div>
+          <div class="step-title">
+            客户端发起请求
+          </div>
           <div class="step-code">
             POST /api/users/register
             Content-Type: application/json
             {
-              "username": "张三",
-              "email": "zhangsan@example.com",
-              "password": "123456"
+            "username": "张三",
+            "email": "zhangsan@example.com",
+            "password": "123456"
             }
           </div>
         </div>
       </div>
 
-      <div class="arrow-connector">⬇️ 请求到达</div>
+      <div class="arrow-connector">
+        ⬇️ 请求到达
+      </div>
 
       <!-- Controller 接收 -->
       <div
@@ -31,28 +39,34 @@
         :class="{ active: showDetails === 'controller' }"
         @click="toggleDetails('controller')"
       >
-        <div class="step-icon">🎮</div>
+        <div class="step-icon">
+          🎮
+        </div>
         <div class="step-content">
-          <div class="step-title">Controller 接收并解析请求</div>
+          <div class="step-title">
+            Controller 接收并解析请求
+          </div>
           <div class="step-code">
             @RestController
             @RequestMapping("/api/users")
             public class UserController {
 
-              @PostMapping("/register")
-              public ResponseEntity&lt;UserDTO&gt; register(
-                @RequestBody @Valid UserRegisterRequest request
-              ) {
-                // 调用 Service 处理业务
-                UserDTO user = userService.register(request);
-                return ResponseEntity.ok(user);
-              }
+            @PostMapping("/register")
+            public ResponseEntity&lt;UserDTO&gt; register(
+            @RequestBody @Valid UserRegisterRequest request
+            ) {
+            // 调用 Service 处理业务
+            UserDTO user = userService.register(request);
+            return ResponseEntity.ok(user);
+            }
             }
           </div>
         </div>
       </div>
 
-      <div class="arrow-connector">⬇️ 参数校验 + 调用</div>
+      <div class="arrow-connector">
+        ⬇️ 参数校验 + 调用
+      </div>
 
       <!-- 校验逻辑 -->
       <div
@@ -60,23 +74,30 @@
         :class="{ active: showDetails === 'validation' }"
         @click="toggleDetails('validation')"
       >
-        <div class="step-icon">✅</div>
+        <div class="step-icon">
+          ✅
+        </div>
         <div class="step-content">
-          <div class="step-title">参数校验（Controller 的职责之一）</div>
+          <div class="step-title">
+            参数校验（Controller 的职责之一）
+          </div>
           <div class="step-code">
             public class UserRegisterRequest {
-              @NotBlank(message = "用户名不能为空")
-              @Size(min = 2, max = 20, message = "用户名长度2-20")
-              private String username;
+            @NotBlank(message = "用户名不能为空")
+            @Size(min = 2, max = 20, message = "用户名长度2-20")
+            private String username;
 
-              @Email(message = "邮箱格式不正确")
-              private String email;
+            @Email(message = "邮箱格式不正确")
+            private String email;
 
-              @Size(min = 6, message = "密码至少6位")
-              private String password;
+            @Size(min = 6, message = "密码至少6位")
+            private String password;
             }
           </div>
-          <div v-if="showDetails === 'validation'" class="detail-panel">
+          <div
+            v-if="showDetails === 'validation'"
+            class="detail-panel"
+          >
             <h5>为什么校验要放在 Controller？</h5>
             <ul>
               <li>🛡️ 第一道防线：尽早拦截非法请求</li>
@@ -87,26 +108,32 @@
         </div>
       </div>
 
-      <div class="arrow-connector">⬇️ 返回结果</div>
+      <div class="arrow-connector">
+        ⬇️ 返回结果
+      </div>
 
       <!-- 响应返回 -->
       <div class="flow-step">
-        <div class="step-icon">📤</div>
+        <div class="step-icon">
+          📤
+        </div>
         <div class="step-content">
-          <div class="step-title">Controller 封装响应返回给客户端</div>
+          <div class="step-title">
+            Controller 封装响应返回给客户端
+          </div>
           <div class="step-code">
             HTTP/1.1 200 OK
             Content-Type: application/json
 
             {
-              "code": 200,
-              "message": "注册成功",
-              "data": {
-                "id": 10001,
-                "username": "张三",
-                "email": "zhangsan@example.com",
-                "createdAt": "2024-01-15T10:30:00Z"
-              }
+            "code": 200,
+            "message": "注册成功",
+            "data": {
+            "id": 10001,
+            "username": "张三",
+            "email": "zhangsan@example.com",
+            "createdAt": "2024-01-15T10:30:00Z"
+            }
             }
           </div>
         </div>
@@ -118,24 +145,48 @@
       <h5>🎯 Controller 的核心职责</h5>
       <div class="duty-grid">
         <div class="duty-item">
-          <div class="duty-icon">📡</div>
-          <div class="duty-title">接收请求</div>
-          <div class="duty-desc">映射 HTTP 请求到方法</div>
+          <div class="duty-icon">
+            📡
+          </div>
+          <div class="duty-title">
+            接收请求
+          </div>
+          <div class="duty-desc">
+            映射 HTTP 请求到方法
+          </div>
         </div>
         <div class="duty-item">
-          <div class="duty-icon">✅</div>
-          <div class="duty-title">参数校验</div>
-          <div class="duty-desc">基础格式和必填校验</div>
+          <div class="duty-icon">
+            ✅
+          </div>
+          <div class="duty-title">
+            参数校验
+          </div>
+          <div class="duty-desc">
+            基础格式和必填校验
+          </div>
         </div>
         <div class="duty-item">
-          <div class="duty-icon">🔄</div>
-          <div class="duty-title">调用 Service</div>
-          <div class="duty-desc">将请求转发给业务层</div>
+          <div class="duty-icon">
+            🔄
+          </div>
+          <div class="duty-title">
+            调用 Service
+          </div>
+          <div class="duty-desc">
+            将请求转发给业务层
+          </div>
         </div>
         <div class="duty-item">
-          <div class="duty-icon">📦</div>
-          <div class="duty-title">封装响应</div>
-          <div class="duty-desc">统一响应格式返回</div>
+          <div class="duty-icon">
+            📦
+          </div>
+          <div class="duty-title">
+            封装响应
+          </div>
+          <div class="duty-desc">
+            统一响应格式返回
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
index b59df99..d76224d 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DependencyDirectionDemo.vue
@@ -2,7 +2,9 @@
   <div class="dependency-direction-demo">
     <div class="demo-header">
       <h4>🔄 依赖方向：分层架构的核心规则</h4>
-      <p class="subtitle">理解依赖方向，才能真正掌握分层架构</p>
+      <p class="subtitle">
+        理解依赖方向，才能真正掌握分层架构
+      </p>
     </div>
 
     <!-- 依赖方向可视化 -->
@@ -10,38 +12,52 @@
       <div class="arch-diagram">
         <!-- 外层 -->
         <div class="layer outer">
-          <div class="layer-label">外层（UI / 外部系统）</div>
-          <div class="layer-box">Controller</div>
+          <div class="layer-label">
+            外层（UI / 外部系统）
+          </div>
+          <div class="layer-box">
+            Controller
+          </div>
         </div>
 
         <!-- 依赖箭头 -->
         <div class="dependency-arrow down">
-          <span class="arrow-line"></span>
+          <span class="arrow-line" />
           <span class="arrow-head">▶️ 依赖</span>
         </div>
 
         <!-- 中层 -->
         <div class="layer middle">
-          <div class="layer-label">中层（应用层）</div>
-          <div class="layer-box">Service</div>
+          <div class="layer-label">
+            中层（应用层）
+          </div>
+          <div class="layer-box">
+            Service
+          </div>
         </div>
 
         <!-- 依赖箭头 -->
         <div class="dependency-arrow down">
-          <span class="arrow-line"></span>
+          <span class="arrow-line" />
           <span class="arrow-head">▶️ 依赖</span>
         </div>
 
         <!-- 内层 -->
         <div class="layer inner">
-          <div class="layer-label">内层（领域层）</div>
-          <div class="layer-box">Domain / Repository</div>
+          <div class="layer-label">
+            内层（领域层）
+          </div>
+          <div class="layer-box">
+            Domain / Repository
+          </div>
         </div>
       </div>
 
       <!-- 核心原则说明 -->
       <div class="principle-box">
-        <div class="principle-title">🎯 核心原则：依赖倒置（DIP）</div>
+        <div class="principle-title">
+          🎯 核心原则：依赖倒置（DIP）
+        </div>
         <div class="principle-content">
           <p><strong>上层模块不应该依赖下层模块的具体实现，而应该依赖于抽象。</strong></p>
           <div class="rule-list">
@@ -49,21 +65,27 @@
               <span class="rule-icon">✅</span>
               <div class="rule-text">
                 <strong>Controller → Service 接口</strong>
-                <div class="rule-desc">Controller 只依赖 Service 的接口，不依赖实现类</div>
+                <div class="rule-desc">
+                  Controller 只依赖 Service 的接口，不依赖实现类
+                </div>
               </div>
             </div>
             <div class="rule-item">
               <span class="rule-icon">✅</span>
               <div class="rule-text">
                 <strong>Service → Repository 接口</strong>
-                <div class="rule-desc">Service 只依赖 Repository 接口，不关心数据怎么存</div>
+                <div class="rule-desc">
+                  Service 只依赖 Repository 接口，不关心数据怎么存
+                </div>
               </div>
             </div>
             <div class="rule-item">
               <span class="rule-icon">✅</span>
               <div class="rule-text">
                 <strong>所有层依赖 Domain</strong>
-                <div class="rule-desc">Domain 是核心，被所有上层依赖，但 Domain 不依赖任何层</div>
+                <div class="rule-desc">
+                  Domain 是核心，被所有上层依赖，但 Domain 不依赖任何层
+                </div>
               </div>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
index 0006b9a..6f50b5e 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DomainModelDemo.vue
@@ -2,7 +2,9 @@
   <div class="domain-model-demo">
     <div class="demo-header">
       <h4>📦 Domain 层：领域模型设计</h4>
-      <p class="subtitle">Domain 是业务概念的载体，所有层的依赖基础</p>
+      <p class="subtitle">
+        Domain 是业务概念的载体，所有层的依赖基础
+      </p>
     </div>
 
     <!-- 领域模型对比 -->
@@ -20,7 +22,10 @@
 
       <div class="comparison-content">
         <!-- 贫血模型 vs 充血模型 -->
-        <div v-if="currentTab === 'comparison'" class="tab-panel">
+        <div
+          v-if="currentTab === 'comparison'"
+          class="tab-panel"
+        >
           <div class="model-cards">
             <div class="model-card anemic">
               <div class="card-header">
@@ -30,7 +35,9 @@
               </div>
               <div class="card-content">
                 <div class="code-section">
-                  <div class="code-label">Entity（只有 getter/setter）</div>
+                  <div class="code-label">
+                    Entity（只有 getter/setter）
+                  </div>
                   <pre><code>@Entity
 public class Order {
     @Id
@@ -48,7 +55,9 @@ public class Order {
                 </div>
 
                 <div class="code-section">
-                  <div class="code-label">Service（所有业务逻辑都在这里）</div>
+                  <div class="code-label">
+                    Service（所有业务逻辑都在这里）
+                  </div>
                   <pre><code>@Service
 public class OrderService {
 
@@ -72,7 +81,9 @@ public class OrderService {
                 </div>
 
                 <div class="problems">
-                  <div class="problem-title">😫 贫血模型的问题</div>
+                  <div class="problem-title">
+                    😫 贫血模型的问题
+                  </div>
                   <ul>
                     <li><strong>违背面向对象</strong>：对象只有数据没有行为，变成了 "数据结构"</li>
                     <li><strong>逻辑分散</strong>：同样的业务规则可能在多个 Service 重复</li>
@@ -90,7 +101,9 @@ public class OrderService {
               </div>
               <div class="card-content">
                 <div class="code-section">
-                  <div class="code-label">Entity（包含业务逻辑）</div>
+                  <div class="code-label">
+                    Entity（包含业务逻辑）
+                  </div>
                   <pre><code>@Entity
 public class Order {
     @Id
@@ -139,7 +152,9 @@ public class Order {
                 </div>
 
                 <div class="code-section">
-                  <div class="code-label">Service（只做协调，不做业务判断）</div>
+                  <div class="code-label">
+                    Service（只做协调，不做业务判断）
+                  </div>
                   <pre><code>@Service
 @RequiredArgsConstructor
 public class OrderService {
@@ -168,7 +183,9 @@ public class OrderService {
                 </div>
 
                 <div class="benefits">
-                  <div class="benefit-title">😊 充血模型的优势</div>
+                  <div class="benefit-title">
+                    😊 充血模型的优势
+                  </div>
                   <ul>
                     <li><strong>符合面向对象</strong>：数据和行为封装在一起，是真正的 "对象"</li>
                     <li><strong>业务内聚</strong>：规则跟着对象走，改一处处处生效</li>
@@ -182,7 +199,10 @@ public class OrderService {
         </div>
 
         <!-- 值对象 -->
-        <div v-else-if="currentTab === 'valueobject'" class="tab-panel">
+        <div
+          v-else-if="currentTab === 'valueobject'"
+          class="tab-panel"
+        >
           <div class="value-object-content">
             <div class="concept-intro">
               <h5>💎 什么是值对象（Value Object）？</h5>
@@ -191,7 +211,9 @@ public class OrderService {
 
             <div class="vo-examples">
               <div class="example-card">
-                <div class="example-title">📍 地址 Address</div>
+                <div class="example-title">
+                  📍 地址 Address
+                </div>
                 <pre><code>// 值对象：不可变、无 ID
 public record Address(
     String province,    // 省
@@ -221,7 +243,9 @@ System.out.println(addr1.equals(addr2)); // true - 值对象比较的是值</cod
               </div>
 
               <div class="example-card">
-                <div class="example-title">💰 金钱 Money</div>
+                <div class="example-title">
+                  💰 金钱 Money
+                </div>
                 <pre><code>// 金钱是经典的值对象
 public record Money(
     BigDecimal amount,
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
index 0055ed7..925bc98 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/DtoFlowDemo.vue
@@ -2,13 +2,17 @@
   <div class="dto-flow-demo">
     <div class="demo-header">
       <h4>🔄 DTO 流转：数据在不同层之间的转换</h4>
-      <p class="subtitle">DTO（Data Transfer Object）是层与层之间传递数据的载体</p>
+      <p class="subtitle">
+        DTO（Data Transfer Object）是层与层之间传递数据的载体
+      </p>
     </div>
 
     <!-- 流程图 -->
     <div class="flow-diagram">
       <div class="flow-step">
-        <div class="step-title">Controller 层</div>
+        <div class="step-title">
+          Controller 层
+        </div>
         <div class="step-code">
           <div class="code-line">
             <span class="comment">// 接收 Request DTO</span>
@@ -25,10 +29,14 @@
         </div>
       </div>
 
-      <div class="flow-arrow">⬇️ 转换为 Service 需要的参数</div>
+      <div class="flow-arrow">
+        ⬇️ 转换为 Service 需要的参数
+      </div>
 
       <div class="flow-step">
-        <div class="step-title">Service 层</div>
+        <div class="step-title">
+          Service 层
+        </div>
         <div class="step-code">
           <div class="code-line">
             <span class="comment">// 业务处理</span>
@@ -54,10 +62,14 @@
         </div>
       </div>
 
-      <div class="flow-arrow">⬇️ 转换为 Repository 需要的 Entity</div>
+      <div class="flow-arrow">
+        ⬇️ 转换为 Repository 需要的 Entity
+      </div>
 
       <div class="flow-step">
-        <div class="step-title">Repository 层</div>
+        <div class="step-title">
+          Repository 层
+        </div>
         <div class="step-code">
           <div class="code-line">
             <span class="comment">// 数据持久化</span>
@@ -74,10 +86,14 @@
         </div>
       </div>
 
-      <div class="flow-arrow">⬆️ 返回 Entity，转换为 DTO</div>
+      <div class="flow-arrow">
+        ⬆️ 返回 Entity，转换为 DTO
+      </div>
 
       <div class="flow-step">
-        <div class="step-title">返回给客户端</div>
+        <div class="step-title">
+          返回给客户端
+        </div>
         <div class="step-code">
           <div class="code-line">
             <span class="comment">// Response DTO</span>
@@ -109,10 +125,18 @@
       <h5>📋 不同层的 DTO 职责</h5>
       <div class="comparison-table">
         <div class="table-header">
-          <div class="col-layer">层级</div>
-          <div class="col-dto">DTO 类型</div>
-          <div class="col-purpose">职责</div>
-          <div class="col-example">示例</div>
+          <div class="col-layer">
+            层级
+          </div>
+          <div class="col-dto">
+            DTO 类型
+          </div>
+          <div class="col-purpose">
+            职责
+          </div>
+          <div class="col-example">
+            示例
+          </div>
         </div>
         <div class="table-row">
           <div class="col-layer">
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
index a2ed41e..211d63a 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/LayeredArchitectureDemo.vue
@@ -4,11 +4,19 @@
       <!-- 客户端 -->
       <div class="client-layer">
         <div class="layer-box client">
-          <div class="layer-icon">🌐</div>
-          <div class="layer-title">客户端</div>
-          <div class="layer-desc">Web / App / 小程序</div>
+          <div class="layer-icon">
+            🌐
+          </div>
+          <div class="layer-title">
+            客户端
+          </div>
+          <div class="layer-desc">
+            Web / App / 小程序
+          </div>
+        </div>
+        <div class="arrow-down">
+          ⬇️ HTTP/HTTPS
         </div>
-        <div class="arrow-down">⬇️ HTTP/HTTPS</div>
       </div>
 
       <!-- 后端分层 -->
@@ -25,12 +33,18 @@
             <span class="layer-badge">入口</span>
           </div>
           <div class="layer-content">
-            <div class="duty">职责：接收请求、参数校验、调用 Service</div>
-            <div class="tech">技术：Spring MVC / Gin / Echo</div>
+            <div class="duty">
+              职责：接收请求、参数校验、调用 Service
+            </div>
+            <div class="tech">
+              技术：Spring MVC / Gin / Echo
+            </div>
           </div>
         </div>
 
-        <div class="arrow-down">⬇️ 调用</div>
+        <div class="arrow-down">
+          ⬇️ 调用
+        </div>
 
         <!-- Service 层 -->
         <div
@@ -44,12 +58,18 @@
             <span class="layer-badge">业务核心</span>
           </div>
           <div class="layer-content">
-            <div class="duty">职责：业务逻辑编排、事务管理、跨模块协调</div>
-            <div class="tech">技术：纯代码逻辑 / 无框架依赖</div>
+            <div class="duty">
+              职责：业务逻辑编排、事务管理、跨模块协调
+            </div>
+            <div class="tech">
+              技术：纯代码逻辑 / 无框架依赖
+            </div>
           </div>
         </div>
 
-        <div class="arrow-down">⬇️ 调用</div>
+        <div class="arrow-down">
+          ⬇️ 调用
+        </div>
 
         <!-- Repository 层 -->
         <div
@@ -63,12 +83,18 @@
             <span class="layer-badge">数据访问</span>
           </div>
           <div class="layer-content">
-            <div class="duty">职责：数据持久化、查询封装、ORM 映射</div>
-            <div class="tech">技术：MyBatis / GORM / Hibernate</div>
+            <div class="duty">
+              职责：数据持久化、查询封装、ORM 映射
+            </div>
+            <div class="tech">
+              技术：MyBatis / GORM / Hibernate
+            </div>
           </div>
         </div>
 
-        <div class="arrow-down">⬇️ SQL</div>
+        <div class="arrow-down">
+          ⬇️ SQL
+        </div>
 
         <!-- Domain 层 -->
         <div
@@ -82,23 +108,38 @@
             <span class="layer-badge">领域模型</span>
           </div>
           <div class="layer-content">
-            <div class="duty">职责：实体定义、业务规则、值对象</div>
-            <div class="tech">技术：POJO / Struct / Class</div>
+            <div class="duty">
+              职责：实体定义、业务规则、值对象
+            </div>
+            <div class="tech">
+              技术：POJO / Struct / Class
+            </div>
           </div>
         </div>
 
-        <div class="arrow-down">⬇️ 持久化</div>
+        <div class="arrow-down">
+          ⬇️ 持久化
+        </div>
 
         <!-- 数据库 -->
         <div class="layer-box database">
-          <div class="layer-icon">💾</div>
-          <div class="layer-title">数据库</div>
-          <div class="layer-desc">MySQL / PostgreSQL / MongoDB</div>
+          <div class="layer-icon">
+            💾
+          </div>
+          <div class="layer-title">
+            数据库
+          </div>
+          <div class="layer-desc">
+            MySQL / PostgreSQL / MongoDB
+          </div>
         </div>
       </div>
 
       <!-- 右侧说明面板 -->
-      <div class="info-panel" v-if="activeLayer">
+      <div
+        v-if="activeLayer"
+        class="info-panel"
+      >
         <h4>{{ layerInfo.title }}</h4>
         <p>{{ layerInfo.description }}</p>
         <div class="analogy">
@@ -107,7 +148,12 @@
         <div class="common-mistakes">
           <strong>⚠️ 常见错误：</strong>
           <ul>
-            <li v-for="mistake in layerInfo.mistakes" :key="mistake">{{ mistake }}</li>
+            <li
+              v-for="mistake in layerInfo.mistakes"
+              :key="mistake"
+            >
+              {{ mistake }}
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
index 7b3e854..4d77e6f 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/RepositoryLayerDemo.vue
@@ -2,7 +2,9 @@
   <div class="repository-layer-demo">
     <div class="demo-header">
       <h4>🗄️ Repository 层：数据的"仓库管理员"</h4>
-      <p class="subtitle">Repository 封装数据访问逻辑，让上层无需关心数据库细节</p>
+      <p class="subtitle">
+        Repository 封装数据访问逻辑，让上层无需关心数据库细节
+      </p>
     </div>
 
     <!-- 对比演示 -->
@@ -26,7 +28,10 @@
 
       <div class="comparison-content">
         <!-- 糟糕的做法 -->
-        <div v-if="viewMode === 'bad'" class="code-panel bad">
+        <div
+          v-if="viewMode === 'bad'"
+          class="code-panel bad"
+        >
           <div class="panel-header">
             <span class="panel-title">😫 在 Service 里直接写 SQL</span>
             <span class="panel-badge">耦合严重</span>
@@ -75,7 +80,10 @@ public class OrderService {
         </div>
 
         <!-- 优雅的做法 -->
-        <div v-else class="code-panel good">
+        <div
+          v-else
+          class="code-panel good"
+        >
           <div class="panel-header">
             <span class="panel-title">😊 使用 Repository 封装数据访问</span>
             <span class="panel-badge">清晰解耦</span>
@@ -191,16 +199,26 @@ public class OrderService {
 
       <div class="comparison-table">
         <div class="table-header">
-          <div class="col-method">实现方式</div>
-          <div class="col-pros">优点</div>
-          <div class="col-cons">缺点</div>
-          <div class="col-scene">适用场景</div>
+          <div class="col-method">
+            实现方式
+          </div>
+          <div class="col-pros">
+            优点
+          </div>
+          <div class="col-cons">
+            缺点
+          </div>
+          <div class="col-scene">
+            适用场景
+          </div>
         </div>
 
         <div class="table-row">
           <div class="col-method">
             <strong>Spring Data JPA</strong>
-            <div class="method-tag">主流方案</div>
+            <div class="method-tag">
+              主流方案
+            </div>
           </div>
           <div class="col-pros">
             <ul>
@@ -215,13 +233,17 @@ public class OrderService {
               <li>学习曲线较陡</li>
             </ul>
           </div>
-          <div class="col-scene">快速开发、标准 CRUD 业务</div>
+          <div class="col-scene">
+            快速开发、标准 CRUD 业务
+          </div>
         </div>
 
         <div class="table-row">
           <div class="col-method">
             <strong>MyBatis / MyBatis-Plus</strong>
-            <div class="method-tag tag-blue">国内主流</div>
+            <div class="method-tag tag-blue">
+              国内主流
+            </div>
           </div>
           <div class="col-pros">
             <ul>
@@ -236,13 +258,17 @@ public class OrderService {
               <li>样板代码较多</li>
             </ul>
           </div>
-          <div class="col-scene">复杂查询、性能敏感业务</div>
+          <div class="col-scene">
+            复杂查询、性能敏感业务
+          </div>
         </div>
 
         <div class="table-row">
           <div class="col-method">
             <strong>Spring Data JDBC</strong>
-            <div class="method-tag tag-green">轻量</div>
+            <div class="method-tag tag-green">
+              轻量
+            </div>
           </div>
           <div class="col-pros">
             <ul>
@@ -257,7 +283,9 @@ public class OrderService {
               <li>功能较简单</li>
             </ul>
           </div>
-          <div class="col-scene">微服务、简单聚合根场景</div>
+          <div class="col-scene">
+            微服务、简单聚合根场景
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
index 86e80dd..059479f 100644
--- a/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-layered-architecture/ServiceLayerDemo.vue
@@ -2,12 +2,16 @@
   <div class="service-layer-demo">
     <div class="demo-header">
       <h4>⚙️ Service 层：业务逻辑的"指挥家"</h4>
-      <p class="subtitle">Service 层编排业务逻辑，协调多个 Repository，管理事务边界</p>
+      <p class="subtitle">
+        Service 层编排业务逻辑，协调多个 Repository，管理事务边界
+      </p>
     </div>
 
     <!-- 场景选择器 -->
     <div class="scenario-selector">
-      <div class="selector-label">选择业务场景：</div>
+      <div class="selector-label">
+        选择业务场景：
+      </div>
       <div class="scenario-buttons">
         <button
           v-for="scenario in scenarios"
@@ -36,34 +40,57 @@
           @click="toggleStep(index)"
         >
           <div class="step-header">
-            <div class="step-number">{{ index + 1 }}</div>
-            <div class="step-info">
-              <div class="step-name">{{ step.name }}</div>
-              <div class="step-layer">{{ step.layer }}</div>
+            <div class="step-number">
+              {{ index + 1 }}
             </div>
-            <div v-if="step.subSteps" class="expand-icon">
+            <div class="step-info">
+              <div class="step-name">
+                {{ step.name }}
+              </div>
+              <div class="step-layer">
+                {{ step.layer }}
+              </div>
+            </div>
+            <div
+              v-if="step.subSteps"
+              class="expand-icon"
+            >
               {{ expandedSteps.includes(index) ? '▼' : '▶' }}
             </div>
           </div>
 
-          <div v-if="step.code" class="step-code">
+          <div
+            v-if="step.code"
+            class="step-code"
+          >
             <pre><code>{{ step.code }}</code></pre>
           </div>
 
           <!-- 子步骤（事务管理） -->
-          <div v-if="step.subSteps && expandedSteps.includes(index)" class="sub-steps">
+          <div
+            v-if="step.subSteps && expandedSteps.includes(index)"
+            class="sub-steps"
+          >
             <div
               v-for="(subStep, subIndex) in step.subSteps"
               :key="subIndex"
               class="sub-step"
               :class="subStep.status"
             >
-              <div class="sub-step-icon">{{ subStep.icon }}</div>
-              <div class="sub-step-content">
-                <div class="sub-step-name">{{ subStep.name }}</div>
-                <div class="sub-step-desc">{{ subStep.desc }}</div>
+              <div class="sub-step-icon">
+                {{ subStep.icon }}
+              </div>
+              <div class="sub-step-content">
+                <div class="sub-step-name">
+                  {{ subStep.name }}
+                </div>
+                <div class="sub-step-desc">
+                  {{ subStep.desc }}
+                </div>
+              </div>
+              <div class="sub-step-status">
+                {{ subStep.statusText }}
               </div>
-              <div class="sub-step-status">{{ subStep.statusText }}</div>
             </div>
           </div>
         </div>
@@ -79,9 +106,15 @@
           :key="principle.id"
           class="principle-card"
         >
-          <div class="principle-icon">{{ principle.icon }}</div>
-          <div class="principle-title">{{ principle.title }}</div>
-          <div class="principle-desc">{{ principle.desc }}</div>
+          <div class="principle-icon">
+            {{ principle.icon }}
+          </div>
+          <div class="principle-title">
+            {{ principle.title }}
+          </div>
+          <div class="principle-desc">
+            {{ principle.desc }}
+          </div>
           <div class="principle-example">
             <code>{{ principle.example }}</code>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue
index f540572..be098c5 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsDemo.vue
@@ -597,19 +597,21 @@ onUnmounted(() => {
 
 <template>
   <div
+    ref="demoRef"
     class="browser-devtools-demo"
     :class="{ 'dark-mode': isDark }"
-    ref="demoRef"
   >
     <!-- Top Controls (Custom for Demo) -->
     <div class="demo-controls">
-      <div class="control-label">Chrome DevTools 模拟器</div>
+      <div class="control-label">
+        Chrome DevTools 模拟器
+      </div>
       <div class="control-actions">
         <select
           v-model="selectedTour"
-          @change="handleTourSelect"
           class="tour-select"
           :disabled="isAutoPlaying"
+          @change="handleTourSelect"
         >
           <option
             v-for="opt in tourOptions"
@@ -620,7 +622,11 @@ onUnmounted(() => {
             {{ opt.label }}
           </option>
         </select>
-        <button v-if="isAutoPlaying" class="stop-btn" @click="stopTour">
+        <button
+          v-if="isAutoPlaying"
+          class="stop-btn"
+          @click="stopTour"
+        >
           停止演示
         </button>
       </div>
@@ -628,8 +634,8 @@ onUnmounted(() => {
 
     <!-- Virtual Cursor & Highlight -->
     <div
-      class="virtual-cursor"
       v-if="cursorVisible"
+      class="virtual-cursor"
       :style="{ transform: `translate(${cursorX}px, ${cursorY}px)` }"
     >
       <svg
@@ -648,10 +654,10 @@ onUnmounted(() => {
       </svg>
     </div>
     <div
-      class="highlight-box"
       v-if="highlightVisible"
+      class="highlight-box"
       :style="highlightStyle"
-    ></div>
+    />
 
     <!-- Main UI Container -->
     <div class="devtools-container">
@@ -662,20 +668,33 @@ onUnmounted(() => {
             class="icon-btn element-picker"
             title="选择页面中的元素以进行检查"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="#6e6e6e"
+            >
               <path
                 d="M4 4h9v2H4V4zm0 4h5v2H4V8zm0 4h5v2H4v-2zm12-5l-4 4h3v4h2v-4h3l-4-4z"
               />
             </svg>
           </div>
-          <div class="icon-btn device-toggle" title="切换设备工具栏">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
+          <div
+            class="icon-btn device-toggle"
+            title="切换设备工具栏"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="#6e6e6e"
+            >
               <path
                 d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"
               />
             </svg>
           </div>
-          <div class="separator"></div>
+          <div class="separator" />
           <div class="tabs">
             <div
               v-for="tab in tabs"
@@ -692,24 +711,54 @@ onUnmounted(() => {
           </div>
         </div>
         <div class="header-right">
-          <div class="icon-btn settings" title="设置">⚙️</div>
-          <div class="icon-btn close" title="关闭">×</div>
+          <div
+            class="icon-btn settings"
+            title="设置"
+          >
+            ⚙️
+          </div>
+          <div
+            class="icon-btn close"
+            title="关闭"
+          >
+            ×
+          </div>
         </div>
       </div>
 
       <!-- Body Area -->
       <div class="devtools-body">
         <!-- 1. Console Panel -->
-        <div v-if="activeTab === 'console'" class="panel console-panel-layout">
-          <div class="console-toolbar" @mouseenter="showInfo('控制台工具栏')">
-            <div class="icon-btn clear" title="清除控制台">🚫</div>
-            <div class="separator"></div>
-            <div class="dropdown-trigger">top ▼</div>
-            <div class="icon-btn eye" title="创建实时表达式">👁️</div>
-            <div class="filter-box">
-              <span class="filter-icon">🔍</span><input placeholder="过滤" />
+        <div
+          v-if="activeTab === 'console'"
+          class="panel console-panel-layout"
+        >
+          <div
+            class="console-toolbar"
+            @mouseenter="showInfo('控制台工具栏')"
+          >
+            <div
+              class="icon-btn clear"
+              title="清除控制台"
+            >
+              🚫
+            </div>
+            <div class="separator" />
+            <div class="dropdown-trigger">
+              top ▼
+            </div>
+            <div
+              class="icon-btn eye"
+              title="创建实时表达式"
+            >
+              👁️
+            </div>
+            <div class="filter-box">
+              <span class="filter-icon">🔍</span><input placeholder="过滤">
+            </div>
+            <div class="dropdown-trigger">
+              默认级别 ▼
             </div>
-            <div class="dropdown-trigger">默认级别 ▼</div>
           </div>
           <div class="console-main-area">
             <div class="console-sidebar">
@@ -744,16 +793,22 @@ onUnmounted(() => {
                   :class="log.type"
                 >
                   <div class="log-gutter">
-                    <span class="icon error" v-if="log.type === 'error'"
-                      >❌</span
-                    >
-                    <span class="icon warn" v-else-if="log.type === 'warn'"
-                      >⚠️</span
-                    >
-                    <span class="icon" v-else-if="log.type === 'command'"
-                      >&gt;</span
-                    >
-                    <span class="icon" v-else>&lt;</span>
+                    <span
+                      v-if="log.type === 'error'"
+                      class="icon error"
+                    >❌</span>
+                    <span
+                      v-else-if="log.type === 'warn'"
+                      class="icon warn"
+                    >⚠️</span>
+                    <span
+                      v-else-if="log.type === 'command'"
+                      class="icon"
+                    >&gt;</span>
+                    <span
+                      v-else
+                      class="icon"
+                    >&lt;</span>
                   </div>
                   <div class="log-content">
                     <pre>{{ log.msg }}</pre>
@@ -767,10 +822,10 @@ onUnmounted(() => {
                   <span class="prompt">&gt;</span>
                   <input
                     v-model="consoleInput"
-                    @keyup.enter="runConsoleCommand"
                     class="input-field"
                     placeholder=""
-                  />
+                    @keyup.enter="runConsoleCommand"
+                  >
                 </div>
               </div>
             </div>
@@ -784,10 +839,18 @@ onUnmounted(() => {
               >
                 ⋮
               </div>
-              <div class="drawer-tab">控制台</div>
-              <div class="drawer-tab">AI 辅助</div>
-              <div class="drawer-tab">新变化</div>
-              <div class="drawer-tab">问题</div>
+              <div class="drawer-tab">
+                控制台
+              </div>
+              <div class="drawer-tab">
+                AI 辅助
+              </div>
+              <div class="drawer-tab">
+                新变化
+              </div>
+              <div class="drawer-tab">
+                问题
+              </div>
               <div class="drawer-tab active">
                 搜索 <span class="close-icon">×</span>
               </div>
@@ -799,12 +862,16 @@ onUnmounted(() => {
                   <input
                     placeholder="A terminal is just a grid of same-sized cells..."
                     class="search-input"
-                  />
-                  <div class="search-actions">Aa ab .*</div>
+                  >
+                  <div class="search-actions">
+                    Aa ab .*
+                  </div>
                 </div>
                 <div class="search-results">
                   <div class="no-results">
-                    <div class="no-results-title">未找到匹配项</div>
+                    <div class="no-results-title">
+                      未找到匹配项
+                    </div>
                     <div class="no-results-desc">
                       没有与您的搜索查询相符的结果
                     </div>
@@ -816,84 +883,80 @@ onUnmounted(() => {
         </div>
 
         <!-- 2. Elements Panel -->
-        <div v-else-if="activeTab === 'elements'" class="panel elements-panel">
+        <div
+          v-else-if="activeTab === 'elements'"
+          class="panel elements-panel"
+        >
           <div class="dom-tree-panel">
             <div class="dom-tree-content">
-              <div class="dom-node" data-tag="html">
+              <div
+                class="dom-node"
+                data-tag="html"
+              >
                 <div class="line-content">
                   <span class="arrow expanded">▼</span>
                   <span class="tag-name">html</span>
-                  <span class="attr-name">class</span>=<span class="attr-val"
-                    >"mac"</span
-                  >
-                  <span class="attr-name">lang</span>=<span class="attr-val"
-                    >"zh-CN"</span
-                  >
-                  <span class="attr-name">dir</span>=<span class="attr-val"
-                    >"ltr"</span
-                  >
-                  <span class="attr-name">style</span>=<span class="attr-val"
-                    >"--ev-doc-font-size: 14px..."</span
-                  >
+                  <span class="attr-name">class</span>=<span class="attr-val">"mac"</span>
+                  <span class="attr-name">lang</span>=<span class="attr-val">"zh-CN"</span>
+                  <span class="attr-name">dir</span>=<span class="attr-val">"ltr"</span>
+                  <span class="attr-name">style</span>=<span class="attr-val">"--ev-doc-font-size: 14px..."</span>
                 </div>
                 <div class="children">
-                  <div class="dom-node" data-tag="head">
+                  <div
+                    class="dom-node"
+                    data-tag="head"
+                  >
                     <div class="line-content">
                       <span class="arrow">▶</span>
                       <span class="tag-name">head</span>
                       <span class="dots">...</span>
                     </div>
                   </div>
-                  <div class="dom-node" data-tag="body">
+                  <div
+                    class="dom-node"
+                    data-tag="body"
+                  >
                     <div class="line-content">
                       <span class="arrow expanded">▼</span>
                       <span class="tag-name">body</span>
                       <span class="node-trail">== $0</span>
                     </div>
                     <div class="children">
-                      <div class="dom-node selected" data-tag="div">
+                      <div
+                        class="dom-node selected"
+                        data-tag="div"
+                      >
                         <div class="line-content">
                           <span class="arrow expanded">▼</span>
                           <span class="tag-name">div</span>
                           <span class="attr-name">id</span>=<span
                             class="attr-val"
-                            >"app"</span
-                          >
+                          >"app"</span>
                           <span class="attr-name">data-v-app</span>
                         </div>
                         <div class="children">
                           <div class="dom-node">
                             <div class="line-content">
-                              <span class="indent"></span
-                              ><span class="tag-name">div</span
-                              ><span class="dots">...</span
-                              ><span class="tag-name">/div</span>
+                              <span class="indent" /><span class="tag-name">div</span><span class="dots">...</span><span class="tag-name">/div</span>
                             </div>
                           </div>
                           <div class="dom-node">
                             <div class="line-content">
-                              <span class="indent"></span
-                              ><span class="tag-name">script</span>
+                              <span class="indent" /><span class="tag-name">script</span>
                               <span class="attr-name">type</span>=<span
                                 class="attr-val"
-                                >"module"</span
-                              >
+                              >"module"</span>
                               <span class="attr-name">src</span>=<span
                                 class="attr-val"
-                                >"/easy-vibe/..."</span
-                              ><span class="tag-name">/script</span>
+                              >"/easy-vibe/..."</span><span class="tag-name">/script</span>
                             </div>
                           </div>
                           <div class="dom-node">
                             <div class="line-content">
-                              <span class="indent"></span
-                              ><span class="tag-name">div</span>
+                              <span class="indent" /><span class="tag-name">div</span>
                               <span class="attr-name">id</span>=<span
                                 class="attr-val"
-                                >"el-popper-container-3083"</span
-                              ><span class="tag-name">&gt;</span
-                              ><span class="dots">...</span
-                              ><span class="tag-name">/div</span>
+                              >"el-popper-container-3083"</span><span class="tag-name">&gt;</span><span class="dots">...</span><span class="tag-name">/div</span>
                             </div>
                           </div>
                         </div>
@@ -907,10 +970,7 @@ onUnmounted(() => {
                           <span class="tag-name">div</span>
                           <span class="attr-name">style</span>=<span
                             class="attr-val"
-                            >"all: initial;"</span
-                          ><span class="tag-name">&gt;</span
-                          ><span class="dots">...</span
-                          ><span class="tag-name">/div</span>
+                          >"all: initial;"</span><span class="tag-name">&gt;</span><span class="dots">...</span><span class="tag-name">/div</span>
                         </div>
                       </div>
                       <div class="dom-node">
@@ -919,14 +979,10 @@ onUnmounted(() => {
                           <span class="tag-name">div</span>
                           <span class="attr-name">id</span>=<span
                             class="attr-val"
-                            >"immersive-translate-browser-popup"</span
-                          >
+                          >"immersive-translate-browser-popup"</span>
                           <span class="attr-name">style</span>=<span
                             class="attr-val"
-                            >"all: initial;"</span
-                          ><span class="tag-name">&gt;</span
-                          ><span class="dots">...</span
-                          ><span class="tag-name">/div</span>
+                          >"all: initial;"</span><span class="tag-name">&gt;</span><span class="dots">...</span><span class="tag-name">/div</span>
                         </div>
                       </div>
                     </div>
@@ -940,9 +996,14 @@ onUnmounted(() => {
                 </div>
               </div>
             </div>
-            <div class="breadcrumbs">html.mac > body > div#app</div>
+            <div class="breadcrumbs">
+              html.mac > body > div#app
+            </div>
             <!-- Bottom Drawer (Shared) -->
-            <div class="bottom-drawer" style="border-top: 1px solid #ccc">
+            <div
+              class="bottom-drawer"
+              style="border-top: 1px solid #ccc"
+            >
               <div class="bottom-drawer-header">
                 <div
                   class="icon-btn more"
@@ -950,10 +1011,18 @@ onUnmounted(() => {
                 >
                   ⋮
                 </div>
-                <div class="drawer-tab">控制台</div>
-                <div class="drawer-tab">AI 辅助</div>
-                <div class="drawer-tab">新变化</div>
-                <div class="drawer-tab">问题</div>
+                <div class="drawer-tab">
+                  控制台
+                </div>
+                <div class="drawer-tab">
+                  AI 辅助
+                </div>
+                <div class="drawer-tab">
+                  新变化
+                </div>
+                <div class="drawer-tab">
+                  问题
+                </div>
                 <div class="drawer-tab active">
                   搜索 <span class="close-icon">×</span>
                 </div>
@@ -965,12 +1034,16 @@ onUnmounted(() => {
                     <input
                       placeholder="A terminal is just a grid of same-sized cells..."
                       class="search-input"
-                    />
-                    <div class="search-actions">Aa ab .*</div>
+                    >
+                    <div class="search-actions">
+                      Aa ab .*
+                    </div>
                   </div>
                   <div class="search-results">
                     <div class="no-results">
-                      <div class="no-results-title">未找到匹配项</div>
+                      <div class="no-results-title">
+                        未找到匹配项
+                      </div>
                       <div class="no-results-desc">
                         没有与您的搜索查询相符的结果
                       </div>
@@ -982,35 +1055,77 @@ onUnmounted(() => {
           </div>
           <div class="styles-panel">
             <div class="styles-tabs">
-              <div class="style-tab active">样式</div>
-              <div class="style-tab">计算样式</div>
-              <div class="style-tab">布局</div>
-              <div class="style-tab">事件监听器</div>
-              <div class="style-tab">»</div>
+              <div class="style-tab active">
+                样式
+              </div>
+              <div class="style-tab">
+                计算样式
+              </div>
+              <div class="style-tab">
+                布局
+              </div>
+              <div class="style-tab">
+                事件监听器
+              </div>
+              <div class="style-tab">
+                »
+              </div>
             </div>
             <div class="styles-content">
               <!-- Box Model Mock -->
               <div class="box-model-container">
                 <div class="box-margin">
-                  <div class="label">margin</div>
-                  <div class="val-top">-</div>
-                  <div class="val-left">-</div>
-                  <div class="val-right">-</div>
-                  <div class="val-bottom">-</div>
+                  <div class="label">
+                    margin
+                  </div>
+                  <div class="val-top">
+                    -
+                  </div>
+                  <div class="val-left">
+                    -
+                  </div>
+                  <div class="val-right">
+                    -
+                  </div>
+                  <div class="val-bottom">
+                    -
+                  </div>
                   <div class="box-border">
-                    <div class="label">border</div>
-                    <div class="val-top">-</div>
-                    <div class="val-left">-</div>
-                    <div class="val-right">-</div>
-                    <div class="val-bottom">-</div>
+                    <div class="label">
+                      border
+                    </div>
+                    <div class="val-top">
+                      -
+                    </div>
+                    <div class="val-left">
+                      -
+                    </div>
+                    <div class="val-right">
+                      -
+                    </div>
+                    <div class="val-bottom">
+                      -
+                    </div>
                     <div class="box-padding">
-                      <div class="label">padding</div>
-                      <div class="val-top">-</div>
-                      <div class="val-left">-</div>
-                      <div class="val-right">-</div>
-                      <div class="val-bottom">-</div>
+                      <div class="label">
+                        padding
+                      </div>
+                      <div class="val-top">
+                        -
+                      </div>
+                      <div class="val-left">
+                        -
+                      </div>
+                      <div class="val-right">
+                        -
+                      </div>
+                      <div class="val-bottom">
+                        -
+                      </div>
                       <div class="box-content">
-                        <div class="val-content">1600 x 3461</div>
+                        <div class="val-content">
+                          1600 x 3461
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1018,35 +1133,40 @@ onUnmounted(() => {
               </div>
 
               <div class="filter-bar">
-                <input placeholder="过滤" />
+                <input placeholder="过滤">
                 <span class="filter-opt">:hov</span>
                 <span class="filter-opt">.cls</span>
                 <span class="filter-opt">+</span>
               </div>
 
               <div
-                class="style-rule"
                 v-for="(rule, idx) in cssRules"
                 :key="idx"
+                class="style-rule"
               >
-                <div class="selector">{{ rule.selector }} {</div>
+                <div class="selector">
+                  {{ rule.selector }} {
+                </div>
                 <div
-                  class="property"
                   v-for="(val, key) in rule.styles"
                   :key="key"
+                  class="property"
                 >
-                  <span class="prop-name">{{ key }}</span
-                  >: <span class="prop-val">{{ val }}</span
-                  >;
+                  <span class="prop-name">{{ key }}</span>: <span class="prop-val">{{ val }}</span>;
+                </div>
+                <div class="selector">
+                  }
                 </div>
-                <div class="selector">}</div>
               </div>
             </div>
           </div>
         </div>
 
         <!-- 3. Sources Panel -->
-        <div v-else-if="activeTab === 'sources'" class="panel sources-panel">
+        <div
+          v-else-if="activeTab === 'sources'"
+          class="panel sources-panel"
+        >
           <div class="file-navigator">
             <div class="nav-header">
               <span class="nav-tab active">Page</span>
@@ -1079,7 +1199,7 @@ onUnmounted(() => {
             </div>
             <div class="editor-content">
               <div class="line-numbers">
-                1<br />2<br />3<br />4<br />5<br />6
+                1<br>2<br>3<br>4<br>5<br>6
               </div>
               <div class="code-text">
                 <pre>{{ fileContent }}</pre>
@@ -1091,14 +1211,19 @@ onUnmounted(() => {
               <div class="section-title">
                 <span class="arrow">▼</span> Watch
               </div>
-              <div class="section-content empty">No watch expressions</div>
+              <div class="section-content empty">
+                No watch expressions
+              </div>
             </div>
             <div class="debug-section">
               <div class="section-title">
                 <span class="arrow">▼</span> Breakpoints
               </div>
               <div class="section-content">
-                <label><input type="checkbox" checked /> main.js:12</label>
+                <label><input
+                  type="checkbox"
+                  checked
+                > main.js:12</label>
               </div>
             </div>
             <div class="debug-section">
@@ -1110,10 +1235,15 @@ onUnmounted(() => {
         </div>
 
         <!-- 4. Network Panel -->
-        <div v-else-if="activeTab === 'network'" class="panel network-panel">
+        <div
+          v-else-if="activeTab === 'network'"
+          class="panel network-panel"
+        >
           <div class="network-toolbar">
-            <div class="record-icon">🔴</div>
-            <div class="separator"></div>
+            <div class="record-icon">
+              🔴
+            </div>
+            <div class="separator" />
             <span class="filter-btn active">All</span>
             <span class="filter-btn">Fetch/XHR</span>
             <span class="filter-btn">JS</span>
@@ -1123,28 +1253,50 @@ onUnmounted(() => {
           <div class="network-split-view">
             <div class="network-grid">
               <div class="network-grid-header">
-                <div class="col name">Name</div>
-                <div class="col status">Status</div>
-                <div class="col type">Type</div>
-                <div class="col size">Size</div>
-                <div class="col time">Time</div>
-                <div class="col waterfall">Waterfall</div>
+                <div class="col name">
+                  Name
+                </div>
+                <div class="col status">
+                  Status
+                </div>
+                <div class="col type">
+                  Type
+                </div>
+                <div class="col size">
+                  Size
+                </div>
+                <div class="col time">
+                  Time
+                </div>
+                <div class="col waterfall">
+                  Waterfall
+                </div>
               </div>
               <div class="network-rows">
                 <div
-                  class="network-row"
                   v-for="(req, idx) in networkRequests"
                   :key="idx"
+                  class="network-row"
                   :class="{
                     selected: selectedRequest && selectedRequest.id === req.id
                   }"
                   @click="selectRequest(req)"
                 >
-                  <div class="col name">{{ req.name }}</div>
-                  <div class="col status">{{ req.status }}</div>
-                  <div class="col type">{{ req.type }}</div>
-                  <div class="col size">{{ req.size }}</div>
-                  <div class="col time">{{ req.time }}</div>
+                  <div class="col name">
+                    {{ req.name }}
+                  </div>
+                  <div class="col status">
+                    {{ req.status }}
+                  </div>
+                  <div class="col type">
+                    {{ req.type }}
+                  </div>
+                  <div class="col size">
+                    {{ req.size }}
+                  </div>
+                  <div class="col time">
+                    {{ req.time }}
+                  </div>
                   <div class="col waterfall">
                     <div
                       class="waterfall-bar"
@@ -1152,45 +1304,46 @@ onUnmounted(() => {
                         width: req.waterfall + 'px',
                         left: idx * 10 + 'px'
                       }"
-                    ></div>
+                    />
                   </div>
                 </div>
               </div>
             </div>
             <!-- Network Detail Panel (Right Side) -->
-            <div class="network-detail" v-if="selectedRequest">
+            <div
+              v-if="selectedRequest"
+              class="network-detail"
+            >
               <div class="detail-header">
                 <span
                   class="detail-title"
                   :class="{ active: activeDetailTab === 'headers' }"
                   @click="activeDetailTab = 'headers'"
-                  >Headers</span
-                >
+                >Headers</span>
                 <span
                   class="detail-title"
                   :class="{ active: activeDetailTab === 'preview' }"
                   @click="activeDetailTab = 'preview'"
-                  >Preview</span
-                >
+                >Preview</span>
                 <span
                   class="detail-title"
                   :class="{ active: activeDetailTab === 'response' }"
                   @click="activeDetailTab = 'response'"
-                  >Response</span
-                >
-                <span class="close-detail" @click="selectedRequest = null"
-                  >×</span
-                >
+                >Response</span>
+                <span
+                  class="close-detail"
+                  @click="selectedRequest = null"
+                >×</span>
               </div>
               <div class="detail-content">
                 <div v-if="activeDetailTab === 'headers'">
                   <div class="detail-section">
-                    <div class="section-label">General</div>
+                    <div class="section-label">
+                      General
+                    </div>
                     <div class="detail-row">
                       <span class="key">Request URL:</span>
-                      <span class="val"
-                        >http://localhost:3000/{{ selectedRequest.name }}</span
-                      >
+                      <span class="val">http://localhost:3000/{{ selectedRequest.name }}</span>
                     </div>
                     <div class="detail-row">
                       <span class="key">Request Method:</span>
@@ -1198,31 +1351,33 @@ onUnmounted(() => {
                     </div>
                     <div class="detail-row">
                       <span class="key">Status Code:</span>
-                      <span class="val status-code"
-                        >{{ selectedRequest.status }} OK</span
-                      >
+                      <span class="val status-code">{{ selectedRequest.status }} OK</span>
                     </div>
                   </div>
                   <div class="detail-section">
-                    <div class="section-label">Response Headers</div>
+                    <div class="section-label">
+                      Response Headers
+                    </div>
                     <div
-                      class="detail-row"
                       v-for="(val, key) in selectedRequest.headers"
                       :key="key"
+                      class="detail-row"
                     >
                       <span class="key">{{ key }}:</span>
                       <span class="val">{{ val }}</span>
                     </div>
                   </div>
                   <div
-                    class="detail-section"
                     v-if="selectedRequest.requestHeaders"
+                    class="detail-section"
                   >
-                    <div class="section-label">Request Headers</div>
+                    <div class="section-label">
+                      Request Headers
+                    </div>
                     <div
-                      class="detail-row"
                       v-for="(val, key) in selectedRequest.requestHeaders"
                       :key="key"
+                      class="detail-row"
                     >
                       <span class="key">{{ key }}:</span>
                       <span class="val">{{ val }}</span>
@@ -1232,7 +1387,9 @@ onUnmounted(() => {
 
                 <div v-if="activeDetailTab === 'preview'">
                   <div class="detail-section">
-                    <div class="section-label">Preview</div>
+                    <div class="section-label">
+                      Preview
+                    </div>
                     <div class="preview-content">
                       {{ selectedRequest.preview }}
                     </div>
@@ -1241,7 +1398,9 @@ onUnmounted(() => {
 
                 <div v-if="activeDetailTab === 'response'">
                   <div class="detail-section">
-                    <div class="section-label">Response</div>
+                    <div class="section-label">
+                      Response
+                    </div>
                     <div class="preview-content">
                       {{ selectedRequest.preview }}
                     </div>
@@ -1259,16 +1418,26 @@ onUnmounted(() => {
         >
           <div class="storage-sidebar">
             <div class="sidebar-section">
-              <div class="section-title">Application</div>
-              <div class="section-item">Manifest</div>
-              <div class="section-item">Service Workers</div>
+              <div class="section-title">
+                Application
+              </div>
+              <div class="section-item">
+                Manifest
+              </div>
+              <div class="section-item">
+                Service Workers
+              </div>
             </div>
             <div class="sidebar-section">
-              <div class="section-title">Storage</div>
+              <div class="section-title">
+                Storage
+              </div>
               <div class="section-item active">
                 <span class="arrow">▼</span> Local Storage
               </div>
-              <div class="section-item indent">http://localhost</div>
+              <div class="section-item indent">
+                http://localhost
+              </div>
               <div class="section-item">
                 <span class="arrow">▶</span> Session Storage
               </div>
@@ -1280,16 +1449,24 @@ onUnmounted(() => {
           <div class="storage-content">
             <div class="storage-table">
               <div class="table-header">
-                <div class="col key">Key</div>
-                <div class="col value">Value</div>
+                <div class="col key">
+                  Key
+                </div>
+                <div class="col value">
+                  Value
+                </div>
               </div>
               <div
-                class="table-row"
                 v-for="(item, idx) in localStorageData"
                 :key="idx"
+                class="table-row"
               >
-                <div class="col key">{{ item.key }}</div>
-                <div class="col value">{{ item.value }}</div>
+                <div class="col key">
+                  {{ item.key }}
+                </div>
+                <div class="col value">
+                  {{ item.value }}
+                </div>
               </div>
             </div>
           </div>
@@ -1297,7 +1474,10 @@ onUnmounted(() => {
       </div>
 
       <!-- Info Bar Overlay -->
-      <div class="info-bar" v-if="hoverInfo">
+      <div
+        v-if="hoverInfo"
+        class="info-bar"
+      >
         <span class="info-icon">💡</span> {{ hoverInfo }}
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue
index 22b8b31..d0f3388 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/BrowserDevToolsLiveDemo.vue
@@ -182,21 +182,29 @@ const selectNode = (node) => {
     <div class="virtual-page-container">
       <div class="virtual-browser-bar">
         <div class="dots">
-          <span class="dot red"></span>
-          <span class="dot yellow"></span>
-          <span class="dot green"></span>
+          <span class="dot red" />
+          <span class="dot yellow" />
+          <span class="dot green" />
+        </div>
+        <div class="address-bar">
+          http://localhost:3000/demo
         </div>
-        <div class="address-bar">http://localhost:3000/demo</div>
       </div>
       <div
         class="virtual-page-content"
         :style="liveStyles.container"
         @click.self="selectNode('container')"
       >
-        <h1 :style="liveStyles.h1" @click.stop="selectNode('h1')">
+        <h1
+          :style="liveStyles.h1"
+          @click.stop="selectNode('h1')"
+        >
           {{ liveContent.h1 }}
         </h1>
-        <button :style="liveStyles.button" @click.stop="selectNode('button')">
+        <button
+          :style="liveStyles.button"
+          @click.stop="selectNode('button')"
+        >
           {{ liveContent.button }}
         </button>
       </div>
@@ -214,20 +222,33 @@ const selectNode = (node) => {
             class="icon-btn element-picker"
             title="选择页面中的元素以进行检查"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="#6e6e6e"
+            >
               <path
                 d="M4 4h9v2H4V4zm0 4h5v2H4V8zm0 4h5v2H4v-2zm12-5l-4 4h3v4h2v-4h3l-4-4z"
               />
             </svg>
           </div>
-          <div class="icon-btn device-toggle" title="切换设备工具栏">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="#6e6e6e">
+          <div
+            class="icon-btn device-toggle"
+            title="切换设备工具栏"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="#6e6e6e"
+            >
               <path
                 d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"
               />
             </svg>
           </div>
-          <div class="separator"></div>
+          <div class="separator" />
           <div class="tabs">
             <div
               v-for="tab in tabs"
@@ -241,81 +262,87 @@ const selectNode = (node) => {
           </div>
         </div>
         <div class="header-right">
-          <div class="icon-btn settings">⚙️</div>
-          <div class="icon-btn close">×</div>
+          <div class="icon-btn settings">
+            ⚙️
+          </div>
+          <div class="icon-btn close">
+            ×
+          </div>
         </div>
       </div>
 
       <!-- Body -->
       <div class="devtools-body">
         <!-- Elements Panel -->
-        <div v-if="activeTab === 'elements'" class="panel elements-panel">
+        <div
+          v-if="activeTab === 'elements'"
+          class="panel elements-panel"
+        >
           <div class="dom-tree-panel">
             <div class="dom-tree-content">
               <div
                 class="dom-node"
-                @click="selectNode('container')"
                 :class="{ selected: selectedNode === 'container' }"
+                @click="selectNode('container')"
               >
                 <div class="line-content">
                   <span class="arrow expanded">▼</span>
                   <span class="tag-name">div</span>
-                  <span class="attr-name">class</span>=<span class="attr-val"
-                    >"virtual-page-content"</span
-                  >
-                  <span class="node-trail" v-if="selectedNode === 'container'"
-                    >== $0</span
-                  >
+                  <span class="attr-name">class</span>=<span class="attr-val">"virtual-page-content"</span>
+                  <span
+                    v-if="selectedNode === 'container'"
+                    class="node-trail"
+                  >== $0</span>
                 </div>
                 <div class="children">
                   <div
                     class="dom-node"
-                    @click.stop="selectNode('h1')"
                     :class="{ selected: selectedNode === 'h1' }"
+                    @click.stop="selectNode('h1')"
                   >
                     <div class="line-content">
-                      <span class="indent"></span>
+                      <span class="indent" />
                       <span class="tag-name">h1</span>
-                      <span class="node-trail" v-if="selectedNode === 'h1'"
-                        >== $0</span
-                      >
+                      <span
+                        v-if="selectedNode === 'h1'"
+                        class="node-trail"
+                      >== $0</span>
                     </div>
                     <div class="line-content">
-                      <span class="indent"></span>
+                      <span class="indent" />
                       <input
                         v-model="liveContent.h1"
                         class="dom-text-input"
                         @click.stop="selectNode('h1')"
-                      />
+                      >
                     </div>
                     <div class="line-content">
-                      <span class="indent"></span
-                      ><span class="tag-name">/h1</span>
+                      <span class="indent" /><span class="tag-name">/h1</span>
                     </div>
                   </div>
                   <div
                     class="dom-node"
-                    @click.stop="selectNode('button')"
                     :class="{ selected: selectedNode === 'button' }"
+                    @click.stop="selectNode('button')"
                   >
                     <div class="line-content">
-                      <span class="indent"></span>
+                      <span class="indent" />
                       <span class="tag-name">button</span>
-                      <span class="node-trail" v-if="selectedNode === 'button'"
-                        >== $0</span
-                      >
+                      <span
+                        v-if="selectedNode === 'button'"
+                        class="node-trail"
+                      >== $0</span>
                     </div>
                     <div class="line-content">
-                      <span class="indent"></span>
+                      <span class="indent" />
                       <input
                         v-model="liveContent.button"
                         class="dom-text-input"
                         @click.stop="selectNode('button')"
-                      />
+                      >
                     </div>
                     <div class="line-content">
-                      <span class="indent"></span
-                      ><span class="tag-name">/button</span>
+                      <span class="indent" /><span class="tag-name">/button</span>
                     </div>
                   </div>
                 </div>
@@ -333,15 +360,31 @@ const selectNode = (node) => {
           <!-- Interactive Styles Panel -->
           <div class="styles-panel">
             <div class="styles-tabs">
-              <div class="style-tab active">样式 (Styles)</div>
-              <div class="style-tab">计算 (Computed)</div>
+              <div class="style-tab active">
+                样式 (Styles)
+              </div>
+              <div class="style-tab">
+                计算 (Computed)
+              </div>
             </div>
             <div class="styles-content">
               <!-- Preset Selector -->
-              <div class="style-section" v-if="availablePresets.length > 0">
-                <div class="style-section-title">✨ 快速预设 (Presets)</div>
-                <select class="preset-select" @change="applyPreset">
-                  <option value="" disabled selected>
+              <div
+                v-if="availablePresets.length > 0"
+                class="style-section"
+              >
+                <div class="style-section-title">
+                  ✨ 快速预设 (Presets)
+                </div>
+                <select
+                  class="preset-select"
+                  @change="applyPreset"
+                >
+                  <option
+                    value=""
+                    disabled
+                    selected
+                  >
                     选择一种风格 (Select Preset)...
                   </option>
                   <option
@@ -356,29 +399,35 @@ const selectNode = (node) => {
 
               <!-- CSS Properties -->
               <div class="style-rule">
-                <div class="selector">element.style {</div>
+                <div class="selector">
+                  element.style {
+                </div>
                 <div
-                  class="property"
                   v-for="(val, key) in currentStyles"
                   :key="key"
+                  class="property"
                 >
-                  <span class="prop-name">{{ key }}</span
-                  >:
+                  <span class="prop-name">{{ key }}</span>:
                   <input
                     v-model="liveStyles[selectedNode][key]"
                     class="style-input"
-                  />
+                  >
                   ;
                 </div>
-                <div class="selector">}</div>
+                <div class="selector">
+                  }
+                </div>
               </div>
-              <div class="style-add-hint"></div>
+              <div class="style-add-hint" />
             </div>
           </div>
         </div>
 
         <!-- Other Panels (Simplified placeholders) -->
-        <div v-else class="panel placeholder-panel">
+        <div
+          v-else
+          class="panel placeholder-panel"
+        >
           <div class="placeholder-text">
             此演示主要展示 Elements 面板的实时编辑功能。请切换回 "元素" 面板。
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsApplicationDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsApplicationDemo.vue
index effb8c5..49efa88 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsApplicationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsApplicationDemo.vue
@@ -59,11 +59,21 @@ const clearAll = () => {
 </script>
 
 <template>
-  <el-card class="app-demo" shadow="hover">
+  <el-card
+    class="app-demo"
+    shadow="hover"
+  >
     <template #header>
       <div class="header">
         <span class="title">Application (应用面板)</span>
-        <el-button type="danger" size="small" icon="Delete" @click="clearAll">Clear All</el-button>
+        <el-button
+          type="danger"
+          size="small"
+          icon="Delete"
+          @click="clearAll"
+        >
+          Clear All
+        </el-button>
       </div>
     </template>
 
@@ -94,26 +104,54 @@ const clearAll = () => {
 
       <div class="content">
         <div class="toolbar">
-            <el-input 
-                v-model="newEntry.key" 
-                placeholder="Key" 
-                size="small" 
-                style="width: 120px" 
-            />
-            <el-input 
-                v-model="newEntry.value" 
-                placeholder="Value" 
-                size="small" 
-                style="width: 120px" 
-            />
-            <el-button type="primary" size="small" @click="addEntry">Add</el-button>
+          <el-input 
+            v-model="newEntry.key" 
+            placeholder="Key" 
+            size="small" 
+            style="width: 120px" 
+          />
+          <el-input 
+            v-model="newEntry.value" 
+            placeholder="Value" 
+            size="small" 
+            style="width: 120px" 
+          />
+          <el-button
+            type="primary"
+            size="small"
+            @click="addEntry"
+          >
+            Add
+          </el-button>
         </div>
 
-        <el-table :data="storageData[activeTab]" style="width: 100%" height="250" border>
-          <el-table-column prop="key" label="Key" width="120" />
-          <el-table-column prop="value" label="Value" min-width="150" />
-          <el-table-column v-if="activeTab === 'cookies'" prop="domain" label="Domain" width="110" />
-          <el-table-column label="Action" width="70" align="center">
+        <el-table
+          :data="storageData[activeTab]"
+          style="width: 100%"
+          height="250"
+          border
+        >
+          <el-table-column
+            prop="key"
+            label="Key"
+            width="120"
+          />
+          <el-table-column
+            prop="value"
+            label="Value"
+            min-width="150"
+          />
+          <el-table-column
+            v-if="activeTab === 'cookies'"
+            prop="domain"
+            label="Domain"
+            width="110"
+          />
+          <el-table-column
+            label="Action"
+            width="70"
+            align="center"
+          >
             <template #default="scope">
               <el-button 
                 type="danger" 
@@ -126,14 +164,23 @@ const clearAll = () => {
           </el-table-column>
         </el-table>
         
-        <div class="info-bar" v-if="activeTab === 'local'">
-            持久化存储：即便关闭浏览器，数据也会保留。
+        <div
+          v-if="activeTab === 'local'"
+          class="info-bar"
+        >
+          持久化存储：即便关闭浏览器，数据也会保留。
         </div>
-        <div class="info-bar" v-else-if="activeTab === 'session'">
-            临时存储：关闭标签页后，数据会被清空。
+        <div
+          v-else-if="activeTab === 'session'"
+          class="info-bar"
+        >
+          临时存储：关闭标签页后，数据会被清空。
         </div>
-        <div class="info-bar" v-else>
-            Cookies：通常用于身份验证，会随请求发送给服务器。
+        <div
+          v-else
+          class="info-bar"
+        >
+          Cookies：通常用于身份验证，会随请求发送给服务器。
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsConsoleDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsConsoleDemo.vue
index 2997578..4f7e502 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsConsoleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsConsoleDemo.vue
@@ -90,20 +90,49 @@ const runShortcut = (cmd) => {
 </script>
 
 <template>
-  <el-card class="console-demo" shadow="hover">
+  <el-card
+    class="console-demo"
+    shadow="hover"
+  >
     <template #header>
       <div class="header">
         <span class="title">Console (控制台)</span>
-        <el-button size="small" @click="clearConsole" icon="Delete" circle title="Clear console" />
+        <el-button
+          size="small"
+          icon="Delete"
+          circle
+          title="Clear console"
+          @click="clearConsole"
+        />
       </div>
     </template>
     
-    <div class="console-body" ref="consoleRef">
-      <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
-        <span class="icon" v-if="log.type === 'error'">❌</span>
-        <span class="icon" v-else-if="log.type === 'warn'">⚠️</span>
-        <span class="icon" v-else-if="log.type === 'info'">ℹ️</span>
-        <span class="icon" v-else-if="log.type === 'result'">⬅️</span>
+    <div
+      ref="consoleRef"
+      class="console-body"
+    >
+      <div
+        v-for="(log, index) in logs"
+        :key="index"
+        class="log-item"
+        :class="log.type"
+      >
+        <span
+          v-if="log.type === 'error'"
+          class="icon"
+        >❌</span>
+        <span
+          v-else-if="log.type === 'warn'"
+          class="icon"
+        >⚠️</span>
+        <span
+          v-else-if="log.type === 'info'"
+          class="icon"
+        >ℹ️</span>
+        <span
+          v-else-if="log.type === 'result'"
+          class="icon"
+        >⬅️</span>
         <span class="content">{{ log.message }}</span>
       </div>
     </div>
@@ -114,7 +143,9 @@ const runShortcut = (cmd) => {
         placeholder="输入 JS 代码，按回车执行..."
         @keyup.enter="executeCommand"
       >
-        <template #prepend>></template>
+        <template #prepend>
+          >
+        </template>
       </el-input>
     </div>
     
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsElementsDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsElementsDemo.vue
index 1abcda6..f314ed1 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsElementsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsElementsDemo.vue
@@ -35,7 +35,10 @@ const updateStyle = (prop, value) => {
 </script>
 
 <template>
-  <el-card class="elements-demo" shadow="hover">
+  <el-card
+    class="elements-demo"
+    shadow="hover"
+  >
     <template #header>
       <div class="header">
         <span class="title">Elements (元素面板)</span>
@@ -45,7 +48,9 @@ const updateStyle = (prop, value) => {
     <div class="devtools-layout">
       <!-- Left: DOM Tree -->
       <div class="panel dom-panel">
-        <div class="panel-header">DOM Tree</div>
+        <div class="panel-header">
+          DOM Tree
+        </div>
         <div class="dom-content">
           <div class="dom-line">
             <span class="tag">&lt;div</span> <span class="attr">id</span>="app" <span class="attr">class</span>="container"<span class="tag">&gt;</span>
@@ -79,18 +84,24 @@ const updateStyle = (prop, value) => {
 
       <!-- Right: Styles -->
       <div class="panel style-panel">
-        <div class="panel-header">Styles ({{ selectedElement === 'box' ? '.box' : '.text' }})</div>
+        <div class="panel-header">
+          Styles ({{ selectedElement === 'box' ? '.box' : '.text' }})
+        </div>
         <div class="style-content">
           <div class="css-rule">
             <span class="selector">{{ selectedElement === 'box' ? '.box' : '.text' }}</span> {
-            <div v-for="(value, prop) in styles[selectedElement]" :key="prop" class="css-prop">
+            <div
+              v-for="(value, prop) in styles[selectedElement]"
+              :key="prop"
+              class="css-prop"
+            >
               <span class="prop-name">{{ prop }}</span>: 
               <span class="prop-value">
-                  <!-- Simple editable input simulation -->
-                  <input 
-                    v-model="styles[selectedElement][prop]" 
-                    class="style-input"
-                  />
+                <!-- Simple editable input simulation -->
+                <input 
+                  v-model="styles[selectedElement][prop]" 
+                  class="style-input"
+                >
               </span>;
             </div>
             }
@@ -101,7 +112,9 @@ const updateStyle = (prop, value) => {
 
     <!-- Preview Area -->
     <div class="preview-area">
-      <div class="preview-label">页面预览 (Page Preview)</div>
+      <div class="preview-label">
+        页面预览 (Page Preview)
+      </div>
       <div class="preview-content">
         <div :style="styles.box">
           <span :style="styles.text">Hello DevTools</span>
@@ -110,7 +123,7 @@ const updateStyle = (prop, value) => {
     </div>
     
     <div class="footer-tip">
-        点击左侧 DOM 树中的元素，在右侧 Styles 面板修改样式，下方预览会实时更新。
+      点击左侧 DOM 树中的元素，在右侧 Styles 面板修改样式，下方预览会实时更新。
     </div>
   </el-card>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsNetworkDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsNetworkDemo.vue
index 0a794b3..c021825 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsNetworkDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsNetworkDemo.vue
@@ -60,13 +60,30 @@ const addFailedRequest = () => {
 </script>
 
 <template>
-  <el-card class="network-demo" shadow="hover">
+  <el-card
+    class="network-demo"
+    shadow="hover"
+  >
     <template #header>
       <div class="header">
         <span class="title">Network (网络面板)</span>
         <div class="actions">
-          <el-button type="primary" size="small" icon="Refresh" @click="refresh">刷新页面</el-button>
-          <el-button type="danger" size="small" icon="Warning" @click="addFailedRequest">模拟请求失败</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            icon="Refresh"
+            @click="refresh"
+          >
+            刷新页面
+          </el-button>
+          <el-button
+            type="danger"
+            size="small"
+            icon="Warning"
+            @click="addFailedRequest"
+          >
+            模拟请求失败
+          </el-button>
         </div>
       </div>
     </template>
@@ -75,37 +92,68 @@ const addFailedRequest = () => {
       :data="requests" 
       style="width: 100%" 
       height="300" 
-      @row-click="showDetails"
       class="network-table"
+      @row-click="showDetails"
     >
-      <el-table-column prop="name" label="Name" min-width="120">
-          <template #default="scope">
-              <span :class="{ error: scope.row.status >= 400 }">{{ scope.row.name }}</span>
-          </template>
-      </el-table-column>
-      <el-table-column prop="status" label="Status" width="80">
+      <el-table-column
+        prop="name"
+        label="Name"
+        min-width="120"
+      >
         <template #default="scope">
-          <el-tag :type="scope.row.status >= 400 ? 'danger' : 'success'" size="small">
+          <span :class="{ error: scope.row.status >= 400 }">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="Status"
+        width="80"
+      >
+        <template #default="scope">
+          <el-tag
+            :type="scope.row.status >= 400 ? 'danger' : 'success'"
+            size="small"
+          >
             {{ scope.row.status }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="type" label="Type" width="90" />
-      <el-table-column prop="size" label="Size" width="80" />
-      <el-table-column prop="time" label="Time" width="80">
-          <template #default="scope">{{ scope.row.time }}ms</template>
+      <el-table-column
+        prop="type"
+        label="Type"
+        width="90"
+      />
+      <el-table-column
+        prop="size"
+        label="Size"
+        width="80"
+      />
+      <el-table-column
+        prop="time"
+        label="Time"
+        width="80"
+      >
+        <template #default="scope">
+          {{ scope.row.time }}ms
+        </template>
       </el-table-column>
-      <el-table-column label="Waterfall" min-width="150">
+      <el-table-column
+        label="Waterfall"
+        min-width="150"
+      >
         <template #default="scope">
           <div class="timeline-container">
-            <div class="timeline-bar" :style="getTimelineStyle(scope.row)"></div>
+            <div
+              class="timeline-bar"
+              :style="getTimelineStyle(scope.row)"
+            />
           </div>
         </template>
       </el-table-column>
     </el-table>
 
     <div class="footer-tip">
-        💡 点击某一行可以查看请求详情
+      💡 点击某一行可以查看请求详情
     </div>
 
     <!-- Detail Drawer -->
@@ -127,30 +175,32 @@ const addFailedRequest = () => {
               <p><strong>Status Code:</strong> {{ selectedRequest.status }}</p>
             </div>
             <div class="detail-section">
-                <h4>Response Headers</h4>
-                <p><strong>Content-Type:</strong> {{ selectedRequest.type === 'document' ? 'text/html' : selectedRequest.type === 'fetch' ? 'application/json' : 'text/plain' }}</p>
-                <p><strong>Cache-Control:</strong> max-age=3600</p>
+              <h4>Response Headers</h4>
+              <p><strong>Content-Type:</strong> {{ selectedRequest.type === 'document' ? 'text/html' : selectedRequest.type === 'fetch' ? 'application/json' : 'text/plain' }}</p>
+              <p><strong>Cache-Control:</strong> max-age=3600</p>
             </div>
           </el-tab-pane>
           <el-tab-pane label="Preview">
             <div class="preview-box">
-                <div v-if="selectedRequest.status >= 400">
-                    ⚠️ Failed to load response data
-                </div>
-                <div v-else-if="selectedRequest.type === 'fetch' || selectedRequest.type === 'xhr'">
-                    <pre>{ "id": 123, "data": "Sample API response" }</pre>
-                </div>
-                <div v-else-if="selectedRequest.type === 'png' || selectedRequest.type === 'jpeg'">
-                    <div class="fake-image">Image Preview</div>
-                </div>
-                <div v-else>
-                    <pre>&lt;html&gt;...&lt;/html&gt;</pre>
+              <div v-if="selectedRequest.status >= 400">
+                ⚠️ Failed to load response data
+              </div>
+              <div v-else-if="selectedRequest.type === 'fetch' || selectedRequest.type === 'xhr'">
+                <pre>{ "id": 123, "data": "Sample API response" }</pre>
+              </div>
+              <div v-else-if="selectedRequest.type === 'png' || selectedRequest.type === 'jpeg'">
+                <div class="fake-image">
+                  Image Preview
                 </div>
+              </div>
+              <div v-else>
+                <pre>&lt;html&gt;...&lt;/html&gt;</pre>
+              </div>
             </div>
           </el-tab-pane>
           <el-tab-pane label="Response">
             <div class="response-raw">
-                (Raw response data would appear here)
+              (Raw response data would appear here)
             </div>
           </el-tab-pane>
         </el-tabs>
diff --git a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsSourcesDemo.vue b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsSourcesDemo.vue
index ac10579..ec005aa 100644
--- a/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsSourcesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-devtools/DevToolsSourcesDemo.vue
@@ -235,16 +235,42 @@ const flatNext = () => {
 </script>
 
 <template>
-  <el-card class="sources-demo" shadow="hover">
+  <el-card
+    class="sources-demo"
+    shadow="hover"
+  >
     <template #header>
       <div class="header">
         <span class="title">Sources (源代码调试)</span>
         <div class="controls">
-            <el-button-group>
-                <el-button type="success" size="small" icon="VideoPlay" @click="flatRun" :disabled="isRunning && demoState.line !== -1 && !breakpoints.includes(demoState.line)">Run</el-button>
-                <el-button type="primary" size="small" icon="VideoPause" @click="flatResume" :disabled="!breakpoints.includes(demoState.line)">Resume</el-button>
-                <el-button type="info" size="small" icon="ArrowRight" @click="flatNext">Step</el-button>
-            </el-button-group>
+          <el-button-group>
+            <el-button
+              type="success"
+              size="small"
+              icon="VideoPlay"
+              :disabled="isRunning && demoState.line !== -1 && !breakpoints.includes(demoState.line)"
+              @click="flatRun"
+            >
+              Run
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              icon="VideoPause"
+              :disabled="!breakpoints.includes(demoState.line)"
+              @click="flatResume"
+            >
+              Resume
+            </el-button>
+            <el-button
+              type="info"
+              size="small"
+              icon="ArrowRight"
+              @click="flatNext"
+            >
+              Step
+            </el-button>
+          </el-button-group>
         </div>
       </div>
     </template>
@@ -261,38 +287,50 @@ const flatNext = () => {
           }"
           @click="toggleBreakpoint(index)"
         >
-          <div class="line-num">{{ index + 1 }}</div>
-          <div class="code-text">{{ line }}</div>
+          <div class="line-num">
+            {{ index + 1 }}
+          </div>
+          <div class="code-text">
+            {{ line }}
+          </div>
         </div>
       </div>
 
       <div class="sidebar">
         <div class="section">
-            <div class="section-title">Scope (Variables)</div>
-            <div class="var-list">
-                <div class="var-item">
-                    <span class="name">count:</span>
-                    <span class="value">{{ demoState.vars.count !== undefined ? demoState.vars.count : 'undefined' }}</span>
-                </div>
-                <div class="var-item">
-                    <span class="name">max:</span>
-                    <span class="value">{{ demoState.vars.max !== undefined ? demoState.vars.max : 'undefined' }}</span>
-                </div>
+          <div class="section-title">
+            Scope (Variables)
+          </div>
+          <div class="var-list">
+            <div class="var-item">
+              <span class="name">count:</span>
+              <span class="value">{{ demoState.vars.count !== undefined ? demoState.vars.count : 'undefined' }}</span>
             </div>
+            <div class="var-item">
+              <span class="name">max:</span>
+              <span class="value">{{ demoState.vars.max !== undefined ? demoState.vars.max : 'undefined' }}</span>
+            </div>
+          </div>
         </div>
         <div class="section">
-            <div class="section-title">Console Output</div>
-            <div class="output-list">
-                <div v-for="(log, i) in demoState.output" :key="i" class="log-line">
-                    {{ log }}
-                </div>
+          <div class="section-title">
+            Console Output
+          </div>
+          <div class="output-list">
+            <div
+              v-for="(log, i) in demoState.output"
+              :key="i"
+              class="log-line"
+            >
+              {{ log }}
             </div>
+          </div>
         </div>
       </div>
     </div>
     
     <div class="footer-tip">
-        点击行号设置断点。点击 Run 开始执行，代码将在断点处暂停。
+      点击行号设置断点。点击 Run 开始执行，代码将在断点处暂停。
     </div>
   </el-card>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
index 98a38ee..6bb9e0b 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/CompositeDemo.vue
@@ -28,7 +28,9 @@
 
       <div class="composite-result">
         <div class="result-box">
-          <div class="result-title">合成结果</div>
+          <div class="result-title">
+            合成结果
+          </div>
           <div class="result-display">
             <div
               v-for="layer in layers"
@@ -44,7 +46,10 @@
       </div>
 
       <div class="control-panel">
-        <button class="action-btn" @click="toggleAnimation">
+        <button
+          class="action-btn"
+          @click="toggleAnimation"
+        >
           {{ isAnimating ? '⏸ 暂停动画' : '▶️ 开始动画' }}
         </button>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
index 8bba99f..b207bd0 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/DomToRenderTreeDemo.vue
@@ -13,7 +13,9 @@
     <div class="demo-content">
       <div class="trees-container">
         <div class="tree-section">
-          <div class="tree-title">DOM树</div>
+          <div class="tree-title">
+            DOM树
+          </div>
           <div class="tree dom-tree">
             <div class="tree-node">
               <span class="node-tag">&lt;html&gt;</span>
@@ -47,10 +49,14 @@
           </div>
         </div>
 
-        <div class="plus-sign">+</div>
+        <div class="plus-sign">
+          +
+        </div>
 
         <div class="tree-section">
-          <div class="tree-title">CSSOM树</div>
+          <div class="tree-title">
+            CSSOM树
+          </div>
           <div class="tree cssom-tree">
             <div class="tree-node">
               <span class="node-tag">body</span>
@@ -84,10 +90,14 @@
           </div>
         </div>
 
-        <div class="equal-sign">=</div>
+        <div class="equal-sign">
+          =
+        </div>
 
         <div class="tree-section">
-          <div class="tree-title">渲染树</div>
+          <div class="tree-title">
+            渲染树
+          </div>
           <div class="tree render-tree">
             <div class="tree-node">
               <span class="node-tag render-node">div</span>
@@ -103,11 +113,11 @@
 
       <div class="legend">
         <div class="legend-item">
-          <span class="legend-dot highlight-node"></span>
+          <span class="legend-dot highlight-node" />
           <span class="legend-text">可见节点</span>
         </div>
         <div class="legend-item">
-          <span class="legend-dot hidden-node"></span>
+          <span class="legend-dot hidden-node" />
           <span class="legend-text">不可见节点（不包含在渲染树中）</span>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
index 06e82b4..0179429 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/LayoutReflowDemo.vue
@@ -10,13 +10,25 @@
       <div class="control-panel">
         <div class="control-group">
           <label>选择要修改的属性：</label>
-          <select v-model="selectedProperty" @change="resetDemo">
-            <option value="transform">transform: translateY() (只触发合成)</option>
-            <option value="width">width (触发重排)</option>
-            <option value="marginLeft">margin-left (触发重排)</option>
+          <select
+            v-model="selectedProperty"
+            @change="resetDemo"
+          >
+            <option value="transform">
+              transform: translateY() (只触发合成)
+            </option>
+            <option value="width">
+              width (触发重排)
+            </option>
+            <option value="marginLeft">
+              margin-left (触发重排)
+            </option>
           </select>
         </div>
-        <button class="toggle-btn" @click="toggleAnimation">
+        <button
+          class="toggle-btn"
+          @click="toggleAnimation"
+        >
           {{ isAnimating ? '停止动画' : '开始动画' }}
         </button>
       </div>
@@ -38,11 +50,17 @@
         <div class="stats-panel">
           <div class="stat-item">
             <span class="stat-label">触发阶段：</span>
-            <span class="stat-value" :class="statClass">{{ currentStage }}</span>
+            <span
+              class="stat-value"
+              :class="statClass"
+            >{{ currentStage }}</span>
           </div>
           <div class="stat-item">
             <span class="stat-label">性能影响：</span>
-            <span class="stat-value" :class="performanceClass">{{ performanceImpact }}</span>
+            <span
+              class="stat-value"
+              :class="performanceClass"
+            >{{ performanceImpact }}</span>
           </div>
           <div class="stat-item">
             <span class="stat-label">是否影响其他元素：</span>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
index 6980dd6..b2665ef 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/MacroMicroTaskDemo.vue
@@ -14,19 +14,28 @@
       <div class="event-loop-flow">
         <div class="flow-container">
           <div class="flow-section main-thread">
-            <div class="section-title">主线程（执行栈）</div>
+            <div class="section-title">
+              主线程（执行栈）
+            </div>
             <div class="execution-box">
-              <div class="exec-item" :class="{ active: currentStep === 'script' }">
+              <div
+                class="exec-item"
+                :class="{ active: currentStep === 'script' }"
+              >
                 <span class="exec-label">同步代码</span>
               </div>
             </div>
           </div>
 
           <div class="flow-section task-queues">
-            <div class="section-title">任务队列</div>
+            <div class="section-title">
+              任务队列
+            </div>
             <div class="queues-container">
               <div class="queue-box micro">
-                <div class="queue-title">微任务队列（优先级高）</div>
+                <div class="queue-title">
+                  微任务队列（优先级高）
+                </div>
                 <div class="queue-items">
                   <div
                     v-for="task in microTasks"
@@ -40,7 +49,9 @@
               </div>
 
               <div class="queue-box macro">
-                <div class="queue-title">宏任务队列（优先级低）</div>
+                <div class="queue-title">
+                  宏任务队列（优先级低）
+                </div>
                 <div class="queue-items">
                   <div
                     v-for="task in macroTasks"
@@ -58,7 +69,9 @@
       </div>
 
       <div class="code-example">
-        <div class="example-title">代码示例</div>
+        <div class="example-title">
+          代码示例
+        </div>
         <pre class="code-block"><code>console.log('1')
 
 setTimeout(() => console.log('2'), 0)  // 宏任务
@@ -71,7 +84,10 @@ console.log('4')
       </div>
 
       <div class="control-panel">
-        <button class="run-btn" @click="runDemo">
+        <button
+          class="run-btn"
+          @click="runDemo"
+        >
           {{ isRunning ? '🔄 运行中...' : '▶️ 运行演示' }}
         </button>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
index 500a4a6..8a14717 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/PaintLayerDemo.vue
@@ -19,21 +19,39 @@
             <div class="layer-header">
               <span class="layer-icon">{{ layer.icon }}</span>
               <span class="layer-name">{{ layer.name }}</span>
-              <span v-if="layer.isPromoted" class="promoted-badge">GPU层</span>
+              <span
+                v-if="layer.isPromoted"
+                class="promoted-badge"
+              >GPU层</span>
             </div>
             <div class="layer-content">
-              <div v-if="layer.id === 'background'" class="background-box"></div>
-              <div v-if="layer.id === 'card'" class="card-box">
-                <div class="card-title">卡片</div>
+              <div
+                v-if="layer.id === 'background'"
+                class="background-box"
+              />
+              <div
+                v-if="layer.id === 'card'"
+                class="card-box"
+              >
+                <div class="card-title">
+                  卡片
+                </div>
+              </div>
+              <div
+                v-if="layer.id === 'button'"
+                class="button-box"
+              >
+                按钮
               </div>
-              <div v-if="layer.id === 'button'" class="button-box">按钮</div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="properties-panel">
-        <div class="panel-title">触发新层的 CSS 属性：</div>
+        <div class="panel-title">
+          触发新层的 CSS 属性：
+        </div>
         <div class="property-list">
           <div
             v-for="prop in promotedProperties"
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
index abe81ed..8472bcc 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPerformanceDemo.vue
@@ -13,7 +13,9 @@
     <div class="demo-content">
       <div class="performance-comparison">
         <div class="comparison-section">
-          <div class="section-title">❌ 不好的做法</div>
+          <div class="section-title">
+            ❌ 不好的做法
+          </div>
           <div class="code-block">
             <div class="code-line">
               <span class="code-comment">// 触发重排和重绘</span>
@@ -22,30 +24,39 @@
               <span class="code-keyword">function</span> <span class="code-func">animate</span>() {
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.width = <span class="code-string">'100px'</span>
+              <span class="code-indent" />element.style.width = <span class="code-string">'100px'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.height = <span class="code-string">'100px'</span>
+              <span class="code-indent" />element.style.height = <span class="code-string">'100px'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
+              <span class="code-indent" /><span class="code-func">requestAnimationFrame</span>(animate)
             </div>
             <div class="code-line">
               }
             </div>
           </div>
           <div class="performance-meter bad">
-            <div class="meter-label">性能开销</div>
+            <div class="meter-label">
+              性能开销
+            </div>
             <div class="meter-bar">
-              <div class="meter-fill bad-fill" style="width: 90%"></div>
+              <div
+                class="meter-fill bad-fill"
+                style="width: 90%"
+              />
             </div>
           </div>
         </div>
 
-        <div class="vs-divider">VS</div>
+        <div class="vs-divider">
+          VS
+        </div>
 
         <div class="comparison-section">
-          <div class="section-title good">✅ 优化做法</div>
+          <div class="section-title good">
+            ✅ 优化做法
+          </div>
           <div class="code-block">
             <div class="code-line">
               <span class="code-comment">/* 只触发合成 */</span>
@@ -54,26 +65,33 @@
               <span class="code-keyword">function</span> <span class="code-func">animate</span>() {
             </div>
             <div class="code-line">
-              <span class="code-indent"></span>element.style.transform = <span class="code-string">'translate3d(0,0,0)'</span>
+              <span class="code-indent" />element.style.transform = <span class="code-string">'translate3d(0,0,0)'</span>
             </div>
             <div class="code-line">
-              <span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
+              <span class="code-indent" /><span class="code-func">requestAnimationFrame</span>(animate)
             </div>
             <div class="code-line">
               }
             </div>
           </div>
           <div class="performance-meter good">
-            <div class="meter-label">性能开销</div>
+            <div class="meter-label">
+              性能开销
+            </div>
             <div class="meter-bar">
-              <div class="meter-fill good-fill" style="width: 15%"></div>
+              <div
+                class="meter-fill good-fill"
+                style="width: 15%"
+              />
             </div>
           </div>
         </div>
       </div>
 
       <div class="optimization-tips">
-        <div class="tips-title">黄金法则：</div>
+        <div class="tips-title">
+          黄金法则：
+        </div>
         <div class="tips-list">
           <div class="tip-item">
             <span class="tip-icon">1️⃣</span>
diff --git a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
index 7cd05fd..e0010e1 100644
--- a/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/browser-rendering-pipeline/RenderingPipelineDemo.vue
@@ -18,30 +18,53 @@
         :class="{ active: activeStage === stage.id }"
         @click="activeStage = activeStage === stage.id ? null : stage.id"
       >
-        <div class="stage-icon">{{ stage.icon }}</div>
-        <div class="stage-name">{{ stage.name }}</div>
-        <div class="stage-simple">{{ stage.simple }}</div>
-        <div v-if="i < stages.length - 1" class="arrow">→</div>
+        <div class="stage-icon">
+          {{ stage.icon }}
+        </div>
+        <div class="stage-name">
+          {{ stage.name }}
+        </div>
+        <div class="stage-simple">
+          {{ stage.simple }}
+        </div>
+        <div
+          v-if="i < stages.length - 1"
+          class="arrow"
+        >
+          →
+        </div>
       </div>
     </div>
 
     <Transition name="fade">
-      <div v-if="activeStage" class="stage-detail">
+      <div
+        v-if="activeStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ currentStage?.icon }}</span>
           <span class="detail-title">{{ currentStage?.name }}</span>
         </div>
         <div class="detail-content">
-          <p class="detail-desc">{{ currentStage?.detailDesc }}</p>
+          <p class="detail-desc">
+            {{ currentStage?.detailDesc }}
+          </p>
           <div class="detail-example">
-            <div class="example-label">🌰 举个例子：</div>
-            <div class="example-content">{{ currentStage?.example }}</div>
+            <div class="example-label">
+              🌰 举个例子：
+            </div>
+            <div class="example-content">
+              {{ currentStage?.example }}
+            </div>
           </div>
         </div>
       </div>
     </Transition>
 
-    <div v-if="!activeStage" class="hint-text">
+    <div
+      v-if="!activeStage"
+      class="hint-text"
+    >
       👆 点击上方任意阶段，查看详细解释
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue
index 911dfe7..69ebb2f 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureDemo.vue
@@ -13,16 +13,29 @@
 
     <div class="architecture-flow">
       <div class="flow-layer user">
-        <div class="layer-label">用户请求</div>
-        <div class="request-icon">👤</div>
+        <div class="layer-label">
+          用户请求
+        </div>
+        <div class="request-icon">
+          👤
+        </div>
       </div>
 
-      <div class="arrow">↓</div>
+      <div class="arrow">
+        ↓
+      </div>
 
-      <div class="flow-layer cache" :class="{ active: currentLayer === 'cache' }">
-        <div class="layer-label">缓存层 (Cache)</div>
+      <div
+        class="flow-layer cache"
+        :class="{ active: currentLayer === 'cache' }"
+      >
+        <div class="layer-label">
+          缓存层 (Cache)
+        </div>
         <div class="cache-box">
-          <div class="cache-icon">⚡</div>
+          <div class="cache-icon">
+            ⚡
+          </div>
           <div class="cache-stats">
             <div>命中率: {{ hitRate }}%</div>
             <div>响应时间: ~1ms</div>
@@ -31,16 +44,23 @@
       </div>
 
       <div class="arrow">
-        ↓ <span v-if="showMiss" class="miss-text">未命中</span>
+        ↓ <span
+          v-if="showMiss"
+          class="miss-text"
+        >未命中</span>
       </div>
 
       <div
         class="flow-layer database"
         :class="{ active: currentLayer === 'database' }"
       >
-        <div class="layer-label">数据库层 (Database)</div>
+        <div class="layer-label">
+          数据库层 (Database)
+        </div>
         <div class="database-box">
-          <div class="database-icon">🗄️</div>
+          <div class="database-icon">
+            🗄️
+          </div>
           <div class="database-stats">
             <div>响应时间: ~50ms</div>
             <div>持久化存储</div>
@@ -50,21 +70,37 @@
     </div>
 
     <div class="comparison">
-      <div class="comparison-title">访问速度对比</div>
+      <div class="comparison-title">
+        访问速度对比
+      </div>
       <div class="speed-bars">
         <div class="speed-item">
-          <div class="label">缓存命中</div>
-          <div class="bar-container">
-            <div class="bar fast" :style="{ width: '5%' }"></div>
+          <div class="label">
+            缓存命中
+          </div>
+          <div class="bar-container">
+            <div
+              class="bar fast"
+              :style="{ width: '5%' }"
+            />
+          </div>
+          <div class="time">
+            ~1ms
           </div>
-          <div class="time">~1ms</div>
         </div>
         <div class="speed-item">
-          <div class="label">数据库查询</div>
-          <div class="bar-container">
-            <div class="bar slow" :style="{ width: '100%' }"></div>
+          <div class="label">
+            数据库查询
+          </div>
+          <div class="bar-container">
+            <div
+              class="bar slow"
+              :style="{ width: '100%' }"
+            />
+          </div>
+          <div class="time">
+            ~50ms
           </div>
-          <div class="time">~50ms</div>
         </div>
       </div>
       <div class="conclusion">
@@ -73,8 +109,16 @@
     </div>
 
     <div class="interactive-demo">
-      <button class="demo-btn" @click="simulateRequest">模拟请求</button>
-      <div class="demo-result" v-if="lastResult">
+      <button
+        class="demo-btn"
+        @click="simulateRequest"
+      >
+        模拟请求
+      </button>
+      <div
+        v-if="lastResult"
+        class="demo-result"
+      >
         <span :class="{ hit: lastResult.hit, miss: !lastResult.hit }">
           {{ lastResult.hit ? '✅ 缓存命中' : '❌ 缓存未命中，访问数据库' }}
         </span>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
index 21142cb..a71e720 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue
@@ -13,13 +13,22 @@
 
     <div class="architecture-diagram">
       <div class="layer user-layer">
-        <div class="layer-icon">👤</div>
-        <div class="layer-label">用户请求</div>
+        <div class="layer-icon">
+          👤
+        </div>
+        <div class="layer-label">
+          用户请求
+        </div>
       </div>
 
-      <div class="arrow-down">⬇</div>
+      <div class="arrow-down">
+        ⬇
+      </div>
 
-      <div class="layer cdn-layer" :class="{ active: activeLayer === 'cdn' }">
+      <div
+        class="layer cdn-layer"
+        :class="{ active: activeLayer === 'cdn' }"
+      >
         <div class="layer-header">
           <span class="icon">🌐</span>
           <span class="layer-name">CDN 缓存</span>
@@ -40,9 +49,14 @@
         </div>
       </div>
 
-      <div class="arrow-down">⬇</div>
+      <div class="arrow-down">
+        ⬇
+      </div>
 
-      <div class="layer local-layer" :class="{ active: activeLayer === 'local' }">
+      <div
+        class="layer local-layer"
+        :class="{ active: activeLayer === 'local' }"
+      >
         <div class="layer-header">
           <span class="icon">💻</span>
           <span class="layer-name">本地缓存</span>
@@ -63,9 +77,14 @@
         </div>
       </div>
 
-      <div class="arrow-down">⬇</div>
+      <div class="arrow-down">
+        ⬇
+      </div>
 
-      <div class="layer distributed-layer" :class="{ active: activeLayer === 'distributed' }">
+      <div
+        class="layer distributed-layer"
+        :class="{ active: activeLayer === 'distributed' }"
+      >
         <div class="layer-header">
           <span class="icon">🗄️</span>
           <span class="layer-name">分布式缓存</span>
@@ -86,7 +105,9 @@
         </div>
       </div>
 
-      <div class="arrow-down">⬇</div>
+      <div class="arrow-down">
+        ⬇
+      </div>
 
       <div class="layer database-layer">
         <div class="layer-header">
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
index ba6e8cf..8d6feb8 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheHierarchyDemo.vue
@@ -26,7 +26,10 @@
         <div class="layer-stats">
           <div class="stat">
             <span class="stat-label">速度</span>
-            <span class="stat-value" :class="layer.speedClass">{{ layer.speed }}</span>
+            <span
+              class="stat-value"
+              :class="layer.speedClass"
+            >{{ layer.speed }}</span>
           </div>
           <div class="stat">
             <span class="stat-label">容量</span>
@@ -37,36 +40,81 @@
             <span class="stat-value">{{ layer.cost }}</span>
           </div>
         </div>
-        <div v-if="index < layers.length - 1" class="arrow">↓</div>
+        <div
+          v-if="index < layers.length - 1"
+          class="arrow"
+        >
+          ↓
+        </div>
       </div>
     </div>
 
     <div class="data-flow">
-      <div class="flow-title">数据流动演示</div>
+      <div class="flow-title">
+        数据流动演示
+      </div>
       <div class="flow-steps">
-        <div class="flow-step" :class="{ active: flowStep >= 1 }">
-          <div class="step-number">1</div>
-          <div class="step-text">查询 L1 缓存</div>
-          <div class="step-time">~1ns</div>
+        <div
+          class="flow-step"
+          :class="{ active: flowStep >= 1 }"
+        >
+          <div class="step-number">
+            1
+          </div>
+          <div class="step-text">
+            查询 L1 缓存
+          </div>
+          <div class="step-time">
+            ~1ns
+          </div>
         </div>
-        <div class="flow-arrow">↓</div>
-        <div class="flow-step" :class="{ active: flowStep >= 2 }">
-          <div class="step-number">2</div>
-          <div class="step-text">未命中，查 L2</div>
-          <div class="step-time">~10ns</div>
+        <div class="flow-arrow">
+          ↓
         </div>
-        <div class="flow-arrow">↓</div>
-        <div class="flow-step" :class="{ active: flowStep >= 3 }">
-          <div class="step-number">3</div>
-          <div class="step-text">未命中，查 L3</div>
-          <div class="step-time">~100ns</div>
+        <div
+          class="flow-step"
+          :class="{ active: flowStep >= 2 }"
+        >
+          <div class="step-number">
+            2
+          </div>
+          <div class="step-text">
+            未命中，查 L2
+          </div>
+          <div class="step-time">
+            ~10ns
+          </div>
+        </div>
+        <div class="flow-arrow">
+          ↓
+        </div>
+        <div
+          class="flow-step"
+          :class="{ active: flowStep >= 3 }"
+        >
+          <div class="step-number">
+            3
+          </div>
+          <div class="step-text">
+            未命中，查 L3
+          </div>
+          <div class="step-time">
+            ~100ns
+          </div>
         </div>
       </div>
-      <button class="simulate-btn" @click="simulateFlow">模拟数据查找</button>
+      <button
+        class="simulate-btn"
+        @click="simulateFlow"
+      >
+        模拟数据查找
+      </button>
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">各层级对比</div>
+      <div class="table-title">
+        各层级对比
+      </div>
       <table>
         <thead>
           <tr>
@@ -77,7 +125,11 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="layer in layers" :key="layer.id" :class="{ active: activeLayer === layer.id }">
+          <tr
+            v-for="layer in layers"
+            :key="layer.id"
+            :class="{ active: activeLayer === layer.id }"
+          >
             <td>{{ layer.name }}</td>
             <td>{{ layer.speed }}</td>
             <td>{{ layer.capacity }}</td>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue
index 56780da..6090ec4 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheLifecycleDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="cache-lifecycle-demo">
     <div class="header">
-      <div class="title">缓存生命周期演示</div>
-      <div class="subtitle">观察缓存条目从创建到淘汰的完整过程</div>
+      <div class="title">
+        缓存生命周期演示
+      </div>
+      <div class="subtitle">
+        观察缓存条目从创建到淘汰的完整过程
+      </div>
     </div>
 
     <div class="cache-container">
@@ -33,24 +37,26 @@
           }"
         >
           <div class="entry-header">
-            <div class="entry-id">{{ entry.key }}</div>
+            <div class="entry-id">
+              {{ entry.key }}
+            </div>
             <div class="entry-status">
-              <span v-if="entry.status === 'new'" class="status-badge new"
-                >NEW</span
-              >
-              <span v-if="entry.status === 'hit'" class="status-badge hit"
-                >HIT</span
-              >
+              <span
+                v-if="entry.status === 'new'"
+                class="status-badge new"
+              >NEW</span>
+              <span
+                v-if="entry.status === 'hit'"
+                class="status-badge hit"
+              >HIT</span>
               <span
                 v-if="entry.status === 'expiring'"
                 class="status-badge expiring"
-                >EXPIRING</span
-              >
+              >EXPIRING</span>
               <span
                 v-if="entry.status === 'evicting'"
                 class="status-badge evicting"
-                >EVICTING</span
-              >
+              >EVICTING</span>
             </div>
           </div>
           <div class="entry-ttl">
@@ -58,9 +64,11 @@
               <div
                 class="ttl-fill"
                 :style="{ width: entry.ttlPercent + '%' }"
-              ></div>
+              />
+            </div>
+            <div class="ttl-text">
+              TTL: {{ entry.ttl }}s
             </div>
-            <div class="ttl-text">TTL: {{ entry.ttl }}s</div>
           </div>
           <div class="entry-meta">
             <span>命中: {{ entry.hits }}</span>
@@ -73,8 +81,18 @@
     <div class="controls">
       <div class="control-group">
         <label>操作</label>
-        <button class="action-btn read" @click="readData">读取数据</button>
-        <button class="action-btn write" @click="writeData">写入新数据</button>
+        <button
+          class="action-btn read"
+          @click="readData"
+        >
+          读取数据
+        </button>
+        <button
+          class="action-btn write"
+          @click="writeData"
+        >
+          写入新数据
+        </button>
       </div>
 
       <div class="control-group">
@@ -90,7 +108,9 @@
     </div>
 
     <div class="timeline">
-      <div class="timeline-title">事件时间线</div>
+      <div class="timeline-title">
+        事件时间线
+      </div>
       <div class="timeline-events">
         <div
           v-for="(event, index) in events"
@@ -98,7 +118,9 @@
           class="event"
           :class="event.type"
         >
-          <div class="event-time">{{ event.time }}</div>
+          <div class="event-time">
+            {{ event.time }}
+          </div>
           <div class="event-content">
             <span class="event-icon">{{ event.icon }}</span>
             <span class="event-text">{{ event.text }}</span>
@@ -109,19 +131,19 @@
 
     <div class="legend">
       <div class="legend-item">
-        <span class="legend-color new"></span>
+        <span class="legend-color new" />
         <span>新写入</span>
       </div>
       <div class="legend-item">
-        <span class="legend-color hit"></span>
+        <span class="legend-color hit" />
         <span>缓存命中</span>
       </div>
       <div class="legend-item">
-        <span class="legend-color expiring"></span>
+        <span class="legend-color expiring" />
         <span>即将过期</span>
       </div>
       <div class="legend-item">
-        <span class="legend-color evicting"></span>
+        <span class="legend-color evicting" />
         <span>淘汰中</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
index 76156eb..0bbf659 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheMonitoringDashboardDemo.vue
@@ -13,22 +13,36 @@
 
     <div class="metrics-grid">
       <div class="metric-card hit-rate">
-        <div class="metric-icon">🎯</div>
+        <div class="metric-icon">
+          🎯
+        </div>
         <div class="metric-content">
-          <div class="metric-label">命中率</div>
-          <div class="metric-value" :class="getHitRateClass">
+          <div class="metric-label">
+            命中率
+          </div>
+          <div
+            class="metric-value"
+            :class="getHitRateClass"
+          >
             {{ hitRate }}%
           </div>
-          <div class="metric-trend" :class="trendClass">
+          <div
+            class="metric-trend"
+            :class="trendClass"
+          >
             {{ trendIcon }} {{ trendValue }}%
           </div>
         </div>
       </div>
 
       <div class="metric-card response-time">
-        <div class="metric-icon">⚡</div>
+        <div class="metric-icon">
+          ⚡
+        </div>
         <div class="metric-content">
-          <div class="metric-label">平均响应时间</div>
+          <div class="metric-label">
+            平均响应时间
+          </div>
           <div class="metric-value">
             {{ avgResponseTime }}ms
           </div>
@@ -39,9 +53,13 @@
       </div>
 
       <div class="metric-card cache-size">
-        <div class="metric-icon">📦</div>
+        <div class="metric-icon">
+          📦
+        </div>
         <div class="metric-content">
-          <div class="metric-label">缓存使用量</div>
+          <div class="metric-label">
+            缓存使用量
+          </div>
           <div class="metric-value">
             {{ usedSize }}MB
           </div>
@@ -52,7 +70,7 @@
                 width: `${sizeUsagePercent}%`,
                 backgroundColor: getSizeBarColor
               }"
-            ></div>
+            />
           </div>
           <div class="metric-sub">
             {{ usedSize }}MB / {{ maxSize }}MB
@@ -61,9 +79,13 @@
       </div>
 
       <div class="metric-card requests">
-        <div class="metric-icon">📊</div>
+        <div class="metric-icon">
+          📊
+        </div>
         <div class="metric-content">
-          <div class="metric-label">总请求数</div>
+          <div class="metric-label">
+            总请求数
+          </div>
           <div class="metric-value">
             {{ totalRequests.toLocaleString() }}
           </div>
@@ -77,7 +99,12 @@
     <div class="request-log">
       <div class="log-header">
         <span>📋 请求日志</span>
-        <button class="clear-btn" @click="clearLog">清空</button>
+        <button
+          class="clear-btn"
+          @click="clearLog"
+        >
+          清空
+        </button>
       </div>
       <div class="log-list">
         <transition-group name="log-item">
@@ -94,20 +121,32 @@
             <span class="log-latency">{{ log.latency }}ms</span>
           </div>
         </transition-group>
-        <div v-if="requestLogs.length === 0" class="empty-log">
+        <div
+          v-if="requestLogs.length === 0"
+          class="empty-log"
+        >
           暂无请求记录，点击下方按钮发送请求
         </div>
       </div>
     </div>
 
     <div class="control-panel">
-      <button class="action-btn" @click="simulateRequest">
+      <button
+        class="action-btn"
+        @click="simulateRequest"
+      >
         🎲 模拟请求
       </button>
-      <button class="action-btn" @click="simulateBurst">
+      <button
+        class="action-btn"
+        @click="simulateBurst"
+      >
         🚀 连续请求 (10次)
       </button>
-      <button class="action-btn outline" @click="resetMetrics">
+      <button
+        class="action-btn outline"
+        @click="resetMetrics"
+      >
         ↺ 重置指标
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
index 818404a..d9395b2 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternComparisonDemo.vue
@@ -25,21 +25,30 @@
     </div>
 
     <div class="pattern-content">
-      <div v-if="activePattern === 'cache-aside'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'cache-aside'"
+        class="pattern-detail"
+      >
         <div class="pattern-header">
           <h3>Cache-Aside (旁路缓存)</h3>
-          <p class="pattern-desc">最常用的模式，应用代码直接控制缓存</p>
+          <p class="pattern-desc">
+            最常用的模式，应用代码直接控制缓存
+          </p>
         </div>
 
         <div class="flow-diagram">
           <div class="flow-step read">
-            <div class="step-icon">📖</div>
+            <div class="step-icon">
+              📖
+            </div>
             <div class="step-content">
               <strong>读取：</strong>先查缓存 → 没有就查数据库 → 写入缓存
             </div>
           </div>
           <div class="flow-step write">
-            <div class="step-icon">✏️</div>
+            <div class="step-icon">
+              ✏️
+            </div>
             <div class="step-content">
               <strong>更新：</strong>先更新数据库 → <span class="highlight">删除</span>缓存（不是更新！）
             </div>
@@ -48,33 +57,54 @@
 
         <div class="pros-cons">
           <div class="pros">
-            <div class="list-title">✅ 优点</div>
-            <div class="list-item">灵活，可精细控制</div>
-            <div class="list-item">适合大多数场景</div>
+            <div class="list-title">
+              ✅ 优点
+            </div>
+            <div class="list-item">
+              灵活，可精细控制
+            </div>
+            <div class="list-item">
+              适合大多数场景
+            </div>
           </div>
           <div class="cons">
-            <div class="list-title">❌ 缺点</div>
-            <div class="list-item">代码复杂度较高</div>
-            <div class="list-item">需要手动维护一致性</div>
+            <div class="list-title">
+              ❌ 缺点
+            </div>
+            <div class="list-item">
+              代码复杂度较高
+            </div>
+            <div class="list-item">
+              需要手动维护一致性
+            </div>
           </div>
         </div>
       </div>
 
-      <div v-if="activePattern === 'read-through'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'read-through'"
+        class="pattern-detail"
+      >
         <div class="pattern-header">
           <h3>Read-Through (读穿透)</h3>
-          <p class="pattern-desc">缓存库负责从数据库加载数据</p>
+          <p class="pattern-desc">
+            缓存库负责从数据库加载数据
+          </p>
         </div>
 
         <div class="flow-diagram">
           <div class="flow-step">
-            <div class="step-icon">📖</div>
+            <div class="step-icon">
+              📖
+            </div>
             <div class="step-content">
               <strong>读取：</strong>应用只调 cache.get()，缓存库负责查数据库
             </div>
           </div>
           <div class="flow-step">
-            <div class="step-icon">✏️</div>
+            <div class="step-icon">
+              ✏️
+            </div>
             <div class="step-content">
               <strong>写入：</strong>通常与 Write-Through 配合，同步写缓存和数据库
             </div>
@@ -83,33 +113,54 @@
 
         <div class="pros-cons">
           <div class="pros">
-            <div class="list-title">✅ 优点</div>
-            <div class="list-item">代码简洁</div>
-            <div class="list-item">一致性更好</div>
+            <div class="list-title">
+              ✅ 优点
+            </div>
+            <div class="list-item">
+              代码简洁
+            </div>
+            <div class="list-item">
+              一致性更好
+            </div>
           </div>
           <div class="cons">
-            <div class="list-title">❌ 缺点</div>
-            <div class="list-item">需要专门的缓存库</div>
-            <div class="list-item">灵活性较低</div>
+            <div class="list-title">
+              ❌ 缺点
+            </div>
+            <div class="list-item">
+              需要专门的缓存库
+            </div>
+            <div class="list-item">
+              灵活性较低
+            </div>
           </div>
         </div>
       </div>
 
-      <div v-if="activePattern === 'write-behind'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'write-behind'"
+        class="pattern-detail"
+      >
         <div class="pattern-header">
           <h3>Write-Behind (异步写回)</h3>
-          <p class="pattern-desc">写入时只写缓存，异步批量写数据库</p>
+          <p class="pattern-desc">
+            写入时只写缓存，异步批量写数据库
+          </p>
         </div>
 
         <div class="flow-diagram">
           <div class="flow-step">
-            <div class="step-icon">⚡</div>
+            <div class="step-icon">
+              ⚡
+            </div>
             <div class="step-content">
               <strong>写入：</strong>立即写缓存 → 异步批量写数据库
             </div>
           </div>
           <div class="flow-step">
-            <div class="step-icon">⚠️</div>
+            <div class="step-icon">
+              ⚠️
+            </div>
             <div class="step-content">
               <strong>风险：</strong>缓存崩溃会导致数据丢失
             </div>
@@ -118,21 +169,35 @@
 
         <div class="pros-cons">
           <div class="pros">
-            <div class="list-title">✅ 优点</div>
-            <div class="list-item">写入极快</div>
-            <div class="list-item">适合写多场景</div>
+            <div class="list-title">
+              ✅ 优点
+            </div>
+            <div class="list-item">
+              写入极快
+            </div>
+            <div class="list-item">
+              适合写多场景
+            </div>
           </div>
           <div class="cons">
-            <div class="list-title">❌ 缺点</div>
-            <div class="list-item">可能丢失数据</div>
-            <div class="list-item">一致性差</div>
+            <div class="list-title">
+              ❌ 缺点
+            </div>
+            <div class="list-item">
+              可能丢失数据
+            </div>
+            <div class="list-item">
+              一致性差
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">三种模式对比</div>
+      <div class="table-title">
+        三种模式对比
+      </div>
       <table>
         <thead>
           <tr>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CachePatternsDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternsDemo.vue
index 6dd02da..397bfe4 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CachePatternsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CachePatternsDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="cache-patterns-demo">
     <div class="header">
-      <div class="title">缓存模式 (Caching Patterns)</div>
-      <div class="subtitle">理解不同缓存读写模式的工作原理</div>
+      <div class="title">
+        缓存模式 (Caching Patterns)
+      </div>
+      <div class="subtitle">
+        理解不同缓存读写模式的工作原理
+      </div>
     </div>
 
     <div class="pattern-selector">
@@ -23,10 +27,17 @@
 
     <div class="pattern-content">
       <!-- Cache-Aside -->
-      <div v-if="activePattern === 'cache-aside'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'cache-aside'"
+        class="pattern-detail"
+      >
         <div class="description">
-          <div class="pattern-title">Cache-Aside (旁路缓存)</div>
-          <div class="pattern-subtitle">最常用的模式，由应用代码控制缓存</div>
+          <div class="pattern-title">
+            Cache-Aside (旁路缓存)
+          </div>
+          <div class="pattern-subtitle">
+            最常用的模式，由应用代码控制缓存
+          </div>
           <div class="pattern-points">
             <div class="point">
               <span class="icon">📖</span>
@@ -37,50 +48,93 @@
             <div class="point">
               <span class="icon">✏️</span>
               <div>
-                <strong>更新</strong
-                >：先更新数据库，然后<strong>删除</strong>缓存（不是更新！）
+                <strong>更新</strong>：先更新数据库，然后<strong>删除</strong>缓存（不是更新！）
               </div>
             </div>
           </div>
         </div>
 
         <div class="diagram">
-          <div class="diagram-title">读取流程</div>
+          <div class="diagram-title">
+            读取流程
+          </div>
           <div class="flow-chart">
-            <div class="flow-step" :class="{ active: flowStep >= 1 }">
-              <div class="step-number">1</div>
-              <div class="step-text">查询缓存</div>
+            <div
+              class="flow-step"
+              :class="{ active: flowStep >= 1 }"
+            >
+              <div class="step-number">
+                1
+              </div>
+              <div class="step-text">
+                查询缓存
+              </div>
+            </div>
+            <div class="flow-arrow">
+              ↓
             </div>
-            <div class="flow-arrow">↓</div>
             <div class="flow-decision">
-              <div class="decision-label">命中?</div>
+              <div class="decision-label">
+                命中?
+              </div>
               <div class="decision-branches">
                 <div
                   class="branch yes"
                   :class="{ active: flowStep >= 2 && cacheHit }"
                 >
-                  <div class="branch-label">是</div>
-                  <div class="branch-result">✅ 返回数据</div>
+                  <div class="branch-label">
+                    是
+                  </div>
+                  <div class="branch-result">
+                    ✅ 返回数据
+                  </div>
                 </div>
                 <div
                   class="branch no"
                   :class="{ active: flowStep >= 2 && !cacheHit }"
                 >
-                  <div class="branch-label">否</div>
+                  <div class="branch-label">
+                    否
+                  </div>
                   <div class="branch-steps">
-                    <div class="flow-step" :class="{ active: flowStep >= 3 }">
-                      <div class="step-number">2</div>
-                      <div class="step-text">查询数据库</div>
+                    <div
+                      class="flow-step"
+                      :class="{ active: flowStep >= 3 }"
+                    >
+                      <div class="step-number">
+                        2
+                      </div>
+                      <div class="step-text">
+                        查询数据库
+                      </div>
                     </div>
-                    <div class="flow-arrow">↓</div>
-                    <div class="flow-step" :class="{ active: flowStep >= 4 }">
-                      <div class="step-number">3</div>
-                      <div class="step-text">写入缓存</div>
+                    <div class="flow-arrow">
+                      ↓
                     </div>
-                    <div class="flow-arrow">↓</div>
-                    <div class="flow-step" :class="{ active: flowStep >= 5 }">
-                      <div class="step-number">4</div>
-                      <div class="step-text">返回数据</div>
+                    <div
+                      class="flow-step"
+                      :class="{ active: flowStep >= 4 }"
+                    >
+                      <div class="step-number">
+                        3
+                      </div>
+                      <div class="step-text">
+                        写入缓存
+                      </div>
+                    </div>
+                    <div class="flow-arrow">
+                      ↓
+                    </div>
+                    <div
+                      class="flow-step"
+                      :class="{ active: flowStep >= 5 }"
+                    >
+                      <div class="step-number">
+                        4
+                      </div>
+                      <div class="step-text">
+                        返回数据
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -91,20 +145,25 @@
           <div class="demo-controls">
             <button
               class="demo-btn"
-              @click="simulateCacheAside"
               :disabled="simulating"
+              @click="simulateCacheAside"
             >
               {{ simulating ? '模拟中...' : '模拟读取' }}
             </button>
             <label class="checkbox">
-              <input type="checkbox" v-model="cacheHit" />
+              <input
+                v-model="cacheHit"
+                type="checkbox"
+              >
               缓存命中
             </label>
           </div>
         </div>
 
         <div class="code-example">
-          <div class="code-title">代码示例</div>
+          <div class="code-title">
+            代码示例
+          </div>
           <pre class="code-block"><code>// Cache-Aside 模式
 def get_user(user_id):
     # 1. 查缓存
@@ -130,9 +189,14 @@ def update_user(user_id, data):
       </div>
 
       <!-- Read-Through -->
-      <div v-if="activePattern === 'read-through'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'read-through'"
+        class="pattern-detail"
+      >
         <div class="description">
-          <div class="pattern-title">Read-Through / Write-Through</div>
+          <div class="pattern-title">
+            Read-Through / Write-Through
+          </div>
           <div class="pattern-subtitle">
             由缓存库负责与数据库交互，应用只和缓存打交道
           </div>
@@ -153,12 +217,18 @@ def update_user(user_id, data):
         </div>
 
         <div class="diagram">
-          <div class="diagram-title">架构对比</div>
+          <div class="diagram-title">
+            架构对比
+          </div>
           <div class="architecture-comparison">
             <div class="arch-block">
-              <div class="arch-title">Cache-Aside</div>
+              <div class="arch-title">
+                Cache-Aside
+              </div>
               <div class="arch-flow">
-                <div class="flow-box app">应用</div>
+                <div class="flow-box app">
+                  应用
+                </div>
                 <div class="flow-arrows">
                   <div>↔️ 缓存</div>
                   <div>↔️ 数据库</div>
@@ -166,20 +236,28 @@ def update_user(user_id, data):
               </div>
             </div>
             <div class="arch-block">
-              <div class="arch-title">Read-Through</div>
+              <div class="arch-title">
+                Read-Through
+              </div>
               <div class="arch-flow">
-                <div class="flow-box app">应用</div>
+                <div class="flow-box app">
+                  应用
+                </div>
                 <div class="flow-arrows">
                   <div>↔️ 缓存库</div>
                 </div>
-                <div class="flow-box cache">缓存库 ↔️ 数据库</div>
+                <div class="flow-box cache">
+                  缓存库 ↔️ 数据库
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <div class="code-example">
-          <div class="code-title">代码示例</div>
+          <div class="code-title">
+            代码示例
+          </div>
           <pre class="code-block"><code>// Read-Through 模式（代码更简洁）
 def get_user(user_id):
     # 缓存库自动处理数据库查询
@@ -194,10 +272,17 @@ def update_user(user_id, data):
       </div>
 
       <!-- Write-Behind -->
-      <div v-if="activePattern === 'write-behind'" class="pattern-detail">
+      <div
+        v-if="activePattern === 'write-behind'"
+        class="pattern-detail"
+      >
         <div class="description">
-          <div class="pattern-title">Write-Behind (异步写回)</div>
-          <div class="pattern-subtitle">写入时只写缓存，异步批量写数据库</div>
+          <div class="pattern-title">
+            Write-Behind (异步写回)
+          </div>
+          <div class="pattern-subtitle">
+            写入时只写缓存，异步批量写数据库
+          </div>
           <div class="pattern-points">
             <div class="point">
               <span class="icon">⚡</span>
@@ -212,42 +297,71 @@ def update_user(user_id, data):
             <div class="point">
               <span class="icon">🎯</span>
               <div>
-                <strong>适用</strong
-                >：秒杀系统、点赞数、浏览量（可接受少量丢失）
+                <strong>适用</strong>：秒杀系统、点赞数、浏览量（可接受少量丢失）
               </div>
             </div>
           </div>
         </div>
 
         <div class="diagram">
-          <div class="diagram-title">写入流程</div>
+          <div class="diagram-title">
+            写入流程
+          </div>
           <div class="flow-chart">
             <div class="flow-step">
-              <div class="step-number">1</div>
-              <div class="step-text">写入缓存</div>
-              <div class="step-time">⚡ ~1ms</div>
+              <div class="step-number">
+                1
+              </div>
+              <div class="step-text">
+                写入缓存
+              </div>
+              <div class="step-time">
+                ⚡ ~1ms
+              </div>
+            </div>
+            <div class="flow-arrow">
+              ↓
             </div>
-            <div class="flow-arrow">↓</div>
             <div class="flow-step">
-              <div class="step-number">2</div>
-              <div class="step-text">立即返回</div>
+              <div class="step-number">
+                2
+              </div>
+              <div class="step-text">
+                立即返回
+              </div>
+            </div>
+            <div class="flow-arrow">
+              ↓
             </div>
-            <div class="flow-arrow">↓</div>
             <div class="flow-step pending">
-              <div class="step-number">3</div>
-              <div class="step-text">异步批量写数据库</div>
-              <div class="step-time">🕐 后台执行</div>
+              <div class="step-number">
+                3
+              </div>
+              <div class="step-text">
+                异步批量写数据库
+              </div>
+              <div class="step-time">
+                🕐 后台执行
+              </div>
             </div>
           </div>
 
           <div class="demo-controls">
-            <button class="demo-btn" @click="simulateWriteBehind">
+            <button
+              class="demo-btn"
+              @click="simulateWriteBehind"
+            >
               模拟批量写入
             </button>
           </div>
 
-          <div class="write-queue" v-if="writeQueue.length > 0">
-            <div class="queue-title">待写入队列</div>
+          <div
+            v-if="writeQueue.length > 0"
+            class="write-queue"
+          >
+            <div class="queue-title">
+              待写入队列
+            </div>
             <div class="queue-items">
               <div
                 v-for="(item, index) in writeQueue"
@@ -263,7 +377,9 @@ def update_user(user_id, data):
         </div>
 
         <div class="code-example">
-          <div class="code-title">代码示例</div>
+          <div class="code-title">
+            代码示例
+          </div>
           <pre class="code-block"><code>// Write-Behind 模式
 def update_counter(post_id):
     # 1. 立即更新缓存（极快）
@@ -283,7 +399,9 @@ def update_counter(post_id):
     </div>
 
     <div class="pattern-comparison">
-      <div class="comparison-title">模式对比</div>
+      <div class="comparison-title">
+        模式对比
+      </div>
       <table class="comparison-table">
         <thead>
           <tr>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/CacheProblemsDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/CacheProblemsDemo.vue
index 25c9f3c..c2967a2 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/CacheProblemsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/CacheProblemsDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="cache-problems-demo">
     <div class="header">
-      <div class="title">缓存的三大问题</div>
-      <div class="subtitle">穿透、击穿、雪崩的场景与解决方案</div>
+      <div class="title">
+        缓存的三大问题
+      </div>
+      <div class="subtitle">
+        穿透、击穿、雪崩的场景与解决方案
+      </div>
     </div>
 
     <div class="problem-selector">
@@ -24,9 +28,14 @@
 
     <div class="problem-content">
       <!-- 缓存穿透 -->
-      <div v-if="activeProblem === 'penetration'" class="problem-detail">
+      <div
+        v-if="activeProblem === 'penetration'"
+        class="problem-detail"
+      >
         <div class="problem-intro">
-          <div class="intro-title">什么是缓存穿透？</div>
+          <div class="intro-title">
+            什么是缓存穿透？
+          </div>
           <div class="intro-text">
             查询一个<strong>不存在的数据</strong>（如恶意请求
             id=-1），缓存没有，数据库也没有。 导致每次请求都直接打到数据库。
@@ -34,51 +43,78 @@
         </div>
 
         <div class="problem-scenario">
-          <div class="scenario-title">场景模拟</div>
+          <div class="scenario-title">
+            场景模拟
+          </div>
           <div class="scenario-diagram">
             <div class="flow-item request">
-              <div class="flow-icon">🔥</div>
-              <div class="flow-text">请求 id=-999</div>
+              <div class="flow-icon">
+                🔥
+              </div>
+              <div class="flow-text">
+                请求 id=-999
+              </div>
             </div>
-            <div class="flow-arrow">↓</div>
-            <div class="flow-item cache" :class="{ miss: true }">
-              <div class="flow-icon">❌</div>
-              <div class="flow-text">缓存未命中</div>
+            <div class="flow-arrow">
+              ↓
+            </div>
+            <div
+              class="flow-item cache"
+              :class="{ miss: true }"
+            >
+              <div class="flow-icon">
+                ❌
+              </div>
+              <div class="flow-text">
+                缓存未命中
+              </div>
+            </div>
+            <div class="flow-arrow">
+              ↓
             </div>
-            <div class="flow-arrow">↓</div>
             <div
               class="flow-item database"
               :class="{ overloaded: dbPressure >= 80 }"
             >
-              <div class="flow-icon">🗄️</div>
-              <div class="flow-text">数据库查询（不存在）</div>
+              <div class="flow-icon">
+                🗄️
+              </div>
+              <div class="flow-text">
+                数据库查询（不存在）
+              </div>
             </div>
           </div>
 
           <div class="controls">
             <button
               class="attack-btn"
-              @click="simulatePenetration"
               :disabled="simulating"
+              @click="simulatePenetration"
             >
               {{ simulating ? '攻击中...' : '模拟恶意攻击' }}
             </button>
           </div>
 
           <div class="pressure-meter">
-            <div class="meter-label">数据库压力</div>
+            <div class="meter-label">
+              数据库压力
+            </div>
             <div class="meter-bar">
               <div
                 class="meter-fill"
                 :style="{ width: dbPressure + '%' }"
-              ></div>
+              />
+            </div>
+            <div class="meter-value">
+              {{ dbPressure }}%
             </div>
-            <div class="meter-value">{{ dbPressure }}%</div>
           </div>
         </div>
 
         <div class="solutions">
-          <div class="solutions-title">解决方案</div>
+          <div class="solutions-title">
+            解决方案
+          </div>
           <div class="solution-list">
             <div class="solution-item">
               <div class="solution-header">
@@ -87,7 +123,7 @@
               </div>
               <div class="solution-desc">
                 在缓存前加一层过滤器，快速判断"这个 id 肯定不存在"。
-                <br />
+                <br>
                 <span class="note">100% 判断不存在，但可能有误判</span>
               </div>
             </div>
@@ -105,25 +141,34 @@
       </div>
 
       <!-- 缓存击穿 -->
-      <div v-if="activeProblem === 'breakdown'" class="problem-detail">
+      <div
+        v-if="activeProblem === 'breakdown'"
+        class="problem-detail"
+      >
         <div class="problem-intro">
-          <div class="intro-title">什么是缓存击穿？</div>
+          <div class="intro-title">
+            什么是缓存击穿？
+          </div>
           <div class="intro-text">
             某个<strong>热点数据</strong>过期（如微博热搜），瞬间几百万请求同时打到数据库。
           </div>
         </div>
 
         <div class="problem-scenario">
-          <div class="scenario-title">场景模拟</div>
+          <div class="scenario-title">
+            场景模拟
+          </div>
           <div class="hotkey-scenario">
             <div class="hotkey-badge">
               🔥 热点数据
-              <br />
+              <br>
               <span class="key">user:12345</span>
             </div>
 
             <div class="concurrent-requests">
-              <div class="requests-title">并发请求</div>
+              <div class="requests-title">
+                并发请求
+              </div>
               <div class="requests-container">
                 <div
                   v-for="(req, index) in concurrentRequests"
@@ -131,23 +176,34 @@
                   class="request-item"
                   :class="req.status"
                 >
-                  <div class="request-id">请求 {{ req.id }}</div>
-                  <div class="request-status">{{ req.statusText }}</div>
+                  <div class="request-id">
+                    请求 {{ req.id }}
+                  </div>
+                  <div class="request-status">
+                    {{ req.statusText }}
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div class="mutex-visual" v-if="showMutex">
-              <div class="mutex-badge">🔒 互斥锁</div>
-              <div class="mutex-text">只有一个线程能查数据库</div>
+            <div
+              v-if="showMutex"
+              class="mutex-visual"
+            >
+              <div class="mutex-badge">
+                🔒 互斥锁
+              </div>
+              <div class="mutex-text">
+                只有一个线程能查数据库
+              </div>
             </div>
           </div>
 
           <div class="controls">
             <button
               class="attack-btn"
-              @click="simulateBreakdown"
               :disabled="simulating"
+              @click="simulateBreakdown"
             >
               {{ simulating ? '模拟中...' : '模拟热点过期' }}
             </button>
@@ -155,7 +211,9 @@
         </div>
 
         <div class="solutions">
-          <div class="solutions-title">解决方案</div>
+          <div class="solutions-title">
+            解决方案
+          </div>
           <div class="solution-list">
             <div class="solution-item">
               <div class="solution-header">
@@ -164,7 +222,7 @@
               </div>
               <div class="solution-desc">
                 只允许一个线程查数据库，其他线程等待。
-                <br />
+                <br>
                 <span class="note">优点：简单；缺点：阻塞其他请求</span>
               </div>
             </div>
@@ -175,10 +233,8 @@
               </div>
               <div class="solution-desc">
                 不设置 TTL，而是在 value 里存一个过期时间字段。
-                <br />
-                <span class="note"
-                  >查询时发现"逻辑过期"，异步更新缓存，同时返回旧数据</span
-                >
+                <br>
+                <span class="note">查询时发现"逻辑过期"，异步更新缓存，同时返回旧数据</span>
               </div>
             </div>
           </div>
@@ -186,9 +242,14 @@
       </div>
 
       <!-- 缓存雪崩 -->
-      <div v-if="activeProblem === 'avalanche'" class="problem-detail">
+      <div
+        v-if="activeProblem === 'avalanche'"
+        class="problem-detail"
+      >
         <div class="problem-intro">
-          <div class="intro-title">什么是缓存雪崩？</div>
+          <div class="intro-title">
+            什么是缓存雪崩？
+          </div>
           <div class="intro-text">
             大量缓存<strong>同时过期</strong>（如系统重启后，所有缓存都在
             00:00:00 过期）， 数据库瞬间被打爆。
@@ -196,7 +257,9 @@
         </div>
 
         <div class="problem-scenario">
-          <div class="scenario-title">场景模拟</div>
+          <div class="scenario-title">
+            场景模拟
+          </div>
           <div class="avalanche-visual">
             <div class="cache-items">
               <div
@@ -205,38 +268,61 @@
                 class="cache-item"
                 :class="{ expired: item.expired }"
               >
-                <div class="item-key">{{ item.key }}</div>
-                <div class="item-ttl">TTL: {{ item.ttl }}s</div>
+                <div class="item-key">
+                  {{ item.key }}
+                </div>
+                <div class="item-ttl">
+                  TTL: {{ item.ttl }}s
+                </div>
               </div>
             </div>
 
-            <div class="mass-explosion" v-if="massExplosion">
-              <div class="explosion-icon">💥</div>
-              <div class="explosion-text">同时过期！</div>
+            <div
+              v-if="massExplosion"
+              class="mass-explosion"
+            >
+              <div class="explosion-icon">
+                💥
+              </div>
+              <div class="explosion-text">
+                同时过期！
+              </div>
             </div>
 
-            <div class="db-overload" :class="{ critical: dbPressure >= 90 }">
-              <div class="db-icon">🗄️</div>
-              <div class="db-status">数据库负载: {{ dbPressure }}%</div>
+            <div
+              class="db-overload"
+              :class="{ critical: dbPressure >= 90 }"
+            >
+              <div class="db-icon">
+                🗄️
+              </div>
+              <div class="db-status">
+                数据库负载: {{ dbPressure }}%
+              </div>
             </div>
           </div>
 
           <div class="controls">
             <button
               class="attack-btn"
-              @click="simulateAvalanche"
               :disabled="simulating"
+              @click="simulateAvalanche"
             >
               {{ simulating ? '模拟中...' : '模拟缓存雪崩' }}
             </button>
-            <button class="solution-btn" @click="applyRandomTTL">
+            <button
+              class="solution-btn"
+              @click="applyRandomTTL"
+            >
               应用解决方案（随机 TTL）
             </button>
           </div>
         </div>
 
         <div class="solutions">
-          <div class="solutions-title">解决方案</div>
+          <div class="solutions-title">
+            解决方案
+          </div>
           <div class="solution-list">
             <div class="solution-item">
               <div class="solution-header">
@@ -245,10 +331,8 @@
               </div>
               <div class="solution-desc">
                 避免同时过期，TTL 加上随机值。
-                <br />
-                <span class="code"
-                  >ttl = 600 + random.randint(-60, 60) # 600 ± 60 秒</span
-                >
+                <br>
+                <span class="code">ttl = 600 + random.randint(-60, 60) # 600 ± 60 秒</span>
               </div>
             </div>
             <div class="solution-item">
@@ -258,10 +342,8 @@
               </div>
               <div class="solution-desc">
                 系统启动时，主动加载热点数据到缓存。
-                <br />
-                <span class="note"
-                  >使用定时任务，提前刷新即将过期的热点数据</span
-                >
+                <br>
+                <span class="note">使用定时任务，提前刷新即将过期的热点数据</span>
               </div>
             </div>
             <div class="solution-item">
@@ -271,7 +353,7 @@
               </div>
               <div class="solution-desc">
                 当数据库压力过大时，暂时停止更新缓存，直接返回降级数据。
-                <br />
+                <br>
                 <span class="note">如"系统繁忙，请稍后再试"</span>
               </div>
             </div>
@@ -281,7 +363,9 @@
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">三大问题对比</div>
+      <div class="table-title">
+        三大问题对比
+      </div>
       <table class="problems-table">
         <thead>
           <tr>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
index b46176f..4082ae1 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/EcommerceCacheArchitectureDemo.vue
@@ -3,10 +3,15 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <p class="hint">
+        {{ description }}
+      </p>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         电商缓存架构演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/LocalVsDistributedCacheDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/LocalVsDistributedCacheDemo.vue
index b34a431..7d6af8c 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/LocalVsDistributedCacheDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/LocalVsDistributedCacheDemo.vue
@@ -5,25 +5,41 @@
 <template>
   <div class="cache-comparison-demo">
     <div class="header">
-      <div class="title">本地缓存 vs 分布式缓存</div>
-      <div class="subtitle">对比两种缓存架构的性能和特点</div>
+      <div class="title">
+        本地缓存 vs 分布式缓存
+      </div>
+      <div class="subtitle">
+        对比两种缓存架构的性能和特点
+      </div>
     </div>
 
     <div class="comparison-view">
       <!-- Local Cache -->
       <div class="cache-side local">
         <div class="side-header">
-          <div class="title">本地缓存 (Local Cache)</div>
-          <div class="tag">进程内</div>
+          <div class="title">
+            本地缓存 (Local Cache)
+          </div>
+          <div class="tag">
+            进程内
+          </div>
         </div>
 
         <div class="architecture">
           <div class="app-instance">
-            <div class="instance-label">应用实例 1</div>
+            <div class="instance-label">
+              应用实例 1
+            </div>
             <div class="cache-box">
-              <div class="cache-label">缓存</div>
+              <div class="cache-label">
+                缓存
+              </div>
               <div class="cache-data">
-                <div v-for="item in localCache1" :key="item" class="data-item">
+                <div
+                  v-for="item in localCache1"
+                  :key="item"
+                  class="data-item"
+                >
                   {{ item }}
                 </div>
               </div>
@@ -31,11 +47,19 @@
           </div>
 
           <div class="app-instance">
-            <div class="instance-label">应用实例 2</div>
+            <div class="instance-label">
+              应用实例 2
+            </div>
             <div class="cache-box">
-              <div class="cache-label">缓存</div>
+              <div class="cache-label">
+                缓存
+              </div>
               <div class="cache-data">
-                <div v-for="item in localCache2" :key="item" class="data-item">
+                <div
+                  v-for="item in localCache2"
+                  :key="item"
+                  class="data-item"
+                >
                   {{ item }}
                 </div>
               </div>
@@ -45,29 +69,53 @@
 
         <div class="metrics">
           <div class="metric">
-            <div class="metric-label">响应时间</div>
-            <div class="metric-value fast">~1 ms</div>
+            <div class="metric-label">
+              响应时间
+            </div>
+            <div class="metric-value fast">
+              ~1 ms
+            </div>
           </div>
           <div class="metric">
-            <div class="metric-label">容量</div>
-            <div class="metric-value">~1 GB</div>
+            <div class="metric-label">
+              容量
+            </div>
+            <div class="metric-value">
+              ~1 GB
+            </div>
           </div>
           <div class="metric">
-            <div class="metric-label">一致性</div>
-            <div class="metric-value warning">低</div>
+            <div class="metric-label">
+              一致性
+            </div>
+            <div class="metric-value warning">
+              低
+            </div>
           </div>
         </div>
 
         <div class="pros-cons">
           <div class="pros">
-            <div class="list-title">✅ 优点</div>
-            <div class="list-item">极快（无网络开销）</div>
-            <div class="list-item">简单（内存 Map）</div>
+            <div class="list-title">
+              ✅ 优点
+            </div>
+            <div class="list-item">
+              极快（无网络开销）
+            </div>
+            <div class="list-item">
+              简单（内存 Map）
+            </div>
           </div>
           <div class="cons">
-            <div class="list-title">❌ 缺点</div>
-            <div class="list-item">容量受限</div>
-            <div class="list-item">实例间不一致</div>
+            <div class="list-title">
+              ❌ 缺点
+            </div>
+            <div class="list-item">
+              容量受限
+            </div>
+            <div class="list-item">
+              实例间不一致
+            </div>
           </div>
         </div>
       </div>
@@ -75,33 +123,51 @@
       <!-- Distributed Cache -->
       <div class="cache-side distributed">
         <div class="side-header">
-          <div class="title">分布式缓存 (Distributed Cache)</div>
-          <div class="tag">独立服务</div>
+          <div class="title">
+            分布式缓存 (Distributed Cache)
+          </div>
+          <div class="tag">
+            独立服务
+          </div>
         </div>
 
         <div class="architecture">
           <div class="instances-row">
             <div class="app-instance-small">
-              <div class="instance-label-small">实例 1</div>
+              <div class="instance-label-small">
+                实例 1
+              </div>
             </div>
             <div class="app-instance-small">
-              <div class="instance-label-small">实例 2</div>
+              <div class="instance-label-small">
+                实例 2
+              </div>
             </div>
             <div class="app-instance-small">
-              <div class="instance-label-small">实例 3</div>
+              <div class="instance-label-small">
+                实例 3
+              </div>
             </div>
           </div>
 
           <div class="network-layer">
-            <div class="network-label">网络</div>
-            <div class="network-arrows">⬇️ ⬇️ ⬇️</div>
+            <div class="network-label">
+              网络
+            </div>
+            <div class="network-arrows">
+              ⬇️ ⬇️ ⬇️
+            </div>
           </div>
 
           <div class="redis-cluster">
-            <div class="cluster-label">Redis 集群</div>
+            <div class="cluster-label">
+              Redis 集群
+            </div>
             <div class="redis-nodes">
               <div class="redis-node">
-                <div class="node-label">Node 1</div>
+                <div class="node-label">
+                  Node 1
+                </div>
                 <div class="node-data">
                   <div
                     v-for="item in redisData1"
@@ -113,7 +179,9 @@
                 </div>
               </div>
               <div class="redis-node">
-                <div class="node-label">Node 2</div>
+                <div class="node-label">
+                  Node 2
+                </div>
                 <div class="node-data">
                   <div
                     v-for="item in redisData2"
@@ -125,7 +193,9 @@
                 </div>
               </div>
               <div class="redis-node">
-                <div class="node-label">Node 3</div>
+                <div class="node-label">
+                  Node 3
+                </div>
                 <div class="node-data">
                   <div
                     v-for="item in redisData3"
@@ -142,48 +212,96 @@
 
         <div class="metrics">
           <div class="metric">
-            <div class="metric-label">响应时间</div>
-            <div class="metric-value medium">~5 ms</div>
+            <div class="metric-label">
+              响应时间
+            </div>
+            <div class="metric-value medium">
+              ~5 ms
+            </div>
           </div>
           <div class="metric">
-            <div class="metric-label">容量</div>
-            <div class="metric-value">~100 GB</div>
+            <div class="metric-label">
+              容量
+            </div>
+            <div class="metric-value">
+              ~100 GB
+            </div>
           </div>
           <div class="metric">
-            <div class="metric-label">一致性</div>
-            <div class="metric-value good">高</div>
+            <div class="metric-label">
+              一致性
+            </div>
+            <div class="metric-value good">
+              高
+            </div>
           </div>
         </div>
 
         <div class="pros-cons">
           <div class="pros">
-            <div class="list-title">✅ 优点</div>
-            <div class="list-item">容量可扩展</div>
-            <div class="list-item">全局共享</div>
+            <div class="list-title">
+              ✅ 优点
+            </div>
+            <div class="list-item">
+              容量可扩展
+            </div>
+            <div class="list-item">
+              全局共享
+            </div>
           </div>
           <div class="cons">
-            <div class="list-title">❌ 缺点</div>
-            <div class="list-item">网络延迟</div>
-            <div class="list-item">需要维护</div>
+            <div class="list-title">
+              ❌ 缺点
+            </div>
+            <div class="list-item">
+              网络延迟
+            </div>
+            <div class="list-item">
+              需要维护
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="interactive-demo">
-      <div class="demo-title">交互演示：写入和读取数据</div>
+      <div class="demo-title">
+        交互演示：写入和读取数据
+      </div>
       <div class="demo-controls">
-        <button class="demo-btn" @click="simulateWrite">写入数据</button>
-        <button class="demo-btn secondary" @click="simulateRead">
+        <button
+          class="demo-btn"
+          @click="simulateWrite"
+        >
+          写入数据
+        </button>
+        <button
+          class="demo-btn secondary"
+          @click="simulateRead"
+        >
           读取数据
         </button>
-        <button class="demo-btn reset" @click="reset">重置</button>
+        <button
+          class="demo-btn reset"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
 
-      <div class="demo-result" v-if="lastOperation">
-        <div class="result-icon">{{ lastOperation.icon }}</div>
-        <div class="result-text">{{ lastOperation.text }}</div>
-        <div class="result-detail">{{ lastOperation.detail }}</div>
+      <div
+        v-if="lastOperation"
+        class="demo-result"
+      >
+        <div class="result-icon">
+          {{ lastOperation.icon }}
+        </div>
+        <div class="result-text">
+          {{ lastOperation.text }}
+        </div>
+        <div class="result-detail">
+          {{ lastOperation.detail }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/LocalityPrincipleDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/LocalityPrincipleDemo.vue
index bbca239..03163ed 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/LocalityPrincipleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/LocalityPrincipleDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="locality-demo">
     <div class="header">
-      <div class="title">局部性原理演示</div>
-      <div class="subtitle">理解缓存为什么有效</div>
+      <div class="title">
+        局部性原理演示
+      </div>
+      <div class="subtitle">
+        理解缓存为什么有效
+      </div>
     </div>
 
     <div class="tabs">
@@ -28,18 +32,20 @@
 
     <div class="tab-content">
       <!-- Temporal Locality -->
-      <div v-if="activeTab === 'temporal'" class="temporal-demo">
+      <div
+        v-if="activeTab === 'temporal'"
+        class="temporal-demo"
+      >
         <div class="description">
-          <strong>时间局部性</strong
-          >：如果你访问了某个数据，未来很可能再次访问它。
-          <br />
-          <span class="example"
-            >例子：用户登录后，每次请求都需要查询用户信息</span
-          >
+          <strong>时间局部性</strong>：如果你访问了某个数据，未来很可能再次访问它。
+          <br>
+          <span class="example">例子：用户登录后，每次请求都需要查询用户信息</span>
         </div>
 
         <div class="timeline">
-          <div class="timeline-title">访问时间线</div>
+          <div class="timeline-title">
+            访问时间线
+          </div>
           <div class="timeline-events">
             <div
               v-for="(event, index) in temporalEvents"
@@ -47,7 +53,9 @@
               class="event"
               :class="{ hit: event.hit, miss: !event.hit }"
             >
-              <div class="event-time">{{ event.time }}</div>
+              <div class="event-time">
+                {{ event.time }}
+              </div>
               <div class="event-action">
                 <span class="user-icon">👤</span>
                 <span>查询 user_{{ event.userId }}</span>
@@ -60,7 +68,9 @@
         </div>
 
         <div class="cache-state">
-          <div class="cache-title">当前缓存状态</div>
+          <div class="cache-title">
+            当前缓存状态
+          </div>
           <div class="cache-items">
             <div
               v-for="item in cacheItems"
@@ -68,24 +78,32 @@
               class="cache-item"
               :class="{ active: item.active }"
             >
-              <div class="item-id">{{ item.id }}</div>
-              <div class="item-hits">命中 {{ item.hits }} 次</div>
+              <div class="item-id">
+                {{ item.id }}
+              </div>
+              <div class="item-hits">
+                命中 {{ item.hits }} 次
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Spatial Locality -->
-      <div v-if="activeTab === 'spatial'" class="spatial-demo">
+      <div
+        v-if="activeTab === 'spatial'"
+        class="spatial-demo"
+      >
         <div class="description">
-          <strong>空间局部性</strong
-          >：如果你访问了某个数据，很可能访问它附近的数据。
-          <br />
+          <strong>空间局部性</strong>：如果你访问了某个数据，很可能访问它附近的数据。
+          <br>
           <span class="example">例子：浏览商品列表时，通常会翻到下一页</span>
         </div>
 
         <div class="product-grid">
-          <div class="grid-title">商品浏览序列</div>
+          <div class="grid-title">
+            商品浏览序列
+          </div>
           <div class="products">
             <div
               v-for="product in products"
@@ -97,7 +115,9 @@
                 current: product.current
               }"
             >
-              <div class="product-id">{{ product.id }}</div>
+              <div class="product-id">
+                {{ product.id }}
+              </div>
               <div class="product-status">
                 <span v-if="product.current">👁️ 当前</span>
                 <span v-else-if="product.cached">⚡ 已缓存</span>
@@ -109,14 +129,18 @@
 
         <div class="spatial-explanation">
           <div class="explanation-item">
-            <div class="icon">📊</div>
+            <div class="icon">
+              📊
+            </div>
             <div class="text">
               <strong>预取策略</strong>：当你浏览第 5 个商品时，系统自动将 6-8
               预加载到缓存
             </div>
           </div>
           <div class="explanation-item">
-            <div class="icon">🎯</div>
+            <div class="icon">
+              🎯
+            </div>
             <div class="text">
               <strong>命中率提升</strong>：空间局部性让缓存命中率达到 70-90%
             </div>
@@ -126,22 +150,44 @@
     </div>
 
     <div class="interactive-controls">
-      <button class="control-btn" @click="addEvent">添加访问事件</button>
-      <button class="control-btn secondary" @click="reset">重置</button>
+      <button
+        class="control-btn"
+        @click="addEvent"
+      >
+        添加访问事件
+      </button>
+      <button
+        class="control-btn secondary"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
     <div class="stats">
       <div class="stat-item">
-        <div class="stat-label">总访问次数</div>
-        <div class="stat-value">{{ totalAccess }}</div>
+        <div class="stat-label">
+          总访问次数
+        </div>
+        <div class="stat-value">
+          {{ totalAccess }}
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-label">缓存命中</div>
-        <div class="stat-value hit">{{ hitCount }}</div>
+        <div class="stat-label">
+          缓存命中
+        </div>
+        <div class="stat-value hit">
+          {{ hitCount }}
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-label">命中率</div>
-        <div class="stat-value">{{ hitRate }}%</div>
+        <div class="stat-label">
+          命中率
+        </div>
+        <div class="stat-value">
+          {{ hitRate }}%
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/MultiLevelCacheDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/MultiLevelCacheDemo.vue
index cded54a..e3411f7 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/MultiLevelCacheDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/MultiLevelCacheDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="multi-level-cache-demo">
     <div class="header">
-      <div class="title">多级缓存架构</div>
-      <div class="subtitle">每一层都是上一层的"保护伞"</div>
+      <div class="title">
+        多级缓存架构
+      </div>
+      <div class="subtitle">
+        每一层都是上一层的"保护伞"
+      </div>
     </div>
 
     <div class="cache-levels">
@@ -20,33 +24,53 @@
           miss: level.status === 'miss'
         }"
       >
-        <div class="level-number">L{{ level.layer }}</div>
+        <div class="level-number">
+          L{{ level.layer }}
+        </div>
         <div class="level-content">
           <div class="level-header">
-            <div class="level-name">{{ level.name }}</div>
+            <div class="level-name">
+              {{ level.name }}
+            </div>
             <div class="level-meta">
               <span class="latency">{{ level.latency }}</span>
               <span class="capacity">{{ level.capacity }}</span>
             </div>
           </div>
-          <div class="level-description">{{ level.description }}</div>
-          <div class="level-status" v-if="level.status">
-            <span v-if="level.status === 'hit'" class="status-badge hit"
-              >✅ 命中</span
-            >
-            <span v-if="level.status === 'miss'" class="status-badge miss"
-              >❌ 未命中</span
-            >
+          <div class="level-description">
+            {{ level.description }}
+          </div>
+          <div
+            v-if="level.status"
+            class="level-status"
+          >
+            <span
+              v-if="level.status === 'hit'"
+              class="status-badge hit"
+            >✅ 命中</span>
+            <span
+              v-if="level.status === 'miss'"
+              class="status-badge miss"
+            >❌ 未命中</span>
           </div>
         </div>
-        <div class="level-arrow" v-if="index < cacheLevels.length - 1">↓</div>
+        <div
+          v-if="index < cacheLevels.length - 1"
+          class="level-arrow"
+        >
+          ↓
+        </div>
       </div>
     </div>
 
     <div class="controls">
       <div class="control-group">
         <label>请求数据</label>
-        <button class="request-btn" @click="makeRequest" :disabled="processing">
+        <button
+          class="request-btn"
+          :disabled="processing"
+          @click="makeRequest"
+        >
           {{ processing ? '处理中...' : '发起请求' }}
         </button>
       </div>
@@ -55,18 +79,29 @@
         <label>模拟场景</label>
         <select
           v-model="scenario"
-          @change="onScenarioChange"
           class="scenario-select"
+          @change="onScenarioChange"
         >
-          <option value="normal">正常访问 (70% 命中率)</option>
-          <option value="cold">冷启动 (0% 命中率)</option>
-          <option value="hot">热点数据 (95% 命中率)</option>
+          <option value="normal">
+            正常访问 (70% 命中率)
+          </option>
+          <option value="cold">
+            冷启动 (0% 命中率)
+          </option>
+          <option value="hot">
+            热点数据 (95% 命中率)
+          </option>
         </select>
       </div>
     </div>
 
-    <div class="request-flow" v-if="requestHistory.length > 0">
-      <div class="flow-title">请求流程</div>
+    <div
+      v-if="requestHistory.length > 0"
+      class="request-flow"
+    >
+      <div class="flow-title">
+        请求流程
+      </div>
       <div class="flow-timeline">
         <div
           v-for="(event, index) in requestHistory"
@@ -74,70 +109,96 @@
           class="flow-event"
           :class="event.type"
         >
-          <div class="event-level">{{ event.level }}</div>
+          <div class="event-level">
+            {{ event.level }}
+          </div>
           <div class="event-action">
             <span class="event-icon">{{ event.icon }}</span>
             <span class="event-text">{{ event.action }}</span>
           </div>
-          <div class="event-time">{{ event.time }}ms</div>
+          <div class="event-time">
+            {{ event.time }}ms
+          </div>
         </div>
       </div>
     </div>
 
     <div class="statistics">
       <div class="stat-card">
-        <div class="stat-label">总请求数</div>
-        <div class="stat-value">{{ stats.totalRequests }}</div>
+        <div class="stat-label">
+          总请求数
+        </div>
+        <div class="stat-value">
+          {{ stats.totalRequests }}
+        </div>
       </div>
       <div class="stat-card">
-        <div class="stat-label">缓存命中</div>
-        <div class="stat-value hit">{{ stats.cacheHits }}</div>
+        <div class="stat-label">
+          缓存命中
+        </div>
+        <div class="stat-value hit">
+          {{ stats.cacheHits }}
+        </div>
       </div>
       <div class="stat-card">
-        <div class="stat-label">命中率</div>
-        <div class="stat-value">{{ stats.hitRate }}%</div>
+        <div class="stat-label">
+          命中率
+        </div>
+        <div class="stat-value">
+          {{ stats.hitRate }}%
+        </div>
       </div>
       <div class="stat-card">
-        <div class="stat-label">平均响应时间</div>
-        <div class="stat-value">{{ stats.avgLatency }}ms</div>
+        <div class="stat-label">
+          平均响应时间
+        </div>
+        <div class="stat-value">
+          {{ stats.avgLatency }}ms
+        </div>
       </div>
       <div class="stat-card">
-        <div class="stat-label">数据库访问</div>
-        <div class="stat-value db">{{ stats.dbAccess }}</div>
+        <div class="stat-label">
+          数据库访问
+        </div>
+        <div class="stat-value db">
+          {{ stats.dbAccess }}
+        </div>
       </div>
     </div>
 
     <div class="explanation">
-      <div class="explanation-title">多级缓存的优势</div>
+      <div class="explanation-title">
+        多级缓存的优势
+      </div>
       <div class="explanation-grid">
         <div class="explanation-item">
-          <div class="item-icon">🛡️</div>
+          <div class="item-icon">
+            🛡️
+          </div>
           <div class="item-text">
             <strong>逐级过滤</strong>
-            <br />
-            <span class="item-detail"
-              >每层过滤掉大部分请求，最终到达数据库的可能只有 1%</span
-            >
+            <br>
+            <span class="item-detail">每层过滤掉大部分请求，最终到达数据库的可能只有 1%</span>
           </div>
         </div>
         <div class="explanation-item">
-          <div class="item-icon">⚡</div>
+          <div class="item-icon">
+            ⚡
+          </div>
           <div class="item-text">
             <strong>极速响应</strong>
-            <br />
-            <span class="item-detail"
-              >上层缓存命中时，响应时间从 50ms 降至 0-10ms</span
-            >
+            <br>
+            <span class="item-detail">上层缓存命中时，响应时间从 50ms 降至 0-10ms</span>
           </div>
         </div>
         <div class="explanation-item">
-          <div class="item-icon">💰</div>
+          <div class="item-icon">
+            💰
+          </div>
           <div class="item-text">
             <strong>降低成本</strong>
-            <br />
-            <span class="item-detail"
-              >减少昂贵的数据库查询，节省服务器资源</span
-            >
+            <br>
+            <span class="item-detail">减少昂贵的数据库查询，节省服务器资源</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cache-design/ProductCacheDemo.vue b/docs/.vitepress/theme/components/appendix/cache-design/ProductCacheDemo.vue
index e42726c..79e1918 100644
--- a/docs/.vitepress/theme/components/appendix/cache-design/ProductCacheDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cache-design/ProductCacheDemo.vue
@@ -5,38 +5,69 @@
 <template>
   <div class="product-cache-demo">
     <div class="header">
-      <div class="title">商品详情页缓存系统实战</div>
-      <div class="subtitle">完整的三级缓存架构 + 监控面板</div>
+      <div class="title">
+        商品详情页缓存系统实战
+      </div>
+      <div class="subtitle">
+        完整的三级缓存架构 + 监控面板
+      </div>
     </div>
 
     <div class="architecture-overview">
-      <div class="overview-title">系统架构</div>
+      <div class="overview-title">
+        系统架构
+      </div>
       <div class="architecture-diagram">
         <div class="layer client">
-          <div class="layer-label">客户端</div>
-          <div class="layer-icon">📱</div>
+          <div class="layer-label">
+            客户端
+          </div>
+          <div class="layer-icon">
+            📱
+          </div>
         </div>
-        <div class="arrow">↓</div>
-        <div class="layer local-cache" :class="{ hit: currentLevel === 1 }">
-          <div class="layer-label">L1: 本地缓存 (Caffeine)</div>
+        <div class="arrow">
+          ↓
+        </div>
+        <div
+          class="layer local-cache"
+          :class="{ hit: currentLevel === 1 }"
+        >
+          <div class="layer-label">
+            L1: 本地缓存 (Caffeine)
+          </div>
           <div class="layer-stats">
             <div>容量: 1000</div>
             <div>TTL: 30s</div>
             <div>命中: {{ localHits }}</div>
           </div>
         </div>
-        <div class="arrow">↓</div>
-        <div class="layer redis-cache" :class="{ hit: currentLevel === 2 }">
-          <div class="layer-label">L2: Redis 集群</div>
+        <div class="arrow">
+          ↓
+        </div>
+        <div
+          class="layer redis-cache"
+          :class="{ hit: currentLevel === 2 }"
+        >
+          <div class="layer-label">
+            L2: Redis 集群
+          </div>
           <div class="layer-stats">
             <div>容量: 100万</div>
             <div>TTL: 5min</div>
             <div>命中: {{ redisHits }}</div>
           </div>
         </div>
-        <div class="arrow">↓</div>
-        <div class="layer database" :class="{ hit: currentLevel === 3 }">
-          <div class="layer-label">L3: MySQL 数据库</div>
+        <div class="arrow">
+          ↓
+        </div>
+        <div
+          class="layer database"
+          :class="{ hit: currentLevel === 3 }"
+        >
+          <div class="layer-label">
+            L3: MySQL 数据库
+          </div>
           <div class="layer-stats">
             <div>持久化存储</div>
             <div>查询: {{ dbQueries }}</div>
@@ -47,21 +78,35 @@
 
     <div class="demo-sections">
       <div class="section query-demo">
-        <div class="section-title">查询商品</div>
+        <div class="section-title">
+          查询商品
+        </div>
         <div class="query-controls">
           <input
             v-model="productId"
             type="text"
             placeholder="输入商品ID (如: P001)"
             class="product-input"
-          />
-          <button class="query-btn" @click="queryProduct" :disabled="querying">
+          >
+          <button
+            class="query-btn"
+            :disabled="querying"
+            @click="queryProduct"
+          >
             {{ querying ? '查询中...' : '查询' }}
           </button>
-          <button class="reset-btn" @click="resetDemo">重置</button>
+          <button
+            class="reset-btn"
+            @click="resetDemo"
+          >
+            重置
+          </button>
         </div>
 
-        <div class="query-result" v-if="queryResult">
+        <div
+          v-if="queryResult"
+          class="query-result"
+        >
           <div class="result-header">
             <span class="result-icon">{{ queryResult.icon }}</span>
             <span class="result-title">{{ queryResult.title }}</span>
@@ -95,8 +140,13 @@
           </div>
         </div>
 
-        <div class="query-flow" v-if="queryFlow.length > 0">
-          <div class="flow-title">查询流程</div>
+        <div
+          v-if="queryFlow.length > 0"
+          class="query-flow"
+        >
+          <div class="flow-title">
+            查询流程
+          </div>
           <div class="flow-steps">
             <div
               v-for="(step, index) in queryFlow"
@@ -104,50 +154,82 @@
               class="flow-step"
               :class="step.type"
             >
-              <div class="step-level">{{ step.level }}</div>
-              <div class="step-result">{{ step.result }}</div>
-              <div class="step-time">{{ step.time }}ms</div>
+              <div class="step-level">
+                {{ step.level }}
+              </div>
+              <div class="step-result">
+                {{ step.result }}
+              </div>
+              <div class="step-time">
+                {{ step.time }}ms
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="section cache-monitor">
-        <div class="section-title">缓存监控</div>
+        <div class="section-title">
+          缓存监控
+        </div>
 
         <div class="metrics-grid">
           <div class="metric-card">
-            <div class="metric-label">总请求数</div>
-            <div class="metric-value">{{ metrics.totalRequests }}</div>
+            <div class="metric-label">
+              总请求数
+            </div>
+            <div class="metric-value">
+              {{ metrics.totalRequests }}
+            </div>
           </div>
           <div class="metric-card">
-            <div class="metric-label">本地缓存命中</div>
-            <div class="metric-value local">{{ localHits }}</div>
+            <div class="metric-label">
+              本地缓存命中
+            </div>
+            <div class="metric-value local">
+              {{ localHits }}
+            </div>
           </div>
           <div class="metric-card">
-            <div class="metric-label">Redis命中</div>
-            <div class="metric-value redis">{{ redisHits }}</div>
+            <div class="metric-label">
+              Redis命中
+            </div>
+            <div class="metric-value redis">
+              {{ redisHits }}
+            </div>
           </div>
           <div class="metric-card">
-            <div class="metric-label">数据库查询</div>
-            <div class="metric-value db">{{ dbQueries }}</div>
+            <div class="metric-label">
+              数据库查询
+            </div>
+            <div class="metric-value db">
+              {{ dbQueries }}
+            </div>
           </div>
         </div>
 
         <div class="hit-rate-display">
-          <div class="rate-label">整体命中率</div>
-          <div class="rate-value">{{ overallHitRate }}%</div>
+          <div class="rate-label">
+            整体命中率
+          </div>
+          <div class="rate-value">
+            {{ overallHitRate }}%
+          </div>
           <div class="rate-bar">
             <div
               class="rate-fill"
               :style="{ width: overallHitRate + '%' }"
-            ></div>
+            />
+          </div>
+          <div class="rate-target">
+            目标: > 90%
           </div>
-          <div class="rate-target">目标: > 90%</div>
         </div>
 
         <div class="cache-stats-detail">
-          <div class="stats-title">详细统计</div>
+          <div class="stats-title">
+            详细统计
+          </div>
           <div class="stats-list">
             <div class="stat-item">
               <span class="stat-label">本地缓存命中率:</span>
@@ -171,35 +253,61 @@
     </div>
 
     <div class="features">
-      <div class="feature-title">核心特性</div>
+      <div class="feature-title">
+        核心特性
+      </div>
       <div class="feature-grid">
         <div class="feature-item">
-          <div class="feature-icon">🛡️</div>
-          <div class="feature-name">多级缓存</div>
+          <div class="feature-icon">
+            🛡️
+          </div>
+          <div class="feature-name">
+            多级缓存
+          </div>
           <div class="feature-desc">
             本地缓存 + Redis 双层防护，减少 99% 数据库查询
           </div>
         </div>
         <div class="feature-item">
-          <div class="feature-icon">🔒</div>
-          <div class="feature-name">防击穿</div>
-          <div class="feature-desc">互斥锁保护热点数据，避免并发查询数据库</div>
+          <div class="feature-icon">
+            🔒
+          </div>
+          <div class="feature-name">
+            防击穿
+          </div>
+          <div class="feature-desc">
+            互斥锁保护热点数据，避免并发查询数据库
+          </div>
         </div>
         <div class="feature-item">
-          <div class="feature-icon">🎯</div>
-          <div class="feature-name">防穿透</div>
-          <div class="feature-desc">缓存空对象，防止查询不存在的商品</div>
+          <div class="feature-icon">
+            🎯
+          </div>
+          <div class="feature-name">
+            防穿透
+          </div>
+          <div class="feature-desc">
+            缓存空对象，防止查询不存在的商品
+          </div>
         </div>
         <div class="feature-item">
-          <div class="feature-icon">⏰</div>
-          <div class="feature-name">随机 TTL</div>
-          <div class="feature-desc">避免缓存雪崩，过期时间加随机值</div>
+          <div class="feature-icon">
+            ⏰
+          </div>
+          <div class="feature-name">
+            随机 TTL
+          </div>
+          <div class="feature-desc">
+            避免缓存雪崩，过期时间加随机值
+          </div>
         </div>
       </div>
     </div>
 
     <div class="code-preview">
-      <div class="code-title">核心代码片段</div>
+      <div class="code-title">
+        核心代码片段
+      </div>
       <pre class="code-block"><code>// 三级缓存查询
 public Product getProduct(String productId) {
     // L1: 本地缓存
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
index f95708e..f2db1dd 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
@@ -15,12 +15,18 @@
   <div class="animation-demo">
     <div class="control-panel">
       <div class="playback-controls">
-        <button class="play-btn" @click="togglePlay">
+        <button
+          class="play-btn"
+          @click="togglePlay"
+        >
           <span class="icon">{{ isPlaying ? '⏸️' : '▶️' }}</span>
           {{ isPlaying ? 'Pause' : 'Play' }}
         </button>
 
-        <button class="reset-btn" @click="resetAnimation">
+        <button
+          class="reset-btn"
+          @click="resetAnimation"
+        >
           <span class="icon">🔄</span>
           Reset / 重置
         </button>
@@ -29,9 +35,15 @@
       <div class="animation-selector">
         <label>Animation / 动画类型</label>
         <select v-model="animationType">
-          <option value="bounce">Bouncing Ball / 弹跳球</option>
-          <option value="rotate">Rotating Square / 旋转方块</option>
-          <option value="wave">Wave / 波浪</option>
+          <option value="bounce">
+            Bouncing Ball / 弹跳球
+          </option>
+          <option value="rotate">
+            Rotating Square / 旋转方块
+          </option>
+          <option value="wave">
+            Wave / 波浪
+          </option>
         </select>
       </div>
 
@@ -39,17 +51,22 @@
         <div class="param-row">
           <label>Speed / 速度: {{ speed }}x</label>
           <input
-            type="range"
             v-model.number="speed"
+            type="range"
             min="0.1"
             max="3"
             step="0.1"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Object Count / 对象数量: {{ objectCount }}</label>
-          <input type="range" v-model.number="objectCount" min="1" max="10" />
+          <input
+            v-model.number="objectCount"
+            type="range"
+            min="1"
+            max="10"
+          >
         </div>
       </div>
 
@@ -66,7 +83,11 @@
     </div>
 
     <div class="canvas-container">
-      <canvas ref="canvasRef" width="600" height="400"></canvas>
+      <canvas
+        ref="canvasRef"
+        width="600"
+        height="400"
+      />
     </div>
 
     <div class="code-display">
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
index 66c49e3..033c34e 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
@@ -38,53 +38,93 @@
         <div class="parameters">
           <div class="param-row">
             <label>Fill Color / 填充颜色</label>
-            <input type="color" v-model="fillColor" />
+            <input
+              v-model="fillColor"
+              type="color"
+            >
           </div>
 
           <div class="param-row">
             <label>Stroke Color / 描边颜色</label>
-            <input type="color" v-model="strokeColor" />
+            <input
+              v-model="strokeColor"
+              type="color"
+            >
           </div>
 
           <div class="param-row">
             <label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
-            <input type="range" v-model.number="strokeWidth" min="1" max="20" />
+            <input
+              v-model.number="strokeWidth"
+              type="range"
+              min="1"
+              max="20"
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'rect'">
+          <div
+            v-if="currentShape === 'rect'"
+            class="param-row"
+          >
             <label>Size / 大小: {{ rectSize }}px</label>
-            <input type="range" v-model.number="rectSize" min="20" max="200" />
+            <input
+              v-model.number="rectSize"
+              type="range"
+              min="20"
+              max="200"
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'circle'">
+          <div
+            v-if="currentShape === 'circle'"
+            class="param-row"
+          >
             <label>Radius / 半径: {{ circleRadius }}px</label>
             <input
-              type="range"
               v-model.number="circleRadius"
+              type="range"
               min="10"
               max="150"
-            />
+            >
           </div>
 
-          <div class="param-row" v-if="currentShape === 'line'">
+          <div
+            v-if="currentShape === 'line'"
+            class="param-row"
+          >
             <label>Line Length / 线条长度: {{ lineLength }}px</label>
-            <input type="range" v-model.number="lineLength" min="50" max="300" />
+            <input
+              v-model.number="lineLength"
+              type="range"
+              min="50"
+              max="300"
+            >
           </div>
         </div>
 
-        <button class="draw-btn" @click="draw">
+        <button
+          class="draw-btn"
+          @click="draw"
+        >
           <span class="icon">🎨</span>
           Draw / 绘制
         </button>
 
-        <button class="clear-btn" @click="clearCanvas">
+        <button
+          class="clear-btn"
+          @click="clearCanvas"
+        >
           <span class="icon">🗑️</span>
           Clear / 清除
         </button>
       </div>
 
       <div class="canvas-container">
-        <canvas ref="canvasRef" width="600" height="400"></canvas>
+        <canvas
+          ref="canvasRef"
+          width="600"
+          height="400"
+        />
       </div>
 
       <div class="code-display">
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
index d0582fd..0bf09ba 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
@@ -15,17 +15,26 @@
     <div class="control-panel">
       <div class="toggle-group">
         <label class="toggle-option">
-          <input type="checkbox" v-model="showGrid" />
+          <input
+            v-model="showGrid"
+            type="checkbox"
+          >
           <span>Show Grid / 显示网格</span>
         </label>
 
         <label class="toggle-option">
-          <input type="checkbox" v-model="showAxis" />
+          <input
+            v-model="showAxis"
+            type="checkbox"
+          >
           <span>Show Axis / 显示坐标轴</span>
         </label>
 
         <label class="toggle-option">
-          <input type="checkbox" v-model="showCoordinates" />
+          <input
+            v-model="showCoordinates"
+            type="checkbox"
+          >
           <span>Show Coordinates / 显示坐标</span>
         </label>
       </div>
@@ -43,11 +52,12 @@
           <span class="label">Mouse Position:</span>
           <span class="value">({{ mouseX }}, {{ mouseY }})</span>
         </div>
-        <div class="info-item" v-if="selectedPoint">
+        <div
+          v-if="selectedPoint"
+          class="info-item"
+        >
           <span class="label">Selected Point:</span>
-          <span class="value"
-            >({{ selectedPoint.x }}, {{ selectedPoint.y }})</span
-          >
+          <span class="value">({{ selectedPoint.x }}, {{ selectedPoint.y }})</span>
         </div>
       </div>
     </div>
@@ -61,7 +71,7 @@
         @mousedown="handleMouseDown"
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseUp"
-      ></canvas>
+      />
     </div>
 
     <div class="explanation">
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
index 4d94f93..7c5bc45 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
@@ -63,7 +63,10 @@
         </div>
       </div>
 
-      <button class="clear-btn" @click="clearAll">
+      <button
+        class="clear-btn"
+        @click="clearAll"
+      >
         <span class="icon">🗑️</span>
         Clear All / 清除全部
       </button>
@@ -74,14 +77,14 @@
         ref="canvasRef"
         width="600"
         height="400"
+        tabindex="0"
         @click="handleClick"
         @mousemove="handleMouseMove"
         @mousedown="handleMouseDown"
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseLeave"
-        tabindex="0"
         @keydown="handleKeyDown"
-      ></canvas>
+      />
     </div>
 
     <div class="code-display">
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
index a6f982b..f343392 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
@@ -31,39 +31,44 @@
         <div class="param-row">
           <label>Particle Count / 粒子数量: {{ maxParticles }}</label>
           <input
-            type="range"
             v-model.number="maxParticles"
+            type="range"
             min="50"
             max="500"
             step="50"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Particle Size / 粒子大小: {{ particleSize }}</label>
-          <input type="range" v-model.number="particleSize" min="1" max="10" />
+          <input
+            v-model.number="particleSize"
+            type="range"
+            min="1"
+            max="10"
+          >
         </div>
 
         <div class="param-row">
           <label>Speed / 速度: {{ speed }}</label>
           <input
-            type="range"
             v-model.number="speed"
+            type="range"
             min="0.5"
             max="3"
             step="0.1"
-          />
+          >
         </div>
 
         <div class="param-row">
           <label>Gravity / 重力: {{ gravity }}</label>
           <input
-            type="range"
             v-model.number="gravity"
+            type="range"
             min="0"
             max="0.5"
             step="0.05"
-          />
+          >
         </div>
       </div>
 
@@ -78,7 +83,10 @@
         </div>
       </div>
 
-      <button class="clear-btn" @click="clearParticles">
+      <button
+        class="clear-btn"
+        @click="clearParticles"
+      >
         <span class="icon">🗑️</span>
         Clear Particles / 清除粒子
       </button>
@@ -91,7 +99,7 @@
         height="400"
         @mousemove="handleMouseMove"
         @click="handleClick"
-      ></canvas>
+      />
     </div>
 
     <div class="code-display">
@@ -162,18 +170,18 @@ class Particle {
   constructor(x, y) {
     this.x = x
     this.y = y
-    this.vx = (Math.random() - 0.5) * ${speed}
-    this.vy = (Math.random() - 0.5) * ${speed}
+    this.vx = (Math.random() - 0.5) * ${speed.value}
+    this.vy = (Math.random() - 0.5) * ${speed.value}
     this.life = 1.0
     this.decay = 0.01 + Math.random() * 0.02
-    this.size = ${particleSize}
+    this.size = ${particleSize.value}
     this.color = this.randomColor()
   }
 
   update() {
     this.x += this.vx
     this.y += this.vy
-    this.vy += ${gravity}  // 重力
+    this.vy += ${gravity.value}  // 重力
     this.life -= this.decay
   }
 
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
index f94292c..50539bd 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
@@ -32,31 +32,49 @@
         <div class="param-row">
           <label>Object Count / 对象数量: {{ objectCount }}</label>
           <input
-            type="range"
             v-model.number="objectCount"
+            type="range"
             min="100"
             max="5000"
             step="100"
             @input="resetTest"
-          />
+          >
         </div>
       </div>
 
       <div class="optimization-toggles">
         <label>Optimizations / 优化技术</label>
         <div class="toggle-grid">
-          <label class="toggle-option" v-if="currentTest === 'redraw'">
-            <input type="checkbox" v-model="useDirtyRect" />
+          <label
+            v-if="currentTest === 'redraw'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useDirtyRect"
+              type="checkbox"
+            >
             <span>Dirty Rect / 脏矩形</span>
           </label>
 
-          <label class="toggle-option" v-if="currentTest === 'layer'">
-            <input type="checkbox" v-model="useOffscreenCanvas" />
+          <label
+            v-if="currentTest === 'layer'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useOffscreenCanvas"
+              type="checkbox"
+            >
             <span>Offscreen Canvas / 离屏画布</span>
           </label>
 
-          <label class="toggle-option" v-if="currentTest === 'batch'">
-            <input type="checkbox" v-model="useBatching" />
+          <label
+            v-if="currentTest === 'batch'"
+            class="toggle-option"
+          >
+            <input
+              v-model="useBatching"
+              type="checkbox"
+            >
             <span>Batch Rendering / 批量渲染</span>
           </label>
         </div>
@@ -86,24 +104,34 @@
         </div>
       </div>
 
-      <button class="reset-btn" @click="resetTest">
+      <button
+        class="reset-btn"
+        @click="resetTest"
+      >
         <span class="icon">🔄</span>
         Restart Test / 重新测试
       </button>
     </div>
 
     <div class="canvas-container">
-      <canvas ref="canvasRef" width="600" height="400"></canvas>
+      <canvas
+        ref="canvasRef"
+        width="600"
+        height="400"
+      />
       <canvas
         v-if="useOffscreenCanvas"
         ref="offscreenCanvasRef"
         width="600"
         height="400"
         style="display: none"
-      ></canvas>
+      />
     </div>
 
-    <div class="comparison" v-if="showComparison">
+    <div
+      v-if="showComparison"
+      class="comparison"
+    >
       <h4>Performance Comparison / 性能对比</h4>
       <div class="comparison-table">
         <table>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
index 09a716e..6c5746a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
@@ -9,36 +9,78 @@
     <div class="main-area">
       <div class="aksk-card">
         <div class="card-header">
-          <span class="status-badge" :class="akStatus">{{ statusText }}</span>
+          <span
+            class="status-badge"
+            :class="akStatus"
+          >{{ statusText }}</span>
           <span class="age">已创建 {{ akAge }} 天</span>
         </div>
         <div class="credentials">
           <div class="cred-row">
             <span class="label">Access Key:</span>
             <span class="value">{{ maskedAK }}</span>
-            <button class="toggle-btn" @click="showAK = !showAK">{{ showAK ? '🙈' : '👁️' }}</button>
+            <button
+              class="toggle-btn"
+              @click="showAK = !showAK"
+            >
+              {{ showAK ? '🙈' : '👁️' }}
+            </button>
           </div>
           <div class="cred-row">
             <span class="label">Secret Key:</span>
             <span class="value">{{ maskedSK }}</span>
-            <button class="toggle-btn" @click="showSK = !showSK">{{ showSK ? '🙈' : '👁️' }}</button>
+            <button
+              class="toggle-btn"
+              @click="showSK = !showSK"
+            >
+              {{ showSK ? '🙈' : '👁️' }}
+            </button>
           </div>
         </div>
         <div class="stats">
-          <div class="stat"><span class="v">{{ apiCalls }}</span><span class="l">API调用</span></div>
-          <div class="stat"><span class="v">{{ lastUsed }}</span><span class="l">最后使用</span></div>
+          <div class="stat">
+            <span class="v">{{ apiCalls }}</span><span class="l">API调用</span>
+          </div>
+          <div class="stat">
+            <span class="v">{{ lastUsed }}</span><span class="l">最后使用</span>
+          </div>
         </div>
       </div>
 
       <div class="action-panel">
-        <button class="btn primary" @click="rotateKey" :disabled="isRotating">🔄 轮换</button>
-        <button class="btn warning" @click="deactivateKey" :disabled="akStatus === 'inactive'">⏸️ 禁用</button>
-        <button class="btn danger" @click="deleteKey">🗑️ 删除</button>
+        <button
+          class="btn primary"
+          :disabled="isRotating"
+          @click="rotateKey"
+        >
+          🔄 轮换
+        </button>
+        <button
+          class="btn warning"
+          :disabled="akStatus === 'inactive'"
+          @click="deactivateKey"
+        >
+          ⏸️ 禁用
+        </button>
+        <button
+          class="btn danger"
+          @click="deleteKey"
+        >
+          🗑️ 删除
+        </button>
       </div>
     </div>
 
-    <div class="rotation-bar" v-if="isRotating">
-      <div class="bar"><div class="fill" :style="{ width: rotationProgress + '%' }"></div></div>
+    <div
+      v-if="isRotating"
+      class="rotation-bar"
+    >
+      <div class="bar">
+        <div
+          class="fill"
+          :style="{ width: rotationProgress + '%' }"
+        />
+      </div>
       <span class="text">{{ rotationStatus }}</span>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
index 3c79702..50320d5 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
@@ -17,12 +17,24 @@
         <div class="item-header">
           <span class="item-icon">{{ practice.icon }}</span>
           <span class="item-title">{{ practice.title }}</span>
-          <span class="item-priority" :class="practice.priority">{{ practice.priorityText }}</span>
+          <span
+            class="item-priority"
+            :class="practice.priority"
+          >{{ practice.priorityText }}</span>
         </div>
-        <div class="item-body" v-if="expandedCard === index">
-          <p class="item-desc">{{ practice.description }}</p>
+        <div
+          v-if="expandedCard === index"
+          class="item-body"
+        >
+          <p class="item-desc">
+            {{ practice.description }}
+          </p>
           <div class="item-checks">
-            <span v-for="(item, i) in practice.checklist.slice(0, 3)" :key="i" class="check-tag">✓ {{ item }}</span>
+            <span
+              v-for="(item, i) in practice.checklist.slice(0, 3)"
+              :key="i"
+              class="check-tag"
+            >✓ {{ item }}</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
index df8eead..17e10e0 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
@@ -8,26 +8,46 @@
 
     <div class="flow-diagram">
       <div class="account-box source">
-        <div class="account-header">账号 A（源）</div>
-        <div class="entity">IAM User</div>
-        <div class="action">sts:AssumeRole</div>
+        <div class="account-header">
+          账号 A（源）
+        </div>
+        <div class="entity">
+          IAM User
+        </div>
+        <div class="action">
+          sts:AssumeRole
+        </div>
       </div>
       <span class="arrow">→</span>
       <div class="account-box sts">
-        <div class="account-header">STS 服务</div>
-        <div class="step">验证身份</div>
-        <div class="step">生成临时凭证</div>
+        <div class="account-header">
+          STS 服务
+        </div>
+        <div class="step">
+          验证身份
+        </div>
+        <div class="step">
+          生成临时凭证
+        </div>
       </div>
       <span class="arrow">→</span>
       <div class="account-box target">
-        <div class="account-header">账号 B（目标）</div>
-        <div class="entity">CrossAccountRole</div>
-        <div class="resource">访问 S3/EC2</div>
+        <div class="account-header">
+          账号 B（目标）
+        </div>
+        <div class="entity">
+          CrossAccountRole
+        </div>
+        <div class="resource">
+          访问 S3/EC2
+        </div>
       </div>
     </div>
 
     <div class="code-block">
-      <div class="code-title">Python 示例</div>
+      <div class="code-title">
+        Python 示例
+      </div>
       <pre><code>sts = boto3.client('sts')
 assumed = sts.assume_role(
     RoleArn='arn:aws:iam::123456789012:role/CrossAccountRole',
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
index 2423984..e1d38e0 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
@@ -26,10 +26,16 @@
           <span class="detail-icon">{{ selectedLayerData.icon }}</span>
           <span class="detail-name">{{ selectedLayerData.name }}</span>
         </div>
-        <div class="detail-desc">{{ selectedLayerData.description }}</div>
+        <div class="detail-desc">
+          {{ selectedLayerData.description }}
+        </div>
         <div class="detail-examples">
           <span class="example-label">示例：</span>
-          <span v-for="(example, i) in selectedLayerData.examples.slice(0, 2)" :key="i" class="example-tag">{{ example }}</span>
+          <span
+            v-for="(example, i) in selectedLayerData.examples.slice(0, 2)"
+            :key="i"
+            class="example-tag"
+          >{{ example }}</span>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
index f346765..cba7c3b 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
@@ -8,7 +8,9 @@
 
     <div class="main-area">
       <div class="platform-col aws">
-        <div class="platform-header">AWS IAM</div>
+        <div class="platform-header">
+          AWS IAM
+        </div>
         <div
           v-for="(feature, index) in features"
           :key="index"
@@ -22,24 +24,41 @@
       </div>
 
       <div class="comparison-col">
-        <div class="comparison-card" v-if="selectedFeatureData">
-          <div class="comp-title">{{ selectedFeatureData.name }}</div>
+        <div
+          v-if="selectedFeatureData"
+          class="comparison-card"
+        >
+          <div class="comp-title">
+            {{ selectedFeatureData.name }}
+          </div>
           <div class="comp-row">
             <div class="comp-item aws">
-              <div class="comp-label">AWS IAM</div>
-              <div class="comp-desc">{{ selectedFeatureData.awsDetail }}</div>
+              <div class="comp-label">
+                AWS IAM
+              </div>
+              <div class="comp-desc">
+                {{ selectedFeatureData.awsDetail }}
+              </div>
+            </div>
+            <div class="comp-vs">
+              VS
             </div>
-            <div class="comp-vs">VS</div>
             <div class="comp-item ram">
-              <div class="comp-label">阿里云 RAM</div>
-              <div class="comp-desc">{{ selectedFeatureData.ramDetail }}</div>
+              <div class="comp-label">
+                阿里云 RAM
+              </div>
+              <div class="comp-desc">
+                {{ selectedFeatureData.ramDetail }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="platform-col ram">
-        <div class="platform-header">阿里云 RAM</div>
+        <div class="platform-header">
+          阿里云 RAM
+        </div>
         <div
           v-for="(feature, index) in features"
           :key="index"
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
index 0740bfe..5cba687 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
@@ -20,9 +20,16 @@
     </div>
 
     <div class="detail-panel">
-      <div class="detail-title">{{ currentStepData.title }}</div>
-      <p class="detail-desc">{{ currentStepData.detail }}</p>
-      <div class="flow-row" v-if="currentStepData.flow">
+      <div class="detail-title">
+        {{ currentStepData.title }}
+      </div>
+      <p class="detail-desc">
+        {{ currentStepData.detail }}
+      </p>
+      <div
+        v-if="currentStepData.flow"
+        class="flow-row"
+      >
         <span class="entity user">{{ currentStepData.flow[0].from.name }}</span>
         <span class="action">{{ currentStepData.flow[0].action }}</span>
         <span class="entity cloud">{{ currentStepData.flow[0].to.name }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
index 50c118c..70c4ca0 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
@@ -8,43 +8,94 @@
 
     <div class="main-area">
       <div class="mfa-flow">
-        <div class="auth-step" :class="{ active: step >= 1, completed: step > 1 }">
+        <div
+          class="auth-step"
+          :class="{ active: step >= 1, completed: step > 1 }"
+        >
           <span class="step-icon">🔐</span>
           <span class="step-label">密码</span>
         </div>
         <span class="step-arrow">→</span>
-        <div class="auth-step" :class="{ active: step >= 2, completed: step > 2 }">
+        <div
+          class="auth-step"
+          :class="{ active: step >= 2, completed: step > 2 }"
+        >
           <span class="step-icon">📱</span>
           <span class="step-label">MFA</span>
         </div>
         <span class="step-arrow">→</span>
-        <div class="auth-step" :class="{ active: step >= 3 }">
+        <div
+          class="auth-step"
+          :class="{ active: step >= 3 }"
+        >
           <span class="step-icon">✅</span>
           <span class="step-label">成功</span>
         </div>
       </div>
 
-      <div class="auth-panel" v-if="step === 1">
-        <div class="panel-title">请输入密码</div>
-        <input type="password" v-model="password" placeholder="输入任意密码" @keyup.enter="verifyPassword" />
-        <button @click="verifyPassword" :disabled="!password">验证密码</button>
+      <div
+        v-if="step === 1"
+        class="auth-panel"
+      >
+        <div class="panel-title">
+          请输入密码
+        </div>
+        <input
+          v-model="password"
+          type="password"
+          placeholder="输入任意密码"
+          @keyup.enter="verifyPassword"
+        >
+        <button
+          :disabled="!password"
+          @click="verifyPassword"
+        >
+          验证密码
+        </button>
       </div>
 
-      <div class="auth-panel" v-if="step === 2">
-        <div class="panel-title">MFA 验证码</div>
+      <div
+        v-if="step === 2"
+        class="auth-panel"
+      >
+        <div class="panel-title">
+          MFA 验证码
+        </div>
         <div class="totp-display">
           <span class="totp-code">{{ totpCode }}</span>
-          <div class="totp-hint">模拟验证码</div>
+          <div class="totp-hint">
+            模拟验证码
+          </div>
         </div>
-        <input type="text" v-model="userCode" placeholder="输入上方验证码" maxlength="6" @keyup.enter="verifyMFA" />
-        <button @click="verifyMFA" :disabled="userCode.length !== 6">验证</button>
+        <input
+          v-model="userCode"
+          type="text"
+          placeholder="输入上方验证码"
+          maxlength="6"
+          @keyup.enter="verifyMFA"
+        >
+        <button
+          :disabled="userCode.length !== 6"
+          @click="verifyMFA"
+        >
+          验证
+        </button>
       </div>
 
-      <div class="success-panel" v-if="step === 3">
+      <div
+        v-if="step === 3"
+        class="success-panel"
+      >
         <span class="success-icon">🎉</span>
-        <div class="success-title">登录成功！</div>
-        <div class="success-desc">已通过 MFA 双因素认证</div>
-        <button @click="reset">重新演示</button>
+        <div class="success-title">
+          登录成功！
+        </div>
+        <div class="success-desc">
+          已通过 MFA 双因素认证
+        </div>
+        <button @click="reset">
+          重新演示
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
index 5595d73..22ddef2 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
@@ -23,8 +23,13 @@
         </div>
       </div>
 
-      <div class="detail-panel" v-if="selectedLevelData">
-        <div class="detail-title">{{ selectedLevelData.name }}</div>
+      <div
+        v-if="selectedLevelData"
+        class="detail-panel"
+      >
+        <div class="detail-title">
+          {{ selectedLevelData.name }}
+        </div>
         <div class="detail-row">
           <span class="label">范围：</span>
           <span class="value">{{ selectedLevelData.scope }}</span>
@@ -34,7 +39,11 @@
           <span class="value">{{ selectedLevelData.scenario }}</span>
         </div>
         <div class="perms-list">
-          <span v-for="(perm, i) in selectedLevelData.permissions.slice(0, 3)" :key="i" class="perm-tag">{{ perm.name }}</span>
+          <span
+            v-for="(perm, i) in selectedLevelData.permissions.slice(0, 3)"
+            :key="i"
+            class="perm-tag"
+          >{{ perm.name }}</span>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
index e1a7d0c..45c5e5a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
@@ -8,7 +8,9 @@
 
     <div class="editor-layout">
       <div class="editor-panel">
-        <div class="panel-title">策略编辑器</div>
+        <div class="panel-title">
+          策略编辑器
+        </div>
         <div class="action-list">
           <div 
             v-for="action in actions" 
@@ -17,8 +19,8 @@
           >
             <label class="checkbox">
               <input 
-                type="checkbox" 
-                v-model="selectedActions"
+                v-model="selectedActions" 
+                type="checkbox"
                 :value="action.id"
               >
               <span>{{ action.name }}</span>
@@ -29,13 +31,17 @@
       </div>
       
       <div class="preview-panel">
-        <div class="panel-title">生成的策略</div>
+        <div class="panel-title">
+          生成的策略
+        </div>
         <pre><code>{{ generatedPolicy }}</code></pre>
       </div>
     </div>
     
     <div class="effect-preview">
-      <div class="effect-title">权限效果预览</div>
+      <div class="effect-title">
+        权限效果预览
+      </div>
       <div class="effect-list">
         <div 
           v-for="effect in effectList" 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
index 10be0d0..4fcd872 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
@@ -8,7 +8,10 @@
 
     <div class="main-area">
       <div class="role-section">
-        <div class="role-card" @click="showTrust = !showTrust">
+        <div
+          class="role-card"
+          @click="showTrust = !showTrust"
+        >
           <span class="role-icon">🎭</span>
           <div class="role-info">
             <span class="role-name">CrossAccountS3AccessRole</span>
@@ -16,9 +19,18 @@
           </div>
           <span class="expand-icon">{{ showTrust ? '▼' : '▶' }}</span>
         </div>
-        <div class="trust-policy" v-if="showTrust">
-          <div class="trust-title">🔐 信任策略</div>
-          <div class="trust-item" v-for="(t, i) in trustPolicy" :key="i">
+        <div
+          v-if="showTrust"
+          class="trust-policy"
+        >
+          <div class="trust-title">
+            🔐 信任策略
+          </div>
+          <div
+            v-for="(t, i) in trustPolicy"
+            :key="i"
+            class="trust-item"
+          >
             <span class="principal">{{ t.principal }}</span>
             <span class="action">{{ t.action }}</span>
           </div>
@@ -37,9 +49,19 @@
             <span class="policy-icon">{{ policy.icon }}</span>
             <span class="policy-name">{{ policy.name }}</span>
           </div>
-          <div class="policy-perms" v-if="selectedPolicy === index">
-            <div class="perm" v-for="(p, i) in policy.permissions" :key="i">
-              <span class="effect" :class="p.effect.toLowerCase()">{{ p.effect }}</span>
+          <div
+            v-if="selectedPolicy === index"
+            class="policy-perms"
+          >
+            <div
+              v-for="(p, i) in policy.permissions"
+              :key="i"
+              class="perm"
+            >
+              <span
+                class="effect"
+                :class="p.effect.toLowerCase()"
+              >{{ p.effect }}</span>
               <span class="action">{{ p.action }}</span>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
index a566f58..b2391bb 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ApiCallDemo.vue
@@ -7,10 +7,16 @@
         class="step"
         :class="{ active: currentStep >= index, completed: currentStep > index }"
       >
-        <div class="step-num">{{ index + 1 }}</div>
+        <div class="step-num">
+          {{ index + 1 }}
+        </div>
         <div class="step-content">
-          <div class="step-title">{{ step.title }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
+          <div class="step-title">
+            {{ step.title }}
+          </div>
+          <div class="step-desc">
+            {{ step.desc }}
+          </div>
         </div>
       </div>
     </div>
@@ -18,18 +24,26 @@
     <div class="action-panel">
       <button 
         class="action-btn" 
-        @click="nextStep"
         :disabled="currentStep >= steps.length"
+        @click="nextStep"
       >
         {{ currentStep >= steps.length ? '已完成' : '下一步' }}
       </button>
-      <button class="action-btn outline" @click="reset">
+      <button
+        class="action-btn outline"
+        @click="reset"
+      >
         重置
       </button>
     </div>
     
-    <div v-if="currentStep > 0" class="code-preview">
-      <div class="code-title">{{ steps[currentStep - 1].codeTitle }}</div>
+    <div
+      v-if="currentStep > 0"
+      class="code-preview"
+    >
+      <div class="code-title">
+        {{ steps[currentStep - 1].codeTitle }}
+      </div>
       <pre><code>{{ steps[currentStep - 1].code }}</code></pre>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
index 997d6db..b4221fa 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/AwsVsAliyunDemo.vue
@@ -2,7 +2,9 @@
   <div class="aws-vs-aliyun-demo">
     <div class="demo-header">
       <h4>AWS vs 阿里云 核心差异</h4>
-      <p class="demo-desc">点击切换查看不同维度的对比</p>
+      <p class="demo-desc">
+        点击切换查看不同维度的对比
+      </p>
     </div>
 
     <div class="comparison-tabs">
@@ -18,13 +20,23 @@
     </div>
 
     <div class="comparison-content">
-      <transition name="fade" mode="out-in">
-        <div :key="activeTab" class="tab-content">
+      <transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          :key="activeTab"
+          class="tab-content"
+        >
           <div class="vs-cards">
             <div class="vs-card aws-card">
               <div class="card-header">
-                <div class="logo">AWS</div>
-                <div class="subtitle">Amazon Web Services</div>
+                <div class="logo">
+                  AWS
+                </div>
+                <div class="subtitle">
+                  Amazon Web Services
+                </div>
               </div>
               <div class="card-body">
                 <div
@@ -39,13 +51,19 @@
             </div>
 
             <div class="vs-divider">
-              <div class="vs-text">VS</div>
+              <div class="vs-text">
+                VS
+              </div>
             </div>
 
             <div class="vs-card aliyun-card">
               <div class="card-header">
-                <div class="logo aliyun-logo">阿里云</div>
-                <div class="subtitle">Alibaba Cloud</div>
+                <div class="logo aliyun-logo">
+                  阿里云
+                </div>
+                <div class="subtitle">
+                  Alibaba Cloud
+                </div>
               </div>
               <div class="card-body">
                 <div
@@ -61,8 +79,12 @@
           </div>
 
           <div class="verdict-box">
-            <div class="verdict-title">💡 选型建议</div>
-            <div class="verdict-text">{{ currentComparison.verdict }}</div>
+            <div class="verdict-title">
+              💡 选型建议
+            </div>
+            <div class="verdict-text">
+              {{ currentComparison.verdict }}
+            </div>
           </div>
         </div>
       </transition>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
index 53d73af..21d99c2 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudHistoryDemo.vue
@@ -8,18 +8,31 @@
         :class="{ active: selectedEvent === index }"
         @click="selectedEvent = index"
       >
-        <div class="timeline-dot"></div>
+        <div class="timeline-dot" />
         <div class="timeline-content">
-          <div class="timeline-year">{{ event.year }}</div>
-          <div class="timeline-title">{{ event.title }}</div>
+          <div class="timeline-year">
+            {{ event.year }}
+          </div>
+          <div class="timeline-title">
+            {{ event.title }}
+          </div>
         </div>
       </div>
     </div>
     
-    <div v-if="selectedEventData" class="event-detail">
-      <div class="detail-year">{{ selectedEventData.year }}</div>
-      <div class="detail-title">{{ selectedEventData.title }}</div>
-      <div class="detail-desc">{{ selectedEventData.description }}</div>
+    <div
+      v-if="selectedEventData"
+      class="event-detail"
+    >
+      <div class="detail-year">
+        {{ selectedEventData.year }}
+      </div>
+      <div class="detail-title">
+        {{ selectedEventData.title }}
+      </div>
+      <div class="detail-desc">
+        {{ selectedEventData.description }}
+      </div>
       <div class="detail-impact">
         <span class="impact-label">影响:</span>
         <span class="impact-text">{{ selectedEventData.impact }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
index e54301b..b32314b 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesMapDemo.vue
@@ -2,7 +2,9 @@
   <div class="cloud-services-map-demo">
     <div class="demo-header">
       <h4>云计算服务版图全景图</h4>
-      <p class="demo-desc">点击各个板块查看 AWS 与阿里云的对应服务</p>
+      <p class="demo-desc">
+        点击各个板块查看 AWS 与阿里云的对应服务
+      </p>
     </div>
 
     <div class="map-container">
@@ -12,8 +14,12 @@
         :class="{ active: activeLayer === 'compute' }"
         @click="setActiveLayer('compute')"
       >
-        <div class="layer-icon">⚙️</div>
-        <div class="layer-title">计算服务</div>
+        <div class="layer-icon">
+          ⚙️
+        </div>
+        <div class="layer-title">
+          计算服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">EC2/ECS</span>
           <span class="service-tag">Lambda/函数计算</span>
@@ -26,8 +32,12 @@
         :class="{ active: activeLayer === 'storage' }"
         @click="setActiveLayer('storage')"
       >
-        <div class="layer-icon">💾</div>
-        <div class="layer-title">存储服务</div>
+        <div class="layer-icon">
+          💾
+        </div>
+        <div class="layer-title">
+          存储服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">S3/OSS</span>
           <span class="service-tag">EBS/云盘</span>
@@ -40,8 +50,12 @@
         :class="{ active: activeLayer === 'network' }"
         @click="setActiveLayer('network')"
       >
-        <div class="layer-icon">🌐</div>
-        <div class="layer-title">网络服务</div>
+        <div class="layer-icon">
+          🌐
+        </div>
+        <div class="layer-title">
+          网络服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">VPC/专有网络</span>
           <span class="service-tag">ELB/SLB</span>
@@ -54,8 +68,12 @@
         :class="{ active: activeLayer === 'security' }"
         @click="setActiveLayer('security')"
       >
-        <div class="layer-icon">🔒</div>
-        <div class="layer-title">安全服务</div>
+        <div class="layer-icon">
+          🔒
+        </div>
+        <div class="layer-title">
+          安全服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">IAM/RAM</span>
           <span class="service-tag">KMS/密钥管理</span>
@@ -68,8 +86,12 @@
         :class="{ active: activeLayer === 'database' }"
         @click="setActiveLayer('database')"
       >
-        <div class="layer-icon">🗄️</div>
-        <div class="layer-title">数据库服务</div>
+        <div class="layer-icon">
+          🗄️
+        </div>
+        <div class="layer-title">
+          数据库服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">RDS/PolarDB</span>
           <span class="service-tag">DynamoDB/Tablestore</span>
@@ -82,8 +104,12 @@
         :class="{ active: activeLayer === 'middleware' }"
         @click="setActiveLayer('middleware')"
       >
-        <div class="layer-icon">🔧</div>
-        <div class="layer-title">中间件服务</div>
+        <div class="layer-icon">
+          🔧
+        </div>
+        <div class="layer-title">
+          中间件服务
+        </div>
         <div class="layer-services">
           <span class="service-tag">MQ/RocketMQ</span>
           <span class="service-tag">ElastiCache/Redis</span>
@@ -92,26 +118,46 @@
     </div>
 
     <!-- 详情面板 -->
-    <div v-if="activeLayer" class="detail-panel">
+    <div
+      v-if="activeLayer"
+      class="detail-panel"
+    >
       <div class="detail-header">
         <h5>{{ layerDetails[activeLayer].title }}</h5>
-        <button class="close-btn" @click="activeLayer = null">×</button>
+        <button
+          class="close-btn"
+          @click="activeLayer = null"
+        >
+          ×
+        </button>
       </div>
       <div class="detail-content">
         <div class="comparison-table">
           <div class="table-header">
-            <div class="col aws">AWS</div>
-            <div class="col aliyun">阿里云</div>
-            <div class="col desc">功能描述</div>
+            <div class="col aws">
+              AWS
+            </div>
+            <div class="col aliyun">
+              阿里云
+            </div>
+            <div class="col desc">
+              功能描述
+            </div>
           </div>
           <div
             v-for="(item, index) in layerDetails[activeLayer].services"
             :key="index"
             class="table-row"
           >
-            <div class="col aws">{{ item.aws }}</div>
-            <div class="col aliyun">{{ item.aliyun }}</div>
-            <div class="col desc">{{ item.desc }}</div>
+            <div class="col aws">
+              {{ item.aws }}
+            </div>
+            <div class="col aliyun">
+              {{ item.aliyun }}
+            </div>
+            <div class="col desc">
+              {{ item.desc }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
index 4ab54fe..6d87604 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/CloudServicesOverview.vue
@@ -8,15 +8,28 @@
         :class="{ active: selectedService === service.id }"
         @click="selectService(service.id)"
       >
-        <div class="service-icon">{{ service.icon }}</div>
-        <div class="service-name">{{ service.name }}</div>
-        <div class="service-examples">{{ service.examples }}</div>
+        <div class="service-icon">
+          {{ service.icon }}
+        </div>
+        <div class="service-name">
+          {{ service.name }}
+        </div>
+        <div class="service-examples">
+          {{ service.examples }}
+        </div>
       </div>
     </div>
     
-    <div v-if="selectedServiceData" class="service-detail">
-      <div class="detail-title">{{ selectedServiceData.name }}</div>
-      <div class="detail-desc">{{ selectedServiceData.description }}</div>
+    <div
+      v-if="selectedServiceData"
+      class="service-detail"
+    >
+      <div class="detail-title">
+        {{ selectedServiceData.name }}
+      </div>
+      <div class="detail-desc">
+        {{ selectedServiceData.description }}
+      </div>
       <div class="detail-compare">
         <div class="compare-item">
           <span class="label">AWS:</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
index e547f27..020ca2a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeInstanceDemo.vue
@@ -43,7 +43,9 @@
     </div>
     
     <div class="result-panel">
-      <div class="result-title">配置结果</div>
+      <div class="result-title">
+        配置结果
+      </div>
       <div class="result-grid">
         <div class="result-item">
           <span class="label">配置</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
index 997d135..72e8c4c 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ComputeServicesDemo.vue
@@ -2,7 +2,9 @@
   <div class="compute-services-demo">
     <div class="demo-header">
       <h4>计算服务选型指南</h4>
-      <p class="demo-desc">拖动滑块调整场景参数，获取最佳计算方案</p>
+      <p class="demo-desc">
+        拖动滑块调整场景参数，获取最佳计算方案
+      </p>
     </div>
 
     <div class="scenario-sliders">
@@ -13,7 +15,7 @@
           type="range"
           min="0"
           max="100"
-        />
+        >
         <div class="slider-labels">
           <span>波动大</span>
           <span>非常稳定</span>
@@ -27,7 +29,7 @@
           type="range"
           min="0"
           max="100"
-        />
+        >
         <div class="slider-labels">
           <span>很低</span>
           <span>接近100%</span>
@@ -41,7 +43,7 @@
           type="range"
           min="0"
           max="100"
-        />
+        >
         <div class="slider-labels">
           <span>几分钟</span>
           <span>持续运行</span>
@@ -55,7 +57,7 @@
           type="range"
           min="0"
           max="100"
-        />
+        >
         <div class="slider-labels">
           <span>平稳</span>
           <span>大起大落</span>
@@ -76,18 +78,28 @@
           class="solution-card"
           :class="{ 'top-pick': index === 0 }"
         >
-          <div class="solution-rank" :class="{ 'rank-1': index === 0 }">
+          <div
+            class="solution-rank"
+            :class="{ 'rank-1': index === 0 }"
+          >
             {{ index === 0 ? '👑' : index + 1 }}
           </div>
           <div class="solution-content">
-            <div class="solution-name">{{ solution.name }}</div>
+            <div class="solution-name">
+              {{ solution.name }}
+            </div>
             <div class="solution-services">
               <span class="service-tag aws">{{ solution.aws }}</span>
               <span class="vs-mini">vs</span>
               <span class="service-tag aliyun">{{ solution.aliyun }}</span>
             </div>
-            <div class="solution-reason">{{ solution.reason }}</div>
-            <div class="solution-savings" v-if="solution.savings">
+            <div class="solution-reason">
+              {{ solution.reason }}
+            </div>
+            <div
+              v-if="solution.savings"
+              class="solution-savings"
+            >
               💰 预计节省: {{ solution.savings }}
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
index a60fe67..5f53e9a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/DatabaseServicesDemo.vue
@@ -2,7 +2,9 @@
   <div class="database-services-demo">
     <div class="demo-header">
       <h4>数据库选型助手</h4>
-      <p class="demo-desc">根据您的业务特点，推荐最适合的数据库方案</p>
+      <p class="demo-desc">
+        根据您的业务特点，推荐最适合的数据库方案
+      </p>
     </div>
 
     <div class="db-selection">
@@ -19,7 +21,10 @@
         </button>
       </div>
 
-      <div v-if="selectedCategory" class="db-comparison">
+      <div
+        v-if="selectedCategory"
+        class="db-comparison"
+      >
         <div class="comparison-header">
           <span class="aws-badge">AWS</span>
           <span class="vs-text">对比</span>
@@ -29,29 +34,45 @@
         <div class="db-cards">
           <div class="db-card">
             <div class="db-header aws">
-              <div class="db-name">{{ currentCategory.aws }}</div>
+              <div class="db-name">
+                {{ currentCategory.aws }}
+              </div>
             </div>
             <div class="db-body">
               <div class="feature-list">
-                <div v-for="(feat, i) in currentCategory.awsFeatures" :key="i" class="feature">
+                <div
+                  v-for="(feat, i) in currentCategory.awsFeatures"
+                  :key="i"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
-              <div class="price-tag">{{ currentCategory.awsPrice }}</div>
+              <div class="price-tag">
+                {{ currentCategory.awsPrice }}
+              </div>
             </div>
           </div>
 
           <div class="db-card">
             <div class="db-header aliyun">
-              <div class="db-name">{{ currentCategory.aliyun }}</div>
+              <div class="db-name">
+                {{ currentCategory.aliyun }}
+              </div>
             </div>
             <div class="db-body">
               <div class="feature-list">
-                <div v-for="(feat, i) in currentCategory.aliyunFeatures" :key="i" class="feature">
+                <div
+                  v-for="(feat, i) in currentCategory.aliyunFeatures"
+                  :key="i"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
-              <div class="price-tag aliyun">{{ currentCategory.aliyunPrice }}</div>
+              <div class="price-tag aliyun">
+                {{ currentCategory.aliyunPrice }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
index ee919c2..3b57f2d 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/DeployWorkflowDemo.vue
@@ -8,35 +8,61 @@
         :class="{ active: currentStep === index, completed: currentStep > index }"
         @click="currentStep = index"
       >
-        <div class="step-number">{{ index + 1 }}</div>
+        <div class="step-number">
+          {{ index + 1 }}
+        </div>
         <div class="step-info">
-          <div class="step-name">{{ step.name }}</div>
-          <div class="step-time">{{ step.time }}</div>
+          <div class="step-name">
+            {{ step.name }}
+          </div>
+          <div class="step-time">
+            {{ step.time }}
+          </div>
         </div>
       </div>
     </div>
 
-    <div v-if="currentStepData" class="step-detail">
+    <div
+      v-if="currentStepData"
+      class="step-detail"
+    >
       <div class="detail-header">
         <span class="detail-step">步骤 {{ currentStep + 1 }}</span>
         <span class="detail-name">{{ currentStepData.name }}</span>
       </div>
       <div class="detail-content">
-        <div class="detail-desc">{{ currentStepData.description }}</div>
+        <div class="detail-desc">
+          {{ currentStepData.description }}
+        </div>
         <div class="detail-tasks">
-          <div class="tasks-title">具体操作：</div>
+          <div class="tasks-title">
+            具体操作：
+          </div>
           <ul>
-            <li v-for="(task, i) in currentStepData.tasks" :key="i">{{ task }}</li>
+            <li
+              v-for="(task, i) in currentStepData.tasks"
+              :key="i"
+            >
+              {{ task }}
+            </li>
           </ul>
         </div>
       </div>
     </div>
 
     <div class="workflow-actions">
-      <button class="action-btn" @click="prevStep" :disabled="currentStep === 0">
+      <button
+        class="action-btn"
+        :disabled="currentStep === 0"
+        @click="prevStep"
+      >
         上一步
       </button>
-      <button class="action-btn primary" @click="nextStep" :disabled="currentStep >= steps.length - 1">
+      <button
+        class="action-btn primary"
+        :disabled="currentStep >= steps.length - 1"
+        @click="nextStep"
+      >
         {{ currentStep >= steps.length - 1 ? '完成' : '下一步' }}
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
index df5aa4a..4d72f34 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/K8sServicesDemo.vue
@@ -2,66 +2,120 @@
   <div class="k8s-services-demo">
     <div class="demo-header">
       <h4>Kubernetes 服务生态全景</h4>
-      <p class="demo-desc">探索 AWS 和阿里云上的 K8s 服务及配套生态</p>
+      <p class="demo-desc">
+        探索 AWS 和阿里云上的 K8s 服务及配套生态
+      </p>
     </div>
 
     <div class="k8s-architecture">
       <div class="arch-layer control-plane">
-        <div class="layer-title">控制平面</div>
+        <div class="layer-title">
+          控制平面
+        </div>
         <div class="layer-content">
           <div class="service-box">
-            <div class="service-name">EKS / ACK</div>
-            <div class="service-desc">托管 Kubernetes 控制平面</div>
+            <div class="service-name">
+              EKS / ACK
+            </div>
+            <div class="service-desc">
+              托管 Kubernetes 控制平面
+            </div>
           </div>
         </div>
       </div>
 
       <div class="arch-layer worker-nodes">
-        <div class="layer-title">工作节点</div>
+        <div class="layer-title">
+          工作节点
+        </div>
         <div class="layer-content">
           <div class="node-types">
             <div class="node-box">
-              <div class="node-icon">💻</div>
-              <div class="node-name">EC2/ECS</div>
-              <div class="node-desc">标准计算节点</div>
+              <div class="node-icon">
+                💻
+              </div>
+              <div class="node-name">
+                EC2/ECS
+              </div>
+              <div class="node-desc">
+                标准计算节点
+              </div>
             </div>
             <div class="node-box">
-              <div class="node-icon">⚡</div>
-              <div class="node-name">Fargate/ECI</div>
-              <div class="node-desc">Serverless 节点</div>
+              <div class="node-icon">
+                ⚡
+              </div>
+              <div class="node-name">
+                Fargate/ECI
+              </div>
+              <div class="node-desc">
+                Serverless 节点
+              </div>
             </div>
             <div class="node-box">
-              <div class="node-icon">🎯</div>
-              <div class="node-name">Spot/抢占式</div>
-              <div class="node-desc">低成本竞价节点</div>
+              <div class="node-icon">
+                🎯
+              </div>
+              <div class="node-name">
+                Spot/抢占式
+              </div>
+              <div class="node-desc">
+                低成本竞价节点
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="arch-layer addons">
-        <div class="layer-title">插件生态</div>
+        <div class="layer-title">
+          插件生态
+        </div>
         <div class="layer-content">
           <div class="addon-grid">
             <div class="addon-card">
-              <div class="addon-name">Ingress/Nginx</div>
-              <div class="addon-aws">AWS Load Balancer</div>
-              <div class="addon-aliyun">ALB Ingress</div>
+              <div class="addon-name">
+                Ingress/Nginx
+              </div>
+              <div class="addon-aws">
+                AWS Load Balancer
+              </div>
+              <div class="addon-aliyun">
+                ALB Ingress
+              </div>
             </div>
             <div class="addon-card">
-              <div class="addon-name">Storage</div>
-              <div class="addon-aws">EBS/EFS CSI</div>
-              <div class="addon-aliyun">云盘/NAS CSI</div>
+              <div class="addon-name">
+                Storage
+              </div>
+              <div class="addon-aws">
+                EBS/EFS CSI
+              </div>
+              <div class="addon-aliyun">
+                云盘/NAS CSI
+              </div>
             </div>
             <div class="addon-card">
-              <div class="addon-name">Monitoring</div>
-              <div class="addon-aws">CloudWatch/AMP</div>
-              <div class="addon-aliyun">ARMS/Prometheus</div>
+              <div class="addon-name">
+                Monitoring
+              </div>
+              <div class="addon-aws">
+                CloudWatch/AMP
+              </div>
+              <div class="addon-aliyun">
+                ARMS/Prometheus
+              </div>
             </div>
             <div class="addon-card">
-              <div class="addon-name">Service Mesh</div>
-              <div class="addon-aws">App Mesh</div>
-              <div class="addon-aliyun">Service Mesh ASM</div>
+              <div class="addon-name">
+                Service Mesh
+              </div>
+              <div class="addon-aws">
+                App Mesh
+              </div>
+              <div class="addon-aliyun">
+                Service Mesh ASM
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
index 273f5d4..9173e8c 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/NetworkServicesDemo.vue
@@ -2,12 +2,16 @@
   <div class="network-services-demo">
     <div class="demo-header">
       <h4>网络架构可视化配置</h4>
-      <p class="demo-desc">拖拽组件构建您的云上网络架构</p>
+      <p class="demo-desc">
+        拖拽组件构建您的云上网络架构
+      </p>
     </div>
 
     <div class="network-builder">
       <div class="components-panel">
-        <div class="panel-title">可用组件</div>
+        <div class="panel-title">
+          可用组件
+        </div>
         <div class="component-list">
           <div
             v-for="component in networkComponents"
@@ -28,10 +32,19 @@
           @drop="onDrop"
           @dragover.prevent
         >
-          <div v-if="canvasItems.length === 0" class="empty-state">
-            <div class="empty-icon">🏗️</div>
-            <div class="empty-text">拖拽左侧组件到此处</div>
-            <div class="empty-subtext">开始构建您的网络架构</div>
+          <div
+            v-if="canvasItems.length === 0"
+            class="empty-state"
+          >
+            <div class="empty-icon">
+              🏗️
+            </div>
+            <div class="empty-text">
+              拖拽左侧组件到此处
+            </div>
+            <div class="empty-subtext">
+              开始构建您的网络架构
+            </div>
           </div>
 
           <div
@@ -42,25 +55,46 @@
             :style="itemStyle(index)"
             @click="selectItem(item)"
           >
-            <div class="item-icon">{{ item.icon }}</div>
-            <div class="item-name">{{ item.name }}</div>
-            <button class="remove-btn" @click.stop="removeItem(index)">×</button>
+            <div class="item-icon">
+              {{ item.icon }}
+            </div>
+            <div class="item-name">
+              {{ item.name }}
+            </div>
+            <button
+              class="remove-btn"
+              @click.stop="removeItem(index)"
+            >
+              ×
+            </button>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-if="selectedItem" class="config-panel">
+    <div
+      v-if="selectedItem"
+      class="config-panel"
+    >
       <div class="config-header">
         <span class="config-icon">{{ selectedItem.icon }}</span>
         <span class="config-title">{{ selectedItem.name }} 配置</span>
-        <button class="close-config" @click="selectedItem = null">×</button>
+        <button
+          class="close-config"
+          @click="selectedItem = null"
+        >
+          ×
+        </button>
       </div>
 
       <div class="config-content">
         <div class="config-section">
-          <div class="section-title">AWS 配置</div>
-          <div class="service-name">{{ selectedItem.awsService }}</div>
+          <div class="section-title">
+            AWS 配置
+          </div>
+          <div class="service-name">
+            {{ selectedItem.awsService }}
+          </div>
           <div class="config-options">
             <div
               v-for="(option, idx) in selectedItem.awsOptions"
@@ -73,11 +107,15 @@
           </div>
         </div>
 
-        <div class="config-divider"></div>
+        <div class="config-divider" />
 
         <div class="config-section">
-          <div class="section-title aliyun-title">阿里云配置</div>
-          <div class="service-name aliyun-service">{{ selectedItem.aliyunService }}</div>
+          <div class="section-title aliyun-title">
+            阿里云配置
+          </div>
+          <div class="service-name aliyun-service">
+            {{ selectedItem.aliyunService }}
+          </div>
           <div class="config-options">
             <div
               v-for="(option, idx) in selectedItem.aliyunOptions"
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue b/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
index 0a1b838..92f6841 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/PricingCalculator.vue
@@ -4,38 +4,70 @@
       <div class="config-row">
         <span class="label">实例规格</span>
         <select v-model="config.spec">
-          <option value="small">1核2G (入门)</option>
-          <option value="medium">2核4G (标准)</option>
-          <option value="large">4核8G (高性能)</option>
+          <option value="small">
+            1核2G (入门)
+          </option>
+          <option value="medium">
+            2核4G (标准)
+          </option>
+          <option value="large">
+            4核8G (高性能)
+          </option>
         </select>
       </div>
       <div class="config-row">
         <span class="label">运行时长</span>
-        <input type="range" v-model.number="config.hours" min="1" max="24" />
+        <input
+          v-model.number="config.hours"
+          type="range"
+          min="1"
+          max="24"
+        >
         <span class="value">{{ config.hours }} 小时/天</span>
       </div>
       <div class="config-row">
         <span class="label">运行天数</span>
-        <input type="range" v-model.number="config.days" min="1" max="31" />
+        <input
+          v-model.number="config.days"
+          type="range"
+          min="1"
+          max="31"
+        >
         <span class="value">{{ config.days }} 天/月</span>
       </div>
     </div>
 
     <div class="result-section">
-      <div class="result-header">月度成本对比</div>
+      <div class="result-header">
+        月度成本对比
+      </div>
       <div class="result-cards">
         <div class="result-card">
-          <div class="model">按需付费</div>
-          <div class="price">${{ costs.ondemand }}/月</div>
+          <div class="model">
+            按需付费
+          </div>
+          <div class="price">
+            ${{ costs.ondemand }}/月
+          </div>
         </div>
         <div class="result-card recommended">
-          <div class="model">预留实例</div>
-          <div class="price">${{ costs.reserved }}/月</div>
-          <div class="saving">省 {{ savings }}%</div>
+          <div class="model">
+            预留实例
+          </div>
+          <div class="price">
+            ${{ costs.reserved }}/月
+          </div>
+          <div class="saving">
+            省 {{ savings }}%
+          </div>
         </div>
         <div class="result-card">
-          <div class="model">抢占式</div>
-          <div class="price">${{ costs.spot }}/月</div>
+          <div class="model">
+            抢占式
+          </div>
+          <div class="price">
+            ${{ costs.spot }}/月
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
index a33334f..598aedc 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/PricingModelDemo.vue
@@ -2,7 +2,9 @@
   <div class="pricing-model-demo">
     <div class="demo-header">
       <h4>云服务器计费模式计算器</h4>
-      <p class="demo-desc">输入您的使用场景，对比不同计费模式的成本</p>
+      <p class="demo-desc">
+        输入您的使用场景，对比不同计费模式的成本
+      </p>
     </div>
 
     <div class="calculator-inputs">
@@ -12,14 +14,23 @@
           <div class="input-group">
             <label>实例规格</label>
             <select v-model="config.instanceType">
-              <option v-for="type in instanceTypes" :key="type.value" :value="type.value">
+              <option
+                v-for="type in instanceTypes"
+                :key="type.value"
+                :value="type.value"
+              >
                 {{ type.label }}
               </option>
             </select>
           </div>
           <div class="input-group">
             <label>数量 (台)</label>
-            <input v-model.number="config.quantity" type="number" min="1" max="100" />
+            <input
+              v-model.number="config.quantity"
+              type="number"
+              min="1"
+              max="100"
+            >
           </div>
         </div>
       </div>
@@ -29,12 +40,22 @@
         <div class="input-grid">
           <div class="input-group">
             <label>每日运行时长 (小时)</label>
-            <input v-model.number="config.dailyHours" type="range" min="1" max="24" />
+            <input
+              v-model.number="config.dailyHours"
+              type="range"
+              min="1"
+              max="24"
+            >
             <span class="range-value">{{ config.dailyHours }} 小时</span>
           </div>
           <div class="input-group">
             <label>每月运行天数</label>
-            <input v-model.number="config.monthlyDays" type="range" min="1" max="31" />
+            <input
+              v-model.number="config.monthlyDays"
+              type="range"
+              min="1"
+              max="31"
+            >
             <span class="range-value">{{ config.monthlyDays }} 天</span>
           </div>
         </div>
@@ -43,9 +64,17 @@
       <div class="input-section">
         <h5>计费偏好</h5>
         <div class="billing-options">
-          <label v-for="option in billingOptions" :key="option.value" class="option-card"
-            :class="{ active: config.billingType === option.value }">
-            <input type="radio" v-model="config.billingType" :value="option.value" />
+          <label
+            v-for="option in billingOptions"
+            :key="option.value"
+            class="option-card"
+            :class="{ active: config.billingType === option.value }"
+          >
+            <input
+              v-model="config.billingType"
+              type="radio"
+              :value="option.value"
+            >
             <span class="option-icon">{{ option.icon }}</span>
             <span class="option-name">{{ option.label }}</span>
             <span class="option-desc">{{ option.desc }}</span>
@@ -57,18 +86,35 @@
     <div class="cost-comparison">
       <h5>成本对比分析</h5>
       <div class="comparison-chart">
-        <div v-for="model in costComparison" :key="model.type" class="chart-bar"
-          :class="{ recommended: model.recommended }">
-          <div class="bar-label">{{ model.label }}</div>
+        <div
+          v-for="model in costComparison"
+          :key="model.type"
+          class="chart-bar"
+          :class="{ recommended: model.recommended }"
+        >
+          <div class="bar-label">
+            {{ model.label }}
+          </div>
           <div class="bar-visual">
-            <div class="bar-fill" :style="{ height: model.percentage + '%' }"
-              :class="model.type"></div>
+            <div
+              class="bar-fill"
+              :style="{ height: model.percentage + '%' }"
+              :class="model.type"
+            />
           </div>
           <div class="bar-value">
             <span class="amount">{{ model.cost }}</span>
-            <span v-if="model.savings" class="savings">省 {{ model.savings }}</span>
+            <span
+              v-if="model.savings"
+              class="savings"
+            >省 {{ model.savings }}</span>
+          </div>
+          <div
+            v-if="model.recommended"
+            class="recommend-badge"
+          >
+            推荐
           </div>
-          <div v-if="model.recommended" class="recommend-badge">推荐</div>
         </div>
       </div>
     </div>
@@ -79,7 +125,11 @@
         <span class="rec-title">优化建议</span>
       </div>
       <div class="rec-content">
-        <div v-for="(tip, index) in optimizationTips" :key="index" class="tip-item">
+        <div
+          v-for="(tip, index) in optimizationTips"
+          :key="index"
+          class="tip-item"
+        >
           <span class="tip-num">{{ index + 1 }}</span>
           <span class="tip-text">{{ tip }}</span>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
index ffbdec9..34f158a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ProviderComparison.vue
@@ -2,31 +2,52 @@
   <div class="provider-comparison">
     <div class="compare-table">
       <div class="table-header">
-        <div class="col feature">对比项</div>
-        <div class="col provider">AWS</div>
-        <div class="col provider">阿里云</div>
-        <div class="col provider">腾讯云</div>
+        <div class="col feature">
+          对比项
+        </div>
+        <div class="col provider">
+          AWS
+        </div>
+        <div class="col provider">
+          阿里云
+        </div>
+        <div class="col provider">
+          腾讯云
+        </div>
       </div>
       <div 
         v-for="row in compareData" 
         :key="row.feature"
         class="table-row"
       >
-        <div class="col feature">{{ row.feature }}</div>
-        <div class="col provider" :class="{ highlight: row.awsHighlight }">
+        <div class="col feature">
+          {{ row.feature }}
+        </div>
+        <div
+          class="col provider"
+          :class="{ highlight: row.awsHighlight }"
+        >
           {{ row.aws }}
         </div>
-        <div class="col provider" :class="{ highlight: row.aliyunHighlight }">
+        <div
+          class="col provider"
+          :class="{ highlight: row.aliyunHighlight }"
+        >
           {{ row.aliyun }}
         </div>
-        <div class="col provider" :class="{ highlight: row.tencentHighlight }">
+        <div
+          class="col provider"
+          :class="{ highlight: row.tencentHighlight }"
+        >
           {{ row.tencent }}
         </div>
       </div>
     </div>
     
     <div class="selection-guide">
-      <div class="guide-title">💡 选择建议</div>
+      <div class="guide-title">
+        💡 选择建议
+      </div>
       <div class="guide-items">
         <div class="guide-item">
           <span class="scenario">出海业务</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
index f45b1b8..57bae69 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/RegionLatencyDemo.vue
@@ -16,9 +16,15 @@
 
     <div class="latency-table">
       <div class="table-header">
-        <div class="col region">云厂商地域</div>
-        <div class="col latency">延迟</div>
-        <div class="col rating">推荐度</div>
+        <div class="col region">
+          云厂商地域
+        </div>
+        <div class="col latency">
+          延迟
+        </div>
+        <div class="col rating">
+          推荐度
+        </div>
       </div>
       <div
         v-for="item in latencyData"
@@ -26,14 +32,21 @@
         class="table-row"
         :class="{ best: item.rating === '⭐⭐⭐' }"
       >
-        <div class="col region">{{ item.region }}</div>
+        <div class="col region">
+          {{ item.region }}
+        </div>
         <div class="col latency">
           <div class="latency-bar">
-            <div class="bar-fill" :style="{ width: item.percent + '%' }"></div>
+            <div
+              class="bar-fill"
+              :style="{ width: item.percent + '%' }"
+            />
             <span class="latency-value">{{ item.latency }}ms</span>
           </div>
         </div>
-        <div class="col rating">{{ item.rating }}</div>
+        <div class="col rating">
+          {{ item.rating }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
index 8361273..b3aa7d0 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/SecurityServicesDemo.vue
@@ -2,11 +2,15 @@
   <div class="security-services-demo">
     <div class="demo-header">
       <h4>安全服务架构配置器</h4>
-      <p class="demo-desc">选择您的业务场景，一键生成安全防护方案</p>
+      <p class="demo-desc">
+        选择您的业务场景，一键生成安全防护方案
+      </p>
     </div>
 
     <div class="scenario-selector">
-      <div class="selector-title">选择业务场景</div>
+      <div class="selector-title">
+        选择业务场景
+      </div>
       <div class="scenario-cards">
         <button
           v-for="scenario in scenarios"
@@ -21,7 +25,10 @@
       </div>
     </div>
 
-    <div v-if="selectedScenarioData" class="security-architecture">
+    <div
+      v-if="selectedScenarioData"
+      class="security-architecture"
+    >
       <div class="architecture-header">
         <span class="header-icon">🏗️</span>
         <span class="header-title">推荐安全架构</span>
@@ -39,18 +46,28 @@
                 <span class="service-name">{{ selectedScenarioData.edge.aws }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.edge.awsFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.edge.awsFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
             </div>
-            <div class="vs-mini">VS</div>
+            <div class="vs-mini">
+              VS
+            </div>
             <div class="service-card">
               <div class="service-header aliyun">
                 <span class="service-name">{{ selectedScenarioData.edge.aliyun }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.edge.aliyunFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.edge.aliyunFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
@@ -69,18 +86,28 @@
                 <span class="service-name">{{ selectedScenarioData.app.aws }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.app.awsFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.app.awsFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
             </div>
-            <div class="vs-mini">VS</div>
+            <div class="vs-mini">
+              VS
+            </div>
             <div class="service-card">
               <div class="service-header aliyun">
                 <span class="service-name">{{ selectedScenarioData.app.aliyun }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.app.aliyunFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.app.aliyunFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
@@ -99,18 +126,28 @@
                 <span class="service-name">{{ selectedScenarioData.data.aws }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.data.awsFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.data.awsFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
             </div>
-            <div class="vs-mini">VS</div>
+            <div class="vs-mini">
+              VS
+            </div>
             <div class="service-card">
               <div class="service-header aliyun">
                 <span class="service-name">{{ selectedScenarioData.data.aliyun }}</span>
               </div>
               <div class="service-features">
-                <div v-for="(feat, idx) in selectedScenarioData.data.aliyunFeatures" :key="idx" class="feature">
+                <div
+                  v-for="(feat, idx) in selectedScenarioData.data.aliyunFeatures"
+                  :key="idx"
+                  class="feature"
+                >
                   ✓ {{ feat }}
                 </div>
               </div>
@@ -120,9 +157,15 @@
       </div>
 
       <div class="security-recommendations">
-        <div class="rec-title">💡 安全建议</div>
+        <div class="rec-title">
+          💡 安全建议
+        </div>
         <div class="rec-list">
-          <div v-for="(rec, idx) in selectedScenarioData.recommendations" :key="idx" class="rec-item">
+          <div
+            v-for="(rec, idx) in selectedScenarioData.recommendations"
+            :key="idx"
+            class="rec-item"
+          >
             <span class="rec-num">{{ idx + 1 }}</span>
             <span class="rec-text">{{ rec }}</span>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
index 5b2d357..04daf1b 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/ServiceSelectionDemo.vue
@@ -2,17 +2,29 @@
   <div class="service-selection-demo">
     <div class="demo-header">
       <h4>云服务选型决策树</h4>
-      <p class="demo-desc">回答几个简单问题，获取最适合您的云服务方案</p>
+      <p class="demo-desc">
+        回答几个简单问题，获取最适合您的云服务方案
+      </p>
     </div>
 
-    <div v-if="!result" class="decision-flow">
+    <div
+      v-if="!result"
+      class="decision-flow"
+    >
       <div class="progress-bar">
-        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+        <div
+          class="progress-fill"
+          :style="{ width: progress + '%' }"
+        />
       </div>
 
       <div class="question-card">
-        <div class="question-number">问题 {{ currentStep + 1 }}/{{ questions.length }}</div>
-        <h5 class="question-text">{{ currentQuestion.text }}</h5>
+        <div class="question-number">
+          问题 {{ currentStep + 1 }}/{{ questions.length }}
+        </div>
+        <h5 class="question-text">
+          {{ currentQuestion.text }}
+        </h5>
 
         <div class="options-list">
           <button
@@ -29,7 +41,10 @@
       </div>
     </div>
 
-    <div v-else class="result-panel">
+    <div
+      v-else
+      class="result-panel"
+    >
       <div class="result-header">
         <span class="result-icon">🎯</span>
         <h5>推荐方案</h5>
@@ -37,32 +52,51 @@
 
       <div class="recommendation-cards">
         <div class="rec-card primary">
-          <div class="rec-badge">最佳匹配</div>
-          <div class="rec-icon">{{ result.primary.icon }}</div>
-          <div class="rec-title">{{ result.primary.name }}</div>
+          <div class="rec-badge">
+            最佳匹配
+          </div>
+          <div class="rec-icon">
+            {{ result.primary.icon }}
+          </div>
+          <div class="rec-title">
+            {{ result.primary.name }}
+          </div>
           <div class="rec-services">
             <span class="service aws">{{ result.primary.aws }}</span>
             <span class="vs">vs</span>
             <span class="service aliyun">{{ result.primary.aliyun }}</span>
           </div>
-          <div class="rec-reason">{{ result.primary.reason }}</div>
+          <div class="rec-reason">
+            {{ result.primary.reason }}
+          </div>
         </div>
 
         <div class="rec-card secondary">
-          <div class="rec-badge alt">备选</div>
-          <div class="rec-icon">{{ result.secondary.icon }}</div>
-          <div class="rec-title">{{ result.secondary.name }}</div>
+          <div class="rec-badge alt">
+            备选
+          </div>
+          <div class="rec-icon">
+            {{ result.secondary.icon }}
+          </div>
+          <div class="rec-title">
+            {{ result.secondary.name }}
+          </div>
           <div class="rec-services">
             <span class="service aws">{{ result.secondary.aws }}</span>
             <span class="vs">vs</span>
             <span class="service aliyun">{{ result.secondary.aliyun }}</span>
           </div>
-          <div class="rec-reason">{{ result.secondary.reason }}</div>
+          <div class="rec-reason">
+            {{ result.secondary.reason }}
+          </div>
         </div>
       </div>
 
       <div class="result-actions">
-        <button class="restart-btn" @click="restart">
+        <button
+          class="restart-btn"
+          @click="restart"
+        >
           <span>↺</span> 重新测试
         </button>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
index a345947..0b490c1 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/StorageServicesDemo.vue
@@ -2,11 +2,15 @@
   <div class="storage-services-demo">
     <div class="demo-header">
       <h4>存储服务选型助手</h4>
-      <p class="demo-desc">根据您的使用场景，推荐最适合的存储方案</p>
+      <p class="demo-desc">
+        根据您的使用场景，推荐最适合的存储方案
+      </p>
     </div>
 
     <div class="scenario-selector">
-      <div class="selector-title">选择您的主要使用场景：</div>
+      <div class="selector-title">
+        选择您的主要使用场景：
+      </div>
       <div class="scenario-grid">
         <button
           v-for="scenario in scenarios"
@@ -15,14 +19,23 @@
           :class="{ active: selectedScenario === scenario.id }"
           @click="selectScenario(scenario.id)"
         >
-          <div class="scenario-icon">{{ scenario.icon }}</div>
-          <div class="scenario-name">{{ scenario.name }}</div>
-          <div class="scenario-desc">{{ scenario.shortDesc }}</div>
+          <div class="scenario-icon">
+            {{ scenario.icon }}
+          </div>
+          <div class="scenario-name">
+            {{ scenario.name }}
+          </div>
+          <div class="scenario-desc">
+            {{ scenario.shortDesc }}
+          </div>
         </button>
       </div>
     </div>
 
-    <div v-if="selectedScenario" class="recommendation-result">
+    <div
+      v-if="selectedScenario"
+      class="recommendation-result"
+    >
       <div class="result-header">
         <span class="result-icon">🎯</span>
         <span class="result-title">推荐方案</span>
@@ -31,55 +44,91 @@
       <div class="storage-comparison">
         <div class="provider-card aws">
           <div class="provider-header">
-            <div class="provider-logo">AWS</div>
-            <div class="provider-service">{{ currentScenario.awsService }}</div>
+            <div class="provider-logo">
+              AWS
+            </div>
+            <div class="provider-service">
+              {{ currentScenario.awsService }}
+            </div>
           </div>
           <div class="provider-features">
-            <div v-for="(feature, idx) in currentScenario.awsFeatures" :key="idx" class="feature-item">
+            <div
+              v-for="(feature, idx) in currentScenario.awsFeatures"
+              :key="idx"
+              class="feature-item"
+            >
               <span class="check">✓</span>
               <span>{{ feature }}</span>
             </div>
           </div>
           <div class="provider-pricing">
-            <div class="price-label">定价模式</div>
-            <div class="price-value">{{ currentScenario.awsPricing }}</div>
+            <div class="price-label">
+              定价模式
+            </div>
+            <div class="price-value">
+              {{ currentScenario.awsPricing }}
+            </div>
           </div>
         </div>
 
         <div class="vs-divider">
-          <div class="vs-line"></div>
-          <div class="vs-badge">VS</div>
-          <div class="vs-line"></div>
+          <div class="vs-line" />
+          <div class="vs-badge">
+            VS
+          </div>
+          <div class="vs-line" />
         </div>
 
         <div class="provider-card aliyun">
           <div class="provider-header">
-            <div class="provider-logo aliyun-logo">阿里云</div>
-            <div class="provider-service">{{ currentScenario.aliyunService }}</div>
+            <div class="provider-logo aliyun-logo">
+              阿里云
+            </div>
+            <div class="provider-service">
+              {{ currentScenario.aliyunService }}
+            </div>
           </div>
           <div class="provider-features">
-            <div v-for="(feature, idx) in currentScenario.aliyunFeatures" :key="idx" class="feature-item">
+            <div
+              v-for="(feature, idx) in currentScenario.aliyunFeatures"
+              :key="idx"
+              class="feature-item"
+            >
               <span class="check aliyun-check">✓</span>
               <span>{{ feature }}</span>
             </div>
           </div>
           <div class="provider-pricing">
-            <div class="price-label">定价模式</div>
-            <div class="price-value">{{ currentScenario.aliyunPricing }}</div>
+            <div class="price-label">
+              定价模式
+            </div>
+            <div class="price-value">
+              {{ currentScenario.aliyunPricing }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="decision-guide">
-        <div class="guide-title">🤔 如何选择？</div>
+        <div class="guide-title">
+          🤔 如何选择？
+        </div>
         <div class="guide-content">
           <div class="guide-item">
-            <div class="guide-condition">选择 AWS 如果：</div>
-            <div class="guide-reason">{{ currentScenario.chooseAwsWhen }}</div>
+            <div class="guide-condition">
+              选择 AWS 如果：
+            </div>
+            <div class="guide-reason">
+              {{ currentScenario.chooseAwsWhen }}
+            </div>
           </div>
           <div class="guide-item">
-            <div class="guide-condition">选择阿里云如果：</div>
-            <div class="guide-reason">{{ currentScenario.chooseAliyunWhen }}</div>
+            <div class="guide-condition">
+              选择阿里云如果：
+            </div>
+            <div class="guide-reason">
+              {{ currentScenario.chooseAliyunWhen }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue
index 3910b6a..998c148 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-services/StorageTypeDemo.vue
@@ -8,13 +8,22 @@
         :class="{ active: selectedType === type.id }"
         @click="selectedType = type.id"
       >
-        <div class="type-icon">{{ type.icon }}</div>
-        <div class="type-name">{{ type.name }}</div>
-        <div class="type-example">{{ type.example }}</div>
+        <div class="type-icon">
+          {{ type.icon }}
+        </div>
+        <div class="type-name">
+          {{ type.name }}
+        </div>
+        <div class="type-example">
+          {{ type.example }}
+        </div>
       </div>
     </div>
     
-    <div v-if="selectedTypeData" class="type-detail">
+    <div
+      v-if="selectedTypeData"
+      class="type-detail"
+    >
       <div class="detail-row">
         <span class="label">特点</span>
         <span class="value">{{ selectedTypeData.features }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
index b6e53e7..e15dddf 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
@@ -6,7 +6,10 @@
       <span class="subtitle">理解 CDN 访问统计和日志分析</span>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         访问分析演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
index 964f51c..62eda83 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
@@ -6,7 +6,10 @@
       <span class="subtitle">{{ description }}</span>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         缓存策略演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
index 9017d83..da5b9e5 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
@@ -26,12 +26,20 @@
             :style="{ left: user.x + '%', top: user.y + '%' }"
             @click="selectUser(user)"
           >
-            <div class="user-icon">{{ user.icon }}</div>
-            <div class="user-label">{{ user.name }}</div>
+            <div class="user-icon">
+              {{ user.icon }}
+            </div>
+            <div class="user-label">
+              {{ user.name }}
+            </div>
           </div>
 
           <!-- 请求动画线 -->
-          <div v-if="requestAnimation" class="request-line" :style="requestLineStyle"></div>
+          <div
+            v-if="requestAnimation"
+            class="request-line"
+            :style="requestLineStyle"
+          />
         </div>
       </div>
 
@@ -40,7 +48,10 @@
         <div class="layer-title">
           <span class="icon">🌐</span>
           <span>CDN 边缘节点 (Edge Nodes)</span>
-          <span class="layer-status" :class="{ hit: cacheHit, miss: !cacheHit && showCacheStatus }">
+          <span
+            class="layer-status"
+            :class="{ hit: cacheHit, miss: !cacheHit && showCacheStatus }"
+          >
             {{ cacheStatusText }}
           </span>
         </div>
@@ -53,10 +64,16 @@
             :class="{ active: activeNode === node.id, serving: servingNode === node.id }"
             @click="selectNode(node)"
           >
-            <div class="node-icon">{{ node.icon }}</div>
+            <div class="node-icon">
+              {{ node.icon }}
+            </div>
             <div class="node-info">
-              <div class="node-name">{{ node.name }}</div>
-              <div class="node-location">{{ node.location }}</div>
+              <div class="node-name">
+                {{ node.name }}
+              </div>
+              <div class="node-location">
+                {{ node.location }}
+              </div>
             </div>
             <div class="node-stats">
               <div class="stat">
@@ -65,7 +82,10 @@
               </div>
               <div class="stat">
                 <span class="stat-label">命中</span>
-                <span class="stat-value" :style="{ color: node.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
+                <span
+                  class="stat-value"
+                  :style="{ color: node.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }"
+                >
                   {{ node.hitRate }}%
                 </span>
               </div>
@@ -79,33 +99,53 @@
         <div class="layer-title">
           <span class="icon">🏢</span>
           <span>源站 (Origin Server)</span>
-          <span class="layer-status" :class="{ active: showBackToSource }">
+          <span
+            class="layer-status"
+            :class="{ active: showBackToSource }"
+          >
             {{ backToSourceText }}
           </span>
         </div>
 
         <div class="origin-servers">
           <div class="origin-server">
-            <div class="server-icon">🗄️</div>
+            <div class="server-icon">
+              🗄️
+            </div>
             <div class="server-info">
-              <div class="server-name">对象存储源站</div>
-              <div class="server-address">bucket.oss-cn-beijing.aliyuncs.com</div>
+              <div class="server-name">
+                对象存储源站
+              </div>
+              <div class="server-address">
+                bucket.oss-cn-beijing.aliyuncs.com
+              </div>
             </div>
             <div class="server-status">
-              <span class="status-dot active"></span>
+              <span class="status-dot active" />
               <span class="status-text">健康</span>
             </div>
           </div>
 
-          <div v-if="showBackToSource" class="back-to-source-flow">
+          <div
+            v-if="showBackToSource"
+            class="back-to-source-flow"
+          >
             <div class="flow-arrow">
               <span>⬆️ 回源请求</span>
             </div>
             <div class="flow-detail">
-              <div class="flow-step">1. CDN 节点未命中缓存</div>
-              <div class="flow-step">2. 向源站发起回源请求</div>
-              <div class="flow-step">3. 源站返回文件内容</div>
-              <div class="flow-step">4. CDN 缓存并响应用户</div>
+              <div class="flow-step">
+                1. CDN 节点未命中缓存
+              </div>
+              <div class="flow-step">
+                2. 向源站发起回源请求
+              </div>
+              <div class="flow-step">
+                3. 源站返回文件内容
+              </div>
+              <div class="flow-step">
+                4. CDN 缓存并响应用户
+              </div>
             </div>
           </div>
         </div>
@@ -114,17 +154,28 @@
 
     <!-- 交互控制区 -->
     <div class="demo-controls">
-      <div class="controls-title">🎮 模拟演示</div>
+      <div class="controls-title">
+        🎮 模拟演示
+      </div>
       <div class="controls-row">
-        <button class="control-btn" @click="simulateCacheHit">
+        <button
+          class="control-btn"
+          @click="simulateCacheHit"
+        >
           <span>✅</span>
           <span>模拟缓存命中</span>
         </button>
-        <button class="control-btn" @click="simulateCacheMiss">
+        <button
+          class="control-btn"
+          @click="simulateCacheMiss"
+        >
           <span>❌</span>
           <span>模拟缓存未命中（回源）</span>
         </button>
-        <button class="control-btn reset" @click="resetDemo">
+        <button
+          class="control-btn reset"
+          @click="resetDemo"
+        >
           <span>🔄</span>
           <span>重置</span>
         </button>
@@ -133,25 +184,53 @@
 
     <!-- 统计信息 -->
     <div class="stats-panel">
-      <div class="stats-title">📊 访问统计</div>
+      <div class="stats-title">
+        📊 访问统计
+      </div>
       <div class="stats-grid">
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-1)' }">{{ stats.cacheHit }}</div>
-          <div class="stat-label">缓存命中</div>
+          <div
+            class="stat-value"
+            :style="{ color: 'var(--vp-c-brand-1)' }"
+          >
+            {{ stats.cacheHit }}
+          </div>
+          <div class="stat-label">
+            缓存命中
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-delta)' }">{{ stats.cacheMiss }}</div>
-          <div class="stat-label">缓存未命中</div>
+          <div
+            class="stat-value"
+            :style="{ color: 'var(--vp-c-brand-delta)' }"
+          >
+            {{ stats.cacheMiss }}
+          </div>
+          <div class="stat-label">
+            缓存未命中
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
+          <div
+            class="stat-value"
+            :style="{ color: stats.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }"
+          >
             {{ stats.hitRate }}%
           </div>
-          <div class="stat-label">命中率</div>
+          <div class="stat-label">
+            命中率
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: 'var(--vp-c-brand)' }">{{ stats.avgResponseTime }}ms</div>
-          <div class="stat-label">平均响应</div>
+          <div
+            class="stat-value"
+            :style="{ color: 'var(--vp-c-brand)' }"
+          >
+            {{ stats.avgResponseTime }}ms
+          </div>
+          <div class="stat-label">
+            平均响应
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
index 45c0c01..37e74e8 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/EdgeNodeDistributionDemo.vue
@@ -2,10 +2,15 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <p class="hint">
+        {{ description }}
+      </p>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         边缘节点分布演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
index 0ae1bfb..6b10151 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
@@ -6,7 +6,10 @@
       <span class="subtitle">理解 CDN 的 HTTPS 协议和证书管理</span>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         HTTPS 优化演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
index 595c1c9..86cc1d5 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
@@ -9,12 +9,20 @@
     <div class="storage-architecture">
       <!-- 账户层 -->
       <div class="account-layer">
-        <div class="account-icon">👤</div>
-        <div class="account-name">云账户 (Account)</div>
-        <div class="account-desc">管理权限、计费、全局配置</div>
+        <div class="account-icon">
+          👤
+        </div>
+        <div class="account-name">
+          云账户 (Account)
+        </div>
+        <div class="account-desc">
+          管理权限、计费、全局配置
+        </div>
       </div>
 
-      <div class="connector">▼</div>
+      <div class="connector">
+        ▼
+      </div>
 
       <!-- 桶层 -->
       <div class="buckets-container">
@@ -32,15 +40,25 @@
             :class="{ active: selectedBucket === bucket.name }"
             @click="selectBucket(bucket.name)"
           >
-            <div class="bucket-icon">{{ bucket.icon }}</div>
-            <div class="bucket-name">{{ bucket.name }}</div>
-            <div class="bucket-meta">{{ bucket.objects }} 对象</div>
-            <div class="bucket-size">{{ bucket.size }}</div>
+            <div class="bucket-icon">
+              {{ bucket.icon }}
+            </div>
+            <div class="bucket-name">
+              {{ bucket.name }}
+            </div>
+            <div class="bucket-meta">
+              {{ bucket.objects }} 对象
+            </div>
+            <div class="bucket-size">
+              {{ bucket.size }}
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="connector">▼</div>
+      <div class="connector">
+        ▼
+      </div>
 
       <!-- 对象层 -->
       <div class="objects-container">
@@ -50,7 +68,10 @@
           <span class="section-desc">文件数据 + 元数据</span>
         </div>
 
-        <div v-if="selectedBucket" class="objects-list">
+        <div
+          v-if="selectedBucket"
+          class="objects-list"
+        >
           <div
             v-for="obj in currentObjects"
             :key="obj.key"
@@ -58,21 +79,34 @@
             :class="{ selected: selectedObject === obj.key }"
             @click="selectObject(obj)"
           >
-            <div class="object-icon">{{ getFileIcon(obj.type) }}</div>
-            <div class="object-info">
-              <div class="object-key">{{ obj.key }}</div>
-              <div class="object-meta">{{ obj.size }} · {{ obj.lastModified }}</div>
+            <div class="object-icon">
+              {{ getFileIcon(obj.type) }}
+            </div>
+            <div class="object-info">
+              <div class="object-key">
+                {{ obj.key }}
+              </div>
+              <div class="object-meta">
+                {{ obj.size }} · {{ obj.lastModified }}
+              </div>
+            </div>
+            <div class="object-arrow">
+              ▶
             </div>
-            <div class="object-arrow">▶</div>
           </div>
         </div>
 
-        <div v-else class="objects-placeholder">
+        <div
+          v-else
+          class="objects-placeholder"
+        >
           点击上方存储桶查看对象列表
         </div>
       </div>
 
-      <div class="connector">▼</div>
+      <div class="connector">
+        ▼
+      </div>
 
       <!-- 元数据层 -->
       <div class="metadata-container">
@@ -82,11 +116,20 @@
           <span class="section-desc">系统元数据 + 自定义元数据</span>
         </div>
 
-        <div v-if="selectedObject && currentMetadata" class="metadata-content">
+        <div
+          v-if="selectedObject && currentMetadata"
+          class="metadata-content"
+        >
           <div class="metadata-section">
-            <div class="metadata-section-title">系统元数据 (System)</div>
+            <div class="metadata-section-title">
+              系统元数据 (System)
+            </div>
             <div class="metadata-list">
-              <div v-for="(value, key) in currentMetadata.system" :key="key" class="metadata-item">
+              <div
+                v-for="(value, key) in currentMetadata.system"
+                :key="key"
+                class="metadata-item"
+              >
                 <span class="metadata-key">{{ key }}:</span>
                 <span class="metadata-value">{{ value }}</span>
               </div>
@@ -94,9 +137,15 @@
           </div>
 
           <div class="metadata-section">
-            <div class="metadata-section-title">自定义元数据 (Custom)</div>
+            <div class="metadata-section-title">
+              自定义元数据 (Custom)
+            </div>
             <div class="metadata-list">
-              <div v-for="(value, key) in currentMetadata.custom" :key="key" class="metadata-item">
+              <div
+                v-for="(value, key) in currentMetadata.custom"
+                :key="key"
+                class="metadata-item"
+              >
                 <span class="metadata-key">{{ key }}:</span>
                 <span class="metadata-value">{{ value }}</span>
               </div>
@@ -104,7 +153,10 @@
           </div>
         </div>
 
-        <div v-else class="metadata-placeholder">
+        <div
+          v-else
+          class="metadata-placeholder"
+        >
           点击左侧对象查看详细元数据
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
index a22c918..f3d23c2 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
@@ -6,7 +6,10 @@
       <span class="subtitle">理解 CDN 智能调度和负载均衡</span>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         流量调度演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
index b15b252..245a1e7 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/AvailabilityZoneDemo.vue
@@ -2,11 +2,22 @@
   <div class="availability-zone-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="normal">正常运行</el-radio-button>
-        <el-radio-button label="az-failure">单 AZ 故障</el-radio-button>
-        <el-radio-button label="maintenance">维护模式</el-radio-button>
-        <el-radio-button label="scaling">弹性扩容</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="normal">
+          正常运行
+        </el-radio-button>
+        <el-radio-button label="az-failure">
+          单 AZ 故障
+        </el-radio-button>
+        <el-radio-button label="maintenance">
+          维护模式
+        </el-radio-button>
+        <el-radio-button label="scaling">
+          弹性扩容
+        </el-radio-button>
       </el-radio-group>
 
       <el-switch
@@ -20,65 +31,108 @@
     <div class="architecture-container">
       <!-- 流量入口层 -->
       <div class="layer entry-layer">
-        <div class="layer-title">🚪 流量入口层</div>
+        <div class="layer-title">
+          🚪 流量入口层
+        </div>
         <div class="entry-components">
           <div class="component dns">
-            <div class="component-icon">📖</div>
-            <div class="component-name">DNS 解析</div>
+            <div class="component-icon">
+              📖
+            </div>
+            <div class="component-name">
+              DNS 解析
+            </div>
           </div>
 
-          <div class="arrow">→</div>
+          <div class="arrow">
+            →
+          </div>
 
           <div class="component cdn">
-            <div class="component-icon">🌐</div>
-            <div class="component-name">CDN 加速</div>
+            <div class="component-icon">
+              🌐
+            </div>
+            <div class="component-name">
+              CDN 加速
+            </div>
           </div>
 
-          <div class="arrow">→</div>
+          <div class="arrow">
+            →
+          </div>
 
           <div class="component waf">
-            <div class="component-icon">🛡️</div>
-            <div class="component-name">WAF 防护</div>
+            <div class="component-icon">
+              🛡️
+            </div>
+            <div class="component-name">
+              WAF 防护
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 流量分发层 -->
       <div class="layer distribution-layer">
-        <div class="layer-title">⚖️ 流量分发层 (SLB)</div>
-        <div class="slb-cluster"
-             :class="{ 'failover-active': viewMode === 'az-failure' }">
-          <div class="slb-instance primary"
-               :class="{ failed: viewMode === 'az-failure' }">
+        <div class="layer-title">
+          ⚖️ 流量分发层 (SLB)
+        </div>
+        <div
+          class="slb-cluster"
+          :class="{ 'failover-active': viewMode === 'az-failure' }"
+        >
+          <div
+            class="slb-instance primary"
+            :class="{ failed: viewMode === 'az-failure' }"
+          >
             <div class="instance-header">
-              <span class="status-indicator"
-                    :class="viewMode === 'az-failure' ? 'offline' : 'online'"></span>
+              <span
+                class="status-indicator"
+                :class="viewMode === 'az-failure' ? 'offline' : 'online'"
+              />
               <span class="instance-name">SLB-A (主)</span>
             </div>
-            <div class="instance-meta">可用区 A</div>
+            <div class="instance-meta">
+              可用区 A
+            </div>
 
             <!-- 流量动画 -->
-            <div class="traffic-flow" v-if="showTraffic && viewMode !== 'az-failure'">
-              <div class="flow-dot"></div>
+            <div
+              v-if="showTraffic && viewMode !== 'az-failure'"
+              class="traffic-flow"
+            >
+              <div class="flow-dot" />
             </div>
           </div>
 
-          <div class="failover-arrow" v-if="viewMode === 'az-failure'">
+          <div
+            v-if="viewMode === 'az-failure'"
+            class="failover-arrow"
+          >
             <span class="failover-text">故障转移</span>
-            <div class="arrow-line"></div>
+            <div class="arrow-line" />
           </div>
 
-          <div class="slb-instance secondary"
-               :class="{ 'taking-over': viewMode === 'az-failure' }">
+          <div
+            class="slb-instance secondary"
+            :class="{ 'taking-over': viewMode === 'az-failure' }"
+          >
             <div class="instance-header">
-              <span class="status-indicator"
-                    :class="viewMode === 'az-failure' ? 'online' : 'standby'"></span>
+              <span
+                class="status-indicator"
+                :class="viewMode === 'az-failure' ? 'online' : 'standby'"
+              />
               <span class="instance-name">SLB-B (备)</span>
             </div>
-            <div class="instance-meta">可用区 B</div>
+            <div class="instance-meta">
+              可用区 B
+            </div>
 
-            <div class="traffic-flow" v-if="showTraffic && viewMode === 'az-failure'">
-              <div class="flow-dot"></div>
+            <div
+              v-if="showTraffic && viewMode === 'az-failure'"
+              class="traffic-flow"
+            >
+              <div class="flow-dot" />
             </div>
           </div>
         </div>
@@ -86,7 +140,9 @@
 
       <!-- 可用区层 -->
       <div class="layer azs-layer">
-        <div class="layer-title">🏢 可用区层 (Multi-AZ)</div>
+        <div class="layer-title">
+          🏢 可用区层 (Multi-AZ)
+        </div>
         <div class="azs-grid">
           <div
             v-for="az in availabilityZones"
@@ -106,8 +162,10 @@
                 <span class="az-id">{{ az.id }}</span>
               </div>
               <div class="az-status">
-                <span class="status-badge"
-                      :class="getAzStatusClass(az)">
+                <span
+                  class="status-badge"
+                  :class="getAzStatusClass(az)"
+                >
                   {{ getAzStatusText(az) }}
                 </span>
               </div>
@@ -126,17 +184,29 @@
             </div>
 
             <!-- 维护模式遮罩 -->
-            <div class="maintenance-overlay" v-if="viewMode === 'maintenance' && az.id === 'az-a'">
+            <div
+              v-if="viewMode === 'maintenance' && az.id === 'az-a'"
+              class="maintenance-overlay"
+            >
               <div class="overlay-content">
-                <div class="overlay-icon">🔧</div>
-                <div class="overlay-text">维护中</div>
+                <div class="overlay-icon">
+                  🔧
+                </div>
+                <div class="overlay-text">
+                  维护中
+                </div>
               </div>
             </div>
 
             <!-- 弹性扩容动画 -->
-            <div class="scaling-indicator" v-if="viewMode === 'scaling'">
-              <div class="scaling-dot"></div>
-              <div class="scaling-text">扩容中</div>
+            <div
+              v-if="viewMode === 'scaling'"
+              class="scaling-indicator"
+            >
+              <div class="scaling-dot" />
+              <div class="scaling-text">
+                扩容中
+              </div>
             </div>
           </div>
         </div>
@@ -145,22 +215,24 @@
 
     <!-- 状态说明 -->
     <div class="status-legend">
-      <div class="legend-title">状态说明：</div>
+      <div class="legend-title">
+        状态说明：
+      </div>
       <div class="legend-items">
         <div class="legend-item">
-          <span class="legend-dot healthy"></span>
+          <span class="legend-dot healthy" />
           <span>健康运行</span>
         </div>
         <div class="legend-item">
-          <span class="legend-dot standby"></span>
+          <span class="legend-dot standby" />
           <span>待机中</span>
         </div>
         <div class="legend-item">
-          <span class="legend-dot degraded"></span>
+          <span class="legend-dot degraded" />
           <span>降级/故障</span>
         </div>
         <div class="legend-item">
-          <span class="legend-dot maintenance"></span>
+          <span class="legend-dot maintenance" />
           <span>维护中</span>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
index 2e87017..c85f15a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/ComputeTopologyDemo.vue
@@ -2,30 +2,61 @@
   <div class="compute-topology-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="overview">概览</el-radio-button>
-        <el-radio-button label="vm">虚拟机</el-radio-button>
-        <el-radio-button label="container">容器</el-radio-button>
-        <el-radio-button label="serverless">无服务器</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="overview">
+          概览
+        </el-radio-button>
+        <el-radio-button label="vm">
+          虚拟机
+        </el-radio-button>
+        <el-radio-button label="container">
+          容器
+        </el-radio-button>
+        <el-radio-button label="serverless">
+          无服务器
+        </el-radio-button>
       </el-radio-group>
 
-      <el-switch v-model="showMetrics" active-text="显示指标" style="margin-left: 20px" />
+      <el-switch
+        v-model="showMetrics"
+        active-text="显示指标"
+        style="margin-left: 20px"
+      />
     </div>
 
     <!-- 计算架构图 -->
     <div class="compute-architecture">
       <!-- 物理基础设施层 -->
-      <div class="layer physical-layer" v-if="viewMode === 'overview' || viewMode === 'vm'">
+      <div
+        v-if="viewMode === 'overview' || viewMode === 'vm'"
+        class="layer physical-layer"
+      >
         <div class="layer-header">
           <span class="layer-icon">🏭</span>
           <span class="layer-title">物理基础设施</span>
         </div>
         <div class="layer-content">
-          <div class="server-rack" v-for="rack in serverRacks" :key="rack.id">
-            <div class="rack-header">{{ rack.name }}</div>
+          <div
+            v-for="rack in serverRacks"
+            :key="rack.id"
+            class="server-rack"
+          >
+            <div class="rack-header">
+              {{ rack.name }}
+            </div>
             <div class="rack-servers">
-              <div v-for="server in rack.servers" :key="server.id" class="server-node">
-                <div class="server-indicator" :class="server.status"></div>
+              <div
+                v-for="server in rack.servers"
+                :key="server.id"
+                class="server-node"
+              >
+                <div
+                  class="server-indicator"
+                  :class="server.status"
+                />
               </div>
             </div>
           </div>
@@ -33,34 +64,54 @@
       </div>
 
       <!-- 虚拟化层 -->
-      <div class="layer virtualization-layer" v-if="viewMode === 'overview' || viewMode === 'vm'">
+      <div
+        v-if="viewMode === 'overview' || viewMode === 'vm'"
+        class="layer virtualization-layer"
+      >
         <div class="layer-header">
           <span class="layer-icon">🔧</span>
           <span class="layer-title">虚拟化层</span>
         </div>
         <div class="layer-content">
           <div class="hypervisor-cluster">
-            <div class="hypervisor" v-for="hv in hypervisors" :key="hv.id">
+            <div
+              v-for="hv in hypervisors"
+              :key="hv.id"
+              class="hypervisor"
+            >
               <div class="hv-header">
                 <span class="hv-icon">🔨</span>
                 <span class="hv-name">{{ hv.name }}</span>
               </div>
               <div class="vms-list">
-                <div v-for="vm in hv.vms" :key="vm.id" class="vm-item">
+                <div
+                  v-for="vm in hv.vms"
+                  :key="vm.id"
+                  class="vm-item"
+                >
                   <div class="vm-info">
                     <span class="vm-icon">💻</span>
                     <span class="vm-name">{{ vm.name }}</span>
                   </div>
-                  <div class="vm-metrics" v-if="showMetrics">
+                  <div
+                    v-if="showMetrics"
+                    class="vm-metrics"
+                  >
                     <div class="metric">
                       <div class="metric-bar">
-                        <div class="metric-fill" :style="{ width: vm.cpu + '%' }"></div>
+                        <div
+                          class="metric-fill"
+                          :style="{ width: vm.cpu + '%' }"
+                        />
                       </div>
                       <span class="metric-label">CPU</span>
                     </div>
                     <div class="metric">
                       <div class="metric-bar">
-                        <div class="metric-fill memory" :style="{ width: vm.memory + '%' }"></div>
+                        <div
+                          class="metric-fill memory"
+                          :style="{ width: vm.memory + '%' }"
+                        />
                       </div>
                       <span class="metric-label">内存</span>
                     </div>
@@ -73,7 +124,10 @@
       </div>
 
       <!-- 容器层 -->
-      <div class="layer container-layer" v-if="viewMode === 'overview' || viewMode === 'container'">
+      <div
+        v-if="viewMode === 'overview' || viewMode === 'container'"
+        class="layer container-layer"
+      >
         <div class="layer-header">
           <span class="layer-icon">📦</span>
           <span class="layer-title">容器编排层 (Kubernetes)</span>
@@ -82,28 +136,54 @@
           <div class="k8s-cluster">
             <!-- 控制平面 -->
             <div class="control-plane">
-              <div class="cp-title">控制平面</div>
+              <div class="cp-title">
+                控制平面
+              </div>
               <div class="cp-components">
-                <div class="cp-comp" v-for="comp in controlPlaneComponents" :key="comp.name">
-                  <div class="comp-icon">{{ comp.icon }}</div>
-                  <div class="comp-name">{{ comp.name }}</div>
+                <div
+                  v-for="comp in controlPlaneComponents"
+                  :key="comp.name"
+                  class="cp-comp"
+                >
+                  <div class="comp-icon">
+                    {{ comp.icon }}
+                  </div>
+                  <div class="comp-name">
+                    {{ comp.name }}
+                  </div>
                 </div>
               </div>
             </div>
 
             <!-- 工作节点 -->
             <div class="worker-nodes">
-              <div class="nodes-title">工作节点</div>
+              <div class="nodes-title">
+                工作节点
+              </div>
               <div class="nodes-grid">
-                <div class="node" v-for="node in workerNodes" :key="node.name">
+                <div
+                  v-for="node in workerNodes"
+                  :key="node.name"
+                  class="node"
+                >
                   <div class="node-header">
                     <span class="node-icon">🔧</span>
                     <span class="node-name">{{ node.name }}</span>
-                    <span class="node-status" :class="node.status"></span>
+                    <span
+                      class="node-status"
+                      :class="node.status"
+                    />
                   </div>
                   <div class="pods-list">
-                    <div class="pod" v-for="pod in node.pods" :key="pod.name">
-                      <div class="pod-color" :style="{ background: pod.color }"></div>
+                    <div
+                      v-for="pod in node.pods"
+                      :key="pod.name"
+                      class="pod"
+                    >
+                      <div
+                        class="pod-color"
+                        :style="{ background: pod.color }"
+                      />
                       <span class="pod-name">{{ pod.name }}</span>
                     </div>
                   </div>
@@ -115,7 +195,10 @@
       </div>
 
       <!-- 无服务器层 -->
-      <div class="layer serverless-layer" v-if="viewMode === 'overview' || viewMode === 'serverless'">
+      <div
+        v-if="viewMode === 'overview' || viewMode === 'serverless'"
+        class="layer serverless-layer"
+      >
         <div class="layer-header">
           <span class="layer-icon">⚡</span>
           <span class="layer-title">无服务器计算 (Function Compute)</span>
@@ -124,29 +207,51 @@
           <div class="serverless-arch">
             <!-- 触发器 -->
             <div class="triggers-section">
-              <div class="section-title">触发器</div>
+              <div class="section-title">
+                触发器
+              </div>
               <div class="triggers-list">
-                <div class="trigger" v-for="trigger in triggers" :key="trigger.name">
-                  <div class="trigger-icon">{{ trigger.icon }}</div>
-                  <div class="trigger-name">{{ trigger.name }}</div>
+                <div
+                  v-for="trigger in triggers"
+                  :key="trigger.name"
+                  class="trigger"
+                >
+                  <div class="trigger-icon">
+                    {{ trigger.icon }}
+                  </div>
+                  <div class="trigger-name">
+                    {{ trigger.name }}
+                  </div>
                 </div>
               </div>
             </div>
 
             <!-- 函数计算 -->
             <div class="functions-section">
-              <div class="section-title">函数计算实例</div>
+              <div class="section-title">
+                函数计算实例
+              </div>
               <div class="functions-list">
-                <div class="function-card" v-for="func in functions" :key="func.name">
+                <div
+                  v-for="func in functions"
+                  :key="func.name"
+                  class="function-card"
+                >
                   <div class="func-header">
                     <span class="func-icon">⚙️</span>
                     <span class="func-name">{{ func.name }}</span>
                   </div>
-                  <div class="func-metrics" v-if="showMetrics">
+                  <div
+                    v-if="showMetrics"
+                    class="func-metrics"
+                  >
                     <div class="metric-row">
                       <span class="metric-label">并发：</span>
                       <div class="concurrency-bar">
-                        <div class="concurrency-fill" :style="{ width: (func.concurrency / 100 * 100) + '%' }"></div>
+                        <div
+                          class="concurrency-fill"
+                          :style="{ width: (func.concurrency / 100 * 100) + '%' }"
+                        />
                       </div>
                       <span class="metric-value">{{ func.concurrency }}</span>
                     </div>
@@ -161,11 +266,21 @@
 
             <!-- 后端服务 -->
             <div class="backend-section">
-              <div class="section-title">后端服务</div>
+              <div class="section-title">
+                后端服务
+              </div>
               <div class="backend-services">
-                <div class="service" v-for="svc in backendServices" :key="svc.name">
-                  <div class="service-icon">{{ svc.icon }}</div>
-                  <div class="service-name">{{ svc.name }}</div>
+                <div
+                  v-for="svc in backendServices"
+                  :key="svc.name"
+                  class="service"
+                >
+                  <div class="service-icon">
+                    {{ svc.icon }}
+                  </div>
+                  <div class="service-name">
+                    {{ svc.name }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -176,7 +291,9 @@
 
     <!-- 说明 -->
     <div class="architecture-legend">
-      <div class="legend-title">计算资源类型说明：</div>
+      <div class="legend-title">
+        计算资源类型说明：
+      </div>
       <div class="legend-items">
         <div class="legend-item">
           <span class="legend-icon">🔧</span>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
index 81900b2..181dc91 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/DisasterRecoveryDemo.vue
@@ -2,37 +2,69 @@
   <div class="disaster-recovery-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="drMode" size="small">
-        <el-radio-button label="same-city">同城双活</el-radio-button>
-        <el-radio-button label="remote">异地灾备</el-radio-button>
-        <el-radio-button label="three-center">两地三中心</el-radio-button>
-        <el-radio-button label="switchover">故障切换</el-radio-button>
+      <el-radio-group
+        v-model="drMode"
+        size="small"
+      >
+        <el-radio-button label="same-city">
+          同城双活
+        </el-radio-button>
+        <el-radio-button label="remote">
+          异地灾备
+        </el-radio-button>
+        <el-radio-button label="three-center">
+          两地三中心
+        </el-radio-button>
+        <el-radio-button label="switchover">
+          故障切换
+        </el-radio-button>
       </el-radio-group>
 
-      <el-switch v-model="showRPO" active-text="显示 RPO/RTO" style="margin-left: 20px" />
+      <el-switch
+        v-model="showRPO"
+        active-text="显示 RPO/RTO"
+        style="margin-left: 20px"
+      />
     </div>
 
     <!-- 灾备架构图 -->
     <div class="dr-architecture">
       <!-- 生产中心 -->
-      <div class="dr-center production" :class="{ degraded: drMode === 'switchover' && switchoverStep >= 2 }">
+      <div
+        class="dr-center production"
+        :class="{ degraded: drMode === 'switchover' && switchoverStep >= 2 }"
+      >
         <div class="center-header">
-          <div class="center-badge production">生产</div>
-          <div class="center-title">生产中心 (Region A)</div>
-          <div class="center-location">📍 北京</div>
+          <div class="center-badge production">
+            生产
+          </div>
+          <div class="center-title">
+            生产中心 (Region A)
+          </div>
+          <div class="center-location">
+            📍 北京
+          </div>
         </div>
 
         <div class="center-content">
           <!-- 可用区 A -->
-          <div class="az-block" :class="{ failed: drMode === 'switchover' && switchoverStep >= 1 }">
+          <div
+            class="az-block"
+            :class="{ failed: drMode === 'switchover' && switchoverStep >= 1 }"
+          >
             <div class="az-header">
               <span class="az-name">可用区 A</span>
-              <span class="az-status" :class="getAzStatus('A')">{{ getAzStatusText('A') }}</span>
+              <span
+                class="az-status"
+                :class="getAzStatus('A')"
+              >{{ getAzStatusText('A') }}</span>
             </div>
 
             <div class="az-resources">
               <div class="resource-group">
-                <div class="group-title">计算</div>
+                <div class="group-title">
+                  计算
+                </div>
                 <div class="resource-tags">
                   <span class="tag">ECS × 8</span>
                   <span class="tag primary">SLB 主</span>
@@ -40,7 +72,9 @@
               </div>
 
               <div class="resource-group">
-                <div class="group-title">数据库</div>
+                <div class="group-title">
+                  数据库
+                </div>
                 <div class="resource-tags">
                   <span class="tag primary">RDS 主</span>
                   <span class="tag">Redis 主</span>
@@ -50,7 +84,10 @@
           </div>
 
           <!-- 可用区 B (同城灾备) -->
-          <div class="az-block standby" v-if="drMode !== 'remote'">
+          <div
+            v-if="drMode !== 'remote'"
+            class="az-block standby"
+          >
             <div class="az-header">
               <span class="az-name">可用区 B</span>
               <span class="az-status standby">热备</span>
@@ -58,7 +95,9 @@
 
             <div class="az-resources">
               <div class="resource-group">
-                <div class="group-title">计算</div>
+                <div class="group-title">
+                  计算
+                </div>
                 <div class="resource-tags">
                   <span class="tag">ECS × 6</span>
                   <span class="tag standby">SLB 备</span>
@@ -66,7 +105,9 @@
               </div>
 
               <div class="resource-group">
-                <div class="group-title">数据库</div>
+                <div class="group-title">
+                  数据库
+                </div>
                 <div class="resource-tags">
                   <span class="tag standby">RDS 备</span>
                   <span class="tag">Redis 备</span>
@@ -77,7 +118,10 @@
         </div>
 
         <!-- RPO/RTO 指示器 -->
-        <div class="rpo-indicator" v-if="showRPO">
+        <div
+          v-if="showRPO"
+          class="rpo-indicator"
+        >
           <div class="rpo-item">
             <span class="rpo-label">RPO</span>
             <span class="rpo-value">{{ getRPO() }}</span>
@@ -91,37 +135,68 @@
 
       <!-- 复制链路 -->
       <div class="replication-links">
-        <div class="link-group same-city" v-if="drMode === 'same-city' || drMode === 'three-center'">
-          <div class="link-line"></div>
-          <div class="link-label">同步复制</div>
-          <div class="link-bandwidth">延迟 &lt; 5ms</div>
+        <div
+          v-if="drMode === 'same-city' || drMode === 'three-center'"
+          class="link-group same-city"
+        >
+          <div class="link-line" />
+          <div class="link-label">
+            同步复制
+          </div>
+          <div class="link-bandwidth">
+            延迟 &lt; 5ms
+          </div>
         </div>
 
-        <div class="link-group remote" v-if="drMode === 'remote' || drMode === 'three-center'">
-          <div class="link-line async"></div>
-          <div class="link-label">异步复制</div>
-          <div class="link-bandwidth">RPO ≈ 5s</div>
+        <div
+          v-if="drMode === 'remote' || drMode === 'three-center'"
+          class="link-group remote"
+        >
+          <div class="link-line async" />
+          <div class="link-label">
+            异步复制
+          </div>
+          <div class="link-bandwidth">
+            RPO ≈ 5s
+          </div>
         </div>
       </div>
 
       <!-- 灾备中心 -->
-      <div class="dr-center disaster-recovery" :class="{ active: drMode === 'switchover' && switchoverStep >= 2 }">
+      <div
+        class="dr-center disaster-recovery"
+        :class="{ active: drMode === 'switchover' && switchoverStep >= 2 }"
+      >
         <div class="center-header">
-          <div class="center-badge dr">灾备</div>
-          <div class="center-title">灾备中心 (Region B)</div>
-          <div class="center-location">📍 {{ drMode === 'same-city' ? '北京 (可用区 C)' : '上海' }}</div>
+          <div class="center-badge dr">
+            灾备
+          </div>
+          <div class="center-title">
+            灾备中心 (Region B)
+          </div>
+          <div class="center-location">
+            📍 {{ drMode === 'same-city' ? '北京 (可用区 C)' : '上海' }}
+          </div>
         </div>
 
         <div class="center-content">
-          <div class="az-block dr-standby" :class="{ promoted: drMode === 'switchover' && switchoverStep >= 3 }">
+          <div
+            class="az-block dr-standby"
+            :class="{ promoted: drMode === 'switchover' && switchoverStep >= 3 }"
+          >
             <div class="az-header">
               <span class="az-name">{{ drMode === 'same-city' ? '可用区 C' : '可用区 A' }}</span>
-              <span class="az-status" :class="getDrAzStatus()">{{ getDrAzStatusText() }}</span>
+              <span
+                class="az-status"
+                :class="getDrAzStatus()"
+              >{{ getDrAzStatusText() }}</span>
             </div>
 
             <div class="az-resources">
               <div class="resource-group">
-                <div class="group-title">计算</div>
+                <div class="group-title">
+                  计算
+                </div>
                 <div class="resource-tags">
                   <span class="tag">ECS × 4</span>
                   <span :class="['tag', drMode === 'switchover' && switchoverStep >= 3 ? 'primary' : 'standby']">
@@ -131,7 +206,9 @@
               </div>
 
               <div class="resource-group">
-                <div class="group-title">数据库</div>
+                <div class="group-title">
+                  数据库
+                </div>
                 <div class="resource-tags">
                   <span :class="['tag', drMode === 'switchover' && switchoverStep >= 3 ? 'primary' : 'standby']">
                     RDS {{ drMode === 'switchover' && switchoverStep >= 3 ? '主' : '备' }}
@@ -146,61 +223,137 @@
     </div>
 
     <!-- 切换进度 (仅在故障切换模式显示) -->
-    <div class="switchover-progress" v-if="drMode === 'switchover'">
-      <div class="progress-title">故障切换进度</div>
-      <el-steps :active="switchoverStep" finish-status="success">
-        <el-step title="检测故障" description="监控系统发现可用区 A 故障" />
-        <el-step title="停止写入" description="切离主库，暂停业务写入" />
-        <el-step title="提升备库" description="灾备中心数据库提升为主库" />
-        <el-step title="流量切换" description="DNS 切换到灾备中心 SLB" />
-        <el-step title="恢复服务" description="业务在灾备中心正常运行" />
+    <div
+      v-if="drMode === 'switchover'"
+      class="switchover-progress"
+    >
+      <div class="progress-title">
+        故障切换进度
+      </div>
+      <el-steps
+        :active="switchoverStep"
+        finish-status="success"
+      >
+        <el-step
+          title="检测故障"
+          description="监控系统发现可用区 A 故障"
+        />
+        <el-step
+          title="停止写入"
+          description="切离主库，暂停业务写入"
+        />
+        <el-step
+          title="提升备库"
+          description="灾备中心数据库提升为主库"
+        />
+        <el-step
+          title="流量切换"
+          description="DNS 切换到灾备中心 SLB"
+        />
+        <el-step
+          title="恢复服务"
+          description="业务在灾备中心正常运行"
+        />
       </el-steps>
 
       <div class="progress-actions">
-        <el-button @click="prevStep" :disabled="switchoverStep === 0">上一步</el-button>
-        <el-button type="primary" @click="nextStep" :disabled="switchoverStep === 5">下一步</el-button>
-        <el-button @click="resetSwitchover">重置</el-button>
+        <el-button
+          :disabled="switchoverStep === 0"
+          @click="prevStep"
+        >
+          上一步
+        </el-button>
+        <el-button
+          type="primary"
+          :disabled="switchoverStep === 5"
+          @click="nextStep"
+        >
+          下一步
+        </el-button>
+        <el-button @click="resetSwitchover">
+          重置
+        </el-button>
       </div>
     </div>
 
     <!-- 架构对比表 -->
     <div class="comparison-section">
-      <div class="comparison-title">📊 灾备架构方案对比</div>
+      <div class="comparison-title">
+        📊 灾备架构方案对比
+      </div>
 
       <div class="comparison-table">
         <div class="table-header">
-          <div class="header-cell">对比维度</div>
-          <div class="header-cell">同城双活</div>
-          <div class="header-cell">异地灾备</div>
-          <div class="header-cell">两地三中心</div>
+          <div class="header-cell">
+            对比维度
+          </div>
+          <div class="header-cell">
+            同城双活
+          </div>
+          <div class="header-cell">
+            异地灾备
+          </div>
+          <div class="header-cell">
+            两地三中心
+          </div>
         </div>
 
-        <div class="table-row" v-for="row in drComparisonData" :key="row.dimension">
-          <div class="cell dimension">{{ row.dimension }}</div>
-          <div class="cell">{{ row.sameCity }}</div>
-          <div class="cell">{{ row.remote }}</div>
-          <div class="cell highlight">{{ row.threeCenter }}</div>
+        <div
+          v-for="row in drComparisonData"
+          :key="row.dimension"
+          class="table-row"
+        >
+          <div class="cell dimension">
+            {{ row.dimension }}
+          </div>
+          <div class="cell">
+            {{ row.sameCity }}
+          </div>
+          <div class="cell">
+            {{ row.remote }}
+          </div>
+          <div class="cell highlight">
+            {{ row.threeCenter }}
+          </div>
         </div>
       </div>
     </div>
 
     <!-- RPO/RTO 说明 -->
     <div class="rpo-rto-explanation">
-      <div class="explanation-title">💡 RPO 与 RTO 说明</div>
+      <div class="explanation-title">
+        💡 RPO 与 RTO 说明
+      </div>
 
       <div class="explanation-grid">
         <div class="explanation-card">
-          <div class="card-icon">⏰</div>
-          <div class="card-title">RPO (恢复点目标)</div>
-          <div class="card-desc">可接受的数据丢失量，即最后一次备份到故障发生的时间间隔</div>
-          <div class="card-example">示例：RPO = 5秒，意味着最多丢失5秒的数据</div>
+          <div class="card-icon">
+            ⏰
+          </div>
+          <div class="card-title">
+            RPO (恢复点目标)
+          </div>
+          <div class="card-desc">
+            可接受的数据丢失量，即最后一次备份到故障发生的时间间隔
+          </div>
+          <div class="card-example">
+            示例：RPO = 5秒，意味着最多丢失5秒的数据
+          </div>
         </div>
 
         <div class="explanation-card">
-          <div class="card-icon">🔄</div>
-          <div class="card-title">RTO (恢复时间目标)</div>
-          <div class="card-desc">从故障发生到业务恢复所需的最长时间</div>
-          <div class="card-example">示例：RTO = 30分钟，意味着30分钟内必须恢复服务</div>
+          <div class="card-icon">
+            🔄
+          </div>
+          <div class="card-title">
+            RTO (恢复时间目标)
+          </div>
+          <div class="card-desc">
+            从故障发生到业务恢复所需的最长时间
+          </div>
+          <div class="card-example">
+            示例：RTO = 30分钟，意味着30分钟内必须恢复服务
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
index dabd252..b608d8a 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/NetworkFlowDemo.vue
@@ -2,56 +2,110 @@
   <div class="network-flow-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="flowMode" size="small">
-        <el-radio-button label="inbound">入向流量</el-radio-button>
-        <el-radio-button label="outbound">出向流量</el-radio-button>
-        <el-radio-button label="east-west">东西向流量</el-radio-button>
-        <el-radio-button label="full">完整拓扑</el-radio-button>
+      <el-radio-group
+        v-model="flowMode"
+        size="small"
+      >
+        <el-radio-button label="inbound">
+          入向流量
+        </el-radio-button>
+        <el-radio-button label="outbound">
+          出向流量
+        </el-radio-button>
+        <el-radio-button label="east-west">
+          东西向流量
+        </el-radio-button>
+        <el-radio-button label="full">
+          完整拓扑
+        </el-radio-button>
       </el-radio-group>
 
-      <el-switch v-model="showMetrics" active-text="显示流量数据" style="margin-left: 20px" />
+      <el-switch
+        v-model="showMetrics"
+        active-text="显示流量数据"
+        style="margin-left: 20px"
+      />
     </div>
 
     <!-- 网络拓扑图 -->
     <div class="network-topology">
       <!-- 互联网区域 -->
-      <div class="zone internet-zone" v-if="showInternet">
+      <div
+        v-if="showInternet"
+        class="zone internet-zone"
+      >
         <div class="zone-header">
           <span class="zone-icon">🌐</span>
           <span class="zone-title">互联网 (Internet)</span>
         </div>
         <div class="zone-content">
           <div class="internet-entities">
-            <div class="entity" v-for="entity in internetEntities" :key="entity.name">
-              <div class="entity-icon">{{ entity.icon }}</div>
-              <div class="entity-name">{{ entity.name }}</div>
+            <div
+              v-for="entity in internetEntities"
+              :key="entity.name"
+              class="entity"
+            >
+              <div class="entity-icon">
+                {{ entity.icon }}
+              </div>
+              <div class="entity-name">
+                {{ entity.name }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 流量箭头 -->
-      <div class="flow-arrows" v-if="showFlowArrows">
+      <div
+        v-if="showFlowArrows"
+        class="flow-arrows"
+      >
         <div class="arrow-container">
-          <div class="flow-line" :class="flowMode"></div>
-          <div class="flow-particles" v-if="showMetrics">
-            <div class="particle" v-for="n in 5" :key="n"
-                 :style="{ animationDelay: (n * 0.5) + 's' }"></div>
+          <div
+            class="flow-line"
+            :class="flowMode"
+          />
+          <div
+            v-if="showMetrics"
+            class="flow-particles"
+          >
+            <div
+              v-for="n in 5"
+              :key="n"
+              class="particle"
+              :style="{ animationDelay: (n * 0.5) + 's' }"
+            />
           </div>
         </div>
 
-        <div class="flow-stats" v-if="showMetrics">
+        <div
+          v-if="showMetrics"
+          class="flow-stats"
+        >
           <div class="stat-item">
-            <div class="stat-label">带宽</div>
-            <div class="stat-value">2.5 Gbps</div>
+            <div class="stat-label">
+              带宽
+            </div>
+            <div class="stat-value">
+              2.5 Gbps
+            </div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">流量</div>
-            <div class="stat-value">1.2 TB/天</div>
+            <div class="stat-label">
+              流量
+            </div>
+            <div class="stat-value">
+              1.2 TB/天
+            </div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">延迟</div>
-            <div class="stat-value">15 ms</div>
+            <div class="stat-label">
+              延迟
+            </div>
+            <div class="stat-value">
+              15 ms
+            </div>
           </div>
         </div>
       </div>
@@ -65,12 +119,23 @@
         <div class="zone-content">
           <!-- 网络设备层 -->
           <div class="network-devices">
-            <div class="device" v-for="device in networkDevices" :key="device.name"
-                 :class="device.type">
-              <div class="device-icon">{{ device.icon }}</div>
-              <div class="device-name">{{ device.name }}</div>
+            <div
+              v-for="device in networkDevices"
+              :key="device.name"
+              class="device"
+              :class="device.type"
+            >
+              <div class="device-icon">
+                {{ device.icon }}
+              </div>
+              <div class="device-name">
+                {{ device.name }}
+              </div>
 
-              <div class="device-stats" v-if="showMetrics">
+              <div
+                v-if="showMetrics"
+                class="device-stats"
+              >
                 <div class="stat">
                   <span class="stat-label">吞吐</span>
                   <span class="stat-value">{{ device.throughput }}</span>
@@ -85,8 +150,12 @@
 
           <!-- 子网层 -->
           <div class="subnets-container">
-            <div class="subnet" v-for="subnet in subnets" :key="subnet.name"
-                 :class="subnet.type">
+            <div
+              v-for="subnet in subnets"
+              :key="subnet.name"
+              class="subnet"
+              :class="subnet.type"
+            >
               <div class="subnet-header">
                 <span class="subnet-type-icon">{{ subnet.type === 'public' ? '🌐' : '🔒' }}</span>
                 <span class="subnet-name">{{ subnet.name }}</span>
@@ -94,14 +163,27 @@
               </div>
 
               <div class="subnet-resources">
-                <div class="resource" v-for="resource in subnet.resources" :key="resource.name">
-                  <div class="resource-icon">{{ resource.icon }}</div>
+                <div
+                  v-for="resource in subnet.resources"
+                  :key="resource.name"
+                  class="resource"
+                >
+                  <div class="resource-icon">
+                    {{ resource.icon }}
+                  </div>
                   <div class="resource-info">
-                    <div class="resource-name">{{ resource.name }}</div>
-                    <div class="resource-ip">{{ resource.ip }}</div>
+                    <div class="resource-name">
+                      {{ resource.name }}
+                    </div>
+                    <div class="resource-ip">
+                      {{ resource.ip }}
+                    </div>
                   </div>
 
-                  <div class="resource-traffic" v-if="showMetrics">
+                  <div
+                    v-if="showMetrics"
+                    class="resource-traffic"
+                  >
                     <div class="traffic-in">
                       <span class="traffic-label">↓</span>
                       <span class="traffic-value">{{ resource.inTraffic }}</span>
@@ -121,18 +203,20 @@
 
     <!-- 图例说明 -->
     <div class="network-legend">
-      <div class="legend-title">流量类型说明：</div>
+      <div class="legend-title">
+        流量类型说明：
+      </div>
       <div class="legend-items">
         <div class="legend-item">
-          <span class="legend-color inbound"></span>
+          <span class="legend-color inbound" />
           <span>入向流量：用户 → 服务器</span>
         </div>
         <div class="legend-item">
-          <span class="legend-color outbound"></span>
+          <span class="legend-color outbound" />
           <span>出向流量：服务器 → 外部</span>
         </div>
         <div class="legend-item">
-          <span class="legend-color east-west"></span>
+          <span class="legend-color east-west" />
           <span>东西向流量：服务间通信</span>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
index a3a4eb1..1405570 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/ResourceTopologyDemo.vue
@@ -1,60 +1,109 @@
 <template>
   <div class="resource-topology-demo">
     <div class="controls">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="overview">全景视图</el-radio-button>
-        <el-radio-button label="compute">计算视角</el-radio-button>
-        <el-radio-button label="network">网络视角</el-radio-button>
-        <el-radio-button label="storage">存储视角</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="overview">
+          全景视图
+        </el-radio-button>
+        <el-radio-button label="compute">
+          计算视角
+        </el-radio-button>
+        <el-radio-button label="network">
+          网络视角
+        </el-radio-button>
+        <el-radio-button label="storage">
+          存储视角
+        </el-radio-button>
       </el-radio-group>
     </div>
 
-    <div class="topology-container" ref="topologyRef">
+    <div
+      ref="topologyRef"
+      class="topology-container"
+    >
       <!-- 云服务商层 -->
       <div class="layer cloud-provider">
-        <div class="layer-title">☁️ 云服务商</div>
-        <div class="provider-grid">
-          <div v-for="provider in providers" :key="provider.name"
-               class="provider-card"
-               :class="{ active: selectedProvider === provider.name }"
-               @click="selectProvider(provider.name)">
-            <div class="provider-icon">{{ provider.icon }}</div>
-            <div class="provider-name">{{ provider.name }}</div>
-          </div>
+        <div class="layer-title">
+          ☁️ 云服务商
         </div>
-      </div>
-
-      <!-- 连接箭头 -->
-      <div class="connection-arrow">⬇️</div>
-
-      <!-- 地域/可用区层 -->
-      <div class="layer region-layer">
-        <div class="layer-title">🌍 地域 & 可用区</div>
-        <div class="region-grid">
-          <div v-for="region in regions" :key="region.id"
-               class="region-card"
-               :class="{ active: selectedRegion === region.id }"
-               @click="selectRegion(region.id)">
-            <div class="region-name">{{ region.name }}</div>
-            <div class="region-azs">
-              <span v-for="az in region.azs" :key="az" class="az-badge">{{ az }}</span>
+        <div class="provider-grid">
+          <div
+            v-for="provider in providers"
+            :key="provider.name"
+            class="provider-card"
+            :class="{ active: selectedProvider === provider.name }"
+            @click="selectProvider(provider.name)"
+          >
+            <div class="provider-icon">
+              {{ provider.icon }}
+            </div>
+            <div class="provider-name">
+              {{ provider.name }}
             </div>
           </div>
         </div>
       </div>
 
       <!-- 连接箭头 -->
-      <div class="connection-arrow">⬇️</div>
+      <div class="connection-arrow">
+        ⬇️
+      </div>
+
+      <!-- 地域/可用区层 -->
+      <div class="layer region-layer">
+        <div class="layer-title">
+          🌍 地域 & 可用区
+        </div>
+        <div class="region-grid">
+          <div
+            v-for="region in regions"
+            :key="region.id"
+            class="region-card"
+            :class="{ active: selectedRegion === region.id }"
+            @click="selectRegion(region.id)"
+          >
+            <div class="region-name">
+              {{ region.name }}
+            </div>
+            <div class="region-azs">
+              <span
+                v-for="az in region.azs"
+                :key="az"
+                class="az-badge"
+              >{{ az }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 连接箭头 -->
+      <div class="connection-arrow">
+        ⬇️
+      </div>
 
       <!-- 资源拓扑层 -->
       <div class="layer resource-layer">
-        <div class="layer-title">🎯 资源拓扑</div>
+        <div class="layer-title">
+          🎯 资源拓扑
+        </div>
         <div class="resource-grid">
           <!-- 计算资源 -->
-          <div class="resource-category" :class="{ highlight: viewMode === 'compute' || viewMode === 'overview' }">
-            <div class="category-title">💻 计算</div>
+          <div
+            class="resource-category"
+            :class="{ highlight: viewMode === 'compute' || viewMode === 'overview' }"
+          >
+            <div class="category-title">
+              💻 计算
+            </div>
             <div class="resource-list">
-              <div v-for="item in computeResources" :key="item.name" class="resource-item">
+              <div
+                v-for="item in computeResources"
+                :key="item.name"
+                class="resource-item"
+              >
                 <span class="resource-icon">{{ item.icon }}</span>
                 <span class="resource-name">{{ item.name }}</span>
               </div>
@@ -62,10 +111,19 @@
           </div>
 
           <!-- 网络资源 -->
-          <div class="resource-category" :class="{ highlight: viewMode === 'network' || viewMode === 'overview' }">
-            <div class="category-title">🌐 网络</div>
+          <div
+            class="resource-category"
+            :class="{ highlight: viewMode === 'network' || viewMode === 'overview' }"
+          >
+            <div class="category-title">
+              🌐 网络
+            </div>
             <div class="resource-list">
-              <div v-for="item in networkResources" :key="item.name" class="resource-item">
+              <div
+                v-for="item in networkResources"
+                :key="item.name"
+                class="resource-item"
+              >
                 <span class="resource-icon">{{ item.icon }}</span>
                 <span class="resource-name">{{ item.name }}</span>
               </div>
@@ -73,10 +131,19 @@
           </div>
 
           <!-- 存储资源 -->
-          <div class="resource-category" :class="{ highlight: viewMode === 'storage' || viewMode === 'overview' }">
-            <div class="category-title">💾 存储</div>
+          <div
+            class="resource-category"
+            :class="{ highlight: viewMode === 'storage' || viewMode === 'overview' }"
+          >
+            <div class="category-title">
+              💾 存储
+            </div>
             <div class="resource-list">
-              <div v-for="item in storageResources" :key="item.name" class="resource-item">
+              <div
+                v-for="item in storageResources"
+                :key="item.name"
+                class="resource-item"
+              >
                 <span class="resource-icon">{{ item.icon }}</span>
                 <span class="resource-name">{{ item.name }}</span>
               </div>
@@ -87,16 +154,26 @@
     </div>
 
     <!-- 信息面板 -->
-    <div class="info-panel" v-if="showInfo">
+    <div
+      v-if="showInfo"
+      class="info-panel"
+    >
       <div class="info-header">
         <h4>💡 拓扑说明</h4>
-        <el-button type="text" @click="showInfo = false">关闭</el-button>
+        <el-button
+          type="text"
+          @click="showInfo = false"
+        >
+          关闭
+        </el-button>
       </div>
       <div class="info-content">
         <p><strong>当前视图：</strong>{{ viewModeText }}</p>
         <p><strong>选中云商：</strong>{{ selectedProvider || '未选择' }}</p>
         <p><strong>选中地域：</strong>{{ selectedRegion || '未选择' }}</p>
-        <p class="tip">💡 提示：点击云服务商和地域可以查看不同组合的资源拓扑</p>
+        <p class="tip">
+          💡 提示：点击云服务商和地域可以查看不同组合的资源拓扑
+        </p>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
index 082a198..f130434 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/StorageTopologyDemo.vue
@@ -2,30 +2,66 @@
   <div class="storage-topology-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="overview">存储概览</el-radio-button>
-        <el-radio-button label="object">对象存储</el-radio-button>
-        <el-radio-button label="block">块存储</el-radio-button>
-        <el-radio-button label="file">文件存储</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="overview">
+          存储概览
+        </el-radio-button>
+        <el-radio-button label="object">
+          对象存储
+        </el-radio-button>
+        <el-radio-button label="block">
+          块存储
+        </el-radio-button>
+        <el-radio-button label="file">
+          文件存储
+        </el-radio-button>
       </el-radio-group>
 
-      <el-switch v-model="showDetails" active-text="显示详情" style="margin-left: 20px" />
+      <el-switch
+        v-model="showDetails"
+        active-text="显示详情"
+        style="margin-left: 20px"
+      />
     </div>
 
     <!-- 存储架构图 -->
     <div class="storage-architecture">
       <!-- 应用接入层 -->
       <div class="layer access-layer">
-        <div class="layer-title">🔌 应用接入层</div>
+        <div class="layer-title">
+          🔌 应用接入层
+        </div>
         <div class="access-methods">
-          <div class="method-card" v-for="method in accessMethods" :key="method.name"
-               @mouseenter="hoverMethod = method.name" @mouseleave="hoverMethod = null">
-            <div class="method-icon">{{ method.icon }}</div>
-            <div class="method-name">{{ method.name }}</div>
-            <div class="method-desc">{{ method.description }}</div>
+          <div
+            v-for="method in accessMethods"
+            :key="method.name"
+            class="method-card"
+            @mouseenter="hoverMethod = method.name"
+            @mouseleave="hoverMethod = null"
+          >
+            <div class="method-icon">
+              {{ method.icon }}
+            </div>
+            <div class="method-name">
+              {{ method.name }}
+            </div>
+            <div class="method-desc">
+              {{ method.description }}
+            </div>
 
-            <div class="method-tooltip" v-if="hoverMethod === method.name && showDetails">
-              <div v-for="detail in method.details" :key="detail">{{ detail }}</div>
+            <div
+              v-if="hoverMethod === method.name && showDetails"
+              class="method-tooltip"
+            >
+              <div
+                v-for="detail in method.details"
+                :key="detail"
+              >
+                {{ detail }}
+              </div>
             </div>
           </div>
         </div>
@@ -33,16 +69,25 @@
 
       <!-- 存储网关层 -->
       <div class="layer gateway-layer">
-        <div class="layer-title">🚪 存储网关层</div>
+        <div class="layer-title">
+          🚪 存储网关层
+        </div>
         <div class="gateways-grid">
-          <div class="gateway-card" v-for="gateway in storageGateways" :key="gateway.name"
-               :class="gateway.type">
+          <div
+            v-for="gateway in storageGateways"
+            :key="gateway.name"
+            class="gateway-card"
+            :class="gateway.type"
+          >
             <div class="gateway-header">
               <span class="gateway-icon">{{ gateway.icon }}</span>
               <span class="gateway-name">{{ gateway.name }}</span>
             </div>
 
-            <div class="gateway-metrics" v-if="showDetails">
+            <div
+              v-if="showDetails"
+              class="gateway-metrics"
+            >
               <div class="metric">
                 <span class="metric-label">TPS：</span>
                 <span class="metric-value">{{ gateway.tps }}</span>
@@ -58,17 +103,27 @@
 
       <!-- 存储服务层 -->
       <div class="layer storage-services-layer">
-        <div class="layer-title">💾 存储服务层</div>
+        <div class="layer-title">
+          💾 存储服务层
+        </div>
         <div class="storage-types-grid">
           <!-- 对象存储 -->
-          <div class="storage-type-card object-storage"
-               :class="{ active: viewMode === 'object' || viewMode === 'overview' }">
+          <div
+            class="storage-type-card object-storage"
+            :class="{ active: viewMode === 'object' || viewMode === 'overview' }"
+          >
             <div class="storage-header">
-              <div class="storage-icon">🪣</div>
-              <div class="storage-title">对象存储 OSS</div>
+              <div class="storage-icon">
+                🪣
+              </div>
+              <div class="storage-title">
+                对象存储 OSS
+              </div>
             </div>
 
-            <div class="storage-desc">适合存储图片、视频、日志等非结构化数据</div>
+            <div class="storage-desc">
+              适合存储图片、视频、日志等非结构化数据
+            </div>
 
             <div class="storage-features">
               <div class="feature">
@@ -85,27 +140,44 @@
               </div>
             </div>
 
-            <div class="storage-buckets" v-if="showDetails">
-              <div class="bucket" v-for="bucket in buckets" :key="bucket.name">
+            <div
+              v-if="showDetails"
+              class="storage-buckets"
+            >
+              <div
+                v-for="bucket in buckets"
+                :key="bucket.name"
+                class="bucket"
+              >
                 <div class="bucket-info">
                   <span class="bucket-name">{{ bucket.name }}</span>
                   <span class="bucket-objects">{{ bucket.objects }} 个对象</span>
                 </div>
 
-                <div class="bucket-size">{{ bucket.size }}</div>
+                <div class="bucket-size">
+                  {{ bucket.size }}
+                </div>
               </div>
             </div>
           </div>
 
           <!-- 块存储 -->
-          <div class="storage-type-card block-storage"
-               :class="{ active: viewMode === 'block' || viewMode === 'overview' }">
+          <div
+            class="storage-type-card block-storage"
+            :class="{ active: viewMode === 'block' || viewMode === 'overview' }"
+          >
             <div class="storage-header">
-              <div class="storage-icon">💽</div>
-              <div class="storage-title">块存储 EBS</div>
+              <div class="storage-icon">
+                💽
+              </div>
+              <div class="storage-title">
+                块存储 EBS
+              </div>
             </div>
 
-            <div class="storage-desc">为云服务器提供高性能、低延迟的数据块存储</div>
+            <div class="storage-desc">
+              为云服务器提供高性能、低延迟的数据块存储
+            </div>
 
             <div class="storage-features">
               <div class="feature">
@@ -122,12 +194,22 @@
               </div>
             </div>
 
-            <div class="volumes-list" v-if="showDetails">
-              <div class="volume" v-for="vol in volumes" :key="vol.id">
+            <div
+              v-if="showDetails"
+              class="volumes-list"
+            >
+              <div
+                v-for="vol in volumes"
+                :key="vol.id"
+                class="volume"
+              >
                 <div class="volume-info">
                   <div class="volume-header">
                     <span class="volume-name">{{ vol.name }}</span>
-                    <span class="volume-type" :class="vol.type">{{ vol.type }}</span>
+                    <span
+                      class="volume-type"
+                      :class="vol.type"
+                    >{{ vol.type }}</span>
                   </div>
 
                   <div class="volume-meta">
@@ -137,23 +219,38 @@
                   </div>
                 </div>
 
-                <div class="volume-iops" v-if="vol.iops">
-                  <div class="iops-label">IOPS</div>
-                  <div class="iops-value">{{ vol.iops }}</div>
+                <div
+                  v-if="vol.iops"
+                  class="volume-iops"
+                >
+                  <div class="iops-label">
+                    IOPS
+                  </div>
+                  <div class="iops-value">
+                    {{ vol.iops }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- 文件存储 -->
-          <div class="storage-type-card file-storage"
-               :class="{ active: viewMode === 'file' || viewMode === 'overview' }">
+          <div
+            class="storage-type-card file-storage"
+            :class="{ active: viewMode === 'file' || viewMode === 'overview' }"
+          >
             <div class="storage-header">
-              <div class="storage-icon">📁</div>
-              <div class="storage-title">文件存储 NAS</div>
+              <div class="storage-icon">
+                📁
+              </div>
+              <div class="storage-title">
+                文件存储 NAS
+              </div>
             </div>
 
-            <div class="storage-desc">为多个计算节点提供共享文件系统访问</div>
+            <div class="storage-desc">
+              为多个计算节点提供共享文件系统访问
+            </div>
 
             <div class="storage-features">
               <div class="feature">
@@ -170,12 +267,22 @@
               </div>
             </div>
 
-            <div class="filesystems-list" v-if="showDetails">
-              <div class="filesystem" v-for="fs in filesystems" :key="fs.name">
+            <div
+              v-if="showDetails"
+              class="filesystems-list"
+            >
+              <div
+                v-for="fs in filesystems"
+                :key="fs.name"
+                class="filesystem"
+              >
                 <div class="fs-header">
                   <div class="fs-info">
                     <span class="fs-name">{{ fs.name }}</span>
-                    <span class="fs-protocol" :class="fs.protocol">{{ fs.protocol }}</span>
+                    <span
+                      class="fs-protocol"
+                      :class="fs.protocol"
+                    >{{ fs.protocol }}</span>
                   </div>
 
                   <div class="fs-capacity">
@@ -185,14 +292,23 @@
                 </div>
 
                 <div class="fs-capacity-bar">
-                  <div class="capacity-progress" :style="{ width: fs.percentage + '%' }"
-                       :class="{ warning: fs.percentage > 80, danger: fs.percentage > 90 }"></div>
+                  <div
+                    class="capacity-progress"
+                    :style="{ width: fs.percentage + '%' }"
+                    :class="{ warning: fs.percentage > 80, danger: fs.percentage > 90 }"
+                  />
                 </div>
 
                 <div class="fs-mounts">
-                  <div class="mounts-label">挂载点：</div>
+                  <div class="mounts-label">
+                    挂载点：
+                  </div>
                   <div class="mounts-list">
-                    <span class="mount-point" v-for="mount in fs.mounts" :key="mount">{{ mount }}</span>
+                    <span
+                      v-for="mount in fs.mounts"
+                      :key="mount"
+                      class="mount-point"
+                    >{{ mount }}</span>
                   </div>
                 </div>
               </div>
@@ -204,21 +320,52 @@
 
     <!-- 存储选型对比 -->
     <div class="comparison-section">
-      <div class="comparison-title">📊 存储类型选型对比</div>
+      <div class="comparison-title">
+        📊 存储类型选型对比
+      </div>
 
       <div class="comparison-table">
         <div class="table-header">
-          <div class="header-cell">特性</div>
-          <div class="header-cell object">对象存储</div>
-          <div class="header-cell block">块存储</div>
-          <div class="header-cell file">文件存储</div>
+          <div class="header-cell">
+            特性
+          </div>
+          <div class="header-cell object">
+            对象存储
+          </div>
+          <div class="header-cell block">
+            块存储
+          </div>
+          <div class="header-cell file">
+            文件存储
+          </div>
         </div>
 
-        <div class="table-row" v-for="row in comparisonData" :key="row.feature">
-          <div class="cell feature">{{ row.feature }}</div>
-          <div class="cell" :class="{ highlight: row.object === '优秀' || row.object === '强' }">{{ row.object }}</div>
-          <div class="cell" :class="{ highlight: row.block === '优秀' || row.block === '强' }">{{ row.block }}</div>
-          <div class="cell" :class="{ highlight: row.file === '优秀' || row.file === '强' }">{{ row.file }}</div>
+        <div
+          v-for="row in comparisonData"
+          :key="row.feature"
+          class="table-row"
+        >
+          <div class="cell feature">
+            {{ row.feature }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: row.object === '优秀' || row.object === '强' }"
+          >
+            {{ row.object }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: row.block === '优秀' || row.block === '强' }"
+          >
+            {{ row.block }}
+          </div>
+          <div
+            class="cell"
+            :class="{ highlight: row.file === '优秀' || row.file === '强' }"
+          >
+            {{ row.file }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
index ae89f87..7412a79 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/SubnetDesignDemo.vue
@@ -4,19 +4,39 @@
     <div class="control-panel">
       <div class="panel-section">
         <span class="panel-label">VPC 网段：</span>
-        <el-radio-group v-model="vpcCidr" size="small">
-          <el-radio-button label="172.16.0.0/12">172.16.0.0/12</el-radio-button>
-          <el-radio-button label="10.0.0.0/8">10.0.0.0/8</el-radio-button>
-          <el-radio-button label="192.168.0.0/16">192.168.0.0/16</el-radio-button>
+        <el-radio-group
+          v-model="vpcCidr"
+          size="small"
+        >
+          <el-radio-button label="172.16.0.0/12">
+            172.16.0.0/12
+          </el-radio-button>
+          <el-radio-button label="10.0.0.0/8">
+            10.0.0.0/8
+          </el-radio-button>
+          <el-radio-button label="192.168.0.0/16">
+            192.168.0.0/16
+          </el-radio-button>
         </el-radio-group>
       </div>
 
       <div class="panel-section">
         <span class="panel-label">子网划分：</span>
-        <el-slider v-model="subnetBits" :min="2" :max="4" show-stops :marks="{2: '/24', 3: '/25', 4: '/26'}" style="width: 200px;" />
+        <el-slider
+          v-model="subnetBits"
+          :min="2"
+          :max="4"
+          show-stops
+          :marks="{2: '/24', 3: '/25', 4: '/26'}"
+          style="width: 200px;"
+        />
       </div>
 
-      <el-switch v-model="showCalculation" active-text="显示计算过程" style="margin-left: 20px;" />
+      <el-switch
+        v-model="showCalculation"
+        active-text="显示计算过程"
+        style="margin-left: 20px;"
+      />
     </div>
 
     <!-- 网段可视化 -->
@@ -42,14 +62,19 @@
               <span class="cell-type">{{ subnet.type === 'public' ? '🌐' : '🔒' }}</span>
               <span class="cell-name">{{ subnet.name }}</span>
             </div>
-            <div class="cell-cidr">{{ subnet.cidr }}</div>
+            <div class="cell-cidr">
+              {{ subnet.cidr }}
+            </div>
             <div class="cell-stats">
               <span class="ip-count">{{ subnet.ipCount }} IP</span>
               <span class="az-badge">{{ subnet.az }}</span>
             </div>
 
             <!-- 悬停提示 -->
-            <div class="cell-tooltip" v-if="hoverSubnet === index && showCalculation">
+            <div
+              v-if="hoverSubnet === index && showCalculation"
+              class="cell-tooltip"
+            >
               <div class="tooltip-row">
                 <span>网段范围：</span>
                 <code>{{ subnet.range }}</code>
@@ -69,7 +94,10 @@
     </div>
 
     <!-- 网段计算说明 -->
-    <div class="calculation-panel" v-if="showCalculation">
+    <div
+      v-if="showCalculation"
+      class="calculation-panel"
+    >
       <h4>📐 子网划分计算说明</h4>
 
       <div class="calc-section">
@@ -118,21 +146,27 @@
       <h4>💡 子网设计最佳实践</h4>
       <div class="tips-grid">
         <div class="tip-item">
-          <div class="tip-icon">🎯</div>
+          <div class="tip-icon">
+            🎯
+          </div>
           <div class="tip-content">
             <h5>预留足够 IP</h5>
             <p>每个子网至少预留 20% 的 IP 作为扩容缓冲</p>
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-icon">🔒</div>
+          <div class="tip-icon">
+            🔒
+          </div>
           <div class="tip-content">
             <h5>公网私网分离</h5>
             <p>核心数据放在私网子网，通过 NAT 访问外网</p>
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-icon">🌐</div>
+          <div class="tip-icon">
+            🌐
+          </div>
           <div class="tip-content">
             <h5>多 AZ 部署</h5>
             <p>同一 VPC 的不同子网放在不同可用区</p>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
index 3610288..48667ba 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-topology/VpcArchitectureDemo.vue
@@ -2,11 +2,22 @@
   <div class="vpc-architecture-demo">
     <!-- 控制面板 -->
     <div class="control-panel">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="full">完整架构</el-radio-button>
-        <el-radio-button label="public">公网访问</el-radio-button>
-        <el-radio-button label="private">私网隔离</el-radio-button>
-        <el-radio-button label="hybrid">混合云</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="full">
+          完整架构
+        </el-radio-button>
+        <el-radio-button label="public">
+          公网访问
+        </el-radio-button>
+        <el-radio-button label="private">
+          私网隔离
+        </el-radio-button>
+        <el-radio-button label="hybrid">
+          混合云
+        </el-radio-button>
       </el-radio-group>
       <el-switch
         v-model="showDetails"
@@ -18,126 +29,183 @@
     <!-- VPC 架构图 -->
     <div class="vpc-container">
       <!-- 外部互联网 -->
-      <div class="internet-zone" v-if="showInternet">
+      <div
+        v-if="showInternet"
+        class="internet-zone"
+      >
         <div class="zone-header">
           <span class="zone-icon">🌐</span>
           <span class="zone-title">互联网 (Internet)</span>
         </div>
         <div class="zone-content">
           <div class="internet-user">
-            <div class="user-avatar">👤</div>
-            <div class="user-label">用户</div>
+            <div class="user-avatar">
+              👤
+            </div>
+            <div class="user-label">
+              用户
+            </div>
           </div>
           <div class="internet-user">
-            <div class="user-avatar">🏢</div>
-            <div class="user-label">企业</div>
+            <div class="user-avatar">
+              🏢
+            </div>
+            <div class="user-label">
+              企业
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 连接箭头 -->
-      <div class="connection-flow" v-if="showInternet">
-        <div class="flow-line"></div>
+      <div
+        v-if="showInternet"
+        class="connection-flow"
+      >
+        <div class="flow-line" />
         <div class="flow-devices">
-          <div class="device" v-for="device in borderDevices" :key="device.name"
-               :class="device.type"
-               @mouseenter="hoverDevice = device.name"
-               @mouseleave="hoverDevice = null"
-003e
-            <div class="device-icon">{{ device.icon }}</div>
-            <div class="device-name">{{ device.name }}</div>
-            <div class="device-tooltip" v-if="hoverDevice === device.name && showDetails">
-              {{ device.description }}
-            </div>
+          <div
+            v-for="device in borderDevices"
+            :key="device.name"
+            class="device"
+            :class="device.type"
+            003e
+            <div
+            class="device-icon"
+            @mouseenter="hoverDevice = device.name"
+            @mouseleave="hoverDevice = null"
+          >
+            {{ device.icon }}
+          </div>
+          <div class="device-name">
+            {{ device.name }}
+          </div>
+          <div
+            v-if="hoverDevice === device.name && showDetails"
+            class="device-tooltip"
+          >
+            {{ device.description }}
           </div>
         </div>
       </div>
+    </div>
 
-      <!-- VPC 主体 -->
-      <div class="vpc-zone">
-        <div class="vpc-header">
-          <div class="vpc-title">
-            <span class="vpc-icon">🏠</span>
-            <span>专有网络 VPC</span>
-            <span class="vpc-id">vpc-2ze7p8w7c9d6x5y4</span>
+    <!-- VPC 主体 -->
+    <div class="vpc-zone">
+      <div class="vpc-header">
+        <div class="vpc-title">
+          <span class="vpc-icon">🏠</span>
+          <span>专有网络 VPC</span>
+          <span class="vpc-id">vpc-2ze7p8w7c9d6x5y4</span>
+        </div>
+        <div class="vpc-meta">
+          <span class="meta-item">📍 华北2 (北京)</span>
+          <span class="meta-item">🌐 172.16.0.0/12</span>
+        </div>
+      </div>
+
+      <div class="vpc-content">
+        <!-- 可用区 1 -->
+        <div class="az-container">
+          <div class="az-header">
+            <span class="az-name">可用区 A</span>
+            <span class="az-status online">在线</span>
           </div>
-          <div class="vpc-meta">
-            <span class="meta-item">📍 华北2 (北京)</span>
-            <span class="meta-item">🌐 172.16.0.0/12</span>
+          <div class="subnets">
+            <div
+              class="subnet public"
+              @mouseenter="hoverSubnet = 'public-a'"
+              @mouseleave="hoverSubnet = null"
+            >
+              <div class="subnet-header">
+                <span class="subnet-type">🌐 公网子网</span>
+                <span class="subnet-cidr">172.16.1.0/24</span>
+              </div>
+              <div class="subnet-resources">
+                <div class="resource-tag">
+                  🖥️ ECS × 2
+                </div>
+                <div class="resource-tag">
+                  ⚖️ SLB
+                </div>
+                <div class="resource-tag">
+                  🌐 NAT
+                </div>
+              </div>
+              <div
+                v-if="hoverSubnet === 'public-a' && showDetails"
+                class="subnet-tooltip"
+              >
+                公网子网：可直接访问互联网，部署对外服务
+              </div>
+            </div>
+
+            <div
+              class="subnet private"
+              @mouseenter="hoverSubnet = 'private-a'"
+              @mouseleave="hoverSubnet = null"
+            >
+              <div class="subnet-header">
+                <span class="subnet-type">🔒 私网子网</span>
+                <span class="subnet-cidr">172.16.2.0/24</span>
+              </div>
+              <div class="subnet-resources">
+                <div class="resource-tag">
+                  🖥️ ECS × 4
+                </div>
+                <div class="resource-tag">
+                  🗄️ RDS
+                </div>
+                <div class="resource-tag">
+                  📦 Redis
+                </div>
+              </div>
+              <div
+                v-if="hoverSubnet === 'private-a' && showDetails"
+                class="subnet-tooltip"
+              >
+                私网子网：无法直接访问互联网，部署核心服务
+              </div>
+            </div>
           </div>
         </div>
 
-        <div class="vpc-content">
-          <!-- 可用区 1 -->
-          <div class="az-container">
-            <div class="az-header">
-              <span class="az-name">可用区 A</span>
-              <span class="az-status online">在线</span>
-            </div>
-            <div class="subnets">
-              <div class="subnet public"
-                   @mouseenter="hoverSubnet = 'public-a'"
-                   @mouseleave="hoverSubnet = null">
-                <div class="subnet-header">
-                  <span class="subnet-type">🌐 公网子网</span>
-                  <span class="subnet-cidr">172.16.1.0/24</span>
-                </div>
-                <div class="subnet-resources">
-                  <div class="resource-tag">🖥️ ECS × 2</div>
-                  <div class="resource-tag">⚖️ SLB</div>
-                  <div class="resource-tag">🌐 NAT</div>
-                </div>
-                <div class="subnet-tooltip" v-if="hoverSubnet === 'public-a' && showDetails">
-                  公网子网：可直接访问互联网，部署对外服务
-                </div>
-              </div>
-
-              <div class="subnet private"
-                   @mouseenter="hoverSubnet = 'private-a'"
-                   @mouseleave="hoverSubnet = null">
-                <div class="subnet-header">
-                  <span class="subnet-type">🔒 私网子网</span>
-                  <span class="subnet-cidr">172.16.2.0/24</span>
-                </div>
-                <div class="subnet-resources">
-                  <div class="resource-tag">🖥️ ECS × 4</div>
-                  <div class="resource-tag">🗄️ RDS</div>
-                  <div class="resource-tag">📦 Redis</div>
-                </div>
-                <div class="subnet-tooltip" v-if="hoverSubnet === 'private-a' && showDetails">
-                  私网子网：无法直接访问互联网，部署核心服务
-                </div>
-              </div>
-            </div>
+        <!-- 可用区 2 -->
+        <div class="az-container">
+          <div class="az-header">
+            <span class="az-name">可用区 B</span>
+            <span class="az-status online">在线</span>
           </div>
-
-          <!-- 可用区 2 -->
-          <div class="az-container">
-            <div class="az-header">
-              <span class="az-name">可用区 B</span>
-              <span class="az-status online">在线</span>
-            </div>
-            <div class="subnets">
-              <div class="subnet public">
-                <div class="subnet-header">
-                  <span class="subnet-type">🌐 公网子网</span>
-                  <span class="subnet-cidr">172.16.3.0/24</span>
+          <div class="subnets">
+            <div class="subnet public">
+              <div class="subnet-header">
+                <span class="subnet-type">🌐 公网子网</span>
+                <span class="subnet-cidr">172.16.3.0/24</span>
+              </div>
+              <div class="subnet-resources">
+                <div class="resource-tag">
+                  🖥️ ECS × 2
                 </div>
-                <div class="subnet-resources">
-                  <div class="resource-tag">🖥️ ECS × 2</div>
-                  <div class="resource-tag">⚖️ SLB</div>
+                <div class="resource-tag">
+                  ⚖️ SLB
                 </div>
               </div>
+            </div>
 
-              <div class="subnet private">
-                <div class="subnet-header">
-                  <span class="subnet-type">🔒 私网子网</span>
-                  <span class="subnet-cidr">172.16.4.0/24</span>
+            <div class="subnet private">
+              <div class="subnet-header">
+                <span class="subnet-type">🔒 私网子网</span>
+                <span class="subnet-cidr">172.16.4.0/24</span>
+              </div>
+              <div class="subnet-resources">
+                <div class="resource-tag">
+                  🖥️ ECS × 4
                 </div>
-                <div class="subnet-resources">
-                  <div class="resource-tag">🖥️ ECS × 4</div>
-                  <div class="resource-tag">🗄️ RDS Slave</div>
-                  <div class="resource-tag">📦 Redis Slave</div>
+                <div class="resource-tag">
+                  🗄️ RDS Slave
+                </div>
+                <div class="resource-tag">
+                  📦 Redis Slave
                 </div>
               </div>
             </div>
@@ -146,6 +214,7 @@
       </div>
     </div>
   </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
index 596a627..137117d 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ComponentHierarchyDemo.vue
@@ -12,66 +12,126 @@
 
     <div class="demo-content">
       <div class="tree-container">
-        <div class="tree-node root-node" :class="{ active: selectedNode === 'app' }" @click="selectNode('app')">
-          <div class="node-icon">👑</div>
+        <div
+          class="tree-node root-node"
+          :class="{ active: selectedNode === 'app' }"
+          @click="selectNode('app')"
+        >
+          <div class="node-icon">
+            👑
+          </div>
           <div class="node-info">
-            <div class="node-label">App (根组件)</div>
-            <div class="node-desc">CEO - 管理全局</div>
+            <div class="node-label">
+              App (根组件)
+            </div>
+            <div class="node-desc">
+              CEO - 管理全局
+            </div>
           </div>
         </div>
 
         <div class="tree-children">
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'header' }" @click="selectNode('header')">
-              <div class="node-icon">📌</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'header' }"
+              @click="selectNode('header')"
+            >
+              <div class="node-icon">
+                📌
+              </div>
               <div class="node-info">
-                <div class="node-label">Header</div>
-                <div class="node-desc">导航栏部门</div>
+                <div class="node-label">
+                  Header
+                </div>
+                <div class="node-desc">
+                  导航栏部门
+                </div>
               </div>
             </div>
           </div>
 
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'main' }" @click="selectNode('main')">
-              <div class="node-icon">📄</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'main' }"
+              @click="selectNode('main')"
+            >
+              <div class="node-icon">
+                📄
+              </div>
               <div class="node-info">
-                <div class="node-label">Main Content</div>
-                <div class="node-desc">主内容部门</div>
+                <div class="node-label">
+                  Main Content
+                </div>
+                <div class="node-desc">
+                  主内容部门
+                </div>
               </div>
             </div>
 
             <div class="tree-children">
               <div class="tree-branch">
-                <div class="connector"></div>
-                <div class="tree-node" :class="{ active: selectedNode === 'sidebar' }" @click="selectNode('sidebar')">
-                  <div class="node-icon">📑</div>
+                <div class="connector" />
+                <div
+                  class="tree-node"
+                  :class="{ active: selectedNode === 'sidebar' }"
+                  @click="selectNode('sidebar')"
+                >
+                  <div class="node-icon">
+                    📑
+                  </div>
                   <div class="node-info">
-                    <div class="node-label">Sidebar</div>
-                    <div class="node-desc">侧边栏小组</div>
+                    <div class="node-label">
+                      Sidebar
+                    </div>
+                    <div class="node-desc">
+                      侧边栏小组
+                    </div>
                   </div>
                 </div>
               </div>
 
               <div class="tree-branch">
-                <div class="connector"></div>
-                <div class="tree-node" :class="{ active: selectedNode === 'productlist' }" @click="selectNode('productlist')">
-                  <div class="node-icon">🛍️</div>
+                <div class="connector" />
+                <div
+                  class="tree-node"
+                  :class="{ active: selectedNode === 'productlist' }"
+                  @click="selectNode('productlist')"
+                >
+                  <div class="node-icon">
+                    🛍️
+                  </div>
                   <div class="node-info">
-                    <div class="node-label">ProductList</div>
-                    <div class="node-desc">商品列表组</div>
+                    <div class="node-label">
+                      ProductList
+                    </div>
+                    <div class="node-desc">
+                      商品列表组
+                    </div>
                   </div>
                 </div>
 
                 <div class="tree-children">
                   <div class="tree-branch">
-                    <div class="connector"></div>
-                    <div class="tree-node leaf" :class="{ active: selectedNode === 'productcard' }" @click="selectNode('productcard')">
-                      <div class="node-icon">🏷️</div>
+                    <div class="connector" />
+                    <div
+                      class="tree-node leaf"
+                      :class="{ active: selectedNode === 'productcard' }"
+                      @click="selectNode('productcard')"
+                    >
+                      <div class="node-icon">
+                        🏷️
+                      </div>
                       <div class="node-info">
-                        <div class="node-label">ProductCard</div>
-                        <div class="node-desc">商品卡片员工</div>
+                        <div class="node-label">
+                          ProductCard
+                        </div>
+                        <div class="node-desc">
+                          商品卡片员工
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -81,12 +141,22 @@
           </div>
 
           <div class="tree-branch">
-            <div class="connector"></div>
-            <div class="tree-node" :class="{ active: selectedNode === 'footer' }" @click="selectNode('footer')">
-              <div class="node-icon">🔻</div>
+            <div class="connector" />
+            <div
+              class="tree-node"
+              :class="{ active: selectedNode === 'footer' }"
+              @click="selectNode('footer')"
+            >
+              <div class="node-icon">
+                🔻
+              </div>
               <div class="node-info">
-                <div class="node-label">Footer</div>
-                <div class="node-desc">页脚部门</div>
+                <div class="node-label">
+                  Footer
+                </div>
+                <div class="node-desc">
+                  页脚部门
+                </div>
               </div>
             </div>
           </div>
@@ -94,18 +164,32 @@
       </div>
 
       <Transition name="fade">
-        <div v-if="selectedNodeInfo" class="node-details">
+        <div
+          v-if="selectedNodeInfo"
+          class="node-details"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ selectedNodeInfo.icon }}</span>
             <span class="detail-title">{{ selectedNodeInfo.title }}</span>
           </div>
-          <p class="detail-desc">{{ selectedNodeInfo.description }}</p>
-          <div v-if="selectedNodeInfo.props || selectedNodeInfo.events" class="detail-info">
-            <div v-if="selectedNodeInfo.props" class="info-section">
+          <p class="detail-desc">
+            {{ selectedNodeInfo.description }}
+          </p>
+          <div
+            v-if="selectedNodeInfo.props || selectedNodeInfo.events"
+            class="detail-info"
+          >
+            <div
+              v-if="selectedNodeInfo.props"
+              class="info-section"
+            >
               <strong>📥 接收:</strong>
               <span class="prop-tags">{{ selectedNodeInfo.props.join(', ') }}</span>
             </div>
-            <div v-if="selectedNodeInfo.events" class="info-section">
+            <div
+              v-if="selectedNodeInfo.events"
+              class="info-section"
+            >
               <strong>📤 触发:</strong>
               <span class="prop-tags">{{ selectedNodeInfo.events.join(', ') }}</span>
             </div>
@@ -113,7 +197,10 @@
         </div>
       </Transition>
 
-      <div v-if="!selectedNode" class="hint-text">
+      <div
+        v-if="!selectedNode"
+        class="hint-text"
+      >
         👆 点击上方任意节点，查看职责说明
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
index 12853d6..0eb7857 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/EventBusDemo.vue
@@ -12,8 +12,12 @@
 
     <div class="demo-content">
       <div class="bus-center">
-        <div class="bus-icon">📻</div>
-        <div class="bus-label">广播站 (Event Bus)</div>
+        <div class="bus-icon">
+          📻
+        </div>
+        <div class="bus-label">
+          广播站 (Event Bus)
+        </div>
       </div>
 
       <div class="components-grid">
@@ -24,19 +28,36 @@
           :class="{ active: comp.isActive }"
           @click="sendEvent(comp)"
         >
-          <div class="comp-icon">{{ comp.icon }}</div>
-          <div class="comp-name">{{ comp.name }}</div>
-          <div class="comp-status" :class="{ listening: comp.isListening }">
+          <div class="comp-icon">
+            {{ comp.icon }}
+          </div>
+          <div class="comp-name">
+            {{ comp.name }}
+          </div>
+          <div
+            class="comp-status"
+            :class="{ listening: comp.isListening }"
+          >
             {{ comp.isListening ? '📻 收音中' : '🔇 未开机' }}
           </div>
         </div>
       </div>
 
       <Transition name="fade">
-        <div v-if="logs.length > 0" class="event-log">
-          <div class="log-title">📨 消息记录</div>
+        <div
+          v-if="logs.length > 0"
+          class="event-log"
+        >
+          <div class="log-title">
+            📨 消息记录
+          </div>
           <div class="log-list">
-            <div v-for="(log, index) in logs.slice(0, 5)" :key="index" class="log-item" :class="log.type">
+            <div
+              v-for="(log, index) in logs.slice(0, 5)"
+              :key="index"
+              class="log-item"
+              :class="log.type"
+            >
               <span class="log-type">{{ log.type === 'emit' ? '🎤 广播' : '📻 收听' }}</span>
               <span class="log-text">{{ log.text }}</span>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
index a8f98b9..efca7cc 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/MobxReactivityDemo.vue
@@ -48,8 +48,18 @@
       </div>
 
       <div class="interaction-area">
-        <input v-model="newTodoText" placeholder="输入待办事项..." @keyup.enter="addTodo" class="todo-input" />
-        <button @click="addTodo" class="add-btn">➕ 添加</button>
+        <input
+          v-model="newTodoText"
+          placeholder="输入待办事项..."
+          class="todo-input"
+          @keyup.enter="addTodo"
+        >
+        <button
+          class="add-btn"
+          @click="addTodo"
+        >
+          ➕ 添加
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
index dcb6606..63cf1e5 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/PropsFlowDemo.vue
@@ -12,7 +12,9 @@
 
     <div class="demo-content">
       <div class="component-box parent">
-        <div class="component-label">👨 父组件 (寄件人)</div>
+        <div class="component-label">
+          👨 父组件 (寄件人)
+        </div>
         <div class="data-display">
           <div class="data-row">
             <span class="key">包裹内容:</span>
@@ -20,7 +22,10 @@
           </div>
           <div class="data-row">
             <span class="key">包装颜色:</span>
-            <span class="value" :class="theme">{{ theme === 'light' ? '亮色' : '暗色' }}</span>
+            <span
+              class="value"
+              :class="theme"
+            >{{ theme === 'light' ? '亮色' : '暗色' }}</span>
           </div>
         </div>
         <div class="props-output">
@@ -32,25 +37,42 @@
         </div>
       </div>
 
-      <div class="flow-arrow" :class="{ active: isFlowing }">
-        <div class="arrow-body">▼</div>
-        <div class="flow-text">{{ isFlowing ? '快递派送中...' : 'Props 单向传递' }}</div>
+      <div
+        class="flow-arrow"
+        :class="{ active: isFlowing }"
+      >
+        <div class="arrow-body">
+          ▼
+        </div>
+        <div class="flow-text">
+          {{ isFlowing ? '快递派送中...' : 'Props 单向传递' }}
+        </div>
       </div>
 
       <div class="component-box child">
-        <div class="component-label">👦 子组件 (收件人)</div>
+        <div class="component-label">
+          👦 子组件 (收件人)
+        </div>
         <div class="props-display">
-          <div class="label">📬 接收包裹:</div>
+          <div class="label">
+            📬 接收包裹:
+          </div>
           <div class="prop-item">
             <span class="prop-name">user</span>
             <span class="prop-value">{{ user.name }} ({{ user.age }}岁)</span>
           </div>
           <div class="prop-item">
             <span class="prop-name">theme</span>
-            <span class="prop-value" :class="theme">{{ theme === 'light' ? '亮色' : '暗色' }}</span>
+            <span
+              class="prop-value"
+              :class="theme"
+            >{{ theme === 'light' ? '亮色' : '暗色' }}</span>
           </div>
         </div>
-        <button class="emit-btn" @click="handleEmit">
+        <button
+          class="emit-btn"
+          @click="handleEmit"
+        >
           📞 打电话给爸爸改名字
         </button>
       </div>
@@ -59,11 +81,27 @@
     <div class="interaction-area">
       <div class="control-group">
         <label>📝 修改包裹内容：</label>
-        <input v-model="user.name" placeholder="收件人姓名" @input="triggerFlow" />
-        <input v-model.number="user.age" type="number" placeholder="年龄" @input="triggerFlow" />
-        <select v-model="theme" @change="triggerFlow">
-          <option value="light">亮色包装</option>
-          <option value="dark">暗色包装</option>
+        <input
+          v-model="user.name"
+          placeholder="收件人姓名"
+          @input="triggerFlow"
+        >
+        <input
+          v-model.number="user.age"
+          type="number"
+          placeholder="年龄"
+          @input="triggerFlow"
+        >
+        <select
+          v-model="theme"
+          @change="triggerFlow"
+        >
+          <option value="light">
+            亮色包装
+          </option>
+          <option value="dark">
+            暗色包装
+          </option>
         </select>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
index 69c6fd2..b93463d 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ReduxFlowDemo.vue
@@ -13,38 +13,66 @@
     <div class="demo-content">
       <div class="counter-display">
         <span class="counter-label">当前库存：</span>
-        <span class="counter-value" :class="{ changed: countChanged }">{{ count }}</span>
+        <span
+          class="counter-value"
+          :class="{ changed: countChanged }"
+        >{{ count }}</span>
         <span class="counter-unit">本书</span>
       </div>
 
       <div class="action-buttons">
-        <button class="action-btn" @click="dispatchAction('INCREMENT')">
+        <button
+          class="action-btn"
+          @click="dispatchAction('INCREMENT')"
+        >
           <span class="btn-icon">➕</span>
           进货 (+1)
         </button>
-        <button class="action-btn" @click="dispatchAction('DECREMENT')">
+        <button
+          class="action-btn"
+          @click="dispatchAction('DECREMENT')"
+        >
           <span class="btn-icon">➖</span>
           出货 (-1)
         </button>
-        <button class="action-btn reset" @click="dispatchAction('RESET')">
+        <button
+          class="action-btn reset"
+          @click="dispatchAction('RESET')"
+        >
           <span class="btn-icon">🔄</span>
           重置库存
         </button>
       </div>
 
       <Transition name="fade">
-        <div v-if="flowStage" class="flow-stages">
-          <div class="flow-stage" :class="{ active: flowStage === 'action' }">
+        <div
+          v-if="flowStage"
+          class="flow-stages"
+        >
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'action' }"
+          >
             <span class="stage-icon">📝</span>
             <span class="stage-text">Action: {{ currentAction.type }}</span>
           </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-stage" :class="{ active: flowStage === 'reducer' }">
+          <div class="flow-arrow">
+            →
+          </div>
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'reducer' }"
+          >
             <span class="stage-icon">⚙️</span>
             <span class="stage-text">Reducer 处理中...</span>
           </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-stage" :class="{ active: flowStage === 'store' }">
+          <div class="flow-arrow">
+            →
+          </div>
+          <div
+            class="flow-stage"
+            :class="{ active: flowStage === 'store' }"
+          >
             <span class="stage-icon">📦</span>
             <span class="stage-text">Store 已更新</span>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
index d47ed05..bdbada1 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/StateManagementComparisonDemo.vue
@@ -13,10 +13,18 @@
     <div class="demo-content">
       <div class="comparison-table">
         <div class="table-header">
-          <div class="header-col first">工具</div>
-          <div class="header-col">难度</div>
-          <div class="header-col">大小</div>
-          <div class="header-col">框架</div>
+          <div class="header-col first">
+            工具
+          </div>
+          <div class="header-col">
+            难度
+          </div>
+          <div class="header-col">
+            大小
+          </div>
+          <div class="header-col">
+            框架
+          </div>
         </div>
         <div class="table-body">
           <div
@@ -32,12 +40,18 @@
             </div>
             <div class="row-col">
               <div class="curve-bar">
-                <div class="curve-fill" :style="{ width: lib.learningCurve + '%', background: getCurveColor(lib.learningCurve) }"></div>
+                <div
+                  class="curve-fill"
+                  :style="{ width: lib.learningCurve + '%', background: getCurveColor(lib.learningCurve) }"
+                />
               </div>
               <span class="curve-label">{{ getCurveLabel(lib.learningCurve) }}</span>
             </div>
             <div class="row-col">
-              <span class="size-badge" :class="getSizeClass(lib.bundleSize)">{{ lib.bundleSize }}</span>
+              <span
+                class="size-badge"
+                :class="getSizeClass(lib.bundleSize)"
+              >{{ lib.bundleSize }}</span>
             </div>
             <div class="row-col">
               <span class="framework-text">{{ lib.framework }}</span>
@@ -47,29 +61,46 @@
       </div>
 
       <Transition name="fade">
-        <div v-if="selectedLibrary" class="library-detail">
+        <div
+          v-if="selectedLibrary"
+          class="library-detail"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ selectedLibrary.icon }}</span>
             <div class="detail-title">
               <h5>{{ selectedLibrary.name }}</h5>
-              <p class="tagline">{{ selectedLibrary.tagline }}</p>
+              <p class="tagline">
+                {{ selectedLibrary.tagline }}
+              </p>
             </div>
           </div>
 
           <div class="detail-grid">
             <div class="detail-section compact">
-              <div class="section-title">🎯 适用场景</div>
-              <div class="section-content">{{ selectedLibrary.scenarios.join('、') }}</div>
+              <div class="section-title">
+                🎯 适用场景
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.scenarios.join('、') }}
+              </div>
             </div>
 
             <div class="detail-section compact">
-              <div class="section-title green">✅ 优点</div>
-              <div class="section-content">{{ selectedLibrary.pros.slice(0, 2).join('；') }}</div>
+              <div class="section-title green">
+                ✅ 优点
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.pros.slice(0, 2).join('；') }}
+              </div>
             </div>
 
             <div class="detail-section compact">
-              <div class="section-title red">❌ 缺点</div>
-              <div class="section-content">{{ selectedLibrary.cons.slice(0, 2).join('；') }}</div>
+              <div class="section-title red">
+                ❌ 缺点
+              </div>
+              <div class="section-content">
+                {{ selectedLibrary.cons.slice(0, 2).join('；') }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
index 814107e..4974e24 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/VuexPiniaDemo.vue
@@ -12,7 +12,11 @@
 
     <div class="demo-content">
       <div class="comparison-cards">
-        <div class="card vuex-card" :class="{ active: activeTab === 'vuex' }" @click="activeTab = 'vuex'">
+        <div
+          class="card vuex-card"
+          :class="{ active: activeTab === 'vuex' }"
+          @click="activeTab = 'vuex'"
+        >
           <div class="card-header">
             <span class="card-icon">🌿</span>
             <span class="card-title">Vuex</span>
@@ -20,15 +24,27 @@
           </div>
           <div class="card-body">
             <div class="feature-list">
-              <div class="feature-item">✅ 选项式 API</div>
-              <div class="feature-item">✅ State / Mutations / Actions 分离</div>
-              <div class="feature-item">❌ 样板代码较多</div>
-              <div class="feature-item">❌ TypeScript 支持较弱</div>
+              <div class="feature-item">
+                ✅ 选项式 API
+              </div>
+              <div class="feature-item">
+                ✅ State / Mutations / Actions 分离
+              </div>
+              <div class="feature-item">
+                ❌ 样板代码较多
+              </div>
+              <div class="feature-item">
+                ❌ TypeScript 支持较弱
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="card pinia-card" :class="{ active: activeTab === 'pinia' }" @click="activeTab = 'pinia'">
+        <div
+          class="card pinia-card"
+          :class="{ active: activeTab === 'pinia' }"
+          @click="activeTab = 'pinia'"
+        >
           <div class="card-header">
             <span class="card-icon">🍍</span>
             <span class="card-title">Pinia</span>
@@ -36,18 +52,35 @@
           </div>
           <div class="card-body">
             <div class="feature-list">
-              <div class="feature-item">✅ 组合式 API</div>
-              <div class="feature-item">✅ 去除 Mutations，简化代码</div>
-              <div class="feature-item">✅ 完美 TypeScript 支持</div>
-              <div class="feature-item">✅ 自动代码分割</div>
+              <div class="feature-item">
+                ✅ 组合式 API
+              </div>
+              <div class="feature-item">
+                ✅ 去除 Mutations，简化代码
+              </div>
+              <div class="feature-item">
+                ✅ 完美 TypeScript 支持
+              </div>
+              <div class="feature-item">
+                ✅ 自动代码分割
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <Transition name="fade" mode="out-in">
-        <div v-if="activeTab === 'vuex'" key="vuex" class="code-example">
-          <div class="code-title">Vuex 代码示例</div>
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          v-if="activeTab === 'vuex'"
+          key="vuex"
+          class="code-example"
+        >
+          <div class="code-title">
+            Vuex 代码示例
+          </div>
           <pre class="code-block"><code>// store/index.js
 export default createStore({
   state: { count: 0 },
@@ -64,8 +97,14 @@ export default createStore({
 })</code></pre>
         </div>
 
-        <div v-else-if="activeTab === 'pinia'" key="pinia" class="code-example">
-          <div class="code-title">Pinia 代码示例</div>
+        <div
+          v-else-if="activeTab === 'pinia'"
+          key="pinia"
+          class="code-example"
+        >
+          <div class="code-title">
+            Pinia 代码示例
+          </div>
           <pre class="code-block"><code>// stores/counter.js
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0)
diff --git a/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue b/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
index 9279cee..2e22d15 100644
--- a/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/component-state-management/ZustandJotaiDemo.vue
@@ -24,9 +24,18 @@
         </button>
       </div>
 
-      <Transition name="fade" mode="out-in">
-        <div :key="activeTab" class="tab-content">
-          <div v-if="activeTab === 'zustand'" class="feature-showcase">
+      <Transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          :key="activeTab"
+          class="tab-content"
+        >
+          <div
+            v-if="activeTab === 'zustand'"
+            class="feature-showcase"
+          >
             <div class="feature-card">
               <span class="feature-icon">📦</span>
               <span class="feature-title">单一 Store</span>
@@ -44,7 +53,10 @@
             </div>
           </div>
 
-          <div v-if="activeTab === 'zustand'" class="code-example">
+          <div
+            v-if="activeTab === 'zustand'"
+            class="code-example"
+          >
             <pre class="code-block"><code>// Zustand Store
 import { create } from 'zustand'
 
@@ -62,7 +74,10 @@ function BearCounter() {
 }</code></pre>
           </div>
 
-          <div v-if="activeTab === 'jotai'" class="feature-showcase">
+          <div
+            v-if="activeTab === 'jotai'"
+            class="feature-showcase"
+          >
             <div class="feature-card">
               <span class="feature-icon">⚛️</span>
               <span class="feature-title">原子化</span>
@@ -80,7 +95,10 @@ function BearCounter() {
             </div>
           </div>
 
-          <div v-if="activeTab === 'jotai'" class="code-example">
+          <div
+            v-if="activeTab === 'jotai'"
+            class="code-example"
+          >
             <pre class="code-block"><code>// Jotai Atom
 import { atom } from 'jotai'
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
index d583dbf..389acad 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
@@ -17,11 +17,15 @@
               class="bit-btn"
               :class="{ on: bit }"
               @click="toggleBit('A', i)"
-            >{{ bit }}</button>
+            >
+              {{ bit }}
+            </button>
           </div>
           <span class="decimal">= {{ decimalA }}</span>
         </div>
-        <div class="operator">+</div>
+        <div class="operator">
+          +
+        </div>
         <div class="input-group">
           <label>B:</label>
           <div class="bits">
@@ -31,19 +35,30 @@
               class="bit-btn"
               :class="{ on: bit }"
               @click="toggleBit('B', i)"
-            >{{ bit }}</button>
+            >
+              {{ bit }}
+            </button>
           </div>
           <span class="decimal">= {{ decimalB }}</span>
         </div>
       </div>
 
       <div class="adder-visual">
-        <div class="adder-stage" v-for="(s, i) in stages" :key="i">
-          <div class="stage-label">{{ s.label }}</div>
+        <div
+          v-for="(s, i) in stages"
+          :key="i"
+          class="adder-stage"
+        >
+          <div class="stage-label">
+            {{ s.label }}
+          </div>
           <div class="stage-bits">
             <span class="bit-label">A{{ 3-i }}: {{ bitsA[i] }}</span>
             <span class="bit-label">B{{ 3-i }}: {{ bitsB[i] }}</span>
-            <span class="bit-label" v-if="i > 0">C{{ i }}: {{ carries[i-1] }}</span>
+            <span
+              v-if="i > 0"
+              class="bit-label"
+            >C{{ i }}: {{ carries[i-1] }}</span>
           </div>
           <div class="stage-result">
             <span class="sum-bit">S{{ 3-i }}: {{ sumBits[i] }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
index de2b34c..312104a 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmDemo.vue
@@ -13,7 +13,9 @@
           :key="algo.name"
           :class="['tab-btn', { active: activeAlgo === algo.name }]"
           @click="activeAlgo = algo.name"
-        >{{ algo.name }}</button>
+        >
+          {{ algo.name }}
+        </button>
       </div>
 
       <div class="algorithm-visual">
@@ -23,11 +25,24 @@
         </div>
 
         <div class="visual-content">
-          <div v-if="activeAlgo === '二分查找'" class="binary-search">
+          <div
+            v-if="activeAlgo === '二分查找'"
+            class="binary-search"
+          >
             <div class="search-input">
               <span>在有序数组中查找：</span>
-              <input v-model.number="searchTarget" type="number" class="num-input" placeholder="输入数字" />
-              <button class="search-btn" @click="runBinarySearch">查找</button>
+              <input
+                v-model.number="searchTarget"
+                type="number"
+                class="num-input"
+                placeholder="输入数字"
+              >
+              <button
+                class="search-btn"
+                @click="runBinarySearch"
+              >
+                查找
+              </button>
             </div>
             <div class="array-display">
               <div 
@@ -43,15 +58,37 @@
                 {{ num }}
               </div>
             </div>
-            <div class="search-info" v-if="searchSteps.length">
-              <div class="step" v-for="(step, i) in searchSteps" :key="i">{{ step }}</div>
+            <div
+              v-if="searchSteps.length"
+              class="search-info"
+            >
+              <div
+                v-for="(step, i) in searchSteps"
+                :key="i"
+                class="step"
+              >
+                {{ step }}
+              </div>
             </div>
           </div>
 
-          <div v-else-if="activeAlgo === '排序'" class="sorting">
+          <div
+            v-else-if="activeAlgo === '排序'"
+            class="sorting"
+          >
             <div class="sort-controls">
-              <button class="sort-btn" @click="resetArray">重置数组</button>
-              <button class="sort-btn" @click="runSort">开始排序</button>
+              <button
+                class="sort-btn"
+                @click="resetArray"
+              >
+                重置数组
+              </button>
+              <button
+                class="sort-btn"
+                @click="runSort"
+              >
+                开始排序
+              </button>
             </div>
             <div class="array-display">
               <div 
@@ -63,57 +100,125 @@
                 {{ num }}
               </div>
             </div>
-            <div class="sort-info">{{ sortStatus }}</div>
+            <div class="sort-info">
+              {{ sortStatus }}
+            </div>
           </div>
 
-          <div v-else-if="activeAlgo === '递归'" class="recursion">
+          <div
+            v-else-if="activeAlgo === '递归'"
+            class="recursion"
+          >
             <div class="recursion-input">
               <span>计算斐波那契数列第</span>
-              <input v-model.number="fibN" type="number" min="1" max="15" class="num-input" />
+              <input
+                v-model.number="fibN"
+                type="number"
+                min="1"
+                max="15"
+                class="num-input"
+              >
               <span>项</span>
-              <button class="calc-btn" @click="calcFib">计算</button>
+              <button
+                class="calc-btn"
+                @click="calcFib"
+              >
+                计算
+              </button>
             </div>
-            <div class="fib-result" v-if="fibResult !== null">
+            <div
+              v-if="fibResult !== null"
+              class="fib-result"
+            >
               <span class="result-value">F({{ fibN }}) = {{ fibResult }}</span>
             </div>
-            <div class="recursion-tree" v-if="fibSteps.length">
-              <div class="tree-title">递归调用过程</div>
+            <div
+              v-if="fibSteps.length"
+              class="recursion-tree"
+            >
+              <div class="tree-title">
+                递归调用过程
+              </div>
               <div class="tree-content">
-                <div v-for="(step, i) in fibSteps.slice(0, 8)" :key="i" class="tree-node">
+                <div
+                  v-for="(step, i) in fibSteps.slice(0, 8)"
+                  :key="i"
+                  class="tree-node"
+                >
                   {{ step }}
                 </div>
-                <div v-if="fibSteps.length > 8" class="tree-more">... 共 {{ fibSteps.length }} 次调用</div>
+                <div
+                  v-if="fibSteps.length > 8"
+                  class="tree-more"
+                >
+                  ... 共 {{ fibSteps.length }} 次调用
+                </div>
               </div>
             </div>
           </div>
 
-          <div v-else-if="activeAlgo === '贪心'" class="greedy">
-            <div class="greedy-desc">硬币找零问题：用最少的硬币凑出指定金额</div>
+          <div
+            v-else-if="activeAlgo === '贪心'"
+            class="greedy"
+          >
+            <div class="greedy-desc">
+              硬币找零问题：用最少的硬币凑出指定金额
+            </div>
             <div class="greedy-input">
               <span>目标金额：</span>
-              <input v-model.number="coinTarget" type="number" min="1" class="num-input" />
-              <button class="calc-btn" @click="calcCoins">计算</button>
+              <input
+                v-model.number="coinTarget"
+                type="number"
+                min="1"
+                class="num-input"
+              >
+              <button
+                class="calc-btn"
+                @click="calcCoins"
+              >
+                计算
+              </button>
             </div>
             <div class="coins-available">
               可用硬币：{{ coins.join(', ') }} 元
             </div>
-            <div class="coin-result" v-if="coinResult.length">
-              <div class="result-title">找零方案：</div>
-              <div class="coin-list">
-                <span v-for="(c, i) in coinResult" :key="i" class="coin">{{ c }}元</span>
+            <div
+              v-if="coinResult.length"
+              class="coin-result"
+            >
+              <div class="result-title">
+                找零方案：
+              </div>
+              <div class="coin-list">
+                <span
+                  v-for="(c, i) in coinResult"
+                  :key="i"
+                  class="coin"
+                >{{ c }}元</span>
+              </div>
+              <div class="result-summary">
+                共 {{ coinResult.length }} 枚硬币
               </div>
-              <div class="result-summary">共 {{ coinResult.length }} 枚硬币</div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="complexity-info">
-        <div class="info-title">时间复杂度速查</div>
+        <div class="info-title">
+          时间复杂度速查
+        </div>
         <div class="complexity-list">
-          <div class="complexity-item" v-for="c in complexities" :key="c.name">
+          <div
+            v-for="c in complexities"
+            :key="c.name"
+            class="complexity-item"
+          >
             <span class="c-name">{{ c.name }}</span>
-            <span class="c-value" :class="c.class">{{ c.value }}</span>
+            <span
+              class="c-value"
+              :class="c.class"
+            >{{ c.value }}</span>
             <span class="c-desc">{{ c.desc }}</span>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
index aa380ea..8ea3c96 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerDemo.vue
@@ -8,7 +8,9 @@
 
     <div class="demo-content">
       <div class="pipeline-visual">
-        <div class="pipeline-title">编译流程</div>
+        <div class="pipeline-title">
+          编译流程
+        </div>
         <div class="pipeline-stages">
           <div 
             v-for="(stage, i) in stages" 
@@ -16,39 +18,73 @@
             :class="['stage', { active: activeStage === i }]"
             @click="activeStage = i"
           >
-            <div class="stage-num">{{ i + 1 }}</div>
-            <div class="stage-name">{{ stage.name }}</div>
-            <div class="stage-output">{{ stage.output }}</div>
+            <div class="stage-num">
+              {{ i + 1 }}
+            </div>
+            <div class="stage-name">
+              {{ stage.name }}
+            </div>
+            <div class="stage-output">
+              {{ stage.output }}
+            </div>
+          </div>
+          <div
+            v-for="i in stages.length - 1"
+            :key="'arrow-' + i"
+            class="stage-arrow"
+          >
+            →
           </div>
-          <div class="stage-arrow" v-for="i in stages.length - 1" :key="'arrow-' + i">→</div>
         </div>
       </div>
 
-      <div class="stage-detail" v-if="currentStage">
+      <div
+        v-if="currentStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentStage.name }}</span>
         </div>
-        <div class="detail-desc">{{ currentStage.desc }}</div>
+        <div class="detail-desc">
+          {{ currentStage.desc }}
+        </div>
         <div class="detail-tasks">
-          <div class="task-title">主要任务</div>
+          <div class="task-title">
+            主要任务
+          </div>
           <ul>
-            <li v-for="(task, j) in currentStage.tasks" :key="j">{{ task }}</li>
+            <li
+              v-for="(task, j) in currentStage.tasks"
+              :key="j"
+            >
+              {{ task }}
+            </li>
           </ul>
         </div>
         <div class="detail-example">
-          <div class="example-title">示例</div>
+          <div class="example-title">
+            示例
+          </div>
           <pre><code>{{ currentStage.example }}</code></pre>
         </div>
       </div>
 
       <div class="interactive-demo">
-        <div class="demo-title">词法分析演示</div>
+        <div class="demo-title">
+          词法分析演示
+        </div>
         <div class="lexer-input">
           <label>输入代码：</label>
-          <input v-model="sourceCode" type="text" placeholder="例如: int x = 10 + 5;" />
+          <input
+            v-model="sourceCode"
+            type="text"
+            placeholder="例如: int x = 10 + 5;"
+          >
         </div>
         <div class="lexer-output">
-          <div class="output-title">词法单元 (Tokens)</div>
+          <div class="output-title">
+            词法单元 (Tokens)
+          </div>
           <div class="tokens">
             <div 
               v-for="(token, i) in tokens" 
@@ -63,20 +99,44 @@
       </div>
 
       <div class="ast-demo">
-        <div class="demo-title">语法树 (AST) 可视化</div>
+        <div class="demo-title">
+          语法树 (AST) 可视化
+        </div>
         <div class="ast-input">
           <label>表达式：</label>
-          <input v-model="expression" type="text" placeholder="例如: 1 + 2 * 3" />
+          <input
+            v-model="expression"
+            type="text"
+            placeholder="例如: 1 + 2 * 3"
+          >
         </div>
         <div class="ast-visual">
-          <div class="ast-node root" v-if="ast">
-            <div class="node-value">{{ ast.value }}</div>
-            <div class="node-children" v-if="ast.left || ast.right">
-              <div class="ast-node left" v-if="ast.left">
-                <div class="node-value">{{ ast.left.value }}</div>
+          <div
+            v-if="ast"
+            class="ast-node root"
+          >
+            <div class="node-value">
+              {{ ast.value }}
+            </div>
+            <div
+              v-if="ast.left || ast.right"
+              class="node-children"
+            >
+              <div
+                v-if="ast.left"
+                class="ast-node left"
+              >
+                <div class="node-value">
+                  {{ ast.left.value }}
+                </div>
               </div>
-              <div class="ast-node right" v-if="ast.right">
-                <div class="node-value">{{ ast.right.value }}</div>
+              <div
+                v-if="ast.right"
+                class="ast-node right"
+              >
+                <div class="node-value">
+                  {{ ast.right.value }}
+                </div>
               </div>
             </div>
           </div>
@@ -84,14 +144,30 @@
       </div>
 
       <div class="comparison-section">
-        <div class="section-title">编译型 vs 解释型 vs JIT</div>
+        <div class="section-title">
+          编译型 vs 解释型 vs JIT
+        </div>
         <div class="comparison-grid">
-          <div class="comparison-item" v-for="(item, i) in executionModels" :key="i">
-            <div class="item-name">{{ item.name }}</div>
-            <div class="item-flow">{{ item.flow }}</div>
-            <div class="item-pros">{{ item.pros }}</div>
-            <div class="item-cons">{{ item.cons }}</div>
-            <div class="item-langs">{{ item.langs }}</div>
+          <div
+            v-for="(item, i) in executionModels"
+            :key="i"
+            class="comparison-item"
+          >
+            <div class="item-name">
+              {{ item.name }}
+            </div>
+            <div class="item-flow">
+              {{ item.flow }}
+            </div>
+            <div class="item-pros">
+              {{ item.pros }}
+            </div>
+            <div class="item-cons">
+              {{ item.cons }}
+            </div>
+            <div class="item-langs">
+              {{ item.langs }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
index b1d3dc2..b18e807 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CpuArchitectureDemo.vue
@@ -21,8 +21,13 @@
             <span class="layer-count">{{ layer.count }}</span>
           </div>
           <Transition name="fade">
-            <div v-if="activeLayer === i" class="layer-detail">
-              <p class="detail-desc">{{ layer.desc }}</p>
+            <div
+              v-if="activeLayer === i"
+              class="layer-detail"
+            >
+              <p class="detail-desc">
+                {{ layer.desc }}
+              </p>
               <div class="detail-example">
                 <span class="example-label">🌰 例子：</span>
                 <span class="example-content">{{ layer.example }}</span>
@@ -33,9 +38,15 @@
       </div>
 
       <div class="cpu-components">
-        <div class="comp-title">CPU 核心组件</div>
+        <div class="comp-title">
+          CPU 核心组件
+        </div>
         <div class="comp-grid">
-          <div class="comp-item" v-for="comp in components" :key="comp.name">
+          <div
+            v-for="comp in components"
+            :key="comp.name"
+            class="comp-item"
+          >
             <span class="comp-icon">{{ comp.icon }}</span>
             <span class="comp-name">{{ comp.name }}</span>
             <span class="comp-desc">{{ comp.desc }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
index 7b35040..c2bae70 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureDemo.vue
@@ -13,7 +13,9 @@
           :key="s.name"
           :class="['tab-btn', { active: activeStructure === s.name }]"
           @click="activeStructure = s.name"
-        >{{ s.name }}</button>
+        >
+          {{ s.name }}
+        </button>
       </div>
 
       <div class="structure-visual">
@@ -23,90 +25,185 @@
         </div>
 
         <div class="visual-content">
-          <div v-if="activeStructure === '数组'" class="array-visual">
+          <div
+            v-if="activeStructure === '数组'"
+            class="array-visual"
+          >
             <div class="array-container">
-              <div v-for="(item, i) in arrayData" :key="i" class="array-item">
+              <div
+                v-for="(item, i) in arrayData"
+                :key="i"
+                class="array-item"
+              >
                 <span class="index">{{ i }}</span>
                 <span class="value">{{ item }}</span>
               </div>
             </div>
-            <div class="operation-hint">访问 arr[2] = O(1)，插入/删除 = O(n)</div>
+            <div class="operation-hint">
+              访问 arr[2] = O(1)，插入/删除 = O(n)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '链表'" class="linked-visual">
+          <div
+            v-else-if="activeStructure === '链表'"
+            class="linked-visual"
+          >
             <div class="linked-container">
-              <div v-for="(item, i) in linkedData" :key="i" class="linked-node">
+              <div
+                v-for="(item, i) in linkedData"
+                :key="i"
+                class="linked-node"
+              >
                 <span class="node-value">{{ item.value }}</span>
-                <span class="node-arrow" v-if="i < linkedData.length - 1">→</span>
+                <span
+                  v-if="i < linkedData.length - 1"
+                  class="node-arrow"
+                >→</span>
               </div>
             </div>
-            <div class="operation-hint">访问第 n 个 = O(n)，插入/删除 = O(1)</div>
+            <div class="operation-hint">
+              访问第 n 个 = O(n)，插入/删除 = O(1)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '栈'" class="stack-visual">
+          <div
+            v-else-if="activeStructure === '栈'"
+            class="stack-visual"
+          >
             <div class="stack-container">
-              <div v-for="(item, i) in stackData" :key="i" class="stack-item">
+              <div
+                v-for="(item, i) in stackData"
+                :key="i"
+                class="stack-item"
+              >
                 {{ item }}
               </div>
-              <div class="stack-bottom">栈底</div>
+              <div class="stack-bottom">
+                栈底
+              </div>
             </div>
             <div class="stack-ops">
-              <button class="op-btn" @click="pushStack">入栈 Push</button>
-              <button class="op-btn" @click="popStack">出栈 Pop</button>
+              <button
+                class="op-btn"
+                @click="pushStack"
+              >
+                入栈 Push
+              </button>
+              <button
+                class="op-btn"
+                @click="popStack"
+              >
+                出栈 Pop
+              </button>
+            </div>
+            <div class="operation-hint">
+              后进先出 (LIFO)，操作都是 O(1)
             </div>
-            <div class="operation-hint">后进先出 (LIFO)，操作都是 O(1)</div>
           </div>
 
-          <div v-else-if="activeStructure === '队列'" class="queue-visual">
+          <div
+            v-else-if="activeStructure === '队列'"
+            class="queue-visual"
+          >
             <div class="queue-container">
               <span class="queue-label">出 ←</span>
-              <div v-for="(item, i) in queueData" :key="i" class="queue-item">
+              <div
+                v-for="(item, i) in queueData"
+                :key="i"
+                class="queue-item"
+              >
                 {{ item }}
               </div>
               <span class="queue-label">← 入</span>
             </div>
             <div class="queue-ops">
-              <button class="op-btn" @click="enqueue">入队</button>
-              <button class="op-btn" @click="dequeue">出队</button>
+              <button
+                class="op-btn"
+                @click="enqueue"
+              >
+                入队
+              </button>
+              <button
+                class="op-btn"
+                @click="dequeue"
+              >
+                出队
+              </button>
+            </div>
+            <div class="operation-hint">
+              先进先出 (FIFO)，操作都是 O(1)
             </div>
-            <div class="operation-hint">先进先出 (FIFO)，操作都是 O(1)</div>
           </div>
 
-          <div v-else-if="activeStructure === '哈希表'" class="hash-visual">
+          <div
+            v-else-if="activeStructure === '哈希表'"
+            class="hash-visual"
+          >
             <div class="hash-container">
-              <div v-for="(bucket, i) in hashData" :key="i" class="hash-bucket">
+              <div
+                v-for="(bucket, i) in hashData"
+                :key="i"
+                class="hash-bucket"
+              >
                 <span class="bucket-index">{{ i }}</span>
                 <div class="bucket-items">
-                  <span v-for="(item, j) in bucket" :key="j" class="bucket-item">{{ item }}</span>
+                  <span
+                    v-for="(item, j) in bucket"
+                    :key="j"
+                    class="bucket-item"
+                  >{{ item }}</span>
                 </div>
               </div>
             </div>
-            <div class="operation-hint">查找/插入/删除平均 O(1)，最坏 O(n)</div>
+            <div class="operation-hint">
+              查找/插入/删除平均 O(1)，最坏 O(n)
+            </div>
           </div>
 
-          <div v-else-if="activeStructure === '树'" class="tree-visual">
+          <div
+            v-else-if="activeStructure === '树'"
+            class="tree-visual"
+          >
             <div class="tree-container">
               <div class="tree-level">
-                <div class="tree-node root">{{ treeData.value }}</div>
+                <div class="tree-node root">
+                  {{ treeData.value }}
+                </div>
               </div>
               <div class="tree-level">
-                <div class="tree-node">{{ treeData.left?.value }}</div>
-                <div class="tree-node">{{ treeData.right?.value }}</div>
+                <div class="tree-node">
+                  {{ treeData.left?.value }}
+                </div>
+                <div class="tree-node">
+                  {{ treeData.right?.value }}
+                </div>
               </div>
               <div class="tree-level">
-                <div class="tree-node leaf">{{ treeData.left?.left?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.left?.right?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.right?.left?.value }}</div>
-                <div class="tree-node leaf">{{ treeData.right?.right?.value }}</div>
+                <div class="tree-node leaf">
+                  {{ treeData.left?.left?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.left?.right?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.right?.left?.value }}
+                </div>
+                <div class="tree-node leaf">
+                  {{ treeData.right?.right?.value }}
+                </div>
               </div>
             </div>
-            <div class="operation-hint">查找/插入/删除 O(log n)，遍历 O(n)</div>
+            <div class="operation-hint">
+              查找/插入/删除 O(log n)，遍历 O(n)
+            </div>
           </div>
         </div>
       </div>
 
       <div class="complexity-table">
-        <div class="table-title">时间复杂度对比</div>
+        <div class="table-title">
+          时间复杂度对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -120,31 +217,63 @@
           <tbody>
             <tr>
               <td>访问</td>
-              <td class="good">O(1)</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>查找</td>
-              <td class="bad">O(n)</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>插入</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
             <tr>
               <td>删除</td>
-              <td class="bad">O(n)</td>
-              <td class="good">O(1)</td>
-              <td class="good">O(1)</td>
-              <td class="mid">O(log n)</td>
+              <td class="bad">
+                O(n)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="good">
+                O(1)
+              </td>
+              <td class="mid">
+                O(log n)
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
index a82176c..4ed7b52 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingDemo.vue
@@ -13,7 +13,9 @@
           :key="tab.name"
           :class="['tab-btn', { active: activeTab === tab.name }]"
           @click="activeTab = tab.name"
-        >{{ tab.label }}</button>
+        >
+          {{ tab.label }}
+        </button>
       </div>
 
       <div class="encoding-area">
@@ -23,22 +25,32 @@
             v-model="inputValue" 
             class="input-field"
             :placeholder="currentTab.placeholder"
-          />
+          >
         </div>
 
         <div class="output-section">
-          <div class="output-label">编码结果：</div>
+          <div class="output-label">
+            编码结果：
+          </div>
           <div class="output-box">
             <code>{{ encodedResult }}</code>
           </div>
-          <div class="output-info" v-if="currentTab.name === 'text'">
+          <div
+            v-if="currentTab.name === 'text'"
+            class="output-info"
+          >
             <span>字符数: {{ inputValue.length }}</span>
             <span>字节数: {{ byteCount }}</span>
           </div>
         </div>
 
-        <div class="encoding-table" v-if="currentTab.name === 'text' && inputValue">
-          <div class="table-title">字符编码详情</div>
+        <div
+          v-if="currentTab.name === 'text' && inputValue"
+          class="encoding-table"
+        >
+          <div class="table-title">
+            字符编码详情
+          </div>
           <div class="char-list">
             <div 
               v-for="(char, i) in inputValue.slice(0, 10)" 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
index 0920868..88d290b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FilesystemDemo.vue
@@ -33,7 +33,10 @@
           <span class="detail-name">{{ selectedItemInfo?.name }}</span>
         </div>
         
-        <div class="detail-info" v-if="selectedItemInfo">
+        <div
+          v-if="selectedItemInfo"
+          class="detail-info"
+        >
           <div class="info-row">
             <span class="info-label">类型</span>
             <span class="info-value">{{ selectedItemInfo.type }}</span>
@@ -42,7 +45,10 @@
             <span class="info-label">路径</span>
             <span class="info-value">{{ selectedItemInfo.path }}</span>
           </div>
-          <div class="info-row" v-if="selectedItemInfo.type === '文件'">
+          <div
+            v-if="selectedItemInfo.type === '文件'"
+            class="info-row"
+          >
             <span class="info-label">大小</span>
             <span class="info-value">{{ selectedItemInfo.size }}</span>
           </div>
@@ -52,8 +58,13 @@
           </div>
         </div>
 
-        <div class="inode-info" v-if="selectedItemInfo?.type === '文件'">
-          <div class="inode-title">inode 信息</div>
+        <div
+          v-if="selectedItemInfo?.type === '文件'"
+          class="inode-info"
+        >
+          <div class="inode-title">
+            inode 信息
+          </div>
           <div class="inode-visual">
             <div class="inode-block">
               <span class="inode-label">inode 编号</span>
@@ -62,7 +73,11 @@
             <div class="inode-block">
               <span class="inode-label">数据块</span>
               <div class="data-blocks">
-                <span v-for="b in selectedItemInfo.blocks" :key="b" class="block">{{ b }}</span>
+                <span
+                  v-for="b in selectedItemInfo.blocks"
+                  :key="b"
+                  class="block"
+                >{{ b }}</span>
               </div>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
index 2711c7f..ad89abd 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageMapDemo.vue
@@ -8,55 +8,94 @@
 
     <div class="demo-content">
       <div class="timeline">
-        <div class="timeline-item" v-for="(era, i) in eras" :key="i">
-          <div class="era-year">{{ era.year }}</div>
+        <div
+          v-for="(era, i) in eras"
+          :key="i"
+          class="timeline-item"
+        >
+          <div class="era-year">
+            {{ era.year }}
+          </div>
           <div class="era-content">
-            <div class="era-name">{{ era.name }}</div>
-            <div class="era-langs">{{ era.languages.join(' → ') }}</div>
-            <div class="era-desc">{{ era.desc }}</div>
+            <div class="era-name">
+              {{ era.name }}
+            </div>
+            <div class="era-langs">
+              {{ era.languages.join(' → ') }}
+            </div>
+            <div class="era-desc">
+              {{ era.desc }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="paradigm-section">
-        <div class="section-title">编程范式</div>
+        <div class="section-title">
+          编程范式
+        </div>
         <div class="paradigm-tabs">
           <button 
             v-for="p in paradigms" 
             :key="p.name"
             :class="['tab-btn', { active: activeParadigm === p.name }]"
             @click="activeParadigm = p.name"
-          >{{ p.name }}</button>
+          >
+            {{ p.name }}
+          </button>
         </div>
-        <div class="paradigm-content" v-if="currentParadigm">
-          <div class="paradigm-desc">{{ currentParadigm.desc }}</div>
+        <div
+          v-if="currentParadigm"
+          class="paradigm-content"
+        >
+          <div class="paradigm-desc">
+            {{ currentParadigm.desc }}
+          </div>
           <div class="paradigm-langs">
             <span class="label">代表语言：</span>
-            <span v-for="lang in currentParadigm.languages" :key="lang" class="lang-tag">{{ lang }}</span>
+            <span
+              v-for="lang in currentParadigm.languages"
+              :key="lang"
+              class="lang-tag"
+            >{{ lang }}</span>
           </div>
           <div class="paradigm-example">
-            <div class="example-label">代码示例</div>
+            <div class="example-label">
+              代码示例
+            </div>
             <pre><code>{{ currentParadigm.example }}</code></pre>
           </div>
         </div>
       </div>
 
       <div class="type-section">
-        <div class="section-title">类型系统分类</div>
+        <div class="section-title">
+          类型系统分类
+        </div>
         <div class="type-grid">
-          <div class="type-card" v-for="t in typeCategories" :key="t.name">
+          <div
+            v-for="t in typeCategories"
+            :key="t.name"
+            class="type-card"
+          >
             <div class="card-header">
               <span class="card-name">{{ t.name }}</span>
               <span class="card-type">{{ t.type }}</span>
             </div>
-            <div class="card-desc">{{ t.desc }}</div>
-            <div class="card-examples">{{ t.examples.join(', ') }}</div>
+            <div class="card-desc">
+              {{ t.desc }}
+            </div>
+            <div class="card-examples">
+              {{ t.examples.join(', ') }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">语言特性对比</div>
+        <div class="table-title">
+          语言特性对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -68,8 +107,13 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="lang in languageComparison" :key="lang.name">
-              <td class="lang-name">{{ lang.name }}</td>
+            <tr
+              v-for="lang in languageComparison"
+              :key="lang.name"
+            >
+              <td class="lang-name">
+                {{ lang.name }}
+              </td>
               <td>{{ lang.type }}</td>
               <td>{{ lang.paradigm }}</td>
               <td>{{ lang.runtime }}</td>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
index f198b86..cba3ead 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
@@ -27,7 +27,9 @@
                 class="input-btn" 
                 :class="{ on: inputA }"
                 @click="inputA = !inputA"
-              >{{ inputA ? '1' : '0' }}</button>
+              >
+                {{ inputA ? '1' : '0' }}
+              </button>
             </div>
             <div class="input-item">
               <span>B:</span>
@@ -35,49 +37,170 @@
                 class="input-btn" 
                 :class="{ on: inputB }"
                 @click="inputB = !inputB"
-              >{{ inputB ? '1' : '0' }}</button>
+              >
+                {{ inputB ? '1' : '0' }}
+              </button>
             </div>
           </div>
 
           <div class="gate-symbol">
-            <svg viewBox="0 0 120 80" class="gate-svg">
+            <svg
+              viewBox="0 0 120 80"
+              class="gate-svg"
+            >
               <template v-if="activeGate === 'AND'">
-                <path d="M20,20 L20,60 L60,60 Q90,60 90,40 Q90,20 60,20 Z" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="20" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="20" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M20,20 L20,60 L60,60 Q90,60 90,40 Q90,20 60,20 Z"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="20"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="20"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'OR'">
-                <path d="M20,20 Q40,40 20,60 Q60,60 90,40 Q60,20 20,20" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="25" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="25" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M20,20 Q40,40 20,60 Q60,60 90,40 Q60,20 20,20"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="25"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="25"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'NOT'">
-                <polygon points="20,20 80,40 20,60" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <circle cx="85" cy="40" r="5" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="90" y1="40" x2="110" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="40" x2="20" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <polygon
+                  points="20,20 80,40 20,60"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <circle
+                  cx="85"
+                  cy="40"
+                  r="5"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="90"
+                  y1="40"
+                  x2="110"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="40"
+                  x2="20"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
               <template v-else-if="activeGate === 'XOR'">
-                <path d="M25,20 Q45,40 25,60 Q65,60 95,40 Q65,20 25,20" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <path d="M15,20 Q35,40 15,60" fill="none" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="95" y1="40" x2="115" y2="40" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="30" x2="30" y2="30" stroke="var(--vp-c-brand)" stroke-width="2"/>
-                <line x1="0" y1="50" x2="30" y2="50" stroke="var(--vp-c-brand)" stroke-width="2"/>
+                <path
+                  d="M25,20 Q45,40 25,60 Q65,60 95,40 Q65,20 25,20"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <path
+                  d="M15,20 Q35,40 15,60"
+                  fill="none"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="95"
+                  y1="40"
+                  x2="115"
+                  y2="40"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="30"
+                  x2="30"
+                  y2="30"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
+                <line
+                  x1="0"
+                  y1="50"
+                  x2="30"
+                  y2="50"
+                  stroke="var(--vp-c-brand)"
+                  stroke-width="2"
+                />
               </template>
             </svg>
-            <div class="gate-name">{{ activeGate }}</div>
+            <div class="gate-name">
+              {{ activeGate }}
+            </div>
           </div>
 
           <div class="output">
             <span class="output-label">输出:</span>
-            <span class="output-value" :class="{ on: output }">{{ output ? '1' : '0' }}</span>
+            <span
+              class="output-value"
+              :class="{ on: output }"
+            >{{ output ? '1' : '0' }}</span>
           </div>
         </div>
 
         <div class="truth-table-mini">
-          <div class="table-title">{{ activeGate }} 真值表</div>
+          <div class="table-title">
+            {{ activeGate }} 真值表
+          </div>
           <table>
             <thead>
               <tr>
@@ -87,8 +210,11 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in currentTruthTable" :key="row.a + '-' + row.b" 
-                  :class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }">
+              <tr
+                v-for="row in currentTruthTable"
+                :key="row.a + '-' + row.b" 
+                :class="{ highlight: row.a === inputA && row.b === inputB && (activeGate !== 'NOT') }"
+              >
                 <td>{{ row.a }}</td>
                 <td>{{ row.b }}</td>
                 <td>{{ row.out }}</td>
@@ -99,8 +225,12 @@
       </div>
 
       <div class="gate-explanation">
-        <div class="exp-title">{{ currentGate.expTitle }}</div>
-        <div class="exp-content">{{ currentGate.expContent }}</div>
+        <div class="exp-title">
+          {{ currentGate.expTitle }}
+        </div>
+        <div class="exp-content">
+          {{ currentGate.expContent }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
index 39369c9..ffd2f5b 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MemoryDemo.vue
@@ -21,30 +21,48 @@
             :style="{ height: block.size + '%' }"
             @click="selectedBlock = i"
           >
-            <span class="block-label" v-if="block.size > 5">{{ block.name }}</span>
-            <span class="block-size" v-if="block.size > 8">{{ block.sizeMB }}MB</span>
+            <span
+              v-if="block.size > 5"
+              class="block-label"
+            >{{ block.name }}</span>
+            <span
+              v-if="block.size > 8"
+              class="block-size"
+            >{{ block.sizeMB }}MB</span>
           </div>
         </div>
       </div>
 
       <div class="memory-info">
         <div class="info-section">
-          <div class="section-title">内存分配策略</div>
+          <div class="section-title">
+            内存分配策略
+          </div>
           <div class="strategy-tabs">
             <button 
               v-for="s in strategies" 
               :key="s.name"
               :class="['strat-btn', { active: activeStrategy === s.name }]"
               @click="activeStrategy = s.name"
-            >{{ s.name }}</button>
+            >
+              {{ s.name }}
+            </button>
+          </div>
+          <div class="strategy-desc">
+            {{ currentStrategy.desc }}
           </div>
-          <div class="strategy-desc">{{ currentStrategy.desc }}</div>
         </div>
 
         <div class="info-section">
-          <div class="section-title">虚拟内存的作用</div>
+          <div class="section-title">
+            虚拟内存的作用
+          </div>
           <div class="vm-benefits">
-            <div class="benefit-item" v-for="b in benefits" :key="b.title">
+            <div
+              v-for="b in benefits"
+              :key="b.title"
+              class="benefit-item"
+            >
               <span class="benefit-icon">{{ b.icon }}</span>
               <div class="benefit-content">
                 <span class="benefit-title">{{ b.title }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
index 6e21a92..2661672 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkLayers.vue
@@ -14,25 +14,48 @@
           :class="['layer', { active: activeLayer === i }]"
           @click="activeLayer = i"
         >
-          <div class="layer-num">{{ 5 - i }}</div>
-          <div class="layer-info">
-            <div class="layer-name">{{ layer.name }}</div>
-            <div class="layer-protocol">{{ layer.protocols }}</div>
+          <div class="layer-num">
+            {{ 5 - i }}
+          </div>
+          <div class="layer-info">
+            <div class="layer-name">
+              {{ layer.name }}
+            </div>
+            <div class="layer-protocol">
+              {{ layer.protocols }}
+            </div>
+          </div>
+          <div
+            v-if="layer.device"
+            class="layer-device"
+          >
+            {{ layer.device }}
           </div>
-          <div class="layer-device" v-if="layer.device">{{ layer.device }}</div>
         </div>
       </div>
 
-      <div class="layer-detail" v-if="currentLayer">
+      <div
+        v-if="currentLayer"
+        class="layer-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentLayer.name }}</span>
           <span class="detail-analogy">{{ currentLayer.analogy }}</span>
         </div>
-        <div class="detail-desc">{{ currentLayer.desc }}</div>
+        <div class="detail-desc">
+          {{ currentLayer.desc }}
+        </div>
         <div class="detail-tasks">
-          <div class="task-title">核心任务</div>
+          <div class="task-title">
+            核心任务
+          </div>
           <ul>
-            <li v-for="(task, j) in currentLayer.tasks" :key="j">{{ task }}</li>
+            <li
+              v-for="(task, j) in currentLayer.tasks"
+              :key="j"
+            >
+              {{ task }}
+            </li>
           </ul>
         </div>
         <div class="detail-unit">
@@ -42,16 +65,29 @@
       </div>
 
       <div class="encapsulation-demo">
-        <div class="encap-title">数据封装过程</div>
+        <div class="encap-title">
+          数据封装过程
+        </div>
         <div class="encap-flow">
-          <div class="encap-step" v-for="(step, i) in encapsulation" :key="i">
-            <div class="step-layer">{{ step.layer }}</div>
+          <div
+            v-for="(step, i) in encapsulation"
+            :key="i"
+            class="encap-step"
+          >
+            <div class="step-layer">
+              {{ step.layer }}
+            </div>
             <div class="step-data">
-              <span class="header" v-if="step.header">{{ step.header }}</span>
+              <span
+                v-if="step.header"
+                class="header"
+              >{{ step.header }}</span>
               <span class="payload">{{ step.payload }}</span>
             </div>
           </div>
-          <div class="arrow">↓ 发送</div>
+          <div class="arrow">
+            ↓ 发送
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
index 44f6ff2..5d3db90 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessDemo.vue
@@ -27,7 +27,10 @@
           </span>
           <span class="col-pid">{{ p.pid }}</span>
           <span class="col-state">
-            <span class="state-badge" :class="p.state === '运行中' ? 'running' : 'waiting'">
+            <span
+              class="state-badge"
+              :class="p.state === '运行中' ? 'running' : 'waiting'"
+            >
               {{ p.state }}
             </span>
           </span>
@@ -35,8 +38,13 @@
         </div>
       </div>
 
-      <div class="process-detail" v-if="selectedProcess">
-        <div class="detail-title">进程详情：{{ selectedProcess.name }}</div>
+      <div
+        v-if="selectedProcess"
+        class="process-detail"
+      >
+        <div class="detail-title">
+          进程详情：{{ selectedProcess.name }}
+        </div>
         <div class="detail-grid">
           <div class="detail-item">
             <span class="label">进程ID (PID)</span>
@@ -56,9 +64,16 @@
           </div>
         </div>
         <div class="memory-layout">
-          <div class="layout-title">进程内存布局</div>
+          <div class="layout-title">
+            进程内存布局
+          </div>
           <div class="layout-visual">
-            <div class="segment" v-for="seg in memorySegments" :key="seg.name" :style="{ height: seg.height }">
+            <div
+              v-for="seg in memorySegments"
+              :key="seg.name"
+              class="segment"
+              :style="{ height: seg.height }"
+            >
               <span class="seg-name">{{ seg.name }}</span>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
index d0c689d..1566afd 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageDemo.vue
@@ -16,14 +16,25 @@
           :style="{ width: level.width }"
           @click="activeLevel = i"
         >
-          <div class="level-name">{{ level.name }}</div>
-          <div class="level-speed">{{ level.speed }}</div>
-          <div class="level-size">{{ level.size }}</div>
+          <div class="level-name">
+            {{ level.name }}
+          </div>
+          <div class="level-speed">
+            {{ level.speed }}
+          </div>
+          <div class="level-size">
+            {{ level.size }}
+          </div>
         </div>
       </div>
 
-      <div class="level-detail" v-if="currentLevel">
-        <div class="detail-title">{{ currentLevel.name }} 详情</div>
+      <div
+        v-if="currentLevel"
+        class="level-detail"
+      >
+        <div class="detail-title">
+          {{ currentLevel.name }} 详情
+        </div>
         <div class="detail-grid">
           <div class="detail-item">
             <span class="label">访问速度</span>
@@ -42,7 +53,9 @@
             <span class="value">{{ currentLevel.volatile }}</span>
           </div>
         </div>
-        <div class="detail-desc">{{ currentLevel.desc }}</div>
+        <div class="detail-desc">
+          {{ currentLevel.desc }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
index 55e5f48..f403a10 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SubnetCalculator.vue
@@ -11,20 +11,50 @@
         <div class="input-group">
           <label>IP 地址</label>
           <div class="ip-inputs">
-            <input v-model="ip[0]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[0]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[1]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[1]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[2]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[2]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
             <span>.</span>
-            <input v-model="ip[3]" type="number" min="0" max="255" @input="calculate" />
+            <input
+              v-model="ip[3]"
+              type="number"
+              min="0"
+              max="255"
+              @input="calculate"
+            >
           </div>
         </div>
         <div class="input-group">
           <label>子网掩码 (CIDR)</label>
           <div class="cidr-input">
             <span>/</span>
-            <input v-model.number="cidr" type="number" min="8" max="30" @input="calculate" />
+            <input
+              v-model.number="cidr"
+              type="number"
+              min="8"
+              max="30"
+              @input="calculate"
+            >
           </div>
         </div>
       </div>
@@ -53,7 +83,9 @@
       </div>
 
       <div class="binary-section">
-        <div class="binary-title">二进制表示</div>
+        <div class="binary-title">
+          二进制表示
+        </div>
         <div class="binary-row">
           <span class="binary-label">IP 地址:</span>
           <span class="binary-value">{{ ipBinary }}</span>
@@ -73,7 +105,9 @@
       </div>
 
       <div class="visual-section">
-        <div class="visual-title">地址结构可视化</div>
+        <div class="visual-title">
+          地址结构可视化
+        </div>
         <div class="address-visual">
           <div class="bit-blocks">
             <div 
@@ -85,8 +119,8 @@
             </div>
           </div>
           <div class="legend">
-            <span class="legend-item"><span class="network-box"></span> 网络位 ({{ cidr }}位)</span>
-            <span class="legend-item"><span class="host-box"></span> 主机位 ({{ 32 - cidr }}位)</span>
+            <span class="legend-item"><span class="network-box" /> 网络位 ({{ cidr }}位)</span>
+            <span class="legend-item"><span class="host-box" /> 主机位 ({{ 32 - cidr }}位)</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
index e009723..d416b12 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TcpUdpComparison.vue
@@ -24,14 +24,21 @@
         </button>
       </div>
 
-      <div class="protocol-detail" v-if="currentProtocol">
+      <div
+        v-if="currentProtocol"
+        class="protocol-detail"
+      >
         <div class="detail-header">
           <span class="detail-name">{{ currentProtocol.name }}</span>
           <span class="detail-full">{{ currentProtocol.fullName }}</span>
         </div>
         
         <div class="feature-grid">
-          <div class="feature-item" v-for="(feature, i) in currentProtocol.features" :key="i">
+          <div
+            v-for="(feature, i) in currentProtocol.features"
+            :key="i"
+            class="feature-item"
+          >
             <span class="feature-icon">{{ feature.icon }}</span>
             <span class="feature-name">{{ feature.name }}</span>
             <span class="feature-value">{{ feature.value }}</span>
@@ -39,9 +46,15 @@
         </div>
 
         <div class="mechanism-section">
-          <div class="mechanism-title">核心机制</div>
+          <div class="mechanism-title">
+            核心机制
+          </div>
           <div class="mechanism-list">
-            <div class="mechanism-item" v-for="(m, i) in currentProtocol.mechanisms" :key="i">
+            <div
+              v-for="(m, i) in currentProtocol.mechanisms"
+              :key="i"
+              class="mechanism-item"
+            >
               <span class="mechanism-name">{{ m.name }}</span>
               <span class="mechanism-desc">{{ m.desc }}</span>
             </div>
@@ -49,18 +62,28 @@
         </div>
 
         <div class="use-cases">
-          <div class="use-title">适用场景</div>
+          <div class="use-title">
+            适用场景
+          </div>
           <div class="use-tags">
-            <span class="use-tag" v-for="(use, i) in currentProtocol.useCases" :key="i">{{ use }}</span>
+            <span
+              v-for="(use, i) in currentProtocol.useCases"
+              :key="i"
+              class="use-tag"
+            >{{ use }}</span>
           </div>
         </div>
       </div>
 
       <div class="visual-demo">
-        <div class="visual-title">传输过程演示</div>
+        <div class="visual-title">
+          传输过程演示
+        </div>
         <div class="transmission-demo">
           <div class="sender">
-            <div class="node-label">发送方</div>
+            <div class="node-label">
+              发送方
+            </div>
             <div class="packets">
               <div 
                 v-for="(packet, i) in packets" 
@@ -73,16 +96,33 @@
           </div>
           
           <div class="network-channel">
-            <div class="channel-label">网络通道</div>
-            <div class="channel-status" :class="{ congested: isCongested }">
+            <div class="channel-label">
+              网络通道
+            </div>
+            <div
+              class="channel-status"
+              :class="{ congested: isCongested }"
+            >
               {{ isCongested ? '拥堵' : '正常' }}
             </div>
-            <button class="demo-btn" @click="runDemo">开始演示</button>
-            <button class="demo-btn" @click="toggleCongestion">{{ isCongested ? '恢复网络' : '模拟丢包' }}</button>
+            <button
+              class="demo-btn"
+              @click="runDemo"
+            >
+              开始演示
+            </button>
+            <button
+              class="demo-btn"
+              @click="toggleCongestion"
+            >
+              {{ isCongested ? '恢复网络' : '模拟丢包' }}
+            </button>
           </div>
           
           <div class="receiver">
-            <div class="node-label">接收方</div>
+            <div class="node-label">
+              接收方
+            </div>
             <div class="received-packets">
               <div 
                 v-for="(packet, i) in receivedPackets" 
@@ -96,15 +136,25 @@
         </div>
         
         <div class="demo-log">
-          <div class="log-title">传输日志</div>
+          <div class="log-title">
+            传输日志
+          </div>
           <div class="log-content">
-            <div v-for="(log, i) in logs" :key="i" class="log-item">{{ log }}</div>
+            <div
+              v-for="(log, i) in logs"
+              :key="i"
+              class="log-item"
+            >
+              {{ log }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">特性对比</div>
+        <div class="table-title">
+          特性对比
+        </div>
         <table>
           <thead>
             <tr>
@@ -114,10 +164,19 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, i) in comparisonData" :key="i">
-              <td class="feature-col">{{ row.feature }}</td>
-              <td :class="{ highlight: row.tcpBetter }">{{ row.tcp }}</td>
-              <td :class="{ highlight: !row.tcpBetter }">{{ row.udp }}</td>
+            <tr
+              v-for="(row, i) in comparisonData"
+              :key="i"
+            >
+              <td class="feature-col">
+                {{ row.feature }}
+              </td>
+              <td :class="{ highlight: row.tcpBetter }">
+                {{ row.tcp }}
+              </td>
+              <td :class="{ highlight: !row.tcpBetter }">
+                {{ row.udp }}
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
index 6804ff6..2639822 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
@@ -8,22 +8,85 @@
 
     <div class="demo-content">
       <div class="switch-container">
-        <div class="switch-area" @click="toggleSwitch">
+        <div
+          class="switch-area"
+          @click="toggleSwitch"
+        >
           <div class="transistor-symbol">
-            <svg viewBox="0 0 100 80" class="transistor-svg">
-              <line x1="10" y1="40" x2="35" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="65" y1="40" x2="90" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="50" y1="20" x2="50" y2="35" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="50" y1="45" x2="50" y2="60" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <line x1="35" y1="30" x2="35" y2="50" stroke="var(--vp-c-text-1)" stroke-width="3"/>
-              <line x1="65" y1="30" x2="65" y2="50" stroke="var(--vp-c-text-1)" stroke-width="3"/>
-              <line x1="35" y1="40" x2="65" y2="40" stroke="var(--vp-c-text-1)" stroke-width="2"/>
-              <circle cx="50" cy="60" r="4" fill="var(--vp-c-text-1)"/>
+            <svg
+              viewBox="0 0 100 80"
+              class="transistor-svg"
+            >
+              <line
+                x1="10"
+                y1="40"
+                x2="35"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="65"
+                y1="40"
+                x2="90"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="50"
+                y1="20"
+                x2="50"
+                y2="35"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="50"
+                y1="45"
+                x2="50"
+                y2="60"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <line
+                x1="35"
+                y1="30"
+                x2="35"
+                y2="50"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="3"
+              />
+              <line
+                x1="65"
+                y1="30"
+                x2="65"
+                y2="50"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="3"
+              />
+              <line
+                x1="35"
+                y1="40"
+                x2="65"
+                y2="40"
+                stroke="var(--vp-c-text-1)"
+                stroke-width="2"
+              />
+              <circle
+                cx="50"
+                cy="60"
+                r="4"
+                fill="var(--vp-c-text-1)"
+              />
             </svg>
           </div>
           <div class="switch-label">
             <span class="state-label">{{ isOn ? 'ON (1)' : 'OFF (0)' }}</span>
-            <div class="current-flow" :class="{ active: isOn }">
+            <div
+              class="current-flow"
+              :class="{ active: isOn }"
+            >
               <span class="flow-indicator">电流</span>
             </div>
           </div>
@@ -31,7 +94,9 @@
       </div>
 
       <div class="truth-table">
-        <div class="table-title">晶体管状态表</div>
+        <div class="table-title">
+          晶体管状态表
+        </div>
         <table>
           <thead>
             <tr>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
index a109f74..7504dcb 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransmissionDemo.vue
@@ -8,39 +8,91 @@
 
     <div class="demo-content">
       <div class="transmission-types">
-        <div class="type-card" :class="{ active: activeType === 'serial' }" @click="activeType = 'serial'">
-          <div class="card-icon">➡️</div>
-          <div class="card-title">串行传输</div>
-          <div class="card-desc">一位一位依次传输</div>
-          <div class="card-examples">USB、SATA、PCIe</div>
+        <div
+          class="type-card"
+          :class="{ active: activeType === 'serial' }"
+          @click="activeType = 'serial'"
+        >
+          <div class="card-icon">
+            ➡️
+          </div>
+          <div class="card-title">
+            串行传输
+          </div>
+          <div class="card-desc">
+            一位一位依次传输
+          </div>
+          <div class="card-examples">
+            USB、SATA、PCIe
+          </div>
         </div>
-        <div class="type-card" :class="{ active: activeType === 'parallel' }" @click="activeType = 'parallel'">
-          <div class="card-icon">⬇️⬇️⬇️⬇️</div>
-          <div class="card-title">并行传输</div>
-          <div class="card-desc">多位同时传输</div>
-          <div class="card-examples">旧式打印机接口、IDE</div>
+        <div
+          class="type-card"
+          :class="{ active: activeType === 'parallel' }"
+          @click="activeType = 'parallel'"
+        >
+          <div class="card-icon">
+            ⬇️⬇️⬇️⬇️
+          </div>
+          <div class="card-title">
+            并行传输
+          </div>
+          <div class="card-desc">
+            多位同时传输
+          </div>
+          <div class="card-examples">
+            旧式打印机接口、IDE
+          </div>
         </div>
       </div>
 
       <div class="transmission-visual">
-        <div class="visual-title">{{ activeType === 'serial' ? '串行传输示意' : '并行传输示意' }}</div>
+        <div class="visual-title">
+          {{ activeType === 'serial' ? '串行传输示意' : '并行传输示意' }}
+        </div>
         <div class="visual-area">
           <div class="sender">
-            <div class="device-label">发送端</div>
+            <div class="device-label">
+              发送端
+            </div>
             <div class="data-bits">
-              <span v-for="(bit, i) in dataBits" :key="i" class="bit" :class="{ sending: sendingBit === i && activeType === 'serial' }">{{ bit }}</span>
+              <span
+                v-for="(bit, i) in dataBits"
+                :key="i"
+                class="bit"
+                :class="{ sending: sendingBit === i && activeType === 'serial' }"
+              >{{ bit }}</span>
             </div>
           </div>
           <div class="channels">
-            <div v-if="activeType === 'serial'" class="channel serial">
-              <div class="channel-label">单通道</div>
+            <div
+              v-if="activeType === 'serial'"
+              class="channel serial"
+            >
+              <div class="channel-label">
+                单通道
+              </div>
               <div class="channel-flow">
-                <span v-for="i in 5" :key="i" class="flow-dot" :class="{ active: sendingBit !== null }">●</span>
+                <span
+                  v-for="i in 5"
+                  :key="i"
+                  class="flow-dot"
+                  :class="{ active: sendingBit !== null }"
+                >●</span>
               </div>
             </div>
-            <div v-else class="channel parallel">
-              <div v-for="i in 4" :key="i" class="channel-row">
-                <div class="channel-label">通道{{ i }}</div>
+            <div
+              v-else
+              class="channel parallel"
+            >
+              <div
+                v-for="i in 4"
+                :key="i"
+                class="channel-row"
+              >
+                <div class="channel-label">
+                  通道{{ i }}
+                </div>
                 <div class="channel-flow">
                   <span class="flow-dot active">●</span>
                 </div>
@@ -48,17 +100,30 @@
             </div>
           </div>
           <div class="receiver">
-            <div class="device-label">接收端</div>
+            <div class="device-label">
+              接收端
+            </div>
             <div class="data-bits received">
-              <span v-for="(bit, i) in receivedBits" :key="i" class="bit">{{ bit }}</span>
+              <span
+                v-for="(bit, i) in receivedBits"
+                :key="i"
+                class="bit"
+              >{{ bit }}</span>
             </div>
           </div>
         </div>
-        <button class="send-btn" @click="startTransmission">发送数据</button>
+        <button
+          class="send-btn"
+          @click="startTransmission"
+        >
+          发送数据
+        </button>
       </div>
 
       <div class="comparison-table">
-        <div class="table-title">串行 vs 并行对比</div>
+        <div class="table-title">
+          串行 vs 并行对比
+        </div>
         <table>
           <thead>
             <tr>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
index 26e703c..82bab7f 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TypeSystemDemo.vue
@@ -8,27 +8,53 @@
 
     <div class="demo-content">
       <div class="type-quadrant">
-        <div class="quadrant-title">类型系统四象限</div>
+        <div class="quadrant-title">
+          类型系统四象限
+        </div>
         <div class="quadrant-grid">
           <div class="quadrant-cell strong-static">
-            <div class="cell-label">强类型 + 静态</div>
-            <div class="cell-langs">Java, Rust, Haskell</div>
-            <div class="cell-desc">最安全，编译期检查</div>
+            <div class="cell-label">
+              强类型 + 静态
+            </div>
+            <div class="cell-langs">
+              Java, Rust, Haskell
+            </div>
+            <div class="cell-desc">
+              最安全，编译期检查
+            </div>
           </div>
           <div class="quadrant-cell weak-static">
-            <div class="cell-label">弱类型 + 静态</div>
-            <div class="cell-langs">C, C++</div>
-            <div class="cell-desc">高效，但需小心</div>
+            <div class="cell-label">
+              弱类型 + 静态
+            </div>
+            <div class="cell-langs">
+              C, C++
+            </div>
+            <div class="cell-desc">
+              高效，但需小心
+            </div>
           </div>
           <div class="quadrant-cell strong-dynamic">
-            <div class="cell-label">强类型 + 动态</div>
-            <div class="cell-langs">Python, Ruby</div>
-            <div class="cell-desc">灵活，运行时检查</div>
+            <div class="cell-label">
+              强类型 + 动态
+            </div>
+            <div class="cell-langs">
+              Python, Ruby
+            </div>
+            <div class="cell-desc">
+              灵活，运行时检查
+            </div>
           </div>
           <div class="quadrant-cell weak-dynamic">
-            <div class="cell-label">弱类型 + 动态</div>
-            <div class="cell-langs">JavaScript, PHP</div>
-            <div class="cell-desc">最灵活，但易出错</div>
+            <div class="cell-label">
+              弱类型 + 动态
+            </div>
+            <div class="cell-langs">
+              JavaScript, PHP
+            </div>
+            <div class="cell-desc">
+              最灵活，但易出错
+            </div>
           </div>
         </div>
         <div class="axis-labels">
@@ -38,64 +64,104 @@
       </div>
 
       <div class="type-demo">
-        <div class="demo-title">类型检查演示</div>
+        <div class="demo-title">
+          类型检查演示
+        </div>
         <div class="code-comparison">
           <div class="code-block">
-            <div class="code-label">静态类型 (Java)</div>
+            <div class="code-label">
+              静态类型 (Java)
+            </div>
             <pre><code>String name = "Alice";
 name = 123; // ❌ 编译错误
 
 int x = 10;
 String s = x; // ❌ 编译错误</code></pre>
-            <div class="code-result error">编译期发现错误</div>
+            <div class="code-result error">
+              编译期发现错误
+            </div>
           </div>
           <div class="code-block">
-            <div class="code-label">动态类型 (Python)</div>
+            <div class="code-label">
+              动态类型 (Python)
+            </div>
             <pre><code>name = "Alice"
 name = 123  # ✅ 运行正常
 
 x = 10
 s = str(x)  # 需要显式转换</code></pre>
-            <div class="code-result success">运行时类型可变</div>
+            <div class="code-result success">
+              运行时类型可变
+            </div>
           </div>
         </div>
       </div>
 
       <div class="conversion-demo">
-        <div class="demo-title">类型转换演示</div>
+        <div class="demo-title">
+          类型转换演示
+        </div>
         <div class="conversion-tabs">
           <button 
             v-for="lang in languages" 
             :key="lang.name"
             :class="['tab-btn', { active: activeLang === lang.name }]"
             @click="activeLang = lang.name"
-          >{{ lang.name }}</button>
+          >
+            {{ lang.name }}
+          </button>
         </div>
-        <div class="conversion-content" v-if="currentLang">
-          <div class="conversion-item" v-for="(item, i) in currentLang.conversions" :key="i">
+        <div
+          v-if="currentLang"
+          class="conversion-content"
+        >
+          <div
+            v-for="(item, i) in currentLang.conversions"
+            :key="i"
+            class="conversion-item"
+          >
             <code class="code-expr">{{ item.expr }}</code>
             <span class="arrow">→</span>
-            <code class="code-result" :class="{ error: item.error }">{{ item.result }}</code>
+            <code
+              class="code-result"
+              :class="{ error: item.error }"
+            >{{ item.result }}</code>
             <span class="explanation">{{ item.explain }}</span>
           </div>
         </div>
       </div>
 
       <div class="type-inference">
-        <div class="demo-title">类型推断</div>
+        <div class="demo-title">
+          类型推断
+        </div>
         <div class="inference-examples">
-          <div class="inference-item" v-for="(example, i) in inferenceExamples" :key="i">
-            <div class="inference-lang">{{ example.lang }}</div>
+          <div
+            v-for="(example, i) in inferenceExamples"
+            :key="i"
+            class="inference-item"
+          >
+            <div class="inference-lang">
+              {{ example.lang }}
+            </div>
             <code class="inference-code">{{ example.code }}</code>
-            <div class="inference-result">推断为: <span class="type">{{ example.type }}</span></div>
+            <div class="inference-result">
+              推断为: <span class="type">{{ example.type }}</span>
+            </div>
           </div>
         </div>
       </div>
 
       <div class="type-benefits">
-        <div class="benefits-title">类型系统的好处</div>
+        <div class="benefits-title">
+          类型系统的好处
+        </div>
         <div class="benefits-grid">
-          <div class="benefit-item" v-for="(b, i) in benefits" :key="i">
+          <div
+            v-for="(b, i) in benefits"
+            :key="i"
+            class="benefit-item"
+          >
             <span class="benefit-icon">{{ b.icon }}</span>
             <span class="benefit-name">{{ b.name }}</span>
             <span class="benefit-desc">{{ b.desc }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
index ed8fd2d..72c769c 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/AsyncAwaitDemo.vue
@@ -3,11 +3,26 @@
     <h4>async/await 机制演示</h4>
 
     <div class="controls">
-      <el-button type="primary" size="small" @click="runExample" :disabled="isRunning">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="isRunning"
+        @click="runExample"
+      >
         {{ isRunning ? '运行中...' : '运行示例' }}
       </el-button>
-      <el-button size="small" @click="reset">重置</el-button>
-      <el-checkbox v-model="showDetails" size="small">显示详细信息</el-checkbox>
+      <el-button
+        size="small"
+        @click="reset"
+      >
+        重置
+      </el-button>
+      <el-checkbox
+        v-model="showDetails"
+        size="small"
+      >
+        显示详细信息
+      </el-checkbox>
     </div>
 
     <div class="code-section">
@@ -35,31 +50,60 @@
         <h5>执行时间线</h5>
         <div class="timeline">
           <div class="time-axis">
-            <div class="axis-label">0ms</div>
-            <div class="axis-label">50ms</div>
-            <div class="axis-label">100ms</div>
-            <div class="axis-label">150ms</div>
-            <div class="axis-label">200ms</div>
+            <div class="axis-label">
+              0ms
+            </div>
+            <div class="axis-label">
+              50ms
+            </div>
+            <div class="axis-label">
+              100ms
+            </div>
+            <div class="axis-label">
+              150ms
+            </div>
+            <div class="axis-label">
+              200ms
+            </div>
           </div>
 
           <div class="thread-rows">
             <div class="thread-row">
-              <div class="row-label">事件循环</div>
+              <div class="row-label">
+                事件循环
+              </div>
               <div class="row-track">
-                <div class="execution-segment event-loop" style="width: 100%;">
+                <div
+                  class="execution-segment event-loop"
+                  style="width: 100%;"
+                >
                   调度中
                 </div>
               </div>
             </div>
 
-            <div v-for="(task, idx) in tasks" :key="task.id" class="thread-row">
-              <div class="row-label">任务 {{ task.id }}</div>
+            <div
+              v-for="(task, idx) in tasks"
+              :key="task.id"
+              class="thread-row"
+            >
+              <div class="row-label">
+                任务 {{ task.id }}
+              </div>
               <div class="row-track">
-                <template v-for="(segment, sidx) in task.segments" :key="sidx">
-                  <div class="execution-segment"
+                <template
+                  v-for="(segment, sidx) in task.segments"
+                  :key="sidx"
+                >
+                  <div
+                    class="execution-segment"
                     :class="{ 'active': segment.type === 'active', 'io': segment.type === 'io' }"
-                    :style="{ left: segment.start + '%', width: segment.width + '%', backgroundColor: segment.color }">
-                    <span v-if="segment.width > 8" class="segment-label">
+                    :style="{ left: segment.start + '%', width: segment.width + '%', backgroundColor: segment.color }"
+                  >
+                    <span
+                      v-if="segment.width > 8"
+                      class="segment-label"
+                    >
                       {{ segment.type === 'active' ? '执行' : 'I/O' }}
                     </span>
                   </div>
@@ -72,28 +116,48 @@
 
       <div class="stats-grid">
         <div class="stat-card">
-          <div class="stat-title">并发任务数</div>
-          <div class="stat-value">{{ tasks.length }}</div>
+          <div class="stat-title">
+            并发任务数
+          </div>
+          <div class="stat-value">
+            {{ tasks.length }}
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-title">总执行时间</div>
-          <div class="stat-value">{{ totalTime }}ms</div>
+          <div class="stat-title">
+            总执行时间
+          </div>
+          <div class="stat-value">
+            {{ totalTime }}ms
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-title">I/O 等待时间</div>
-          <div class="stat-value">{{ ioWaitTime }}ms</div>
+          <div class="stat-title">
+            I/O 等待时间
+          </div>
+          <div class="stat-value">
+            {{ ioWaitTime }}ms
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-title">CPU 利用率</div>
-          <div class="stat-value">{{ cpuUtilization }}%</div>
+          <div class="stat-title">
+            CPU 利用率
+          </div>
+          <div class="stat-value">
+            {{ cpuUtilization }}%
+          </div>
         </div>
       </div>
     </div>
 
     <div class="explanation">
-      <el-alert title="async/await 的优势" type="success"
+      <el-alert
+        title="async/await 的优势"
+        type="success"
         description="当一个任务遇到 I/O 操作(如网络请求)时，await 会让出 CPU，事件循环调度其他任务执行。I/O 完成后，任务从断点恢复。这种方式让单个线程可以并发处理数千个任务。"
-        show-icon :closable="false" />
+        show-icon
+        :closable="false"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
index a9f7e13..88f2e01 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ConcurrentVsParallelDemo.vue
@@ -3,20 +3,46 @@
     <h4>并发 (Concurrency) vs 并行 (Parallelism) 演示</h4>
 
     <div class="controls">
-      <el-radio-group v-model="demoMode" size="small">
-        <el-radio-button label="concurrent">单核并发</el-radio-button>
-        <el-radio-button label="parallel">多核并行</el-radio-button>
-        <el-radio-button label="hybrid">混合模式</el-radio-button>
+      <el-radio-group
+        v-model="demoMode"
+        size="small"
+      >
+        <el-radio-button label="concurrent">
+          单核并发
+        </el-radio-button>
+        <el-radio-button label="parallel">
+          多核并行
+        </el-radio-button>
+        <el-radio-button label="hybrid">
+          混合模式
+        </el-radio-button>
       </el-radio-group>
 
-      <el-button type="primary" size="small" @click="startDemo" :disabled="isRunning">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="isRunning"
+        @click="startDemo"
+      >
         {{ isRunning ? '运行中...' : '开始演示' }}
       </el-button>
 
-      <el-button size="small" @click="reset">重置</el-button>
+      <el-button
+        size="small"
+        @click="reset"
+      >
+        重置
+      </el-button>
 
-      <el-slider v-model="workerCount" :min="1" :max="8" :step="1" show-stops style="width: 150px;"
-        v-if="demoMode === 'parallel' || demoMode === 'hybrid'" />
+      <el-slider
+        v-if="demoMode === 'parallel' || demoMode === 'hybrid'"
+        v-model="workerCount"
+        :min="1"
+        :max="8"
+        :step="1"
+        show-stops
+        style="width: 150px;"
+      />
     </div>
 
     <div class="demo-grid">
@@ -26,36 +52,70 @@
           {{ demoMode === 'concurrent' ? 'CPU 核心 (单核)' : 'CPU 核心 (' + cpuCores.length + '核)' }}
         </div>
 
-        <div class="cpu-grid" :class="{ 'single-core': demoMode === 'concurrent' }">
-          <div v-for="(core, idx) in cpuCores" :key="idx" class="cpu-core" :class="{
-            'active': core.active,
-            'concurrent-mode': demoMode === 'concurrent',
-            'parallel-mode': demoMode === 'parallel'
-          }"
-            :style="{ backgroundColor: core.active ? core.color : '#f5f7fa' }">
-            <div class="core-number">CPU {{ idx + 1 }}</div>
-            <div class="core-task" v-if="core.task">{{ core.task }}</div>
-            <div class="core-status">{{ core.active ? '运行中' : '空闲' }}</div>
+        <div
+          class="cpu-grid"
+          :class="{ 'single-core': demoMode === 'concurrent' }"
+        >
+          <div
+            v-for="(core, idx) in cpuCores"
+            :key="idx"
+            class="cpu-core"
+            :class="{
+              'active': core.active,
+              'concurrent-mode': demoMode === 'concurrent',
+              'parallel-mode': demoMode === 'parallel'
+            }"
+            :style="{ backgroundColor: core.active ? core.color : '#f5f7fa' }"
+          >
+            <div class="core-number">
+              CPU {{ idx + 1 }}
+            </div>
+            <div
+              v-if="core.task"
+              class="core-task"
+            >
+              {{ core.task }}
+            </div>
+            <div class="core-status">
+              {{ core.active ? '运行中' : '空闲' }}
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 任务视图 -->
       <div class="section">
-        <div class="section-title">任务执行</div>
+        <div class="section-title">
+          任务执行
+        </div>
 
         <div class="task-timeline">
-          <div v-for="(task, idx) in demoTasks" :key="task.id" class="task-row">
+          <div
+            v-for="(task, idx) in demoTasks"
+            :key="task.id"
+            class="task-row"
+          >
             <div class="task-info">
-              <div class="task-name">任务 {{ task.id }}</div>
-              <div class="task-duration">{{ task.duration }}ms</div>
+              <div class="task-name">
+                任务 {{ task.id }}
+              </div>
+              <div class="task-duration">
+                {{ task.duration }}ms
+              </div>
             </div>
 
             <div class="task-track">
-              <div v-for="(segment, sidx) in task.segments" :key="sidx" class="task-segment"
+              <div
+                v-for="(segment, sidx) in task.segments"
+                :key="sidx"
+                class="task-segment"
                 :class="{ 'execution': segment.type === 'execution', 'waiting': segment.type === 'waiting' }"
-                :style="{ left: segment.start + '%', width: segment.width + '%' }">
-                <span v-if="segment.width > 5" class="segment-text">
+                :style="{ left: segment.start + '%', width: segment.width + '%' }"
+              >
+                <span
+                  v-if="segment.width > 5"
+                  class="segment-text"
+                >
                   {{ segment.type === 'execution' ? '执行' : '等待' }}
                 </span>
               </div>
@@ -66,26 +126,46 @@
     </div>
 
     <div class="comparison-table">
-      <div class="table-header">并发 vs 并行 对比</div>
+      <div class="table-header">
+        并发 vs 并行 对比
+      </div>
 
       <div class="comparison-grid">
         <div class="comparison-item">
-          <div class="item-icon">🔄</div>
-          <div class="item-title">并发 (Concurrency)</div>
-          <div class="item-desc">多个任务交替执行，宏观上同时推进</div>
-          <div class="item-examples"><strong>例子:</strong> 单核CPU多线程、协程调度、异步I/O</div>
+          <div class="item-icon">
+            🔄
+          </div>
+          <div class="item-title">
+            并发 (Concurrency)
+          </div>
+          <div class="item-desc">
+            多个任务交替执行，宏观上同时推进
+          </div>
+          <div class="item-examples">
+            <strong>例子:</strong> 单核CPU多线程、协程调度、异步I/O
+          </div>
         </div>
 
         <div class="comparison-item">
-          <div class="item-icon">⚡</div>
-          <div class="item-title">并行 (Parallelism)</div>
-          <div class="item-desc">多个任务真正同时执行</div>
-          <div class="item-examples"><strong>例子:</strong> 多核CPU计算、GPU并行计算、分布式处理</div>
+          <div class="item-icon">
+            ⚡
+          </div>
+          <div class="item-title">
+            并行 (Parallelism)
+          </div>
+          <div class="item-desc">
+            多个任务真正同时执行
+          </div>
+          <div class="item-examples">
+            <strong>例子:</strong> 多核CPU计算、GPU并行计算、分布式处理
+          </div>
         </div>
       </div>
 
       <div class="need-table">
-        <div class="need-title">需要什么条件?</div>
+        <div class="need-title">
+          需要什么条件?
+        </div>
 
         <div class="need-items">
           <div class="need-item">
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
index 260b8fc..06c5b67 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/CoroutineLightweightDemo.vue
@@ -3,13 +3,29 @@
     <h4>协程轻量级对比演示</h4>
 
     <div class="controls">
-      <el-radio-group v-model="comparisonMode" size="small">
-        <el-radio-button label="memory">内存占用对比</el-radio-button>
-        <el-radio-button label="switch">切换开销对比</el-radio-button>
-        <el-radio-button label="creation">创建速度对比</el-radio-button>
+      <el-radio-group
+        v-model="comparisonMode"
+        size="small"
+      >
+        <el-radio-button label="memory">
+          内存占用对比
+        </el-radio-button>
+        <el-radio-button label="switch">
+          切换开销对比
+        </el-radio-button>
+        <el-radio-button label="creation">
+          创建速度对比
+        </el-radio-button>
       </el-radio-group>
 
-      <el-slider v-model="coroutineCount" :min="100" :max="10000" :step="100" show-input style="width: 300px;" />
+      <el-slider
+        v-model="coroutineCount"
+        :min="100"
+        :max="10000"
+        :step="100"
+        show-input
+        style="width: 300px;"
+      />
       <span class="slider-label">{{ coroutineCount }} 个协程</span>
     </div>
 
@@ -18,27 +34,42 @@
         <h5>线程模型</h5>
         <div class="resource-visualization">
           <div class="resource-bar">
-            <div class="bar-label">内存占用</div>
+            <div class="bar-label">
+              内存占用
+            </div>
             <div class="bar-container">
-              <div class="bar-fill thread-bar" :style="{ width: threadMemoryPercent + '%', backgroundColor: '#e6a23c' }">
+              <div
+                class="bar-fill thread-bar"
+                :style="{ width: threadMemoryPercent + '%', backgroundColor: '#e6a23c' }"
+              >
                 {{ threadMemory }} MB
               </div>
             </div>
           </div>
 
           <div class="resource-bar">
-            <div class="bar-label">创建时间</div>
+            <div class="bar-label">
+              创建时间
+            </div>
             <div class="bar-container">
-              <div class="bar-fill thread-bar" :style="{ width: threadCreationPercent + '%', backgroundColor: '#e6a23c' }">
+              <div
+                class="bar-fill thread-bar"
+                :style="{ width: threadCreationPercent + '%', backgroundColor: '#e6a23c' }"
+              >
                 {{ threadCreationTime }} ms
               </div>
             </div>
           </div>
 
           <div class="resource-bar">
-            <div class="bar-label">上下文切换</div>
+            <div class="bar-label">
+              上下文切换
+            </div>
             <div class="bar-container">
-              <div class="bar-fill thread-bar" :style="{ width: 100 + '%', backgroundColor: '#e6a23c' }">
+              <div
+                class="bar-fill thread-bar"
+                :style="{ width: 100 + '%', backgroundColor: '#e6a23c' }"
+              >
                 ~1-10 μs
               </div>
             </div>
@@ -47,10 +78,16 @@
 
         <div class="thread-visualization">
           <div class="memory-blocks">
-            <div v-for="n in Math.min(coroutineCount / 100, 50)" :key="n" class="thread-block"
-              :style="{ backgroundColor: '#e6a23c', opacity: 0.6 + Math.random() * 0.4 }">
-            </div>
-            <div v-if="coroutineCount / 100 > 50" class="more-indicator">
+            <div
+              v-for="n in Math.min(coroutineCount / 100, 50)"
+              :key="n"
+              class="thread-block"
+              :style="{ backgroundColor: '#e6a23c', opacity: 0.6 + Math.random() * 0.4 }"
+            />
+            <div
+              v-if="coroutineCount / 100 > 50"
+              class="more-indicator"
+            >
               +{{ Math.floor(coroutineCount / 100 - 50) }} 更多...
             </div>
           </div>
@@ -58,36 +95,51 @@
       </div>
 
       <div class="vs-divider">
-        <div class="vs-circle">VS</div>
+        <div class="vs-circle">
+          VS
+        </div>
       </div>
 
       <div class="comparison-column">
         <h5>协程模型</h5>
         <div class="resource-visualization">
           <div class="resource-bar">
-            <div class="bar-label">内存占用</div>
+            <div class="bar-label">
+              内存占用
+            </div>
             <div class="bar-container">
-              <div class="bar-fill coroutine-bar"
-                :style="{ width: Math.max(coroutineMemoryPercent, 5) + '%', backgroundColor: '#67c23a' }">
+              <div
+                class="bar-fill coroutine-bar"
+                :style="{ width: Math.max(coroutineMemoryPercent, 5) + '%', backgroundColor: '#67c23a' }"
+              >
                 {{ coroutineMemory }} MB
               </div>
             </div>
           </div>
 
           <div class="resource-bar">
-            <div class="bar-label">创建时间</div>
+            <div class="bar-label">
+              创建时间
+            </div>
             <div class="bar-container">
-              <div class="bar-fill coroutine-bar"
-                :style="{ width: Math.max(coroutineCreationPercent, 5) + '%', backgroundColor: '#67c23a' }">
+              <div
+                class="bar-fill coroutine-bar"
+                :style="{ width: Math.max(coroutineCreationPercent, 5) + '%', backgroundColor: '#67c23a' }"
+              >
                 {{ coroutineCreationTime }} ms
               </div>
             </div>
           </div>
 
           <div class="resource-bar">
-            <div class="bar-label">上下文切换</div>
+            <div class="bar-label">
+              上下文切换
+            </div>
             <div class="bar-container">
-              <div class="bar-fill coroutine-bar" :style="{ width: 15 + '%', backgroundColor: '#67c23a' }">
+              <div
+                class="bar-fill coroutine-bar"
+                :style="{ width: 15 + '%', backgroundColor: '#67c23a' }"
+              >
                 ~100 ns
               </div>
             </div>
@@ -96,17 +148,30 @@
 
         <div class="coroutine-visualization">
           <div class="coroutine-grid">
-            <div v-for="n in Math.min(coroutineCount / 10, 100)" :key="n" class="coroutine-cell"
-              :style="{ backgroundColor: '#67c23a', opacity: 0.5 + Math.random() * 0.5 }">
-            </div>
-            <div v-if="coroutineCount / 10 > 100" class="more-indicator">
+            <div
+              v-for="n in Math.min(coroutineCount / 10, 100)"
+              :key="n"
+              class="coroutine-cell"
+              :style="{ backgroundColor: '#67c23a', opacity: 0.5 + Math.random() * 0.5 }"
+            />
+            <div
+              v-if="coroutineCount / 10 > 100"
+              class="more-indicator"
+            >
               +{{ Math.floor(coroutineCount / 10 - 100) }} 更多...
             </div>
           </div>
         </div>
 
-        <div class="efficiency-badge" v-if="coroutineCount >= 1000">
-          <el-tag type="success" effect="dark" size="large">
+        <div
+          v-if="coroutineCount >= 1000"
+          class="efficiency-badge"
+        >
+          <el-tag
+            type="success"
+            effect="dark"
+            size="large"
+          >
             🚀 节省 {{ savingsPercent }}% 内存
           </el-tag>
         </div>
@@ -114,8 +179,13 @@
     </div>
 
     <div class="insight-panel">
-      <el-alert :title="insightTitle" :type="insightType" :description="insightDescription" show-icon
-        :closable="false" />
+      <el-alert
+        :title="insightTitle"
+        :type="insightType"
+        :description="insightDescription"
+        show-icon
+        :closable="false"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
index ce85f7d..7c6c08c 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/EventLoopDemo.vue
@@ -3,37 +3,91 @@
     <h4>事件循环 (Event Loop) 演示</h4>
 
     <div class="controls">
-      <el-button type="primary" size="small" @click="startSimulation" :disabled="isRunning">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="isRunning"
+        @click="startSimulation"
+      >
         {{ isRunning ? '运行中...' : '开始模拟' }}
       </el-button>
-      <el-button size="small" @click="addTask" :disabled="tasks.length >= 10">
+      <el-button
+        size="small"
+        :disabled="tasks.length >= 10"
+        @click="addTask"
+      >
         添加任务
       </el-button>
-      <el-button size="small" @click="addMicrotask" :disabled="microtasks.length >= 5">
+      <el-button
+        size="small"
+        :disabled="microtasks.length >= 5"
+        @click="addMicrotask"
+      >
         添加微任务
       </el-button>
-      <el-button size="small" @click="reset">重置</el-button>
+      <el-button
+        size="small"
+        @click="reset"
+      >
+        重置
+      </el-button>
 
-      <el-select v-model="simulationSpeed" size="small" style="width: 120px;">
-        <el-option :value="1" label="慢速" />
-        <el-option :value="2" label="正常" />
-        <el-option :value="3" label="快速" />
-        <el-option :value="4" label="极快" />
-        <el-option :value="5" label="即时" />
+      <el-select
+        v-model="simulationSpeed"
+        size="small"
+        style="width: 120px;"
+      >
+        <el-option
+          :value="1"
+          label="慢速"
+        />
+        <el-option
+          :value="2"
+          label="正常"
+        />
+        <el-option
+          :value="3"
+          label="快速"
+        />
+        <el-option
+          :value="4"
+          label="极快"
+        />
+        <el-option
+          :value="5"
+          label="即时"
+        />
       </el-select>
     </div>
 
     <div class="event-loop-container">
       <!-- 调用栈 -->
       <div class="section">
-        <div class="section-title">调用栈 (Call Stack)</div>
+        <div class="section-title">
+          调用栈 (Call Stack)
+        </div>
         <div class="stack-container">
-          <div v-for="(frame, idx) in callStack" :key="idx" class="stack-frame" :class="{ active: idx === 0 }"
-            :style="{ animationDelay: idx * 0.1 + 's' }">
-            <div class="frame-name">{{ frame.name }}</div>
-            <div class="frame-line" v-if="frame.line">第 {{ frame.line }} 行</div>
+          <div
+            v-for="(frame, idx) in callStack"
+            :key="idx"
+            class="stack-frame"
+            :class="{ active: idx === 0 }"
+            :style="{ animationDelay: idx * 0.1 + 's' }"
+          >
+            <div class="frame-name">
+              {{ frame.name }}
+            </div>
+            <div
+              v-if="frame.line"
+              class="frame-line"
+            >
+              第 {{ frame.line }} 行
+            </div>
           </div>
-          <div v-if="callStack.length === 0" class="empty-stack">
+          <div
+            v-if="callStack.length === 0"
+            class="empty-stack"
+          >
             栈为空
           </div>
         </div>
@@ -41,32 +95,67 @@
 
       <!-- 事件循环 -->
       <div class="section event-loop">
-        <div class="section-title">事件循环 (Event Loop)</div>
+        <div class="section-title">
+          事件循环 (Event Loop)
+        </div>
         <div class="loop-container">
-          <div class="loop-arrow" :class="{ rotating: isRunning }">
-            <svg viewBox="0 0 100 100" class="loop-svg">
-              <circle cx="50" cy="50" r="40" fill="none" stroke="#409eff" stroke-width="4" stroke-dasharray="200" stroke-linecap="round"
-                class="loop-circle" />
-              <polygon points="85,50 75,45 75,55" fill="#409eff" class="loop-arrowhead" />
+          <div
+            class="loop-arrow"
+            :class="{ rotating: isRunning }"
+          >
+            <svg
+              viewBox="0 0 100 100"
+              class="loop-svg"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                r="40"
+                fill="none"
+                stroke="#409eff"
+                stroke-width="4"
+                stroke-dasharray="200"
+                stroke-linecap="round"
+                class="loop-circle"
+              />
+              <polygon
+                points="85,50 75,45 75,55"
+                fill="#409eff"
+                class="loop-arrowhead"
+              />
             </svg>
           </div>
-          <div class="loop-label">检查</div>
+          <div class="loop-label">
+            检查
+          </div>
         </div>
 
         <div class="loop-description">
-          <div class="step" :class="{ active: currentStep === 1 }">
+          <div
+            class="step"
+            :class="{ active: currentStep === 1 }"
+          >
             <span class="step-num">1</span>
             <span class="step-text">执行调用栈中的同步代码</span>
           </div>
-          <div class="step" :class="{ active: currentStep === 2 }">
+          <div
+            class="step"
+            :class="{ active: currentStep === 2 }"
+          >
             <span class="step-num">2</span>
             <span class="step-text">执行所有微任务 (microtasks)</span>
           </div>
-          <div class="step" :class="{ active: currentStep === 3 }">
+          <div
+            class="step"
+            :class="{ active: currentStep === 3 }"
+          >
             <span class="step-num">3</span>
             <span class="step-text">渲染 UI (如果需要)</span>
           </div>
-          <div class="step" :class="{ active: currentStep === 4 }">
+          <div
+            class="step"
+            :class="{ active: currentStep === 4 }"
+          >
             <span class="step-num">4</span>
             <span class="step-text">执行宏任务 (macrotask)</span>
           </div>
@@ -75,31 +164,51 @@
 
       <!-- 任务队列 -->
       <div class="section">
-        <div class="section-title">任务队列</div>
+        <div class="section-title">
+          任务队列
+        </div>
 
         <div class="queue microtask-queue">
-          <div class="queue-title">微任务队列 (Microtasks)</div>
+          <div class="queue-title">
+            微任务队列 (Microtasks)
+          </div>
           <div class="queue-items">
-            <div v-for="(task, idx) in microtasks" :key="task.id" class="queue-item microtask"
-              :style="{ animationDelay: idx * 0.1 + 's' }">
+            <div
+              v-for="(task, idx) in microtasks"
+              :key="task.id"
+              class="queue-item microtask"
+              :style="{ animationDelay: idx * 0.1 + 's' }"
+            >
               <span class="task-name">{{ task.name }}</span>
               <span class="task-priority">高优先级</span>
             </div>
-            <div v-if="microtasks.length === 0" class="empty-queue">
+            <div
+              v-if="microtasks.length === 0"
+              class="empty-queue"
+            >
               队列为空
             </div>
           </div>
         </div>
 
         <div class="queue macrotask-queue">
-          <div class="queue-title">宏任务队列 (Macrotasks)</div>
+          <div class="queue-title">
+            宏任务队列 (Macrotasks)
+          </div>
           <div class="queue-items">
-            <div v-for="(task, idx) in tasks" :key="task.id" class="queue-item macrotask"
-              :style="{ animationDelay: idx * 0.15 + 's' }">
+            <div
+              v-for="(task, idx) in tasks"
+              :key="task.id"
+              class="queue-item macrotask"
+              :style="{ animationDelay: idx * 0.15 + 's' }"
+            >
               <span class="task-name">{{ task.name }}</span>
               <span class="task-type">{{ task.type }}</span>
             </div>
-            <div v-if="tasks.length === 0" class="empty-queue">
+            <div
+              v-if="tasks.length === 0"
+              class="empty-queue"
+            >
               队列为空
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
index 754b967..1e32cfd 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/GoroutineGreenThreadDemo.vue
@@ -3,38 +3,78 @@
     <h4>Go 协程 (Goroutine) 与 GMP 调度演示</h4>
 
     <div class="controls">
-      <el-radio-group v-model="viewMode" size="small">
-        <el-radio-button label="overview">整体视图</el-radio-button>
-        <el-radio-button label="gmp">GMP 调度</el-radio-button>
-        <el-radio-button label="channel">Channel 通信</el-radio-button>
+      <el-radio-group
+        v-model="viewMode"
+        size="small"
+      >
+        <el-radio-button label="overview">
+          整体视图
+        </el-radio-button>
+        <el-radio-button label="gmp">
+          GMP 调度
+        </el-radio-button>
+        <el-radio-button label="channel">
+          Channel 通信
+        </el-radio-button>
       </el-radio-group>
 
-      <el-button type="primary" size="small" @click="startDemo" :disabled="isRunning">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="isRunning"
+        @click="startDemo"
+      >
         {{ isRunning ? '运行中...' : '开始演示' }}
       </el-button>
 
-      <el-button size="small" @click="addGoroutine" :disabled="goroutines.length >= 20">
+      <el-button
+        size="small"
+        :disabled="goroutines.length >= 20"
+        @click="addGoroutine"
+      >
         +Goroutine
       </el-button>
 
-      <el-button size="small" @click="reset">重置</el-button>
+      <el-button
+        size="small"
+        @click="reset"
+      >
+        重置
+      </el-button>
     </div>
 
     <!-- GMP 调度视图 -->
-    <div v-if="viewMode === 'gmp' || viewMode === 'overview'" class="gmp-view">
+    <div
+      v-if="viewMode === 'gmp' || viewMode === 'overview'"
+      class="gmp-view"
+    >
       <div class="gmp-container">
         <!-- Global Queue -->
         <div class="queue-section global-queue">
           <div class="queue-header">
             <span class="queue-name">Global Queue (G)</span>
-            <el-tag size="small" type="info">{{ globalQueue.length }}</el-tag>
+            <el-tag
+              size="small"
+              type="info"
+            >
+              {{ globalQueue.length }}
+            </el-tag>
           </div>
           <div class="queue-content">
-            <div v-for="g in globalQueue" :key="g.id" class="g-item"
-              :style="{ backgroundColor: g.color }">
+            <div
+              v-for="g in globalQueue"
+              :key="g.id"
+              class="g-item"
+              :style="{ backgroundColor: g.color }"
+            >
               G{{ g.id }}
             </div>
-            <div v-if="globalQueue.length === 0" class="empty-queue">空</div>
+            <div
+              v-if="globalQueue.length === 0"
+              class="empty-queue"
+            >
+              空
+            </div>
           </div>
         </div>
 
@@ -45,26 +85,47 @@
           </div>
 
           <div class="processors-grid">
-            <div v-for="(p, idx) in processors" :key="idx" class="processor"
+            <div
+              v-for="(p, idx) in processors"
+              :key="idx"
+              class="processor"
               :class="{ 'active': p.active }"
-              :style="{ borderColor: p.active ? p.color : '#e4e7ed' }">
+              :style="{ borderColor: p.active ? p.color : '#e4e7ed' }"
+            >
               <div class="processor-header">
                 <span class="processor-name">P{{ idx }}</span>
-                <span class="processor-status" :class="{ 'running': p.active }">{{ p.active ? '运行中' : '空闲' }}</span>
+                <span
+                  class="processor-status"
+                  :class="{ 'running': p.active }"
+                >{{ p.active ? '运行中' : '空闲' }}</span>
               </div>
 
               <div class="local-queue">
-                <div class="queue-label">本地队列</div>
+                <div class="queue-label">
+                  本地队列
+                </div>
                 <div class="local-g-list">
-                  <div v-for="g in p.localQueue" :key="g.id" class="local-g-item"
-                    :style="{ backgroundColor: g.color }">
+                  <div
+                    v-for="g in p.localQueue"
+                    :key="g.id"
+                    class="local-g-item"
+                    :style="{ backgroundColor: g.color }"
+                  >
                     G{{ g.id }}
                   </div>
-                  <div v-if="p.localQueue.length === 0" class="empty-local">-</div>
+                  <div
+                    v-if="p.localQueue.length === 0"
+                    class="empty-local"
+                  >
+                    -
+                  </div>
                 </div>
               </div>
 
-              <div class="m-binding" v-if="p.m">
+              <div
+                v-if="p.m"
+                class="m-binding"
+              >
                 <span class="m-label">绑定 M{{ p.m.id }}</span>
               </div>
             </div>
@@ -78,9 +139,13 @@
           </div>
 
           <div class="machines-list">
-            <div v-for="m in machines" :key="m.id" class="machine-item"
+            <div
+              v-for="m in machines"
+              :key="m.id"
+              class="machine-item"
               :class="{ 'active': m.active }"
-              :style="{ borderColor: m.active ? '#67c23a' : '#e4e7ed' }">
+              :style="{ borderColor: m.active ? '#67c23a' : '#e4e7ed' }"
+            >
               <span class="machine-id">M{{ m.id }}</span>
               <span class="machine-status">{{ m.active ? '运行中' : '休眠' }}</span>
             </div>
@@ -90,9 +155,13 @@
     </div>
 
     <div class="explanation">
-      <el-alert title="GMP 调度模型" type="success"
+      <el-alert
+        title="GMP 调度模型"
+        type="success"
         :description="gmpDescription"
-        show-icon :closable="false" />
+        show-icon
+        :closable="false"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
index 1be1175..f94e5d3 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessIsolationDemo.vue
@@ -3,22 +3,40 @@
     <h4>进程内存隔离演示</h4>
 
     <div class="controls">
-      <el-button type="primary" size="small" @click="addProcess" :disabled="processes.length >= 4">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="processes.length >= 4"
+        @click="addProcess"
+      >
         创建进程
       </el-button>
-      <el-button type="danger" size="small" @click="killProcess" :disabled="processes.length === 0">
+      <el-button
+        type="danger"
+        size="small"
+        :disabled="processes.length === 0"
+        @click="killProcess"
+      >
         结束进程
       </el-button>
-      <el-button size="small" @click="simulateCrash">
+      <el-button
+        size="small"
+        @click="simulateCrash"
+      >
         模拟进程崩溃
       </el-button>
-      <el-button size="small" @click="reset">
+      <el-button
+        size="small"
+        @click="reset"
+      >
         重置
       </el-button>
     </div>
 
     <div class="memory-view">
-      <div class="memory-label">系统内存</div>
+      <div class="memory-label">
+        系统内存
+      </div>
       <div class="memory-blocks">
         <div
           v-for="process in processes"
@@ -49,18 +67,33 @@
               <span class="section-size">{{ process.stackSize }}MB</span>
             </div>
           </div>
-          <div v-if="process.crashed" class="crash-overlay">
+          <div
+            v-if="process.crashed"
+            class="crash-overlay"
+          >
             <span class="crash-text">💥 已崩溃</span>
             <span class="crash-info">不影响其他进程</span>
           </div>
         </div>
       </div>
 
-      <div class="shared-memory" v-if="showSharedMemory">
-        <div class="shared-label">共享内存区域 (IPC)</div>
+      <div
+        v-if="showSharedMemory"
+        class="shared-memory"
+      >
+        <div class="shared-label">
+          共享内存区域 (IPC)
+        </div>
         <div class="shared-content">
-          <div v-for="process in processes" :key="process.id" class="shared-access">
-            <span class="access-indicator" :style="{ backgroundColor: process.color }"></span>
+          <div
+            v-for="process in processes"
+            :key="process.id"
+            class="shared-access"
+          >
+            <span
+              class="access-indicator"
+              :style="{ backgroundColor: process.color }"
+            />
             <span>进程 {{ process.id }} 可以访问</span>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
index 775d152..dc137ef 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ProcessThreadCoroutineDemo.vue
@@ -3,27 +3,50 @@
     <h4>进程 / 线程 / 协程 对比演示</h4>
 
     <div class="controls">
-      <el-radio-group v-model="model" size="small">
-        <el-radio-button label="process">多进程</el-radio-button>
-        <el-radio-button label="thread">多线程</el-radio-button>
-        <el-radio-button label="coroutine">协程</el-radio-button>
+      <el-radio-group
+        v-model="model"
+        size="small"
+      >
+        <el-radio-button label="process">
+          多进程
+        </el-radio-button>
+        <el-radio-button label="thread">
+          多线程
+        </el-radio-button>
+        <el-radio-button label="coroutine">
+          协程
+        </el-radio-button>
       </el-radio-group>
 
       <el-button
         type="primary"
         size="small"
-        @click="startSimulation"
         :disabled="isRunning"
+        @click="startSimulation"
       >
         {{ isRunning ? '运行中...' : '开始模拟' }}
       </el-button>
     </div>
 
     <div class="stats-bar">
-      <el-statistic title="内存占用" :value="memoryUsage" suffix="MB" />
-      <el-statistic title="上下文切换" :value="contextSwitches" />
-      <el-statistic title="完成任务" :value="completedTasks" />
-      <el-statistic title="耗时" :value="elapsedTime" suffix="ms" />
+      <el-statistic
+        title="内存占用"
+        :value="memoryUsage"
+        suffix="MB"
+      />
+      <el-statistic
+        title="上下文切换"
+        :value="contextSwitches"
+      />
+      <el-statistic
+        title="完成任务"
+        :value="completedTasks"
+      />
+      <el-statistic
+        title="耗时"
+        :value="elapsedTime"
+        suffix="ms"
+      />
     </div>
 
     <div class="visualization">
@@ -35,7 +58,10 @@
           :class="{ active: core.active, type: core.type }"
         >
           <span class="core-label">CPU {{ idx + 1 }}</span>
-          <div class="task-indicator" v-if="core.task">
+          <div
+            v-if="core.task"
+            class="task-indicator"
+          >
             {{ core.task }}
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue b/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
index a84f98a..956a511 100644
--- a/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/concurrency-models/ThreadSchedulingDemo.vue
@@ -3,13 +3,27 @@
     <h4>线程调度演示</h4>
 
     <div class="controls">
-      <el-radio-group v-model="schedulingPolicy" size="small">
-        <el-radio-button label="fifo">FIFO (先来先服务)</el-radio-button>
-        <el-radio-button label="roundrobin">时间片轮转</el-radio-button>
-        <el-radio-button label="priority">优先级调度</el-radio-button>
+      <el-radio-group
+        v-model="schedulingPolicy"
+        size="small"
+      >
+        <el-radio-button label="fifo">
+          FIFO (先来先服务)
+        </el-radio-button>
+        <el-radio-button label="roundrobin">
+          时间片轮转
+        </el-radio-button>
+        <el-radio-button label="priority">
+          优先级调度
+        </el-radio-button>
       </el-radio-group>
 
-      <el-button type="primary" size="small" @click="addThread" :disabled="threads.length >= 6">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="threads.length >= 6"
+        @click="addThread"
+      >
         添加线程
       </el-button>
 
@@ -21,7 +35,10 @@
         {{ isRunning ? '暂停' : '开始调度' }}
       </el-button>
 
-      <el-button size="small" @click="reset">
+      <el-button
+        size="small"
+        @click="reset"
+      >
         重置
       </el-button>
     </div>
@@ -29,12 +46,24 @@
     <div class="timeline-container">
       <div class="timeline-header">
         <span class="timeline-label">时间轴</span>
-        <div class="time-marker">0ms</div>
-        <div class="time-marker">100ms</div>
-        <div class="time-marker">200ms</div>
-        <div class="time-marker">300ms</div>
-        <div class="time-marker">400ms</div>
-        <div class="time-marker">500ms</div>
+        <div class="time-marker">
+          0ms
+        </div>
+        <div class="time-marker">
+          100ms
+        </div>
+        <div class="time-marker">
+          200ms
+        </div>
+        <div class="time-marker">
+          300ms
+        </div>
+        <div class="time-marker">
+          400ms
+        </div>
+        <div class="time-marker">
+          500ms
+        </div>
       </div>
 
       <div class="thread-rows">
@@ -44,11 +73,17 @@
           class="thread-row"
         >
           <div class="thread-info">
-            <div class="thread-name" :style="{ color: thread.color }">
+            <div
+              class="thread-name"
+              :style="{ color: thread.color }"
+            >
               {{ thread.name }}
             </div>
             <div class="thread-details">
-              <el-tag size="small" :type="thread.state === 'running' ? 'success' : thread.state === 'ready' ? 'warning' : 'info'">
+              <el-tag
+                size="small"
+                :type="thread.state === 'running' ? 'success' : thread.state === 'ready' ? 'warning' : 'info'"
+              >
                 {{ stateText(thread.state) }}
               </el-tag>
               <span class="priority">优先级: {{ thread.priority }}</span>
@@ -63,8 +98,14 @@
               :class="{ running: slot.state === 'running', blocked: slot.state === 'blocked' }"
               :style="{ left: slot.start + '%', width: slot.width + '%', backgroundColor: slot.state === 'running' ? thread.color : '#dcdfe6' }"
             >
-              <span v-if="slot.state === 'running'" class="slot-label">运行</span>
-              <span v-else class="slot-label">等待</span>
+              <span
+                v-if="slot.state === 'running'"
+                class="slot-label"
+              >运行</span>
+              <span
+                v-else
+                class="slot-label"
+              >等待</span>
             </div>
 
             <div
@@ -72,7 +113,7 @@
               class="current-indicator"
               :style="{ left: currentTime + '%', backgroundColor: thread.color }"
             >
-              <div class="indicator-arrow"></div>
+              <div class="indicator-arrow" />
             </div>
           </div>
         </div>
@@ -81,20 +122,36 @@
 
     <div class="stats-panel">
       <div class="stat-item">
-        <div class="stat-value">{{ completedThreads }}</div>
-        <div class="stat-label">已完成线程</div>
+        <div class="stat-value">
+          {{ completedThreads }}
+        </div>
+        <div class="stat-label">
+          已完成线程
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-value">{{ contextSwitches }}</div>
-        <div class="stat-label">上下文切换</div>
+        <div class="stat-value">
+          {{ contextSwitches }}
+        </div>
+        <div class="stat-label">
+          上下文切换
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-value">{{ avgWaitTime }}ms</div>
-        <div class="stat-label">平均等待时间</div>
+        <div class="stat-value">
+          {{ avgWaitTime }}ms
+        </div>
+        <div class="stat-label">
+          平均等待时间
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-value">{{ throughput }}</div>
-        <div class="stat-label">吞吐量 (线程/秒)</div>
+        <div class="stat-value">
+          {{ throughput }}
+        </div>
+        <div class="stat-label">
+          吞吐量 (线程/秒)
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue b/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
index a653081..089f9df 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/AgentContextFlow.vue
@@ -43,12 +43,15 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
           <span class="value">{{ round }}</span>
           <span class="label">当前轮次</span>
         </div>
-        <div class="stat-divider"></div>
+        <div class="stat-divider" />
         <div class="stat-item">
-          <span class="value" :class="{ error: isOverflow }">{{ totalTokens }}</span>
+          <span
+            class="value"
+            :class="{ error: isOverflow }"
+          >{{ totalTokens }}</span>
           <span class="label">Token 占用</span>
         </div>
-        <div class="stat-divider"></div>
+        <div class="stat-divider" />
         <div class="stat-item">
           <span class="value">${{ currentCost }}</span>
           <span class="label">本轮成本</span>
@@ -61,11 +64,17 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
       <!-- 上方预留空间给溢出提示 -->
       <div class="overflow-zone">
         <transition name="fade">
-          <div v-if="isOverflow" class="overflow-badge">
+          <div
+            v-if="isOverflow"
+            class="overflow-badge"
+          >
             <span class="icon">🗑️</span>
             <span>溢出截断：前 {{ forgottenRounds }} 轮对话已被遗忘！</span>
           </div>
-          <div v-else class="safe-badge">
+          <div
+            v-else
+            class="safe-badge"
+          >
             <span class="icon">✅</span>
             <span>记忆完整</span>
           </div>
@@ -81,15 +90,23 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
         <!-- 堆叠内容容器 -->
         <!-- 使用 flex-direction: column-reverse 让底部对齐 -->
         <div class="stack-container">
-          
           <!-- System (基座) -->
-          <div class="block system" :style="{ height: `${systemHeight}%` }">
+          <div
+            class="block system"
+            :style="{ height: `${systemHeight}%` }"
+          >
             <span class="block-text">System Prompt ({{ systemPromptTokens }})</span>
           </div>
 
           <!-- History (中间) -->
-          <div class="block history" :style="{ height: `${historyHeight}%` }">
-            <span class="block-text" v-if="historyHeight > 10">
+          <div
+            class="block history"
+            :style="{ height: `${historyHeight}%` }"
+          >
+            <span
+              v-if="historyHeight > 10"
+              class="block-text"
+            >
               History ({{ round - 1 }} rounds)
             </span>
             <!-- 溢出遮罩：当溢出时，History 的底部实际上是被“挤出去”的 -->
@@ -103,10 +120,12 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
           </div>
 
           <!-- Input (最新) -->
-          <div class="block input" :style="{ height: `${inputHeight}%` }">
+          <div
+            class="block input"
+            :style="{ height: `${inputHeight}%` }"
+          >
             <span class="block-text">New Input</span>
           </div>
-          
         </div>
         
         <!-- 溢出遮罩层：如果 totalHeight > 100%，显示一个红色的遮罩在顶部，表示这部分虽然生成了但塞不进去/或者旧的被挤走了 -->
@@ -121,12 +140,12 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
       <div class="slider-wrapper">
         <span class="slider-hint">拖动滑块增加对话轮次：</span>
         <input 
+          v-model.number="round" 
           type="range" 
           min="1" 
           :max="maxRound" 
-          v-model.number="round" 
           class="custom-slider"
-        />
+        >
         <div class="slider-labels">
           <span>第 1 轮</span>
           <span>第 {{ maxRound }} 轮</span>
@@ -137,7 +156,10 @@ const totalHeight = computed(() => systemHeight.value + historyHeight.value + in
         <p v-if="!isOverflow">
           💡 <strong>一切正常</strong>：当前 Token 数 ({{ totalTokens }}) 未超过窗口限制。模型能完美回忆起所有对话细节。
         </p>
-        <p v-else class="warning-text">
+        <p
+          v-else
+          class="warning-text"
+        >
           ⚠️ <strong>发生遗忘</strong>：Token 总量 ({{ totalTokens }}) 已超过窗口限制 ({{ windowLimit }})。
           为了放入新对话，系统被迫丢弃了最早的 <strong>{{ forgottenRounds }}</strong> 轮历史记录。
         </p>
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/ContextCompressionDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/ContextCompressionDemo.vue
index ef0d851..c486e33 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/ContextCompressionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/ContextCompressionDemo.vue
@@ -57,7 +57,9 @@ const compress = async (mode) => {
   <div class="context-compression-demo">
     <!-- 1. Strategy Selection -->
     <div class="section control-panel">
-      <div class="section-label">1. 选择压缩策略</div>
+      <div class="section-label">
+        1. 选择压缩策略
+      </div>
       <div class="strategy-group">
         <button
           v-for="s in strategies"
@@ -66,8 +68,12 @@ const compress = async (mode) => {
           :class="{ active: currentMode === s.id }"
           @click="compress(s.id)"
         >
-          <div class="btn-label">{{ s.label }}</div>
-          <div class="btn-desc">{{ s.desc }}</div>
+          <div class="btn-label">
+            {{ s.label }}
+          </div>
+          <div class="btn-desc">
+            {{ s.desc }}
+          </div>
         </button>
       </div>
     </div>
@@ -82,49 +88,72 @@ const compress = async (mode) => {
         v-model="originalText" 
         class="text-content original-input"
         placeholder="在此输入长文本..."
-      ></textarea>
+      />
     </div>
 
     <!-- Connector / Process -->
     <div class="flow-connector">
-      <div class="line"></div>
-      <div class="process-icon" :class="{ spinning: isCompressing }">
+      <div class="line" />
+      <div
+        class="process-icon"
+        :class="{ spinning: isCompressing }"
+      >
         {{ isCompressing ? '⚙️' : '⬇️' }}
       </div>
-      <div class="badge-container" v-if="compressedText && !isCompressing">
+      <div
+        v-if="compressedText && !isCompressing"
+        class="badge-container"
+      >
         <span class="ratio-badge">-{{ compressionRatio }}%</span>
       </div>
     </div>
 
     <!-- 3. Output Area -->
-    <div class="section output-area" :class="{ 'has-result': compressedText }">
+    <div
+      class="section output-area"
+      :class="{ 'has-result': compressedText }"
+    >
       <div class="section-header">
         <span class="label">压缩后 (Compressed)</span>
-        <span class="token-count" v-if="compressedText">{{ compressedTokens }} tokens</span>
+        <span
+          v-if="compressedText"
+          class="token-count"
+        >{{ compressedTokens }} tokens</span>
       </div>
       
       <div class="text-content result-box">
-        <div v-if="isCompressing" class="loading-state">
-          <span class="spinner"></span> 正在压缩...
+        <div
+          v-if="isCompressing"
+          class="loading-state"
+        >
+          <span class="spinner" /> 正在压缩...
         </div>
         <pre v-else-if="compressedText">{{ compressedText }}</pre>
-        <div v-else class="placeholder">
+        <div
+          v-else
+          class="placeholder"
+        >
           请点击上方按钮开始压缩
         </div>
       </div>
 
       <!-- Mini Metrics (Inside Output Area) -->
-      <div class="mini-metrics" v-if="compressedText && !isCompressing">
+      <div
+        v-if="compressedText && !isCompressing"
+        class="mini-metrics"
+      >
         <div class="metric-item">
           <span class="metric-label">节省空间</span>
           <span class="metric-val highlight">{{ compressionRatio }}%</span>
         </div>
         <div class="metric-bar">
-          <div class="bar-fill" :style="{ width: (100 - compressionRatio) + '%' }"></div>
+          <div
+            class="bar-fill"
+            :style="{ width: (100 - compressionRatio) + '%' }"
+          />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/ContextWindowVisualizer.vue b/docs/.vitepress/theme/components/appendix/context-engineering/ContextWindowVisualizer.vue
index 9de144a..401fb00 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/ContextWindowVisualizer.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/ContextWindowVisualizer.vue
@@ -17,10 +17,15 @@
     <div class="control-panel">
       <div class="stat-group">
         <div class="stat-item">
-          <span class="value" :class="{ error: isOverflow }">{{ usedTokens }}</span>
+          <span
+            class="value"
+            :class="{ error: isOverflow }"
+          >{{ usedTokens }}</span>
           <span class="label">已经写了多少个 token</span>
         </div>
-        <div class="stat-divider">/</div>
+        <div class="stat-divider">
+          /
+        </div>
         <div class="stat-item">
           <span class="value">{{ maxTokens }}</span>
           <span class="label">黑板最多能写几个 token</span>
@@ -35,14 +40,19 @@
               width: `${Math.min(usagePercentage, 100)}%`,
               backgroundColor: progressBarColor
             }"
-          ></div>
+          />
+        </div>
+        <div class="percentage-label">
+          {{ usagePercentage.toFixed(1) }}%
         </div>
-        <div class="percentage-label">{{ usagePercentage.toFixed(1) }}%</div>
       </div>
     </div>
 
     <div class="visualization-area">
-      <div class="window-frame" :class="{ overflow: isOverflow }">
+      <div
+        class="window-frame"
+        :class="{ overflow: isOverflow }"
+      >
         <div class="window-header">
           <span class="icon">🧠</span>
           <span>模型能看到的“小黑板”（上下文窗口）</span>
@@ -61,8 +71,11 @@
           </transition-group>
         </div>
 
-        <div v-if="isOverflow" class="overflow-indicator">
-          <div class="overflow-line"></div>
+        <div
+          v-if="isOverflow"
+          class="overflow-indicator"
+        >
+          <div class="overflow-line" />
           <span class="overflow-text">⚠️ 达到上下文上限 (已截断)</span>
         </div>
       </div>
@@ -72,16 +85,31 @@
       <div class="input-header">
         <label>输入内容（看黑板怎么被一点点写满）</label>
         <div class="actions">
-        <button class="action-btn" @click="fillLorem(10)">填一段短文本</button>
-        <button class="action-btn" @click="fillLorem(60)">一下子塞满黑板</button>
-          <button class="action-btn outline" @click="clear">清空</button>
+          <button
+            class="action-btn"
+            @click="fillLorem(10)"
+          >
+            填一段短文本
+          </button>
+          <button
+            class="action-btn"
+            @click="fillLorem(60)"
+          >
+            一下子塞满黑板
+          </button>
+          <button
+            class="action-btn outline"
+            @click="clear"
+          >
+            清空
+          </button>
         </div>
       </div>
       <textarea
         v-model="inputText"
         placeholder="在这里输入几句话，看看小黑板是怎么逐渐被写满的..."
         rows="4"
-      ></textarea>
+      />
     </div>
 
     <div class="info-box">
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/IntroProblemReasonSolution.vue b/docs/.vitepress/theme/components/appendix/context-engineering/IntroProblemReasonSolution.vue
index 7db2352..fdb5ed5 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/IntroProblemReasonSolution.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/IntroProblemReasonSolution.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="intro-prs">
     <div class="prs-item">
-      <div class="prs-title">问题</div>
+      <div class="prs-title">
+        问题
+      </div>
       <ul>
         <li><strong>上下文难以保持一致</strong>：对话一长，前后语义容易脱节。</li>
         <li><strong>关键事实容易丢失</strong>：早期给出的信息在后续轮次中难以被准确引用。</li>
@@ -9,7 +11,9 @@
       </ul>
     </div>
     <div class="prs-item">
-      <div class="prs-title">可能的成因</div>
+      <div class="prs-title">
+        可能的成因
+      </div>
       <ul>
         <li><strong>视野仅限当前调用</strong>：模型只能依赖这一轮提供的上下文。</li>
         <li><strong>信息缺乏结构化组织</strong>：重要信息与次要细节混在一起，难以形成稳定记忆。</li>
@@ -17,7 +21,9 @@
       </ul>
     </div>
     <div class="prs-item">
-      <div class="prs-title">带来的影响</div>
+      <div class="prs-title">
+        带来的影响
+      </div>
       <ul>
         <li><strong>回答质量不稳定</strong>：对话越长，模型越难保持一致性和可追溯性。</li>
         <li><strong>成本难以预估</strong>：每轮上下文大小高度波动，调用费用不可控。</li>
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/KVCacheDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/KVCacheDemo.vue
index 045cd98..cf48a27 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/KVCacheDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/KVCacheDemo.vue
@@ -3,8 +3,12 @@
     <div class="control-panel">
       <div class="control-group">
         <label class="toggle-switch">
-          <input type="checkbox" v-model="isCacheEnabled" :disabled="isProcessing">
-          <span class="slider"></span>
+          <input
+            v-model="isCacheEnabled"
+            type="checkbox"
+            :disabled="isProcessing"
+          >
+          <span class="slider" />
         </label>
         <span class="label">开启“背课文加速”（前缀复用 / KV Cache）</span>
       </div>
@@ -27,12 +31,18 @@
           <div class="block-header">
             <span class="icon">⚙️</span>
             <span>固定开场白（System Prompt）</span>
-            <span class="badge" v-if="isCacheEnabled && hasCache">已背过</span>
+            <span
+              v-if="isCacheEnabled && hasCache"
+              class="badge"
+            >已背过</span>
           </div>
           <div class="block-content">
             你是一个乐于助人的 AI 助手... （大约 500 个 token）
           </div>
-          <div class="process-indicator" v-if="processingStep === 'system'">
+          <div
+            v-if="processingStep === 'system'"
+            class="process-indicator"
+          >
             计算中...
           </div>
         </div>
@@ -49,7 +59,10 @@
           <div class="block-content">
             用户：你好... （大约 200 个 token）
           </div>
-          <div class="process-indicator" v-if="processingStep === 'history'">
+          <div
+            v-if="processingStep === 'history'"
+            class="process-indicator"
+          >
             计算中...
           </div>
         </div>
@@ -66,7 +79,10 @@
           <div class="block-content">
             {{ currentQuery }} （大约 50 个 token）
           </div>
-          <div class="process-indicator" v-if="processingStep === 'query'">
+          <div
+            v-if="processingStep === 'query'"
+            class="process-indicator"
+          >
             计算中...
           </div>
         </div>
@@ -75,19 +91,35 @@
 
     <div class="metrics-panel">
       <div class="metric-card">
-        <div class="metric-value">{{ metrics.ttft }}ms</div>
-        <div class="metric-label">开口速度（首字延迟 TTFT）</div>
-        <div class="metric-diff" :class="{ 'good': metrics.savedTime > 0 }" v-if="metrics.savedTime > 0">
+        <div class="metric-value">
+          {{ metrics.ttft }}ms
+        </div>
+        <div class="metric-label">
+          开口速度（首字延迟 TTFT）
+        </div>
+        <div
+          v-if="metrics.savedTime > 0"
+          class="metric-diff"
+          :class="{ 'good': metrics.savedTime > 0 }"
+        >
           节省 {{ metrics.savedTime }}ms
         </div>
       </div>
       <div class="metric-card">
-        <div class="metric-value">{{ metrics.processedTokens }}</div>
-        <div class="metric-label">这次一共算了多少个 token</div>
+        <div class="metric-value">
+          {{ metrics.processedTokens }}
+        </div>
+        <div class="metric-label">
+          这次一共算了多少个 token
+        </div>
       </div>
       <div class="metric-card">
-        <div class="metric-value">{{ metrics.cost }}</div>
-        <div class="metric-label">大致算力消耗（越少越省钱）</div>
+        <div class="metric-value">
+          {{ metrics.cost }}
+        </div>
+        <div class="metric-label">
+          大致算力消耗（越少越省钱）
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/LostInMiddleDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/LostInMiddleDemo.vue
index a59d438..0ffd35d 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/LostInMiddleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/LostInMiddleDemo.vue
@@ -4,8 +4,8 @@
       <div class="control-group">
         <label>关键信息大概在整段话的哪个位置：{{ needlePosition }}%</label>
         <input 
-          type="range" 
           v-model.number="needlePosition" 
+          type="range" 
           min="0" 
           max="100" 
           step="1"
@@ -17,25 +17,37 @@
     <div class="visualization-area">
       <!-- Context Window Bar -->
       <div class="context-bar">
-        <div class="context-label start">Start (System)</div>
-        <div class="context-label end">End (Query)</div>
+        <div class="context-label start">
+          Start (System)
+        </div>
+        <div class="context-label end">
+          End (Query)
+        </div>
         
         <!-- Attention Heatmap Background -->
-        <div class="attention-heatmap"></div>
+        <div class="attention-heatmap" />
         
         <!-- Needle Marker -->
         <div 
           class="needle-marker"
           :style="{ left: `${needlePosition}%` }"
         >
-          <div class="needle-icon">📍</div>
-          <div class="needle-tooltip">关键事实</div>
+          <div class="needle-icon">
+            📍
+          </div>
+          <div class="needle-tooltip">
+            关键事实
+          </div>
         </div>
       </div>
 
       <!-- Probability Curve Chart -->
       <div class="chart-container">
-        <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="chart-svg">
+        <svg
+          viewBox="0 0 100 60"
+          preserveAspectRatio="none"
+          class="chart-svg"
+        >
           <!-- U-Curve Path -->
           <path 
             d="M 0 5 Q 50 55 100 5" 
@@ -52,21 +64,34 @@
             fill="var(--vp-c-brand)"
           />
         </svg>
-        <div class="chart-label y-axis">被记住的概率</div>
-        <div class="chart-label x-axis">在上下文里的位置</div>
+        <div class="chart-label y-axis">
+          被记住的概率
+        </div>
+        <div class="chart-label x-axis">
+          在上下文里的位置
+        </div>
       </div>
     </div>
 
     <div class="metrics-panel">
       <div class="metric-card">
-        <div class="metric-value" :class="getScoreClass(retrievalProb)">
+        <div
+          class="metric-value"
+          :class="getScoreClass(retrievalProb)"
+        >
           {{ retrievalProb.toFixed(1) }}%
         </div>
-        <div class="metric-label">检索成功率</div>
+        <div class="metric-label">
+          检索成功率
+        </div>
       </div>
       <div class="metric-card">
-        <div class="metric-value">{{ positionLabel }}</div>
-        <div class="metric-label">位置描述</div>
+        <div class="metric-value">
+          {{ positionLabel }}
+        </div>
+        <div class="metric-label">
+          位置描述
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceActionDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceActionDemo.vue
index 32aee20..2222320 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceActionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceActionDemo.vue
@@ -172,23 +172,47 @@ const getLayerStyle = (layerId) => {
     <div class="demo-grid">
       <!-- Left: Chat Simulator -->
       <div class="chat-panel">
-        <div class="panel-header">📱 用户视角 (Chat)</div>
+        <div class="panel-header">
+          📱 用户视角 (Chat)
+        </div>
         <div class="chat-window">
-          <div v-for="(msg, idx) in currentStep.layers.chat" :key="idx" class="chat-bubble" :class="msg.startsWith('User') ? 'user' : 'ai'">
+          <div
+            v-for="(msg, idx) in currentStep.layers.chat"
+            :key="idx"
+            class="chat-bubble"
+            :class="msg.startsWith('User') ? 'user' : 'ai'"
+          >
             {{ msg.split(': ')[1] || msg }}
           </div>
-          <div v-if="currentStep.user && !currentStep.layers.chat.some(m => m.includes(currentStep.user))" class="chat-bubble user pending">
+          <div
+            v-if="currentStep.user && !currentStep.layers.chat.some(m => m.includes(currentStep.user))"
+            class="chat-bubble user pending"
+          >
             {{ currentStep.user }}...
           </div>
-           <div v-if="currentStep.ai_thinking" class="chat-bubble thinking">
+          <div
+            v-if="currentStep.ai_thinking"
+            class="chat-bubble thinking"
+          >
             💭 {{ currentStep.ai_thinking }}
           </div>
         </div>
         <div class="controls">
-          <div class="step-info">步骤 {{ currentStepIndex + 1 }} / {{ currentScenario.steps.length }}</div>
+          <div class="step-info">
+            步骤 {{ currentStepIndex + 1 }} / {{ currentScenario.steps.length }}
+          </div>
           <div class="btn-group">
-            <button class="nav-btn" @click="prevStep" :disabled="currentStepIndex === 0">⬅️ 上一步</button>
-            <button class="nav-btn primary" @click="nextStep">
+            <button
+              class="nav-btn"
+              :disabled="currentStepIndex === 0"
+              @click="prevStep"
+            >
+              ⬅️ 上一步
+            </button>
+            <button
+              class="nav-btn primary"
+              @click="nextStep"
+            >
               {{ isLastStep ? '🔄 重新演示' : '下一步 ➡️' }}
             </button>
           </div>
@@ -197,9 +221,10 @@ const getLayerStyle = (layerId) => {
 
       <!-- Right: Memory Palace Internals -->
       <div class="palace-panel">
-        <div class="panel-header">🧠 AI 视角 (Context Construction)</div>
+        <div class="panel-header">
+          🧠 AI 视角 (Context Construction)
+        </div>
         <div class="context-visualizer">
-          
           <!-- Layer 1: Base -->
           <div class="layer-box base">
             <div class="layer-label">
@@ -207,7 +232,9 @@ const getLayerStyle = (layerId) => {
               <span class="title">Layer 1: 地基 (System)</span>
               <span class="badge">KV Cached</span>
             </div>
-            <div class="layer-content">{{ currentStep.layers.base }}</div>
+            <div class="layer-content">
+              {{ currentStep.layers.base }}
+            </div>
           </div>
 
           <!-- Layer 2: Task -->
@@ -217,7 +244,9 @@ const getLayerStyle = (layerId) => {
               <span class="title">Layer 2: 支柱 (Task)</span>
               <span class="badge">Pinned</span>
             </div>
-            <div class="layer-content">{{ currentStep.layers.task }}</div>
+            <div class="layer-content">
+              {{ currentStep.layers.task }}
+            </div>
           </div>
 
           <!-- Layer 3: Chat -->
@@ -228,24 +257,48 @@ const getLayerStyle = (layerId) => {
               <span class="badge">Sliding</span>
             </div>
             <div class="layer-content">
-              <div v-for="(m, i) in currentStep.layers.chat" :key="i" class="mini-line">{{ m }}</div>
-              <div v-if="currentStep.layers.chat.length === 0" class="empty-hint">(暂无对话历史)</div>
+              <div
+                v-for="(m, i) in currentStep.layers.chat"
+                :key="i"
+                class="mini-line"
+              >
+                {{ m }}
+              </div>
+              <div
+                v-if="currentStep.layers.chat.length === 0"
+                class="empty-hint"
+              >
+                (暂无对话历史)
+              </div>
             </div>
           </div>
 
           <!-- Layer 4: RAG -->
-          <div class="layer-box rag" :class="{ active: currentStep.layers.rag.length > 0 }">
+          <div
+            class="layer-box rag"
+            :class="{ active: currentStep.layers.rag.length > 0 }"
+          >
             <div class="layer-label">
               <span class="icon">📚</span> 
               <span class="title">Layer 4: 图书馆 (RAG)</span>
               <span class="badge ephemeral">Temp</span>
             </div>
             <div class="layer-content">
-              <div v-for="(r, i) in currentStep.layers.rag" :key="i" class="rag-item">{{ r }}</div>
-              <div v-if="currentStep.layers.rag.length === 0" class="empty-hint">(当前无需检索)</div>
+              <div
+                v-for="(r, i) in currentStep.layers.rag"
+                :key="i"
+                class="rag-item"
+              >
+                {{ r }}
+              </div>
+              <div
+                v-if="currentStep.layers.rag.length === 0"
+                class="empty-hint"
+              >
+                (当前无需检索)
+              </div>
             </div>
           </div>
-
         </div>
         
         <!-- Explanation Footer -->
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceDemo.vue
index 3a45af7..2591644 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/MemoryPalaceDemo.vue
@@ -59,7 +59,6 @@ const isComplete = computed(() => currentStep.value === 4)
 
 <template>
   <div class="memory-palace-demo">
-    
     <!-- Visual Area -->
     <div class="palace-container">
       <div class="palace-stack">
@@ -71,11 +70,20 @@ const isComplete = computed(() => currentStep.value === 4)
           <div class="layer-content">
             <span class="icon">{{ steps[3].icon }}</span>
             <div class="text">
-              <div class="layer-title">{{ steps[3].title }}</div>
-              <div class="layer-desc">{{ steps[3].desc }}</div>
+              <div class="layer-title">
+                {{ steps[3].title }}
+              </div>
+              <div class="layer-desc">
+                {{ steps[3].desc }}
+              </div>
             </div>
           </div>
-          <div class="layer-detail" v-if="currentStep >= 4">{{ steps[3].detail }}</div>
+          <div
+            v-if="currentStep >= 4"
+            class="layer-detail"
+          >
+            {{ steps[3].detail }}
+          </div>
         </div>
 
         <!-- Layer 3: Chat -->
@@ -86,11 +94,20 @@ const isComplete = computed(() => currentStep.value === 4)
           <div class="layer-content">
             <span class="icon">{{ steps[2].icon }}</span>
             <div class="text">
-              <div class="layer-title">{{ steps[2].title }}</div>
-              <div class="layer-desc">{{ steps[2].desc }}</div>
+              <div class="layer-title">
+                {{ steps[2].title }}
+              </div>
+              <div class="layer-desc">
+                {{ steps[2].desc }}
+              </div>
             </div>
           </div>
-          <div class="layer-detail" v-if="currentStep >= 3">{{ steps[2].detail }}</div>
+          <div
+            v-if="currentStep >= 3"
+            class="layer-detail"
+          >
+            {{ steps[2].detail }}
+          </div>
         </div>
 
         <!-- Layer 2: Task -->
@@ -101,11 +118,20 @@ const isComplete = computed(() => currentStep.value === 4)
           <div class="layer-content">
             <span class="icon">{{ steps[1].icon }}</span>
             <div class="text">
-              <div class="layer-title">{{ steps[1].title }}</div>
-              <div class="layer-desc">{{ steps[1].desc }}</div>
+              <div class="layer-title">
+                {{ steps[1].title }}
+              </div>
+              <div class="layer-desc">
+                {{ steps[1].desc }}
+              </div>
             </div>
           </div>
-          <div class="layer-detail" v-if="currentStep >= 2">{{ steps[1].detail }}</div>
+          <div
+            v-if="currentStep >= 2"
+            class="layer-detail"
+          >
+            {{ steps[1].detail }}
+          </div>
         </div>
 
         <!-- Layer 1: Base -->
@@ -116,15 +142,27 @@ const isComplete = computed(() => currentStep.value === 4)
           <div class="layer-content">
             <span class="icon">{{ steps[0].icon }}</span>
             <div class="text">
-              <div class="layer-title">{{ steps[0].title }}</div>
-              <div class="layer-desc">{{ steps[0].desc }}</div>
+              <div class="layer-title">
+                {{ steps[0].title }}
+              </div>
+              <div class="layer-desc">
+                {{ steps[0].desc }}
+              </div>
             </div>
           </div>
-          <div class="layer-detail" v-if="currentStep >= 1">{{ steps[0].detail }}</div>
+          <div
+            v-if="currentStep >= 1"
+            class="layer-detail"
+          >
+            {{ steps[0].detail }}
+          </div>
         </div>
         
         <!-- Empty State Placeholder -->
-        <div class="empty-placeholder" v-if="currentStep === 0">
+        <div
+          v-if="currentStep === 0"
+          class="empty-placeholder"
+        >
           🚧 空地：点击下方按钮开始建造记忆宫殿
         </div>
       </div>
@@ -135,28 +173,48 @@ const isComplete = computed(() => currentStep.value === 4)
       <div class="step-indicator">
         当前进度: {{ currentStep }}/4
       </div>
-      <button class="build-btn" @click="nextStep" :class="{ 'reset-mode': isComplete }">
+      <button
+        class="build-btn"
+        :class="{ 'reset-mode': isComplete }"
+        @click="nextStep"
+      >
         {{ isComplete ? '🔄 重置重建' : (currentStep === 0 ? '🏗️ 开始建造' : '➕ 添加下一层') }}
       </button>
     </div>
 
     <!-- Explanation Box -->
-    <div class="explanation-box" v-if="currentStep > 0">
-      <div class="exp-title">为什么这样设计？</div>
-      <div class="exp-content" v-if="currentStep === 1">
+    <div
+      v-if="currentStep > 0"
+      class="explanation-box"
+    >
+      <div class="exp-title">
+        为什么这样设计？
+      </div>
+      <div
+        v-if="currentStep === 1"
+        class="exp-content"
+      >
         **地基最稳**：把 System Prompt 放在最前面，利用 KV Cache 机制，让 AI "背下来"，后续请求**速度快且免费**。
       </div>
-      <div class="exp-content" v-if="currentStep === 2">
+      <div
+        v-if="currentStep === 2"
+        class="exp-content"
+      >
         **目标明确**：无论聊得多嗨，任务目标（如“写一个 Python 爬虫”）必须**钉死**，防止 AI 聊偏了。
       </div>
-      <div class="exp-content" v-if="currentStep === 3">
+      <div
+        v-if="currentStep === 3"
+        class="exp-content"
+      >
         **保持鲜活**：最近的对话最重要，用滑动窗口保留，**旧的自动忘掉**，给新信息腾地方。
       </div>
-      <div class="exp-content" v-if="currentStep === 4">
+      <div
+        v-if="currentStep === 4"
+        class="exp-content"
+      >
         **无限外脑**：遇到不懂的，不要瞎编，去“图书馆”查资料。**用完即走**，不占宝贵的脑容量。
       </div>
     </div>
-
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/RAGSimulationDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/RAGSimulationDemo.vue
index e70b68d..06a19a6 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/RAGSimulationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/RAGSimulationDemo.vue
@@ -86,7 +86,6 @@ const search = async () => {
 
 <template>
   <div class="rag-demo">
-    
     <!-- Step 1: User Input -->
     <div class="step-section input-section">
       <div class="step-label">
@@ -98,13 +97,13 @@ const search = async () => {
           v-model="query" 
           type="text" 
           placeholder="输入问题..."
-          @keyup.enter="search"
           :disabled="isSearching"
-        />
+          @keyup.enter="search"
+        >
         <button 
           class="action-btn" 
-          @click="search"
           :disabled="isSearching || !query"
+          @click="search"
         >
           {{ isSearching ? '检索中...' : '🚀 开始检索' }}
         </button>
@@ -112,18 +111,32 @@ const search = async () => {
     </div>
 
     <!-- Arrow Connection -->
-    <div class="flow-arrow" :class="{ active: currentStep >= 1 }">
-      <div class="line"></div>
-      <div class="icon">🔍</div>
+    <div
+      class="flow-arrow"
+      :class="{ active: currentStep >= 1 }"
+    >
+      <div class="line" />
+      <div class="icon">
+        🔍
+      </div>
     </div>
 
     <!-- Step 2: Library Scanning -->
-    <div class="step-section library-section" :class="{ 'is-scanning': currentStep === 1 }">
+    <div
+      class="step-section library-section"
+      :class="{ 'is-scanning': currentStep === 1 }"
+    >
       <div class="step-label">
         <span class="step-num">2</span>
         <span class="step-text">图书馆检索 (Retrieval)</span>
-        <span class="status-badge" v-if="currentStep === 1">正在扫描...</span>
-        <span class="status-badge success" v-if="currentStep >= 2">命中 {{ retrievedDocs.length }} 条</span>
+        <span
+          v-if="currentStep === 1"
+          class="status-badge"
+        >正在扫描...</span>
+        <span
+          v-if="currentStep >= 2"
+          class="status-badge success"
+        >命中 {{ retrievedDocs.length }} 条</span>
       </div>
       
       <div class="docs-grid">
@@ -139,26 +152,42 @@ const search = async () => {
           <div class="doc-header">
             <span class="doc-icon">📄</span>
             <span class="doc-title">{{ doc.title }}</span>
-            <span class="doc-score" v-if="currentStep >= 2 && doc.score > 0.6">
+            <span
+              v-if="currentStep >= 2 && doc.score > 0.6"
+              class="doc-score"
+            >
               {{ (doc.score * 100).toFixed(0) }}% 相关
             </span>
           </div>
-          <div class="doc-content">{{ doc.content }}</div>
+          <div class="doc-content">
+            {{ doc.content }}
+          </div>
           
           <!-- Visual effect for scanning -->
-          <div class="scan-line" v-if="currentStep === 1"></div>
+          <div
+            v-if="currentStep === 1"
+            class="scan-line"
+          />
         </div>
       </div>
     </div>
 
     <!-- Arrow Connection -->
-    <div class="flow-arrow" :class="{ active: currentStep >= 2 }">
-      <div class="line"></div>
-      <div class="icon">✂️ 复制粘贴</div>
+    <div
+      class="flow-arrow"
+      :class="{ active: currentStep >= 2 }"
+    >
+      <div class="line" />
+      <div class="icon">
+        ✂️ 复制粘贴
+      </div>
     </div>
 
     <!-- Step 3: Context Assembly -->
-    <div class="step-section context-section" :class="{ active: currentStep >= 3 }">
+    <div
+      class="step-section context-section"
+      :class="{ active: currentStep >= 3 }"
+    >
       <div class="step-label">
         <span class="step-num">3</span>
         <span class="step-text">最终上下文 (Final Prompt)</span>
@@ -170,14 +199,26 @@ const search = async () => {
           你是一个专业的 AI 助手。请基于下方【检索到的资料】回答用户的提问。
         </div>
         
-        <div class="retrieved-block" v-if="currentStep >= 2">
-          <div class="block-header">📚 检索到的资料 (Context)</div>
-          <div v-if="retrievedDocs.length > 0">
-             <div v-for="doc in retrievedDocs" :key="doc.id" class="retrieved-item">
-               {{ doc.content }}
-             </div>
+        <div
+          v-if="currentStep >= 2"
+          class="retrieved-block"
+        >
+          <div class="block-header">
+            📚 检索到的资料 (Context)
           </div>
-          <div v-else class="empty-state">
+          <div v-if="retrievedDocs.length > 0">
+            <div
+              v-for="doc in retrievedDocs"
+              :key="doc.id"
+              class="retrieved-item"
+            >
+              {{ doc.content }}
+            </div>
+          </div>
+          <div
+            v-else
+            class="empty-state"
+          >
             (未找到相关资料)
           </div>
         </div>
@@ -188,7 +229,6 @@ const search = async () => {
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/SelectiveContextDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/SelectiveContextDemo.vue
index b161371..f726228 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/SelectiveContextDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/SelectiveContextDemo.vue
@@ -19,7 +19,9 @@
           <span class="value">{{ totalMessages }}</span>
           <span class="label">现在一共记了几条</span>
         </div>
-        <div class="stat-divider">/</div>
+        <div class="stat-divider">
+          /
+        </div>
         <div class="stat-item">
           <span class="value">{{ maxSlots }}</span>
           <span class="label">黑板最多能记几条</span>
@@ -30,7 +32,7 @@
           class="usage-fill" 
           :style="{ width: `${(totalMessages / maxSlots) * 100}%` }"
           :class="{ full: totalMessages >= maxSlots }"
-        ></div>
+        />
       </div>
     </div>
 
@@ -54,15 +56,17 @@
                 <span class="role-badge">{{ msg.role }}</span>
                 <button 
                   class="pin-btn active" 
-                  @click="togglePin(msg)"
                   :disabled="msg.role === 'System'"
                   title="取消钉住"
+                  @click="togglePin(msg)"
                 >
                   <span v-if="msg.role === 'System'">🔒 系统信息固定在这</span>
                   <span v-else>📌 取消钉住</span>
                 </button>
               </div>
-              <div class="card-content">{{ msg.content }}</div>
+              <div class="card-content">
+                {{ msg.content }}
+              </div>
             </div>
           </transition-group>
         </div>
@@ -85,14 +89,23 @@
             >
               <div class="card-header">
                 <span class="role-badge">{{ msg.role }}</span>
-                <button class="pin-btn" @click="togglePin(msg)" title="把这条钉在黑板上">
+                <button
+                  class="pin-btn"
+                  title="把这条钉在黑板上"
+                  @click="togglePin(msg)"
+                >
                   📌 钉住这条
                 </button>
               </div>
-              <div class="card-content">{{ msg.content }}</div>
+              <div class="card-content">
+                {{ msg.content }}
+              </div>
             </div>
           </transition-group>
-          <div v-if="scrollingMessages.length === 0" class="empty-state">
+          <div
+            v-if="scrollingMessages.length === 0"
+            class="empty-state"
+          >
             这里是“普通对话区”，暂时还空着
           </div>
         </div>
@@ -103,16 +116,30 @@
       <div class="input-group">
         <input
           v-model="newMessage"
-          @keyup.enter="sendMessage"
           placeholder="在这里输入一条新的信息，比如“我叫小明”"
-        />
-        <button class="send-btn" @click="sendMessage" :disabled="!newMessage.trim()">
+          @keyup.enter="sendMessage"
+        >
+        <button
+          class="send-btn"
+          :disabled="!newMessage.trim()"
+          @click="sendMessage"
+        >
           添加到黑板
         </button>
       </div>
       <div class="presets">
-        <button class="preset-btn" @click="addPreset('我的名字叫 Alice。')">用户：我的名字叫 Alice</button>
-        <button class="preset-btn" @click="addPreset('系统密码是 1234。')">用户：系统密码是 1234</button>
+        <button
+          class="preset-btn"
+          @click="addPreset('我的名字叫 Alice。')"
+        >
+          用户：我的名字叫 Alice
+        </button>
+        <button
+          class="preset-btn"
+          @click="addPreset('系统密码是 1234。')"
+        >
+          用户：系统密码是 1234
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/context-engineering/SlidingWindowDemo.vue b/docs/.vitepress/theme/components/appendix/context-engineering/SlidingWindowDemo.vue
index 81f72ba..daa5dd8 100644
--- a/docs/.vitepress/theme/components/appendix/context-engineering/SlidingWindowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/context-engineering/SlidingWindowDemo.vue
@@ -19,10 +19,17 @@
         <span class="value">最多 {{ windowSize }} 条</span>
       </div>
       <div class="actions">
-        <button class="action-btn" @click="autoPlay" :disabled="isAutoPlaying">
+        <button
+          class="action-btn"
+          :disabled="isAutoPlaying"
+          @click="autoPlay"
+        >
           ▶ 自动演示
         </button>
-        <button class="action-btn outline" @click="reset">
+        <button
+          class="action-btn outline"
+          @click="reset"
+        >
           ↺ 重新开始
         </button>
       </div>
@@ -42,14 +49,23 @@
               class="message-bubble history"
               :class="msg.role.toLowerCase()"
             >
-              <div class="avatar">{{ msg.role === 'User' ? '👤' : '🤖' }}</div>
+              <div class="avatar">
+                {{ msg.role === 'User' ? '👤' : '🤖' }}
+              </div>
               <div class="content">
-                <div class="role-name">{{ msg.role }}</div>
-                <div class="text">{{ msg.content }}</div>
+                <div class="role-name">
+                  {{ msg.role }}
+                </div>
+                <div class="text">
+                  {{ msg.content }}
+                </div>
               </div>
             </div>
           </transition-group>
-          <div v-if="historyMessages.length === 0" class="empty-placeholder">
+          <div
+            v-if="historyMessages.length === 0"
+            class="empty-placeholder"
+          >
             这里暂时还没有被“挤出去”的对话
           </div>
         </div>
@@ -57,7 +73,7 @@
         <!-- Divider -->
         <div class="window-divider">
           <span>⬆ 窗口外（模型已经看不到）</span>
-          <div class="divider-line"></div>
+          <div class="divider-line" />
           <span>⬇ 窗口内（模型还能看到）</span>
         </div>
 
@@ -73,14 +89,23 @@
               class="message-bubble active"
               :class="msg.role.toLowerCase()"
             >
-              <div class="avatar">{{ msg.role === 'User' ? '👤' : '🤖' }}</div>
+              <div class="avatar">
+                {{ msg.role === 'User' ? '👤' : '🤖' }}
+              </div>
               <div class="content">
-                <div class="role-name">{{ msg.role }}</div>
-                <div class="text">{{ msg.content }}</div>
+                <div class="role-name">
+                  {{ msg.role }}
+                </div>
+                <div class="text">
+                  {{ msg.content }}
+                </div>
               </div>
             </div>
           </transition-group>
-          <div v-if="activeMessages.length === 0" class="empty-placeholder">
+          <div
+            v-if="activeMessages.length === 0"
+            class="empty-placeholder"
+          >
             从这里开始聊天，看看旧对话是怎么被“挤出去”的
           </div>
         </div>
@@ -90,11 +115,15 @@
     <div class="input-section">
       <input
         v-model="newMessage"
-        @keyup.enter="sendMessage"
         placeholder="在这里输入一条消息，然后点发送"
         :disabled="isAutoPlaying"
-      />
-      <button class="send-btn" @click="sendMessage" :disabled="!newMessage.trim() || isAutoPlaying">
+        @keyup.enter="sendMessage"
+      >
+      <button
+        class="send-btn"
+        :disabled="!newMessage.trim() || isAutoPlaying"
+        @click="sendMessage"
+      >
         发送消息
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
index 1d1bdc2..14f3b05 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue
@@ -18,17 +18,37 @@
         </div>
         <div class="card-content">
           <div class="data-rows">
-            <div v-for="i in 20" :key="i" class="data-row" :class="{ found: scanMode === 'found' && i === targetId }">
+            <div
+              v-for="i in 20"
+              :key="i"
+              class="data-row"
+              :class="{ found: scanMode === 'found' && i === targetId }"
+            >
               <span class="row-id">{{ String(i).padStart(3, '0') }}</span>
               <span class="row-name">用户{{ i }}</span>
             </div>
           </div>
           <div class="scan-info">
-            <p v-if="!scanMode">👆 点击"开始查找"看全表扫描有多慢</p>
-            <p v-else-if="scanMode === 'scanning'">正在扫描... 第 {{ scanCount }} 条</p>
-            <p v-else class="found">✅ 找到了！扫描了 {{ scanCount }} 条记录，耗时 {{ scanTime }}秒</p>
+            <p v-if="!scanMode">
+              👆 点击"开始查找"看全表扫描有多慢
+            </p>
+            <p v-else-if="scanMode === 'scanning'">
+              正在扫描... 第 {{ scanCount }} 条
+            </p>
+            <p
+              v-else
+              class="found"
+            >
+              ✅ 找到了！扫描了 {{ scanCount }} 条记录，耗时 {{ scanTime }}秒
+            </p>
           </div>
-          <button v-if="!scanMode" @click="startScan" class="btn">开始查找</button>
+          <button
+            v-if="!scanMode"
+            class="btn"
+            @click="startScan"
+          >
+            开始查找
+          </button>
         </div>
       </div>
 
@@ -40,15 +60,25 @@
         <div class="card-content">
           <div class="tree-structure">
             <div class="tree-level root">
-              <div class="node-label">根节点</div>
-              <div class="node">1-100</div>
+              <div class="node-label">
+                根节点
+              </div>
+              <div class="node">
+                1-100
+              </div>
             </div>
             <div class="tree-level intermediate">
-              <div class="node-label">中间节点</div>
-              <div class="node">1-10</div>
+              <div class="node-label">
+                中间节点
+              </div>
+              <div class="node">
+                1-10
+              </div>
             </div>
             <div class="tree-level leaf">
-              <div class="node-label">叶子节点</div>
+              <div class="node-label">
+                叶子节点
+              </div>
               <div
                 v-for="i in 10"
                 :key="i"
@@ -60,31 +90,62 @@
             </div>
           </div>
           <div class="index-info">
-            <p v-if="!indexMode">👆 点击"开始查找"看索引有多快</p>
-            <p v-else-if="indexMode === 'searching'">正在搜索... 第 {{ indexStep }} 步</p>
-            <p v-else class="found">✅ 找到了！只用了 {{ indexSteps.length }} 步，耗时 {{ indexTime }}秒</p>
+            <p v-if="!indexMode">
+              👆 点击"开始查找"看索引有多快
+            </p>
+            <p v-else-if="indexMode === 'searching'">
+              正在搜索... 第 {{ indexStep }} 步
+            </p>
+            <p
+              v-else
+              class="found"
+            >
+              ✅ 找到了！只用了 {{ indexSteps.length }} 步，耗时 {{ indexTime }}秒
+            </p>
           </div>
-          <button v-if="!indexMode" @click="startIndex" class="btn">开始查找</button>
+          <button
+            v-if="!indexMode"
+            class="btn"
+            @click="startIndex"
+          >
+            开始查找
+          </button>
         </div>
       </div>
     </div>
 
     <div class="stats-box">
       <div class="stat-item">
-        <div class="stat-label">数据量</div>
-        <div class="stat-value">100 万条</div>
+        <div class="stat-label">
+          数据量
+        </div>
+        <div class="stat-value">
+          100 万条
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-label">全表扫描</div>
-        <div class="stat-value slow">平均 50 万次比较</div>
+        <div class="stat-label">
+          全表扫描
+        </div>
+        <div class="stat-value slow">
+          平均 50 万次比较
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-label">B+ 树索引</div>
-        <div class="stat-value fast">仅 3 次比较</div>
+        <div class="stat-label">
+          B+ 树索引
+        </div>
+        <div class="stat-value fast">
+          仅 3 次比较
+        </div>
       </div>
       <div class="stat-item">
-        <div class="stat-label">速度提升</div>
-        <div class="stat-value highlight">10 万倍+</div>
+        <div class="stat-label">
+          速度提升
+        </div>
+        <div class="stat-value highlight">
+          10 万倍+
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
index 6220f72..1aa017b 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue
@@ -18,20 +18,39 @@
         :class="{ active: activeStage === stage.id }"
         @click="activeStage = activeStage === stage.id ? null : stage.id"
       >
-        <div class="stage-icon">{{ stage.icon }}</div>
-        <div class="stage-name">{{ stage.name }}</div>
-        <div class="stage-simple">{{ stage.simple }}</div>
-        <div class="stage-capacity">{{ stage.capacity }}</div>
-        <div v-if="i < stages.length - 1" class="arrow">→</div>
+        <div class="stage-icon">
+          {{ stage.icon }}
+        </div>
+        <div class="stage-name">
+          {{ stage.name }}
+        </div>
+        <div class="stage-simple">
+          {{ stage.simple }}
+        </div>
+        <div class="stage-capacity">
+          {{ stage.capacity }}
+        </div>
+        <div
+          v-if="i < stages.length - 1"
+          class="arrow"
+        >
+          →
+        </div>
       </div>
     </div>
 
-    <div v-if="!activeStage" class="hint-text">
+    <div
+      v-if="!activeStage"
+      class="hint-text"
+    >
       👆 点击上方任意阶段，查看详细特点
     </div>
 
     <Transition name="fade">
-      <div v-if="activeStage" class="stage-detail">
+      <div
+        v-if="activeStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ currentStage?.icon }}</span>
           <span class="detail-title">{{ currentStage?.name }}</span>
@@ -40,21 +59,42 @@
         <div class="detail-content">
           <div class="pros-cons">
             <div class="pros">
-              <div class="list-title">✅ 优点</div>
+              <div class="list-title">
+                ✅ 优点
+              </div>
               <ul>
-                <li v-for="pro in currentStage?.pros" :key="pro">{{ pro }}</li>
+                <li
+                  v-for="pro in currentStage?.pros"
+                  :key="pro"
+                >
+                  {{ pro }}
+                </li>
               </ul>
             </div>
             <div class="cons">
-              <div class="list-title">❌ 缺点</div>
+              <div class="list-title">
+                ❌ 缺点
+              </div>
               <ul>
-                <li v-for="con in currentStage?.cons" :key="con">{{ con }}</li>
+                <li
+                  v-for="con in currentStage?.cons"
+                  :key="con"
+                >
+                  {{ con }}
+                </li>
               </ul>
             </div>
           </div>
-          <div v-if="currentStage?.example" class="example-box">
-            <div class="example-label">🌰 举个例子：</div>
-            <div class="example-content">{{ currentStage?.example }}</div>
+          <div
+            v-if="currentStage?.example"
+            class="example-box"
+          >
+            <div class="example-label">
+              🌰 举个例子：
+            </div>
+            <div class="example-content">
+              {{ currentStage?.example }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseIndexDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseIndexDemo.vue
index ec56884..94defff 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseIndexDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseIndexDemo.vue
@@ -86,16 +86,16 @@ const startSearch = async () => {
         <button
           class="mode-btn"
           :class="{ active: mode === 'scan' }"
-          @click="mode = 'scan'"
           :disabled="isSearching"
+          @click="mode = 'scan'"
         >
           🐢 全表扫描 O(n)
         </button>
         <button
           class="mode-btn"
           :class="{ active: mode === 'index' }"
-          @click="mode = 'index'"
           :disabled="isSearching"
+          @click="mode = 'index'"
         >
           ⚡ 索引查找 O(log n)
         </button>
@@ -103,8 +103,8 @@ const startSearch = async () => {
 
       <button
         class="search-btn"
-        @click="startSearch"
         :disabled="isSearching"
+        @click="startSearch"
       >
         {{ isSearching ? '查找中...' : '开始查找' }}
       </button>
@@ -112,7 +112,10 @@ const startSearch = async () => {
 
     <div class="visualization-area">
       <!-- Full Scan Visualization -->
-      <div v-if="mode === 'scan'" class="view-container scan-view">
+      <div
+        v-if="mode === 'scan'"
+        class="view-container scan-view"
+      >
         <div class="grid">
           <div
             v-for="(item, index) in data"
@@ -133,7 +136,10 @@ const startSearch = async () => {
       </div>
 
       <!-- Index Visualization -->
-      <div v-else class="view-container index-view">
+      <div
+        v-else
+        class="view-container index-view"
+      >
         <div class="grid">
           <div
             v-for="(item, index) in data"
@@ -154,19 +160,31 @@ const startSearch = async () => {
       </div>
     </div>
 
-    <div class="stats-box" v-if="!isSearching && searchResult">
+    <div
+      v-if="!isSearching && searchResult"
+      class="stats-box"
+    >
       <div class="stat-item">
         <span class="stat-icon">🎯</span>
         <div class="stat-content">
-          <div class="stat-label">查找结果</div>
-          <div class="stat-value">{{ searchResult.value }}</div>
+          <div class="stat-label">
+            查找结果
+          </div>
+          <div class="stat-value">
+            {{ searchResult.value }}
+          </div>
         </div>
       </div>
       <div class="stat-item">
         <span class="stat-icon">{{ mode === 'scan' ? '🐢' : '⚡' }}</span>
         <div class="stat-content">
-          <div class="stat-label">操作次数</div>
-          <div class="stat-value" :class="mode">
+          <div class="stat-label">
+            操作次数
+          </div>
+          <div
+            class="stat-value"
+            :class="mode"
+          >
             {{ mode === 'scan' ? scanCurrentIndex + 1 : treeActiveNodes.length }} 次
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
index 64b0895..d8f92c6 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue
@@ -19,10 +19,18 @@
         </div>
         <div class="table-content">
           <div class="table-row header">
-            <div class="cell primary-key">🔑 user_id</div>
-            <div class="cell">name</div>
-            <div class="cell">phone</div>
-            <div class="cell">address</div>
+            <div class="cell primary-key">
+              🔑 user_id
+            </div>
+            <div class="cell">
+              name
+            </div>
+            <div class="cell">
+              phone
+            </div>
+            <div class="cell">
+              address
+            </div>
           </div>
           <div
             v-for="user in users"
@@ -32,18 +40,30 @@
             @mouseenter="highlightedUserId = user.user_id"
             @mouseleave="highlightedUserId = null"
           >
-            <div class="cell primary-key">{{ user.user_id }}</div>
-            <div class="cell">{{ user.name }}</div>
-            <div class="cell">{{ user.phone }}</div>
-            <div class="cell">{{ user.address }}</div>
+            <div class="cell primary-key">
+              {{ user.user_id }}
+            </div>
+            <div class="cell">
+              {{ user.name }}
+            </div>
+            <div class="cell">
+              {{ user.phone }}
+            </div>
+            <div class="cell">
+              {{ user.address }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="relation-arrow">
-        <div class="arrow-line"></div>
-        <div class="arrow-head">➤</div>
-        <div class="relation-label">user_id (外键) → user_id (主键)</div>
+        <div class="arrow-line" />
+        <div class="arrow-head">
+          ➤
+        </div>
+        <div class="relation-label">
+          user_id (外键) → user_id (主键)
+        </div>
       </div>
 
       <div class="table-card orders-table">
@@ -54,10 +74,18 @@
         </div>
         <div class="table-content">
           <div class="table-row header">
-            <div class="cell primary-key">🔑 order_id</div>
-            <div class="cell">book_name</div>
-            <div class="cell foreign-key">🔗 user_id</div>
-            <div class="cell">price</div>
+            <div class="cell primary-key">
+              🔑 order_id
+            </div>
+            <div class="cell">
+              book_name
+            </div>
+            <div class="cell foreign-key">
+              🔗 user_id
+            </div>
+            <div class="cell">
+              price
+            </div>
           </div>
           <div
             v-for="order in filteredOrders"
@@ -65,17 +93,27 @@
             class="table-row"
             :class="{ highlighted: highlightedUserId === order.user_id }"
           >
-            <div class="cell primary-key">{{ order.order_id }}</div>
-            <div class="cell">{{ order.book_name }}</div>
-            <div class="cell foreign-key">{{ order.user_id }}</div>
-            <div class="cell">{{ order.price }}</div>
+            <div class="cell primary-key">
+              {{ order.order_id }}
+            </div>
+            <div class="cell">
+              {{ order.book_name }}
+            </div>
+            <div class="cell foreign-key">
+              {{ order.user_id }}
+            </div>
+            <div class="cell">
+              {{ order.price }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="explanation-box">
-      <div class="explanation-title">💡 核心概念</div>
+      <div class="explanation-title">
+        💡 核心概念
+      </div>
       <div class="explanation-content">
         <p><strong>主键（Primary Key）</strong>：用户表的 <code>user_id</code> 是主键，唯一标识每个用户。</p>
         <p><strong>外键（Foreign Key）</strong>：订单表的 <code>user_id</code> 是外键，指向用户表的主键。</p>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
index 4388bb2..b89c737 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue
@@ -17,24 +17,44 @@
         class="pitfall-card"
         :class="{ expanded: expandedIndex === index }"
       >
-        <div class="pitfall-header" @click="expandedIndex = expandedIndex === index ? null : index">
-          <div class="pitfall-number">{{ index + 1 }}</div>
-          <div class="pitfall-title">{{ pitfall.title }}</div>
-          <div class="expand-icon">{{ expandedIndex === index ? '▼' : '▶' }}</div>
+        <div
+          class="pitfall-header"
+          @click="expandedIndex = expandedIndex === index ? null : index"
+        >
+          <div class="pitfall-number">
+            {{ index + 1 }}
+          </div>
+          <div class="pitfall-title">
+            {{ pitfall.title }}
+          </div>
+          <div class="expand-icon">
+            {{ expandedIndex === index ? '▼' : '▶' }}
+          </div>
         </div>
 
         <Transition name="expand">
-          <div v-if="expandedIndex === index" class="pitfall-content">
+          <div
+            v-if="expandedIndex === index"
+            class="pitfall-content"
+          >
             <div class="code-comparison">
               <div class="code-section wrong">
-                <div class="section-label">❌ 错误写法</div>
+                <div class="section-label">
+                  ❌ 错误写法
+                </div>
                 <pre><code>{{ pitfall.wrong }}</code></pre>
-                <div class="impact">⚠️ {{ pitfall.impact }}</div>
+                <div class="impact">
+                  ⚠️ {{ pitfall.impact }}
+                </div>
               </div>
               <div class="code-section correct">
-                <div class="section-label">✅ 正确写法</div>
+                <div class="section-label">
+                  ✅ 正确写法
+                </div>
                 <pre><code>{{ pitfall.correct }}</code></pre>
-                <div class="benefit">💡 {{ pitfall.benefit }}</div>
+                <div class="benefit">
+                  💡 {{ pitfall.benefit }}
+                </div>
               </div>
             </div>
             <div class="explanation">
@@ -46,9 +66,15 @@
     </div>
 
     <div class="tips-box">
-      <div class="tips-title">📝 优化建议清单</div>
+      <div class="tips-title">
+        📝 优化建议清单
+      </div>
       <div class="tips-list">
-        <div v-for="(tip, i) in tips" :key="i" class="tip-item">
+        <div
+          v-for="(tip, i) in tips"
+          :key="i"
+          class="tip-item"
+        >
           <span class="tip-icon">✓</span>
           <span class="tip-text">{{ tip }}</span>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/RelationalDataDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/RelationalDataDemo.vue
index fd4a912..165dba7 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/RelationalDataDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/RelationalDataDemo.vue
@@ -100,7 +100,10 @@ const setHover = (id) => {
 
     <div class="content-area">
       <!-- Excel Mode -->
-      <div v-if="activeTab === 'excel'" class="excel-view">
+      <div
+        v-if="activeTab === 'excel'"
+        class="excel-view"
+      >
         <div class="table-wrapper">
           <table>
             <thead>
@@ -109,18 +112,29 @@ const setHover = (id) => {
                 <th>日期</th>
                 <th>书名</th>
                 <th>价格</th>
-                <th class="highlight-col">购买者</th>
-                <th class="highlight-col">电话</th>
+                <th class="highlight-col">
+                  购买者
+                </th>
+                <th class="highlight-col">
+                  电话
+                </th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="row in excelData" :key="row.id">
+              <tr
+                v-for="row in excelData"
+                :key="row.id"
+              >
                 <td>{{ row.id }}</td>
                 <td>{{ row.date }}</td>
                 <td>{{ row.book }}</td>
                 <td>{{ row.price }}</td>
-                <td class="highlight-cell">{{ row.user }}</td>
-                <td class="highlight-cell">{{ row.phone }}</td>
+                <td class="highlight-cell">
+                  {{ row.user }}
+                </td>
+                <td class="highlight-cell">
+                  {{ row.phone }}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -132,11 +146,16 @@ const setHover = (id) => {
       </div>
 
       <!-- DB Mode -->
-      <div v-else class="db-view">
+      <div
+        v-else
+        class="db-view"
+      >
         <div class="db-layout">
           <!-- Users Table -->
           <div class="db-table users-table">
-            <div class="table-title">👥 用户表 (Users)</div>
+            <div class="table-title">
+              👥 用户表 (Users)
+            </div>
             <table>
               <thead>
                 <tr>
@@ -153,7 +172,9 @@ const setHover = (id) => {
                   @mouseenter="setHover(u.id)"
                   @mouseleave="setHover(null)"
                 >
-                  <td class="primary-key">{{ u.id }}</td>
+                  <td class="primary-key">
+                    {{ u.id }}
+                  </td>
                   <td>{{ u.name }}</td>
                   <td>{{ u.phone }}</td>
                 </tr>
@@ -163,20 +184,28 @@ const setHover = (id) => {
 
           <!-- Connection Lines (Visual only, simplified) -->
           <div class="connector">
-            <div class="arrow-label">🔗 外键关联</div>
-            <div class="arrow">⬅️ Join ➡️</div>
+            <div class="arrow-label">
+              🔗 外键关联
+            </div>
+            <div class="arrow">
+              ⬅️ Join ➡️
+            </div>
           </div>
 
           <!-- Orders Table -->
           <div class="db-table orders-table">
-            <div class="table-title">📦 订单表 (Orders)</div>
+            <div class="table-title">
+              📦 订单表 (Orders)
+            </div>
             <table>
               <thead>
                 <tr>
                   <th>订单号</th>
                   <th>书名</th>
                   <th>价格</th>
-                  <th class="highlight-col">用户 ID (外键)</th>
+                  <th class="highlight-col">
+                    用户 ID (外键)
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -190,7 +219,9 @@ const setHover = (id) => {
                   <td>{{ o.id }}</td>
                   <td>{{ o.book }}</td>
                   <td>{{ o.price }}</td>
-                  <td class="highlight-cell foreign-key">{{ o.user_id }}</td>
+                  <td class="highlight-cell foreign-key">
+                    {{ o.user_id }}
+                  </td>
                 </tr>
               </tbody>
             </table>
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/SqlPlaygroundDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/SqlPlaygroundDemo.vue
index 3f87b70..8b9b760 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/SqlPlaygroundDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/SqlPlaygroundDemo.vue
@@ -27,16 +27,24 @@
 
       <div class="content-area">
         <div class="example-section">
-          <div class="section-title">📝 示例 SQL</div>
+          <div class="section-title">
+            📝 示例 SQL
+          </div>
           <div class="code-block">
             <pre><code>{{ currentOperation.example }}</code></pre>
           </div>
         </div>
 
         <div class="explanation-section">
-          <div class="section-title">💡 逐词翻译</div>
+          <div class="section-title">
+            💡 逐词翻译
+          </div>
           <div class="explanation-list">
-            <div v-for="(item, i) in currentOperation.explanation" :key="i" class="explanation-item">
+            <div
+              v-for="(item, i) in currentOperation.explanation"
+              :key="i"
+              class="explanation-item"
+            >
               <span class="keyword">{{ item.keyword }}</span>
               <span class="meaning">{{ item.meaning }}</span>
             </div>
@@ -45,16 +53,30 @@
       </div>
 
       <div class="result-section">
-        <div class="section-title">📊 返回结果</div>
+        <div class="section-title">
+          📊 返回结果
+        </div>
         <div class="result-table">
           <div class="table-header">
-            <div v-for="col in currentOperation.result.columns" :key="col" class="header-cell">
+            <div
+              v-for="col in currentOperation.result.columns"
+              :key="col"
+              class="header-cell"
+            >
               {{ col }}
             </div>
           </div>
           <div class="table-body">
-            <div v-for="(row, i) in currentOperation.result.rows" :key="i" class="table-row">
-              <div v-for="(cell, j) in row" :key="j" class="table-cell">
+            <div
+              v-for="(row, i) in currentOperation.result.rows"
+              :key="i"
+              class="table-row"
+            >
+              <div
+                v-for="(cell, j) in row"
+                :key="j"
+                class="table-cell"
+              >
                 {{ cell }}
               </div>
             </div>
@@ -63,9 +85,12 @@
       </div>
     </div>
 
-    <div class="warning-box" v-if="currentOperation.warning">
+    <div
+      v-if="currentOperation.warning"
+      class="warning-box"
+    >
       <span class="icon">⚠️</span>
-      <span v-html="currentOperation.warning"></span>
+      <span v-html="currentOperation.warning" />
     </div>
 
     <div class="info-box">
diff --git a/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
index 35f756c..05dc75a 100644
--- a/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue
@@ -18,15 +18,26 @@
         :class="{ active: activeItem === item.key }"
         @click="activeItem = activeItem === item.key ? null : item.key"
       >
-        <div class="card-icon">{{ item.icon }}</div>
-        <div class="card-letter">{{ item.letter }}</div>
-        <div class="card-name">{{ item.name }}</div>
-        <div class="card-meaning">{{ item.meaning }}</div>
+        <div class="card-icon">
+          {{ item.icon }}
+        </div>
+        <div class="card-letter">
+          {{ item.letter }}
+        </div>
+        <div class="card-name">
+          {{ item.name }}
+        </div>
+        <div class="card-meaning">
+          {{ item.meaning }}
+        </div>
       </div>
     </div>
 
     <Transition name="fade">
-      <div v-if="activeItem" class="detail-panel">
+      <div
+        v-if="activeItem"
+        class="detail-panel"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ currentItem?.icon }}</span>
           <span class="detail-title">{{ currentItem?.name }} ({{ currentItem?.letter }})</span>
@@ -36,19 +47,28 @@
             <strong>含义：</strong>{{ currentItem?.explanation }}
           </div>
           <div class="example">
-            <div class="example-label">🌰 银行转账例子：</div>
-            <div class="example-text">{{ currentItem?.example }}</div>
+            <div class="example-label">
+              🌰 银行转账例子：
+            </div>
+            <div class="example-text">
+              {{ currentItem?.example }}
+            </div>
           </div>
         </div>
       </div>
     </Transition>
 
-    <div v-if="!activeItem" class="hint-text">
+    <div
+      v-if="!activeItem"
+      class="hint-text"
+    >
       👆 点击上方任意特性，查看详细解释
     </div>
 
     <div class="scenario-box">
-      <div class="scenario-title">🎯 12306 抢票场景</div>
+      <div class="scenario-title">
+        🎯 12306 抢票场景
+      </div>
       <div class="scenario-content">
         <p><strong>场景：</strong>用户 A 和 B 同时看到还剩 1 张票，同时点击购买。</p>
         <p><strong>没有事务：</strong>A 扣库存，B 也扣库存，同一张票卖给了两个人！</p>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
index 4dce125..7162e21 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
@@ -11,22 +11,34 @@
 
     <div class="content">
       <div class="flow">
-        <div class="step" :class="{ done: buildProgress >= 25 }">
+        <div
+          class="step"
+          :class="{ done: buildProgress >= 25 }"
+        >
           <span class="num">1</span>
           <span class="text">解析依赖</span>
         </div>
         <span class="arrow">→</span>
-        <div class="step" :class="{ done: buildProgress >= 50 }">
+        <div
+          class="step"
+          :class="{ done: buildProgress >= 50 }"
+        >
           <span class="num">2</span>
           <span class="text">编译转换</span>
         </div>
         <span class="arrow">→</span>
-        <div class="step" :class="{ done: buildProgress >= 75 }">
+        <div
+          class="step"
+          :class="{ done: buildProgress >= 75 }"
+        >
           <span class="num">3</span>
           <span class="text">打包压缩</span>
         </div>
         <span class="arrow">→</span>
-        <div class="step" :class="{ done: buildProgress >= 100 }">
+        <div
+          class="step"
+          :class="{ done: buildProgress >= 100 }"
+        >
           <span class="num">4</span>
           <span class="text">完成</span>
         </div>
@@ -34,12 +46,21 @@
 
       <div class="progress">
         <div class="bar">
-          <div class="fill" :style="{ width: `${buildProgress}%` }"></div>
+          <div
+            class="fill"
+            :style="{ width: `${buildProgress}%` }"
+          />
+        </div>
+        <div class="percent">
+          {{ buildProgress }}%
         </div>
-        <div class="percent">{{ buildProgress }}%</div>
       </div>
 
-      <button @click="startBuild" class="build-btn" :disabled="building">
+      <button
+        class="build-btn"
+        :disabled="building"
+        @click="startBuild"
+      >
         {{ building ? '构建中...' : '▶ 开始构建' }}
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
index 8a7db12..0cad01b 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
@@ -34,12 +34,20 @@
 
     <div class="compare">
       <div class="col">
-        <div class="title">手动部署</div>
-        <div class="item">❌ 容易出错</div>
+        <div class="title">
+          手动部署
+        </div>
+        <div class="item">
+          ❌ 容易出错
+        </div>
       </div>
       <div class="col highlight">
-        <div class="title">CI/CD</div>
-        <div class="item">✅ 快速可靠</div>
+        <div class="title">
+          CI/CD
+        </div>
+        <div class="item">
+          ✅ 快速可靠
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
index 7038288..bfed316 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
@@ -12,12 +12,20 @@
 
     <div class="compare">
       <div class="col">
-        <div class="title">HTTP</div>
-        <div class="item">❌ 明文传输</div>
+        <div class="title">
+          HTTP
+        </div>
+        <div class="item">
+          ❌ 明文传输
+        </div>
       </div>
       <div class="col highlight">
-        <div class="title">HTTPS</div>
-        <div class="item">✅ 加密传输</div>
+        <div class="title">
+          HTTPS
+        </div>
+        <div class="item">
+          ✅ 加密传输
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
index 4a94e0c..deb3371 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
@@ -26,7 +26,9 @@
     </div>
 
     <div class="backup">
-      <div class="label">上次备份：</div>
+      <div class="label">
+        上次备份：
+      </div>
       <span class="value">{{ lastBackup }}</span>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
index f2e0694..f2d495d 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
@@ -7,105 +7,250 @@
 
     <div class="demo-content">
       <div class="flow-section">
-        <div class="section-title">开发阶段</div>
+        <div class="section-title">
+          开发阶段
+        </div>
         <div class="service-flow">
-          <div class="flow-step" :class="{ active: currentStep >= 1 }" @mouseenter="(e) => showTooltip(e, 'git')" @mouseleave="hideTooltip">
-            <div class="step-title">Git</div>
-            <div class="tech-term">代码版本控制</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 1 }"
+            @mouseenter="(e) => showTooltip(e, 'git')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Git
+            </div>
+            <div class="tech-term">
+              代码版本控制
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 2 }" @mouseenter="(e) => showTooltip(e, 'cicd')" @mouseleave="hideTooltip">
-            <div class="step-title">CI/CD</div>
-            <div class="tech-term">自动化流水线</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 2 }"
+            @mouseenter="(e) => showTooltip(e, 'cicd')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              CI/CD
+            </div>
+            <div class="tech-term">
+              自动化流水线
+            </div>
           </div>
         </div>
       </div>
 
       <div class="flow-section">
-        <div class="section-title">构建阶段</div>
+        <div class="section-title">
+          构建阶段
+        </div>
         <div class="service-flow">
-          <div class="flow-step" :class="{ active: currentStep >= 3 }" @mouseenter="(e) => showTooltip(e, 'test')" @mouseleave="hideTooltip">
-            <div class="step-title">Test</div>
-            <div class="tech-term">自动化测试</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 3 }"
+            @mouseenter="(e) => showTooltip(e, 'test')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Test
+            </div>
+            <div class="tech-term">
+              自动化测试
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 4 }" @mouseenter="(e) => showTooltip(e, 'build')" @mouseleave="hideTooltip">
-            <div class="step-title">Build</div>
-            <div class="tech-term">编译打包</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 4 }"
+            @mouseenter="(e) => showTooltip(e, 'build')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Build
+            </div>
+            <div class="tech-term">
+              编译打包
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 5 }" @mouseenter="(e) => showTooltip(e, 'artifact')" @mouseleave="hideTooltip">
-            <div class="step-title">Artifact</div>
-            <div class="tech-term">构建产物存储</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 5 }"
+            @mouseenter="(e) => showTooltip(e, 'artifact')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Artifact
+            </div>
+            <div class="tech-term">
+              构建产物存储
+            </div>
           </div>
         </div>
       </div>
 
       <div class="flow-section">
-        <div class="section-title">部署阶段</div>
+        <div class="section-title">
+          部署阶段
+        </div>
         <div class="service-flow">
-          <div class="flow-step" :class="{ active: currentStep >= 6 }" @mouseenter="(e) => showTooltip(e, 'server')" @mouseleave="hideTooltip">
-            <div class="step-title">Server</div>
-            <div class="tech-term">服务器环境</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 6 }"
+            @mouseenter="(e) => showTooltip(e, 'server')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Server
+            </div>
+            <div class="tech-term">
+              服务器环境
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 7 }" @mouseenter="(e) => showTooltip(e, 'deploy')" @mouseleave="hideTooltip">
-            <div class="step-title">Deploy</div>
-            <div class="tech-term">部署应用</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 7 }"
+            @mouseenter="(e) => showTooltip(e, 'deploy')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Deploy
+            </div>
+            <div class="tech-term">
+              部署应用
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 8 }" @mouseenter="(e) => showTooltip(e, 'nginx')" @mouseleave="hideTooltip">
-            <div class="step-title">Nginx</div>
-            <div class="tech-term">反向代理</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 8 }"
+            @mouseenter="(e) => showTooltip(e, 'nginx')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Nginx
+            </div>
+            <div class="tech-term">
+              反向代理
+            </div>
           </div>
         </div>
       </div>
 
       <div class="flow-section">
-        <div class="section-title">网络配置</div>
+        <div class="section-title">
+          网络配置
+        </div>
         <div class="service-flow">
-          <div class="flow-step" :class="{ active: currentStep >= 9 }" @mouseenter="(e) => showTooltip(e, 'https')" @mouseleave="hideTooltip">
-            <div class="step-title">HTTPS</div>
-            <div class="tech-term">SSL证书</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 9 }"
+            @mouseenter="(e) => showTooltip(e, 'https')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              HTTPS
+            </div>
+            <div class="tech-term">
+              SSL证书
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 10 }" @mouseenter="(e) => showTooltip(e, 'cdn')" @mouseleave="hideTooltip">
-            <div class="step-title">CDN</div>
-            <div class="tech-term">内容分发加速</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 10 }"
+            @mouseenter="(e) => showTooltip(e, 'cdn')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              CDN
+            </div>
+            <div class="tech-term">
+              内容分发加速
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 11 }" @mouseenter="(e) => showTooltip(e, 'dns')" @mouseleave="hideTooltip">
-            <div class="step-title">DNS</div>
-            <div class="tech-term">域名解析</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 11 }"
+            @mouseenter="(e) => showTooltip(e, 'dns')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              DNS
+            </div>
+            <div class="tech-term">
+              域名解析
+            </div>
           </div>
         </div>
       </div>
 
       <div class="flow-section">
-        <div class="section-title">运维阶段</div>
+        <div class="section-title">
+          运维阶段
+        </div>
         <div class="service-flow">
-          <div class="flow-step" :class="{ active: currentStep >= 12 }" @mouseenter="(e) => showTooltip(e, 'monitor')" @mouseleave="hideTooltip">
-            <div class="step-title">Monitor</div>
-            <div class="tech-term">监控状态</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 12 }"
+            @mouseenter="(e) => showTooltip(e, 'monitor')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Monitor
+            </div>
+            <div class="tech-term">
+              监控状态
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 13 }" @mouseenter="(e) => showTooltip(e, 'log')" @mouseleave="hideTooltip">
-            <div class="step-title">Log</div>
-            <div class="tech-term">日志收集</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 13 }"
+            @mouseenter="(e) => showTooltip(e, 'log')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Log
+            </div>
+            <div class="tech-term">
+              日志收集
+            </div>
           </div>
           <span class="flow-arrow">→</span>
-          <div class="flow-step" :class="{ active: currentStep >= 14 }" @mouseenter="(e) => showTooltip(e, 'alert')" @mouseleave="hideTooltip">
-            <div class="step-title">Alert</div>
-            <div class="tech-term">告警通知</div>
+          <div
+            class="flow-step"
+            :class="{ active: currentStep >= 14 }"
+            @mouseenter="(e) => showTooltip(e, 'alert')"
+            @mouseleave="hideTooltip"
+          >
+            <div class="step-title">
+              Alert
+            </div>
+            <div class="tech-term">
+              告警通知
+            </div>
           </div>
         </div>
       </div>
 
       <Teleport to="body">
         <Transition name="fade">
-          <div v-if="tooltipVisible" class="tooltip-box" :style="tooltipStyle">
-            <div class="tooltip-title">{{ tooltipContent.title }}</div>
-            <div class="tooltip-content" v-html="tooltipContent.content"></div>
+          <div
+            v-if="tooltipVisible"
+            class="tooltip-box"
+            :style="tooltipStyle"
+          >
+            <div class="tooltip-title">
+              {{ tooltipContent.title }}
+            </div>
+            <div
+              class="tooltip-content"
+              v-html="tooltipContent.content"
+            />
           </div>
         </Transition>
       </Teleport>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
index 56b693a..817228a 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
@@ -11,17 +11,29 @@
     </div>
 
     <div class="scenarios">
-      <div class="scenario" :class="{ active: scenario === 'personal' }" @click="scenario = 'personal'">
+      <div
+        class="scenario"
+        :class="{ active: scenario === 'personal' }"
+        @click="scenario = 'personal'"
+      >
         <span class="name">个人博客</span>
         <span class="spec">1核 1G</span>
         <span class="cost">¥50/月</span>
       </div>
-      <div class="scenario" :class="{ active: scenario === 'small' }" @click="scenario = 'small'">
+      <div
+        class="scenario"
+        :class="{ active: scenario === 'small' }"
+        @click="scenario = 'small'"
+      >
         <span class="name">小型电商</span>
         <span class="spec">2核 4G</span>
         <span class="cost">¥300/月</span>
       </div>
-      <div class="scenario" :class="{ active: scenario === 'medium' }" @click="scenario = 'medium'">
+      <div
+        class="scenario"
+        :class="{ active: scenario === 'medium' }"
+        @click="scenario = 'medium'"
+      >
         <span class="name">中型应用</span>
         <span class="spec">4核 8G</span>
         <span class="cost">¥1000/月</span>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
index 5f3cc72..4c680bc 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/AssetFingerprintDemo.vue
@@ -20,15 +20,18 @@
       </div>
 
       <div class="controls">
-        <button class="control-btn" @click="simulateBuild">
+        <button
+          class="control-btn"
+          @click="simulateBuild"
+        >
           🔄 重新构建
         </button>
 
         <div class="toggle-group">
           <label class="toggle-label">
             <input
-              type="checkbox"
               v-model="showHash"
+              type="checkbox"
               @change="updateFileNames"
             >
             <span class="toggle-text">启用 Hash</span>
@@ -57,16 +60,25 @@
             }"
             @click="selectFile(file)"
           >
-            <div class="file-icon" :class="file.type">
+            <div
+              class="file-icon"
+              :class="file.type"
+            >
               {{ getFileIcon(file.type) }}
             </div>
 
             <div class="file-info">
               <div class="file-name-row">
                 <span class="file-base">{{ file.baseName }}</span>
-                <span v-if="showHash" class="file-hash">.{{ file.hash }}</span>
+                <span
+                  v-if="showHash"
+                  class="file-hash"
+                >.{{ file.hash }}</span>
                 <span class="file-ext">.{{ file.ext }}</span>
-                <span v-if="file.changed" class="changed-badge">更新</span>
+                <span
+                  v-if="file.changed"
+                  class="changed-badge"
+                >更新</span>
               </div>
               <div class="file-meta">
                 <span class="file-size">{{ formatSize(file.size) }}</span>
@@ -90,15 +102,15 @@
         <div class="cache-visualization">
           <div class="cache-legend">
             <div class="legend-item">
-              <span class="legend-color hit"></span>
+              <span class="legend-color hit" />
               <span>缓存命中 (Hash 匹配)</span>
             </div>
             <div class="legend-item">
-              <span class="legend-color miss"></span>
+              <span class="legend-color miss" />
               <span>缓存未命中 (Hash 变化)</span>
             </div>
             <div class="legend-item">
-              <span class="legend-color new"></span>
+              <span class="legend-color new" />
               <span>新文件 (无缓存)</span>
             </div>
           </div>
@@ -111,9 +123,18 @@
               :class="block.status"
               :style="{ animationDelay: `${index * 0.05}s` }"
             >
-              <div class="block-icon">{{ block.icon }}</div>
-              <div class="block-name">{{ block.name }}</div>
-              <div v-if="block.hash" class="block-hash">{{ block.hash }}</div>
+              <div class="block-icon">
+                {{ block.icon }}
+              </div>
+              <div class="block-name">
+                {{ block.name }}
+              </div>
+              <div
+                v-if="block.hash"
+                class="block-hash"
+              >
+                {{ block.hash }}
+              </div>
             </div>
           </div>
         </div>
@@ -122,16 +143,28 @@
           <h4>📊 缓存策略效果</h4>
           <div class="stats-grid">
             <div class="stat-item">
-              <div class="stat-value">{{ cacheHitRate }}%</div>
-              <div class="stat-label">缓存命中率</div>
+              <div class="stat-value">
+                {{ cacheHitRate }}%
+              </div>
+              <div class="stat-label">
+                缓存命中率
+              </div>
             </div>
             <div class="stat-item">
-              <div class="stat-value">{{ bandwidthSaved }}</div>
-              <div class="stat-label">节省带宽</div>
+              <div class="stat-value">
+                {{ bandwidthSaved }}
+              </div>
+              <div class="stat-label">
+                节省带宽
+              </div>
             </div>
             <div class="stat-item">
-              <div class="stat-value">{{ loadTime }}</div>
-              <div class="stat-label">平均加载时间</div>
+              <div class="stat-value">
+                {{ loadTime }}
+              </div>
+              <div class="stat-label">
+                平均加载时间
+              </div>
             </div>
           </div>
         </div>
@@ -139,16 +172,27 @@
     </div>
 
     <!-- 文件详情 -->
-    <div v-if="selectedFile" class="file-details">
+    <div
+      v-if="selectedFile"
+      class="file-details"
+    >
       <div class="detail-header">
-        <span class="detail-icon" :class="selectedFile.type">
+        <span
+          class="detail-icon"
+          :class="selectedFile.type"
+        >
           {{ getFileIcon(selectedFile.type) }}
         </span>
         <div class="detail-title-wrap">
           <span class="detail-title">{{ selectedFile.name }}</span>
           <span class="detail-path">dist/{{ selectedFile.path }}</span>
         </div>
-        <button class="close-btn" @click="selectedFile = null">×</button>
+        <button
+          class="close-btn"
+          @click="selectedFile = null"
+        >
+          ×
+        </button>
       </div>
 
       <div class="detail-content">
@@ -174,7 +218,10 @@
           </div>
         </div>
 
-        <div class="detail-section" v-if="selectedFile.dependencies?.length">
+        <div
+          v-if="selectedFile.dependencies?.length"
+          class="detail-section"
+        >
           <h4>🔗 依赖的模块 ({{ selectedFile.dependencies.length }})</h4>
           <div class="deps-tags">
             <span
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
index 5d0093c..826a6a8 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BuildPipelineDemo.vue
@@ -18,30 +18,53 @@
         :class="{ active: activeStage === stage.id }"
         @click="activeStage = activeStage === stage.id ? null : stage.id"
       >
-        <div class="stage-icon">{{ stage.icon }}</div>
-        <div class="stage-name">{{ stage.name }}</div>
-        <div class="stage-simple">{{ stage.simple }}</div>
-        <div v-if="i < stages.length - 1" class="arrow">→</div>
+        <div class="stage-icon">
+          {{ stage.icon }}
+        </div>
+        <div class="stage-name">
+          {{ stage.name }}
+        </div>
+        <div class="stage-simple">
+          {{ stage.simple }}
+        </div>
+        <div
+          v-if="i < stages.length - 1"
+          class="arrow"
+        >
+          →
+        </div>
       </div>
     </div>
 
     <Transition name="fade">
-      <div v-if="activeStage" class="stage-detail">
+      <div
+        v-if="activeStage"
+        class="stage-detail"
+      >
         <div class="detail-header">
           <span class="detail-icon">{{ currentStage?.icon }}</span>
           <span class="detail-title">{{ currentStage?.name }}</span>
         </div>
         <div class="detail-content">
-          <p class="detail-desc">{{ currentStage?.detailDesc }}</p>
+          <p class="detail-desc">
+            {{ currentStage?.detailDesc }}
+          </p>
           <div class="detail-example">
-            <div class="example-label">🌰 举个例子：</div>
-            <div class="example-content">{{ currentStage?.example }}</div>
+            <div class="example-label">
+              🌰 举个例子：
+            </div>
+            <div class="example-content">
+              {{ currentStage?.example }}
+            </div>
           </div>
         </div>
       </div>
     </Transition>
 
-    <div v-if="!activeStage" class="hint-text">
+    <div
+      v-if="!activeStage"
+      class="hint-text"
+    >
       👆 点击上方任意阶段，查看详细解释
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
index 15e14d1..32940b2 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/BundlerComparisonDemo.vue
@@ -32,9 +32,15 @@
     </div>
 
     <!-- 雷达图对比视图 -->
-    <div v-if="currentView === 'radar'" class="radar-view">
+    <div
+      v-if="currentView === 'radar'"
+      class="radar-view"
+    >
       <div class="radar-container">
-        <svg viewBox="0 0 400 400" class="radar-chart">
+        <svg
+          viewBox="0 0 400 400"
+          class="radar-chart"
+        >
           <!-- 背景网格 -->
           <g class="grid">
             <polygon
@@ -104,7 +110,10 @@
           @mouseenter="highlightedTool = tool.id"
           @mouseleave="highlightedTool = null"
         >
-          <span class="legend-color" :style="{ background: tool.borderColor }"></span>
+          <span
+            class="legend-color"
+            :style="{ background: tool.borderColor }"
+          />
           <span class="legend-name">{{ tool.name }}</span>
           <span class="legend-desc">{{ tool.shortDesc }}</span>
         </div>
@@ -112,21 +121,33 @@
     </div>
 
     <!-- 表格对比视图 -->
-    <div v-else-if="currentView === 'table'" class="table-view">
+    <div
+      v-else-if="currentView === 'table'"
+      class="table-view"
+    >
       <table class="comparison-table">
         <thead>
           <tr>
             <th>对比维度</th>
-            <th v-for="tool in bundlers" :key="tool.id">
+            <th
+              v-for="tool in bundlers"
+              :key="tool.id"
+            >
               <span class="tool-header">
-                <span class="tool-icon" :style="{ background: tool.borderColor }">{{ tool.icon }}</span>
+                <span
+                  class="tool-icon"
+                  :style="{ background: tool.borderColor }"
+                >{{ tool.icon }}</span>
                 {{ tool.name }}
               </span>
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(dim, dimIndex) in dimensions" :key="dim.key">
+          <tr
+            v-for="(dim, dimIndex) in dimensions"
+            :key="dim.key"
+          >
             <td class="dim-name">
               <span class="dim-icon">{{ dim.icon }}</span>
               {{ dim.name }}
@@ -143,7 +164,7 @@
                     width: `${tool.scores[dimIndex] * 10}%`,
                     background: tool.borderColor
                   }"
-                ></div>
+                />
                 <span class="score-value">{{ tool.scores[dimIndex] }}/10</span>
               </div>
             </td>
@@ -153,7 +174,10 @@
     </div>
 
     <!-- 场景推荐视图 -->
-    <div v-else-if="currentView === 'recommend'" class="recommend-view">
+    <div
+      v-else-if="currentView === 'recommend'"
+      class="recommend-view"
+    >
       <div class="scenario-list">
         <div
           v-for="scenario in scenarios"
@@ -173,7 +197,10 @@
             <span class="expand-icon">{{ expandedScenario === scenario.id ? '▼' : '▶' }}</span>
           </div>
 
-          <div v-if="expandedScenario === scenario.id" class="scenario-content">
+          <div
+            v-if="expandedScenario === scenario.id"
+            class="scenario-content"
+          >
             <div class="recommendation">
               <div class="best-choice">
                 <span class="choice-label">🏆 首选推荐</span>
@@ -184,11 +211,16 @@
                   >
                     {{ getTool(scenario.bestChoice).icon }} {{ getTool(scenario.bestChoice).name }}
                   </span>
-                  <p class="choice-reason">{{ scenario.bestReason }}</p>
+                  <p class="choice-reason">
+                    {{ scenario.bestReason }}
+                  </p>
                 </div>
               </div>
 
-              <div v-if="scenario.alternative" class="alternative">
+              <div
+                v-if="scenario.alternative"
+                class="alternative"
+              >
                 <span class="choice-label">🥈 备选方案</span>
                 <div class="choice-content">
                   <span
@@ -197,7 +229,9 @@
                   >
                     {{ getTool(scenario.alternative).icon }} {{ getTool(scenario.alternative).name }}
                   </span>
-                  <p class="choice-reason">{{ scenario.altReason }}</p>
+                  <p class="choice-reason">
+                    {{ scenario.altReason }}
+                  </p>
                 </div>
               </div>
             </div>
@@ -211,8 +245,8 @@
         <span class="icon">💡</span>
         <strong>选择建议：</strong>
         {{ currentView === 'radar' ? '雷达图展示了各工具在多个维度的能力分布，面积越大代表综合能力越强。' :
-           currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分，方便精确对比。' :
-           '根据你的项目类型和团队情况，选择最适合的工具往往比选择"最好"的工具更重要。' }}
+          currentView === 'table' ? '表格详细对比了各工具在每个维度的具体得分，方便精确对比。' :
+          '根据你的项目类型和团队情况，选择最适合的工具往往比选择"最好"的工具更重要。' }}
       </p>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
index 11ebf94..f109a59 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/CodeSplittingDemo.vue
@@ -15,7 +15,9 @@
     <div class="demo-content">
       <!-- 左侧：路由配置 -->
       <div class="routes-panel">
-        <div class="panel-title">🚦 路由配置</div>
+        <div class="panel-title">
+          🚦 路由配置
+        </div>
         <div class="routes-list">
           <div
             v-for="route in routes"
@@ -25,14 +27,27 @@
             @click="navigateTo(route)"
           >
             <div class="route-info">
-              <div class="route-path">{{ route.path }}</div>
-              <div class="route-name">{{ route.name }}</div>
+              <div class="route-path">
+                {{ route.path }}
+              </div>
+              <div class="route-name">
+                {{ route.name }}
+              </div>
             </div>
 
             <div class="route-load-info">
-              <span v-if="route.loading" class="loading-badge">加载中...</span>
-              <span v-else-if="route.loaded" class="loaded-badge">已缓存</span>
-              <span v-else class="lazy-badge">按需加载</span>
+              <span
+                v-if="route.loading"
+                class="loading-badge"
+              >加载中...</span>
+              <span
+                v-else-if="route.loaded"
+                class="loaded-badge"
+              >已缓存</span>
+              <span
+                v-else
+                class="lazy-badge"
+              >按需加载</span>
             </div>
 
             <div class="route-size">
@@ -44,7 +59,9 @@
 
       <!-- 右侧：加载可视化 -->
       <div class="load-panel">
-        <div class="panel-title">📊 加载分析</div>
+        <div class="panel-title">
+          📊 加载分析
+        </div>
 
         <div class="load-visualization">
           <!-- 初始加载 -->
@@ -91,7 +108,9 @@
               </div>
             </div>
 
-            <p class="lazy-tip">💡 点击上方模块可模拟按需加载</p>
+            <p class="lazy-tip">
+              💡 点击上方模块可模拟按需加载
+            </p>
           </div>
 
           <!-- 优化效果 -->
@@ -101,7 +120,9 @@
               <span class="summary-value original">{{ formatSize(totalSize) }}</span>
             </div>
 
-            <div class="summary-arrow">→</div>
+            <div class="summary-arrow">
+              →
+            </div>
 
             <div class="summary-item">
               <span class="summary-label">首屏加载</span>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
index cbdebdb..46822f2 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/DependencyGraphDemo.vue
@@ -7,31 +7,75 @@
     </div>
 
     <div class="graph-container">
-      <svg class="graph-svg" viewBox="0 0 500 300">
+      <svg
+        class="graph-svg"
+        viewBox="0 0 500 300"
+      >
         <defs>
-          <marker id="arrow" markerWidth="8" markerHeight="6" refX="18" refY="3" orient="auto">
-            <polygon points="0 0, 8 3, 0 6" fill="var(--vp-c-text-3)" />
+          <marker
+            id="arrow"
+            markerWidth="8"
+            markerHeight="6"
+            refX="18"
+            refY="3"
+            orient="auto"
+          >
+            <polygon
+              points="0 0, 8 3, 0 6"
+              fill="var(--vp-c-text-3)"
+            />
           </marker>
         </defs>
 
-        <line v-for="edge in edges" :key="edge.id"
-          :x1="getNode(edge.source).x" :y1="getNode(edge.source).y"
-          :x2="getNode(edge.target).x" :y2="getNode(edge.target).y"
-          stroke="var(--vp-c-text-3)" stroke-width="1.5" marker-end="url(#arrow)"
+        <line
+          v-for="edge in edges"
+          :key="edge.id"
+          :x1="getNode(edge.source).x"
+          :y1="getNode(edge.source).y"
+          :x2="getNode(edge.target).x"
+          :y2="getNode(edge.target).y"
+          stroke="var(--vp-c-text-3)"
+          stroke-width="1.5"
+          marker-end="url(#arrow)"
         />
 
-        <g v-for="node in nodes" :key="node.id" :transform="`translate(${node.x}, ${node.y})`">
-          <circle :r="node.r" :fill="node.color" stroke="white" stroke-width="2" />
-          <text y="4" text-anchor="middle" fill="white" font-size="12">{{ node.icon }}</text>
-          <text :y="node.r + 14" text-anchor="middle" fill="var(--vp-c-text-1)" font-size="10">{{ node.name }}</text>
+        <g
+          v-for="node in nodes"
+          :key="node.id"
+          :transform="`translate(${node.x}, ${node.y})`"
+        >
+          <circle
+            :r="node.r"
+            :fill="node.color"
+            stroke="white"
+            stroke-width="2"
+          />
+          <text
+            y="4"
+            text-anchor="middle"
+            fill="white"
+            font-size="12"
+          >{{ node.icon }}</text>
+          <text
+            :y="node.r + 14"
+            text-anchor="middle"
+            fill="var(--vp-c-text-1)"
+            font-size="10"
+          >{{ node.name }}</text>
         </g>
       </svg>
     </div>
 
     <div class="legend">
-      <div class="legend-item"><span class="dot entry"></span>入口文件</div>
-      <div class="legend-item"><span class="dot module"></span>模块</div>
-      <div class="legend-item"><span class="arrow">→</span>依赖关系</div>
+      <div class="legend-item">
+        <span class="dot entry" />入口文件
+      </div>
+      <div class="legend-item">
+        <span class="dot module" />模块
+      </div>
+      <div class="legend-item">
+        <span class="arrow">→</span>依赖关系
+      </div>
     </div>
 
     <div class="info-box">
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
index 3b2ee59..14ae6a8 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/HotReloadDemo.vue
@@ -21,7 +21,11 @@
             <span class="title">传统刷新</span>
           </div>
           <div class="card-body">
-            <div class="step" v-for="(step, i) in noHmrSteps" :key="i">
+            <div
+              v-for="(step, i) in noHmrSteps"
+              :key="i"
+              class="step"
+            >
               <span class="step-num">{{ i + 1 }}</span>
               <span class="step-text">{{ step }}</span>
             </div>
@@ -32,7 +36,9 @@
           </div>
         </div>
 
-        <div class="vs-divider">VS</div>
+        <div class="vs-divider">
+          VS
+        </div>
 
         <div class="method-card hmr">
           <div class="card-header">
@@ -40,7 +46,11 @@
             <span class="title">HMR 热更新</span>
           </div>
           <div class="card-body">
-            <div class="step" v-for="(step, i) in hmrSteps" :key="i">
+            <div
+              v-for="(step, i) in hmrSteps"
+              :key="i"
+              class="step"
+            >
               <span class="step-num">{{ i + 1 }}</span>
               <span class="step-text">{{ step }}</span>
             </div>
@@ -56,12 +66,21 @@
       <div class="flow-diagram">
         <h4>HMR 工作流程</h4>
         <div class="flow-steps">
-          <div class="flow-step" v-for="(step, i) in flowSteps" :key="i">
+          <div
+            v-for="(step, i) in flowSteps"
+            :key="i"
+            class="flow-step"
+          >
             <div class="step-box">
               <span class="step-icon">{{ step.icon }}</span>
               <span class="step-label">{{ step.label }}</span>
             </div>
-            <div v-if="i < flowSteps.length - 1" class="step-arrow">→</div>
+            <div
+              v-if="i < flowSteps.length - 1"
+              class="step-arrow"
+            >
+              →
+            </div>
           </div>
         </div>
       </div>
@@ -79,10 +98,16 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="tool in hmrTools" :key="tool.name">
+            <tr
+              v-for="tool in hmrTools"
+              :key="tool.name"
+            >
               <td><strong>{{ tool.name }}</strong></td>
               <td>
-                <span class="badge" :class="tool.supportClass">{{ tool.support }}</span>
+                <span
+                  class="badge"
+                  :class="tool.supportClass"
+                >{{ tool.support }}</span>
               </td>
               <td>{{ tool.speed }}</td>
               <td>{{ tool.feature }}</td>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
index ece51b1..5445d89 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/SourceMapDemo.vue
@@ -15,7 +15,9 @@
     <div class="demo-content">
       <div class="code-comparison">
         <div class="code-panel source">
-          <div class="panel-title">📄 源代码 (Source)</div>
+          <div class="panel-title">
+            📄 源代码 (Source)
+          </div>
           <pre class="code-block"><code>function calculateSum(a, b) {
   // 计算两个数的和
   const result = a + b;
@@ -28,14 +30,20 @@ console.log('总和:', sum);</code></pre>
         </div>
 
         <div class="mapping-arrows">
-          <div class="arrow" v-for="i in 5" :key="i">
-            <span class="line"></span>
+          <div
+            v-for="i in 5"
+            :key="i"
+            class="arrow"
+          >
+            <span class="line" />
             <span class="point">→</span>
           </div>
         </div>
 
         <div class="code-panel minified">
-          <div class="panel-title">🔧 压缩后 (Minified)</div>
+          <div class="panel-title">
+            🔧 压缩后 (Minified)
+          </div>
           <pre class="code-block"><code>function n(n,r){var t=n+r;return console.log("结果:",t),t}var r=n(10,20);console.log("总和:",r);
 // sourceMappingURL=app.js.map (指向映射文件)</code></pre>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
index ff003e9..17ab932 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-engineering/TreeShakingDemo.vue
@@ -20,7 +20,9 @@
     <div class="demo-content">
       <!-- 源代码面板 -->
       <div class="source-panel">
-        <div class="panel-title">📦 utils.js (源代码)</div>
+        <div class="panel-title">
+          📦 utils.js (源代码)
+        </div>
         <div class="code-block">
           <div
             v-for="(func, index) in functions"
@@ -36,7 +38,9 @@
 
       <!-- 控制面板 -->
       <div class="control-panel">
-        <div class="panel-title">🎛️ 选择需要的功能</div>
+        <div class="panel-title">
+          🎛️ 选择需要的功能
+        </div>
         <div class="function-toggles">
           <label
             v-for="(func, index) in functions"
@@ -44,7 +48,10 @@
             class="toggle-item"
             :class="{ active: func.used }"
           >
-            <input type="checkbox" v-model="func.used" />
+            <input
+              v-model="func.used"
+              type="checkbox"
+            >
             <span class="toggle-name">{{ func.name }}</span>
             <span class="toggle-size">{{ func.size }}B</span>
           </label>
@@ -55,7 +62,9 @@
             <span class="stat-label">原始大小</span>
             <span class="stat-value original">{{ originalSize }}B</span>
           </div>
-          <div class="stat-arrow">→</div>
+          <div class="stat-arrow">
+            →
+          </div>
           <div class="stat-item">
             <span class="stat-label">Tree Shaking 后</span>
             <span class="stat-value optimized">{{ optimizedSize }}B</span>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
index 78a29f7..b39aeec 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
@@ -21,8 +21,13 @@
           @click="activeEra = activeEra === era.id ? null : era.id"
         >
           <div class="era-marker">
-            <div class="era-dot">{{ era.emoji }}</div>
-            <div v-if="index < eras.length - 1" class="era-line"></div>
+            <div class="era-dot">
+              {{ era.emoji }}
+            </div>
+            <div
+              v-if="index < eras.length - 1"
+              class="era-line"
+            />
           </div>
 
           <div class="era-content">
@@ -31,12 +36,19 @@
               <span class="era-name">{{ era.name }}</span>
             </div>
 
-            <div class="era-brief">{{ era.brief }}</div>
+            <div class="era-brief">
+              {{ era.brief }}
+            </div>
 
             <Transition name="expand">
-              <div v-if="activeEra === era.id" class="era-detail">
+              <div
+                v-if="activeEra === era.id"
+                class="era-detail"
+              >
                 <div class="detail-section">
-                  <div class="section-title">🔑 关键技术</div>
+                  <div class="section-title">
+                    🔑 关键技术
+                  </div>
                   <div class="tech-tags">
                     <span
                       v-for="tech in era.technologies.slice(0, 5)"
@@ -46,9 +58,16 @@
                   </div>
                 </div>
 
-                <div class="detail-section" v-if="era.metaphor">
-                  <div class="section-title">💡 生活比喻</div>
-                  <div class="metaphor-box">{{ era.metaphor }}</div>
+                <div
+                  v-if="era.metaphor"
+                  class="detail-section"
+                >
+                  <div class="section-title">
+                    💡 生活比喻
+                  </div>
+                  <div class="metaphor-box">
+                    {{ era.metaphor }}
+                  </div>
                 </div>
               </div>
             </Transition>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
index 1e54c54..6064be9 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
@@ -25,41 +25,64 @@
         </button>
       </div>
 
-    <div class="comparison-container">
-      <!-- Imperative Side (jQuery) -->
-      <div class="side imperative-side">
-        <div class="side-header">
-          <span class="badge imperative">jQuery / 命令式</span>
-          <span class="sub-label">通俗说法: 告诉怎么做</span>
-        </div>
-
-        <div class="demo-area">
-          <!-- The UI -->
-          <div class="counter-ui">
-            <div class="display-value" id="jq-display">{{ jqCount }}</div>
-            <div class="meters">
-              <div class="meter-label">Progress:</div>
-              <div class="meter-bar">
-                <div
-                  class="meter-fill"
-                  id="jq-meter"
-                  :style="{ width: jqProgress + '%' }"
-                ></div>
-              </div>
-              <div class="status-text" id="jq-status">
-                {{ jqStatus }}
-              </div>
-            </div>
-            <div class="controls">
-              <button class="btn-decrement" @click="updateJq(-1)">-</button>
-              <button class="btn-increment" @click="updateJq(1)">+</button>
-            </div>
+      <div class="comparison-container">
+        <!-- Imperative Side (jQuery) -->
+        <div class="side imperative-side">
+          <div class="side-header">
+            <span class="badge imperative">jQuery / 命令式</span>
+            <span class="sub-label">通俗说法: 告诉怎么做</span>
           </div>
 
-          <!-- The Code -->
-          <div v-show="currentView === 'code'" class="code-panel">
-            <div class="code-block imperative-code">
-              <pre><code>function updateCounter(change) {
+          <div class="demo-area">
+            <!-- The UI -->
+            <div class="counter-ui">
+              <div
+                id="jq-display"
+                class="display-value"
+              >
+                {{ jqCount }}
+              </div>
+              <div class="meters">
+                <div class="meter-label">
+                  Progress:
+                </div>
+                <div class="meter-bar">
+                  <div
+                    id="jq-meter"
+                    class="meter-fill"
+                    :style="{ width: jqProgress + '%' }"
+                  />
+                </div>
+                <div
+                  id="jq-status"
+                  class="status-text"
+                >
+                  {{ jqStatus }}
+                </div>
+              </div>
+              <div class="controls">
+                <button
+                  class="btn-decrement"
+                  @click="updateJq(-1)"
+                >
+                  -
+                </button>
+                <button
+                  class="btn-increment"
+                  @click="updateJq(1)"
+                >
+                  +
+                </button>
+              </div>
+            </div>
+
+            <!-- The Code -->
+            <div
+              v-show="currentView === 'code'"
+              class="code-panel"
+            >
+              <div class="code-block imperative-code">
+                <pre><code>function updateCounter(change) {
   // 1. Get current value
   var count = parseInt($('#counter').text());
 
@@ -83,64 +106,89 @@
   // 6. Update DOM element 4...
   // Oops! Forgot to update the color indicator!
 }</code></pre>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="showAnalysis"
+            class="pain-points"
+          >
+            <div class="pain-point">
+              <span class="icon">⚠️</span>
+              <span>需要手动操作多个 DOM 元素</span>
+            </div>
+            <div class="pain-point">
+              <span class="icon">🐛</span>
+              <span>容易遗漏更新，导致界面不一致</span>
+            </div>
+            <div class="pain-point">
+              <span class="icon">🍝</span>
+              <span>逻辑分散，代码难以维护</span>
             </div>
           </div>
         </div>
 
-        <div class="pain-points" v-if="showAnalysis">
-          <div class="pain-point">
-            <span class="icon">⚠️</span>
-            <span>需要手动操作多个 DOM 元素</span>
-          </div>
-          <div class="pain-point">
-            <span class="icon">🐛</span>
-            <span>容易遗漏更新，导致界面不一致</span>
-          </div>
-          <div class="pain-point">
-            <span class="icon">🍝</span>
-            <span>逻辑分散，代码难以维护</span>
+        <!-- VS Divider -->
+        <div class="vs-divider">
+          <div class="vs-badge">
+            VS
           </div>
         </div>
-      </div>
 
-      <!-- VS Divider -->
-      <div class="vs-divider">
-        <div class="vs-badge">VS</div>
-      </div>
+        <!-- Declarative Side (Vue) -->
+        <div class="side declarative-side">
+          <div class="side-header">
+            <span class="badge declarative">Vue / 声明式</span>
+            <span class="sub-label">通俗说法: 告诉要什么</span>
+          </div>
 
-      <!-- Declarative Side (Vue) -->
-      <div class="side declarative-side">
-        <div class="side-header">
-          <span class="badge declarative">Vue / 声明式</span>
-          <span class="sub-label">通俗说法: 告诉要什么</span>
-        </div>
-
-        <div class="demo-area">
-          <!-- The UI -->
-          <div class="counter-ui">
-            <div class="display-value">{{ vueCount }}</div>
-            <div class="meters">
-              <div class="meter-label">Progress:</div>
-              <div class="meter-bar">
+          <div class="demo-area">
+            <!-- The UI -->
+            <div class="counter-ui">
+              <div class="display-value">
+                {{ vueCount }}
+              </div>
+              <div class="meters">
+                <div class="meter-label">
+                  Progress:
+                </div>
+                <div class="meter-bar">
+                  <div
+                    class="meter-fill"
+                    :style="{ width: vueProgress + '%' }"
+                  />
+                </div>
                 <div
-                  class="meter-fill"
-                  :style="{ width: vueProgress + '%' }"
-                ></div>
+                  class="status-text"
+                  :class="{ warning: vueCount > 5 }"
+                >
+                  {{ vueStatus }}
+                </div>
               </div>
-              <div class="status-text" :class="{ warning: vueCount > 5 }">
-                {{ vueStatus }}
+              <div class="controls">
+                <button
+                  class="btn-decrement"
+                  @click="vueCount--"
+                >
+                  -
+                </button>
+                <button
+                  class="btn-increment"
+                  @click="vueCount++"
+                >
+                  +
+                </button>
               </div>
             </div>
-            <div class="controls">
-              <button class="btn-decrement" @click="vueCount--">-</button>
-              <button class="btn-increment" @click="vueCount++">+</button>
-            </div>
-          </div>
 
-          <!-- The Code -->
-          <div v-show="currentView === 'code'" class="code-panel">
-            <div class="code-block declarative-code">
-              <pre><code>export default {
+            <!-- The Code -->
+            <div
+              v-show="currentView === 'code'"
+              class="code-panel"
+            >
+              <div class="code-block declarative-code">
+                <pre><code>export default {
   data() {
     return {
       count: 0
@@ -166,33 +214,39 @@
     {{ status }}
   &lt;/div&gt;
 &lt;/template&gt;</code></pre>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="showAnalysis"
+            class="benefits"
+          >
+            <div class="benefit">
+              <span class="icon">✅</span>
+              <span>只关注数据，不用手动操作 DOM</span>
+            </div>
+            <div class="benefit">
+              <span class="icon">🔄</span>
+              <span>数据变化自动同步到所有相关视图</span>
+            </div>
+            <div class="benefit">
+              <span class="icon">🧩</span>
+              <span>代码结构清晰，易于维护</span>
             </div>
           </div>
         </div>
-
-        <div class="benefits" v-if="showAnalysis">
-          <div class="benefit">
-            <span class="icon">✅</span>
-            <span>只关注数据，不用手动操作 DOM</span>
-          </div>
-          <div class="benefit">
-            <span class="icon">🔄</span>
-            <span>数据变化自动同步到所有相关视图</span>
-          </div>
-          <div class="benefit">
-            <span class="icon">🧩</span>
-            <span>代码结构清晰，易于维护</span>
-          </div>
-        </div>
       </div>
-    </div>
 
-    <!-- 底部控制 -->
-    <div class="demo-controls">
-      <button class="toggle-btn" @click="showAnalysis = !showAnalysis">
-        {{ showAnalysis ? '隐藏' : '显示' }}对比分析
-      </button>
-    </div>
+      <!-- 底部控制 -->
+      <div class="demo-controls">
+        <button
+          class="toggle-btn"
+          @click="showAnalysis = !showAnalysis"
+        >
+          {{ showAnalysis ? '隐藏' : '显示' }}对比分析
+        </button>
+      </div>
     </div>
 
     <!-- 信息框 -->
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
index 7d66309..989ddb1 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
@@ -52,8 +52,12 @@
                 class="step-item"
                 :class="{ active: index === currentStep }"
               >
-                <div class="step-number">{{ index + 1 }}</div>
-                <div class="step-text">{{ step }}</div>
+                <div class="step-number">
+                  {{ index + 1 }}
+                </div>
+                <div class="step-text">
+                  {{ step }}
+                </div>
               </div>
             </div>
           </div>
@@ -64,7 +68,10 @@
           <div class="ledger-header">
             <span class="ledger-icon">📒</span>
             <span class="ledger-title">今日账本</span>
-            <span class="ledger-status" :class="mode">{{ ledgerStatus }}</span>
+            <span
+              class="ledger-status"
+              :class="mode"
+            >{{ ledgerStatus }}</span>
           </div>
 
           <div class="ledger-content">
@@ -105,8 +112,8 @@
       <div class="action-buttons">
         <button
           class="btn btn-primary"
-          @click="processOrder"
           :disabled="isProcessing || allCompleted"
+          @click="processOrder"
         >
           {{ isProcessing ? '处理中...' : allCompleted ? '今日完成！' : '下一道菜' }}
         </button>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/RenderingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/RenderingStrategyDemo.vue
index 25f33a8..8cb206f 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/RenderingStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/RenderingStrategyDemo.vue
@@ -6,8 +6,12 @@
   <div class="rendering-demo">
     <!-- 故事引入 -->
     <div class="story-box">
-      <div class="story-emoji">🍽️👨‍🍳⚡</div>
-      <h4 class="story-title">小美的餐厅</h4>
+      <div class="story-emoji">
+        🍽️👨‍🍳⚡
+      </div>
+      <h4 class="story-title">
+        小美的餐厅
+      </h4>
       <p class="story-text">
         小美开了家餐厅，有三种上菜方式：<br>
         <strong>CSR（客户端渲染）</strong>：给你半成品食材包，你自己做 <br>
@@ -35,56 +39,124 @@
     <div class="demo-container">
       <!-- 客户区 -->
       <div class="customer-area">
-        <div class="customer-icon">🧑‍🦰</div>
-        <div class="customer-label">用户（浏览器）</div>
+        <div class="customer-icon">
+          🧑‍🦰
+        </div>
+        <div class="customer-label">
+          用户（浏览器）
+        </div>
         <div class="table">
-          <div v-if="activeStrategy === 'csr'" class="table-content">
+          <div
+            v-if="activeStrategy === 'csr'"
+            class="table-content"
+          >
             <div class="ingredients-pack">
-              <div class="pack-label">📦 食材包</div>
-              <div class="pack-content">
-                <div class="ingredient">🥬 菜叶</div>
-                <div class="ingredient">🥩 肉片</div>
-                <div class="ingredient">🧂 调料</div>
+              <div class="pack-label">
+                📦 食材包
+              </div>
+              <div class="pack-content">
+                <div class="ingredient">
+                  🥬 菜叶
+                </div>
+                <div class="ingredient">
+                  🥩 肉片
+                </div>
+                <div class="ingredient">
+                  🧂 调料
+                </div>
+              </div>
+              <div class="instruction">
+                ↑ 请自己烹饪
               </div>
-              <div class="instruction">↑ 请自己烹饪</div>
             </div>
           </div>
-          <div v-else class="table-content ready">
-            <div class="dish">{{ currentStrategy.dish }}</div>
-            <div class="dish-status">{{ currentStrategy.readyStatus }}</div>
+          <div
+            v-else
+            class="table-content ready"
+          >
+            <div class="dish">
+              {{ currentStrategy.dish }}
+            </div>
+            <div class="dish-status">
+              {{ currentStrategy.readyStatus }}
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 传输区 -->
       <div class="transfer-area">
-        <div v-if="isAnimating" class="transfer-animation">
-          <div class="transfer-content">{{ currentStrategy.transferItem }}</div>
-          <div class="transfer-arrow">→</div>
+        <div
+          v-if="isAnimating"
+          class="transfer-animation"
+        >
+          <div class="transfer-content">
+            {{ currentStrategy.transferItem }}
+          </div>
+          <div class="transfer-arrow">
+            →
+          </div>
         </div>
-        <div v-else class="transfer-info">
-          <div class="info-label">{{ currentStrategy.transferLabel }}</div>
+        <div
+          v-else
+          class="transfer-info"
+        >
+          <div class="info-label">
+            {{ currentStrategy.transferLabel }}
+          </div>
         </div>
       </div>
 
       <!-- 厨房/服务器 -->
       <div class="kitchen-area">
-        <div class="kitchen-icon">👨‍🍳</div>
-        <div class="kitchen-label">{{ currentStrategy.serverLabel }}</div>
+        <div class="kitchen-icon">
+          👨‍🍳
+        </div>
+        <div class="kitchen-label">
+          {{ currentStrategy.serverLabel }}
+        </div>
         <div class="kitchen-content">
-          <div v-if="activeStrategy === 'csr'" class="server-station">
-            <div class="station-icon">📡</div>
-            <div class="station-label">配送站</div>
-            <div class="station-desc">只管配送，不做菜</div>
+          <div
+            v-if="activeStrategy === 'csr'"
+            class="server-station"
+          >
+            <div class="station-icon">
+              📡
+            </div>
+            <div class="station-label">
+              配送站
+            </div>
+            <div class="station-desc">
+              只管配送，不做菜
+            </div>
           </div>
-          <div v-else-if="activeStrategy === 'ssr'" class="server-kitchen">
-            <div class="chef-action">{{ chefAction }}</div>
-            <div class="cooking-pot" v-if="isCooking">🍳</div>
+          <div
+            v-else-if="activeStrategy === 'ssr'"
+            class="server-kitchen"
+          >
+            <div class="chef-action">
+              {{ chefAction }}
+            </div>
+            <div
+              v-if="isCooking"
+              class="cooking-pot"
+            >
+              🍳
+            </div>
           </div>
-          <div v-else class="server-cabinet">
-            <div class="cabinet-icon">🗄️</div>
-            <div class="cabinet-label">保温柜</div>
-            <div class="cabinet-desc">{{ currentStrategy.cabinetDesc }}</div>
+          <div
+            v-else
+            class="server-cabinet"
+          >
+            <div class="cabinet-icon">
+              🗄️
+            </div>
+            <div class="cabinet-label">
+              保温柜
+            </div>
+            <div class="cabinet-desc">
+              {{ currentStrategy.cabinetDesc }}
+            </div>
           </div>
         </div>
       </div>
@@ -93,96 +165,201 @@
     <!-- 性能指标 -->
     <div class="metrics-panel">
       <div class="metric-item">
-        <div class="metric-label">首屏速度</div>
-        <div class="metric-bar">
-          <div class="metric-fill" :style="{ width: currentStrategy.firstScreenScore + '%', background: currentStrategy.color }"></div>
+        <div class="metric-label">
+          首屏速度
+        </div>
+        <div class="metric-bar">
+          <div
+            class="metric-fill"
+            :style="{ width: currentStrategy.firstScreenScore + '%', background: currentStrategy.color }"
+          />
+        </div>
+        <div
+          class="metric-value"
+          :style="{ color: currentStrategy.color }"
+        >
+          {{ currentStrategy.firstScreenText }}
         </div>
-        <div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.firstScreenText }}</div>
       </div>
       <div class="metric-item">
-        <div class="metric-label">交互体验</div>
-        <div class="metric-bar">
-          <div class="metric-fill" :style="{ width: currentStrategy.interactionScore + '%', background: currentStrategy.color }"></div>
+        <div class="metric-label">
+          交互体验
+        </div>
+        <div class="metric-bar">
+          <div
+            class="metric-fill"
+            :style="{ width: currentStrategy.interactionScore + '%', background: currentStrategy.color }"
+          />
+        </div>
+        <div
+          class="metric-value"
+          :style="{ color: currentStrategy.color }"
+        >
+          {{ currentStrategy.interactionText }}
         </div>
-        <div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.interactionText }}</div>
       </div>
       <div class="metric-item">
-        <div class="metric-label">SEO 友好度</div>
-        <div class="metric-bar">
-          <div class="metric-fill" :style="{ width: currentStrategy.seoScore + '%', background: currentStrategy.color }"></div>
+        <div class="metric-label">
+          SEO 友好度
+        </div>
+        <div class="metric-bar">
+          <div
+            class="metric-fill"
+            :style="{ width: currentStrategy.seoScore + '%', background: currentStrategy.color }"
+          />
+        </div>
+        <div
+          class="metric-value"
+          :style="{ color: currentStrategy.color }"
+        >
+          {{ currentStrategy.seoText }}
         </div>
-        <div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.seoText }}</div>
       </div>
     </div>
 
     <!-- 操作按钮 -->
     <div class="controls">
-      <button class="btn btn-primary" @click="startDemo" :disabled="isAnimating">
+      <button
+        class="btn btn-primary"
+        :disabled="isAnimating"
+        @click="startDemo"
+      >
         {{ isAnimating ? '演示中...' : '开始演示' }}
       </button>
-      <button class="btn btn-secondary" @click="resetDemo">
+      <button
+        class="btn btn-secondary"
+        @click="resetDemo"
+      >
         重置
       </button>
     </div>
 
     <!-- 详细对比表 -->
     <div class="comparison-table">
-      <div class="table-title">📊 三种渲染方式详细对比</div>
+      <div class="table-title">
+        📊 三种渲染方式详细对比
+      </div>
       <div class="table-content">
         <div class="comparison-row header">
-          <div class="col-feature">特点</div>
-          <div class="col-csr">CSR</div>
-          <div class="col-ssr">SSR</div>
-          <div class="col-ssg">SSG</div>
+          <div class="col-feature">
+            特点
+          </div>
+          <div class="col-csr">
+            CSR
+          </div>
+          <div class="col-ssr">
+            SSR
+          </div>
+          <div class="col-ssg">
+            SSG
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">比喻</div>
-          <div class="col-csr">给半成品食材包，自己做</div>
-          <div class="col-ssr">厨房做好菜端给你</div>
-          <div class="col-ssg">提前做好放保温柜</div>
+          <div class="col-feature">
+            比喻
+          </div>
+          <div class="col-csr">
+            给半成品食材包，自己做
+          </div>
+          <div class="col-ssr">
+            厨房做好菜端给你
+          </div>
+          <div class="col-ssg">
+            提前做好放保温柜
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">首屏速度</div>
-          <div class="col-csr">慢（要等 JS）</div>
-          <div class="col-ssr">快（直接给 HTML）</div>
-          <div class="col-ssg">最快（直接给 HTML）</div>
+          <div class="col-feature">
+            首屏速度
+          </div>
+          <div class="col-csr">
+            慢（要等 JS）
+          </div>
+          <div class="col-ssr">
+            快（直接给 HTML）
+          </div>
+          <div class="col-ssg">
+            最快（直接给 HTML）
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">交互体验</div>
-          <div class="col-csr">流畅（已在浏览器）</div>
-          <div class="col-ssr">较流畅（交互仍需 JS）</div>
-          <div class="col-ssg">较流畅（交互仍需 JS）</div>
+          <div class="col-feature">
+            交互体验
+          </div>
+          <div class="col-csr">
+            流畅（已在浏览器）
+          </div>
+          <div class="col-ssr">
+            较流畅（交互仍需 JS）
+          </div>
+          <div class="col-ssg">
+            较流畅（交互仍需 JS）
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">SEO 友好度</div>
-          <div class="col-csr">差（搜不到内容）</div>
-          <div class="col-ssr">好（完整 HTML）</div>
-          <div class="col-ssg">好（完整 HTML）</div>
+          <div class="col-feature">
+            SEO 友好度
+          </div>
+          <div class="col-csr">
+            差（搜不到内容）
+          </div>
+          <div class="col-ssr">
+            好（完整 HTML）
+          </div>
+          <div class="col-ssg">
+            好（完整 HTML）
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">服务器压力</div>
-          <div class="col-csr">小（只传 JS）</div>
-          <div class="col-ssr">大（每次都渲染）</div>
-          <div class="col-ssg">最小（预渲染好）</div>
+          <div class="col-feature">
+            服务器压力
+          </div>
+          <div class="col-csr">
+            小（只传 JS）
+          </div>
+          <div class="col-ssr">
+            大（每次都渲染）
+          </div>
+          <div class="col-ssg">
+            最小（预渲染好）
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">适合场景</div>
-          <div class="col-csr">后台系统、工具应用</div>
-          <div class="col-ssr">新闻网站、电商首页</div>
-          <div class="col-ssg">博客、文档站</div>
+          <div class="col-feature">
+            适合场景
+          </div>
+          <div class="col-csr">
+            后台系统、工具应用
+          </div>
+          <div class="col-ssr">
+            新闻网站、电商首页
+          </div>
+          <div class="col-ssg">
+            博客、文档站
+          </div>
         </div>
         <div class="comparison-row">
-          <div class="col-feature">代表框架</div>
-          <div class="col-csr">React SPA、Vue SPA</div>
-          <div class="col-ssr">Next.js SSR、Nuxt SSR</div>
-          <div class="col-ssg">Next.js SSG、Nuxt SSG</div>
+          <div class="col-feature">
+            代表框架
+          </div>
+          <div class="col-csr">
+            React SPA、Vue SPA
+          </div>
+          <div class="col-ssr">
+            Next.js SSR、Nuxt SSR
+          </div>
+          <div class="col-ssg">
+            Next.js SSG、Nuxt SSG
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 核心要点 -->
     <div class="key-takeaway">
-      <div class="takeaway-icon">🎯</div>
+      <div class="takeaway-icon">
+        🎯
+      </div>
       <div class="takeaway-content">
         <strong>如何选择？</strong><br>
         <strong>CSR</strong>：适合需要复杂交互、不关心 SEO 的应用（如后台管理系统）<br>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
index 032043b..36563bf 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/ResponsiveGridDemo.vue
@@ -6,8 +6,12 @@
   <div class="magic-closet">
     <!-- 故事开头 -->
     <div class="story-box">
-      <div class="story-emoji">👗✨🚪</div>
-      <h4 class="story-title">小美的魔法衣柜</h4>
+      <div class="story-emoji">
+        👗✨🚪
+      </div>
+      <h4 class="story-title">
+        小美的魔法衣柜
+      </h4>
       <p class="story-text">
         小美有一件神奇的魔法衣柜！不管你把它放在大房间还是小房间，<br>
         <strong>里面的衣服都会自动叠好、排好，完美适应空间大小！</strong>
@@ -24,13 +28,13 @@
       <div class="slider-box">
         <span class="slider-emoji">🏠小</span>
         <input
-          type="range"
           v-model="closetWidth"
+          type="range"
           :min="280"
           :max="900"
           step="10"
           class="magic-slider"
-        />
+        >
         <span class="slider-emoji">大🏰</span>
       </div>
 
@@ -40,7 +44,10 @@
     </div>
 
     <!-- 魔法衣柜展示 -->
-    <div class="closet-display" :style="{ width: closetWidth + 'px' }">
+    <div
+      class="closet-display"
+      :style="{ width: closetWidth + 'px' }"
+    >
       <div class="closet-header">
         <span class="closet-icon">🚪</span>
         <span class="closet-title">小美的魔法衣柜</span>
@@ -48,7 +55,10 @@
       </div>
 
       <div class="closet-interior">
-        <div class="clothes-rack" :style="rackStyle">
+        <div
+          class="clothes-rack"
+          :style="rackStyle"
+        >
           <div
             v-for="(item, index) in clothes"
             :key="index"
@@ -56,10 +66,21 @@
             :class="{ 'folded': isSmallSpace }"
             :style="{ animationDelay: (index * 0.1) + 's' }"
           >
-            <div class="item-hanger">🪝</div>
-            <div class="item-emoji">{{ item.emoji }}</div>
-            <div class="item-name">{{ item.name }}</div>
-            <div class="fold-hint" v-if="isSmallSpace">叠好了!</div>
+            <div class="item-hanger">
+              🪝
+            </div>
+            <div class="item-emoji">
+              {{ item.emoji }}
+            </div>
+            <div class="item-name">
+              {{ item.name }}
+            </div>
+            <div
+              v-if="isSmallSpace"
+              class="fold-hint"
+            >
+              叠好了!
+            </div>
           </div>
         </div>
       </div>
@@ -72,24 +93,48 @@
 
     <!-- 魔法原理说明 -->
     <div class="magic-explain">
-      <div class="explain-title">🔮 魔法原理揭秘</div>
+      <div class="explain-title">
+        🔮 魔法原理揭秘
+      </div>
       <div class="explain-cards">
         <div class="explain-card">
-          <div class="card-icon">📱</div>
-          <div class="card-title">小房间（手机）</div>
-          <div class="card-desc">衣柜只有 320px 宽，衣服会自动叠起来，<strong>1列</strong>排开</div>
+          <div class="card-icon">
+            📱
+          </div>
+          <div class="card-title">
+            小房间（手机）
+          </div>
+          <div class="card-desc">
+            衣柜只有 320px 宽，衣服会自动叠起来，<strong>1列</strong>排开
+          </div>
         </div>
-        <div class="explain-arrow">➡️</div>
-        <div class="explain-card">
-          <div class="card-icon">📲</div>
-          <div class="card-title">中房间（平板）</div>
-          <div class="card-desc">衣柜有 768px 宽，衣服舒展开，<strong>2列</strong>排开</div>
+        <div class="explain-arrow">
+          ➡️
         </div>
-        <div class="explain-arrow">➡️</div>
         <div class="explain-card">
-          <div class="card-icon">💻</div>
-          <div class="card-title">大房间（电脑）</div>
-          <div class="card-desc">衣柜有 1200px 宽，衣服完全展开，<strong>3列</strong>排开</div>
+          <div class="card-icon">
+            📲
+          </div>
+          <div class="card-title">
+            中房间（平板）
+          </div>
+          <div class="card-desc">
+            衣柜有 768px 宽，衣服舒展开，<strong>2列</strong>排开
+          </div>
+        </div>
+        <div class="explain-arrow">
+          ➡️
+        </div>
+        <div class="explain-card">
+          <div class="card-icon">
+            💻
+          </div>
+          <div class="card-title">
+            大房间（电脑）
+          </div>
+          <div class="card-desc">
+            衣柜有 1200px 宽，衣服完全展开，<strong>3列</strong>排开
+          </div>
         </div>
       </div>
     </div>
@@ -124,7 +169,9 @@
 
     <!-- 总结 -->
     <div class="summary-box">
-      <div class="summary-icon">🎯</div>
+      <div class="summary-icon">
+        🎯
+      </div>
       <div class="summary-content">
         <strong>关键 takeaway：</strong>
         响应式布局就像小美的魔法衣柜，<strong>同一套衣服（内容）</strong>，
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
index e36a13f..7f22eee 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
@@ -22,185 +22,296 @@
         </p>
       </div>
 
-    <!-- 模式选择 -->
-    <div class="mode-selector">
-      <div
-        class="mode-card"
-        :class="{ active: mode === 'mpa' }"
-        @click="switchMode('mpa')"
-      >
-        <div class="mode-icon">📚</div>
-        <div class="mode-name">MPA 多页应用</div>
-        <div class="mode-sub">通俗说法: 像翻书</div>
-        <div class="mode-desc">每点一次链接，浏览器向服务器要新页面</div>
+      <!-- 模式选择 -->
+      <div class="mode-selector">
+        <div
+          class="mode-card"
+          :class="{ active: mode === 'mpa' }"
+          @click="switchMode('mpa')"
+        >
+          <div class="mode-icon">
+            📚
+          </div>
+          <div class="mode-name">
+            MPA 多页应用
+          </div>
+          <div class="mode-sub">
+            通俗说法: 像翻书
+          </div>
+          <div class="mode-desc">
+            每点一次链接，浏览器向服务器要新页面
+          </div>
+        </div>
+
+        <div class="vs-divider">
+          VS
+        </div>
+
+        <div
+          class="mode-card"
+          :class="{ active: mode === 'spa' }"
+          @click="switchMode('spa')"
+        >
+          <div class="mode-icon">
+            📄
+          </div>
+          <div class="mode-name">
+            SPA 单页应用
+          </div>
+          <div class="mode-sub">
+            通俗说法: 像换纸
+          </div>
+          <div class="mode-desc">
+            只加载一次，后续只切换内容
+          </div>
+        </div>
       </div>
 
-      <div class="vs-divider">VS</div>
+      <!-- 动画演示 -->
+      <div class="demo-area">
+        <div class="demo-header">
+          <span>当前模式：</span>
+          <span
+            class="mode-badge"
+            :class="mode"
+          >{{ mode === 'mpa' ? 'MPA 多页应用' : 'SPA 单页应用' }}</span>
+        </div>
 
-      <div
-        class="mode-card"
-        :class="{ active: mode === 'spa' }"
-        @click="switchMode('spa')"
-      >
-        <div class="mode-icon">📄</div>
-        <div class="mode-name">SPA 单页应用</div>
-        <div class="mode-sub">通俗说法: 像换纸</div>
-        <div class="mode-desc">只加载一次，后续只切换内容</div>
-      </div>
-    </div>
+        <!-- 场景模拟 -->
+        <div class="scene-container">
+          <!-- 书架（服务器） -->
+          <div class="server-side">
+            <div class="server-icon">
+              📚
+            </div>
+            <div class="server-label">
+              书架（服务器）
+            </div>
+            <div class="books-shelf">
+              <div
+                v-for="page in pages"
+                :key="page.id"
+                class="book-item"
+                :class="{
+                  active: currentPage === page.id,
+                  loading: mode === 'mpa' && isLoading && page.id === targetPage
+                }"
+              >
+                {{ page.emoji }}
+              </div>
+            </div>
+          </div>
 
-    <!-- 动画演示 -->
-    <div class="demo-area">
-      <div class="demo-header">
-        <span>当前模式：</span>
-        <span class="mode-badge" :class="mode">{{ mode === 'mpa' ? 'MPA 多页应用' : 'SPA 单页应用' }}</span>
-      </div>
-
-      <!-- 场景模拟 -->
-      <div class="scene-container">
-        <!-- 书架（服务器） -->
-        <div class="server-side">
-          <div class="server-icon">📚</div>
-          <div class="server-label">书架（服务器）</div>
-          <div class="books-shelf">
+          <!-- 传输过程 -->
+          <div class="transfer-area">
             <div
+              v-if="mode === 'mpa' && isLoading"
+              class="transfer-animation"
+            >
+              <div class="transfer-icon">
+                {{ pages.find(p => p.id === targetPage)?.emoji }}
+              </div>
+              <div class="transfer-arrow">
+                →
+              </div>
+            </div>
+            <div
+              v-else
+              class="transfer-placeholder"
+            >
+              <span>{{ mode === 'mpa' ? '点击页面传输' : '无需传输' }}</span>
+            </div>
+          </div>
+
+          <!-- 阅读区（浏览器） -->
+          <div class="browser-side">
+            <div class="browser-icon">
+              📖
+            </div>
+            <div class="browser-label">
+              阅读区（浏览器）
+            </div>
+            <div class="reading-paper">
+              <Transition
+                :name="mode === 'mpa' ? 'page-flip' : 'content-fade'"
+                mode="out-in"
+              >
+                <div
+                  :key="currentPage"
+                  class="page-content"
+                >
+                  <div class="page-emoji">
+                    {{ getCurrentPage.emoji }}
+                  </div>
+                  <div class="page-title">
+                    {{ getCurrentPage.title }}
+                  </div>
+                  <div class="page-text">
+                    {{ getCurrentPage.content }}
+                  </div>
+                </div>
+              </Transition>
+
+              <!-- 状态保留测试 -->
+              <div class="state-test">
+                <div class="test-label">
+                  ✏️ 状态保留测试：
+                </div>
+                <input
+                  v-model="userInput"
+                  type="text"
+                  placeholder="在这里输入文字，然后切换页面..."
+                  class="test-input"
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 导航控制 -->
+        <div class="navigation-controls">
+          <div class="nav-label">
+            切换页面：
+          </div>
+          <div class="nav-buttons">
+            <button
               v-for="page in pages"
               :key="page.id"
-              class="book-item"
-              :class="{
-                active: currentPage === page.id,
-                loading: mode === 'mpa' && isLoading && page.id === targetPage
-              }"
+              class="nav-btn"
+              :class="{ active: currentPage === page.id }"
+              :disabled="isLoading"
+              @click="navigateTo(page.id)"
             >
-              {{ page.emoji }}
-            </div>
+              {{ page.emoji }} {{ page.title }}
+            </button>
           </div>
         </div>
 
-        <!-- 传输过程 -->
-        <div class="transfer-area">
-          <div v-if="mode === 'mpa' && isLoading" class="transfer-animation">
-            <div class="transfer-icon">{{ pages.find(p => p.id === targetPage)?.emoji }}</div>
-            <div class="transfer-arrow">→</div>
-          </div>
-          <div v-else class="transfer-placeholder">
-            <span>{{ mode === 'mpa' ? '点击页面传输' : '无需传输' }}</span>
-          </div>
-        </div>
-
-        <!-- 阅读区（浏览器） -->
-        <div class="browser-side">
-          <div class="browser-icon">📖</div>
-          <div class="browser-label">阅读区（浏览器）</div>
-          <div class="reading-paper">
-            <Transition :name="mode === 'mpa' ? 'page-flip' : 'content-fade'" mode="out-in">
-              <div :key="currentPage" class="page-content">
-                <div class="page-emoji">{{ getCurrentPage.emoji }}</div>
-                <div class="page-title">{{ getCurrentPage.title }}</div>
-                <div class="page-text">{{ getCurrentPage.content }}</div>
-              </div>
-            </Transition>
-
-            <!-- 状态保留测试 -->
-            <div class="state-test">
-              <div class="test-label">✏️ 状态保留测试：</div>
-              <input
-                v-model="userInput"
-                type="text"
-                placeholder="在这里输入文字，然后切换页面..."
-                class="test-input"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 导航控制 -->
-      <div class="navigation-controls">
-        <div class="nav-label">切换页面：</div>
-        <div class="nav-buttons">
-          <button
-            v-for="page in pages"
-            :key="page.id"
-            class="nav-btn"
-            :class="{ active: currentPage === page.id }"
-            @click="navigateTo(page.id)"
-            :disabled="isLoading"
+        <!-- 状态指示 -->
+        <div class="status-indicator">
+          <div
+            v-if="mode === 'mpa'"
+            class="status-text mpa"
           >
-            {{ page.emoji }} {{ page.title }}
-          </button>
+            <span class="status-icon">📚</span>
+            <span>每次切换都要从书架拿新书（服务器请求）</span>
+          </div>
+          <div
+            v-else
+            class="status-text spa"
+          >
+            <span class="status-icon">⚡</span>
+            <span>内容已经下载好了，切换不需要再拿（前端路由）</span>
+          </div>
         </div>
       </div>
 
-      <!-- 状态指示 -->
-      <div class="status-indicator">
-        <div v-if="mode === 'mpa'" class="status-text mpa">
-          <span class="status-icon">📚</span>
-          <span>每次切换都要从书架拿新书（服务器请求）</span>
+      <!-- 对比表格 -->
+      <div class="comparison-table">
+        <div class="table-title">
+          📊 MPA vs SPA 对比
         </div>
-        <div v-else class="status-text spa">
-          <span class="status-icon">⚡</span>
-          <span>内容已经下载好了，切换不需要再拿（前端路由）</span>
+        <div class="table-content">
+          <div class="comparison-row header">
+            <div class="col-feature">
+              特点
+            </div>
+            <div class="col-mpa">
+              MPA 多页应用
+            </div>
+            <div class="col-spa">
+              SPA 单页应用
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              比喻
+            </div>
+            <div class="col-mpa">
+              翻书：每翻一页换一本书
+            </div>
+            <div class="col-spa">
+              换纸：同一本书里换内容
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              页面切换
+            </div>
+            <div class="col-mpa">
+              每次都重新加载整个页面
+            </div>
+            <div class="col-spa">
+              只加载一次，后续只切换内容
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              速度体验
+            </div>
+            <div class="col-mpa">
+              每次都有"白屏-加载"的过程
+            </div>
+            <div class="col-spa">
+              页面切换流畅，无白屏
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              状态保留
+            </div>
+            <div class="col-mpa">
+              切换页面后，输入的内容会丢失
+            </div>
+            <div class="col-spa">
+              切换页面后，输入的内容还在
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              搜索引擎
+            </div>
+            <div class="col-mpa">
+              容易被搜索到（SEO 友好）
+            </div>
+            <div class="col-spa">
+              需要额外处理才能被搜索到
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              首屏加载
+            </div>
+            <div class="col-mpa">
+              服务器直接给 HTML，首屏快
+            </div>
+            <div class="col-spa">
+              需要先下载 JS，首屏可能慢
+            </div>
+          </div>
+          <div class="comparison-row">
+            <div class="col-feature">
+              适合场景
+            </div>
+            <div class="col-mpa">
+              博客、新闻、企业官网
+            </div>
+            <div class="col-spa">
+              淘宝、网易云音乐、后台系统
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 对比表格 -->
-    <div class="comparison-table">
-      <div class="table-title">📊 MPA vs SPA 对比</div>
-      <div class="table-content">
-        <div class="comparison-row header">
-          <div class="col-feature">特点</div>
-          <div class="col-mpa">MPA 多页应用</div>
-          <div class="col-spa">SPA 单页应用</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">比喻</div>
-          <div class="col-mpa">翻书：每翻一页换一本书</div>
-          <div class="col-spa">换纸：同一本书里换内容</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">页面切换</div>
-          <div class="col-mpa">每次都重新加载整个页面</div>
-          <div class="col-spa">只加载一次，后续只切换内容</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">速度体验</div>
-          <div class="col-mpa">每次都有"白屏-加载"的过程</div>
-          <div class="col-spa">页面切换流畅，无白屏</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">状态保留</div>
-          <div class="col-mpa">切换页面后，输入的内容会丢失</div>
-          <div class="col-spa">切换页面后，输入的内容还在</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">搜索引擎</div>
-          <div class="col-mpa">容易被搜索到（SEO 友好）</div>
-          <div class="col-spa">需要额外处理才能被搜索到</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">首屏加载</div>
-          <div class="col-mpa">服务器直接给 HTML，首屏快</div>
-          <div class="col-spa">需要先下载 JS，首屏可能慢</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">适合场景</div>
-          <div class="col-mpa">博客、新闻、企业官网</div>
-          <div class="col-spa">淘宝、网易云音乐、后台系统</div>
-        </div>
+      <!-- 核心要点 -->
+      <div class="info-box">
+        <span class="icon">💡</span>
+        <strong>核心思想：</strong>
+        <strong>MPA</strong> 每次切换都要"整页刷新"，像翻书，适合内容为主的网站；
+        <strong>SPA</strong> 只加载一次，后续"局部更新"，像换纸，适合交互复杂的应用。
+        关键是：<strong>状态会不会丢</strong>。
       </div>
     </div>
-
-    <!-- 核心要点 -->
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>核心思想：</strong>
-      <strong>MPA</strong> 每次切换都要"整页刷新"，像翻书，适合内容为主的网站；
-      <strong>SPA</strong> 只加载一次，后续"局部更新"，像换纸，适合交互复杂的应用。
-      关键是：<strong>状态会不会丢</strong>。
-    </div>
-    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
index f524525..cf70447 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
@@ -29,23 +29,41 @@
           :class="{ active: mode === 'separate' }"
           @click="mode = 'separate'"
         >
-          <div class="mode-icon">🛵</div>
-          <div class="mode-name">切图模式</div>
-          <div class="mode-desc">通俗说法: 一箱一趟</div>
-          <div class="mode-detail">需要 6 趟运输</div>
+          <div class="mode-icon">
+            🛵
+          </div>
+          <div class="mode-name">
+            切图模式
+          </div>
+          <div class="mode-desc">
+            通俗说法: 一箱一趟
+          </div>
+          <div class="mode-detail">
+            需要 6 趟运输
+          </div>
         </div>
 
-        <div class="vs-divider">VS</div>
+        <div class="vs-divider">
+          VS
+        </div>
 
         <div
           class="mode-card"
           :class="{ active: mode === 'packed' }"
           @click="mode = 'packed'"
         >
-          <div class="mode-icon">🚚</div>
-          <div class="mode-name">雪碧图模式</div>
-          <div class="mode-desc">通俗说法: 打包一车拉</div>
-          <div class="mode-detail">只需 1 趟运输</div>
+          <div class="mode-icon">
+            🚚
+          </div>
+          <div class="mode-name">
+            雪碧图模式
+          </div>
+          <div class="mode-desc">
+            通俗说法: 打包一车拉
+          </div>
+          <div class="mode-detail">
+            只需 1 趟运输
+          </div>
         </div>
       </div>
 
@@ -53,8 +71,12 @@
       <div class="animation-area">
         <!-- 起点 -->
         <div class="location start">
-          <div class="location-icon">🏠</div>
-          <div class="location-label">旧家</div>
+          <div class="location-icon">
+            🏠
+          </div>
+          <div class="location-label">
+            旧家
+          </div>
           <div class="boxes-remaining">
             剩余箱子: <span class="count">{{ remainingBoxes }}</span>
           </div>
@@ -62,7 +84,7 @@
 
         <!-- 道路 -->
         <div class="road">
-          <div class="road-line"></div>
+          <div class="road-line" />
 
           <!-- 运输车辆 -->
           <div
@@ -75,7 +97,10 @@
             <div class="vehicle-body">
               {{ mode === 'separate' ? '🛵' : '🚚' }}
             </div>
-            <div class="vehicle-cargo" v-if="vehicle.cargo > 0">
+            <div
+              v-if="vehicle.cargo > 0"
+              class="vehicle-cargo"
+            >
               {{ mode === 'separate' ? '📦' : '📦×' + vehicle.cargo }}
             </div>
           </div>
@@ -83,8 +108,12 @@
 
         <!-- 终点 -->
         <div class="location end">
-          <div class="location-icon">🏡</div>
-          <div class="location-label">新家</div>
+          <div class="location-icon">
+            🏡
+          </div>
+          <div class="location-label">
+            新家
+          </div>
           <div class="boxes-delivered">
             已送达: <span class="count">{{ deliveredBoxes }}</span>/6
           </div>
@@ -94,18 +123,32 @@
       <!-- 统计面板 -->
       <div class="stats-panel">
         <div class="stat-item">
-          <div class="stat-label">运输趟数</div>
-          <div class="stat-value" :class="{ 'good': trips <= 2, 'bad': trips > 2 }">
+          <div class="stat-label">
+            运输趟数
+          </div>
+          <div
+            class="stat-value"
+            :class="{ 'good': trips <= 2, 'bad': trips > 2 }"
+          >
             {{ trips }} 趟
           </div>
         </div>
         <div class="stat-item">
-          <div class="stat-label">总耗时</div>
-          <div class="stat-value">{{ totalTime.toFixed(1) }} 秒</div>
+          <div class="stat-label">
+            总耗时
+          </div>
+          <div class="stat-value">
+            {{ totalTime.toFixed(1) }} 秒
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-label">效率评分</div>
-          <div class="stat-value" :class="efficiencyClass">
+          <div class="stat-label">
+            效率评分
+          </div>
+          <div
+            class="stat-value"
+            :class="efficiencyClass"
+          >
             {{ efficiency }}
           </div>
         </div>
@@ -115,8 +158,8 @@
       <div class="controls">
         <button
           class="btn btn-primary"
-          @click="startSimulation"
           :disabled="isRunning"
+          @click="startSimulation"
         >
           {{ isRunning ? '运输中...' : '开始搬家' }}
         </button>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/CachingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/CachingStrategyDemo.vue
index 45e6b38..394dbe4 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/CachingStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/CachingStrategyDemo.vue
@@ -5,19 +5,23 @@
 <template>
   <div class="caching-demo">
     <div class="header">
-      <div class="title">缓存策略：速度与更新的平衡</div>
-      <div class="subtitle">对比不同缓存策略的效果</div>
+      <div class="title">
+        缓存策略：速度与更新的平衡
+      </div>
+      <div class="subtitle">
+        对比不同缓存策略的效果
+      </div>
     </div>
 
     <div class="strategy-selector">
       <button
         v-for="strategy in strategies"
         :key="strategy.name"
-        @click="selectStrategy(strategy)"
         :class="[
           'strategy-btn',
           { active: selectedStrategy.name === strategy.name }
         ]"
+        @click="selectStrategy(strategy)"
       >
         <span class="strategy-icon">{{ strategy.icon }}</span>
         <span class="strategy-name">{{ strategy.name }}</span>
@@ -28,32 +32,46 @@
       <div class="browser-window">
         <div class="browser-header">
           <div class="browser-controls">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
+            <span class="dot red" />
+            <span class="dot yellow" />
+            <span class="dot green" />
+          </div>
+          <div class="browser-url">
+            {{ selectedStrategy.url }}
           </div>
-          <div class="browser-url">{{ selectedStrategy.url }}</div>
         </div>
 
         <div class="browser-content">
-          <div class="loading-overlay" v-if="isLoading">
-            <div class="spinner"></div>
-            <div class="loading-text">加载中... ({{ loadingProgress }}%)</div>
+          <div
+            v-if="isLoading"
+            class="loading-overlay"
+          >
+            <div class="spinner" />
+            <div class="loading-text">
+              加载中... ({{ loadingProgress }}%)
+            </div>
           </div>
 
-          <div class="page-content" v-else>
+          <div
+            v-else
+            class="page-content"
+          >
             <div class="page-hero">
               <h2>{{ selectedStrategy.pageTitle }}</h2>
             </div>
             <div class="page-body">
               <div
-                class="resource-item"
                 v-for="(resource, index) in selectedStrategy.resources"
                 :key="index"
+                class="resource-item"
               >
-                <div class="resource-icon">{{ resource.icon }}</div>
+                <div class="resource-icon">
+                  {{ resource.icon }}
+                </div>
                 <div class="resource-info">
-                  <div class="resource-name">{{ resource.name }}</div>
+                  <div class="resource-name">
+                    {{ resource.name }}
+                  </div>
                   <div
                     class="resource-status"
                     :class="resource.cached ? 'cached' : 'network'"
@@ -61,8 +79,12 @@
                     {{ resource.cached ? '✓ 来自缓存' : '↓ 从服务器下载' }}
                   </div>
                 </div>
-                <div class="resource-size">{{ resource.size }}</div>
-                <div class="resource-time">{{ resource.time }}</div>
+                <div class="resource-size">
+                  {{ resource.size }}
+                </div>
+                <div class="resource-time">
+                  {{ resource.time }}
+                </div>
               </div>
             </div>
           </div>
@@ -75,7 +97,10 @@
             <span class="metric-icon">⚡</span>
             <span class="metric-title">加载时间</span>
           </div>
-          <div class="metric-value" :class="selectedStrategy.performanceClass">
+          <div
+            class="metric-value"
+            :class="selectedStrategy.performanceClass"
+          >
             {{ selectedStrategy.loadTime }}
           </div>
           <div
@@ -91,12 +116,14 @@
             <span class="metric-icon">💾</span>
             <span class="metric-title">缓存命中</span>
           </div>
-          <div class="metric-value">{{ selectedStrategy.cacheHit }}%</div>
+          <div class="metric-value">
+            {{ selectedStrategy.cacheHit }}%
+          </div>
           <div class="metric-bar">
             <div
               class="metric-fill"
               :style="{ width: selectedStrategy.cacheHit + '%' }"
-            ></div>
+            />
           </div>
         </div>
 
@@ -119,7 +146,9 @@
       <h3>{{ selectedStrategy.name }} 说明</h3>
       <p>{{ selectedStrategy.description }}</p>
       <div class="code-example">
-        <div class="code-header">配置示例</div>
+        <div class="code-header">
+          配置示例
+        </div>
         <pre><code>{{ selectedStrategy.code }}</code></pre>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue
index d3691ae..411756e 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="crp-demo">
     <div class="header">
-      <div class="title">关键渲染路径 (Critical Rendering Path)</div>
+      <div class="title">
+        关键渲染路径 (Critical Rendering Path)
+      </div>
       <div class="subtitle">
         浏览器如何将 HTML、CSS 和 JavaScript 转换为像素
       </div>
@@ -32,87 +34,158 @@
       </div>
 
       <div class="arrow-section">
-        <div class="arrow">→</div>
+        <div class="arrow">
+          →
+        </div>
       </div>
 
       <div class="process-section">
-        <div class="step" :class="{ active: currentStep === 'dom' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'dom' }"
+        >
           <div class="step-header">
-            <div class="step-icon">🌲</div>
-            <div class="step-title">DOM 树</div>
+            <div class="step-icon">
+              🌲
+            </div>
+            <div class="step-title">
+              DOM 树
+            </div>
           </div>
           <div class="tree-visualization">
-            <div class="tree-node root">html</div>
+            <div class="tree-node root">
+              html
+            </div>
             <div class="tree-children">
-              <div class="tree-node">head</div>
-              <div class="tree-node">body</div>
+              <div class="tree-node">
+                head
+              </div>
+              <div class="tree-node">
+                body
+              </div>
               <div class="tree-children">
-                <div class="tree-node">div.container</div>
+                <div class="tree-node">
+                  div.container
+                </div>
                 <div class="tree-children">
-                  <div class="tree-node">h1</div>
-                  <div class="tree-node">p</div>
+                  <div class="tree-node">
+                    h1
+                  </div>
+                  <div class="tree-node">
+                    p
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="step" :class="{ active: currentStep === 'cssom' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'cssom' }"
+        >
           <div class="step-header">
-            <div class="step-icon">🎨</div>
-            <div class="step-title">CSSOM 树</div>
+            <div class="step-icon">
+              🎨
+            </div>
+            <div class="step-title">
+              CSSOM 树
+            </div>
           </div>
           <div class="tree-visualization">
-            <div class="tree-node root">body</div>
+            <div class="tree-node root">
+              body
+            </div>
             <div class="tree-children">
-              <div class="tree-node">.container</div>
+              <div class="tree-node">
+                .container
+              </div>
               <div class="tree-children">
-                <div class="tree-node">h1</div>
-                <div class="tree-node">p</div>
+                <div class="tree-node">
+                  h1
+                </div>
+                <div class="tree-node">
+                  p
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="step" :class="{ active: currentStep === 'render' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'render' }"
+        >
           <div class="step-header">
-            <div class="step-icon">🖼️</div>
-            <div class="step-title">渲染树</div>
+            <div class="step-icon">
+              🖼️
+            </div>
+            <div class="step-title">
+              渲染树
+            </div>
           </div>
           <div class="tree-visualization">
-            <div class="tree-node root">body</div>
+            <div class="tree-node root">
+              body
+            </div>
             <div class="tree-children">
-              <div class="tree-node">div.container</div>
+              <div class="tree-node">
+                div.container
+              </div>
               <div class="tree-children">
-                <div class="tree-node">h1</div>
-                <div class="tree-node">p</div>
+                <div class="tree-node">
+                  h1
+                </div>
+                <div class="tree-node">
+                  p
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="step" :class="{ active: currentStep === 'layout' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'layout' }"
+        >
           <div class="step-header">
-            <div class="step-icon">📐</div>
-            <div class="step-title">布局 (Layout)</div>
+            <div class="step-icon">
+              📐
+            </div>
+            <div class="step-title">
+              布局 (Layout)
+            </div>
           </div>
           <div class="layout-demo">
             <div class="layout-box container">
-              <div class="layout-label">container</div>
+              <div class="layout-label">
+                container
+              </div>
               <div class="layout-box h1">
-                <div class="layout-label">h1</div>
+                <div class="layout-label">
+                  h1
+                </div>
               </div>
               <div class="layout-box p">
-                <div class="layout-label">p</div>
+                <div class="layout-label">
+                  p
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="step" :class="{ active: currentStep === 'paint' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'paint' }"
+        >
           <div class="step-header">
-            <div class="step-icon">🖌️</div>
-            <div class="step-title">绘制 (Paint)</div>
+            <div class="step-icon">
+              🖌️
+            </div>
+            <div class="step-title">
+              绘制 (Paint)
+            </div>
           </div>
           <div class="paint-demo">
             <div class="paint-box container">
@@ -124,23 +197,40 @@
           </div>
         </div>
 
-        <div class="step" :class="{ active: currentStep === 'composite' }">
+        <div
+          class="step"
+          :class="{ active: currentStep === 'composite' }"
+        >
           <div class="step-header">
-            <div class="step-icon">✨</div>
-            <div class="step-title">合成 (Composite)</div>
+            <div class="step-icon">
+              ✨
+            </div>
+            <div class="step-title">
+              合成 (Composite)
+            </div>
           </div>
           <div class="composite-demo">
-            <div class="composite-layer">图层 1: 背景</div>
-            <div class="composite-layer">图层 2: 内容</div>
-            <div class="composite-layer">图层 3: 装饰</div>
-            <div class="composite-result">= 最终页面</div>
+            <div class="composite-layer">
+              图层 1: 背景
+            </div>
+            <div class="composite-layer">
+              图层 2: 内容
+            </div>
+            <div class="composite-layer">
+              图层 3: 装饰
+            </div>
+            <div class="composite-result">
+              = 最终页面
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="timeline">
-      <div class="timeline-header">渲染时间线</div>
+      <div class="timeline-header">
+        渲染时间线
+      </div>
       <div class="timeline-bar">
         <div
           v-for="(step, index) in timelineSteps"
@@ -154,7 +244,10 @@
           }"
           @click="setStep(step.name)"
         >
-          <div class="segment-label" :style="{ color: step.color }">
+          <div
+            class="segment-label"
+            :style="{ color: step.color }"
+          >
             {{ step.label }}
           </div>
         </div>
@@ -167,7 +260,9 @@
 
     <div class="optimization-tips">
       <div class="tip-card">
-        <div class="tip-icon">⚡</div>
+        <div class="tip-icon">
+          ⚡
+        </div>
         <div class="tip-content">
           <h4>优化 DOM 构建</h4>
           <p>减少 HTML 嵌套层级，避免不必要的标签。使用语义化 HTML。</p>
@@ -175,7 +270,9 @@
       </div>
 
       <div class="tip-card">
-        <div class="tip-icon">🎨</div>
+        <div class="tip-icon">
+          🎨
+        </div>
         <div class="tip-content">
           <h4>优化 CSS</h4>
           <p>CSS 是渲染阻塞资源。将关键 CSS 内联，异步加载非关键 CSS。</p>
@@ -183,7 +280,9 @@
       </div>
 
       <div class="tip-card">
-        <div class="tip-icon">⚙️</div>
+        <div class="tip-icon">
+          ⚙️
+        </div>
         <div class="tip-content">
           <h4>优化 JavaScript</h4>
           <p>
@@ -194,7 +293,9 @@
       </div>
 
       <div class="tip-card">
-        <div class="tip-icon">📐</div>
+        <div class="tip-icon">
+          📐
+        </div>
         <div class="tip-content">
           <h4>减少重排</h4>
           <p>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/ImageOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/ImageOptimizationDemo.vue
index 128fdd2..6254826 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/ImageOptimizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/ImageOptimizationDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="image-optimization-demo">
     <div class="header">
-      <div class="title">图片格式对比：大小与质量的权衡</div>
-      <div class="subtitle">对比不同图片格式的大小和质量</div>
+      <div class="title">
+        图片格式对比：大小与质量的权衡
+      </div>
+      <div class="subtitle">
+        对比不同图片格式的大小和质量
+      </div>
     </div>
 
     <div class="format-grid">
@@ -18,16 +22,28 @@
         @click="selectFormat(format.name)"
       >
         <div class="format-header">
-          <div class="format-name">{{ format.name }}</div>
-          <div class="format-badge" :class="format.badgeClass">
+          <div class="format-name">
+            {{ format.name }}
+          </div>
+          <div
+            class="format-badge"
+            :class="format.badgeClass"
+          >
             {{ format.badge }}
           </div>
         </div>
 
-        <div class="format-preview" :style="{ background: format.gradient }">
+        <div
+          class="format-preview"
+          :style="{ background: format.gradient }"
+        >
           <div class="preview-content">
-            <div class="preview-image">🖼️</div>
-            <div class="preview-size">{{ format.size }}</div>
+            <div class="preview-image">
+              🖼️
+            </div>
+            <div class="preview-size">
+              {{ format.size }}
+            </div>
           </div>
         </div>
 
@@ -46,7 +62,7 @@
               <div
                 class="quality-fill"
                 :style="{ width: format.quality + '%' }"
-              ></div>
+              />
             </div>
           </div>
           <div class="metric">
@@ -56,8 +72,12 @@
         </div>
 
         <div class="format-use-case">
-          <div class="use-case-label">适用场景</div>
-          <div class="use-case-value">{{ format.useCase }}</div>
+          <div class="use-case-label">
+            适用场景
+          </div>
+          <div class="use-case-value">
+            {{ format.useCase }}
+          </div>
         </div>
       </div>
     </div>
@@ -76,7 +96,10 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="format in formats" :key="format.name">
+          <tr
+            v-for="format in formats"
+            :key="format.name"
+          >
             <td>
               <strong>{{ format.name }}</strong>
             </td>
@@ -99,7 +122,9 @@
 
     <div class="tips">
       <div class="tip-card">
-        <div class="tip-icon">💡</div>
+        <div class="tip-icon">
+          💡
+        </div>
         <div class="tip-content">
           <h4>优化建议</h4>
           <ul>
@@ -115,7 +140,9 @@
       </div>
 
       <div class="tip-card">
-        <div class="tip-icon">🔧</div>
+        <div class="tip-icon">
+          🔧
+        </div>
         <div class="tip-content">
           <h4>工具推荐</h4>
           <ul>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/LazyLoadingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/LazyLoadingDemo.vue
index 5e50361..6baa344 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/LazyLoadingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/LazyLoadingDemo.vue
@@ -5,21 +5,25 @@
 <template>
   <div class="lazy-loading-demo">
     <div class="header">
-      <div class="title">图片懒加载：节省带宽，提升性能</div>
-      <div class="subtitle">对比懒加载和立即加载的区别</div>
+      <div class="title">
+        图片懒加载：节省带宽，提升性能
+      </div>
+      <div class="subtitle">
+        对比懒加载和立即加载的区别
+      </div>
     </div>
 
     <div class="demo-container">
       <div class="mode-selector">
         <button
-          @click="mode = 'eager'"
           :class="['mode-btn', { active: mode === 'eager' }]"
+          @click="mode = 'eager'"
         >
           📦 立即加载
         </button>
         <button
-          @click="mode = 'lazy'"
           :class="['mode-btn', { active: mode === 'lazy' }]"
+          @click="mode = 'lazy'"
         >
           ⏳ 懒加载
         </button>
@@ -32,7 +36,10 @@
         </div>
         <div class="stat">
           <span class="stat-label">节省流量</span>
-          <span class="stat-value" :class="{ positive: savedBandwidth > 0 }">
+          <span
+            class="stat-value"
+            :class="{ positive: savedBandwidth > 0 }"
+          >
             {{ savedBandwidth > 0 ? '-' : '' }}{{ savedBandwidth }} KB
           </span>
         </div>
@@ -43,18 +50,20 @@
       </div>
 
       <div
-        class="scroll-container"
         ref="scrollContainer"
+        class="scroll-container"
         @scroll="handleScroll"
       >
         <div class="content-area">
-          <div class="placeholder">向下滚动查看更多内容</div>
+          <div class="placeholder">
+            向下滚动查看更多内容
+          </div>
 
           <div
             v-for="(image, index) in images"
             :key="index"
-            class="image-item"
             :ref="(el) => setImageRef(el, index)"
+            class="image-item"
           >
             <div
               class="image-wrapper"
@@ -64,21 +73,36 @@
                 v-if="!image.loaded && mode === 'lazy'"
                 class="placeholder-box"
               >
-                <div class="spinner"></div>
-                <div class="placeholder-text">加载中...</div>
+                <div class="spinner" />
+                <div class="placeholder-text">
+                  加载中...
+                </div>
               </div>
-              <div v-else-if="image.loaded" class="image-box">
-                <div class="image-icon">🖼️</div>
+              <div
+                v-else-if="image.loaded"
+                class="image-box"
+              >
+                <div class="image-icon">
+                  🖼️
+                </div>
                 <div class="image-info">
-                  <div class="image-size">{{ image.size }}</div>
-                  <div class="image-dim">{{ image.dimensions }}</div>
+                  <div class="image-size">
+                    {{ image.size }}
+                  </div>
+                  <div class="image-dim">
+                    {{ image.dimensions }}
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="image-caption">图片 {{ index + 1 }}</div>
+            <div class="image-caption">
+              图片 {{ index + 1 }}
+            </div>
           </div>
 
-          <div class="placeholder">已经到底了</div>
+          <div class="placeholder">
+            已经到底了
+          </div>
         </div>
       </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceMetricsDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceMetricsDemo.vue
index 4f1b135..8e7b4b4 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceMetricsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceMetricsDemo.vue
@@ -20,66 +20,130 @@
         min="0.5"
         max="5"
         step="0.1"
-      />
+      >
     </div>
 
     <div class="metrics-grid">
-      <div class="metric-card" :class="fcpStatus.class">
+      <div
+        class="metric-card"
+        :class="fcpStatus.class"
+      >
         <div class="metric-header">
-          <div class="metric-name">FCP</div>
-          <div class="metric-full">First Contentful Paint</div>
+          <div class="metric-name">
+            FCP
+          </div>
+          <div class="metric-full">
+            First Contentful Paint
+          </div>
         </div>
-        <div class="metric-value">{{ fcp }} s</div>
-        <div class="metric-desc">首次内容绘制</div>
-        <div class="metric-status">{{ fcpStatus.text }}</div>
-        <div class="indicator" :class="fcpStatus.class"></div>
+        <div class="metric-value">
+          {{ fcp }} s
+        </div>
+        <div class="metric-desc">
+          首次内容绘制
+        </div>
+        <div class="metric-status">
+          {{ fcpStatus.text }}
+        </div>
+        <div
+          class="indicator"
+          :class="fcpStatus.class"
+        />
       </div>
 
-      <div class="metric-card" :class="lcpStatus.class">
+      <div
+        class="metric-card"
+        :class="lcpStatus.class"
+      >
         <div class="metric-header">
-          <div class="metric-name">LCP</div>
-          <div class="metric-full">Largest Contentful Paint</div>
+          <div class="metric-name">
+            LCP
+          </div>
+          <div class="metric-full">
+            Largest Contentful Paint
+          </div>
         </div>
-        <div class="metric-value">{{ lcp }} s</div>
-        <div class="metric-desc">最大内容绘制</div>
-        <div class="metric-status">{{ lcpStatus.text }}</div>
-        <div class="indicator" :class="lcpStatus.class"></div>
+        <div class="metric-value">
+          {{ lcp }} s
+        </div>
+        <div class="metric-desc">
+          最大内容绘制
+        </div>
+        <div class="metric-status">
+          {{ lcpStatus.text }}
+        </div>
+        <div
+          class="indicator"
+          :class="lcpStatus.class"
+        />
       </div>
 
-      <div class="metric-card" :class="fidStatus.class">
+      <div
+        class="metric-card"
+        :class="fidStatus.class"
+      >
         <div class="metric-header">
-          <div class="metric-name">FID</div>
-          <div class="metric-full">First Input Delay</div>
+          <div class="metric-name">
+            FID
+          </div>
+          <div class="metric-full">
+            First Input Delay
+          </div>
         </div>
-        <div class="metric-value">{{ fid }} ms</div>
-        <div class="metric-desc">首次输入延迟</div>
-        <div class="metric-status">{{ fidStatus.text }}</div>
-        <div class="indicator" :class="fidStatus.class"></div>
+        <div class="metric-value">
+          {{ fid }} ms
+        </div>
+        <div class="metric-desc">
+          首次输入延迟
+        </div>
+        <div class="metric-status">
+          {{ fidStatus.text }}
+        </div>
+        <div
+          class="indicator"
+          :class="fidStatus.class"
+        />
       </div>
 
-      <div class="metric-card" :class="clsStatus.class">
+      <div
+        class="metric-card"
+        :class="clsStatus.class"
+      >
         <div class="metric-header">
-          <div class="metric-name">CLS</div>
-          <div class="metric-full">Cumulative Layout Shift</div>
+          <div class="metric-name">
+            CLS
+          </div>
+          <div class="metric-full">
+            Cumulative Layout Shift
+          </div>
         </div>
-        <div class="metric-value">{{ cls }}</div>
-        <div class="metric-desc">累积布局偏移</div>
-        <div class="metric-status">{{ clsStatus.text }}</div>
-        <div class="indicator" :class="clsStatus.class"></div>
+        <div class="metric-value">
+          {{ cls }}
+        </div>
+        <div class="metric-desc">
+          累积布局偏移
+        </div>
+        <div class="metric-status">
+          {{ clsStatus.text }}
+        </div>
+        <div
+          class="indicator"
+          :class="clsStatus.class"
+        />
       </div>
     </div>
 
     <div class="standards">
       <div class="standard-item">
-        <span class="color-box good"></span>
+        <span class="color-box good" />
         <span>良好</span>
       </div>
       <div class="standard-item">
-        <span class="color-box needs-improvement"></span>
+        <span class="color-box needs-improvement" />
         <span>需改进</span>
       </div>
       <div class="standard-item">
-        <span class="color-box poor"></span>
+        <span class="color-box poor" />
         <span>差</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceOverviewDemo.vue
index ad3ab50..1707c57 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/PerformanceOverviewDemo.vue
@@ -9,8 +9,12 @@
 <template>
   <div class="performance-overview">
     <div class="header">
-      <div class="title">前端性能优化全景图</div>
-      <div class="subtitle">点击下方维度，探索性能瓶颈与优化方案的对应关系</div>
+      <div class="title">
+        前端性能优化全景图
+      </div>
+      <div class="subtitle">
+        点击下方维度，探索性能瓶颈与优化方案的对应关系
+      </div>
     </div>
 
     <!-- 维度切换 -->
@@ -28,23 +32,35 @@
     </div>
 
     <!-- 内容展示区 -->
-    <div class="content-area" :class="currentDim.id">
+    <div
+      class="content-area"
+      :class="currentDim.id"
+    >
       <div class="panel bottlenecks">
         <h3>
           <span class="icon">⚠️</span>
           常见瓶颈 (Bottlenecks)
         </h3>
         <ul class="list">
-          <li v-for="(item, index) in currentDim.bottlenecks" :key="index">
-            <div class="item-title">{{ item.title }}</div>
-            <div class="item-desc">{{ item.desc }}</div>
+          <li
+            v-for="(item, index) in currentDim.bottlenecks"
+            :key="index"
+          >
+            <div class="item-title">
+              {{ item.title }}
+            </div>
+            <div class="item-desc">
+              {{ item.desc }}
+            </div>
           </li>
         </ul>
       </div>
 
       <div class="arrow">
-        <div class="arrow-line"></div>
-        <div class="arrow-text">如何解决？</div>
+        <div class="arrow-line" />
+        <div class="arrow-text">
+          如何解决？
+        </div>
       </div>
 
       <div class="panel solutions">
@@ -53,11 +69,22 @@
           优化方案 (Solutions)
         </h3>
         <ul class="list">
-          <li v-for="(item, index) in currentDim.solutions" :key="index">
-            <div class="item-title">{{ item.title }}</div>
-            <div class="item-desc">{{ item.desc }}</div>
+          <li
+            v-for="(item, index) in currentDim.solutions"
+            :key="index"
+          >
+            <div class="item-title">
+              {{ item.title }}
+            </div>
+            <div class="item-desc">
+              {{ item.desc }}
+            </div>
             <div class="tags">
-              <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
+              <span
+                v-for="tag in item.tags"
+                :key="tag"
+                class="tag"
+              >{{ tag }}</span>
             </div>
           </li>
         </ul>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/ReflowRepaintDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/ReflowRepaintDemo.vue
index 1ce0959..7342fdd 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/ReflowRepaintDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/ReflowRepaintDemo.vue
@@ -37,54 +37,113 @@
         </div>
 
         <div class="performance-meter">
-          <div class="meter-label">性能影响</div>
+          <div class="meter-label">
+            性能影响
+          </div>
           <div class="meter-bar">
             <div
               class="meter-fill"
               :class="performanceLevel.class"
               :style="{ width: performanceImpact + '%' }"
-            ></div>
+            />
           </div>
-          <div class="meter-value" :class="performanceLevel.class">
+          <div
+            class="meter-value"
+            :class="performanceLevel.class"
+          >
             {{ performanceLevel.text }}
           </div>
         </div>
 
         <div class="stats">
           <div class="stat-item">
-            <div class="stat-label">操作类型</div>
-            <div class="stat-value">{{ currentOperation }}</div>
+            <div class="stat-label">
+              操作类型
+            </div>
+            <div class="stat-value">
+              {{ currentOperation }}
+            </div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">影响范围</div>
-            <div class="stat-value">{{ affectedElements }} 个元素</div>
+            <div class="stat-label">
+              影响范围
+            </div>
+            <div class="stat-value">
+              {{ affectedElements }} 个元素
+            </div>
           </div>
         </div>
       </div>
 
       <div class="controls">
-        <div v-if="activeTab === 'reflow'" class="control-group">
-          <button @click="changeWidth" class="btn high-impact">改变宽度</button>
-          <button @click="changePosition" class="btn high-impact">改变位置</button>
-          <button @click="addBox" class="btn high-impact">添加元素</button>
+        <div
+          v-if="activeTab === 'reflow'"
+          class="control-group"
+        >
+          <button
+            class="btn high-impact"
+            @click="changeWidth"
+          >
+            改变宽度
+          </button>
+          <button
+            class="btn high-impact"
+            @click="changePosition"
+          >
+            改变位置
+          </button>
+          <button
+            class="btn high-impact"
+            @click="addBox"
+          >
+            添加元素
+          </button>
         </div>
 
-        <div v-if="activeTab === 'repaint'" class="control-group">
-          <button @click="changeColor" class="btn medium-impact">改变颜色</button>
-          <button @click="changeBackground" class="btn medium-impact">
+        <div
+          v-if="activeTab === 'repaint'"
+          class="control-group"
+        >
+          <button
+            class="btn medium-impact"
+            @click="changeColor"
+          >
+            改变颜色
+          </button>
+          <button
+            class="btn medium-impact"
+            @click="changeBackground"
+          >
             改变背景
           </button>
-          <button @click="toggleBorder" class="btn medium-impact">切换边框</button>
+          <button
+            class="btn medium-impact"
+            @click="toggleBorder"
+          >
+            切换边框
+          </button>
         </div>
 
-        <div v-if="activeTab === 'composite'" class="control-group">
-          <button @click="transformTranslate" class="btn low-impact">
+        <div
+          v-if="activeTab === 'composite'"
+          class="control-group"
+        >
+          <button
+            class="btn low-impact"
+            @click="transformTranslate"
+          >
             Transform 位移
           </button>
-          <button @click="transformRotate" class="btn low-impact">
+          <button
+            class="btn low-impact"
+            @click="transformRotate"
+          >
             Transform 旋转
           </button>
-          <button @click="changeOpacity" class="btn low-impact">
+          <button
+            class="btn low-impact"
+            @click="changeOpacity"
+          >
             改变透明度
           </button>
         </div>
@@ -92,18 +151,30 @@
     </div>
 
     <Transition name="fade">
-      <div v-if="activeTab" class="tab-info">
-        <div v-if="activeTab === 'reflow'" class="info-content">
+      <div
+        v-if="activeTab"
+        class="tab-info"
+      >
+        <div
+          v-if="activeTab === 'reflow'"
+          class="info-content"
+        >
           <p>
             <strong>重排 (Reflow)</strong>：当元素的位置、尺寸发生变化时，浏览器需要重新计算布局。重排开销最大，因为要重新计算所有受影响元素的位置。
           </p>
         </div>
-        <div v-if="activeTab === 'repaint'" class="info-content">
+        <div
+          v-if="activeTab === 'repaint'"
+          class="info-content"
+        >
           <p>
             <strong>重绘 (Repaint)</strong>：当元素的外观（颜色、背景）发生变化，但位置不变时，浏览器只需要重新绘制像素。比重排快，但仍有开销。
           </p>
         </div>
-        <div v-if="activeTab === 'composite'" class="info-content">
+        <div
+          v-if="activeTab === 'composite'"
+          class="info-content"
+        >
           <p>
             <strong>合成 (Composite)</strong>：使用 transform 和 opacity 等属性，浏览器可以在合成层上完成变化，完全不触发布局和绘制。性能最佳，推荐优先使用。
           </p>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/VirtualScrollingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/VirtualScrollingDemo.vue
index 536da70..3878732 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-performance/VirtualScrollingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-performance/VirtualScrollingDemo.vue
@@ -53,15 +53,25 @@ const renderedCount = computed(() => visibleItems.value.length)
 
     <div class="controls">
       <div class="stat-box">
-        <div class="stat-label">总数据量</div>
-        <div class="stat-value">{{ TOTAL_ITEMS.toLocaleString() }}</div>
+        <div class="stat-label">
+          总数据量
+        </div>
+        <div class="stat-value">
+          {{ TOTAL_ITEMS.toLocaleString() }}
+        </div>
       </div>
       <div class="stat-box highlight">
-        <div class="stat-label">实际渲染</div>
-        <div class="stat-value">{{ renderedCount }}</div>
+        <div class="stat-label">
+          实际渲染
+        </div>
+        <div class="stat-value">
+          {{ renderedCount }}
+        </div>
       </div>
       <div class="stat-box">
-        <div class="stat-label">节省内存</div>
+        <div class="stat-label">
+          节省内存
+        </div>
         <div class="stat-value">
           ~{{ ((1 - renderedCount / TOTAL_ITEMS) * 100).toFixed(1) }}%
         </div>
@@ -69,12 +79,15 @@ const renderedCount = computed(() => visibleItems.value.length)
     </div>
 
     <div
-      class="scroll-container"
       ref="containerRef"
-      @scroll="onScroll"
+      class="scroll-container"
       :style="{ height: CONTAINER_HEIGHT + 'px' }"
+      @scroll="onScroll"
     >
-      <div class="scroll-phantom" :style="{ height: totalHeight + 'px' }"></div>
+      <div
+        class="scroll-phantom"
+        :style="{ height: totalHeight + 'px' }"
+      />
       <div class="visible-list">
         <div
           v-for="item in visibleItems"
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
index 8f78272..c218385 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/DynamicRoutesDemo.vue
@@ -19,9 +19,15 @@
           :class="['param-card', { active: selectedType === type.name }]"
           @click="selectType(type)"
         >
-          <div class="param-pattern">{{ type.pattern }}</div>
-          <div class="param-name">{{ type.label }}</div>
-          <div class="param-example">例: {{ type.example }}</div>
+          <div class="param-pattern">
+            {{ type.pattern }}
+          </div>
+          <div class="param-name">
+            {{ type.label }}
+          </div>
+          <div class="param-example">
+            例: {{ type.example }}
+          </div>
         </div>
       </div>
 
@@ -39,17 +45,25 @@
               @input="parsePath"
             >
           </div>
-          <div class="hint-text">试试输入：user/123 或 products/electronics/456</div>
+          <div class="hint-text">
+            试试输入：user/123 或 products/electronics/456
+          </div>
         </div>
 
         <div class="demo-section">
           <h5>🎯 匹配结果</h5>
-          <div v-if="parseResult" class="result-box">
+          <div
+            v-if="parseResult"
+            class="result-box"
+          >
             <div class="result-row">
               <span class="result-label">匹配路由:</span>
               <code class="result-value">{{ parseResult.route }}</code>
             </div>
-            <div v-if="Object.keys(parseResult.params).length" class="result-params">
+            <div
+              v-if="Object.keys(parseResult.params).length"
+              class="result-params"
+            >
               <span class="result-label">提取参数:</span>
               <div class="params-grid">
                 <div
@@ -64,8 +78,13 @@
               </div>
             </div>
           </div>
-          <div v-else class="no-result">
-            <div class="no-match-icon">🔍</div>
+          <div
+            v-else
+            class="no-result"
+          >
+            <div class="no-match-icon">
+              🔍
+            </div>
             <div>输入路径查看解析结果</div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
index a28d1d0..47713e5 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/HashVsHistoryDemo.vue
@@ -21,9 +21,9 @@
         <div class="browser-mockup">
           <div class="browser-toolbar">
             <div class="window-controls">
-              <span class="dot red"></span>
-              <span class="dot yellow"></span>
-              <span class="dot green"></span>
+              <span class="dot red" />
+              <span class="dot yellow" />
+              <span class="dot green" />
             </div>
             <div class="address-bar">
               <span class="protocol">https://</span>
@@ -76,9 +76,9 @@
         <div class="browser-mockup">
           <div class="browser-toolbar">
             <div class="window-controls">
-              <span class="dot red"></span>
-              <span class="dot yellow"></span>
-              <span class="dot green"></span>
+              <span class="dot red" />
+              <span class="dot yellow" />
+              <span class="dot green" />
             </div>
             <div class="address-bar">
               <span class="protocol">https://</span>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
index 91502a7..abb0656 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/MpaRoutingDemo.vue
@@ -17,11 +17,21 @@
           <span class="mode-title">MPA (多页面应用)</span>
         </div>
         <div class="flow-steps">
-          <div class="step">1. 用户点击链接</div>
-          <div class="step">2. 浏览器发送 HTTP 请求</div>
-          <div class="step">3. 服务器返回完整 HTML</div>
-          <div class="step">4. 浏览器解析并渲染新页面</div>
-          <div class="step">5. 页面资源重新加载 (JS/CSS)</div>
+          <div class="step">
+            1. 用户点击链接
+          </div>
+          <div class="step">
+            2. 浏览器发送 HTTP 请求
+          </div>
+          <div class="step">
+            3. 服务器返回完整 HTML
+          </div>
+          <div class="step">
+            4. 浏览器解析并渲染新页面
+          </div>
+          <div class="step">
+            5. 页面资源重新加载 (JS/CSS)
+          </div>
         </div>
         <div class="mode-features">
           <div class="feature">
@@ -45,12 +55,24 @@
           <span class="mode-title">SPA (单页面应用)</span>
         </div>
         <div class="flow-steps">
-          <div class="step">1. 用户点击链接</div>
-          <div class="step">2. 拦截默认行为</div>
-          <div class="step">3. 更新 URL (History API)</div>
-          <div class="step">4. 匹配路由配置</div>
-          <div class="step">5. 动态渲染新组件</div>
-          <div class="step">6. 页面无刷新更新</div>
+          <div class="step">
+            1. 用户点击链接
+          </div>
+          <div class="step">
+            2. 拦截默认行为
+          </div>
+          <div class="step">
+            3. 更新 URL (History API)
+          </div>
+          <div class="step">
+            4. 匹配路由配置
+          </div>
+          <div class="step">
+            5. 动态渲染新组件
+          </div>
+          <div class="step">
+            6. 页面无刷新更新
+          </div>
         </div>
         <div class="mode-features">
           <div class="feature">
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
index d811f44..a4f47ae 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/NestedRoutesDemo.vue
@@ -53,7 +53,9 @@
                 <span class="view-icon">📦</span>
                 <span class="view-name">{{ route.name }}</span>
               </div>
-              <div class="view-path">{{ route.path || '/' }}</div>
+              <div class="view-path">
+                {{ route.path || '/' }}
+              </div>
             </div>
           </div>
         </div>
@@ -66,7 +68,10 @@
             @click="navigateTo(crumb.path)"
           >
             {{ crumb.name }}
-            <span v-if="index < breadcrumbs.length - 1" class="separator">/</span>
+            <span
+              v-if="index < breadcrumbs.length - 1"
+              class="separator"
+            >/</span>
           </span>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
index c0a0f07..daf7634 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteGuardsDemo.vue
@@ -22,19 +22,28 @@
             <span class="guard-icon">{{ guard.icon }}</span>
             <span class="guard-name">{{ guard.name }}</span>
           </div>
-          <div class="guard-desc">{{ guard.shortDesc }}</div>
+          <div class="guard-desc">
+            {{ guard.shortDesc }}
+          </div>
         </div>
       </div>
 
       <Transition name="fade">
-        <div v-if="activeGuard" class="guard-detail">
+        <div
+          v-if="activeGuard"
+          class="guard-detail"
+        >
           <div class="detail-header">
             <span class="detail-icon">{{ currentGuard?.icon }}</span>
             <span class="detail-title">{{ currentGuard?.name }}</span>
           </div>
-          <div class="detail-desc">{{ currentGuard?.description }}</div>
+          <div class="detail-desc">
+            {{ currentGuard?.description }}
+          </div>
           <div class="detail-example">
-            <div class="example-label">💻 代码示例：</div>
+            <div class="example-label">
+              💻 代码示例：
+            </div>
             <pre class="code-block">{{ currentGuard?.example }}</pre>
           </div>
         </div>
@@ -49,10 +58,16 @@
           :key="index"
           class="flow-step"
         >
-          <div class="step-number">{{ index + 1 }}</div>
+          <div class="step-number">
+            {{ index + 1 }}
+          </div>
           <div class="step-content">
-            <div class="step-name">{{ step.name }}</div>
-            <div class="step-desc">{{ step.description }}</div>
+            <div class="step-name">
+              {{ step.name }}
+            </div>
+            <div class="step-desc">
+              {{ step.description }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
index f829632..c1dff69 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouteMatchingDemo.vue
@@ -23,30 +23,49 @@
             @input="testMatch"
           >
         </div>
-        <div class="hint-text">试试：user/123 或 products/electronics/456</div>
+        <div class="hint-text">
+          试试：user/123 或 products/electronics/456
+        </div>
       </div>
 
       <div class="result-section">
         <h5>🎯 匹配结果</h5>
-        <div v-if="matchResult && matchResult.matched" class="match-success">
-          <div class="success-icon">✅</div>
+        <div
+          v-if="matchResult && matchResult.matched"
+          class="match-success"
+        >
+          <div class="success-icon">
+            ✅
+          </div>
           <div class="result-details">
             <div class="result-row">
               <span class="label">匹配路由:</span>
               <code class="value">{{ matchResult.route.path }}</code>
             </div>
-            <div v-if="Object.keys(matchResult.params).length" class="params-box">
+            <div
+              v-if="Object.keys(matchResult.params).length"
+              class="params-box"
+            >
               <span class="label">提取参数:</span>
               <div class="params-list">
-                <span v-for="(value, key) in matchResult.params" :key="key" class="param-tag">
+                <span
+                  v-for="(value, key) in matchResult.params"
+                  :key="key"
+                  class="param-tag"
+                >
                   {{ key }} = {{ value }}
                 </span>
               </div>
             </div>
           </div>
         </div>
-        <div v-else class="match-fail">
-          <div class="fail-icon">❌</div>
+        <div
+          v-else
+          class="match-fail"
+        >
+          <div class="fail-icon">
+            ❌
+          </div>
           <div>未找到匹配的路由</div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
index 097149c..511df6c 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RouterArchitectureDemo.vue
@@ -11,7 +11,11 @@
     </div>
 
     <div class="architecture-layers">
-      <div class="layer" v-for="(layer, index) in layers" :key="layer.name">
+      <div
+        v-for="(layer, index) in layers"
+        :key="layer.name"
+        class="layer"
+      >
         <div class="layer-header">
           <span class="layer-icon">{{ layer.icon }}</span>
           <span class="layer-name">{{ layer.name }}</span>
@@ -26,7 +30,12 @@
             {{ comp }}
           </div>
         </div>
-        <div v-if="index < layers.length - 1" class="layer-arrow">↓</div>
+        <div
+          v-if="index < layers.length - 1"
+          class="layer-arrow"
+        >
+          ↓
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
index 92291b2..c2e37d9 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/RoutingModesDemo.vue
@@ -25,20 +25,32 @@
     <div class="mode-detail">
       <div class="mode-info">
         <h5>{{ getCurrentMode().name }}</h5>
-        <p class="mode-desc">{{ getCurrentMode().description }}</p>
+        <p class="mode-desc">
+          {{ getCurrentMode().description }}
+        </p>
       </div>
 
       <div class="mode-features">
         <div class="feature-section">
           <h6>✅ 优点</h6>
           <ul>
-            <li v-for="pro in getCurrentMode().pros" :key="pro">{{ pro }}</li>
+            <li
+              v-for="pro in getCurrentMode().pros"
+              :key="pro"
+            >
+              {{ pro }}
+            </li>
           </ul>
         </div>
         <div class="feature-section">
           <h6>❌ 缺点</h6>
           <ul>
-            <li v-for="con in getCurrentMode().cons" :key="con">{{ con }}</li>
+            <li
+              v-for="con in getCurrentMode().cons"
+              :key="con"
+            >
+              {{ con }}
+            </li>
           </ul>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
index 707385c..dcd3c2e 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-routing/SpaNavigationDemo.vue
@@ -16,10 +16,16 @@
         :key="index"
         class="flow-step"
       >
-        <div class="step-number">{{ index + 1 }}</div>
+        <div class="step-number">
+          {{ index + 1 }}
+        </div>
         <div class="step-content">
-          <div class="step-title">{{ step.title }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
+          <div class="step-title">
+            {{ step.title }}
+          </div>
+          <div class="step-desc">
+            {{ step.desc }}
+          </div>
         </div>
       </div>
     </div>
@@ -30,22 +36,34 @@
         <div class="tip-item">
           <span class="tip-icon">🎯</span>
           <div class="tip-content">
-            <div class="tip-title">路由懒加载</div>
-            <div class="tip-desc">按需加载页面组件，减少初始包体积</div>
+            <div class="tip-title">
+              路由懒加载
+            </div>
+            <div class="tip-desc">
+              按需加载页面组件，减少初始包体积
+            </div>
           </div>
         </div>
         <div class="tip-item">
           <span class="tip-icon">🛡️</span>
           <div class="tip-content">
-            <div class="tip-title">守卫预加载</div>
-            <div class="tip-desc">在beforeEnter中预加载数据，提升用户体验</div>
+            <div class="tip-title">
+              守卫预加载
+            </div>
+            <div class="tip-desc">
+              在beforeEnter中预加载数据，提升用户体验
+            </div>
           </div>
         </div>
         <div class="tip-item">
           <span class="tip-icon">⚡</span>
           <div class="tip-content">
-            <div class="tip-title">过渡动画</div>
-            <div class="tip-desc">添加页面切换动画，让导航更流畅</div>
+            <div class="tip-title">
+              过渡动画
+            </div>
+            <div class="tip-desc">
+              添加页面切换动画，让导航更流畅
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
index ac0073f..b9b63a1 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/ApiGatewayDemo.vue
@@ -5,82 +5,147 @@
 <template>
   <div class="api-gateway-demo">
     <div class="header">
-      <div class="title">🚪 API 网关：系统的"统一大门"</div>
-      <div class="subtitle">想象成写字楼的「前台」——所有访客都要先经过这里，才能到达不同的办公室</div>
+      <div class="title">
+        🚪 API 网关：系统的"统一大门"
+      </div>
+      <div class="subtitle">
+        想象成写字楼的「前台」——所有访客都要先经过这里，才能到达不同的办公室
+      </div>
     </div>
 
     <div class="architecture-view">
       <div class="layer client-layer">
-        <div class="layer-title">客户端 (来访者)</div>
+        <div class="layer-title">
+          客户端 (来访者)
+        </div>
         <div class="clients">
-          <div class="client-item">📱 App</div>
-          <div class="client-item">💻 Web</div>
-          <div class="client-item">🔧 第三方</div>
+          <div class="client-item">
+            📱 App
+          </div>
+          <div class="client-item">
+            💻 Web
+          </div>
+          <div class="client-item">
+            🔧 第三方
+          </div>
         </div>
       </div>
 
-      <div class="arrow-down">⬇️ 统一入口</div>
+      <div class="arrow-down">
+        ⬇️ 统一入口
+      </div>
 
       <div class="layer gateway-layer">
-        <div class="layer-title">🚪 API 网关 (前台)</div>
+        <div class="layer-title">
+          🚪 API 网关 (前台)
+        </div>
         <div class="gateway-box">
-          <div class="gateway-function" :class="{ active: activeFunc === 'auth' }" @click="setActive('auth')">
+          <div
+            class="gateway-function"
+            :class="{ active: activeFunc === 'auth' }"
+            @click="setActive('auth')"
+          >
             <span class="func-icon">🔐</span>
             <span class="func-name">身份认证</span>
           </div>
-          <div class="gateway-function" :class="{ active: activeFunc === 'rate' }" @click="setActive('rate')">
+          <div
+            class="gateway-function"
+            :class="{ active: activeFunc === 'rate' }"
+            @click="setActive('rate')"
+          >
             <span class="func-icon">⚡</span>
             <span class="func-name">限流熔断</span>
           </div>
-          <div class="gateway-function" :class="{ active: activeFunc === 'route' }" @click="setActive('route')">
+          <div
+            class="gateway-function"
+            :class="{ active: activeFunc === 'route' }"
+            @click="setActive('route')"
+          >
             <span class="func-icon">🧭</span>
             <span class="func-name">路由转发</span>
           </div>
-          <div class="gateway-function" :class="{ active: activeFunc === 'transform' }" @click="setActive('transform')">
+          <div
+            class="gateway-function"
+            :class="{ active: activeFunc === 'transform' }"
+            @click="setActive('transform')"
+          >
             <span class="func-icon">🔄</span>
             <span class="func-name">协议转换</span>
           </div>
         </div>
       </div>
 
-      <div class="arrow-down">⬇️ 分发请求</div>
+      <div class="arrow-down">
+        ⬇️ 分发请求
+      </div>
 
       <div class="layer backend-layer">
-        <div class="layer-title">⚙️ 后端服务 (各个部门)</div>
+        <div class="layer-title">
+          ⚙️ 后端服务 (各个部门)
+        </div>
         <div class="services">
           <div class="service-card">
-            <div class="service-icon">👤</div>
-            <div class="service-name">用户服务</div>
-            <div class="service-tech">/api/users</div>
+            <div class="service-icon">
+              👤
+            </div>
+            <div class="service-name">
+              用户服务
+            </div>
+            <div class="service-tech">
+              /api/users
+            </div>
           </div>
           <div class="service-card">
-            <div class="service-icon">📦</div>
-            <div class="service-name">订单服务</div>
-            <div class="service-tech">/api/orders</div>
+            <div class="service-icon">
+              📦
+            </div>
+            <div class="service-name">
+              订单服务
+            </div>
+            <div class="service-tech">
+              /api/orders
+            </div>
           </div>
           <div class="service-card">
-            <div class="service-icon">💳</div>
-            <div class="service-name">支付服务</div>
-            <div class="service-tech">/api/pay</div>
+            <div class="service-icon">
+              💳
+            </div>
+            <div class="service-name">
+              支付服务
+            </div>
+            <div class="service-tech">
+              /api/pay
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="function-detail" v-if="activeFunc">
+    <div
+      v-if="activeFunc"
+      class="function-detail"
+    >
       <div class="detail-header">
         <span class="detail-icon">{{ currentFunction.icon }}</span>
         <span class="detail-name">{{ currentFunction.name }}</span>
       </div>
-      <div class="detail-desc">{{ currentFunction.desc }}</div>
+      <div class="detail-desc">
+        {{ currentFunction.desc }}
+      </div>
       <div class="detail-example">
-        <div class="example-title">💡 实际场景</div>
-        <div class="example-content">{{ currentFunction.example }}</div>
+        <div class="example-title">
+          💡 实际场景
+        </div>
+        <div class="example-content">
+          {{ currentFunction.example }}
+        </div>
       </div>
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">🤔 没有网关 vs 有网关的区别</div>
+      <div class="table-title">
+        🤔 没有网关 vs 有网关的区别
+      </div>
       <table>
         <thead>
           <tr>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
index 8ee59a3..bd16e03 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/AuthMiddlewareDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="auth-middleware-demo">
     <div class="header">
-      <div class="title">🔐 认证中间件：谁可以进大门？</div>
-      <div class="subtitle">想象成写字楼门禁——检查工牌、验证身份，没权限的人进不来</div>
+      <div class="title">
+        🔐 认证中间件：谁可以进大门？
+      </div>
+      <div class="subtitle">
+        想象成写字楼门禁——检查工牌、验证身份，没权限的人进不来
+      </div>
     </div>
 
     <div class="auth-tabs">
@@ -22,45 +26,91 @@
     </div>
 
     <div class="auth-flow">
-      <div class="flow-title">{{ currentAuthData.title }}</div>
+      <div class="flow-title">
+        {{ currentAuthData.title }}
+      </div>
 
       <div class="flow-diagram">
-        <div class="flow-step" v-for="(step, index) in currentAuthData.steps" :key="index">
-          <div class="step-number">{{ index + 1 }}</div>
+        <div
+          v-for="(step, index) in currentAuthData.steps"
+          :key="index"
+          class="flow-step"
+        >
+          <div class="step-number">
+            {{ index + 1 }}
+          </div>
           <div class="step-content">
-            <div class="step-actor">{{ step.actor }}</div>
-            <div class="step-action">{{ step.action }}</div>
-            <div class="step-arrow" v-if="index < currentAuthData.steps.length - 1">↓</div>
+            <div class="step-actor">
+              {{ step.actor }}
+            </div>
+            <div class="step-action">
+              {{ step.action }}
+            </div>
+            <div
+              v-if="index < currentAuthData.steps.length - 1"
+              class="step-arrow"
+            >
+              ↓
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="token-display" v-if="currentAuth === 'jwt'">
-        <div class="token-header">🔑 JWT Token 结构（Base64编码）</div>
+      <div
+        v-if="currentAuth === 'jwt'"
+        class="token-display"
+      >
+        <div class="token-header">
+          🔑 JWT Token 结构（Base64编码）
+        </div>
         <div class="token-parts">
           <div class="token-part header">
-            <div class="part-label">HEADER</div>
-            <div class="part-content">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</div>
-            <div class="part-decoded">{ "alg": "HS256", "typ": "JWT" }</div>
+            <div class="part-label">
+              HEADER
+            </div>
+            <div class="part-content">
+              eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+            </div>
+            <div class="part-decoded">
+              { "alg": "HS256", "typ": "JWT" }
+            </div>
+          </div>
+          <div class="token-separator">
+            .
           </div>
-          <div class="token-separator">.</div>
           <div class="token-part payload">
-            <div class="part-label">PAYLOAD</div>
-            <div class="part-content">eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ</div>
-            <div class="part-decoded">{ "sub": "1234567890", "name": "John Doe", "iat": 1516239022 }</div>
+            <div class="part-label">
+              PAYLOAD
+            </div>
+            <div class="part-content">
+              eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
+            </div>
+            <div class="part-decoded">
+              { "sub": "1234567890", "name": "John Doe", "iat": 1516239022 }
+            </div>
+          </div>
+          <div class="token-separator">
+            .
           </div>
-          <div class="token-separator">.</div>
           <div class="token-part signature">
-            <div class="part-label">SIGNATURE</div>
-            <div class="part-content">SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</div>
-            <div class="part-decoded">HMACSHA256(base64Url(header) + "." + base64Url(payload), secret)</div>
+            <div class="part-label">
+              SIGNATURE
+            </div>
+            <div class="part-content">
+              SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
+            </div>
+            <div class="part-decoded">
+              HMACSHA256(base64Url(header) + "." + base64Url(payload), secret)
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="implementation-comparison">
-      <div class="section-title">🛠️ 三种方案实现对比</div>
+      <div class="section-title">
+        🛠️ 三种方案实现对比
+      </div>
 
       <table class="comparison-table">
         <thead>
@@ -73,31 +123,41 @@
         </thead>
         <tbody>
           <tr>
-            <td class="dim">存储位置</td>
+            <td class="dim">
+              存储位置
+            </td>
             <td>服务端存储 Session，客户端存 Cookie</td>
             <td>客户端存储 Token，服务端无状态</td>
             <td>授权服务器存储，客户端存 Access Token</td>
           </tr>
           <tr>
-            <td class="dim">扩展性</td>
+            <td class="dim">
+              扩展性
+            </td>
             <td>❌ 需要共享 Session，扩展复杂</td>
             <td>✅ 无状态，易于水平扩展</td>
             <td>✅ 分布式架构，支持大规模系统</td>
           </tr>
           <tr>
-            <td class="dim">安全性</td>
+            <td class="dim">
+              安全性
+            </td>
             <td>⚠️ Cookie 可能被窃取，需要 CSRF 防护</td>
             <td>⚠️ Token 泄露风险，需 HTTPS + 短期有效</td>
             <td>✅ 行业最佳实践，支持多种安全机制</td>
           </tr>
           <tr>
-            <td class="dim">实现复杂度</td>
+            <td class="dim">
+              实现复杂度
+            </td>
             <td>🟢 简单，开箱即用</td>
             <td>🟡 中等，需要 Token 管理</td>
             <td>🔴 复杂，需要授权服务器</td>
           </tr>
           <tr>
-            <td class="dim">适用场景</td>
+            <td class="dim">
+              适用场景
+            </td>
             <td>传统 Web 应用、后台管理系统</td>
             <td>SPA、移动端 API、微服务</td>
             <td>第三方登录、开放平台、SSO</td>
@@ -107,34 +167,60 @@
     </div>
 
     <div class="security-tips">
-      <div class="tips-title">🔒 网关层认证最佳实践</div>
+      <div class="tips-title">
+        🔒 网关层认证最佳实践
+      </div>
       <div class="tips-list">
         <div class="tip-item">
-          <div class="tip-icon">1</div>
+          <div class="tip-icon">
+            1
+          </div>
           <div class="tip-content">
-            <div class="tip-heading">统一在网关层验证</div>
-            <div class="tip-desc">不要在每个微服务里重复写认证逻辑，统一在网关层校验 JWT 或 Session</div>
+            <div class="tip-heading">
+              统一在网关层验证
+            </div>
+            <div class="tip-desc">
+              不要在每个微服务里重复写认证逻辑，统一在网关层校验 JWT 或 Session
+            </div>
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-icon">2</div>
+          <div class="tip-icon">
+            2
+          </div>
           <div class="tip-content">
-            <div class="tip-heading">HTTPS 强制</div>
-            <div class="tip-desc">网关层强制 HTTPS，防止 Token 在传输过程中被窃取（中间人攻击）</div>
+            <div class="tip-heading">
+              HTTPS 强制
+            </div>
+            <div class="tip-desc">
+              网关层强制 HTTPS，防止 Token 在传输过程中被窃取（中间人攻击）
+            </div>
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-icon">3</div>
+          <div class="tip-icon">
+            3
+          </div>
           <div class="tip-content">
-            <div class="tip-heading">Token 过期策略</div>
-            <div class="tip-desc">Access Token 短期有效（15分钟），配合 Refresh Token 实现无感知续期</div>
+            <div class="tip-heading">
+              Token 过期策略
+            </div>
+            <div class="tip-desc">
+              Access Token 短期有效（15分钟），配合 Refresh Token 实现无感知续期
+            </div>
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-icon">4</div>
+          <div class="tip-icon">
+            4
+          </div>
           <div class="tip-content">
-            <div class="tip-heading">黑名单机制</div>
-            <div class="tip-desc">用户登出或 Token 泄露时，将 Token 加入黑名单（Redis 存储）</div>
+            <div class="tip-heading">
+              黑名单机制
+            </div>
+            <div class="tip-desc">
+              用户登出或 Token 泄露时，将 Token 加入黑名单（Redis 存储）
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
index 536d19c..bd9ad8e 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/LoadBalancingDemo.vue
@@ -5,12 +5,18 @@
 <template>
   <div class="load-balancing-demo">
     <div class="header">
-      <div class="title">⚖️ 负载均衡：把"压力"均匀分摊到多台服务器</div>
-      <div class="subtitle">想象成银行的取号系统——把客户均匀分配到各个窗口，避免某个窗口排长队</div>
+      <div class="title">
+        ⚖️ 负载均衡：把"压力"均匀分摊到多台服务器
+      </div>
+      <div class="subtitle">
+        想象成银行的取号系统——把客户均匀分配到各个窗口，避免某个窗口排长队
+      </div>
     </div>
 
     <div class="strategy-selector">
-      <div class="selector-title">选择负载均衡策略</div>
+      <div class="selector-title">
+        选择负载均衡策略
+      </div>
       <div class="strategy-tabs">
         <button
           v-for="strategy in strategies"
@@ -20,36 +26,64 @@
         >
           <span class="tab-icon">{{ strategy.icon }}</span>
           <span class="tab-name">{{ strategy.name }}</span>
-          <span class="tab-badge" v-if="strategy.badge">{{ strategy.badge }}</span>
+          <span
+            v-if="strategy.badge"
+            class="tab-badge"
+          >{{ strategy.badge }}</span>
         </button>
       </div>
     </div>
 
     <div class="simulation-area">
       <div class="sim-header">
-        <div class="sim-title">🎮 负载均衡模拟器</div>
+        <div class="sim-title">
+          🎮 负载均衡模拟器
+        </div>
         <div class="sim-controls">
-          <button class="sim-btn" @click="startSimulation" :disabled="isSimulating">
+          <button
+            class="sim-btn"
+            :disabled="isSimulating"
+            @click="startSimulation"
+          >
             {{ isSimulating ? '运行中...' : '▶ 开始模拟' }}
           </button>
-          <button class="sim-btn reset" @click="resetSimulation">↺ 重置</button>
+          <button
+            class="sim-btn reset"
+            @click="resetSimulation"
+          >
+            ↺ 重置
+          </button>
         </div>
       </div>
 
       <div class="strategy-explanation">
-        <div class="exp-icon">💡</div>
+        <div class="exp-icon">
+          💡
+        </div>
         <div class="exp-content">
-          <div class="exp-title">{{ currentStrategyData.name }} - {{ currentStrategyData.shortDesc }}</div>
-          <div class="exp-desc">{{ currentStrategyData.fullDesc }}</div>
+          <div class="exp-title">
+            {{ currentStrategyData.name }} - {{ currentStrategyData.shortDesc }}
+          </div>
+          <div class="exp-desc">
+            {{ currentStrategyData.fullDesc }}
+          </div>
         </div>
       </div>
 
       <div class="servers-pool">
         <div class="pool-header">
-          <div class="pool-title">🏢 后端服务器集群</div>
+          <div class="pool-title">
+            🏢 后端服务器集群
+          </div>
           <div class="pool-config">
             <label>服务器数量:</label>
-            <input type="range" v-model="serverCount" min="2" max="6" :disabled="isSimulating" />
+            <input
+              v-model="serverCount"
+              type="range"
+              min="2"
+              max="6"
+              :disabled="isSimulating"
+            >
             <span>{{ serverCount }} 台</span>
           </div>
         </div>
@@ -62,9 +96,16 @@
             :style="{ borderColor: server.color }"
           >
             <div class="server-header">
-              <div class="server-icon">🖥️</div>
-              <div class="server-name">{{ server.name }}</div>
-              <div class="server-status" :style="{ background: server.color }">
+              <div class="server-icon">
+                🖥️
+              </div>
+              <div class="server-name">
+                {{ server.name }}
+              </div>
+              <div
+                class="server-status"
+                :style="{ background: server.color }"
+              >
                 {{ server.load }}%
               </div>
             </div>
@@ -78,23 +119,28 @@
                 <span class="metric-label">权重:</span>
                 <input
                   v-if="currentStrategy === 'weighted'"
-                  type="number"
                   v-model.number="server.weight"
+                  type="number"
                   min="1"
                   max="10"
                   :disabled="isSimulating"
                   class="weight-input"
-                />
+                >
                 <span v-else>{{ server.weight }}</span>
               </div>
             </div>
 
             <div class="load-bar">
-              <div class="load-fill" :style="{ width: server.load + '%', background: server.color }"></div>
+              <div
+                class="load-fill"
+                :style="{ width: server.load + '%', background: server.color }"
+              />
             </div>
 
             <div class="recent-requests">
-              <div class="req-label">最近请求:</div>
+              <div class="req-label">
+                最近请求:
+              </div>
               <div class="req-list">
                 <span
                   v-for="(req, idx) in server.recentRequests"
@@ -112,7 +158,9 @@
 
       <div class="request-queue">
         <div class="queue-header">
-          <div class="queue-title">📨 请求队列</div>
+          <div class="queue-title">
+            📨 请求队列
+          </div>
           <div class="queue-stats">
             <span>总请求: {{ totalRequests }}</span>
             <span>待处理: {{ pendingRequests.length }}</span>
@@ -127,32 +175,57 @@
           >
             <span class="req-id">#{{ req.id }}</span>
             <span class="req-arrow">→</span>
-            <span v-if="req.assignedServer" class="req-target" :style="{ color: req.serverColor }">
+            <span
+              v-if="req.assignedServer"
+              class="req-target"
+              :style="{ color: req.serverColor }"
+            >
               {{ req.assignedServer }}
             </span>
-            <span v-else class="req-status">{{ req.statusText }}</span>
+            <span
+              v-else
+              class="req-status"
+            >{{ req.statusText }}</span>
           </div>
         </div>
       </div>
 
       <div class="strategy-stats">
-        <div class="stats-title">📊 负载分布统计</div>
+        <div class="stats-title">
+          📊 负载分布统计
+        </div>
         <div class="stats-grid">
           <div class="stat-card">
-            <div class="stat-value">{{ avgLoad }}%</div>
-            <div class="stat-label">平均负载</div>
+            <div class="stat-value">
+              {{ avgLoad }}%
+            </div>
+            <div class="stat-label">
+              平均负载
+            </div>
           </div>
           <div class="stat-card">
-            <div class="stat-value">{{ maxLoad }}%</div>
-            <div class="stat-label">最高负载</div>
+            <div class="stat-value">
+              {{ maxLoad }}%
+            </div>
+            <div class="stat-label">
+              最高负载
+            </div>
           </div>
           <div class="stat-card">
-            <div class="stat-value">{{ loadStdDev }}</div>
-            <div class="stat-label">负载标准差</div>
+            <div class="stat-value">
+              {{ loadStdDev }}
+            </div>
+            <div class="stat-label">
+              负载标准差
+            </div>
           </div>
           <div class="stat-card">
-            <div class="stat-value">{{ mostBusyServer || '-' }}</div>
-            <div class="stat-label">最忙服务器</div>
+            <div class="stat-value">
+              {{ mostBusyServer || '-' }}
+            </div>
+            <div class="stat-label">
+              最忙服务器
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
index 13d0b33..5ee520d 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/NginxArchitectureDemo.vue
@@ -5,67 +5,119 @@
 <template>
   <div class="nginx-architecture-demo">
     <div class="header">
-      <div class="title">⚡ Nginx 架构揭秘：为什么它能扛住百万并发？</div>
-      <div class="subtitle">Master-Worker 进程模型 + 事件驱动 = 高性能的秘诀</div>
+      <div class="title">
+        ⚡ Nginx 架构揭秘：为什么它能扛住百万并发？
+      </div>
+      <div class="subtitle">
+        Master-Worker 进程模型 + 事件驱动 = 高性能的秘诀
+      </div>
     </div>
 
     <div class="architecture-diagram">
-      <div class="diagram-title">Nginx 进程架构图</div>
+      <div class="diagram-title">
+        Nginx 进程架构图
+      </div>
 
       <div class="process-layer master-layer">
         <div class="process master">
-          <div class="process-icon">👑</div>
+          <div class="process-icon">
+            👑
+          </div>
           <div class="process-info">
-            <div class="process-name">Master 进程</div>
-            <div class="process-desc">管理所有 Worker，负责配置加载、平滑升级</div>
+            <div class="process-name">
+              Master 进程
+            </div>
+            <div class="process-desc">
+              管理所有 Worker，负责配置加载、平滑升级
+            </div>
           </div>
         </div>
       </div>
 
       <div class="connections">
-        <div class="connection-line" v-for="n in workerCount" :key="n"></div>
+        <div
+          v-for="n in workerCount"
+          :key="n"
+          class="connection-line"
+        />
       </div>
 
       <div class="process-layer worker-layer">
         <div class="worker-controls">
-          <button class="control-btn" @click="decreaseWorker" :disabled="workerCount <= 1">-</button>
+          <button
+            class="control-btn"
+            :disabled="workerCount <= 1"
+            @click="decreaseWorker"
+          >
+            -
+          </button>
           <span class="worker-count">{{ workerCount }} 个 Worker</span>
-          <button class="control-btn" @click="increaseWorker" :disabled="workerCount >= 8">+</button>
+          <button
+            class="control-btn"
+            :disabled="workerCount >= 8"
+            @click="increaseWorker"
+          >
+            +
+          </button>
         </div>
 
         <div class="workers">
           <div
-            class="process worker"
             v-for="n in workerCount"
             :key="n"
+            class="process worker"
             :class="{ active: activeWorker === n, processing: processingWorkers.includes(n) }"
             @click="activateWorker(n)"
           >
-            <div class="process-icon">⚙️</div>
-            <div class="process-info">
-              <div class="process-name">Worker {{ n }}</div>
-              <div class="process-desc">处理 {{ requestCounts[n] || 0 }} 请求</div>
+            <div class="process-icon">
+              ⚙️
             </div>
-            <div class="status-indicator"></div>
+            <div class="process-info">
+              <div class="process-name">
+                Worker {{ n }}
+              </div>
+              <div class="process-desc">
+                处理 {{ requestCounts[n] || 0 }} 请求
+              </div>
+            </div>
+            <div class="status-indicator" />
           </div>
         </div>
       </div>
 
       <div class="epoll-layer">
         <div class="epoll-box">
-          <div class="epoll-title">📡 epoll (Linux) / kqueue (macOS)</div>
-          <div class="epoll-desc">事件驱动：一个 Worker 同时处理数万个连接</div>
+          <div class="epoll-title">
+            📡 epoll (Linux) / kqueue (macOS)
+          </div>
+          <div class="epoll-desc">
+            事件驱动：一个 Worker 同时处理数万个连接
+          </div>
           <div class="epoll-comparison">
             <div class="compare-item old">
-              <div class="compare-title">传统 Apache</div>
-              <div class="compare-detail">一个连接 = 一个进程/线程</div>
-              <div class="compare-result">❌ C10K 问题</div>
+              <div class="compare-title">
+                传统 Apache
+              </div>
+              <div class="compare-detail">
+                一个连接 = 一个进程/线程
+              </div>
+              <div class="compare-result">
+                ❌ C10K 问题
+              </div>
+            </div>
+            <div class="vs">
+              VS
             </div>
-            <div class="vs">VS</div>
             <div class="compare-item new">
-              <div class="compare-title">Nginx</div>
-              <div class="compare-detail">事件驱动 + 异步非阻塞</div>
-              <div class="compare-result">✅ 百万并发</div>
+              <div class="compare-title">
+                Nginx
+              </div>
+              <div class="compare-detail">
+                事件驱动 + 异步非阻塞
+              </div>
+              <div class="compare-result">
+                ✅ 百万并发
+              </div>
             </div>
           </div>
         </div>
@@ -73,31 +125,59 @@
     </div>
 
     <div class="simulation-panel">
-      <div class="panel-title">🎮 模拟请求处理</div>
+      <div class="panel-title">
+        🎮 模拟请求处理
+      </div>
       <div class="sim-controls">
-        <button class="sim-btn" @click="simulateRequests" :disabled="isSimulating">
+        <button
+          class="sim-btn"
+          :disabled="isSimulating"
+          @click="simulateRequests"
+        >
           {{ isSimulating ? '处理中...' : '发送 20 个并发请求' }}
         </button>
-        <button class="sim-btn secondary" @click="resetSimulation">重置</button>
+        <button
+          class="sim-btn secondary"
+          @click="resetSimulation"
+        >
+          重置
+        </button>
       </div>
-      <div class="sim-stats" v-if="totalRequests > 0">
+      <div
+        v-if="totalRequests > 0"
+        class="sim-stats"
+      >
         <div class="stat-item">
-          <div class="stat-value">{{ totalRequests }}</div>
-          <div class="stat-label">总请求数</div>
+          <div class="stat-value">
+            {{ totalRequests }}
+          </div>
+          <div class="stat-label">
+            总请求数
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-value">{{ mostActiveWorker }}</div>
-          <div class="stat-label">最忙 Worker</div>
+          <div class="stat-value">
+            {{ mostActiveWorker }}
+          </div>
+          <div class="stat-label">
+            最忙 Worker
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-value">{{ avgRequests.toFixed(1) }}</div>
-          <div class="stat-label">平均/Worker</div>
+          <div class="stat-value">
+            {{ avgRequests.toFixed(1) }}
+          </div>
+          <div class="stat-label">
+            平均/Worker
+          </div>
         </div>
       </div>
     </div>
 
     <div class="config-tip">
-      <div class="tip-title">💡 生产环境建议</div>
+      <div class="tip-title">
+        💡 生产环境建议
+      </div>
       <div class="tip-content">
         <strong>Worker 数量 = CPU 核心数</strong>（通常设置为 auto，让 Nginx 自动检测）
         <br>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
index 09c4a8c..81e98d1 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/RateLimitingDemo.vue
@@ -5,12 +5,18 @@
 <template>
   <div class="rate-limiting-demo">
     <div class="header">
-      <div class="title">⚡ 限流算法：系统不会被"流量洪水"冲垮的秘诀</div>
-      <div class="subtitle">想象成水坝的闸门——控制水流速度，防止下游被淹没</div>
+      <div class="title">
+        ⚡ 限流算法：系统不会被"流量洪水"冲垮的秘诀
+      </div>
+      <div class="subtitle">
+        想象成水坝的闸门——控制水流速度，防止下游被淹没
+      </div>
     </div>
 
     <div class="algorithm-selector">
-      <div class="selector-title">选择限流算法</div>
+      <div class="selector-title">
+        选择限流算法
+      </div>
       <div class="algorithm-tabs">
         <button
           v-for="algo in algorithms"
@@ -26,44 +32,70 @@
 
     <div class="visualization-area">
       <div class="vis-header">
-        <div class="vis-title">{{ currentAlgoData.visualTitle }}</div>
+        <div class="vis-title">
+          {{ currentAlgoData.visualTitle }}
+        </div>
         <div class="vis-controls">
-          <button class="control-btn" @click="toggleSimulation" :disabled="isSimulating">
+          <button
+            class="control-btn"
+            :disabled="isSimulating"
+            @click="toggleSimulation"
+          >
             {{ isSimulating ? '模拟中...' : '▶ 开始模拟' }}
           </button>
-          <button class="control-btn reset" @click="resetSimulation">↺ 重置</button>
+          <button
+            class="control-btn reset"
+            @click="resetSimulation"
+          >
+            ↺ 重置
+          </button>
         </div>
       </div>
 
       <!-- 令牌桶可视化 -->
-      <div v-if="currentAlgo === 'token'" class="token-bucket-vis">
+      <div
+        v-if="currentAlgo === 'token'"
+        class="token-bucket-vis"
+      >
         <div class="bucket-container">
           <div class="bucket">
-            <div class="bucket-label">令牌桶</div>
+            <div class="bucket-label">
+              令牌桶
+            </div>
             <div class="tokens-area">
               <div
                 v-for="n in bucketState.tokens"
                 :key="n"
                 class="token"
                 :style="{ animationDelay: `${n * 0.1}s` }"
-              >🪙</div>
+              >
+                🪙
+              </div>
+            </div>
+            <div class="bucket-capacity">
+              {{ bucketState.tokens }} / {{ bucketState.capacity }} 令牌
             </div>
-            <div class="bucket-capacity">{{ bucketState.tokens }} / {{ bucketState.capacity }} 令牌</div>
           </div>
           <div class="token-producer">
-            <div class="producer-label">⏰ 令牌产生器 ({{ bucketState.rate }}/秒)</div>
+            <div class="producer-label">
+              ⏰ 令牌产生器 ({{ bucketState.rate }}/秒)
+            </div>
             <div class="producer-stream">
               <div
                 v-for="n in 3"
                 :key="n"
                 class="producing-token"
                 :style="{ animationDelay: `${n * 0.3}s` }"
-              >🪙</div>
+              >
+                🪙
+              </div>
             </div>
           </div>
         </div>
         <div class="requests-queue">
-          <div class="queue-title">📥 请求队列</div>
+          <div class="queue-title">
+            📥 请求队列
+          </div>
           <div class="requests">
             <div
               v-for="(req, index) in requestQueue"
@@ -80,46 +112,65 @@
       </div>
 
       <!-- 漏桶可视化 -->
-      <div v-if="currentAlgo === 'leaky'" class="leaky-bucket-vis">
+      <div
+        v-if="currentAlgo === 'leaky'"
+        class="leaky-bucket-vis"
+      >
         <div class="leaky-container">
           <div class="leaky-bucket">
-            <div class="bucket-label">漏桶</div>
+            <div class="bucket-label">
+              漏桶
+            </div>
             <div class="bucket-content">
               <div
                 class="water-level"
                 :style="{ height: `${(leakyState.current / leakyState.capacity) * 100}%` }"
-              ></div>
+              />
+            </div>
+            <div class="bucket-stats">
+              {{ leakyState.current }} / {{ leakyState.capacity }} 请求
             </div>
-            <div class="bucket-stats">{{ leakyState.current }} / {{ leakyState.capacity }} 请求</div>
           </div>
           <div class="leak-hole">
-            <div class="hole">🔘</div>
-            <div class="leak-rate">⏱️ 流出速率: {{ leakyState.rate }}/秒</div>
+            <div class="hole">
+              🔘
+            </div>
+            <div class="leak-rate">
+              ⏱️ 流出速率: {{ leakyState.rate }}/秒
+            </div>
           </div>
         </div>
         <div class="leaky-legend">
           <div class="legend-item">
-            <span class="legend-color water"></span>
+            <span class="legend-color water" />
             <span>桶内请求（排队中）</span>
           </div>
           <div class="legend-item">
-            <span class="legend-color hole"></span>
+            <span class="legend-color hole" />
             <span>匀速流出（处理中）</span>
           </div>
           <div class="legend-item">
-            <span class="legend-color overflow"></span>
+            <span class="legend-color overflow" />
             <span>桶满溢出（被拒绝）</span>
           </div>
         </div>
       </div>
 
       <!-- 滑动窗口可视化 -->
-      <div v-if="currentAlgo === 'sliding'" class="sliding-window-vis">
+      <div
+        v-if="currentAlgo === 'sliding'"
+        class="sliding-window-vis"
+      >
         <div class="window-container">
-          <div class="window-label">⏰ 时间窗口（过去1分钟）</div>
+          <div class="window-label">
+            ⏰ 时间窗口（过去1分钟）
+          </div>
           <div class="window-timeline">
             <div class="time-marks">
-              <span v-for="n in 6" :key="n">{{ 60 - (n - 1) * 10 }}s</span>
+              <span
+                v-for="n in 6"
+                :key="n"
+              >{{ 60 - (n - 1) * 10 }}s</span>
             </div>
             <div class="window-bars">
               <div
@@ -129,7 +180,10 @@
                 :class="{ active: slot.count > 0, current: index === slidingWindow.currentSlot }"
                 :style="{ height: `${Math.min((slot.count / 20) * 100, 100)}%` }"
               >
-                <span class="slot-count" v-if="slot.count > 0">{{ slot.count }}</span>
+                <span
+                  v-if="slot.count > 0"
+                  class="slot-count"
+                >{{ slot.count }}</span>
               </div>
             </div>
           </div>
@@ -144,7 +198,10 @@
             </div>
             <div class="stat">
               <span class="stat-label">剩余额度:</span>
-              <span class="stat-value" :class="{ warning: slidingWindow.remaining < 20 }">{{ slidingWindow.remaining }}</span>
+              <span
+                class="stat-value"
+                :class="{ warning: slidingWindow.remaining < 20 }"
+              >{{ slidingWindow.remaining }}</span>
             </div>
           </div>
         </div>
@@ -152,7 +209,9 @@
     </div>
 
     <div class="comparison-section">
-      <div class="section-title">📊 三种算法对比</div>
+      <div class="section-title">
+        📊 三种算法对比
+      </div>
       <table class="comparison-table">
         <thead>
           <tr>
@@ -164,31 +223,41 @@
         </thead>
         <tbody>
           <tr>
-            <td class="dim">核心思想</td>
+            <td class="dim">
+              核心思想
+            </td>
             <td>桶里装令牌，有令牌才能通过</td>
             <td>请求进桶，匀速流出处理</td>
             <td>统计时间窗口内的请求数</td>
           </tr>
           <tr>
-            <td class="dim">突发流量</td>
+            <td class="dim">
+              突发流量
+            </td>
             <td>✅ 允许一定程度的突发（桶里有令牌）</td>
             <td>❌ 强制平滑，突发会被缓存或拒绝</td>
             <td>❌ 严格按窗口计数，超出一律拒绝</td>
           </tr>
           <tr>
-            <td class="dim">适用场景</td>
+            <td class="dim">
+              适用场景
+            </td>
             <td>API 限流、带宽控制（允许突发）</td>
             <td>需要严格匀速处理的场景（如消息队列）</td>
             <td>精确统计（如"1分钟内最多100次"）</td>
           </tr>
           <tr>
-            <td class="dim">实现复杂度</td>
+            <td class="dim">
+              实现复杂度
+            </td>
             <td>中等</td>
             <td>中等</td>
             <td>较高（需要记录每个时间窗口的请求）</td>
           </tr>
           <tr>
-            <td class="dim">Nginx 配置</td>
+            <td class="dim">
+              Nginx 配置
+            </td>
             <td>limit_req_zone (漏桶)</td>
             <td>limit_req_zone (漏桶)</td>
             <td>需第三方模块或 Lua</td>
@@ -198,7 +267,9 @@
     </div>
 
     <div class="nginx-config">
-      <div class="config-title">📝 Nginx 限流配置示例</div>
+      <div class="config-title">
+        📝 Nginx 限流配置示例
+      </div>
       <div class="config-tabs">
         <button
           v-for="config in nginxConfigs"
@@ -211,9 +282,16 @@
       </div>
       <pre class="config-code"><code>{{ currentNginxConfig.code }}</code></pre>
       <div class="config-explanation">
-        <div class="exp-title">💡 配置说明</div>
+        <div class="exp-title">
+          💡 配置说明
+        </div>
         <ul>
-          <li v-for="(item, index) in currentNginxConfig.explanation" :key="index">{{ item }}</li>
+          <li
+            v-for="(item, index) in currentNginxConfig.explanation"
+            :key="index"
+          >
+            {{ item }}
+          </li>
         </ul>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
index 95c09a2..311e9d9 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/ReverseProxyDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="reverse-proxy-demo">
     <div class="header">
-      <div class="title">🔄 反向代理 vs 正向代理</div>
-      <div class="subtitle">一句话区分：正向代理是"客户端的代理"，反向代理是"服务器的代理"</div>
+      <div class="title">
+        🔄 反向代理 vs 正向代理
+      </div>
+      <div class="subtitle">
+        一句话区分：正向代理是"客户端的代理"，反向代理是"服务器的代理"
+      </div>
     </div>
 
     <div class="mode-selector">
@@ -25,52 +29,104 @@
     </div>
 
     <div class="flow-container">
-      <div class="flow-row" v-if="mode === 'forward'">
+      <div
+        v-if="mode === 'forward'"
+        class="flow-row"
+      >
         <div class="flow-card client">
-          <div class="icon">👤</div>
-          <div class="label">用户 (想翻墙)</div>
+          <div class="icon">
+            👤
+          </div>
+          <div class="label">
+            用户 (想翻墙)
+          </div>
         </div>
         <div class="arrow-box">
-          <div class="arrow">→</div>
-          <div class="note">发给代理</div>
+          <div class="arrow">
+            →
+          </div>
+          <div class="note">
+            发给代理
+          </div>
         </div>
         <div class="flow-card proxy forward">
-          <div class="icon">🔓</div>
-          <div class="label">正向代理 (VPN/SS)</div>
-          <div class="tag">代理客户端</div>
+          <div class="icon">
+            🔓
+          </div>
+          <div class="label">
+            正向代理 (VPN/SS)
+          </div>
+          <div class="tag">
+            代理客户端
+          </div>
         </div>
         <div class="arrow-box">
-          <div class="arrow">→</div>
-          <div class="note">转发请求</div>
+          <div class="arrow">
+            →
+          </div>
+          <div class="note">
+            转发请求
+          </div>
         </div>
         <div class="flow-card target">
-          <div class="icon">🌐</div>
-          <div class="label">目标网站 (Google)</div>
+          <div class="icon">
+            🌐
+          </div>
+          <div class="label">
+            目标网站 (Google)
+          </div>
         </div>
       </div>
 
-      <div class="flow-row" v-if="mode === 'reverse'">
+      <div
+        v-if="mode === 'reverse'"
+        class="flow-row"
+      >
         <div class="flow-card client">
-          <div class="icon">👤</div>
-          <div class="label">用户 (浏览器)</div>
+          <div class="icon">
+            👤
+          </div>
+          <div class="label">
+            用户 (浏览器)
+          </div>
         </div>
         <div class="arrow-box">
-          <div class="arrow">→</div>
-          <div class="note">访问域名</div>
+          <div class="arrow">
+            →
+          </div>
+          <div class="note">
+            访问域名
+          </div>
         </div>
         <div class="flow-card proxy reverse">
-          <div class="icon">🛡️</div>
-          <div class="label">反向代理 (Nginx)</div>
-          <div class="tag">代理服务器</div>
+          <div class="icon">
+            🛡️
+          </div>
+          <div class="label">
+            反向代理 (Nginx)
+          </div>
+          <div class="tag">
+            代理服务器
+          </div>
         </div>
         <div class="arrow-box">
-          <div class="arrow">→</div>
-          <div class="note">负载均衡</div>
+          <div class="arrow">
+            →
+          </div>
+          <div class="note">
+            负载均衡
+          </div>
         </div>
         <div class="flow-card server">
-          <div class="icon">⚙️</div>
-          <div class="label">后端服务器集群</div>
-          <div class="sub-label">Web1 | Web2 | Web3</div>
+          <div class="icon">
+            ⚙️
+          </div>
+          <div class="label">
+            后端服务器集群
+          </div>
+          <div class="sub-label">
+            Web1 | Web2 | Web3
+          </div>
         </div>
       </div>
     </div>
@@ -81,19 +137,33 @@
           {{ mode === 'forward' ? '🔓 正向代理特点' : '🛡️ 反向代理特点' }}
         </div>
         <ul class="detail-list">
-          <li v-for="(item, index) in currentFeatures" :key="index">{{ item }}</li>
+          <li
+            v-for="(item, index) in currentFeatures"
+            :key="index"
+          >
+            {{ item }}
+          </li>
         </ul>
       </div>
       <div class="detail-card">
-        <div class="detail-title">💡 典型使用场景</div>
+        <div class="detail-title">
+          💡 典型使用场景
+        </div>
         <ul class="detail-list">
-          <li v-for="(item, index) in currentScenarios" :key="index">{{ item }}</li>
+          <li
+            v-for="(item, index) in currentScenarios"
+            :key="index"
+          >
+            {{ item }}
+          </li>
         </ul>
       </div>
     </div>
 
     <div class="memory-trick">
-      <div class="trick-title">🧠 记忆口诀</div>
+      <div class="trick-title">
+        🧠 记忆口诀
+      </div>
       <div class="trick-content">
         <p v-if="mode === 'forward'">
           <strong>"正向代理 = 代理客户端"</strong> —— 客户端知情，服务器只知道代理IP
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
index bd84309..e10fe59 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/RoutingRulesDemo.vue
@@ -5,56 +5,86 @@
 <template>
   <div class="routing-rules-demo">
     <div class="header">
-      <div class="title">🧭 路由规则：如何把请求送到正确的服务？</div>
-      <div class="subtitle">想象成快递分拣中心——根据地址把包裹分配到不同的配送站</div>
+      <div class="title">
+        🧭 路由规则：如何把请求送到正确的服务？
+      </div>
+      <div class="subtitle">
+        想象成快递分拣中心——根据地址把包裹分配到不同的配送站
+      </div>
     </div>
 
     <div class="playground">
       <div class="playground-header">
-        <div class="playground-title">🎮 路由规则实验室</div>
-        <div class="playground-subtitle">输入一个 URL，看看它会被路由到哪个服务</div>
+        <div class="playground-title">
+          🎮 路由规则实验室
+        </div>
+        <div class="playground-subtitle">
+          输入一个 URL，看看它会被路由到哪个服务
+        </div>
       </div>
 
       <div class="input-section">
         <div class="input-group">
           <label>HTTP 方法</label>
           <select v-model="request.method">
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PUT">PUT</option>
-            <option value="DELETE">DELETE</option>
+            <option value="GET">
+              GET
+            </option>
+            <option value="POST">
+              POST
+            </option>
+            <option value="PUT">
+              PUT
+            </option>
+            <option value="DELETE">
+              DELETE
+            </option>
           </select>
         </div>
         <div class="input-group flex-2">
           <label>URL 路径</label>
           <input
-            type="text"
             v-model="request.path"
+            type="text"
             placeholder="/api/users/123"
             @keyup.enter="matchRoute"
-          />
+          >
         </div>
         <div class="input-group">
           <label>Header (可选)</label>
           <input
-            type="text"
             v-model="request.header"
+            type="text"
             placeholder="X-Version: v2"
-          />
+          >
         </div>
       </div>
 
-      <button class="match-btn" @click="matchRoute" :disabled="isMatching">
+      <button
+        class="match-btn"
+        :disabled="isMatching"
+        @click="matchRoute"
+      >
         {{ isMatching ? '匹配中...' : '🔍 开始匹配' }}
       </button>
 
-      <div class="result-section" v-if="matchResult">
+      <div
+        v-if="matchResult"
+        class="result-section"
+      >
         <div :class="['result-card', matchResult.found ? 'success' : 'fail']">
           <div class="result-header">
-            <div class="result-icon">{{ matchResult.found ? '✅' : '❌' }}</div>
-            <div class="result-title">{{ matchResult.found ? '匹配成功' : '未找到匹配规则' }}</div>
+            <div class="result-icon">
+              {{ matchResult.found ? '✅' : '❌' }}
+            </div>
+            <div class="result-title">
+              {{ matchResult.found ? '匹配成功' : '未找到匹配规则' }}
+            </div>
           </div>
-          <div class="result-detail" v-if="matchResult.found">
+          <div
+            v-if="matchResult.found"
+            class="result-detail"
+          >
             <div class="detail-row">
               <span class="label">目标服务：</span>
               <span class="value service">{{ matchResult.service }}</span>
@@ -72,7 +102,10 @@
               <span class="value url">{{ matchResult.targetUrl }}</span>
             </div>
           </div>
-          <div class="result-suggestion" v-else>
+          <div
+            v-else
+            class="result-suggestion"
+          >
             <p>💡 建议检查：</p>
             <ul>
               <li>路径是否以 /api 开头？</li>
@@ -85,7 +118,9 @@
     </div>
 
     <div class="rules-table">
-      <div class="table-title">📋 当前路由规则表</div>
+      <div class="table-title">
+        📋 当前路由规则表
+      </div>
       <table>
         <thead>
           <tr>
@@ -96,19 +131,29 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(rule, index) in routingRules" :key="index"
-              :class="{ active: matchResult && matchResult.ruleIndex === index }">
+          <tr
+            v-for="(rule, index) in routingRules"
+            :key="index"
+            :class="{ active: matchResult && matchResult.ruleIndex === index }"
+          >
             <td>{{ index + 1 }}</td>
             <td><code>{{ rule.match }}</code></td>
             <td><span class="service-tag">{{ rule.service }}</span></td>
-            <td><code v-if="rule.rewrite">{{ rule.rewrite }}</code><span v-else class="no-rewrite">无</span></td>
+            <td>
+              <code v-if="rule.rewrite">{{ rule.rewrite }}</code><span
+                v-else
+                class="no-rewrite"
+              >无</span>
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
 
     <div class="quick-presets">
-      <div class="presets-title">🚀 快速测试示例</div>
+      <div class="presets-title">
+        🚀 快速测试示例
+      </div>
       <div class="preset-buttons">
         <button
           v-for="preset in presets"
diff --git a/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue b/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
index 4fc56e0..4c62080 100644
--- a/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/gateway-proxy/SslTerminationDemo.vue
@@ -5,69 +5,111 @@
 <template>
   <div class="ssl-termination-demo">
     <div class="header">
-      <div class="title">🔒 SSL 终结：HTTPS 流量的"解密官"</div>
-      <div class="subtitle">想象成公司的前台接待——对外使用正式头衔（HTTPS），对内用内部称呼（HTTP），负责"翻译"身份</div>
+      <div class="title">
+        🔒 SSL 终结：HTTPS 流量的"解密官"
+      </div>
+      <div class="subtitle">
+        想象成公司的前台接待——对外使用正式头衔（HTTPS），对内用内部称呼（HTTP），负责"翻译"身份
+      </div>
     </div>
 
     <div class="ssl-flow">
-      <div class="flow-title">🔐 HTTPS 流量解密流程</div>
+      <div class="flow-title">
+        🔐 HTTPS 流量解密流程
+      </div>
 
       <div class="flow-diagram">
         <!-- 客户端 -->
         <div class="flow-node client">
-          <div class="node-icon">👤</div>
-          <div class="node-label">客户端 (浏览器)</div>
-          <div class="node-detail">发起 HTTPS 请求</div>
+          <div class="node-icon">
+            👤
+          </div>
+          <div class="node-label">
+            客户端 (浏览器)
+          </div>
+          <div class="node-detail">
+            发起 HTTPS 请求
+          </div>
         </div>
 
         <div class="flow-arrow encrypted">
-          <div class="arrow-line"></div>
+          <div class="arrow-line" />
           <div class="arrow-label">
             <span class="lock-icon">🔒</span>
             <span>TLS 加密连接</span>
           </div>
           <div class="cert-info">
-            <div class="cert-item"><span class="cert-label">证书:</span> *.example.com</div>
-            <div class="cert-item"><span class="cert-label">算法:</span> TLS 1.3</div>
-            <div class="cert-item"><span class="cert-label">加密:</span> AES-256-GCM</div>
+            <div class="cert-item">
+              <span class="cert-label">证书:</span> *.example.com
+            </div>
+            <div class="cert-item">
+              <span class="cert-label">算法:</span> TLS 1.3
+            </div>
+            <div class="cert-item">
+              <span class="cert-label">加密:</span> AES-256-GCM
+            </div>
           </div>
         </div>
 
         <!-- Nginx -->
         <div class="flow-node nginx">
-          <div class="node-icon">🚪</div>
-          <div class="node-label">Nginx (SSL 终结)</div>
+          <div class="node-icon">
+            🚪
+          </div>
+          <div class="node-label">
+            Nginx (SSL 终结)
+          </div>
           <div class="node-actions">
-            <div class="action"><span class="action-icon">📜</span> 校验证书</div>
-            <div class="action"><span class="action-icon">🔓</span> 解密流量</div>
-            <div class="action"><span class="action-icon">📝</span> 添加 X-Forwarded-*</div>
+            <div class="action">
+              <span class="action-icon">📜</span> 校验证书
+            </div>
+            <div class="action">
+              <span class="action-icon">🔓</span> 解密流量
+            </div>
+            <div class="action">
+              <span class="action-icon">📝</span> 添加 X-Forwarded-*
+            </div>
           </div>
         </div>
 
         <div class="flow-arrow plain">
-          <div class="arrow-line"></div>
+          <div class="arrow-line" />
           <div class="arrow-label">
             <span class="unlock-icon">🔓</span>
             <span>HTTP 明文</span>
           </div>
           <div class="headers-info">
-            <div class="header-item">X-Forwarded-For: 203.0.113.42</div>
-            <div class="header-item">X-Forwarded-Proto: https</div>
-            <div class="header-item">X-Real-IP: 203.0.113.42</div>
+            <div class="header-item">
+              X-Forwarded-For: 203.0.113.42
+            </div>
+            <div class="header-item">
+              X-Forwarded-Proto: https
+            </div>
+            <div class="header-item">
+              X-Real-IP: 203.0.113.42
+            </div>
           </div>
         </div>
 
         <!-- 后端服务 -->
         <div class="flow-node backend">
-          <div class="node-icon">⚙️</div>
-          <div class="node-label">后端服务集群</div>
-          <div class="node-detail">专注于业务逻辑，无需处理 TLS</div>
+          <div class="node-icon">
+            ⚙️
+          </div>
+          <div class="node-label">
+            后端服务集群
+          </div>
+          <div class="node-detail">
+            专注于业务逻辑，无需处理 TLS
+          </div>
         </div>
       </div>
     </div>
 
     <div class="cert-management">
-      <div class="section-title">📜 SSL 证书管理</div>
+      <div class="section-title">
+        📜 SSL 证书管理
+      </div>
 
       <div class="cert-tabs">
         <button
@@ -82,14 +124,30 @@
 
       <div class="cert-content">
         <!-- 证书申请流程 -->
-        <div v-if="currentCertTab === 'apply'" class="apply-flow">
+        <div
+          v-if="currentCertTab === 'apply'"
+          class="apply-flow"
+        >
           <div class="flow-steps">
-            <div v-for="(step, index) in certSteps" :key="index" class="cert-step">
-              <div class="step-badge">{{ index + 1 }}</div>
+            <div
+              v-for="(step, index) in certSteps"
+              :key="index"
+              class="cert-step"
+            >
+              <div class="step-badge">
+                {{ index + 1 }}
+              </div>
               <div class="step-content">
-                <div class="step-title">{{ step.title }}</div>
-                <div class="step-desc">{{ step.desc }}</div>
-                <div class="step-command" v-if="step.command">
+                <div class="step-title">
+                  {{ step.title }}
+                </div>
+                <div class="step-desc">
+                  {{ step.desc }}
+                </div>
+                <div
+                  v-if="step.command"
+                  class="step-command"
+                >
                   <code>{{ step.command }}</code>
                 </div>
               </div>
@@ -98,7 +156,10 @@
         </div>
 
         <!-- Nginx 配置 -->
-        <div v-if="currentCertTab === 'config'" class="nginx-config">
+        <div
+          v-if="currentCertTab === 'config'"
+          class="nginx-config"
+        >
           <pre class="config-block"><code>server {
     listen 443 ssl http2;
     server_name api.example.com;
@@ -147,15 +208,27 @@ server {
         </div>
 
         <!-- 最佳实践 -->
-        <div v-if="currentCertTab === 'bestpractice'" class="best-practices">
+        <div
+          v-if="currentCertTab === 'bestpractice'"
+          class="best-practices"
+        >
           <div class="practices-grid">
-            <div v-for="practice in bestPractices" :key="practice.id" class="practice-card">
+            <div
+              v-for="practice in bestPractices"
+              :key="practice.id"
+              class="practice-card"
+            >
               <div class="practice-header">
                 <span class="practice-icon">{{ practice.icon }}</span>
                 <span class="practice-title">{{ practice.title }}</span>
               </div>
-              <div class="practice-content">{{ practice.content }}</div>
-              <div class="practice-code" v-if="practice.code">
+              <div class="practice-content">
+                {{ practice.content }}
+              </div>
+              <div
+                v-if="practice.code"
+                class="practice-code"
+              >
                 <code>{{ practice.code }}</code>
               </div>
             </div>
@@ -165,31 +238,57 @@ server {
     </div>
 
     <div class="benefits-section">
-      <div class="section-title">✨ SSL 终结的核心优势</div>
+      <div class="section-title">
+        ✨ SSL 终结的核心优势
+      </div>
 
       <div class="benefits-grid">
         <div class="benefit-card">
-          <div class="benefit-icon">🚀</div>
-          <div class="benefit-title">性能提升</div>
-          <div class="benefit-desc">TLS 握手和加密解密是 CPU 密集型操作，集中在 Nginx 处理，后端服务专注业务逻辑，整体吞吐量提升 2-5 倍</div>
+          <div class="benefit-icon">
+            🚀
+          </div>
+          <div class="benefit-title">
+            性能提升
+          </div>
+          <div class="benefit-desc">
+            TLS 握手和加密解密是 CPU 密集型操作，集中在 Nginx 处理，后端服务专注业务逻辑，整体吞吐量提升 2-5 倍
+          </div>
         </div>
 
         <div class="benefit-card">
-          <div class="benefit-icon">🔧</div>
-          <div class="benefit-title">简化运维</div>
-          <div class="benefit-desc">证书统一管理，只需在 Nginx 配置一次，无需在每个后端服务重复配置，证书续期、更换一键完成</div>
+          <div class="benefit-icon">
+            🔧
+          </div>
+          <div class="benefit-title">
+            简化运维
+          </div>
+          <div class="benefit-desc">
+            证书统一管理，只需在 Nginx 配置一次，无需在每个后端服务重复配置，证书续期、更换一键完成
+          </div>
         </div>
 
         <div class="benefit-card">
-          <div class="benefit-icon">🛡️</div>
-          <div class="benefit-title">集中安全</div>
-          <div class="benefit-desc">SSL/TLS 配置统一管控，强制使用最新协议版本和密码套件，统一添加安全响应头（HSTS、CSP 等）</div>
+          <div class="benefit-icon">
+            🛡️
+          </div>
+          <div class="benefit-title">
+            集中安全
+          </div>
+          <div class="benefit-desc">
+            SSL/TLS 配置统一管控，强制使用最新协议版本和密码套件，统一添加安全响应头（HSTS、CSP 等）
+          </div>
         </div>
 
         <div class="benefit-card">
-          <div class="benefit-icon">📊</div>
-          <div class="benefit-title">统一监控</div>
-          <div class="benefit-desc">所有 HTTPS 流量经过 Nginx，可以统一记录访问日志、分析 SSL 握手性能、监控证书有效期，便于审计和排障</div>
+          <div class="benefit-icon">
+            📊
+          </div>
+          <div class="benefit-title">
+            统一监控
+          </div>
+          <div class="benefit-desc">
+            所有 HTTPS 流量经过 Nginx，可以统一记录访问日志、分析 SSL 握手性能、监控证书有效期，便于审计和排障
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue
index 328c032..70feaaf 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitBranchMergeDemo.vue
@@ -2,26 +2,47 @@
   <div class="branch-demo">
     <div class="panel">
       <div class="controls">
-        <button @click="init" :disabled="inited || mergePending" class="btn">
+        <button
+          :disabled="inited || mergePending"
+          class="btn"
+          @click="init"
+        >
           初始化
         </button>
-        <button @click="commit" :disabled="!inited || mergePending" class="btn">
+        <button
+          :disabled="!inited || mergePending"
+          class="btn"
+          @click="commit"
+        >
           提交
         </button>
-        <button @click="branch" :disabled="!inited || hasBranch" class="btn">
+        <button
+          :disabled="!inited || hasBranch"
+          class="btn"
+          @click="branch"
+        >
           创建分支
         </button>
         <button
-          @click="prepareMerge"
           :disabled="!hasBranch || mergePending"
           class="btn"
+          @click="prepareMerge"
         >
           准备合并
         </button>
-        <button @click="finishMerge" :disabled="!mergePending" class="btn">
+        <button
+          :disabled="!mergePending"
+          class="btn"
+          @click="finishMerge"
+        >
           完成合并
         </button>
-        <button @click="reset" class="btn secondary">重置</button>
+        <button
+          class="btn secondary"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
 
       <div class="graph">
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitCommandDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitCommandDemo.vue
index afda7cb..82d3a92 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitCommandDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitCommandDemo.vue
@@ -3,11 +3,21 @@
     <div class="panel">
       <div class="terminal">
         <div class="output">
-          <div v-for="(line, i) in output" :key="i" :class="line.type">
-            <span v-if="line.type === 'command'" class="prompt">$</span>
-            <span v-html="line.text"></span>
+          <div
+            v-for="(line, i) in output"
+            :key="i"
+            :class="line.type"
+          >
+            <span
+              v-if="line.type === 'command'"
+              class="prompt"
+            >$</span>
+            <span v-html="line.text" />
           </div>
-          <div v-if="output.length === 0" class="welcome">
+          <div
+            v-if="output.length === 0"
+            class="welcome"
+          >
             输入命令开始学习 Git（建议先点“制造改动”，再跑 git status）
           </div>
         </div>
@@ -15,39 +25,74 @@
           <span class="prompt">$</span>
           <input
             v-model="cmd"
-            @keyup.enter="execute({ fromQuick: false })"
             placeholder="（默认安全模式）请用下方按钮执行命令"
             class="cmd-input"
             :disabled="!freeMode"
-          />
+            @keyup.enter="execute({ fromQuick: false })"
+          >
           <button
-            @click="execute({ fromQuick: false })"
             class="run-btn"
             :disabled="!freeMode"
+            @click="execute({ fromQuick: false })"
           >
             运行
           </button>
-          <button @click="clearOutput" class="run-btn secondary">清空</button>
-          <button @click="toggleFreeMode" class="run-btn secondary">
+          <button
+            class="run-btn secondary"
+            @click="clearOutput"
+          >
+            清空
+          </button>
+          <button
+            class="run-btn secondary"
+            @click="toggleFreeMode"
+          >
             {{ freeMode ? '切回安全模式' : '开启自由模式' }}
           </button>
         </div>
       </div>
 
       <div class="quick-cmds">
-        <button @click="makeChanges" class="cmd-btn">制造改动</button>
-        <button @click="runCmd('git init')" class="cmd-btn">git init</button>
-        <button @click="runCmd('git status')" class="cmd-btn">
+        <button
+          class="cmd-btn"
+          @click="makeChanges"
+        >
+          制造改动
+        </button>
+        <button
+          class="cmd-btn"
+          @click="runCmd('git init')"
+        >
+          git init
+        </button>
+        <button
+          class="cmd-btn"
+          @click="runCmd('git status')"
+        >
           git status
         </button>
-        <button @click="runCmd('git add .')" class="cmd-btn">git add .</button>
-        <button @click="runCmd(`git commit -m 'msg'`)" class="cmd-btn">
+        <button
+          class="cmd-btn"
+          @click="runCmd('git add .')"
+        >
+          git add .
+        </button>
+        <button
+          class="cmd-btn"
+          @click="runCmd(`git commit -m 'msg'`)"
+        >
           git commit
         </button>
-        <button @click="runCmd('git log --oneline')" class="cmd-btn">
+        <button
+          class="cmd-btn"
+          @click="runCmd('git log --oneline')"
+        >
           git log
         </button>
-        <button @click="runCmd('git switch -c feat/demo')" class="cmd-btn">
+        <button
+          class="cmd-btn"
+          @click="runCmd('git switch -c feat/demo')"
+        >
           新分支
         </button>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitConflictDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitConflictDemo.vue
index 58db5c6..7984327 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitConflictDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitConflictDemo.vue
@@ -14,7 +14,9 @@
         <div class="line current">
           <span class="ln">4</span> console.log('Welcome') // 当前版本
         </div>
-        <div class="line conflict"><span class="ln">5</span>=======</div>
+        <div class="line conflict">
+          <span class="ln">5</span>=======
+        </div>
         <div class="line incoming">
           <span class="ln">6</span> console.log('Greetings') // 传入版本
         </div>
@@ -27,11 +29,24 @@
       </div>
 
       <div class="actions">
-        <button @click="resolve('current')" class="action-btn">保留当前</button>
-        <button @click="resolve('incoming')" class="action-btn">
+        <button
+          class="action-btn"
+          @click="resolve('current')"
+        >
+          保留当前
+        </button>
+        <button
+          class="action-btn"
+          @click="resolve('incoming')"
+        >
           保留传入
         </button>
-        <button @click="resolve('manual')" class="action-btn">手动合并</button>
+        <button
+          class="action-btn"
+          @click="resolve('manual')"
+        >
+          手动合并
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitRemoteDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitRemoteDemo.vue
index fa024f6..46adf66 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitRemoteDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitRemoteDemo.vue
@@ -3,52 +3,95 @@
     <div class="panel">
       <div class="repos">
         <div class="repo">
-          <div class="header">💻 本地</div>
+          <div class="header">
+            💻 本地
+          </div>
           <div class="meta">
             <span class="badge">main</span>
             <span class="hint"> Ahead {{ ahead }} / Behind {{ behind }} </span>
           </div>
           <div class="commits">
-            <div v-for="c in local" :key="c" class="commit-dot">
-              <span class="dot local"></span>
+            <div
+              v-for="c in local"
+              :key="c"
+              class="commit-dot"
+            >
+              <span class="dot local" />
               <span class="hash">{{ c.substring(0, 6) }}</span>
             </div>
-            <div v-if="local.length === 0" class="empty">无</div>
+            <div
+              v-if="local.length === 0"
+              class="empty"
+            >
+              无
+            </div>
           </div>
         </div>
 
-        <div class="sync">⇄</div>
+        <div class="sync">
+          ⇄
+        </div>
 
         <div class="repo">
-          <div class="header">☁️ 远程</div>
+          <div class="header">
+            ☁️ 远程
+          </div>
           <div class="meta">
             <span class="badge">origin/main</span>
             <span class="hint">模拟队友提交在这里发生</span>
           </div>
           <div class="commits">
-            <div v-for="c in remote" :key="c" class="commit-dot">
-              <span class="dot remote"></span>
+            <div
+              v-for="c in remote"
+              :key="c"
+              class="commit-dot"
+            >
+              <span class="dot remote" />
               <span class="hash">{{ c.substring(0, 6) }}</span>
             </div>
-            <div v-if="remote.length === 0" class="empty">无</div>
+            <div
+              v-if="remote.length === 0"
+              class="empty"
+            >
+              无
+            </div>
           </div>
         </div>
       </div>
 
       <div class="controls">
-        <button @click="localCommit" class="btn">本地提交</button>
-        <button @click="remoteCommit" class="btn">远程新增提交</button>
         <button
-          @click="push"
+          class="btn"
+          @click="localCommit"
+        >
+          本地提交
+        </button>
+        <button
+          class="btn"
+          @click="remoteCommit"
+        >
+          远程新增提交
+        </button>
+        <button
           :disabled="local.length <= remote.length"
           class="btn"
+          @click="push"
         >
           git push
         </button>
-        <button @click="pull" :disabled="behind === 0" class="btn">
+        <button
+          :disabled="behind === 0"
+          class="btn"
+          @click="pull"
+        >
           git pull
         </button>
-        <button @click="reset" class="btn secondary">重置</button>
+        <button
+          class="btn secondary"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitScenariosDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitScenariosDemo.vue
index feb3ee2..c610f6b 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitScenariosDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitScenariosDemo.vue
@@ -2,24 +2,35 @@
   <div class="git-scenarios-demo">
     <div class="header">
       <div class="title">
-        <div class="h">常见场景：直接照抄的 Git 命令</div>
+        <div class="h">
+          常见场景：直接照抄的 Git 命令
+        </div>
         <div class="sub">
           选一个场景，按步骤执行；每一步都解释“为什么这么做”。
         </div>
       </div>
 
       <div class="actions">
-        <button class="btn" @click="prevStep" :disabled="activeStepIndex === 0">
+        <button
+          class="btn"
+          :disabled="activeStepIndex === 0"
+          @click="prevStep"
+        >
           上一步
         </button>
         <button
           class="btn primary"
-          @click="nextStep"
           :disabled="activeStepIndex >= activeScenario.steps.length - 1"
+          @click="nextStep"
         >
           下一步
         </button>
-        <button class="btn" @click="resetSteps">重置</button>
+        <button
+          class="btn"
+          @click="resetSteps"
+        >
+          重置
+        </button>
       </div>
     </div>
 
@@ -38,8 +49,13 @@
 
     <div class="content">
       <div class="scenario-meta">
-        <div class="scenario-desc">{{ activeScenario.desc }}</div>
-        <div class="scenario-note" v-if="activeScenario.note">
+        <div class="scenario-desc">
+          {{ activeScenario.desc }}
+        </div>
+        <div
+          v-if="activeScenario.note"
+          class="scenario-note"
+        >
           {{ activeScenario.note }}
         </div>
       </div>
@@ -50,7 +66,10 @@
             Step {{ activeStepIndex + 1 }} / {{ activeScenario.steps.length }}
             <span class="step-name">{{ activeStep.title }}</span>
           </div>
-          <button class="copy-btn" @click="copy(activeStep.cmd)">
+          <button
+            class="copy-btn"
+            @click="copy(activeStep.cmd)"
+          >
             {{ copied ? '已复制' : '复制命令' }}
           </button>
         </div>
@@ -59,24 +78,42 @@
           <code>{{ activeStep.cmd }}</code>
         </div>
 
-        <div v-if="activeStep.output" class="output">
-          <div class="label">你通常会看到：</div>
+        <div
+          v-if="activeStep.output"
+          class="output"
+        >
+          <div class="label">
+            你通常会看到：
+          </div>
           <pre><code>{{ activeStep.output }}</code></pre>
         </div>
 
         <div class="why">
-          <div class="label">为什么：</div>
-          <div class="text">{{ activeStep.why }}</div>
+          <div class="label">
+            为什么：
+          </div>
+          <div class="text">
+            {{ activeStep.why }}
+          </div>
         </div>
 
-        <div v-if="activeStep.warn" class="warn">
-          <div class="label">注意：</div>
-          <div class="text">{{ activeStep.warn }}</div>
+        <div
+          v-if="activeStep.warn"
+          class="warn"
+        >
+          <div class="label">
+            注意：
+          </div>
+          <div class="text">
+            {{ activeStep.warn }}
+          </div>
         </div>
       </div>
 
       <div class="tips">
-        <div class="tips-title">最容易踩坑的 3 件事</div>
+        <div class="tips-title">
+          最容易踩坑的 3 件事
+        </div>
         <ul>
           <li>
             <strong>先看状态再动手：</strong>每次操作前先跑一次
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitStashDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitStashDemo.vue
index 6956c01..d11a34b 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitStashDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitStashDemo.vue
@@ -3,36 +3,73 @@
     <div class="panel">
       <div class="areas">
         <div class="area">
-          <div class="header">💻 工作区 ({{ work.length }})</div>
-          <div v-for="f in work" :key="f" class="file">📄 {{ f }}</div>
-          <div v-if="work.length === 0" class="empty">空</div>
+          <div class="header">
+            💻 工作区 ({{ work.length }})
+          </div>
+          <div
+            v-for="f in work"
+            :key="f"
+            class="file"
+          >
+            📄 {{ f }}
+          </div>
+          <div
+            v-if="work.length === 0"
+            class="empty"
+          >
+            空
+          </div>
         </div>
 
         <div class="area">
-          <div class="header">📚 Stash 栈 ({{ stash.length }})</div>
-          <div v-for="(s, i) in stash" :key="i" class="stash-item">
+          <div class="header">
+            📚 Stash 栈 ({{ stash.length }})
+          </div>
+          <div
+            v-for="(s, i) in stash"
+            :key="i"
+            class="stash-item"
+          >
             <span class="num">{{ i + 1 }}</span>
             <span class="msg">{{ s }}</span>
           </div>
-          <div v-if="stash.length === 0" class="empty">空</div>
+          <div
+            v-if="stash.length === 0"
+            class="empty"
+          >
+            空
+          </div>
         </div>
       </div>
 
       <div class="controls">
-        <button @click="doWork" :disabled="work.length > 0" class="btn">
+        <button
+          :disabled="work.length > 0"
+          class="btn"
+          @click="doWork"
+        >
           修改
         </button>
         <button
-          @click="save"
           :disabled="work.length === 0 || stash.length >= 3"
           class="btn"
+          @click="save"
         >
           保存
         </button>
-        <button @click="pop" :disabled="stash.length === 0" class="btn">
+        <button
+          :disabled="stash.length === 0"
+          class="btn"
+          @click="pop"
+        >
           恢复
         </button>
-        <button @click="reset" class="btn secondary">重置</button>
+        <button
+          class="btn secondary"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitStorageDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitStorageDemo.vue
index e0b4b1b..da6e272 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitStorageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitStorageDemo.vue
@@ -4,16 +4,16 @@
       <div class="comparison">
         <div class="mode-selector">
           <button
-            @click="mode = 'full'"
             :class="{ active: mode === 'full' }"
             class="mode-btn"
+            @click="mode = 'full'"
           >
             完整备份
           </button>
           <button
-            @click="mode = 'git'"
             :class="{ active: mode === 'git' }"
             class="mode-btn"
+            @click="mode = 'git'"
           >
             Git 增量
           </button>
@@ -21,10 +21,16 @@
 
         <div class="visualization">
           <div class="bar-container">
-            <div class="bar full" :style="{ height: fullSize + '%' }">
+            <div
+              class="bar full"
+              :style="{ height: fullSize + '%' }"
+            >
               <span class="label">完整备份: {{ fullSize }}MB</span>
             </div>
-            <div class="bar git" :style="{ height: gitSize + '%' }">
+            <div
+              class="bar git"
+              :style="{ height: gitSize + '%' }"
+            >
               <span class="label">Git 存储: {{ gitSize }}MB</span>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
index a6d810c..bd3f3ba 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
@@ -8,135 +8,173 @@
 
     <div class="demo-content">
       <div class="scene">
-      <!-- 1. Working Directory (Desk) -->
-      <div class="zone working">
-        <div class="zone-header">
-          <span class="zone-icon">💻</span>
-          <div class="zone-info">
-            <span class="zone-title">工作区 (Desk)</span>
-            <span class="zone-desc">你的书桌，随便乱放</span>
+        <!-- 1. Working Directory (Desk) -->
+        <div class="zone working">
+          <div class="zone-header">
+            <span class="zone-icon">💻</span>
+            <div class="zone-info">
+              <span class="zone-title">工作区 (Desk)</span>
+              <span class="zone-desc">你的书桌，随便乱放</span>
+            </div>
+          </div>
+          <div class="desk-surface">
+            <transition-group name="file-pop">
+              <div
+                v-for="file in workingFiles"
+                :key="file.id"
+                class="file-card"
+                @click="addToStaging(file)"
+              >
+                <div class="file-icon">
+                  {{ file.icon }}
+                </div>
+                <div class="file-name">
+                  {{ file.name }}
+                </div>
+                <div class="action-hint">
+                  Add +
+                </div>
+              </div>
+            </transition-group>
+            <div
+              v-if="workingFiles.length === 0"
+              class="empty-state"
+            >
+              桌上很干净 ✨
+              <button
+                class="create-btn"
+                @click="createNewFile"
+              >
+                新建文件 📝
+              </button>
+            </div>
           </div>
         </div>
-        <div class="desk-surface">
-          <transition-group name="file-pop">
-            <div
-              v-for="file in workingFiles"
-              :key="file.id"
-              class="file-card"
-              @click="addToStaging(file)"
-            >
-              <div class="file-icon">{{ file.icon }}</div>
-              <div class="file-name">{{ file.name }}</div>
-              <div class="action-hint">Add +</div>
+
+        <!-- Arrow -->
+        <div class="flow-arrow">
+          <div class="arrow-line" />
+          <div class="arrow-label">
+            git add
+          </div>
+          <div class="arrow-head">
+            ▶
+          </div>
+        </div>
+
+        <!-- 2. Staging Area (Box) -->
+        <div class="zone staging">
+          <div class="zone-header">
+            <span class="zone-icon">📦</span>
+            <div class="zone-info">
+              <span class="zone-title">暂存区 (Box)</span>
+              <span class="zone-desc">快递盒，准备打包</span>
             </div>
-          </transition-group>
-          <div v-if="workingFiles.length === 0" class="empty-state">
-            桌上很干净 ✨
-            <button class="create-btn" @click="createNewFile">
-              新建文件 📝
+          </div>
+          <div class="box-container">
+            <div class="box-body">
+              <transition-group name="file-drop">
+                <div
+                  v-for="file in stagedFiles"
+                  :key="file.id"
+                  class="file-card mini"
+                  @click="unstageFile(file)"
+                >
+                  <div class="file-icon">
+                    {{ file.icon }}
+                  </div>
+                  <div class="file-name">
+                    {{ file.name }}
+                  </div>
+                  <div class="action-hint">
+                    Remove -
+                  </div>
+                </div>
+              </transition-group>
+              <div
+                v-if="stagedFiles.length === 0"
+                class="empty-state box-empty"
+              >
+                盒子是空的 🕸️
+              </div>
+            </div>
+            <div class="box-flap left" />
+            <div class="box-flap right" />
+          </div>
+          <div class="staging-actions">
+            <button
+              class="commit-btn"
+              :disabled="stagedFiles.length === 0"
+              @click="commitFiles"
+            >
+              封箱寄出 (git commit) 🚚
             </button>
           </div>
         </div>
-      </div>
 
-      <!-- Arrow -->
-      <div class="flow-arrow">
-        <div class="arrow-line"></div>
-        <div class="arrow-label">git add</div>
-        <div class="arrow-head">▶</div>
-      </div>
-
-      <!-- 2. Staging Area (Box) -->
-      <div class="zone staging">
-        <div class="zone-header">
-          <span class="zone-icon">📦</span>
-          <div class="zone-info">
-            <span class="zone-title">暂存区 (Box)</span>
-            <span class="zone-desc">快递盒，准备打包</span>
+        <!-- Arrow -->
+        <div class="flow-arrow">
+          <div class="arrow-line" />
+          <div class="arrow-label">
+            git commit
+          </div>
+          <div class="arrow-head">
+            ▶
           </div>
         </div>
-        <div class="box-container">
-          <div class="box-body">
-            <transition-group name="file-drop">
+
+        <!-- 3. Repository (Cabinet) -->
+        <div class="zone repo">
+          <div class="zone-header">
+            <span class="zone-icon">🗄️</span>
+            <div class="zone-info">
+              <span class="zone-title">仓库 (Cabinet)</span>
+              <span class="zone-desc">档案柜，永久保存</span>
+            </div>
+          </div>
+          <div class="cabinet-body">
+            <transition-group name="drawer-slide">
               <div
-                v-for="file in stagedFiles"
-                :key="file.id"
-                class="file-card mini"
-                @click="unstageFile(file)"
+                v-for="commit in commits.slice().reverse()"
+                :key="commit.hash"
+                class="drawer-item"
               >
-                <div class="file-icon">{{ file.icon }}</div>
-                <div class="file-name">{{ file.name }}</div>
-                <div class="action-hint">Remove -</div>
+                <div class="drawer-handle" />
+                <div class="commit-info">
+                  <span class="commit-hash">#{{ commit.hash }}</span>
+                  <span class="commit-msg">{{ commit.message }}</span>
+                </div>
+                <div class="commit-files">
+                  <span
+                    v-for="f in commit.files"
+                    :key="f"
+                    class="tiny-file"
+                  >📄</span>
+                </div>
               </div>
             </transition-group>
-            <div v-if="stagedFiles.length === 0" class="empty-state box-empty">
-              盒子是空的 🕸️
-            </div>
-          </div>
-          <div class="box-flap left"></div>
-          <div class="box-flap right"></div>
-        </div>
-        <div class="staging-actions">
-          <button
-            class="commit-btn"
-            :disabled="stagedFiles.length === 0"
-            @click="commitFiles"
-          >
-            封箱寄出 (git commit) 🚚
-          </button>
-        </div>
-      </div>
-
-      <!-- Arrow -->
-      <div class="flow-arrow">
-        <div class="arrow-line"></div>
-        <div class="arrow-label">git commit</div>
-        <div class="arrow-head">▶</div>
-      </div>
-
-      <!-- 3. Repository (Cabinet) -->
-      <div class="zone repo">
-        <div class="zone-header">
-          <span class="zone-icon">🗄️</span>
-          <div class="zone-info">
-            <span class="zone-title">仓库 (Cabinet)</span>
-            <span class="zone-desc">档案柜，永久保存</span>
-          </div>
-        </div>
-        <div class="cabinet-body">
-          <transition-group name="drawer-slide">
             <div
-              v-for="commit in commits.slice().reverse()"
-              :key="commit.hash"
-              class="drawer-item"
+              v-if="commits.length === 0"
+              class="empty-state"
             >
-              <div class="drawer-handle"></div>
-              <div class="commit-info">
-                <span class="commit-hash">#{{ commit.hash }}</span>
-                <span class="commit-msg">{{ commit.message }}</span>
-              </div>
-              <div class="commit-files">
-                <span v-for="f in commit.files" :key="f" class="tiny-file"
-                  >📄</span
-                >
-              </div>
+              柜子是空的 💨
             </div>
-          </transition-group>
-          <div v-if="commits.length === 0" class="empty-state">
-            柜子是空的 💨
           </div>
         </div>
       </div>
     </div>
-    </div>
 
     <div class="bottom">
       <div class="block">
-        <div class="block-title">当前等价命令</div>
+        <div class="block-title">
+          当前等价命令
+        </div>
         <pre class="mono"><code>{{ historyText }}</code></pre>
       </div>
       <div class="block">
-        <div class="block-title">git status（模拟）</div>
+        <div class="block-title">
+          git status（模拟）
+        </div>
         <pre class="mono"><code>{{ statusText }}</code></pre>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
index 8812c8c..aaa1153 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
@@ -40,9 +40,22 @@
       </div>
 
       <!-- 箭头 -->
-      <div class="arrow-group" v-if="!allCommitted">
-        <div class="arrow" :class="{ active: hasStaged }">↓</div>
-        <div class="arrow-label" v-if="hasStaged">git add</div>
+      <div
+        v-if="!allCommitted"
+        class="arrow-group"
+      >
+        <div
+          class="arrow"
+          :class="{ active: hasStaged }"
+        >
+          ↓
+        </div>
+        <div
+          v-if="hasStaged"
+          class="arrow-label"
+        >
+          git add
+        </div>
       </div>
 
       <!-- 暂存区 -->
@@ -62,16 +75,26 @@
             <span class="file-name">{{ file.name }}</span>
             <span class="file-status">待提交</span>
           </div>
-          <div v-if="stagedFiles.length === 0" class="empty-tip">
+          <div
+            v-if="stagedFiles.length === 0"
+            class="empty-tip"
+          >
             暂无文件
           </div>
         </div>
       </div>
 
       <!-- 箭头 -->
-      <div class="arrow-group" v-if="hasStaged">
-        <div class="arrow active">↓</div>
-        <div class="arrow-label">git commit</div>
+      <div
+        v-if="hasStaged"
+        class="arrow-group"
+      >
+        <div class="arrow active">
+          ↓
+        </div>
+        <div class="arrow-label">
+          git commit
+        </div>
       </div>
 
       <!-- 仓库区 -->
@@ -90,7 +113,10 @@
             <span class="commit-icon">✅</span>
             <span class="commit-msg">{{ commit.msg }}</span>
           </div>
-          <div v-if="commits.length === 0" class="empty-tip">
+          <div
+            v-if="commits.length === 0"
+            class="empty-tip"
+          >
             暂无提交
           </div>
         </div>
@@ -100,29 +126,29 @@
     <!-- 操作按钮 -->
     <div class="action-panel">
       <button
-        @click="modifyFile"
         class="action-btn"
         :disabled="allModified"
+        @click="modifyFile"
       >
         ✏️ 修改文件
       </button>
       <button
-        @click="stageFiles"
         class="action-btn"
         :disabled="!hasModified || allStaged"
+        @click="stageFiles"
       >
         📌 暂存修改
       </button>
       <button
-        @click="commitFiles"
         class="action-btn"
         :disabled="!hasStaged"
+        @click="commitFiles"
       >
         ✅ 提交版本
       </button>
       <button
-        @click="reset"
         class="action-btn secondary"
+        @click="reset"
       >
         🔄 重置
       </button>
diff --git a/docs/.vitepress/theme/components/appendix/ide-intro/AiHelpDemo.vue b/docs/.vitepress/theme/components/appendix/ide-intro/AiHelpDemo.vue
index f308bfa..dc6b44d 100644
--- a/docs/.vitepress/theme/components/appendix/ide-intro/AiHelpDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ide-intro/AiHelpDemo.vue
@@ -2,30 +2,47 @@
   <div class="ai-help-demo">
     <div class="desktop-container">
       <!-- 1. VS Code 窗口 (全功能模拟) -->
-      <div class="window vscode" :class="getWindowClass('vscode')">
+      <div
+        class="window vscode"
+        :class="getWindowClass('vscode')"
+      >
         <!-- 标题栏 -->
         <div class="title-bar">
           <div class="controls">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
+            <span class="dot red" />
+            <span class="dot yellow" />
+            <span class="dot green" />
+          </div>
+          <div class="title-text">
+            App.vue - easy-vibe - Visual Studio Code
           </div>
-          <div class="title-text">App.vue - easy-vibe - Visual Studio Code</div>
         </div>
 
         <div class="main-layout">
           <!-- 侧边栏 (Activity Bar) -->
           <div class="activity-bar">
-            <div class="icon active">📁</div>
-            <div class="icon">🔍</div>
-            <div class="icon">🌿</div>
-            <div class="icon">🐛</div>
-            <div class="icon">🧩</div>
+            <div class="icon active">
+              📁
+            </div>
+            <div class="icon">
+              🔍
+            </div>
+            <div class="icon">
+              🌿
+            </div>
+            <div class="icon">
+              🐛
+            </div>
+            <div class="icon">
+              🧩
+            </div>
           </div>
 
           <!-- 资源管理器 (Sidebar) -->
           <div class="sidebar">
-            <div class="sidebar-title">EXPLORER</div>
+            <div class="sidebar-title">
+              EXPLORER
+            </div>
             <div class="file-tree">
               <div class="tree-item expanded">
                 <span class="arrow">▼</span> src
@@ -51,7 +68,12 @@
             </div>
             <div class="code-content">
               <div class="line-numbers">
-                <div v-for="n in 15" :key="n">{{ n }}</div>
+                <div
+                  v-for="n in 15"
+                  :key="n"
+                >
+                  {{ n }}
+                </div>
               </div>
               <div class="code-lines">
                 <div class="line">
@@ -61,7 +83,7 @@
                   <span class="var">nextTick</span> }
                   <span class="kwd">from</span> <span class="str">'vue'</span>
                 </div>
-                <div class="line"></div>
+                <div class="line" />
                 <div class="line">
                   <span class="kwd">const</span>
                   <span class="var">chartRef</span> =
@@ -71,7 +93,7 @@
                   <span class="kwd">const</span> <span class="var">data</span> =
                   <span class="func">ref</span>([])
                 </div>
-                <div class="line"></div>
+                <div class="line" />
                 <div class="line">
                   <span class="kwd">const</span>
                   <span class="func">initChart</span> =
@@ -84,50 +106,61 @@
                   &nbsp;&nbsp;<span class="kwd">await</span>
                   <span class="func">fetchData</span>()
                 </div>
-                <div class="line">&nbsp;&nbsp;</div>
-                <div class="line" ref="targetCode">
-                  &nbsp;&nbsp;<span class="comment"
-                    >// 👈 等待 DOM 更新后再渲染图表</span
-                  >
+                <div class="line">
+&nbsp;&nbsp;
                 </div>
-                <div class="line" ref="targetCode2">
+                <div
+                  ref="targetCode"
+                  class="line"
+                >
+                  &nbsp;&nbsp;<span class="comment">// 👈 等待 DOM 更新后再渲染图表</span>
+                </div>
+                <div
+                  ref="targetCode2"
+                  class="line"
+                >
                   &nbsp;&nbsp;<span class="kwd">await</span>
                   <span class="func">nextTick</span>()
                 </div>
-                <div class="line">&nbsp;&nbsp;</div>
+                <div class="line">
+&nbsp;&nbsp;
+                </div>
                 <div class="line">
                   &nbsp;&nbsp;<span class="kwd">const</span>
                   <span class="var">chart</span> =
-                  <span class="var">echarts</span>.<span class="func">init</span
-                  >(<span class="var">chartRef</span>.<span class="var"
-                    >value</span
-                  >)
+                  <span class="var">echarts</span>.<span class="func">init</span>(<span class="var">chartRef</span>.<span class="var">value</span>)
                 </div>
                 <div class="line">
-                  &nbsp;&nbsp;<span class="var">chart</span>.<span class="func"
-                    >setOption</span
-                  >({ ... })
+                  &nbsp;&nbsp;<span class="var">chart</span>.<span class="func">setOption</span>({ ... })
+                </div>
+                <div class="line">
+                  }
                 </div>
-                <div class="line">}</div>
               </div>
             </div>
           </div>
 
           <!-- 截图选框 (Overlay) - Moved to main-layout level -->
           <div
-            class="screenshot-overlay"
             v-if="step === 'selecting' || step === 'captured'"
+            class="screenshot-overlay"
           >
             <div
               class="selection-box"
               :class="{ flashed: step === 'captured' }"
             >
-              <div class="selection-handle top-left"></div>
-              <div class="selection-handle top-right"></div>
-              <div class="selection-handle bottom-left"></div>
-              <div class="selection-handle bottom-right"></div>
-              <div class="cursor-crosshair" v-if="step === 'selecting'"></div>
-              <div class="selection-size" v-if="step === 'selecting'">
+              <div class="selection-handle top-left" />
+              <div class="selection-handle top-right" />
+              <div class="selection-handle bottom-left" />
+              <div class="selection-handle bottom-right" />
+              <div
+                v-if="step === 'selecting'"
+                class="cursor-crosshair"
+              />
+              <div
+                v-if="step === 'selecting'"
+                class="selection-size"
+              >
                 220 × 350
               </div>
             </div>
@@ -135,54 +168,91 @@
         </div>
 
         <!-- 模拟操作引导 -->
-        <div class="guide-overlay" v-if="step === 'idle'">
-          <div class="start-btn" @click="startDemo">
+        <div
+          v-if="step === 'idle'"
+          class="guide-overlay"
+        >
+          <div
+            class="start-btn"
+            @click="startDemo"
+          >
             <span>📸 演示：遇到代码不懂怎么问 AI？</span>
           </div>
         </div>
       </div>
 
       <!-- 2. ChatGPT 窗口 -->
-      <div class="window chatgpt" :class="getWindowClass('chatgpt')">
+      <div
+        class="window chatgpt"
+        :class="getWindowClass('chatgpt')"
+      >
         <div class="chat-sidebar">
-          <div class="new-chat">+ New chat</div>
-          <div class="history-item">Previous 7 Days</div>
-          <div class="history-item active">Vue nextTick explanation</div>
-          <div class="history-item">CSS Grid layout</div>
+          <div class="new-chat">
+            + New chat
+          </div>
+          <div class="history-item">
+            Previous 7 Days
+          </div>
+          <div class="history-item active">
+            Vue nextTick explanation
+          </div>
+          <div class="history-item">
+            CSS Grid layout
+          </div>
         </div>
         <div class="chat-main">
           <div class="chat-model-selector">
             <span>GPT-4o</span> <span class="arrow">▼</span>
           </div>
 
-          <div class="messages-container" ref="messagesContainer">
-            <div class="msg-row user" v-if="stepInt >= 5">
-              <div class="avatar">U</div>
+          <div
+            ref="messagesContainer"
+            class="messages-container"
+          >
+            <div
+              v-if="stepInt >= 5"
+              class="msg-row user"
+            >
+              <div class="avatar">
+                U
+              </div>
               <div class="msg-bubble">
-                <div class="pasted-image" v-if="stepInt >= 5">
+                <div
+                  v-if="stepInt >= 5"
+                  class="pasted-image"
+                >
                   <div class="ui-snapshot">
-                    <div class="snapshot-rect menu-rect"></div>
-                    <div class="snapshot-text">Menu Bar.png</div>
+                    <div class="snapshot-rect menu-rect" />
+                    <div class="snapshot-text">
+                      Menu Bar.png
+                    </div>
                   </div>
                 </div>
-                <div class="msg-text">{{ typedText }}</div>
+                <div class="msg-text">
+                  {{ typedText }}
+                </div>
               </div>
             </div>
 
-            <div class="msg-row ai" v-if="stepInt >= 7">
+            <div
+              v-if="stepInt >= 7"
+              class="msg-row ai"
+            >
               <div class="avatar gpt">
-                <svg viewBox="0 0 41 41" class="gpt-logo">
+                <svg
+                  viewBox="0 0 41 41"
+                  class="gpt-logo"
+                >
                   <path
                     d="M37.532 16.87a9.963 9.963 0 00-.856-8.184c-3.15-5.49-10.25-7.38-15.738-4.23-.718.412-1.35.914-1.896 1.488a9.965 9.965 0 00-7.144-1.156 9.972 9.972 0 00-6.73 4.966c-3.15 5.49-1.26 12.59 4.23 15.738.412.237.854.43 1.306.586a9.963 9.963 0 00.856 8.184c3.15 5.49 10.25 7.38 15.738 4.23.718-.412 1.35-.914 1.896-1.488a9.965 9.965 0 007.144 1.156 9.972 9.972 0 006.73-4.966c3.15-5.49 1.26-12.59-4.23-15.738a9.953 9.953 0 00-1.306-.586zM20.5 29.5a9 9 0 110-18 9 9 0 010 18z"
                     fill="currentColor"
-                  ></path>
+                  />
                 </svg>
               </div>
               <div class="msg-bubble ai-bubble">
                 <p>
                   这是 VS Code 的
-                  <strong>顶部菜单栏 (Menu Bar)</strong
-                  >，包含了软件的所有功能入口。
+                  <strong>顶部菜单栏 (Menu Bar)</strong>，包含了软件的所有功能入口。
                 </p>
                 <p><strong>常用菜单解释：</strong></p>
                 <ul>
@@ -193,8 +263,7 @@
                     <strong>Edit (编辑)</strong>：复制粘贴、查找替换、撤销重做。
                   </li>
                   <li>
-                    <strong>View (视图)</strong
-                    >：控制界面显示，比如打开侧边栏、终端等。
+                    <strong>View (视图)</strong>：控制界面显示，比如打开侧边栏、终端等。
                   </li>
                   <li>
                     <strong>Terminal (终端)</strong>：打开内置命令行工具。
@@ -212,21 +281,26 @@
           <div class="chat-input-area">
             <div class="input-wrapper">
               <div
-                class="input-preview"
                 v-if="stepInt === 4 || (stepInt === 5 && isTyping)"
+                class="input-preview"
               >
                 <div class="mini-snapshot-ui">
-                  <div class="mini-menu-rect"></div>
+                  <div class="mini-menu-rect" />
                 </div>
               </div>
               <div class="fake-input">
-                <span v-if="stepInt < 5" class="placeholder"
-                  >Message ChatGPT...</span
-                >
-                <span v-else class="typing-text"
-                  >{{ typedText
-                  }}<span class="cursor" v-if="isTyping">|</span></span
-                >
+                <span
+                  v-if="stepInt < 5"
+                  class="placeholder"
+                >Message ChatGPT...</span>
+                <span
+                  v-else
+                  class="typing-text"
+                >{{ typedText
+                }}<span
+                  v-if="isTyping"
+                  class="cursor"
+                >|</span></span>
               </div>
               <button
                 class="send-btn"
@@ -240,7 +314,11 @@
       </div>
 
       <!-- 全局重置按钮 -->
-      <button class="reset-btn" v-if="step === 'finished'" @click="reset">
+      <button
+        v-if="step === 'finished'"
+        class="reset-btn"
+        @click="reset"
+      >
         🔄 重播
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/ide-intro/IdeArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/ide-intro/IdeArchitectureDemo.vue
index ee1ccbd..12f77f2 100644
--- a/docs/.vitepress/theme/components/appendix/ide-intro/IdeArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ide-intro/IdeArchitectureDemo.vue
@@ -76,7 +76,9 @@ const setScenario = (key) => {
 <template>
   <div class="arch-demo">
     <div class="demo-header">
-      <div class="title">🛠️ IDE 核心机制模拟器</div>
+      <div class="title">
+        🛠️ IDE 核心机制模拟器
+      </div>
       <div class="subtitle">
         点击下方标签，体验不同配置下的运行结果，理解为什么缺一不可。
       </div>
@@ -102,26 +104,35 @@ const setScenario = (key) => {
 
     <div class="diagram-container">
       <!-- Layer 1: VS Code -->
-      <div class="component vscode" :class="{ dim: activeStep === 'env' }">
-        <div class="comp-label">1. 外壳 (VS Code)</div>
+      <div
+        class="component vscode"
+        :class="{ dim: activeStep === 'env' }"
+      >
+        <div class="comp-label">
+          1. 外壳 (VS Code)
+        </div>
         <div class="editor-window">
-          <div class="file-tab">main.py</div>
+          <div class="file-tab">
+            main.py
+          </div>
           <div class="code-area">
             <span style="color: #c586c0">print</span>(<span
               style="color: #ce9178"
-              >"Hello"</span
-            >)
+            >"Hello"</span>)
           </div>
           <button
             class="run-btn-small"
-            @click="run"
             :disabled="isRunning"
             title="点击运行"
+            @click="run"
           >
             {{ isRunning ? '...' : '▶ 运行' }}
           </button>
         </div>
-        <div class="status-badge error" v-if="activeStep === 'error-editor'">
+        <div
+          v-if="activeStep === 'error-editor'"
+          class="status-badge error"
+        >
           🚫 不懂怎么运行
         </div>
       </div>
@@ -135,7 +146,7 @@ const setScenario = (key) => {
               activeStep
             )
           }"
-        ></div>
+        />
         <div
           class="arrow-tip"
           :class="{
@@ -156,21 +167,33 @@ const setScenario = (key) => {
           active: activeStep === 'extension'
         }"
       >
-        <div class="comp-label">2. 中介 (插件)</div>
+        <div class="comp-label">
+          2. 中介 (插件)
+        </div>
         <div class="comp-box">
-          <div v-if="currentScenario === 'editor'" class="missing-content">
+          <div
+            v-if="currentScenario === 'editor'"
+            class="missing-content"
+          >
             <span class="icon">❌</span> 未安装插件
           </div>
-          <div v-else class="active-content">
-            <div class="icon">🧩</div>
-            <div class="text">Python 插件</div>
+          <div
+            v-else
+            class="active-content"
+          >
+            <div class="icon">
+              🧩
+            </div>
+            <div class="text">
+              Python 插件
+            </div>
             <div
-              class="action"
               v-if="
                 activeStep === 'extension' ||
-                activeStep === 'env' ||
-                activeStep === 'error-env'
+                  activeStep === 'env' ||
+                  activeStep === 'error-env'
               "
+              class="action"
             >
               生成指令: <code>python main.py</code>
             </div>
@@ -183,7 +206,7 @@ const setScenario = (key) => {
         <div
           class="line"
           :class="{ active: ['env', 'result'].includes(activeStep) }"
-        ></div>
+        />
         <div
           class="arrow-tip"
           :class="{ active: ['env', 'result'].includes(activeStep) }"
@@ -200,23 +223,44 @@ const setScenario = (key) => {
           active: activeStep === 'env'
         }"
       >
-        <div class="comp-label">3. 引擎 (环境)</div>
+        <div class="comp-label">
+          3. 引擎 (环境)
+        </div>
         <div class="comp-box">
-          <div v-if="currentScenario !== 'full'" class="missing-content">
+          <div
+            v-if="currentScenario !== 'full'"
+            class="missing-content"
+          >
             <span class="icon">❌</span> 未安装环境
           </div>
-          <div v-else class="active-content">
-            <div class="icon">⚙️</div>
-            <div class="text">Python 解释器</div>
-            <div class="action" v-if="activeStep === 'env'">
+          <div
+            v-else
+            class="active-content"
+          >
+            <div class="icon">
+              ⚙️
+            </div>
+            <div class="text">
+              Python 解释器
+            </div>
+            <div
+              v-if="activeStep === 'env'"
+              class="action"
+            >
               <span class="spin">⚙️</span> 正在计算...
             </div>
-            <div class="action success" v-if="activeStep === 'result'">
+            <div
+              v-if="activeStep === 'result'"
+              class="action success"
+            >
               ✅ 计算完成
             </div>
           </div>
         </div>
-        <div class="status-badge error" v-if="activeStep === 'error-env'">
+        <div
+          v-if="activeStep === 'error-env'"
+          class="status-badge error"
+        >
           🚫 找不到程序
         </div>
       </div>
@@ -236,19 +280,22 @@ const setScenario = (key) => {
         >
           {{ l }}
         </div>
-        <div v-if="logs.length === 0" class="placeholder">
+        <div
+          v-if="logs.length === 0"
+          class="placeholder"
+        >
           点击上方“运行”按钮开始...
         </div>
       </div>
     </div>
 
     <div
+      v-if="!isRunning && logs.length > 0"
       class="result-bar"
       :class="{
         success: scenarios[currentScenario].result.includes('成功'),
         error: !scenarios[currentScenario].result.includes('成功')
       }"
-      v-if="!isRunning && logs.length > 0"
     >
       {{ scenarios[currentScenario].result }}
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/ide-intro/VirtualVSCodeDemo.vue b/docs/.vitepress/theme/components/appendix/ide-intro/VirtualVSCodeDemo.vue
index 857ad76..ca0ff4b 100644
--- a/docs/.vitepress/theme/components/appendix/ide-intro/VirtualVSCodeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ide-intro/VirtualVSCodeDemo.vue
@@ -598,21 +598,29 @@ onUnmounted(() => {
   <div class="demo-wrapper">
     <!-- External Controls -->
     <div class="demo-controls">
-      <h3 class="demo-title">虚拟 IDE 交互演示</h3>
+      <h3 class="demo-title">
+        虚拟 IDE 交互演示
+      </h3>
 
-      <div class="tour-controls" v-if="!isAutoPlaying">
+      <div
+        v-if="!isAutoPlaying"
+        class="tour-controls"
+      >
         <!-- Custom Select -->
         <div
+          v-click-outside="closeSelect"
           class="custom-select"
           :class="{ open: selectOpen }"
           @click="selectOpen = !selectOpen"
-          v-click-outside="closeSelect"
         >
           <div class="select-trigger">
             <span>{{ currentTourLabel }}</span>
             <span class="arrow">▼</span>
           </div>
-          <div class="select-options" v-if="selectOpen">
+          <div
+            v-if="selectOpen"
+            class="select-options"
+          >
             <div
               v-for="opt in tourOptions"
               :key="opt.value"
@@ -625,9 +633,20 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <button class="tour-btn" @click="startTour">▶ 开始自动导览</button>
+        <button
+          class="tour-btn"
+          @click="startTour"
+        >
+          ▶ 开始自动导览
+        </button>
       </div>
-      <button class="tour-btn stop" @click="stopTour" v-else>■ 停止演示</button>
+      <button
+        v-else
+        class="tour-btn stop"
+        @click="stopTour"
+      >
+        ■ 停止演示
+      </button>
     </div>
 
     <!-- Info Bar (Text Only) -->
@@ -638,11 +657,14 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <div class="vscode-mock" ref="vscodeMockRef">
+    <div
+      ref="vscodeMockRef"
+      class="vscode-mock"
+    >
       <!-- Virtual Cursor -->
       <div
-        class="virtual-cursor"
         v-if="cursorVisible"
+        class="virtual-cursor"
         :style="{ transform: `translate(${cursorX}px, ${cursorY}px)` }"
       >
         <svg
@@ -662,10 +684,10 @@ onUnmounted(() => {
 
       <!-- Highlight Box for Auto Tour -->
       <div
-        class="highlight-box"
         v-if="highlightVisible"
+        class="highlight-box"
         :style="highlightStyle"
-      ></div>
+      />
 
       <!-- Combined Title Bar -->
       <div
@@ -686,8 +708,14 @@ onUnmounted(() => {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M2 12L7 2L22 12L7 22L2 12Z" fill="#007ACC" />
-              <path d="M17 12L7 5V19L17 12Z" fill="white" />
+              <path
+                d="M2 12L7 2L22 12L7 22L2 12Z"
+                fill="#007ACC"
+              />
+              <path
+                d="M17 12L7 5V19L17 12Z"
+                fill="white"
+              />
             </svg>
           </div>
           <div
@@ -707,7 +735,10 @@ onUnmounted(() => {
               >
                 {{ name }}
               </span>
-              <div v-if="activeMenu === name" class="menu-dropdown">
+              <div
+                v-if="activeMenu === name"
+                class="menu-dropdown"
+              >
                 <div
                   v-for="item in items"
                   :key="item.label"
@@ -750,8 +781,8 @@ onUnmounted(() => {
           >
             <span
               class="layout-icon"
-              @click="toggleSidebarView(activeSidebarView)"
               title="Toggle Sidebar"
+              @click="toggleSidebarView(activeSidebarView)"
             >
               <svg
                 width="14"
@@ -763,7 +794,11 @@ onUnmounted(() => {
                 <path d="M3 3v10h3V3H3z" />
               </svg>
             </span>
-            <span class="layout-icon" @click="togglePanel" title="Toggle Panel">
+            <span
+              class="layout-icon"
+              title="Toggle Panel"
+              @click="togglePanel"
+            >
               <svg
                 width="14"
                 height="14"
@@ -1072,19 +1107,24 @@ onUnmounted(() => {
 
         <!-- Sidebar -->
         <div
-          class="sidebar"
           v-show="sidebarVisible"
+          class="sidebar"
           @mouseenter.stop="showInfo('侧边栏：详细内容')"
           @mouseleave="clearInfo"
         >
-          <div v-if="activeSidebarView === 'EXPLORER'" class="sidebar-content">
+          <div
+            v-if="activeSidebarView === 'EXPLORER'"
+            class="sidebar-content"
+          >
             <div class="sidebar-header">
               <span>EXPLORER</span>
               <span class="sidebar-dots">•••</span>
             </div>
 
             <div class="sidebar-section expanded">
-              <div class="section-header">▼ OPEN EDITORS</div>
+              <div class="section-header">
+                ▼ OPEN EDITORS
+              </div>
               <div class="file-list">
                 <div
                   v-if="activeFile.language !== 'welcome'"
@@ -1095,41 +1135,49 @@ onUnmounted(() => {
                   <span class="file-name">{{ activeFile.name }}</span>
                   <span class="unsaved-dot">●</span>
                 </div>
-                <div v-else class="empty-list-item">No open editors</div>
+                <div
+                  v-else
+                  class="empty-list-item"
+                >
+                  No open editors
+                </div>
               </div>
             </div>
 
             <div class="sidebar-section expanded">
-              <div class="section-header">▼ PYEVAL</div>
+              <div class="section-header">
+                ▼ PYEVAL
+              </div>
               <div class="file-list">
                 <div
                   v-for="(file, index) in files"
-                  :key="file.name"
                   v-show="!file.fixed"
+                  :key="file.name"
                   class="file-item"
                   :class="{ active: index === activeFileIndex }"
                   @click="selectFile(index)"
                 >
                   <span class="file-icon">
-                    <span v-if="file.language === 'html'" style="color: #e34c26"
-                      >📄</span
-                    >
+                    <span
+                      v-if="file.language === 'html'"
+                      style="color: #e34c26"
+                    >📄</span>
                     <span
                       v-else-if="file.language === 'css'"
                       style="color: #563d7c"
-                      >🎨</span
-                    >
+                    >🎨</span>
                     <span
                       v-else-if="file.language === 'python'"
                       style="color: #3776ab"
-                      >🐍</span
-                    >
+                    >🐍</span>
                     <span
                       v-else-if="file.language === 'markdown'"
                       style="color: #42a5f5"
-                      >📝</span
-                    >
-                    <span v-else style="color: #f1e05a">JS</span>
+                    >📝</span>
+                    <span
+                      v-else
+                      style="color: #f1e05a"
+                    >JS</span>
                   </span>
                   <span class="file-name">{{ file.name }}</span>
                 </div>
@@ -1151,25 +1199,30 @@ onUnmounted(() => {
                 placeholder="Search Extensions in Marketplace"
                 :value="searchQuery"
                 readonly
-              />
+              >
             </div>
             <div class="sidebar-section expanded">
-              <div class="section-header">▼ POPULAR</div>
+              <div class="section-header">
+                ▼ POPULAR
+              </div>
               <div class="extension-list">
                 <div
                   v-for="ext in filteredExtensions"
                   :key="ext.id"
                   class="extension-item"
                 >
-                  <div class="extension-icon"></div>
+                  <div class="extension-icon" />
                   <div class="extension-info">
                     <div class="extension-name">
                       {{ ext.name }}
-                      <span v-if="ext.installed" class="installed-badge"
-                        >✔</span
-                      >
+                      <span
+                        v-if="ext.installed"
+                        class="installed-badge"
+                      >✔</span>
+                    </div>
+                    <div class="extension-desc">
+                      {{ ext.description }}
                     </div>
-                    <div class="extension-desc">{{ ext.description }}</div>
                     <div class="extension-actions">
                       <button
                         class="install-btn"
@@ -1216,30 +1269,40 @@ onUnmounted(() => {
                   <span
                     v-else-if="file.language === 'python'"
                     style="color: #3776ab"
-                    >🐍</span
-                  >
+                  >🐍</span>
                   <span
                     v-else-if="file.language === 'markdown'"
                     style="color: #42a5f5"
-                    >📝</span
-                  >
+                  >📝</span>
                   <span v-else>📄</span>
                 </span>
                 <span class="tab-name">{{ file.name }}</span>
-                <span class="close-tab" @click.stop="closeTab(index)">×</span>
+                <span
+                  class="close-tab"
+                  @click.stop="closeTab(index)"
+                >×</span>
               </div>
             </div>
             <div class="tab-actions">
-              <span class="action-btn" title="Open Changes">🔃</span>
-              <span class="action-btn" title="Split Editor">◫</span>
-              <span class="action-btn" title="More Actions">•••</span>
+              <span
+                class="action-btn"
+                title="Open Changes"
+              >🔃</span>
+              <span
+                class="action-btn"
+                title="Split Editor"
+              >◫</span>
+              <span
+                class="action-btn"
+                title="More Actions"
+              >•••</span>
             </div>
           </div>
 
           <!-- Breadcrumbs (Hidden for Welcome) -->
           <div
-            class="breadcrumbs"
             v-if="activeFile.language !== 'welcome'"
+            class="breadcrumbs"
             @mouseenter.stop="showInfo('路径导航：文件路径')"
             @mouseleave="clearInfo"
           >
@@ -1257,13 +1320,15 @@ onUnmounted(() => {
           >
             <!-- Welcome Content -->
             <div
-              class="welcome-content"
               v-if="activeFile.language === 'welcome'"
+              class="welcome-content"
             >
               <div class="welcome-container">
                 <div class="welcome-header">
                   <h1>Visual Studio Code</h1>
-                  <p class="subtitle">Editing evolved</p>
+                  <p class="subtitle">
+                    Editing evolved
+                  </p>
                 </div>
                 <div class="welcome-grid">
                   <div class="welcome-column">
@@ -1284,11 +1349,11 @@ onUnmounted(() => {
                       <span class="action-icon">🌿</span>
                       <span class="action-text">Clone Git Repository...</span>
                     </div>
-                    <h3 class="mt-4">Recent</h3>
+                    <h3 class="mt-4">
+                      Recent
+                    </h3>
                     <div class="recent-item">
-                      <span class="recent-path"
-                        >pyeval/pyeval_expression.py</span
-                      >
+                      <span class="recent-path">pyeval/pyeval_expression.py</span>
                       <span class="recent-detail">~/projects/pyeval</span>
                     </div>
                     <div class="recent-item">
@@ -1299,7 +1364,9 @@ onUnmounted(() => {
                   <div class="welcome-column">
                     <h3>Walkthroughs</h3>
                     <div class="walkthrough-card">
-                      <div class="walkthrough-icon">⭐</div>
+                      <div class="walkthrough-icon">
+                        ⭐
+                      </div>
                       <div class="walkthrough-info">
                         <div class="walkthrough-title">
                           Get Started with VS Code
@@ -1311,7 +1378,9 @@ onUnmounted(() => {
                       </div>
                     </div>
                     <div class="walkthrough-card">
-                      <div class="walkthrough-icon">🐍</div>
+                      <div class="walkthrough-icon">
+                        🐍
+                      </div>
                       <div class="walkthrough-info">
                         <div class="walkthrough-title">
                           Get Started with Python
@@ -1327,9 +1396,17 @@ onUnmounted(() => {
             </div>
 
             <!-- Code Content -->
-            <div class="code-content" v-else>
+            <div
+              v-else
+              class="code-content"
+            >
               <div class="line-numbers">
-                <div v-for="n in 20" :key="n">{{ n }}</div>
+                <div
+                  v-for="n in 20"
+                  :key="n"
+                >
+                  {{ n }}
+                </div>
               </div>
               <div class="code-wrapper">
                 <pre><code>{{ activeFile.content }}</code></pre>
@@ -1340,7 +1417,7 @@ onUnmounted(() => {
                 @mouseenter.stop="showInfo('缩略图：快速跳转')"
                 @mouseleave="clearInfo"
               >
-                <div class="minimap-slider"></div>
+                <div class="minimap-slider" />
                 <div
                   v-for="n in 40"
                   :key="n"
@@ -1349,7 +1426,7 @@ onUnmounted(() => {
                     width: Math.random() * 80 + '%',
                     opacity: Math.random() * 0.5 + 0.3
                   }"
-                ></div>
+                />
               </div>
             </div>
           </div>
@@ -1358,8 +1435,8 @@ onUnmounted(() => {
 
       <!-- Bottom Panel -->
       <div
-        class="bottom-panel"
         v-if="panelVisible"
+        class="bottom-panel"
         @mouseenter.stop="showInfo('底部面板：集成工具')"
         @mouseleave="clearInfo"
       >
@@ -1371,32 +1448,28 @@ onUnmounted(() => {
               @click="activePanel = 'PROBLEMS'"
               @mouseenter.stop="showInfo('问题面板：错误警告')"
               @mouseleave="clearInfo"
-              >PROBLEMS <span class="badge">0</span></span
-            >
+            >PROBLEMS <span class="badge">0</span></span>
             <span
               class="panel-tab"
               :class="{ active: activePanel === 'OUTPUT' }"
               @click="activePanel = 'OUTPUT'"
               @mouseenter.stop="showInfo('输出面板：日志')"
               @mouseleave="clearInfo"
-              >OUTPUT</span
-            >
+            >OUTPUT</span>
             <span
               class="panel-tab"
               :class="{ active: activePanel === 'DEBUG CONSOLE' }"
               @click="activePanel = 'DEBUG CONSOLE'"
               @mouseenter.stop="showInfo('调试控制台')"
               @mouseleave="clearInfo"
-              >DEBUG CONSOLE</span
-            >
+            >DEBUG CONSOLE</span>
             <span
               class="panel-tab"
               :class="{ active: activePanel === 'TERMINAL' }"
               @click="activePanel = 'TERMINAL'"
               @mouseenter.stop="showInfo('终端：命令行')"
               @mouseleave="clearInfo"
-              >TERMINAL</span
-            >
+            >TERMINAL</span>
           </div>
           <div
             class="panel-actions"
@@ -1405,19 +1478,32 @@ onUnmounted(() => {
           >
             <span class="action-btn">➕</span>
             <span class="action-btn">🗑️</span>
-            <span class="action-btn" @click="panelVisible = false">×</span>
+            <span
+              class="action-btn"
+              @click="panelVisible = false"
+            >×</span>
           </div>
         </div>
         <div class="panel-body">
-          <div v-if="activePanel === 'TERMINAL'" class="terminal-content">
-            <div v-for="(line, i) in terminalLines" :key="i" :class="line.type">
+          <div
+            v-if="activePanel === 'TERMINAL'"
+            class="terminal-content"
+          >
+            <div
+              v-for="(line, i) in terminalLines"
+              :key="i"
+              :class="line.type"
+            >
               {{ line.text }}
             </div>
             <div class="cursor-line">
               ➜ pyeval git:(master) ✗ <span class="cursor">_</span>
             </div>
           </div>
-          <div v-else class="empty-panel">
+          <div
+            v-else
+            class="empty-panel"
+          >
             No content to display in {{ activePanel }}.
           </div>
         </div>
@@ -1431,9 +1517,7 @@ onUnmounted(() => {
       >
         <div class="status-left">
           <span class="status-item"><span class="icon">🔃</span> master*</span>
-          <span class="status-item"
-            ><span class="icon">ⓧ</span> 0 <span class="icon">⚠</span> 0</span
-          >
+          <span class="status-item"><span class="icon">ⓧ</span> 0 <span class="icon">⚠</span> 0</span>
         </div>
         <div class="status-right">
           <span class="status-item">Ln 119, Col 71</span>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/CFGScaleDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/CFGScaleDemo.vue
index 9aa38c8..4f35ef9 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/CFGScaleDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/CFGScaleDemo.vue
@@ -26,7 +26,13 @@
           <div class="cfg-slider-section">
             <div class="cfg-label">
               <span>CFG Scale</span>
-              <el-tag type="primary" effect="dark" size="large">{{ cfgScale }}</el-tag>
+              <el-tag
+                type="primary"
+                effect="dark"
+                size="large"
+              >
+                {{ cfgScale }}
+              </el-tag>
             </div>
             <el-slider
               v-model="cfgScale"
@@ -59,7 +65,9 @@
         <div class="comparison-display">
           <div class="comparison-item">
             <div class="item-label">
-              <el-tag type="info">无条件生成</el-tag>
+              <el-tag type="info">
+                无条件生成
+              </el-tag>
               <span class="cfg-value">CFG = 1</span>
             </div>
             <canvas
@@ -68,20 +76,30 @@
               height="200"
               class="comparison-canvas"
             />
-            <div class="item-desc">忽略提示词，自由发挥</div>
+            <div class="item-desc">
+              忽略提示词，自由发挥
+            </div>
           </div>
 
           <div class="comparison-arrow">
-            <el-icon :size="32"><ArrowRight /></el-icon>
+            <el-icon :size="32">
+              <ArrowRight />
+            </el-icon>
             <div class="guidance-formula">
-              <div class="formula">输出 = 无条件 + CFG × (有条件 - 无条件)</div>
-              <div class="formula-desc">CFG 越大，提示词影响越强</div>
+              <div class="formula">
+                输出 = 无条件 + CFG × (有条件 - 无条件)
+              </div>
+              <div class="formula-desc">
+                CFG 越大，提示词影响越强
+              </div>
             </div>
           </div>
 
           <div class="comparison-item">
             <div class="item-label">
-              <el-tag type="success">当前设置</el-tag>
+              <el-tag type="success">
+                当前设置
+              </el-tag>
               <span class="cfg-value">CFG = {{ cfgScale }}</span>
             </div>
             <canvas
@@ -90,13 +108,17 @@
               height="200"
               class="comparison-canvas"
             />
-            <div class="item-desc">{{ getCfgDescription() }}</div>
+            <div class="item-desc">
+              {{ getCfgDescription() }}
+            </div>
           </div>
         </div>
 
         <!-- CFG 效果展示 -->
         <div class="cfg-effects">
-          <div class="effects-title">不同 CFG 值的效果对比</div>
+          <div class="effects-title">
+            不同 CFG 值的效果对比
+          </div>
           <div class="effects-grid">
             <div
               v-for="effect in cfgEffects"
@@ -111,30 +133,54 @@
                 height="120"
                 class="effect-canvas"
               />
-              <div class="effect-label">CFG {{ effect.value }}</div>
-              <div class="effect-desc">{{ effect.desc }}</div>
+              <div class="effect-label">
+                CFG {{ effect.value }}
+              </div>
+              <div class="effect-desc">
+                {{ effect.desc }}
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 推荐设置 -->
         <div class="recommendations">
-          <div class="rec-title">🎯 推荐设置</div>
+          <div class="rec-title">
+            🎯 推荐设置
+          </div>
           <div class="rec-grid">
             <div class="rec-item">
-              <div class="rec-scenario">创意探索</div>
-              <div class="rec-value">CFG 3-5</div>
-              <div class="rec-desc">给 AI 更多自由，适合艺术探索</div>
+              <div class="rec-scenario">
+                创意探索
+              </div>
+              <div class="rec-value">
+                CFG 3-5
+              </div>
+              <div class="rec-desc">
+                给 AI 更多自由，适合艺术探索
+              </div>
             </div>
             <div class="rec-item">
-              <div class="rec-scenario">平衡模式</div>
-              <div class="rec-value">CFG 7-9</div>
-              <div class="rec-desc">大多数场景的最佳选择</div>
+              <div class="rec-scenario">
+                平衡模式
+              </div>
+              <div class="rec-value">
+                CFG 7-9
+              </div>
+              <div class="rec-desc">
+                大多数场景的最佳选择
+              </div>
             </div>
             <div class="rec-item">
-              <div class="rec-scenario">精确控制</div>
-              <div class="rec-value">CFG 12-15</div>
-              <div class="rec-desc">严格遵循提示词，但可能过饱和</div>
+              <div class="rec-scenario">
+                精确控制
+              </div>
+              <div class="rec-value">
+                CFG 12-15
+              </div>
+              <div class="rec-desc">
+                严格遵循提示词，但可能过饱和
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/ControlNetDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/ControlNetDemo.vue
index 341da6e..bc962e5 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/ControlNetDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/ControlNetDemo.vue
@@ -31,16 +31,24 @@
             :class="{ active: selectedControl === control.id }"
             @click="selectedControl = control.id"
           >
-            <div class="control-icon">{{ control.icon }}</div>
-            <div class="control-name">{{ control.name }}</div>
-            <div class="control-desc">{{ control.description }}</div>
+            <div class="control-icon">
+              {{ control.icon }}
+            </div>
+            <div class="control-name">
+              {{ control.name }}
+            </div>
+            <div class="control-desc">
+              {{ control.description }}
+            </div>
           </div>
         </div>
 
         <!-- 可视化流程 -->
         <div class="workflow-viz">
           <div class="workflow-step">
-            <div class="step-label">输入图像</div>
+            <div class="step-label">
+              输入图像
+            </div>
             <canvas
               ref="inputCanvas"
               width="200"
@@ -50,12 +58,18 @@
           </div>
 
           <div class="workflow-arrow">
-            <el-icon :size="24"><ArrowRight /></el-icon>
-            <div class="arrow-label">提取</div>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
+            <div class="arrow-label">
+              提取
+            </div>
           </div>
 
           <div class="workflow-step">
-            <div class="step-label">控制信号</div>
+            <div class="step-label">
+              控制信号
+            </div>
             <canvas
               ref="controlCanvas"
               width="200"
@@ -65,12 +79,18 @@
           </div>
 
           <div class="workflow-arrow">
-            <el-icon :size="24"><ArrowRight /></el-icon>
-            <div class="arrow-label">+ 提示词</div>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
+            <div class="arrow-label">
+              + 提示词
+            </div>
           </div>
 
           <div class="workflow-step">
-            <div class="step-label">生成结果</div>
+            <div class="step-label">
+              生成结果
+            </div>
             <canvas
               ref="outputCanvas"
               width="200"
@@ -84,7 +104,12 @@
         <div class="strength-control">
           <div class="strength-header">
             <span>控制强度 (Control Strength)</span>
-            <el-tag type="primary" effect="dark">{{ controlStrength }}</el-tag>
+            <el-tag
+              type="primary"
+              effect="dark"
+            >
+              {{ controlStrength }}
+            </el-tag>
           </div>
           <el-slider
             v-model="controlStrength"
@@ -105,11 +130,15 @@
 
         <!-- 对比展示 -->
         <div class="comparison-section">
-          <div class="comparison-title">对比：有无 ControlNet</div>
+          <div class="comparison-title">
+            对比：有无 ControlNet
+          </div>
           <div class="comparison-grid">
             <div class="comparison-item">
               <div class="item-label">
-                <el-tag type="info">仅文本生成</el-tag>
+                <el-tag type="info">
+                  仅文本生成
+                </el-tag>
               </div>
               <canvas
                 ref="textOnlyCanvas"
@@ -117,12 +146,16 @@
                 height="180"
                 class="comparison-canvas"
               />
-              <div class="item-desc">姿态随机，不可控</div>
+              <div class="item-desc">
+                姿态随机，不可控
+              </div>
             </div>
 
             <div class="comparison-item">
               <div class="item-label">
-                <el-tag type="success">ControlNet 控制</el-tag>
+                <el-tag type="success">
+                  ControlNet 控制
+                </el-tag>
               </div>
               <canvas
                 ref="controlNetCanvas"
@@ -130,23 +163,33 @@
                 height="180"
                 class="comparison-canvas"
               />
-              <div class="item-desc">姿态精确匹配输入</div>
+              <div class="item-desc">
+                姿态精确匹配输入
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 应用场景 -->
         <div class="use-cases">
-          <div class="use-cases-title">🎯 典型应用场景</div>
+          <div class="use-cases-title">
+            🎯 典型应用场景
+          </div>
           <div class="use-cases-grid">
             <div
               v-for="useCase in useCases"
               :key="useCase.title"
               class="use-case-card"
             >
-              <div class="use-case-icon">{{ useCase.icon }}</div>
-              <div class="use-case-title">{{ useCase.title }}</div>
-              <div class="use-case-desc">{{ useCase.description }}</div>
+              <div class="use-case-icon">
+                {{ useCase.icon }}
+              </div>
+              <div class="use-case-title">
+                {{ useCase.title }}
+              </div>
+              <div class="use-case-desc">
+                {{ useCase.description }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
index e5bdbf0..a4f7cfa 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
@@ -3,23 +3,42 @@
     <div class="magic-frame">
       <!-- The Canvas -->
       <div class="canvas-wrapper">
-        <canvas ref="canvasRef" width="300" height="300"></canvas>
+        <canvas
+          ref="canvasRef"
+          width="300"
+          height="300"
+        />
         
         <!-- Overlay Status -->
-        <div class="status-overlay" :class="{ visible: isProcessing }">
-          <div class="step-counter">Step {{ currentStep }} / {{ totalSteps }}</div>
-          <div class="step-desc">{{ stepDescription }}</div>
+        <div
+          class="status-overlay"
+          :class="{ visible: isProcessing }"
+        >
+          <div class="step-counter">
+            Step {{ currentStep }} / {{ totalSteps }}
+          </div>
+          <div class="step-desc">
+            {{ stepDescription }}
+          </div>
         </div>
       </div>
 
       <!-- Controls -->
       <div class="controls">
-        <button class="magic-btn" @click="startDenoise" :disabled="isProcessing">
+        <button
+          class="magic-btn"
+          :disabled="isProcessing"
+          @click="startDenoise"
+        >
           <span class="icon">✨</span>
           {{ isProcessing ? '去噪中...' : '开始去噪 (Denoise)' }}
         </button>
         
-        <button class="reset-btn" @click="reset" :disabled="isProcessing">
+        <button
+          class="reset-btn"
+          :disabled="isProcessing"
+          @click="reset"
+        >
           <span class="icon">🔄</span> 重置
         </button>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
index 01e41c0..9bd1806 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/FlowMatchingDemo.vue
@@ -2,7 +2,11 @@
   <div class="flow-matching-demo">
     <div class="demo-card">
       <div class="controls">
-        <button class="play-btn" @click="startRace" :disabled="isPlaying">
+        <button
+          class="play-btn"
+          :disabled="isPlaying"
+          @click="startRace"
+        >
           <span class="icon">{{ isPlaying ? 'Running...' : '🚀 开始比赛 (Start Race)' }}</span>
         </button>
       </div>
@@ -15,9 +19,17 @@
             <span class="step-count">{{ diffSteps }} Steps</span>
           </div>
           <div class="canvas-wrapper">
-            <canvas ref="diffCanvasRef" width="400" height="100"></canvas>
-            <div class="marker start">噪声</div>
-            <div class="marker end">图像</div>
+            <canvas
+              ref="diffCanvasRef"
+              width="400"
+              height="100"
+            />
+            <div class="marker start">
+              噪声
+            </div>
+            <div class="marker end">
+              图像
+            </div>
           </div>
         </div>
 
@@ -28,9 +40,17 @@
             <span class="step-count highlight">{{ flowSteps }} Steps</span>
           </div>
           <div class="canvas-wrapper">
-            <canvas ref="flowCanvasRef" width="400" height="100"></canvas>
-            <div class="marker start">噪声</div>
-            <div class="marker end">图像</div>
+            <canvas
+              ref="flowCanvasRef"
+              width="400"
+              height="100"
+            />
+            <div class="marker start">
+              噪声
+            </div>
+            <div class="marker end">
+              图像
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenArchitecture.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenArchitecture.vue
index fd49ceb..b18d99c 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenArchitecture.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenArchitecture.vue
@@ -4,78 +4,124 @@
       <div class="flow-container">
         <!-- Step 1: Prompt -->
         <div class="flow-item">
-          <el-card shadow="hover" class="node-card">
+          <el-card
+            shadow="hover"
+            class="node-card"
+          >
             <template #header>
               <div class="node-header">
-                <el-icon :size="20"><EditPen /></el-icon>
+                <el-icon :size="20">
+                  <EditPen />
+                </el-icon>
                 <span>提示词 (Prompt)</span>
               </div>
             </template>
             <div class="node-content">
-              <el-tag type="info" effect="plain">"一只可爱的猫"</el-tag>
+              <el-tag
+                type="info"
+                effect="plain"
+              >
+                "一只可爱的猫"
+              </el-tag>
             </div>
           </el-card>
         </div>
 
         <div class="arrow-connector">
-          <el-icon :size="24"><Right /></el-icon>
+          <el-icon :size="24">
+            <Right />
+          </el-icon>
         </div>
 
         <!-- Step 2: Text Encoder -->
         <div class="flow-item">
-          <el-card shadow="hover" class="node-card">
+          <el-card
+            shadow="hover"
+            class="node-card"
+          >
             <template #header>
               <div class="node-header">
-                <el-icon :size="20"><Microphone /></el-icon>
+                <el-icon :size="20">
+                  <Microphone />
+                </el-icon>
                 <span>文本编码器</span>
               </div>
             </template>
             <div class="node-content">
-              <div class="model-name">CLIP / T5</div>
-              <div class="data-shape">Vector [768]</div>
+              <div class="model-name">
+                CLIP / T5
+              </div>
+              <div class="data-shape">
+                Vector [768]
+              </div>
             </div>
           </el-card>
         </div>
 
         <div class="arrow-connector">
-          <el-icon :size="24"><Right /></el-icon>
+          <el-icon :size="24">
+            <Right />
+          </el-icon>
         </div>
 
         <!-- Step 3: UNet/DiT -->
         <div class="flow-item main-node">
-          <el-card shadow="hover" class="node-card highlight">
+          <el-card
+            shadow="hover"
+            class="node-card highlight"
+          >
             <template #header>
               <div class="node-header">
-                <el-icon :size="20" color="#E6A23C"><Cpu /></el-icon>
+                <el-icon
+                  :size="20"
+                  color="#E6A23C"
+                >
+                  <Cpu />
+                </el-icon>
                 <span>生成模型</span>
               </div>
             </template>
             <div class="node-content">
-              <div class="model-name">UNet / DiT</div>
+              <div class="model-name">
+                UNet / DiT
+              </div>
               <div class="action-badge">
-                <el-tag type="warning" size="small" effect="dark"
-                  >去噪 (Denoise)</el-tag
+                <el-tag
+                  type="warning"
+                  size="small"
+                  effect="dark"
                 >
+                  去噪 (Denoise)
+                </el-tag>
               </div>
             </div>
           </el-card>
         </div>
 
         <div class="arrow-connector">
-          <el-icon :size="24"><Right /></el-icon>
+          <el-icon :size="24">
+            <Right />
+          </el-icon>
         </div>
 
         <!-- Step 4: VAE Decoder -->
         <div class="flow-item">
-          <el-card shadow="hover" class="node-card">
+          <el-card
+            shadow="hover"
+            class="node-card"
+          >
             <template #header>
               <div class="node-header">
-                <el-icon :size="20"><View /></el-icon>
+                <el-icon :size="20">
+                  <View />
+                </el-icon>
                 <span>图像解码器</span>
               </div>
             </template>
             <div class="node-content">
-              <div class="model-name">VAE Decoder</div>
+              <div class="model-name">
+                VAE Decoder
+              </div>
               <div class="final-output">
                 <el-icon><Picture /></el-icon> Image
               </div>
@@ -90,7 +136,9 @@
         <el-col :span="8">
           <div class="explanation-item">
             <div class="exp-icon">
-              <el-icon color="#409EFF"><Microphone /></el-icon>
+              <el-icon color="#409EFF">
+                <Microphone />
+              </el-icon>
             </div>
             <div class="exp-text">
               <h4>耳朵 (Text Encoder)</h4>
@@ -101,7 +149,9 @@
         <el-col :span="8">
           <div class="explanation-item">
             <div class="exp-icon">
-              <el-icon color="#E6A23C"><Cpu /></el-icon>
+              <el-icon color="#E6A23C">
+                <Cpu />
+              </el-icon>
             </div>
             <div class="exp-text">
               <h4>大脑 (UNet/DiT)</h4>
@@ -114,7 +164,9 @@
         <el-col :span="8">
           <div class="explanation-item">
             <div class="exp-icon">
-              <el-icon color="#67C23A"><View /></el-icon>
+              <el-icon color="#67C23A">
+                <View />
+              </el-icon>
             </div>
             <div class="exp-text">
               <h4>眼睛 (VAE)</h4>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
index f9a9c6b..432a79d 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/ImageGenQuickStartDemo.vue
@@ -15,12 +15,22 @@
 
     <div class="preview-area">
       <div class="canvas-wrapper">
-        <canvas ref="canvasRef" width="400" height="300"></canvas>
-        <div v-if="!isGenerating && !hasGenerated" class="placeholder-text">
+        <canvas
+          ref="canvasRef"
+          width="400"
+          height="300"
+        />
+        <div
+          v-if="!isGenerating && !hasGenerated"
+          class="placeholder-text"
+        >
           👈 点击上方风格，开始创作
         </div>
-        <div v-if="isGenerating" class="loading-overlay">
-          <div class="spinner"></div>
+        <div
+          v-if="isGenerating"
+          class="loading-overlay"
+        >
+          <div class="spinner" />
           <div>AI 正在绘制 {{ presets[selectedPreset].name }}...</div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
index eb6825a..c9540f9 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/LatentSpaceViz.vue
@@ -3,36 +3,62 @@
     <div class="viz-card">
       <!-- Left: The Output (Pixel Space) -->
       <div class="preview-section">
-        <div class="emoji-display" :style="{ transform: `scale(${1 + zoomLevel})` }">
+        <div
+          class="emoji-display"
+          :style="{ transform: `scale(${1 + zoomLevel})` }"
+        >
           {{ currentEmoji }}
         </div>
-        <div class="label">像素空间 (Pixel Space)</div>
-        <div class="sub-label">最终看到的图像</div>
+        <div class="label">
+          像素空间 (Pixel Space)
+        </div>
+        <div class="sub-label">
+          最终看到的图像
+        </div>
       </div>
 
       <!-- Center: The Mechanism -->
       <div class="connection">
-        <div class="arrow">← 映射 →</div>
-        <div class="vae-tag">VAE Decoder</div>
+        <div class="arrow">
+          ← 映射 →
+        </div>
+        <div class="vae-tag">
+          VAE Decoder
+        </div>
       </div>
 
       <!-- Right: The Input (Latent Space) -->
       <div class="control-section">
-        <div class="latent-grid" ref="gridRef" @mousedown="startDrag" @touchstart="startDrag">
-          <div class="grid-lines"></div>
-          <div class="axis-label x-axis">开心值 (Happiness)</div>
-          <div class="axis-label y-axis">惊讶值 (Surprise)</div>
+        <div
+          ref="gridRef"
+          class="latent-grid"
+          @mousedown="startDrag"
+          @touchstart="startDrag"
+        >
+          <div class="grid-lines" />
+          <div class="axis-label x-axis">
+            开心值 (Happiness)
+          </div>
+          <div class="axis-label y-axis">
+            惊讶值 (Surprise)
+          </div>
           
           <!-- The Latent Point -->
           <div 
             class="latent-point"
             :style="{ left: `${point.x}%`, top: `${point.y}%` }"
           >
-            <div class="tooltip">Latent Vector: [{{ ((point.x-50)/50).toFixed(1) }}, {{ ((50-point.y)/50).toFixed(1) }}]</div>
+            <div class="tooltip">
+              Latent Vector: [{{ ((point.x-50)/50).toFixed(1) }}, {{ ((50-point.y)/50).toFixed(1) }}]
+            </div>
           </div>
         </div>
-        <div class="label">潜空间 (Latent Space)</div>
-        <div class="sub-label">拖动红点改变特征</div>
+        <div class="label">
+          潜空间 (Latent Space)
+        </div>
+        <div class="sub-label">
+          拖动红点改变特征
+        </div>
       </div>
     </div>
     
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/LoRADemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/LoRADemo.vue
index 2634a2e..4e4a9c8 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/LoRADemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/LoRADemo.vue
@@ -26,21 +26,43 @@
         <div class="concept-section">
           <div class="concept-visual">
             <div class="model-box base">
-              <div class="box-title">基础模型</div>
-              <div class="box-size">4-8 GB</div>
-              <div class="box-desc">通用知识</div>
+              <div class="box-title">
+                基础模型
+              </div>
+              <div class="box-size">
+                4-8 GB
+              </div>
+              <div class="box-desc">
+                通用知识
+              </div>
+            </div>
+            <div class="plus-sign">
+              +
             </div>
-            <div class="plus-sign">+</div>
             <div class="model-box lora">
-              <div class="box-title">LoRA 权重</div>
-              <div class="box-size">50-200 MB</div>
-              <div class="box-desc">特定风格/角色</div>
+              <div class="box-title">
+                LoRA 权重
+              </div>
+              <div class="box-size">
+                50-200 MB
+              </div>
+              <div class="box-desc">
+                特定风格/角色
+              </div>
+            </div>
+            <div class="equals-sign">
+              =
             </div>
-            <div class="equals-sign">=</div>
             <div class="model-box result">
-              <div class="box-title">定制模型</div>
-              <div class="box-size">无需合并</div>
-              <div class="box-desc">动态加载</div>
+              <div class="box-title">
+                定制模型
+              </div>
+              <div class="box-size">
+                无需合并
+              </div>
+              <div class="box-desc">
+                动态加载
+              </div>
             </div>
           </div>
         </div>
@@ -49,7 +71,12 @@
         <div class="weight-control-section">
           <div class="weight-header">
             <span>LoRA 权重调节</span>
-            <el-tag type="primary" effect="dark">{{ loraWeight }}</el-tag>
+            <el-tag
+              type="primary"
+              effect="dark"
+            >
+              {{ loraWeight }}
+            </el-tag>
           </div>
           <el-slider
             v-model="loraWeight"
@@ -67,21 +94,33 @@
 
           <div class="lora-selector">
             <el-radio-group v-model="selectedLoRA">
-              <el-radio-button label="anime">动漫风格</el-radio-button>
-              <el-radio-button label="realistic">写实风格</el-radio-button>
-              <el-radio-button label="sketch">素描风格</el-radio-button>
-              <el-radio-button label="3d">3D 风格</el-radio-button>
+              <el-radio-button label="anime">
+                动漫风格
+              </el-radio-button>
+              <el-radio-button label="realistic">
+                写实风格
+              </el-radio-button>
+              <el-radio-button label="sketch">
+                素描风格
+              </el-radio-button>
+              <el-radio-button label="3d">
+                3D 风格
+              </el-radio-button>
             </el-radio-group>
           </div>
         </div>
 
         <!-- 效果对比 -->
         <div class="comparison-section">
-          <div class="comparison-title">生成效果对比</div>
+          <div class="comparison-title">
+            生成效果对比
+          </div>
           <div class="comparison-grid">
             <div class="comparison-item">
               <div class="item-label">
-                <el-tag type="info">仅基础模型</el-tag>
+                <el-tag type="info">
+                  仅基础模型
+                </el-tag>
               </div>
               <canvas
                 ref="baseCanvas"
@@ -89,12 +128,16 @@
                 height="200"
                 class="comparison-canvas"
               />
-              <div class="item-desc">通用风格</div>
+              <div class="item-desc">
+                通用风格
+              </div>
             </div>
 
             <div class="comparison-item main">
               <div class="item-label">
-                <el-tag type="success">基础 + LoRA ({{ loraWeight }})</el-tag>
+                <el-tag type="success">
+                  基础 + LoRA ({{ loraWeight }})
+                </el-tag>
               </div>
               <canvas
                 ref="loraCanvas"
@@ -102,21 +145,29 @@
                 height="200"
                 class="comparison-canvas main-canvas"
               />
-              <div class="item-desc">{{ getLoRADescription() }}</div>
+              <div class="item-desc">
+                {{ getLoRADescription() }}
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 多 LoRA 融合 -->
         <div class="fusion-section">
-          <div class="fusion-title">🔀 多 LoRA 融合</div>
+          <div class="fusion-title">
+            🔀 多 LoRA 融合
+          </div>
           <div class="fusion-controls">
             <div
               v-for="(lora, index) in activeLoRAs"
               :key="index"
               class="fusion-item"
             >
-              <el-tag :type="lora.type" closable @close="removeLoRA(index)">
+              <el-tag
+                :type="lora.type"
+                closable
+                @close="removeLoRA(index)"
+              >
                 {{ lora.name }}
               </el-tag>
               <el-slider
@@ -130,16 +181,29 @@
               <span class="weight-display">{{ lora.weight }}</span>
             </div>
             <el-dropdown @command="addLoRA">
-              <el-button type="primary" size="small">
+              <el-button
+                type="primary"
+                size="small"
+              >
                 <el-icon><Plus /></el-icon> 添加 LoRA
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item command="anime">动漫风格</el-dropdown-item>
-                  <el-dropdown-item command="realistic">写实风格</el-dropdown-item>
-                  <el-dropdown-item command="sketch">素描风格</el-dropdown-item>
-                  <el-dropdown-item command="3d">3D 风格</el-dropdown-item>
-                  <el-dropdown-item command="watercolor">水彩风格</el-dropdown-item>
+                  <el-dropdown-item command="anime">
+                    动漫风格
+                  </el-dropdown-item>
+                  <el-dropdown-item command="realistic">
+                    写实风格
+                  </el-dropdown-item>
+                  <el-dropdown-item command="sketch">
+                    素描风格
+                  </el-dropdown-item>
+                  <el-dropdown-item command="3d">
+                    3D 风格
+                  </el-dropdown-item>
+                  <el-dropdown-item command="watercolor">
+                    水彩风格
+                  </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -153,7 +217,9 @@
               class="fusion-canvas"
             />
             <div class="fusion-formula">
-              <div class="formula-title">融合公式</div>
+              <div class="formula-title">
+                融合公式
+              </div>
               <div class="formula-content">
                 输出 = 基础模型 + Σ(LoRAᵢ × 权重ᵢ)
               </div>
@@ -163,27 +229,53 @@
 
         <!-- 应用场景 -->
         <div class="use-cases">
-          <div class="use-cases-title">🎯 LoRA 典型应用</div>
+          <div class="use-cases-title">
+            🎯 LoRA 典型应用
+          </div>
           <div class="use-cases-grid">
             <div class="use-case-card">
-              <div class="use-case-icon">👤</div>
-              <div class="use-case-title">角色一致性</div>
-              <div class="use-case-desc">训练特定角色，保持形象一致</div>
+              <div class="use-case-icon">
+                👤
+              </div>
+              <div class="use-case-title">
+                角色一致性
+              </div>
+              <div class="use-case-desc">
+                训练特定角色，保持形象一致
+              </div>
             </div>
             <div class="use-case-card">
-              <div class="use-case-icon">🎨</div>
-              <div class="use-case-title">艺术风格</div>
-              <div class="use-case-desc">模仿特定画家或艺术风格</div>
+              <div class="use-case-icon">
+                🎨
+              </div>
+              <div class="use-case-title">
+                艺术风格
+              </div>
+              <div class="use-case-desc">
+                模仿特定画家或艺术风格
+              </div>
             </div>
             <div class="use-case-card">
-              <div class="use-case-icon">👗</div>
-              <div class="use-case-title">服装概念</div>
-              <div class="use-case-desc">特定服装或配饰设计</div>
+              <div class="use-case-icon">
+                👗
+              </div>
+              <div class="use-case-title">
+                服装概念
+              </div>
+              <div class="use-case-desc">
+                特定服装或配饰设计
+              </div>
             </div>
             <div class="use-case-card">
-              <div class="use-case-icon">🏢</div>
-              <div class="use-case-title">产品展示</div>
-              <div class="use-case-desc">特定产品或品牌风格</div>
+              <div class="use-case-icon">
+                🏢
+              </div>
+              <div class="use-case-title">
+                产品展示
+              </div>
+              <div class="use-case-desc">
+                特定产品或品牌风格
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptEngineeringDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptEngineeringDemo.vue
index 49f08e7..b3d1b3e 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptEngineeringDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptEngineeringDemo.vue
@@ -35,7 +35,9 @@
           </div>
 
           <div class="prompt-analysis">
-            <div class="analysis-title">关键词分析</div>
+            <div class="analysis-title">
+              关键词分析
+            </div>
             <div class="keywords-list">
               <div
                 v-for="(keyword, index) in analyzedKeywords"
@@ -76,11 +78,16 @@
         <div class="preview-panel">
           <div class="preview-tabs">
             <el-tabs v-model="activeTab">
-              <el-tab-pane label="结构解析" name="structure">
+              <el-tab-pane
+                label="结构解析"
+                name="structure"
+              >
                 <div class="structure-viz">
                   <div class="structure-section">
                     <div class="section-header">
-                      <el-tag type="primary">主体 (Subject)</el-tag>
+                      <el-tag type="primary">
+                        主体 (Subject)
+                      </el-tag>
                     </div>
                     <div class="section-content">
                       {{ extractSubject() || '未检测到主体' }}
@@ -89,7 +96,9 @@
 
                   <div class="structure-section">
                     <div class="section-header">
-                      <el-tag type="success">风格 (Style)</el-tag>
+                      <el-tag type="success">
+                        风格 (Style)
+                      </el-tag>
                     </div>
                     <div class="section-content">
                       {{ extractStyle() || '未检测到风格词' }}
@@ -98,7 +107,9 @@
 
                   <div class="structure-section">
                     <div class="section-header">
-                      <el-tag type="warning">质量 (Quality)</el-tag>
+                      <el-tag type="warning">
+                        质量 (Quality)
+                      </el-tag>
                     </div>
                     <div class="section-content">
                       {{ extractQuality() || '未检测到质量词' }}
@@ -107,7 +118,9 @@
 
                   <div class="structure-section">
                     <div class="section-header">
-                      <el-tag type="info">环境 (Environment)</el-tag>
+                      <el-tag type="info">
+                        环境 (Environment)
+                      </el-tag>
                     </div>
                     <div class="section-content">
                       {{ extractEnvironment() || '未检测到环境描述' }}
@@ -116,7 +129,10 @@
                 </div>
               </el-tab-pane>
 
-              <el-tab-pane label="对比示例" name="comparison">
+              <el-tab-pane
+                label="对比示例"
+                name="comparison"
+              >
                 <div class="comparison-list">
                   <div
                     v-for="(example, index) in promptExamples"
@@ -125,13 +141,20 @@
                     :class="{ active: selectedExample === index }"
                     @click="selectExample(index)"
                   >
-                    <div class="example-prompt">{{ example.prompt }}</div>
-                    <div class="example-desc">{{ example.description }}</div>
+                    <div class="example-prompt">
+                      {{ example.prompt }}
+                    </div>
+                    <div class="example-desc">
+                      {{ example.description }}
+                    </div>
                   </div>
                 </div>
               </el-tab-pane>
 
-              <el-tab-pane label="负面提示词" name="negative">
+              <el-tab-pane
+                label="负面提示词"
+                name="negative"
+              >
                 <div class="negative-prompt-section">
                   <label>负面提示词 (Negative Prompt)</label>
                   <el-input
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
index d9b1edb..9fc6a32 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/PromptVisualizer.vue
@@ -14,21 +14,34 @@
           :style="{ opacity: 0.4 + (token.weight * 0.6) }"
         >
           {{ token.text }}
-          <div class="tooltip">关注度: {{ (token.weight * 100).toFixed(0) }}%</div>
+          <div class="tooltip">
+            关注度: {{ (token.weight * 100).toFixed(0) }}%
+          </div>
         </div>
       </div>
       
-      <div class="arrow-down">⬇️ CLIP Encoding & Attention</div>
+      <div class="arrow-down">
+        ⬇️ CLIP Encoding & Attention
+      </div>
       
       <div class="image-map">
         <!-- Abstract representation of an image being attended to -->
-        <div class="map-layer" style="background: #2b0055; opacity: 0.9;">
+        <div
+          class="map-layer"
+          style="background: #2b0055; opacity: 0.9;"
+        >
           <span>City Base</span>
         </div>
-        <div class="map-layer" style="background: #ff00aa; width: 60%; height: 60%; opacity: 0.8;">
+        <div
+          class="map-layer"
+          style="background: #ff00aa; width: 60%; height: 60%; opacity: 0.8;"
+        >
           <span>Neon Glow</span>
         </div>
-        <div class="map-layer" style="background: #fff; width: 30%; height: 30%; border-radius: 50%;">
+        <div
+          class="map-layer"
+          style="background: #fff; width: 30%; height: 30%; border-radius: 50%;"
+        >
           <span>Cat</span>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/SamplerComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/SamplerComparisonDemo.vue
index 878a915..16a726e 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/SamplerComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/SamplerComparisonDemo.vue
@@ -33,9 +33,16 @@
           >
             <div class="sampler-header">
               <span class="sampler-name">{{ sampler.name }}</span>
-              <el-tag :type="sampler.speed" size="small">{{ sampler.speedLabel }}</el-tag>
+              <el-tag
+                :type="sampler.speed"
+                size="small"
+              >
+                {{ sampler.speedLabel }}
+              </el-tag>
+            </div>
+            <div class="sampler-desc">
+              {{ sampler.description }}
             </div>
-            <div class="sampler-desc">{{ sampler.description }}</div>
             <div class="sampler-pros-cons">
               <div class="pros">
                 <el-icon><CircleCheck /></el-icon>
@@ -74,7 +81,10 @@
           </div>
 
           <div class="sampler-details">
-            <el-descriptions :column="2" border>
+            <el-descriptions
+              :column="2"
+              border
+            >
               <el-descriptions-item label="推荐步数">
                 {{ currentSampler.recommendedSteps }}
               </el-descriptions-item>
@@ -98,23 +108,37 @@
 
         <!-- 推荐矩阵 -->
         <div class="recommendation-matrix">
-          <div class="matrix-title">🎯 采样器选择指南</div>
+          <div class="matrix-title">
+            🎯 采样器选择指南
+          </div>
           <div class="matrix-grid">
             <div class="matrix-row header">
-              <div class="matrix-cell">场景</div>
-              <div class="matrix-cell">推荐采样器</div>
-              <div class="matrix-cell">原因</div>
+              <div class="matrix-cell">
+                场景
+              </div>
+              <div class="matrix-cell">
+                推荐采样器
+              </div>
+              <div class="matrix-cell">
+                原因
+              </div>
             </div>
             <div
               v-for="rec in recommendations"
               :key="rec.scenario"
               class="matrix-row"
             >
-              <div class="matrix-cell scenario">{{ rec.scenario }}</div>
-              <div class="matrix-cell">
-                <el-tag type="primary">{{ rec.sampler }}</el-tag>
+              <div class="matrix-cell scenario">
+                {{ rec.scenario }}
+              </div>
+              <div class="matrix-cell">
+                <el-tag type="primary">
+                  {{ rec.sampler }}
+                </el-tag>
+              </div>
+              <div class="matrix-cell reason">
+                {{ rec.reason }}
               </div>
-              <div class="matrix-cell reason">{{ rec.reason }}</div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/UNetDenoiseDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/UNetDenoiseDemo.vue
index 83d3931..6e84b38 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/UNetDenoiseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/UNetDenoiseDemo.vue
@@ -19,18 +19,30 @@
           <span class="title">🧠 UNet 去噪模型</span>
           <div class="controls">
             <el-button-group>
-              <el-button @click="stepBackward" :disabled="currentStep <= 0">
+              <el-button
+                :disabled="currentStep <= 0"
+                @click="stepBackward"
+              >
                 <el-icon><ArrowLeft /></el-icon>
               </el-button>
               <el-button @click="togglePlay">
-                <el-icon v-if="isPlaying"><VideoPause /></el-icon>
-                <el-icon v-else><VideoPlay /></el-icon>
+                <el-icon v-if="isPlaying">
+                  <VideoPause />
+                </el-icon>
+                <el-icon v-else>
+                  <VideoPlay />
+                </el-icon>
               </el-button>
-              <el-button @click="stepForward" :disabled="currentStep >= totalSteps">
+              <el-button
+                :disabled="currentStep >= totalSteps"
+                @click="stepForward"
+              >
                 <el-icon><ArrowRight /></el-icon>
               </el-button>
             </el-button-group>
-            <el-button @click="reset">重置</el-button>
+            <el-button @click="reset">
+              重置
+            </el-button>
           </div>
         </div>
       </template>
@@ -39,7 +51,9 @@
         <!-- 主展示区 -->
         <div class="main-display">
           <div class="display-section">
-            <div class="section-label">当前噪声图像 (Noisy Image)</div>
+            <div class="section-label">
+              当前噪声图像 (Noisy Image)
+            </div>
             <canvas
               ref="noisyCanvas"
               width="256"
@@ -47,22 +61,36 @@
               class="display-canvas"
             />
             <div class="timestep-info">
-              <el-tag type="info">Timestep: {{ currentStep }} / {{ totalSteps }}</el-tag>
-              <el-tag :type="getNoiseLevelType()">噪声强度: {{ getNoiseLevel() }}%</el-tag>
+              <el-tag type="info">
+                Timestep: {{ currentStep }} / {{ totalSteps }}
+              </el-tag>
+              <el-tag :type="getNoiseLevelType()">
+                噪声强度: {{ getNoiseLevel() }}%
+              </el-tag>
             </div>
           </div>
 
           <div class="arrow-section">
-            <el-icon :size="24"><ArrowRight /></el-icon>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
             <div class="model-box">
-              <div class="model-name">UNet / DiT</div>
-              <div class="model-desc">预测噪声</div>
+              <div class="model-name">
+                UNet / DiT
+              </div>
+              <div class="model-desc">
+                预测噪声
+              </div>
             </div>
-            <el-icon :size="24"><ArrowRight /></el-icon>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
           </div>
 
           <div class="display-section">
-            <div class="section-label">预测的噪声 (Predicted Noise)</div>
+            <div class="section-label">
+              预测的噪声 (Predicted Noise)
+            </div>
             <canvas
               ref="noiseCanvas"
               width="256"
@@ -70,21 +98,36 @@
               class="display-canvas noise-preview"
             />
             <div class="noise-stats">
-              <el-tag size="small" type="warning">噪声估计</el-tag>
+              <el-tag
+                size="small"
+                type="warning"
+              >
+                噪声估计
+              </el-tag>
             </div>
           </div>
 
           <div class="arrow-section">
-            <el-icon :size="24"><ArrowRight /></el-icon>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
             <div class="operation-box">
-              <div class="op-name">减法</div>
-              <div class="op-formula">x - ε</div>
+              <div class="op-name">
+                减法
+              </div>
+              <div class="op-formula">
+                x - ε
+              </div>
             </div>
-            <el-icon :size="24"><ArrowRight /></el-icon>
+            <el-icon :size="24">
+              <ArrowRight />
+            </el-icon>
           </div>
 
           <div class="display-section">
-            <div class="section-label">去噪结果 (Denoised)</div>
+            <div class="section-label">
+              去噪结果 (Denoised)
+            </div>
             <canvas
               ref="denoisedCanvas"
               width="256"
@@ -102,7 +145,9 @@
 
         <!-- 时间轴 -->
         <div class="timeline-section">
-          <div class="timeline-label">去噪时间轴</div>
+          <div class="timeline-label">
+            去噪时间轴
+          </div>
           <el-slider
             v-model="currentStep"
             :min="0"
@@ -120,9 +165,14 @@
             v-model="showComparison"
             active-text="显示对比 (有/无文本引导)"
           />
-          <div v-if="showComparison" class="compare-display">
+          <div
+            v-if="showComparison"
+            class="compare-display"
+          >
             <div class="compare-item">
-              <div class="compare-label">无引导 (Unconditional)</div>
+              <div class="compare-label">
+                无引导 (Unconditional)
+              </div>
               <canvas
                 ref="uncondCanvas"
                 width="200"
@@ -131,7 +181,9 @@
               />
             </div>
             <div class="compare-item">
-              <div class="compare-label">有引导 (CFG Scale=7.5)</div>
+              <div class="compare-label">
+                有引导 (CFG Scale=7.5)
+              </div>
               <canvas
                 ref="condCanvas"
                 width="200"
diff --git a/docs/.vitepress/theme/components/appendix/image-gen-intro/VaeEncoderDemo.vue b/docs/.vitepress/theme/components/appendix/image-gen-intro/VaeEncoderDemo.vue
index 46581ef..472dc27 100644
--- a/docs/.vitepress/theme/components/appendix/image-gen-intro/VaeEncoderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/image-gen-intro/VaeEncoderDemo.vue
@@ -18,7 +18,10 @@
       <template #header>
         <div class="header-controls">
           <span class="title">🔍 VAE 编解码器</span>
-          <el-radio-group v-model="mode" size="small">
+          <el-radio-group
+            v-model="mode"
+            size="small"
+          >
             <el-radio-button label="encode">
               <el-icon><ArrowRight /></el-icon> 编码 (Encode)
             </el-radio-button>
@@ -32,7 +35,9 @@
       <div class="vae-flow">
         <!-- 输入侧 -->
         <div class="stage">
-          <div class="stage-label">{{ mode === 'encode' ? '原始图像' : '潜空间表示' }}</div>
+          <div class="stage-label">
+            {{ mode === 'encode' ? '原始图像' : '潜空间表示' }}
+          </div>
           <div class="stage-visual">
             <canvas
               ref="inputCanvas"
@@ -42,7 +47,10 @@
             />
           </div>
           <div class="stage-info">
-            <el-tag size="small" type="info">
+            <el-tag
+              size="small"
+              type="info"
+            >
               {{ mode === 'encode' ? '512 × 512 × 3 = 786,432 数值' : '64 × 64 × 4 = 16,384 数值' }}
             </el-tag>
           </div>
@@ -50,17 +58,27 @@
 
         <!-- 箭头 -->
         <div class="arrow-stage">
-          <el-icon class="flow-arrow" :size="32">
+          <el-icon
+            class="flow-arrow"
+            :size="32"
+          >
             <component :is="mode === 'encode' ? ArrowRight : ArrowLeft" />
           </el-icon>
           <div class="compression-ratio">
-            <el-tag type="success" effect="dark">压缩率: 48×</el-tag>
+            <el-tag
+              type="success"
+              effect="dark"
+            >
+              压缩率: 48×
+            </el-tag>
           </div>
         </div>
 
         <!-- 输出侧 -->
         <div class="stage">
-          <div class="stage-label">{{ mode === 'encode' ? '潜空间表示' : '重建图像' }}</div>
+          <div class="stage-label">
+            {{ mode === 'encode' ? '潜空间表示' : '重建图像' }}
+          </div>
           <div class="stage-visual">
             <canvas
               ref="outputCanvas"
@@ -70,7 +88,10 @@
             />
           </div>
           <div class="stage-info">
-            <el-tag size="small" type="info">
+            <el-tag
+              size="small"
+              type="info"
+            >
               {{ mode === 'encode' ? '64 × 64 × 4 = 16,384 数值' : '512 × 512 × 3 = 786,432 数值' }}
             </el-tag>
           </div>
@@ -78,8 +99,13 @@
       </div>
 
       <!-- 潜空间可视化 -->
-      <div class="latent-viz" v-if="mode === 'encode'">
-        <div class="latent-title">潜空间特征图 (4 个通道)</div>
+      <div
+        v-if="mode === 'encode'"
+        class="latent-viz"
+      >
+        <div class="latent-title">
+          潜空间特征图 (4 个通道)
+        </div>
         <div class="latent-channels">
           <div
             v-for="i in 4"
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncDemo.vue
index b93a837..e23bd57 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncDemo.vue
@@ -17,55 +17,106 @@
       <button
         v-for="tab in tabs"
         :key="tab.id"
-        @click="activeTab = tab.id"
         class="tab-btn"
         :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
       >
         {{ tab.label }}
       </button>
     </div>
 
     <!-- 回调函数 -->
-    <div v-if="activeTab === 'callback'" class="tab-content">
+    <div
+      v-if="activeTab === 'callback'"
+      class="tab-content"
+    >
       <div class="callback-demo">
         <div class="concept-card">
-          <div class="concept-icon">🔄</div>
-          <div class="concept-title">回调函数 (Callback)</div>
+          <div class="concept-icon">
+            🔄
+          </div>
+          <div class="concept-title">
+            回调函数 (Callback)
+          </div>
           <div class="concept-desc">
             把函数作为参数传给另一个函数，等操作完成后再调用它。这是最早的异步处理方式。
           </div>
         </div>
 
         <div class="code-example">
-          <div class="code-title">回调函数示例</div>
+          <div class="code-title">
+            回调函数示例
+          </div>
           <div class="code-block">
-            <div class="code-line comment">// 模拟异步操作（如网络请求）</div>
-            <div class="code-line">function fetchData(callback) {</div>
-            <div class="code-line indent">setTimeout(() => {</div>
-            <div class="code-line indent indent">const data = { id: 1, name: "数据" }</div>
-            <div class="code-line indent indent">callback(data)</div>
-            <div class="code-line indent">}, 1000)</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 使用回调</div>
-            <div class="code-line">fetchData(function(data) {</div>
-            <div class="code-line indent">console.log("收到数据:", data)</div>
-            <div class="code-line">})</div>
+            <div class="code-line comment">
+              // 模拟异步操作（如网络请求）
+            </div>
+            <div class="code-line">
+              function fetchData(callback) {
+            </div>
+            <div class="code-line indent">
+              setTimeout(() => {
+            </div>
+            <div class="code-line indent indent">
+              const data = { id: 1, name: "数据" }
+            </div>
+            <div class="code-line indent indent">
+              callback(data)
+            </div>
+            <div class="code-line indent">
+              }, 1000)
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 使用回调
+            </div>
+            <div class="code-line">
+              fetchData(function(data) {
+            </div>
+            <div class="code-line indent">
+              console.log("收到数据:", data)
+            </div>
+            <div class="code-line">
+              })
+            </div>
           </div>
         </div>
 
         <div class="callback-problem">
-          <div class="problem-title">⚠️ 回调地狱问题</div>
+          <div class="problem-title">
+            ⚠️ 回调地狱问题
+          </div>
           <div class="code-block bad">
-            <div class="code-line">getData(function(a) {</div>
-            <div class="code-line indent">getMoreData(a, function(b) {</div>
-            <div class="code-line indent indent">getMoreData(b, function(c) {</div>
-            <div class="code-line indent indent indent">getMoreData(c, function(d) {</div>
-            <div class="code-line indent indent indent indent">// 无限嵌套...</div>
-            <div class="code-line indent indent indent">})</div>
-            <div class="code-line indent indent">})</div>
-            <div class="code-line indent">})</div>
-            <div class="code-line">})</div>
+            <div class="code-line">
+              getData(function(a) {
+            </div>
+            <div class="code-line indent">
+              getMoreData(a, function(b) {
+            </div>
+            <div class="code-line indent indent">
+              getMoreData(b, function(c) {
+            </div>
+            <div class="code-line indent indent indent">
+              getMoreData(c, function(d) {
+            </div>
+            <div class="code-line indent indent indent indent">
+              // 无限嵌套...
+            </div>
+            <div class="code-line indent indent indent">
+              })
+            </div>
+            <div class="code-line indent indent">
+              })
+            </div>
+            <div class="code-line indent">
+              })
+            </div>
+            <div class="code-line">
+              })
+            </div>
           </div>
           <div class="problem-desc">
             多个异步操作嵌套会导致代码难以维护，被称为"回调地狱"。
@@ -75,82 +126,173 @@
     </div>
 
     <!-- Promise -->
-    <div v-else-if="activeTab === 'promise'" class="tab-content">
+    <div
+      v-else-if="activeTab === 'promise'"
+      class="tab-content"
+    >
       <div class="promise-demo">
         <div class="promise-states">
-          <div class="state-title">Promise 的三种状态</div>
+          <div class="state-title">
+            Promise 的三种状态
+          </div>
           <div class="states-diagram">
-            <div class="state-box pending" :class="{ active: promiseState === 'pending' }">
-              <div class="state-name">Pending</div>
-              <div class="state-desc">进行中</div>
+            <div
+              class="state-box pending"
+              :class="{ active: promiseState === 'pending' }"
+            >
+              <div class="state-name">
+                Pending
+              </div>
+              <div class="state-desc">
+                进行中
+              </div>
+            </div>
+            <div
+              v-if="promiseState === 'pending'"
+              class="state-arrow"
+            >
+              ⏳
             </div>
-            <div class="state-arrow" v-if="promiseState === 'pending'">⏳</div>
 
             <div class="state-branch">
               <div class="branch-top">
-                <div class="state-box fulfilled" :class="{ active: promiseState === 'fulfilled' }">
-                  <div class="state-name">Fulfilled</div>
-                  <div class="state-desc">已成功</div>
+                <div
+                  class="state-box fulfilled"
+                  :class="{ active: promiseState === 'fulfilled' }"
+                >
+                  <div class="state-name">
+                    Fulfilled
+                  </div>
+                  <div class="state-desc">
+                    已成功
+                  </div>
+                </div>
+                <div
+                  v-if="promiseState === 'fulfilled'"
+                  class="state-arrow"
+                >
+                  ✅
                 </div>
-                <div class="state-arrow" v-if="promiseState === 'fulfilled'">✅</div>
               </div>
 
               <div class="branch-bottom">
-                <div class="state-box rejected" :class="{ active: promiseState === 'rejected' }">
-                  <div class="state-name">Rejected</div>
-                  <div class="state-desc">已失败</div>
+                <div
+                  class="state-box rejected"
+                  :class="{ active: promiseState === 'rejected' }"
+                >
+                  <div class="state-name">
+                    Rejected
+                  </div>
+                  <div class="state-desc">
+                    已失败
+                  </div>
+                </div>
+                <div
+                  v-if="promiseState === 'rejected'"
+                  class="state-arrow"
+                >
+                  ❌
                 </div>
-                <div class="state-arrow" v-if="promiseState === 'rejected'">❌</div>
               </div>
             </div>
           </div>
 
           <div class="promise-actions">
-            <button @click="simulatePromise('fulfilled')" class="action-btn success">
+            <button
+              class="action-btn success"
+              @click="simulatePromise('fulfilled')"
+            >
               模拟成功
             </button>
-            <button @click="simulatePromise('rejected')" class="action-btn error">
+            <button
+              class="action-btn error"
+              @click="simulatePromise('rejected')"
+            >
               模拟失败
             </button>
           </div>
         </div>
 
         <div class="promise-usage">
-          <div class="code-title">Promise 使用示例</div>
+          <div class="code-title">
+            Promise 使用示例
+          </div>
           <div class="code-block">
-            <div class="code-line comment">// 创建 Promise</div>
-            <div class="code-line">const promise = new Promise((resolve, reject) => {</div>
-            <div class="code-line indent">const success = Math.random() > 0.5</div>
-            <div class="code-line indent">if (success) {</div>
-            <div class="code-line indent indent">resolve("操作成功！")</div>
-            <div class="code-line indent">} else {</div>
-            <div class="code-line indent indent">reject("操作失败！")</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">})</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 使用 then/catch</div>
-            <div class="code-line">promise</div>
-            <div class="code-line indent">.then(result => console.log(result))</div>
-            <div class="code-line indent">.catch(error => console.error(error))</div>
+            <div class="code-line comment">
+              // 创建 Promise
+            </div>
+            <div class="code-line">
+              const promise = new Promise((resolve, reject) => {
+            </div>
+            <div class="code-line indent">
+              const success = Math.random() > 0.5
+            </div>
+            <div class="code-line indent">
+              if (success) {
+            </div>
+            <div class="code-line indent indent">
+              resolve("操作成功！")
+            </div>
+            <div class="code-line indent">
+              } else {
+            </div>
+            <div class="code-line indent indent">
+              reject("操作失败！")
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              })
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 使用 then/catch
+            </div>
+            <div class="code-line">
+              promise
+            </div>
+            <div class="code-line indent">
+              .then(result => console.log(result))
+            </div>
+            <div class="code-line indent">
+              .catch(error => console.error(error))
+            </div>
           </div>
 
           <div class="promise-chain">
-            <div class="chain-title">链式调用</div>
+            <div class="chain-title">
+              链式调用
+            </div>
             <div class="chain-visual">
               <div class="chain-step">
-                <div class="step-box">Promise</div>
-                <div class="step-arrow">→</div>
+                <div class="step-box">
+                  Promise
+                </div>
+                <div class="step-arrow">
+                  →
+                </div>
               </div>
               <div class="chain-step">
-                <div class="step-box then">.then()</div>
-                <div class="step-arrow">→</div>
+                <div class="step-box then">
+                  .then()
+                </div>
+                <div class="step-arrow">
+                  →
+                </div>
               </div>
               <div class="chain-step">
-                <div class="step-box then">.then()</div>
-                <div class="step-arrow">→</div>
+                <div class="step-box then">
+                  .then()
+                </div>
+                <div class="step-arrow">
+                  →
+                </div>
               </div>
               <div class="chain-step">
-                <div class="step-box catch">.catch()</div>
+                <div class="step-box catch">
+                  .catch()
+                </div>
               </div>
             </div>
           </div>
@@ -159,61 +301,132 @@
     </div>
 
     <!-- async/await -->
-    <div v-else-if="activeTab === 'async'" class="tab-content">
+    <div
+      v-else-if="activeTab === 'async'"
+      class="tab-content"
+    >
       <div class="async-await-demo">
         <div class="comparison-view">
           <div class="compare-panel promise">
-            <div class="panel-title">Promise 链式调用</div>
+            <div class="panel-title">
+              Promise 链式调用
+            </div>
             <div class="code-block">
-              <div class="code-line">function fetchUser() {</div>
-              <div class="code-line indent">return fetch('/user')</div>
-              <div class="code-line indent indent">.then(res => res.json())</div>
-              <div class="code-line indent indent">.then(user => {</div>
-              <div class="code-line indent indent indent">return fetch(`/posts/${user.id}`)</div>
-              <div class="code-line indent indent">})</div>
-              <div class="code-line indent indent">.then(res => res.json())</div>
-              <div class="code-line indent indent">.then(posts => {</div>
-              <div class="code-line indent indent indent">console.log(posts)</div>
-              <div class="code-line indent indent">})</div>
-              <div class="code-line">}</div>
+              <div class="code-line">
+                function fetchUser() {
+              </div>
+              <div class="code-line indent">
+                return fetch('/user')
+              </div>
+              <div class="code-line indent indent">
+                .then(res => res.json())
+              </div>
+              <div class="code-line indent indent">
+                .then(user => {
+              </div>
+              <div class="code-line indent indent indent">
+                return fetch(`/posts/${user.id}`)
+              </div>
+              <div class="code-line indent indent">
+                })
+              </div>
+              <div class="code-line indent indent">
+                .then(res => res.json())
+              </div>
+              <div class="code-line indent indent">
+                .then(posts => {
+              </div>
+              <div class="code-line indent indent indent">
+                console.log(posts)
+              </div>
+              <div class="code-line indent indent">
+                })
+              </div>
+              <div class="code-line">
+                }
+              </div>
             </div>
           </div>
 
           <div class="compare-panel async">
-            <div class="panel-title">async/await 语法</div>
+            <div class="panel-title">
+              async/await 语法
+            </div>
             <div class="code-block">
-              <div class="code-line">async function fetchUser() {</div>
-              <div class="code-line indent">try {</div>
-              <div class="code-line indent indent">const res = await fetch('/user')</div>
-              <div class="code-line indent indent">const user = await res.json()</div>
-              <div class="code-line indent indent">const postRes = await fetch(`/posts/${user.id}`)</div>
-              <div class="code-line indent indent">const posts = await postRes.json()</div>
-              <div class="code-line indent indent">console.log(posts)</div>
-              <div class="code-line indent">} catch (error) {</div>
-              <div class="code-line indent indent">console.error(error)</div>
-              <div class="code-line indent">}</div>
-              <div class="code-line">}</div>
+              <div class="code-line">
+                async function fetchUser() {
+              </div>
+              <div class="code-line indent">
+                try {
+              </div>
+              <div class="code-line indent indent">
+                const res = await fetch('/user')
+              </div>
+              <div class="code-line indent indent">
+                const user = await res.json()
+              </div>
+              <div class="code-line indent indent">
+                const postRes = await fetch(`/posts/${user.id}`)
+              </div>
+              <div class="code-line indent indent">
+                const posts = await postRes.json()
+              </div>
+              <div class="code-line indent indent">
+                console.log(posts)
+              </div>
+              <div class="code-line indent">
+                } catch (error) {
+              </div>
+              <div class="code-line indent indent">
+                console.error(error)
+              </div>
+              <div class="code-line indent">
+                }
+              </div>
+              <div class="code-line">
+                }
+              </div>
             </div>
           </div>
         </div>
 
         <div class="async-playground">
-          <div class="playground-title">async/await 特点</div>
+          <div class="playground-title">
+            async/await 特点
+          </div>
           <div class="feature-grid">
             <div class="feature-item">
-              <div class="feature-icon">📖</div>
-              <div class="feature-name">更像同步代码</div>
-              <div class="feature-desc">用同步的方式写异步代码，更易读</div>
+              <div class="feature-icon">
+                📖
+              </div>
+              <div class="feature-name">
+                更像同步代码
+              </div>
+              <div class="feature-desc">
+                用同步的方式写异步代码，更易读
+              </div>
             </div>
             <div class="feature-item">
-              <div class="feature-icon">🎯</div>
-              <div class="feature-name">错误处理简单</div>
-              <div class="feature-desc">用 try/catch 处理错误，而非 .catch()</div>
+              <div class="feature-icon">
+                🎯
+              </div>
+              <div class="feature-name">
+                错误处理简单
+              </div>
+              <div class="feature-desc">
+                用 try/catch 处理错误，而非 .catch()
+              </div>
             </div>
             <div class="feature-item">
-              <div class="feature-icon">⚡</div>
-              <div class="feature-name">调试友好</div>
-              <div class="feature-desc">可以在 debugger 中设置断点</div>
+              <div class="feature-icon">
+                ⚡
+              </div>
+              <div class="feature-name">
+                调试友好
+              </div>
+              <div class="feature-desc">
+                可以在 debugger 中设置断点
+              </div>
             </div>
           </div>
 
@@ -230,41 +443,75 @@
     </div>
 
     <!-- 事件循环 -->
-    <div v-else class="tab-content">
+    <div
+      v-else
+      class="tab-content"
+    >
       <div class="event-loop-demo">
         <div class="loop-visual">
-          <div class="loop-title">事件循环 (Event Loop)</div>
+          <div class="loop-title">
+            事件循环 (Event Loop)
+          </div>
           <div class="loop-diagram">
             <div class="diagram-section">
-              <div class="section-title">调用栈 (Call Stack)</div>
+              <div class="section-title">
+                调用栈 (Call Stack)
+              </div>
               <div class="stack-box">
-                <div v-for="(item, i) in callStack" :key="i" class="stack-item">
+                <div
+                  v-for="(item, i) in callStack"
+                  :key="i"
+                  class="stack-item"
+                >
                   {{ item }}
                 </div>
-                <div v-if="callStack.length === 0" class="stack-empty">空</div>
+                <div
+                  v-if="callStack.length === 0"
+                  class="stack-empty"
+                >
+                  空
+                </div>
               </div>
             </div>
 
             <div class="diagram-arrows">
-              <div class="arrow-right">入栈 →</div>
-              <div class="arrow-left">← 出栈</div>
+              <div class="arrow-right">
+                入栈 →
+              </div>
+              <div class="arrow-left">
+                ← 出栈
+              </div>
             </div>
 
             <div class="diagram-section">
-              <div class="section-title">任务队列</div>
+              <div class="section-title">
+                任务队列
+              </div>
               <div class="task-queues">
                 <div class="queue-box">
-                  <div class="queue-title">宏任务 (Macro Tasks)</div>
+                  <div class="queue-title">
+                    宏任务 (Macro Tasks)
+                  </div>
                   <div class="queue-items">
-                    <div v-for="(task, i) in macroTasks" :key="i" class="task-item macro">
+                    <div
+                      v-for="(task, i) in macroTasks"
+                      :key="i"
+                      class="task-item macro"
+                    >
                       {{ task }}
                     </div>
                   </div>
                 </div>
                 <div class="queue-box">
-                  <div class="queue-title">微任务 (Micro Tasks)</div>
+                  <div class="queue-title">
+                    微任务 (Micro Tasks)
+                  </div>
                   <div class="queue-items">
-                    <div v-for="(task, i) in microTasks" :key="i" class="task-item micro">
+                    <div
+                      v-for="(task, i) in microTasks"
+                      :key="i"
+                      class="task-item micro"
+                    >
                       {{ task }}
                     </div>
                   </div>
@@ -274,7 +521,9 @@
           </div>
 
           <div class="loop-rules">
-            <div class="rule-title">执行规则</div>
+            <div class="rule-title">
+              执行规则
+            </div>
             <ol class="rule-list">
               <li>执行同步代码（调用栈中的代码）</li>
               <li>调用栈为空时，先执行所有微任务</li>
@@ -285,22 +534,38 @@
         </div>
 
         <div class="code-challenge">
-          <div class="challenge-title">🤔 猜猜输出顺序</div>
+          <div class="challenge-title">
+            🤔 猜猜输出顺序
+          </div>
           <div class="code-block">
-            <div class="code-line">console.log("1")</div>
-            <div class="code-line"></div>
-            <div class="code-line">setTimeout(() => console.log("2"), 0) <span class="comment">// 宏任务</span></div>
-            <div class="code-line"></div>
-            <div class="code-line">Promise.resolve().then(() => console.log("3")) <span class="comment">// 微任务</span></div>
-            <div class="code-line"></div>
-            <div class="code-line">console.log("4")</div>
+            <div class="code-line">
+              console.log("1")
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              setTimeout(() => console.log("2"), 0) <span class="comment">// 宏任务</span>
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              Promise.resolve().then(() => console.log("3")) <span class="comment">// 微任务</span>
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              console.log("4")
+            </div>
           </div>
 
-          <button @click="showEventLoopAnswer" class="answer-btn">
+          <button
+            class="answer-btn"
+            @click="showEventLoopAnswer"
+          >
             {{ showAnswer ? '隐藏答案' : '查看答案' }}
           </button>
 
-          <div v-if="showAnswer" class="answer-reveal">
+          <div
+            v-if="showAnswer"
+            class="answer-reveal"
+          >
             <div class="output-order">
               <div class="order-item">
                 <span class="order-num">1</span>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncRestaurantDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncRestaurantDemo.vue
index 140300c..a046377 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncRestaurantDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/AsyncRestaurantDemo.vue
@@ -57,10 +57,10 @@ const processCustomer = async (customer, realTime) => {
       <button
         v-for="m in modes"
         :key="m.value"
-        @click="mode = m.value"
         :class="{ 'active': mode === m.value }"
         class="mode-btn"
         :disabled="isRunning"
+        @click="mode = m.value"
       >
         {{ m.label }}
       </button>
@@ -75,33 +75,84 @@ const processCustomer = async (customer, realTime) => {
             class="stove"
             :class="{ 'cooking': customerA.status === 'cooking', 'done': customerA.status === 'done' }"
           >
-            <div class="stove-label">灶位 1</div>
+            <div class="stove-label">
+              灶位 1
+            </div>
             <div class="stove-content">
-              <div v-if="customerA.status === 'cooking'" class="cooking-text">煮面 {{ customerA.time }}s</div>
-              <div v-if="customerA.status === 'done'" class="done-text">✅ 完成</div>
-              <div v-if="customerA.status === 'waiting'" class="waiting-text">空闲</div>
+              <div
+                v-if="customerA.status === 'cooking'"
+                class="cooking-text"
+              >
+                煮面 {{ customerA.time }}s
+              </div>
+              <div
+                v-if="customerA.status === 'done'"
+                class="done-text"
+              >
+                ✅ 完成
+              </div>
+              <div
+                v-if="customerA.status === 'waiting'"
+                class="waiting-text"
+              >
+                空闲
+              </div>
             </div>
           </div>
           <div
             class="stove"
             :class="{ 'cooking': customerB.status === 'cooking', 'done': customerB.status === 'done' }"
           >
-            <div class="stove-label">灶位 2</div>
+            <div class="stove-label">
+              灶位 2
+            </div>
             <div class="stove-content">
-              <div v-if="customerB.status === 'cooking'" class="cooking-text">炒饭 {{ customerB.time }}s</div>
-              <div v-if="customerB.status === 'done'" class="done-text">✅ 完成</div>
-              <div v-if="customerB.status === 'waiting'" class="waiting-text">空闲</div>
+              <div
+                v-if="customerB.status === 'cooking'"
+                class="cooking-text"
+              >
+                炒饭 {{ customerB.time }}s
+              </div>
+              <div
+                v-if="customerB.status === 'done'"
+                class="done-text"
+              >
+                ✅ 完成
+              </div>
+              <div
+                v-if="customerB.status === 'waiting'"
+                class="waiting-text"
+              >
+                空闲
+              </div>
             </div>
           </div>
           <div
             class="stove"
             :class="{ 'cooking': customerC.status === 'cooking', 'done': customerC.status === 'done' }"
           >
-            <div class="stove-label">灶位 3</div>
+            <div class="stove-label">
+              灶位 3
+            </div>
             <div class="stove-content">
-              <div v-if="customerC.status === 'cooking'" class="cooking-text">烤鱼 {{ customerC.time }}s</div>
-              <div v-if="customerC.status === 'done'" class="done-text">✅ 完成</div>
-              <div v-if="customerC.status === 'waiting'" class="waiting-text">空闲</div>
+              <div
+                v-if="customerC.status === 'cooking'"
+                class="cooking-text"
+              >
+                烤鱼 {{ customerC.time }}s
+              </div>
+              <div
+                v-if="customerC.status === 'done'"
+                class="done-text"
+              >
+                ✅ 完成
+              </div>
+              <div
+                v-if="customerC.status === 'waiting'"
+                class="waiting-text"
+              >
+                空闲
+              </div>
             </div>
           </div>
         </div>
@@ -111,51 +162,106 @@ const processCustomer = async (customer, realTime) => {
       <div class="customers">
         <h4>顾客</h4>
         <div class="customer-list">
-          <div class="customer" :class="{ 'served': customerA.status === 'done' }">
-            <div class="customer-avatar">👤</div>
-            <div class="customer-info">
-              <div class="customer-name">顾客 A</div>
-              <div class="customer-order">煮面 ({{ customerA.time }}秒)</div>
+          <div
+            class="customer"
+            :class="{ 'served': customerA.status === 'done' }"
+          >
+            <div class="customer-avatar">
+              👤
+            </div>
+            <div class="customer-info">
+              <div class="customer-name">
+                顾客 A
+              </div>
+              <div class="customer-order">
+                煮面 ({{ customerA.time }}秒)
+              </div>
+            </div>
+            <div
+              v-if="customerA.status === 'done'"
+              class="check-mark"
+            >
+              ✅
             </div>
-            <div v-if="customerA.status === 'done'" class="check-mark">✅</div>
           </div>
-          <div class="customer" :class="{ 'served': customerB.status === 'done' }">
-            <div class="customer-avatar">👤</div>
-            <div class="customer-info">
-              <div class="customer-name">顾客 B</div>
-              <div class="customer-order">炒饭 ({{ customerB.time }}秒)</div>
+          <div
+            class="customer"
+            :class="{ 'served': customerB.status === 'done' }"
+          >
+            <div class="customer-avatar">
+              👤
+            </div>
+            <div class="customer-info">
+              <div class="customer-name">
+                顾客 B
+              </div>
+              <div class="customer-order">
+                炒饭 ({{ customerB.time }}秒)
+              </div>
+            </div>
+            <div
+              v-if="customerB.status === 'done'"
+              class="check-mark"
+            >
+              ✅
             </div>
-            <div v-if="customerB.status === 'done'" class="check-mark">✅</div>
           </div>
-          <div class="customer" :class="{ 'served': customerC.status === 'done' }">
-            <div class="customer-avatar">👤</div>
-            <div class="customer-info">
-              <div class="customer-name">顾客 C</div>
-              <div class="customer-order">烤鱼 ({{ customerC.time }}秒)</div>
+          <div
+            class="customer"
+            :class="{ 'served': customerC.status === 'done' }"
+          >
+            <div class="customer-avatar">
+              👤
+            </div>
+            <div class="customer-info">
+              <div class="customer-name">
+                顾客 C
+              </div>
+              <div class="customer-order">
+                烤鱼 ({{ customerC.time }}秒)
+              </div>
+            </div>
+            <div
+              v-if="customerC.status === 'done'"
+              class="check-mark"
+            >
+              ✅
             </div>
-            <div v-if="customerC.status === 'done'" class="check-mark">✅</div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="controls">
-      <button @click="start" :disabled="isRunning" class="btn-start">
+      <button
+        :disabled="isRunning"
+        class="btn-start"
+        @click="start"
+      >
         {{ isRunning ? '执行中...' : '开始' }}
       </button>
-      <button @click="reset" :disabled="isRunning" class="btn-reset">
+      <button
+        :disabled="isRunning"
+        class="btn-reset"
+        @click="reset"
+      >
         重置
       </button>
     </div>
 
-    <div class="comparison" v-if="!isRunning && (customerA.status === 'done' || customerB.status === 'done')">
+    <div
+      v-if="!isRunning && (customerA.status === 'done' || customerB.status === 'done')"
+      class="comparison"
+    >
       <div class="comparison-item">
         <strong>同步模式：</strong> 10 秒（依次执行）
       </div>
       <div class="comparison-item">
         <strong>异步模式：</strong> 约 5 秒（同时执行）
       </div>
-      <div class="tip">JavaScript 用的就是异步模式——遇到耗时操作（如网络请求），不会傻等，而是先去做别的事。</div>
+      <div class="tip">
+        JavaScript 用的就是异步模式——遇到耗时操作（如网络请求），不会傻等，而是先去做别的事。
+      </div>
     </div>
 
     <div class="code-display">
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/ClosureDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/ClosureDemo.vue
index 1b1335f..2988bc1 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/ClosureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/ClosureDemo.vue
@@ -16,82 +16,158 @@
       <button
         v-for="tab in tabs"
         :key="tab.id"
-        @click="activeTab = tab.id"
         class="tab-btn"
         :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
       >
         {{ tab.label }}
       </button>
     </div>
 
     <!-- 函数基础 -->
-    <div v-if="activeTab === 'basic'" class="tab-content">
+    <div
+      v-if="activeTab === 'basic'"
+      class="tab-content"
+    >
       <div class="function-showcase">
         <div class="code-panel">
-          <div class="code-title">函数声明方式</div>
+          <div class="code-title">
+            函数声明方式
+          </div>
           <div class="code-block">
-            <div class="code-line comment">// 1. 函数声明</div>
-            <div class="code-line">function greet(name) {</div>
-            <div class="code-line indent">return "Hello " + name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 2. 函数表达式</div>
-            <div class="code-line">const greet = function(name) {</div>
-            <div class="code-line indent">return "Hello " + name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 3. 箭头函数 (ES6)</div>
-            <div class="code-line">const greet = (name) => {</div>
-            <div class="code-line indent">return "Hello " + name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 简化版（单行可省略 return）</div>
-            <div class="code-line">const greet = name => "Hello " + name</div>
+            <div class="code-line comment">
+              // 1. 函数声明
+            </div>
+            <div class="code-line">
+              function greet(name) {
+            </div>
+            <div class="code-line indent">
+              return "Hello " + name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 2. 函数表达式
+            </div>
+            <div class="code-line">
+              const greet = function(name) {
+            </div>
+            <div class="code-line indent">
+              return "Hello " + name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 3. 箭头函数 (ES6)
+            </div>
+            <div class="code-line">
+              const greet = (name) => {
+            </div>
+            <div class="code-line indent">
+              return "Hello " + name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 简化版（单行可省略 return）
+            </div>
+            <div class="code-line">
+              const greet = name => "Hello " + name
+            </div>
           </div>
         </div>
 
         <div class="playground">
-          <div class="playground-title">试试调用函数</div>
+          <div class="playground-title">
+            试试调用函数
+          </div>
           <div class="input-group">
-            <input v-model="functionName" placeholder="输入你的名字" />
-            <button @click="callFunction">调用</button>
+            <input
+              v-model="functionName"
+              placeholder="输入你的名字"
+            >
+            <button @click="callFunction">
+              调用
+            </button>
           </div>
           <div class="output">
-            <span v-if="functionResult" class="result">{{ functionResult }}</span>
-            <span v-else class="placeholder">点击"调用"按钮看结果...</span>
+            <span
+              v-if="functionResult"
+              class="result"
+            >{{ functionResult }}</span>
+            <span
+              v-else
+              class="placeholder"
+            >点击"调用"按钮看结果...</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 闭包演示 -->
-    <div v-else-if="activeTab === 'closure'" class="tab-content">
+    <div
+      v-else-if="activeTab === 'closure'"
+      class="tab-content"
+    >
       <div class="closure-visual">
         <div class="scenario-selector">
-          <button @click="closureScenario = 'counter'" :class="{ active: closureScenario === 'counter' }">
+          <button
+            :class="{ active: closureScenario === 'counter' }"
+            @click="closureScenario = 'counter'"
+          >
             计数器
           </button>
-          <button @click="closureScenario = 'config'" :class="{ active: closureScenario === 'config' }">
+          <button
+            :class="{ active: closureScenario === 'config' }"
+            @click="closureScenario = 'config'"
+          >
             配置器
           </button>
         </div>
 
-        <div v-if="closureScenario === 'counter'" class="counter-demo">
+        <div
+          v-if="closureScenario === 'counter'"
+          class="counter-demo"
+        >
           <div class="code-panel small">
-            <div class="code-line">function createCounter() {</div>
-            <div class="code-line indent">let count = 0 <span class="comment">// 私有变量</span></div>
-            <div class="code-line indent">return function() {</div>
-            <div class="code-line indent indent">count++</div>
-            <div class="code-line indent indent">return count</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">const counter = createCounter()</div>
+            <div class="code-line">
+              function createCounter() {
+            </div>
+            <div class="code-line indent">
+              let count = 0 <span class="comment">// 私有变量</span>
+            </div>
+            <div class="code-line indent">
+              return function() {
+            </div>
+            <div class="code-line indent indent">
+              count++
+            </div>
+            <div class="code-line indent indent">
+              return count
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              const counter = createCounter()
+            </div>
           </div>
 
           <div class="closure-animation">
             <div class="closure-box">
-              <div class="box-title">闭包环境</div>
+              <div class="box-title">
+                闭包环境
+              </div>
               <div class="closure-var">
                 <span class="var-label">count = </span>
                 <span class="var-value">{{ counterValue }}</span>
@@ -99,7 +175,10 @@
             </div>
 
             <div class="controls-area">
-              <button @click="incrementCounter" class="action-btn primary">
+              <button
+                class="action-btn primary"
+                @click="incrementCounter"
+              >
                 调用 counter()
               </button>
             </div>
@@ -116,36 +195,78 @@
           </div>
         </div>
 
-        <div v-else class="config-demo">
+        <div
+          v-else
+          class="config-demo"
+        >
           <div class="code-panel small">
-            <div class="code-line">function makeMultiplier(times) {</div>
-            <div class="code-line indent">return function(n) {</div>
-            <div class="code-line indent indent">return n * times</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">const double = makeMultiplier(2)</div>
-            <div class="code-line">const triple = makeMultiplier(3)</div>
+            <div class="code-line">
+              function makeMultiplier(times) {
+            </div>
+            <div class="code-line indent">
+              return function(n) {
+            </div>
+            <div class="code-line indent indent">
+              return n * times
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              const double = makeMultiplier(2)
+            </div>
+            <div class="code-line">
+              const triple = makeMultiplier(3)
+            </div>
           </div>
 
           <div class="multiplier-playground">
             <div class="function-list">
-              <div class="func-item" @click="activeMultiplier = 'double'" :class="{ active: activeMultiplier === 'double' }">
-                <div class="func-name">double = makeMultiplier(2)</div>
-                <div class="func-desc">闭包捕获 times = 2</div>
+              <div
+                class="func-item"
+                :class="{ active: activeMultiplier === 'double' }"
+                @click="activeMultiplier = 'double'"
+              >
+                <div class="func-name">
+                  double = makeMultiplier(2)
+                </div>
+                <div class="func-desc">
+                  闭包捕获 times = 2
+                </div>
               </div>
-              <div class="func-item" @click="activeMultiplier = 'triple'" :class="{ active: activeMultiplier === 'triple' }">
-                <div class="func-name">triple = makeMultiplier(3)</div>
-                <div class="func-desc">闭包捕获 times = 3</div>
+              <div
+                class="func-item"
+                :class="{ active: activeMultiplier === 'triple' }"
+                @click="activeMultiplier = 'triple'"
+              >
+                <div class="func-name">
+                  triple = makeMultiplier(3)
+                </div>
+                <div class="func-desc">
+                  闭包捕获 times = 3
+                </div>
               </div>
             </div>
 
             <div class="multiplier-input">
-              <input v-model.number="multiplyNumber" type="number" placeholder="输入数字" />
-              <button @click="doMultiply">计算</button>
+              <input
+                v-model.number="multiplyNumber"
+                type="number"
+                placeholder="输入数字"
+              >
+              <button @click="doMultiply">
+                计算
+              </button>
             </div>
 
-            <div v-if="multiplyResult" class="multiply-result">
+            <div
+              v-if="multiplyResult"
+              class="multiply-result"
+            >
               <span class="result-equation">{{ multiplyResult }}</span>
             </div>
           </div>
@@ -154,23 +275,32 @@
     </div>
 
     <!-- 作用域链 -->
-    <div v-else class="tab-content">
+    <div
+      v-else
+      class="tab-content"
+    >
       <div class="scope-chain-demo">
         <div class="nested-visual">
           <div class="scope-level global">
-            <div class="level-title">全局作用域</div>
+            <div class="level-title">
+              全局作用域
+            </div>
             <div class="level-vars">
               <span class="var-tag">globalVar = "全局"</span>
             </div>
 
             <div class="scope-level outer">
-              <div class="level-title">外层函数作用域</div>
+              <div class="level-title">
+                外层函数作用域
+              </div>
               <div class="level-vars">
                 <span class="var-tag">outerVar = "外层"</span>
               </div>
 
               <div class="scope-level inner">
-                <div class="level-title">内层函数作用域</div>
+                <div class="level-title">
+                  内层函数作用域
+                </div>
                 <div class="level-vars">
                   <span class="var-tag">innerVar = "内层"</span>
                 </div>
@@ -180,11 +310,21 @@
         </div>
 
         <div class="lookup-demo">
-          <div class="lookup-title">🔍 变量查找过程（作用域链）</div>
+          <div class="lookup-title">
+            🔍 变量查找过程（作用域链）
+          </div>
           <div class="lookup-steps">
-            <div class="lookup-step" v-for="(step, i) in lookupSteps" :key="i">
-              <div class="step-num">{{ i + 1 }}</div>
-              <div class="step-content">{{ step }}</div>
+            <div
+              v-for="(step, i) in lookupSteps"
+              :key="i"
+              class="lookup-step"
+            >
+              <div class="step-num">
+                {{ i + 1 }}
+              </div>
+              <div class="step-content">
+                {{ step }}
+              </div>
             </div>
           </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/DOMTreeDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/DOMTreeDemo.vue
index a289a45..1a4e808 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/DOMTreeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/DOMTreeDemo.vue
@@ -34,16 +34,23 @@ const removeItem = () => {
       <div class="webpage-preview">
         <div class="browser-bar">
           <div class="dots">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
+            <span class="dot red" />
+            <span class="dot yellow" />
+            <span class="dot green" />
           </div>
         </div>
         <div class="webpage-content">
           <h1>{{ title }}</h1>
-          <p :style="{ color: paragraphColor }">欢迎光临</p>
+          <p :style="{ color: paragraphColor }">
+            欢迎光临
+          </p>
           <ul>
-            <li v-for="(item, index) in items" :key="index">{{ item }}</li>
+            <li
+              v-for="(item, index) in items"
+              :key="index"
+            >
+              {{ item }}
+            </li>
           </ul>
         </div>
       </div>
@@ -56,18 +63,28 @@ const removeItem = () => {
             <div class="tree-node">
               <span class="tag">&lt;body&gt;</span>
               <div class="tree-children">
-                <div class="tree-node" :class="{ 'active': title === 'Hello World!' }">
+                <div
+                  class="tree-node"
+                  :class="{ 'active': title === 'Hello World!' }"
+                >
                   <span class="tag">&lt;h1&gt;</span>
                   <span class="text">{{ title }}</span>
                 </div>
-                <div class="tree-node" :class="{ 'active': paragraphColor === 'red' }">
+                <div
+                  class="tree-node"
+                  :class="{ 'active': paragraphColor === 'red' }"
+                >
                   <span class="tag">&lt;p&gt;</span>
                   <span class="text">欢迎光临</span>
                 </div>
                 <div class="tree-node">
                   <span class="tag">&lt;ul&gt;</span>
                   <div class="tree-children">
-                    <div class="tree-node" v-for="(item, index) in items" :key="index">
+                    <div
+                      v-for="(item, index) in items"
+                      :key="index"
+                      class="tree-node"
+                    >
                       <span class="tag">&lt;li&gt;</span>
                       <span class="text">{{ item }}</span>
                     </div>
@@ -81,10 +98,30 @@ const removeItem = () => {
     </div>
 
     <div class="controls">
-      <button @click="modifyTitle" class="btn-primary">修改标题</button>
-      <button @click="addItem" class="btn-secondary">添加列表项</button>
-      <button @click="changeColor" class="btn-secondary">改变段落颜色</button>
-      <button @click="removeItem" class="btn-danger">删除列表项</button>
+      <button
+        class="btn-primary"
+        @click="modifyTitle"
+      >
+        修改标题
+      </button>
+      <button
+        class="btn-secondary"
+        @click="addItem"
+      >
+        添加列表项
+      </button>
+      <button
+        class="btn-secondary"
+        @click="changeColor"
+      >
+        改变段落颜色
+      </button>
+      <button
+        class="btn-danger"
+        @click="removeItem"
+      >
+        删除列表项
+      </button>
     </div>
 
     <div class="code-display">
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/DataTypeDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/DataTypeDemo.vue
index 3c680c7..6a77255 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/DataTypeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/DataTypeDemo.vue
@@ -16,9 +16,9 @@
       <button
         v-for="tab in tabs"
         :key="tab.id"
-        @click="activeTab = tab.id"
         class="tab-btn"
         :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
       >
         {{ tab.label }}
       </button>
@@ -26,24 +26,40 @@
 
     <div class="content-area">
       <!-- 原始类型 -->
-      <div v-if="activeTab === 'primitive'" class="primitive-types">
+      <div
+        v-if="activeTab === 'primitive'"
+        class="primitive-types"
+      >
         <div class="type-grid">
           <div
             v-for="type in primitiveTypes"
             :key="type.name"
             class="type-card"
-            @click="selectedType = type"
             :class="{ selected: selectedType?.name === type.name }"
+            @click="selectedType = type"
           >
-            <div class="type-icon">{{ type.icon }}</div>
-            <div class="type-name">{{ type.name }}</div>
-            <div class="type-example">{{ type.example }}</div>
+            <div class="type-icon">
+              {{ type.icon }}
+            </div>
+            <div class="type-name">
+              {{ type.name }}
+            </div>
+            <div class="type-example">
+              {{ type.example }}
+            </div>
           </div>
         </div>
 
-        <div v-if="selectedType" class="type-detail">
-          <div class="detail-title">📝 {{ selectedType.name }} 详细说明</div>
-          <div class="detail-desc">{{ selectedType.description }}</div>
+        <div
+          v-if="selectedType"
+          class="type-detail"
+        >
+          <div class="detail-title">
+            📝 {{ selectedType.name }} 详细说明
+          </div>
+          <div class="detail-desc">
+            {{ selectedType.description }}
+          </div>
           <div class="detail-note">
             <strong>💡 关键特性：</strong>{{ selectedType.note }}
           </div>
@@ -51,66 +67,130 @@
       </div>
 
       <!-- 引用类型 -->
-      <div v-else-if="activeTab === 'reference'" class="reference-types">
+      <div
+        v-else-if="activeTab === 'reference'"
+        class="reference-types"
+      >
         <div class="comparison-box">
           <div class="compare-side">
-            <div class="side-title">原始类型赋值</div>
+            <div class="side-title">
+              原始类型赋值
+            </div>
             <div class="code-example">
-              <div class="code-line">let a = 10</div>
-              <div class="code-line">let b = a</div>
-              <div class="code-line">b = 20</div>
-              <div class="code-line result">// a = 10 (不变)</div>
+              <div class="code-line">
+                let a = 10
+              </div>
+              <div class="code-line">
+                let b = a
+              </div>
+              <div class="code-line">
+                b = 20
+              </div>
+              <div class="code-line result">
+                // a = 10 (不变)
+              </div>
             </div>
             <div class="visual-box">
-              <div class="value-box">a = 10</div>
-              <div class="arrow">复制</div>
-              <div class="value-box">b = 20</div>
+              <div class="value-box">
+                a = 10
+              </div>
+              <div class="arrow">
+                复制
+              </div>
+              <div class="value-box">
+                b = 20
+              </div>
             </div>
           </div>
 
           <div class="compare-side">
-            <div class="side-title">引用类型赋值</div>
+            <div class="side-title">
+              引用类型赋值
+            </div>
             <div class="code-example">
-              <div class="code-line">let obj1 = {x: 10}</div>
-              <div class="code-line">let obj2 = obj1</div>
-              <div class="code-line">obj2.x = 20</div>
-              <div class="code-line result">// obj1.x = 20 (变了!)</div>
+              <div class="code-line">
+                let obj1 = {x: 10}
+              </div>
+              <div class="code-line">
+                let obj2 = obj1
+              </div>
+              <div class="code-line">
+                obj2.x = 20
+              </div>
+              <div class="code-line result">
+                // obj1.x = 20 (变了!)
+              </div>
             </div>
             <div class="visual-box ref-visual">
               <div class="ref-boxes">
                 <div class="ref-var-box">
-                  <div class="ref-var-name">obj1</div>
-                  <div class="ref-var-arrow">→</div>
+                  <div class="ref-var-name">
+                    obj1
+                  </div>
+                  <div class="ref-var-arrow">
+                    →
+                  </div>
                 </div>
                 <div class="ref-var-box">
-                  <div class="ref-var-name">obj2</div>
-                  <div class="ref-var-arrow">→</div>
+                  <div class="ref-var-name">
+                    obj2
+                  </div>
+                  <div class="ref-var-arrow">
+                    →
+                  </div>
                 </div>
               </div>
-              <div class="arrow down-arrow">指向同一位置</div>
-              <div class="memory-box">{x: 20}</div>
+              <div class="arrow down-arrow">
+                指向同一位置
+              </div>
+              <div class="memory-box">
+                {x: 20}
+              </div>
             </div>
           </div>
         </div>
 
         <div class="ref-types-list">
-          <div class="ref-type-item" v-for="type in referenceTypes" :key="type.name">
-            <div class="ref-icon">{{ type.icon }}</div>
+          <div
+            v-for="type in referenceTypes"
+            :key="type.name"
+            class="ref-type-item"
+          >
+            <div class="ref-icon">
+              {{ type.icon }}
+            </div>
             <div class="ref-info">
-              <div class="ref-name">{{ type.name }}</div>
-              <div class="ref-desc">{{ type.description }}</div>
+              <div class="ref-name">
+                {{ type.name }}
+              </div>
+              <div class="ref-desc">
+                {{ type.description }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 类型转换 -->
-      <div v-else class="type-conversion">
+      <div
+        v-else
+        class="type-conversion"
+      >
         <div class="conversion-playground">
           <div class="input-section">
             <label>输入一个值：</label>
-            <input v-model="inputValue" type="text" placeholder="试试输入 '123' 或 'hello'" @keyup.enter="convertType" />
-            <button @click="convertType" class="convert-btn">转换</button>
+            <input
+              v-model="inputValue"
+              type="text"
+              placeholder="试试输入 '123' 或 'hello'"
+              @keyup.enter="convertType"
+            >
+            <button
+              class="convert-btn"
+              @click="convertType"
+            >
+              转换
+            </button>
           </div>
 
           <div class="results-section">
@@ -120,7 +200,10 @@
             </div>
             <div class="result-row">
               <span class="result-label">Number():</span>
-              <span class="result-value" :class="{ error: conversionResults.number === 'NaN' }">
+              <span
+                class="result-value"
+                :class="{ error: conversionResults.number === 'NaN' }"
+              >
                 {{ conversionResults.number }}
               </span>
             </div>
@@ -131,11 +214,19 @@
           </div>
 
           <div class="falsy-values">
-            <div class="falsy-title">⚠️ 转成 false 的值（falsy values）：</div>
-            <div class="falsy-list">
-              <span v-for="val in falsyValues" :key="val" class="falsy-item">{{ val }}</span>
+            <div class="falsy-title">
+              ⚠️ 转成 false 的值（falsy values）：
+            </div>
+            <div class="falsy-list">
+              <span
+                v-for="val in falsyValues"
+                :key="val"
+                class="falsy-item"
+              >{{ val }}</span>
+            </div>
+            <div class="falsy-note">
+              其他所有值（包括空数组 []、空对象 {}）都转成 true
             </div>
-            <div class="falsy-note">其他所有值（包括空数组 []、空对象 {}）都转成 true</div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/FunctionMachineDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/FunctionMachineDemo.vue
index d0a5da1..b646149 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/FunctionMachineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/FunctionMachineDemo.vue
@@ -41,11 +41,19 @@ const currentCode = ref(`const calculatePrice = (price, discount) => {
         <div class="input-group">
           <label>
             价格:
-            <input v-model.number="price" type="number" min="0" :disabled="isRunning" />
+            <input
+              v-model.number="price"
+              type="number"
+              min="0"
+              :disabled="isRunning"
+            >
           </label>
           <label>
             折扣:
-            <select v-model.number="discount" :disabled="isRunning">
+            <select
+              v-model.number="discount"
+              :disabled="isRunning"
+            >
               <option :value="0.8">8 折 (0.8)</option>
               <option :value="0.5">5 折 (0.5)</option>
               <option :value="0.7">7 折 (0.7)</option>
@@ -58,7 +66,9 @@ const currentCode = ref(`const calculatePrice = (price, discount) => {
       <div class="pipeline-section machine-section">
         <h4>函数</h4>
         <div class="machine">
-          <div class="machine-label">calculatePrice</div>
+          <div class="machine-label">
+            calculatePrice
+          </div>
           <div class="machine-code">
             <pre v-if="functionType === 'declaration'"><code>return price * discount</code></pre>
             <pre v-else-if="functionType === 'expression'"><code>return price * discount</code></pre>
@@ -70,28 +80,50 @@ const currentCode = ref(`const calculatePrice = (price, discount) => {
           <button
             v-for="type in functionTypes"
             :key="type.value"
-            @click="functionType = type.value"
             :class="{ active: functionType === type.value }"
             class="type-btn"
+            @click="functionType = type.value"
           >
             {{ type.label }}
           </button>
         </div>
-        <div class="tip" v-if="functionType !== 'arrow'">✏️ 写法不同，但做的事一模一样</div>
+        <div
+          v-if="functionType !== 'arrow'"
+          class="tip"
+        >
+          ✏️ 写法不同，但做的事一模一样
+        </div>
       </div>
 
       <!-- 输出区 -->
       <div class="pipeline-section output-section">
         <h4>返回值（输出）</h4>
-        <div class="output-display" :class="{ 'processing': isRunning }">
-          <div v-if="result === null" class="placeholder">?</div>
-          <div v-else class="result">¥{{ result.toFixed(2) }}</div>
+        <div
+          class="output-display"
+          :class="{ 'processing': isRunning }"
+        >
+          <div
+            v-if="result === null"
+            class="placeholder"
+          >
+            ?
+          </div>
+          <div
+            v-else
+            class="result"
+          >
+            ¥{{ result.toFixed(2) }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="controls">
-      <button @click="execute" :disabled="isRunning" class="btn-execute">
+      <button
+        :disabled="isRunning"
+        class="btn-execute"
+        @click="execute"
+      >
         {{ isRunning ? '处理中...' : '执行 ▶' }}
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/JSEventLoopDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/JSEventLoopDemo.vue
index 48ac9d9..c738768 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/JSEventLoopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/JSEventLoopDemo.vue
@@ -91,9 +91,18 @@ const stop = () => {
               'processed': currentStep > index
             }"
           >
-            <div class="item-index">{{ item.id }}</div>
-            <div class="item-code">{{ item.code }}</div>
-            <div v-if="currentStep === index" class="executing">执行中</div>
+            <div class="item-index">
+              {{ item.id }}
+            </div>
+            <div class="item-code">
+              {{ item.code }}
+            </div>
+            <div
+              v-if="currentStep === index"
+              class="executing"
+            >
+              执行中
+            </div>
           </div>
         </div>
       </div>
@@ -102,11 +111,16 @@ const stop = () => {
       <div class="worker-section">
         <h4>工位（单线程）</h4>
         <div class="worker">
-          <div class="worker-emoji">👨‍💻</div>
+          <div class="worker-emoji">
+            👨‍💻
+          </div>
           <div class="worker-status">
             {{ currentStep < steps.length ? '正在执行' : '执行完成' }}
           </div>
-          <div v-if="currentStep < steps.length" class="current-task">
+          <div
+            v-if="currentStep < steps.length"
+            class="current-task"
+          >
             {{ steps[currentStep]?.description }}
           </div>
         </div>
@@ -122,12 +136,17 @@ const stop = () => {
             class="task-item"
             :class="{ 'ready': task.status === 'ready' }"
           >
-            <div class="task-code">{{ task.code }}</div>
+            <div class="task-code">
+              {{ task.code }}
+            </div>
             <div class="task-status">
               {{ task.status === 'ready' ? '✅ 就绪' : '⏳ 等待中...' }}
             </div>
           </div>
-          <div v-if="taskQueue.length === 0" class="empty-queue">
+          <div
+            v-if="taskQueue.length === 0"
+            class="empty-queue"
+          >
             暂无待办任务
           </div>
         </div>
@@ -138,7 +157,12 @@ const stop = () => {
     <div class="output-section">
       <h4>输出日志</h4>
       <div class="output-log">
-        <div v-if="outputLog.length === 0" class="empty-log">等待输出...</div>
+        <div
+          v-if="outputLog.length === 0"
+          class="empty-log"
+        >
+          等待输出...
+        </div>
         <div
           v-for="(log, index) in outputLog"
           :key="index"
@@ -152,16 +176,31 @@ const stop = () => {
 
     <!-- 控制按钮 -->
     <div class="controls">
-      <button @click="play" :disabled="isPlaying || currentStep >= steps.length" class="btn-play">
+      <button
+        :disabled="isPlaying || currentStep >= steps.length"
+        class="btn-play"
+        @click="play"
+      >
         {{ isPlaying ? '执行中...' : '▶ 自动播放' }}
       </button>
-      <button @click="nextStep" :disabled="isPlaying || currentStep >= steps.length" class="btn-step">
+      <button
+        :disabled="isPlaying || currentStep >= steps.length"
+        class="btn-step"
+        @click="nextStep"
+      >
         ⏭ 单步执行
       </button>
-      <button @click="stop" :disabled="!isPlaying" class="btn-stop">
+      <button
+        :disabled="!isPlaying"
+        class="btn-stop"
+        @click="stop"
+      >
         ⏸ 停止
       </button>
-      <button @click="reset" class="btn-reset">
+      <button
+        class="btn-reset"
+        @click="reset"
+      >
         🔄 重置
       </button>
     </div>
@@ -170,7 +209,9 @@ const stop = () => {
     <div class="explanation">
       <p><strong>执行顺序：</strong>{{ outputLog.map(l => l.output).join(', ') || '还未开始' }}</p>
       <p><strong>代码书写顺序：</strong>1, 2, 3, 4, 5</p>
-      <p class="highlight">代码从上到下写的，但执行顺序不一定从上到下——因为异步操作会被"推迟"到当前代码执行完之后。</p>
+      <p class="highlight">
+        代码从上到下写的，但执行顺序不一定从上到下——因为异步操作会被"推迟"到当前代码执行完之后。
+      </p>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/PrototypeDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/PrototypeDemo.vue
index 48c656e..a23d4d8 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/PrototypeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/PrototypeDemo.vue
@@ -16,61 +16,126 @@
       <button
         v-for="tab in tabs"
         :key="tab.id"
-        @click="activeTab = tab.id"
         class="tab-btn"
         :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
       >
         {{ tab.label }}
       </button>
     </div>
 
     <!-- 原型基础 -->
-    <div v-if="activeTab === 'basic'" class="tab-content">
+    <div
+      v-if="activeTab === 'basic'"
+      class="tab-content"
+    >
       <div class="concept-explanation">
         <div class="code-panel">
-          <div class="code-title">创建对象的方式</div>
+          <div class="code-title">
+            创建对象的方式
+          </div>
           <div class="code-block">
-            <div class="code-line comment">// 方式 1：对象字面量</div>
-            <div class="code-line">const obj1 = { name: "对象1" }</div>
-            <div class="code-line">obj1.__proto__ === Object.prototype <span class="comment">// true</span></div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 方式 2：构造函数</div>
-            <div class="code-line">function Person(name) {</div>
-            <div class="code-line indent">this.name = name</div>
-            <div class="code-line">}</div>
-            <div class="code-line">const p = new Person("张三")</div>
-            <div class="code-line">p.__proto__ === Person.prototype <span class="comment">// true</span></div>
+            <div class="code-line comment">
+              // 方式 1：对象字面量
+            </div>
+            <div class="code-line">
+              const obj1 = { name: "对象1" }
+            </div>
+            <div class="code-line">
+              obj1.__proto__ === Object.prototype <span class="comment">// true</span>
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 方式 2：构造函数
+            </div>
+            <div class="code-line">
+              function Person(name) {
+            </div>
+            <div class="code-line indent">
+              this.name = name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line">
+              const p = new Person("张三")
+            </div>
+            <div class="code-line">
+              p.__proto__ === Person.prototype <span class="comment">// true</span>
+            </div>
           </div>
         </div>
 
         <div class="prototype-visual">
           <div class="prototype-chain">
-            <div class="chain-node" :class="{ active: chainLevel >= 0 }" @click="chainLevel = 0">
-              <div class="node-title">对象实例 (p)</div>
+            <div
+              class="chain-node"
+              :class="{ active: chainLevel >= 0 }"
+              @click="chainLevel = 0"
+            >
+              <div class="node-title">
+                对象实例 (p)
+              </div>
               <div class="node-content">
-                <div class="property">name: "张三"</div>
-                <div class="proto-link">__proto__ →</div>
+                <div class="property">
+                  name: "张三"
+                </div>
+                <div class="proto-link">
+                  __proto__ →
+                </div>
               </div>
             </div>
 
-            <div class="chain-arrow" v-if="chainLevel >= 0">↓ 查找</div>
+            <div
+              v-if="chainLevel >= 0"
+              class="chain-arrow"
+            >
+              ↓ 查找
+            </div>
 
-            <div class="chain-node constructor" :class="{ active: chainLevel >= 1 }" @click="chainLevel = 1">
-              <div class="node-title">Person.prototype</div>
+            <div
+              class="chain-node constructor"
+              :class="{ active: chainLevel >= 1 }"
+              @click="chainLevel = 1"
+            >
+              <div class="node-title">
+                Person.prototype
+              </div>
               <div class="node-content">
-                <div class="method">constructor: Person</div>
-                <div class="proto-link">__proto__ →</div>
+                <div class="method">
+                  constructor: Person
+                </div>
+                <div class="proto-link">
+                  __proto__ →
+                </div>
               </div>
             </div>
 
-            <div class="chain-arrow" v-if="chainLevel >= 1">↓ 查找</div>
+            <div
+              v-if="chainLevel >= 1"
+              class="chain-arrow"
+            >
+              ↓ 查找
+            </div>
 
-            <div class="chain-node object" :class="{ active: chainLevel >= 2 }" @click="chainLevel = 2">
-              <div class="node-title">Object.prototype</div>
+            <div
+              class="chain-node object"
+              :class="{ active: chainLevel >= 2 }"
+              @click="chainLevel = 2"
+            >
+              <div class="node-title">
+                Object.prototype
+              </div>
               <div class="node-content">
-                <div class="method">toString()</div>
-                <div class="method">hasOwnProperty()</div>
-                <div class="proto-link">__proto__ → null</div>
+                <div class="method">
+                  toString()
+                </div>
+                <div class="method">
+                  hasOwnProperty()
+                </div>
+                <div class="proto-link">
+                  __proto__ → null
+                </div>
               </div>
             </div>
           </div>
@@ -94,75 +159,149 @@
     </div>
 
     <!-- 原型继承 -->
-    <div v-else-if="activeTab === 'inheritance'" class="tab-content">
+    <div
+      v-else-if="activeTab === 'inheritance'"
+      class="tab-content"
+    >
       <div class="inheritance-demo">
         <div class="inheritance-code">
-          <div class="code-title">原型继承示例</div>
+          <div class="code-title">
+            原型继承示例
+          </div>
           <div class="code-block">
-            <div class="code-line comment">// 父类构造函数</div>
-            <div class="code-line">function Animal(name) {</div>
-            <div class="code-line indent">this.name = name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">Animal.prototype.eat = function() {</div>
-            <div class="code-line indent">return this.name + " 在吃东西"</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 子类构造函数</div>
-            <div class="code-line">function Dog(name, breed) {</div>
-            <div class="code-line indent">Animal.call(this, name) <span class="comment">// 继承属性</span></div>
-            <div class="code-line indent">this.breed = breed</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 继承方法</div>
-            <div class="code-line">Dog.prototype = Object.create(Animal.prototype)</div>
-            <div class="code-line">Dog.prototype.constructor = Dog</div>
+            <div class="code-line comment">
+              // 父类构造函数
+            </div>
+            <div class="code-line">
+              function Animal(name) {
+            </div>
+            <div class="code-line indent">
+              this.name = name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              Animal.prototype.eat = function() {
+            </div>
+            <div class="code-line indent">
+              return this.name + " 在吃东西"
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 子类构造函数
+            </div>
+            <div class="code-line">
+              function Dog(name, breed) {
+            </div>
+            <div class="code-line indent">
+              Animal.call(this, name) <span class="comment">// 继承属性</span>
+            </div>
+            <div class="code-line indent">
+              this.breed = breed
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 继承方法
+            </div>
+            <div class="code-line">
+              Dog.prototype = Object.create(Animal.prototype)
+            </div>
+            <div class="code-line">
+              Dog.prototype.constructor = Dog
+            </div>
           </div>
         </div>
 
         <div class="inheritance-visual">
           <div class="class-diagram">
             <div class="class-box parent">
-              <div class="class-title">Animal (父类)</div>
+              <div class="class-title">
+                Animal (父类)
+              </div>
               <div class="class-content">
                 <div class="class-section">
-                  <div class="section-title">属性</div>
-                  <div class="section-item">name: String</div>
+                  <div class="section-title">
+                    属性
+                  </div>
+                  <div class="section-item">
+                    name: String
+                  </div>
                 </div>
                 <div class="class-section">
-                  <div class="section-title">方法 (prototype)</div>
-                  <div class="section-item">eat()</div>
+                  <div class="section-title">
+                    方法 (prototype)
+                  </div>
+                  <div class="section-item">
+                    eat()
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div class="inherit-arrow">↓ 继承</div>
+            <div class="inherit-arrow">
+              ↓ 继承
+            </div>
 
             <div class="class-box child">
-              <div class="class-title">Dog (子类)</div>
+              <div class="class-title">
+                Dog (子类)
+              </div>
               <div class="class-content">
                 <div class="class-section">
-                  <div class="section-title">属性</div>
-                  <div class="section-item">name: String</div>
-                  <div class="section-item">breed: String</div>
+                  <div class="section-title">
+                    属性
+                  </div>
+                  <div class="section-item">
+                    name: String
+                  </div>
+                  <div class="section-item">
+                    breed: String
+                  </div>
                 </div>
                 <div class="class-section">
-                  <div class="section-title">方法 (prototype)</div>
-                  <div class="section-item">eat() <span class="inherited">[继承]</span></div>
-                  <div class="section-item">bark() <span class="own">[新增]</span></div>
+                  <div class="section-title">
+                    方法 (prototype)
+                  </div>
+                  <div class="section-item">
+                    eat() <span class="inherited">[继承]</span>
+                  </div>
+                  <div class="section-item">
+                    bark() <span class="own">[新增]</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
           <div class="inheritance-playground">
-            <div class="playground-title">试试创建实例</div>
-            <div class="input-group">
-              <input v-model="dogName" placeholder="狗狗名字" />
-              <input v-model="dogBreed" placeholder="品种" />
-              <button @click="createDog">创建</button>
+            <div class="playground-title">
+              试试创建实例
             </div>
-            <div v-if="dogInstance" class="instance-result">
+            <div class="input-group">
+              <input
+                v-model="dogName"
+                placeholder="狗狗名字"
+              >
+              <input
+                v-model="dogBreed"
+                placeholder="品种"
+              >
+              <button @click="createDog">
+                创建
+              </button>
+            </div>
+            <div
+              v-if="dogInstance"
+              class="instance-result"
+            >
               <div class="result-item">
                 <span class="label">名字：</span>
                 <span class="value">{{ dogInstance.name }}</span>
@@ -173,8 +312,16 @@
               </div>
               <div class="result-item">
                 <span class="label">调用 eat()：</span>
-                <button @click="callEat" class="action-btn">调用</button>
-                <span v-if="eatResult" class="method-result">{{ eatResult }}</span>
+                <button
+                  class="action-btn"
+                  @click="callEat"
+                >
+                  调用
+                </button>
+                <span
+                  v-if="eatResult"
+                  class="method-result"
+                >{{ eatResult }}</span>
               </div>
             </div>
           </div>
@@ -183,90 +330,185 @@
     </div>
 
     <!-- class 语法 -->
-    <div v-else class="tab-content">
+    <div
+      v-else
+      class="tab-content"
+    >
       <div class="class-syntax-demo">
         <div class="syntax-comparison">
           <div class="syntax-panel old">
-            <div class="panel-title">ES5 构造函数</div>
+            <div class="panel-title">
+              ES5 构造函数
+            </div>
             <div class="code-block">
-              <div class="code-line">function Person(name) {</div>
-              <div class="code-line indent">this.name = name</div>
-              <div class="code-line">}</div>
-              <div class="code-line"></div>
-              <div class="code-line">Person.prototype.greet = function() {</div>
-              <div class="code-line indent">return "你好，我是" + this.name</div>
-              <div class="code-line">}</div>
-              <div class="code-line"></div>
-              <div class="code-line">const p = new Person("小明")</div>
+              <div class="code-line">
+                function Person(name) {
+              </div>
+              <div class="code-line indent">
+                this.name = name
+              </div>
+              <div class="code-line">
+                }
+              </div>
+              <div class="code-line" />
+              <div class="code-line">
+                Person.prototype.greet = function() {
+              </div>
+              <div class="code-line indent">
+                return "你好，我是" + this.name
+              </div>
+              <div class="code-line">
+                }
+              </div>
+              <div class="code-line" />
+              <div class="code-line">
+                const p = new Person("小明")
+              </div>
             </div>
           </div>
 
           <div class="syntax-panel new">
-            <div class="panel-title">ES6 class 语法</div>
+            <div class="panel-title">
+              ES6 class 语法
+            </div>
             <div class="code-block">
-              <div class="code-line">class Person {</div>
-              <div class="code-line indent">constructor(name) {</div>
-              <div class="code-line indent indent">this.name = name</div>
-              <div class="code-line indent">}</div>
-              <div class="code-line"></div>
-              <div class="code-line indent">greet() {</div>
-              <div class="code-line indent indent">return "你好，我是" + this.name</div>
-              <div class="code-line indent">}</div>
-              <div class="code-line">}</div>
-              <div class="code-line"></div>
-              <div class="code-line">const p = new Person("小明")</div>
+              <div class="code-line">
+                class Person {
+              </div>
+              <div class="code-line indent">
+                constructor(name) {
+              </div>
+              <div class="code-line indent indent">
+                this.name = name
+              </div>
+              <div class="code-line indent">
+                }
+              </div>
+              <div class="code-line" />
+              <div class="code-line indent">
+                greet() {
+              </div>
+              <div class="code-line indent indent">
+                return "你好，我是" + this.name
+              </div>
+              <div class="code-line indent">
+                }
+              </div>
+              <div class="code-line">
+                }
+              </div>
+              <div class="code-line" />
+              <div class="code-line">
+                const p = new Person("小明")
+              </div>
             </div>
           </div>
         </div>
 
         <div class="class-features">
           <div class="feature-card">
-            <div class="feature-icon">🎯</div>
-            <div class="feature-title">更清晰的语法</div>
-            <div class="feature-desc">class 语法让面向对象编程更直观，但本质还是基于原型</div>
+            <div class="feature-icon">
+              🎯
+            </div>
+            <div class="feature-title">
+              更清晰的语法
+            </div>
+            <div class="feature-desc">
+              class 语法让面向对象编程更直观，但本质还是基于原型
+            </div>
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">🔗</div>
-            <div class="feature-title">继承更简单</div>
-            <div class="feature-desc">使用 extends 关键字实现继承，代码更简洁</div>
+            <div class="feature-icon">
+              🔗
+            </div>
+            <div class="feature-title">
+              继承更简单
+            </div>
+            <div class="feature-desc">
+              使用 extends 关键字实现继承，代码更简洁
+            </div>
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">⚠️</div>
-            <div class="feature-title">注意</div>
-            <div class="feature-desc">class 只是语法糖，底层仍然是原型链机制</div>
+            <div class="feature-icon">
+              ⚠️
+            </div>
+            <div class="feature-title">
+              注意
+            </div>
+            <div class="feature-desc">
+              class 只是语法糖，底层仍然是原型链机制
+            </div>
           </div>
         </div>
 
         <div class="inheritance-example">
-          <div class="code-title">class 继承示例</div>
+          <div class="code-title">
+            class 继承示例
+          </div>
           <div class="code-block">
-            <div class="code-line">class Animal {</div>
-            <div class="code-line indent">constructor(name) {</div>
-            <div class="code-line indent indent">this.name = name</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line indent">eat() {</div>
-            <div class="code-line indent indent">return this.name + " 在吃东西"</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">class Dog extends Animal {</div>
-            <div class="code-line indent">constructor(name, breed) {</div>
-            <div class="code-line indent indent">super(name) <span class="comment">// 调用父类构造函数</span></div>
-            <div class="code-line indent indent">this.breed = breed</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line indent">bark() {</div>
-            <div class="code-line indent indent">return "汪汪！"</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
+            <div class="code-line">
+              class Animal {
+            </div>
+            <div class="code-line indent">
+              constructor(name) {
+            </div>
+            <div class="code-line indent indent">
+              this.name = name
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line indent">
+              eat() {
+            </div>
+            <div class="code-line indent indent">
+              return this.name + " 在吃东西"
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              class Dog extends Animal {
+            </div>
+            <div class="code-line indent">
+              constructor(name, breed) {
+            </div>
+            <div class="code-line indent indent">
+              super(name) <span class="comment">// 调用父类构造函数</span>
+            </div>
+            <div class="code-line indent indent">
+              this.breed = breed
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line indent">
+              bark() {
+            </div>
+            <div class="code-line indent indent">
+              return "汪汪！"
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="key-points">
-      <div class="point-title">🎯 核心要点</div>
+      <div class="point-title">
+        🎯 核心要点
+      </div>
       <ul class="point-list">
         <li>每个对象都有 <code>__proto__</code> 属性，指向其构造函数的 <code>prototype</code></li>
         <li>访问对象属性时，先在自身查找，找不到就沿着原型链向上查找</li>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/ReferenceDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/ReferenceDemo.vue
index f76e4d0..288b32e 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/ReferenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/ReferenceDemo.vue
@@ -20,82 +20,162 @@ const refReset = () => { refStep.value = 0; objData.value.age = 25 }
 
 <template>
   <div class="reference-demo">
-    <div class="demo-title">🔄 值 vs 引用</div>
+    <div class="demo-title">
+      🔄 值 vs 引用
+    </div>
     
     <div class="compare-grid">
       <!-- 左侧：基本类型 -->
       <div class="compare-box">
-        <div class="box-header blue">基本类型（复制值）</div>
+        <div class="box-header blue">
+          基本类型（复制值）
+        </div>
         
         <div class="memory-area">
           <div class="vars-row">
-            <div class="var-item" :class="{ active: basicStep >= 0 }">
+            <div
+              class="var-item"
+              :class="{ active: basicStep >= 0 }"
+            >
               <span class="var-label">a</span>
               <span class="var-val">{{ basicA }}</span>
             </div>
-            <div class="var-item" :class="{ active: basicStep >= 1, changed: basicStep >= 2 }">
+            <div
+              class="var-item"
+              :class="{ active: basicStep >= 1, changed: basicStep >= 2 }"
+            >
               <span class="var-label">b</span>
               <span class="var-val">{{ basicB ?? '?' }}</span>
             </div>
           </div>
-          <div class="copy-arrow" v-if="basicStep >= 1">↓ 复制值</div>
+          <div
+            v-if="basicStep >= 1"
+            class="copy-arrow"
+          >
+            ↓ 复制值
+          </div>
         </div>
         
-        <div class="result-text" :class="basicStep === 2 ? 'success' : 'info'">
+        <div
+          class="result-text"
+          :class="basicStep === 2 ? 'success' : 'info'"
+        >
           {{ basicStep === 0 ? '点击复制' : basicStep === 1 ? 'b 得到 10' : '✅ 修改 b 不影响 a' }}
         </div>
         
         <div class="btn-group">
-          <button @click="basicCopy" :disabled="basicStep >= 1">复制</button>
-          <button @click="basicModify" :disabled="basicStep !== 1">改 b</button>
-          <button @click="basicReset" class="reset">重置</button>
+          <button
+            :disabled="basicStep >= 1"
+            @click="basicCopy"
+          >
+            复制
+          </button>
+          <button
+            :disabled="basicStep !== 1"
+            @click="basicModify"
+          >
+            改 b
+          </button>
+          <button
+            class="reset"
+            @click="basicReset"
+          >
+            重置
+          </button>
         </div>
       </div>
       
       <!-- 右侧：引用类型 -->
       <div class="compare-box">
-        <div class="box-header orange">引用类型（复制地址）</div>
+        <div class="box-header orange">
+          引用类型（复制地址）
+        </div>
         
         <div class="memory-area">
           <div class="vars-row">
-            <div class="var-item" :class="{ active: refStep >= 0 }">
+            <div
+              class="var-item"
+              :class="{ active: refStep >= 0 }"
+            >
               <span class="var-label">obj1</span>
               <span class="var-addr">0x001</span>
             </div>
-            <div class="var-item" :class="{ active: refStep >= 1 }">
+            <div
+              class="var-item"
+              :class="{ active: refStep >= 1 }"
+            >
               <span class="var-label">obj2</span>
               <span class="var-addr">{{ refStep >= 1 ? '0x001' : '?' }}</span>
             </div>
           </div>
-          <div class="data-box" :class="{ changed: refStep === 2, copied: refStep === 3 }">
-            <div class="data-addr">0x001</div>
-            <div class="data-content">{ age: {{ objData.age }} }</div>
+          <div
+            class="data-box"
+            :class="{ changed: refStep === 2, copied: refStep === 3 }"
+          >
+            <div class="data-addr">
+              0x001
+            </div>
+            <div class="data-content">
+              { age: {{ objData.age }} }
+            </div>
+          </div>
+          <div
+            v-if="refStep >= 1"
+            class="copy-arrow"
+          >
+            指向同一地址
           </div>
-          <div class="copy-arrow" v-if="refStep >= 1">指向同一地址</div>
         </div>
         
-        <div class="result-text" :class="refStep === 2 ? 'warning' : refStep === 3 ? 'success' : 'info'">
+        <div
+          class="result-text"
+          :class="refStep === 2 ? 'warning' : refStep === 3 ? 'success' : 'info'"
+        >
           {{ refStep === 0 ? '点击复制' : refStep === 1 ? '共享地址' : refStep === 2 ? '⚠️ 一改全变' : '✅ 已分离' }}
         </div>
         
         <div class="btn-group">
-          <button @click="refCopy" :disabled="refStep >= 1">复制</button>
-          <button @click="refModify" :disabled="refStep !== 1">修改</button>
-          <button @click="refSpread" :disabled="refStep !== 2">展开</button>
-          <button @click="refReset" class="reset">重置</button>
+          <button
+            :disabled="refStep >= 1"
+            @click="refCopy"
+          >
+            复制
+          </button>
+          <button
+            :disabled="refStep !== 1"
+            @click="refModify"
+          >
+            修改
+          </button>
+          <button
+            :disabled="refStep !== 2"
+            @click="refSpread"
+          >
+            展开
+          </button>
+          <button
+            class="reset"
+            @click="refReset"
+          >
+            重置
+          </button>
         </div>
       </div>
     </div>
     
     <div class="code-compare">
       <div class="code-col">
-        <div class="code-title">基本类型</div>
+        <div class="code-title">
+          基本类型
+        </div>
         <pre><code>let a = 10
 let b = a  // b=10
 b = 20     // a还是10</code></pre>
       </div>
       <div class="code-col">
-        <div class="code-title">引用类型</div>
+        <div class="code-title">
+          引用类型
+        </div>
         <pre><code>let obj1 = {age:25}
 let obj2 = obj1
 obj2.age=30 // obj1也变了！
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/ScopeDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/ScopeDemo.vue
index 9fe05da..7ddbb8c 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/ScopeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/ScopeDemo.vue
@@ -52,10 +52,10 @@ updateExplanation()
       <button
         v-for="scope in scopes"
         :key="scope.id"
-        @click="activeScope = scope.id; updateExplanation()"
         class="scope-btn"
         :class="{ active: activeScope === scope.id }"
         :style="{ borderColor: scope.color }"
+        @click="activeScope = scope.id; updateExplanation()"
       >
         {{ scope.name }}
       </button>
@@ -71,7 +71,10 @@ updateExplanation()
           :class="{ active: activeScope === scope.id, dimmed: activeScope !== scope.id }"
           :style="{ borderLeftColor: scope.color }"
         >
-          <div class="level-header" :style="{ color: scope.color }">
+          <div
+            class="level-header"
+            :style="{ color: scope.color }"
+          >
             {{ scope.name }}
           </div>
           <div class="level-vars">
@@ -83,7 +86,10 @@ updateExplanation()
             >
               <span class="var-name">{{ v.name }}</span>
               <span class="var-value">= {{ v.value }}</span>
-              <span v-if="!v.own" class="var-from">← {{ v.from }}</span>
+              <span
+                v-if="!v.own"
+                class="var-from"
+              >← {{ v.from }}</span>
             </div>
           </div>
         </div>
@@ -91,8 +97,12 @@ updateExplanation()
 
       <!-- 说明 -->
       <div class="explanation-box">
-        <div class="explanation-title">💡 当前位置可见的变量</div>
-        <div class="explanation-text">{{ explanation }}</div>
+        <div class="explanation-title">
+          💡 当前位置可见的变量
+        </div>
+        <div class="explanation-text">
+          {{ explanation }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/ThisContextDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/ThisContextDemo.vue
index d65c6de..9c536ee 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/ThisContextDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/ThisContextDemo.vue
@@ -16,89 +16,148 @@
       <button
         v-for="scenario in scenarios"
         :key="scenario.id"
-        @click="activeScenario = scenario.id"
         class="scenario-btn"
         :class="{ active: activeScenario === scenario.id }"
+        @click="activeScenario = scenario.id"
       >
         {{ scenario.label }}
       </button>
     </div>
 
     <!-- 方法调用 -->
-    <div v-if="activeScenario === 'method'" class="scenario-content">
+    <div
+      v-if="activeScenario === 'method'"
+      class="scenario-content"
+    >
       <div class="split-view">
         <div class="code-panel">
-          <div class="code-title">对象方法调用</div>
+          <div class="code-title">
+            对象方法调用
+          </div>
           <div class="code-block">
-            <div class="code-line">const person = {</div>
-            <div class="code-line indent">name: "张三",</div>
-            <div class="code-line indent">greet: function() {</div>
-            <div class="code-line indent indent">return "你好，我是" + this.name</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">person.greet() <span class="comment">// this → person</span></div>
+            <div class="code-line">
+              const person = {
+            </div>
+            <div class="code-line indent">
+              name: "张三",
+            </div>
+            <div class="code-line indent">
+              greet: function() {
+            </div>
+            <div class="code-line indent indent">
+              return "你好，我是" + this.name
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              person.greet() <span class="comment">// this → person</span>
+            </div>
           </div>
         </div>
 
         <div class="visual-panel">
           <div class="object-visual">
             <div class="object-box">
-              <div class="object-title">person 对象</div>
+              <div class="object-title">
+                person 对象
+              </div>
               <div class="object-content">
-                <div class="property">name: "张三"</div>
-                <div class="method" @click="simulateMethodCall">
+                <div class="property">
+                  name: "张三"
+                </div>
+                <div
+                  class="method"
+                  @click="simulateMethodCall"
+                >
                   greet: function() { ... }
                 </div>
               </div>
             </div>
 
             <div class="arrow-indicator">
-              <div class="this-pointer">this →</div>
+              <div class="this-pointer">
+                this →
+              </div>
             </div>
 
-            <div v-if="methodCallResult" class="result-box">
+            <div
+              v-if="methodCallResult"
+              class="result-box"
+            >
               {{ methodCallResult }}
             </div>
           </div>
 
           <div class="rule-box">
-            <div class="rule-title">规则：对象方法</div>
-            <div class="rule-content">通过对象调用方法时，<code>this</code> 指向该对象</div>
+            <div class="rule-title">
+              规则：对象方法
+            </div>
+            <div class="rule-content">
+              通过对象调用方法时，<code>this</code> 指向该对象
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 普通函数 -->
-    <div v-else-if="activeScenario === 'function'" class="scenario-content">
+    <div
+      v-else-if="activeScenario === 'function'"
+      class="scenario-content"
+    >
       <div class="split-view">
         <div class="code-panel">
-          <div class="code-title">普通函数调用</div>
+          <div class="code-title">
+            普通函数调用
+          </div>
           <div class="code-block">
-            <div class="code-line">function show() {</div>
-            <div class="code-line indent">return this === window</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">show() <span class="comment">// this → window (浏览器)</span></div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// 严格模式下是 undefined</div>
+            <div class="code-line">
+              function show() {
+            </div>
+            <div class="code-line indent">
+              return this === window
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              show() <span class="comment">// this → window (浏览器)</span>
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // 严格模式下是 undefined
+            </div>
           </div>
         </div>
 
         <div class="visual-panel">
           <div class="function-visual">
             <div class="global-window">
-              <div class="window-title">window (全局对象)</div>
+              <div class="window-title">
+                window (全局对象)
+              </div>
               <div class="window-content">
-                <div class="global-item">show 函数在这里</div>
-                <div class="global-item">this → window</div>
+                <div class="global-item">
+                  show 函数在这里
+                </div>
+                <div class="global-item">
+                  this → window
+                </div>
               </div>
             </div>
           </div>
 
           <div class="mode-toggle">
-            <button @click="strictMode = !strictMode" class="toggle-btn">
+            <button
+              class="toggle-btn"
+              @click="strictMode = !strictMode"
+            >
               {{ strictMode ? '严格模式：开' : '严格模式：关' }}
             </button>
             <div class="mode-result">
@@ -107,7 +166,9 @@
           </div>
 
           <div class="rule-box">
-            <div class="rule-title">规则：普通函数</div>
+            <div class="rule-title">
+              规则：普通函数
+            </div>
             <div class="rule-content">
               非严格模式：<code>this</code> 指向全局对象<br>
               严格模式：<code>this</code> 是 <code>undefined</code>
@@ -118,20 +179,39 @@
     </div>
 
     <!-- 构造函数 -->
-    <div v-else-if="activeScenario === 'constructor'" class="scenario-content">
+    <div
+      v-else-if="activeScenario === 'constructor'"
+      class="scenario-content"
+    >
       <div class="split-view">
         <div class="code-panel">
-          <div class="code-title">构造函数调用</div>
+          <div class="code-title">
+            构造函数调用
+          </div>
           <div class="code-block">
-            <div class="code-line">function Person(name) {</div>
-            <div class="code-line indent">this.name = name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">const p1 = new Person("李四")</div>
-            <div class="code-line">const p2 = new Person("王五")</div>
-            <div class="code-line"></div>
-            <div class="code-line comment">// p1.name = "李四"</div>
-            <div class="code-line comment">// p2.name = "王五"</div>
+            <div class="code-line">
+              function Person(name) {
+            </div>
+            <div class="code-line indent">
+              this.name = name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              const p1 = new Person("李四")
+            </div>
+            <div class="code-line">
+              const p2 = new Person("王五")
+            </div>
+            <div class="code-line" />
+            <div class="code-line comment">
+              // p1.name = "李四"
+            </div>
+            <div class="code-line comment">
+              // p2.name = "王五"
+            </div>
           </div>
         </div>
 
@@ -142,17 +222,23 @@
                 <span class="step-num">1</span>
                 <span>创建新对象</span>
               </div>
-              <div class="process-arrow">↓</div>
+              <div class="process-arrow">
+                ↓
+              </div>
               <div class="process-step">
                 <span class="step-num">2</span>
                 <span>this 指向新对象</span>
               </div>
-              <div class="process-arrow">↓</div>
+              <div class="process-arrow">
+                ↓
+              </div>
               <div class="process-step">
                 <span class="step-num">3</span>
                 <span>执行构造函数</span>
               </div>
-              <div class="process-arrow">↓</div>
+              <div class="process-arrow">
+                ↓
+              </div>
               <div class="process-step">
                 <span class="step-num">4</span>
                 <span>返回新对象</span>
@@ -161,18 +247,28 @@
 
             <div class="object-comparison">
               <div class="obj-instance">
-                <div class="obj-title">p1</div>
-                <div class="obj-content">name: "李四"</div>
+                <div class="obj-title">
+                  p1
+                </div>
+                <div class="obj-content">
+                  name: "李四"
+                </div>
               </div>
               <div class="obj-instance">
-                <div class="obj-title">p2</div>
-                <div class="obj-content">name: "王五"</div>
+                <div class="obj-title">
+                  p2
+                </div>
+                <div class="obj-content">
+                  name: "王五"
+                </div>
               </div>
             </div>
           </div>
 
           <div class="rule-box">
-            <div class="rule-title">规则：new 调用</div>
+            <div class="rule-title">
+              规则：new 调用
+            </div>
             <div class="rule-content">
               使用 <code>new</code> 调用函数时，<code>this</code> 指向新创建的对象
             </div>
@@ -182,52 +278,104 @@
     </div>
 
     <!-- call/apply/bind -->
-    <div v-else-if="activeScenario === 'explicit'" class="scenario-content">
+    <div
+      v-else-if="activeScenario === 'explicit'"
+      class="scenario-content"
+    >
       <div class="split-view">
         <div class="code-panel">
-          <div class="code-title">显式绑定 (call/apply/bind)</div>
+          <div class="code-title">
+            显式绑定 (call/apply/bind)
+          </div>
           <div class="code-block">
-            <div class="code-line">function greet() {</div>
-            <div class="code-line indent">return "我是" + this.name</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">const person = { name: "小明" }</div>
-            <div class="code-line"></div>
-            <div class="code-line">greet.call(person) <span class="comment">// 显式指定 this</span></div>
-            <div class="code-line">greet.apply(person)</div>
-            <div class="code-line">const bound = greet.bind(person)</div>
+            <div class="code-line">
+              function greet() {
+            </div>
+            <div class="code-line indent">
+              return "我是" + this.name
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              const person = { name: "小明" }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              greet.call(person) <span class="comment">// 显式指定 this</span>
+            </div>
+            <div class="code-line">
+              greet.apply(person)
+            </div>
+            <div class="code-line">
+              const bound = greet.bind(person)
+            </div>
           </div>
         </div>
 
         <div class="visual-panel">
           <div class="binding-visual">
             <div class="function-box">
-              <div class="box-title">greet 函数</div>
-              <div class="box-content">this.name</div>
+              <div class="box-title">
+                greet 函数
+              </div>
+              <div class="box-content">
+                this.name
+              </div>
             </div>
 
             <div class="binding-methods">
-              <div class="binding-item" @click="simulateCall" :class="{ active: bindingMethod === 'call' }">
-                <div class="method-name">call(person)</div>
-                <div class="method-desc">立即调用，this → person</div>
+              <div
+                class="binding-item"
+                :class="{ active: bindingMethod === 'call' }"
+                @click="simulateCall"
+              >
+                <div class="method-name">
+                  call(person)
+                </div>
+                <div class="method-desc">
+                  立即调用，this → person
+                </div>
               </div>
-              <div class="binding-item" @click="simulateApply" :class="{ active: bindingMethod === 'apply' }">
-                <div class="method-name">apply(person)</div>
-                <div class="method-desc">同 call，参数为数组</div>
+              <div
+                class="binding-item"
+                :class="{ active: bindingMethod === 'apply' }"
+                @click="simulateApply"
+              >
+                <div class="method-name">
+                  apply(person)
+                </div>
+                <div class="method-desc">
+                  同 call，参数为数组
+                </div>
               </div>
-              <div class="binding-item" @click="simulateBind" :class="{ active: bindingMethod === 'bind' }">
-                <div class="method-name">bind(person)</div>
-                <div class="method-desc">返回新函数，this 固定</div>
+              <div
+                class="binding-item"
+                :class="{ active: bindingMethod === 'bind' }"
+                @click="simulateBind"
+              >
+                <div class="method-name">
+                  bind(person)
+                </div>
+                <div class="method-desc">
+                  返回新函数，this 固定
+                </div>
               </div>
             </div>
 
-            <div v-if="bindingResult" class="binding-result">
+            <div
+              v-if="bindingResult"
+              class="binding-result"
+            >
               {{ bindingResult }}
             </div>
           </div>
 
           <div class="rule-box">
-            <div class="rule-title">规则：显式绑定</div>
+            <div class="rule-title">
+              规则：显式绑定
+            </div>
             <div class="rule-content">
               <code>call/apply/bind</code> 可以显式指定 <code>this</code> 的指向
             </div>
@@ -237,48 +385,85 @@
     </div>
 
     <!-- 箭头函数 -->
-    <div v-else class="scenario-content">
+    <div
+      v-else
+      class="scenario-content"
+    >
       <div class="split-view">
         <div class="code-panel">
-          <div class="code-title">箭头函数的 this</div>
+          <div class="code-title">
+            箭头函数的 this
+          </div>
           <div class="code-block">
-            <div class="code-line">const person = {</div>
-            <div class="code-line indent">name: "小红",</div>
-            <div class="code-line indent">greet: function() {</div>
-            <div class="code-line indent indent">setTimeout(() => {</div>
-            <div class="code-line indent indent indent">console.log(this.name)</div>
-            <div class="code-line indent indent">}, 1000)</div>
-            <div class="code-line indent">}</div>
-            <div class="code-line">}</div>
-            <div class="code-line"></div>
-            <div class="code-line">person.greet() <span class="comment">// 输出 "小红"</span></div>
+            <div class="code-line">
+              const person = {
+            </div>
+            <div class="code-line indent">
+              name: "小红",
+            </div>
+            <div class="code-line indent">
+              greet: function() {
+            </div>
+            <div class="code-line indent indent">
+              setTimeout(() => {
+            </div>
+            <div class="code-line indent indent indent">
+              console.log(this.name)
+            </div>
+            <div class="code-line indent indent">
+              }, 1000)
+            </div>
+            <div class="code-line indent">
+              }
+            </div>
+            <div class="code-line">
+              }
+            </div>
+            <div class="code-line" />
+            <div class="code-line">
+              person.greet() <span class="comment">// 输出 "小红"</span>
+            </div>
           </div>
         </div>
 
         <div class="visual-panel">
           <div class="arrow-function-visual">
             <div class="outer-context">
-              <div class="context-title">外层作用域 (person)</div>
+              <div class="context-title">
+                外层作用域 (person)
+              </div>
               <div class="context-content">
-                <div class="context-item">this.name = "小红"</div>
+                <div class="context-item">
+                  this.name = "小红"
+                </div>
               </div>
             </div>
 
             <div class="arrow-capture">
-              <div class="capture-title">箭头函数捕获外层 this</div>
-              <div class="capture-arrow">↑ 继承 this</div>
+              <div class="capture-title">
+                箭头函数捕获外层 this
+              </div>
+              <div class="capture-arrow">
+                ↑ 继承 this
+              </div>
             </div>
 
             <div class="inner-context">
-              <div class="context-title">箭头函数内部</div>
+              <div class="context-title">
+                箭头函数内部
+              </div>
               <div class="context-content">
-                <div class="context-item">this → 外层的 this</div>
+                <div class="context-item">
+                  this → 外层的 this
+                </div>
               </div>
             </div>
           </div>
 
           <div class="rule-box">
-            <div class="rule-title">规则：箭头函数</div>
+            <div class="rule-title">
+              规则：箭头函数
+            </div>
             <div class="rule-content">
               箭头函数没有自己的 <code>this</code>，它继承外层作用域的 <code>this</code>
             </div>
@@ -288,7 +473,9 @@
     </div>
 
     <div class="quick-reference">
-      <div class="reference-title">📋 this 指向速查表</div>
+      <div class="reference-title">
+        📋 this 指向速查表
+      </div>
       <div class="reference-table">
         <div class="ref-row header">
           <span>调用方式</span>
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/VariableBoxDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/VariableBoxDemo.vue
index 30bb044..a4a225a 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/VariableBoxDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/VariableBoxDemo.vue
@@ -44,36 +44,85 @@ const reset = () => {
     </div>
 
     <div class="boxes-row">
-      <div class="var-box" :class="{ error: messageType === 'error' }">
-        <div class="box-tag const">const</div>
-        <div class="box-name">name</div>
-        <div class="box-value">{{ name }}</div>
-        <div class="box-lock">🔒</div>
+      <div
+        class="var-box"
+        :class="{ error: messageType === 'error' }"
+      >
+        <div class="box-tag const">
+          const
+        </div>
+        <div class="box-name">
+          name
+        </div>
+        <div class="box-value">
+          {{ name }}
+        </div>
+        <div class="box-lock">
+          🔒
+        </div>
       </div>
 
-      <div class="var-box" :class="{ success: messageType === 'success' }">
-        <div class="box-tag let">let</div>
-        <div class="box-name">age</div>
-        <div class="box-value">{{ age }}</div>
-        <div class="box-lock">🔓</div>
+      <div
+        class="var-box"
+        :class="{ success: messageType === 'success' }"
+      >
+        <div class="box-tag let">
+          let
+        </div>
+        <div class="box-name">
+          age
+        </div>
+        <div class="box-value">
+          {{ age }}
+        </div>
+        <div class="box-lock">
+          🔓
+        </div>
       </div>
 
       <div class="var-box">
-        <div class="box-tag const">const</div>
-        <div class="box-name">isStudent</div>
-        <div class="box-value">{{ isStudent }}</div>
-        <div class="box-lock">🔒</div>
+        <div class="box-tag const">
+          const
+        </div>
+        <div class="box-name">
+          isStudent
+        </div>
+        <div class="box-value">
+          {{ isStudent }}
+        </div>
+        <div class="box-lock">
+          🔒
+        </div>
       </div>
     </div>
 
-    <div class="message" v-if="showMessage" :class="messageType">
+    <div
+      v-if="showMessage"
+      class="message"
+      :class="messageType"
+    >
       {{ showMessage }}
     </div>
 
     <div class="controls">
-      <button @click="modifyAge" class="btn btn-primary">修改 age</button>
-      <button @click="modifyName" class="btn btn-danger">修改 name</button>
-      <button @click="reset" class="btn btn-secondary">重置</button>
+      <button
+        class="btn btn-primary"
+        @click="modifyAge"
+      >
+        修改 age
+      </button>
+      <button
+        class="btn btn-danger"
+        @click="modifyName"
+      >
+        修改 name
+      </button>
+      <button
+        class="btn btn-secondary"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
     <div class="code-snippet">
diff --git a/docs/.vitepress/theme/components/appendix/javascript-intro/VariableScopeDemo.vue b/docs/.vitepress/theme/components/appendix/javascript-intro/VariableScopeDemo.vue
index bfbdafe..eb441a4 100644
--- a/docs/.vitepress/theme/components/appendix/javascript-intro/VariableScopeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/javascript-intro/VariableScopeDemo.vue
@@ -15,32 +15,58 @@
 
     <div class="code-display">
       <div class="code-block">
-        <div class="code-line" v-for="(line, i) in codeLines" :key="i" :class="{ active: currentLine === i }">
+        <div
+          v-for="(line, i) in codeLines"
+          :key="i"
+          class="code-line"
+          :class="{ active: currentLine === i }"
+        >
           <span class="line-num">{{ i + 1 }}</span>
-          <span class="line-code" v-html="highlightCode(line)"></span>
+          <span
+            class="line-code"
+            v-html="highlightCode(line)"
+          />
         </div>
       </div>
 
       <div class="visualization">
         <div class="scope-area global-scope">
-          <div class="scope-title">全局作用域（房子外）</div>
+          <div class="scope-title">
+            全局作用域（房子外）
+          </div>
           <div class="scope-vars">
-            <div v-if="step >= 1" class="var-item" :class="{ error: step === 4 }">
+            <div
+              v-if="step >= 1"
+              class="var-item"
+              :class="{ error: step === 4 }"
+            >
               <span class="var-type">var</span>
               <span class="var-name">globalVar</span>
               <span class="var-value">= "外面"</span>
             </div>
           </div>
 
-          <div class="scope-area block-scope" v-if="step >= 2">
-            <div class="scope-title">块级作用域（房间内）</div>
+          <div
+            v-if="step >= 2"
+            class="scope-area block-scope"
+          >
+            <div class="scope-title">
+              块级作用域（房间内）
+            </div>
             <div class="scope-vars">
-              <div v-if="step >= 2" class="var-item" :class="{ error: step === 4 }">
+              <div
+                v-if="step >= 2"
+                class="var-item"
+                :class="{ error: step === 4 }"
+              >
                 <span class="var-type">var</span>
                 <span class="var-name">blockVar</span>
                 <span class="var-value">= "房间里"</span>
               </div>
-              <div v-if="step >= 3" class="var-item let">
+              <div
+                v-if="step >= 3"
+                class="var-item let"
+              >
                 <span class="var-type">let</span>
                 <span class="var-name">blockLet</span>
                 <span class="var-value">= "只有房间内能用"</span>
@@ -50,9 +76,16 @@
         </div>
 
         <div class="console-output">
-          <div class="console-title">控制台输出</div>
+          <div class="console-title">
+            控制台输出
+          </div>
           <div class="console-lines">
-            <div v-for="(output, i) in consoleOutput" :key="i" class="console-line" :class="{ error: output.error }">
+            <div
+              v-for="(output, i) in consoleOutput"
+              :key="i"
+              class="console-line"
+              :class="{ error: output.error }"
+            >
               {{ output.text }}
             </div>
           </div>
@@ -61,10 +94,27 @@
     </div>
 
     <div class="controls">
-      <button @click="prevStep" :disabled="step === 0" class="control-btn">← 上一步</button>
+      <button
+        :disabled="step === 0"
+        class="control-btn"
+        @click="prevStep"
+      >
+        ← 上一步
+      </button>
       <span class="step-indicator">{{ step + 1 }} / {{ maxSteps }}</span>
-      <button @click="nextStep" :disabled="step === maxSteps" class="control-btn">下一步 →</button>
-      <button @click="reset" class="control-btn secondary">重置</button>
+      <button
+        :disabled="step === maxSteps"
+        class="control-btn"
+        @click="nextStep"
+      >
+        下一步 →
+      </button>
+      <button
+        class="control-btn secondary"
+        @click="reset"
+      >
+        重置
+      </button>
     </div>
 
     <div class="info-box">
diff --git a/docs/.vitepress/theme/components/appendix/js-runtime/CallStackDemo.vue b/docs/.vitepress/theme/components/appendix/js-runtime/CallStackDemo.vue
index cfe08b4..3c04bc9 100644
--- a/docs/.vitepress/theme/components/appendix/js-runtime/CallStackDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/js-runtime/CallStackDemo.vue
@@ -102,7 +102,9 @@ const stop = () => {
         <h4>调用栈</h4>
         <div class="stack-container">
           <div class="stack-base">
-            <div class="stack-label">栈底</div>
+            <div class="stack-label">
+              栈底
+            </div>
           </div>
 
           <div class="stack-frames">
@@ -114,18 +116,27 @@ const stop = () => {
                 :class="{ 'active': frame.active }"
                 :style="{ bottom: `${index * 60}px` }"
               >
-                <div class="frame-function">{{ frame.function }}()</div>
-                <div class="frame-code">{{ frame.code }}</div>
+                <div class="frame-function">
+                  {{ frame.function }}()
+                </div>
+                <div class="frame-code">
+                  {{ frame.code }}
+                </div>
               </div>
             </transition-group>
 
-            <div v-if="callStack.length === 0" class="empty-stack">
+            <div
+              v-if="callStack.length === 0"
+              class="empty-stack"
+            >
               栈为空
             </div>
           </div>
 
           <div class="stack-top">
-            <div class="stack-label">栈顶</div>
+            <div class="stack-label">
+              栈顶
+            </div>
           </div>
         </div>
 
@@ -145,7 +156,10 @@ const stop = () => {
     <div class="output-section">
       <h4>输出</h4>
       <div class="output-container">
-        <div v-if="output.length === 0" class="empty-output">
+        <div
+          v-if="output.length === 0"
+          class="empty-output"
+        >
           等待输出...
         </div>
         <transition-group name="output">
@@ -162,16 +176,32 @@ const stop = () => {
 
     <!-- 控制按钮 -->
     <div class="controls">
-      <button @click="play" :disabled="isAnimating" class="btn-play">
+      <button
+        :disabled="isAnimating"
+        class="btn-play"
+        @click="play"
+      >
         {{ isAnimating ? '执行中...' : '▶ 自动演示' }}
       </button>
-      <button @click="nextStep" :disabled="isAnimating || currentStep >= codeSteps.length" class="btn-step">
+      <button
+        :disabled="isAnimating || currentStep >= codeSteps.length"
+        class="btn-step"
+        @click="nextStep"
+      >
         ⏭ 单步执行
       </button>
-      <button @click="stop" :disabled="!isAnimating" class="btn-stop">
+      <button
+        :disabled="!isAnimating"
+        class="btn-stop"
+        @click="stop"
+      >
         ⏸ 停止
       </button>
-      <button @click="reset" :disabled="isAnimating" class="btn-reset">
+      <button
+        :disabled="isAnimating"
+        class="btn-reset"
+        @click="reset"
+      >
         🔄 重置
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/js-runtime/GarbageCollectionDemo.vue b/docs/.vitepress/theme/components/appendix/js-runtime/GarbageCollectionDemo.vue
index 9e45a53..09fb23a 100644
--- a/docs/.vitepress/theme/components/appendix/js-runtime/GarbageCollectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/js-runtime/GarbageCollectionDemo.vue
@@ -133,15 +133,15 @@ const stop = () => {
         <h4>对象引用关系</h4>
         <div class="legend">
           <div class="legend-item">
-            <span class="legend-color unmarked"></span>
+            <span class="legend-color unmarked" />
             <span>未标记</span>
           </div>
           <div class="legend-item">
-            <span class="legend-color marked"></span>
+            <span class="legend-color marked" />
             <span>已标记(可达)</span>
           </div>
           <div class="legend-item">
-            <span class="legend-color collected"></span>
+            <span class="legend-color collected" />
             <span>已回收</span>
           </div>
         </div>
@@ -151,8 +151,12 @@ const stop = () => {
         <!-- 根对象 -->
         <div class="root-object">
           <div class="object-box root">
-            <div class="object-icon">🌳</div>
-            <div class="object-name">Root</div>
+            <div class="object-icon">
+              🌳
+            </div>
+            <div class="object-name">
+              Root
+            </div>
           </div>
         </div>
 
@@ -167,22 +171,53 @@ const stop = () => {
               'collected': obj.collected
             }"
           >
-            <div class="object-box" :style="{ borderColor: obj.color }">
-              <div class="object-icon" :style="{ background: obj.color }">
+            <div
+              class="object-box"
+              :style="{ borderColor: obj.color }"
+            >
+              <div
+                class="object-icon"
+                :style="{ background: obj.color }"
+              >
                 {{ obj.collected ? '💀' : '📦' }}
               </div>
-              <div class="object-name">{{ obj.name }}</div>
-              <div v-if="obj.marked" class="object-status">✓ 可达</div>
-              <div v-if="obj.collected" class="object-status collected">✗ 回收</div>
+              <div class="object-name">
+                {{ obj.name }}
+              </div>
+              <div
+                v-if="obj.marked"
+                class="object-status"
+              >
+                ✓ 可达
+              </div>
+              <div
+                v-if="obj.collected"
+                class="object-status collected"
+              >
+                ✗ 回收
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 引用连线 (用SVG绘制) -->
-        <svg class="connections" viewBox="0 0 600 400">
+        <svg
+          class="connections"
+          viewBox="0 0 600 400"
+        >
           <defs>
-            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-              <polygon points="0 0, 10 3.5, 0 7" fill="#a0aec0" />
+            <marker
+              id="arrowhead"
+              markerWidth="10"
+              markerHeight="7"
+              refX="9"
+              refY="3.5"
+              orient="auto"
+            >
+              <polygon
+                points="0 0, 10 3.5, 0 7"
+                fill="#a0aec0"
+              />
             </marker>
           </defs>
           <!-- Root -> obj1 -->
@@ -240,16 +275,32 @@ const stop = () => {
 
     <!-- 控制按钮 -->
     <div class="controls">
-      <button @click="play" :disabled="isAnimating" class="btn-play">
+      <button
+        :disabled="isAnimating"
+        class="btn-play"
+        @click="play"
+      >
         {{ isAnimating ? '执行中...' : '▶ 自动演示' }}
       </button>
-      <button @click="nextStep" :disabled="isAnimating || currentStep >= steps.length" class="btn-step">
+      <button
+        :disabled="isAnimating || currentStep >= steps.length"
+        class="btn-step"
+        @click="nextStep"
+      >
         ⏭ 单步执行
       </button>
-      <button @click="stop" :disabled="!isAnimating" class="btn-stop">
+      <button
+        :disabled="!isAnimating"
+        class="btn-stop"
+        @click="stop"
+      >
         ⏸ 停止
       </button>
-      <button @click="reset" :disabled="isAnimating" class="btn-reset">
+      <button
+        :disabled="isAnimating"
+        class="btn-reset"
+        @click="reset"
+      >
         🔄 重置
       </button>
     </div>
@@ -297,28 +348,36 @@ const stop = () => {
       <h4>实际应用技巧</h4>
       <div class="tips-grid">
         <div class="tip-card">
-          <div class="tip-icon">💡</div>
+          <div class="tip-icon">
+            💡
+          </div>
           <div class="tip-content">
             <strong>及时解除引用</strong>
             <p>对象不再使用时,将其设为 null</p>
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">🔒</div>
+          <div class="tip-icon">
+            🔒
+          </div>
           <div class="tip-content">
             <strong>避免意外的全局变量</strong>
             <p>使用 const/let 代替 var</p>
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">🧹</div>
+          <div class="tip-icon">
+            🧹
+          </div>
           <div class="tip-content">
             <strong>清理事件监听</strong>
             <p>组件销毁时移除所有监听器</p>
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">📊</div>
+          <div class="tip-icon">
+            📊
+          </div>
           <div class="tip-content">
             <strong>定期检查内存</strong>
             <p>用 DevTools Memory 面板监控</p>
diff --git a/docs/.vitepress/theme/components/appendix/js-runtime/MemoryLeakDemo.vue b/docs/.vitepress/theme/components/appendix/js-runtime/MemoryLeakDemo.vue
index 6a8dc4e..5ccea76 100644
--- a/docs/.vitepress/theme/components/appendix/js-runtime/MemoryLeakDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/js-runtime/MemoryLeakDemo.vue
@@ -98,9 +98,9 @@ const resetAll = () => {
       <button
         v-for="scenario in scenarios"
         :key="scenario.value"
-        @click="activeScenario = scenario.value"
         :class="{ 'active': activeScenario === scenario.value }"
         class="scenario-tab"
+        @click="activeScenario = scenario.value"
       >
         <span class="tab-icon">{{ scenario.icon }}</span>
         <span class="tab-label">{{ scenario.label }}</span>
@@ -119,10 +119,16 @@ const resetAll = () => {
           :class="{ 'warning': memoryUsage > 70, 'danger': memoryUsage > 90 }"
           :style="{ width: `${memoryUsage}%` }"
         >
-          <span v-if="memoryUsage > 10" class="memory-text">{{ memoryUsage }}%</span>
+          <span
+            v-if="memoryUsage > 10"
+            class="memory-text"
+          >{{ memoryUsage }}%</span>
         </div>
       </div>
-      <div v-if="memoryUsage > 90" class="memory-alert">
+      <div
+        v-if="memoryUsage > 90"
+        class="memory-alert"
+      >
         ⚠️ 内存占用过高!可能导致页面卡顿或崩溃
       </div>
     </div>
@@ -130,7 +136,10 @@ const resetAll = () => {
     <!-- 场景内容 -->
     <div class="scenario-content">
       <!-- 全局变量场景 -->
-      <div v-if="activeScenario === 'global-vars'" class="scenario-panel">
+      <div
+        v-if="activeScenario === 'global-vars'"
+        class="scenario-panel"
+      >
         <h4>全局变量泄漏</h4>
 
         <div class="scenario-description">
@@ -139,10 +148,16 @@ const resetAll = () => {
         </div>
 
         <div class="action-buttons">
-          <button @click="addGlobalVariable" class="btn-add">
+          <button
+            class="btn-add"
+            @click="addGlobalVariable"
+          >
             ➕ 添加全局变量
           </button>
-          <button @click="clearGlobalVariables" class="btn-clear">
+          <button
+            class="btn-clear"
+            @click="clearGlobalVariables"
+          >
             🗑️ 清空全局变量
           </button>
         </div>
@@ -161,10 +176,16 @@ const resetAll = () => {
               <span class="item-time">{{ item.timestamp }}</span>
               <span class="item-size">{{ item.data.length }} 项数据</span>
             </div>
-            <div v-if="globalMemory.length === 0" class="empty-state">
+            <div
+              v-if="globalMemory.length === 0"
+              class="empty-state"
+            >
               暂无全局变量
             </div>
-            <div v-if="globalMemory.length > 5" class="more-items">
+            <div
+              v-if="globalMemory.length > 5"
+              class="more-items"
+            >
               ... 还有 {{ globalMemory.length - 5 }} 项
             </div>
           </div>
@@ -181,7 +202,10 @@ function addItem() {
       </div>
 
       <!-- 事件监听场景 -->
-      <div v-if="activeScenario === 'event-listeners'" class="scenario-panel">
+      <div
+        v-if="activeScenario === 'event-listeners'"
+        class="scenario-panel"
+      >
         <h4>事件监听器泄漏</h4>
 
         <div class="scenario-description">
@@ -190,10 +214,16 @@ function addItem() {
         </div>
 
         <div class="action-buttons">
-          <button @click="addEventListener" class="btn-add">
+          <button
+            class="btn-add"
+            @click="addEventListener"
+          >
             ➕ 添加事件监听
           </button>
-          <button @click="removeAllListeners" class="btn-clear">
+          <button
+            class="btn-clear"
+            @click="removeAllListeners"
+          >
             🗑️ 移除所有监听
           </button>
         </div>
@@ -208,16 +238,24 @@ function addItem() {
               :key="listener.id"
               class="listener-item"
             >
-              <div class="listener-icon">🎯</div>
+              <div class="listener-icon">
+                🎯
+              </div>
               <div class="listener-info">
                 <span class="listener-id">监听器 #{{ listener.id }}</span>
                 <span class="listener-status">活跃中</span>
               </div>
             </div>
-            <div v-if="eventListeners.length === 0" class="empty-state">
+            <div
+              v-if="eventListeners.length === 0"
+              class="empty-state"
+            >
               暂无事件监听器
             </div>
-            <div v-if="eventListeners.length > 5" class="more-items">
+            <div
+              v-if="eventListeners.length > 5"
+              class="more-items"
+            >
               ... 还有 {{ eventListeners.length - 5 }} 个监听器
             </div>
           </div>
@@ -240,7 +278,10 @@ button.removeEventListener('click', handler)</code></pre>
       </div>
 
       <!-- 闭包场景 -->
-      <div v-if="activeScenario === 'closures'" class="scenario-panel">
+      <div
+        v-if="activeScenario === 'closures'"
+        class="scenario-panel"
+      >
         <h4>闭包引用泄漏</h4>
 
         <div class="scenario-description">
@@ -249,10 +290,16 @@ button.removeEventListener('click', handler)</code></pre>
         </div>
 
         <div class="action-buttons">
-          <button @click="createClosure" class="btn-add">
+          <button
+            class="btn-add"
+            @click="createClosure"
+          >
             ➕ 创建闭包
           </button>
-          <button @click="clearClosures" class="btn-clear">
+          <button
+            class="btn-clear"
+            @click="clearClosures"
+          >
             🗑️ 清空闭包
           </button>
         </div>
@@ -267,17 +314,25 @@ button.removeEventListener('click', handler)</code></pre>
               :key="item.id"
               class="closure-item"
             >
-              <div class="closure-icon">🔒</div>
+              <div class="closure-icon">
+                🔒
+              </div>
               <div class="closure-info">
                 <span class="closure-id">闭包 #{{ item.id }}</span>
                 <span class="closure-time">{{ item.timestamp }}</span>
                 <span class="closure-size">持有 {{ item.data.length }} 项数据</span>
               </div>
             </div>
-            <div v-if="closureItems.length === 0" class="empty-state">
+            <div
+              v-if="closureItems.length === 0"
+              class="empty-state"
+            >
               暂无闭包
             </div>
-            <div v-if="closureItems.length > 5" class="more-items">
+            <div
+              v-if="closureItems.length > 5"
+              class="more-items"
+            >
               ... 还有 {{ closureItems.length - 5 }} 个闭包
             </div>
           </div>
@@ -306,7 +361,10 @@ handler = null  // 释放引用</code></pre>
 
     <!-- 重置按钮 -->
     <div class="global-actions">
-      <button @click="resetAll" class="btn-reset">
+      <button
+        class="btn-reset"
+        @click="resetAll"
+      >
         🔄 重置所有场景
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/js-runtime/RuntimeEnvironmentDemo.vue b/docs/.vitepress/theme/components/appendix/js-runtime/RuntimeEnvironmentDemo.vue
index d4f8afa..2a7a891 100644
--- a/docs/.vitepress/theme/components/appendix/js-runtime/RuntimeEnvironmentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/js-runtime/RuntimeEnvironmentDemo.vue
@@ -63,9 +63,9 @@ const reset = () => {
         <button
           v-for="tab in tabs"
           :key="tab.value"
-          @click="activeTab = tab.value"
           :class="{ 'active': activeTab === tab.value }"
           class="tab-btn"
+          @click="activeTab = tab.value"
         >
           <span class="tab-icon">{{ tab.icon }}</span>
           <span class="tab-label">{{ tab.label }}</span>
@@ -74,7 +74,10 @@ const reset = () => {
 
       <div class="tab-content">
         <!-- 浏览器环境 -->
-        <div v-if="activeTab === 'browser'" class="environment-content">
+        <div
+          v-if="activeTab === 'browser'"
+          class="environment-content"
+        >
           <h4>浏览器环境</h4>
 
           <div class="api-grid">
@@ -83,9 +86,15 @@ const reset = () => {
               :key="api.name"
               class="api-card"
             >
-              <div class="api-name">{{ api.name }}</div>
-              <div class="api-description">{{ api.description }}</div>
-              <div class="api-example">{{ api.example }}</div>
+              <div class="api-name">
+                {{ api.name }}
+              </div>
+              <div class="api-description">
+                {{ api.description }}
+              </div>
+              <div class="api-example">
+                {{ api.example }}
+              </div>
             </div>
           </div>
 
@@ -102,7 +111,10 @@ const reset = () => {
         </div>
 
         <!-- Node.js 环境 -->
-        <div v-if="activeTab === 'nodejs'" class="environment-content">
+        <div
+          v-if="activeTab === 'nodejs'"
+          class="environment-content"
+        >
           <h4>Node.js 环境</h4>
 
           <div class="api-grid">
@@ -111,9 +123,15 @@ const reset = () => {
               :key="api.name"
               class="api-card"
             >
-              <div class="api-name">{{ api.name }}</div>
-              <div class="api-description">{{ api.description }}</div>
-              <div class="api-example">{{ api.example }}</div>
+              <div class="api-name">
+                {{ api.name }}
+              </div>
+              <div class="api-description">
+                {{ api.description }}
+              </div>
+              <div class="api-example">
+                {{ api.example }}
+              </div>
             </div>
           </div>
 
@@ -154,7 +172,10 @@ const reset = () => {
           <div class="result-content">
             {{ browserResult || '点击"在浏览器运行"查看结果' }}
           </div>
-          <button @click="runInBrowser" class="run-btn">
+          <button
+            class="run-btn"
+            @click="runInBrowser"
+          >
             在浏览器运行
           </button>
         </div>
@@ -167,13 +188,20 @@ const reset = () => {
           <div class="result-content">
             {{ nodeResult || '需要在 Node.js 环境中运行' }}
           </div>
-          <button @click="runInNode" class="run-btn" disabled>
+          <button
+            class="run-btn"
+            disabled
+            @click="runInNode"
+          >
             需要终端运行
           </button>
         </div>
       </div>
 
-      <button @click="reset" class="reset-btn">
+      <button
+        class="reset-btn"
+        @click="reset"
+      >
         重置
       </button>
     </div>
@@ -183,7 +211,9 @@ const reset = () => {
       <p><strong>核心区别:</strong></p>
       <p>浏览器运行时专注于用户界面和网页交互,提供 DOM、BOM、fetch 等前端专用 API。</p>
       <p>Node.js 运行时专注于服务器端开发,提供文件系统、HTTP 服务器、进程管理等后端专用 API。</p>
-      <p class="highlight">同样的 JavaScript 语法,但能用的 API 完全不同——这就是"环境判断"的重要性。</p>
+      <p class="highlight">
+        同样的 JavaScript 语法,但能用的 API 完全不同——这就是"环境判断"的重要性。
+      </p>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/js-runtime/TaskQueueDemo.vue b/docs/.vitepress/theme/components/appendix/js-runtime/TaskQueueDemo.vue
index 7a8ec1a..0a1217d 100644
--- a/docs/.vitepress/theme/components/appendix/js-runtime/TaskQueueDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/js-runtime/TaskQueueDemo.vue
@@ -115,10 +115,22 @@ const stop = () => {
           }"
         >
           <span class="item-number">{{ item.id }}</span>
-          <span class="item-code" :class="`type-${item.type}`">{{ item.code }}</span>
-          <span v-if="item.type === 'sync'" class="item-tag">同步</span>
-          <span v-else-if="item.type === 'micro'" class="item-tag micro">微任务</span>
-          <span v-else-if="item.type === 'macro'" class="item-tag macro">宏任务</span>
+          <span
+            class="item-code"
+            :class="`type-${item.type}`"
+          >{{ item.code }}</span>
+          <span
+            v-if="item.type === 'sync'"
+            class="item-tag"
+          >同步</span>
+          <span
+            v-else-if="item.type === 'micro'"
+            class="item-tag micro"
+          >微任务</span>
+          <span
+            v-else-if="item.type === 'macro'"
+            class="item-tag macro"
+          >宏任务</span>
         </div>
       </div>
     </div>
@@ -129,10 +141,16 @@ const stop = () => {
       <div class="stack-panel">
         <h4>调用栈 (正在执行)</h4>
         <div class="stack-content">
-          <div v-if="currentStep < executionSteps.length" class="current-action">
+          <div
+            v-if="currentStep < executionSteps.length"
+            class="current-action"
+          >
             {{ executionSteps[currentStep]?.description }}
           </div>
-          <div v-else class="current-action done">
+          <div
+            v-else
+            class="current-action done"
+          >
             执行完成
           </div>
         </div>
@@ -152,12 +170,27 @@ const stop = () => {
               class="task-item micro"
               :class="{ 'ready': task.status === 'ready' }"
             >
-              <div class="task-code">{{ task.code }}</div>
-              <div v-if="task.status === 'ready'" class="task-status">✅ 就绪</div>
-              <div v-else class="task-status">⏳ 等待</div>
+              <div class="task-code">
+                {{ task.code }}
+              </div>
+              <div
+                v-if="task.status === 'ready'"
+                class="task-status"
+              >
+                ✅ 就绪
+              </div>
+              <div
+                v-else
+                class="task-status"
+              >
+                ⏳ 等待
+              </div>
             </div>
           </transition-group>
-          <div v-if="microTaskQueue.length === 0" class="empty-queue">
+          <div
+            v-if="microTaskQueue.length === 0"
+            class="empty-queue"
+          >
             队列为空
           </div>
         </div>
@@ -177,12 +210,27 @@ const stop = () => {
               class="task-item macro"
               :class="{ 'ready': task.status === 'ready' }"
             >
-              <div class="task-code">{{ task.code }}</div>
-              <div v-if="task.status === 'ready'" class="task-status">✅ 就绪</div>
-              <div v-else class="task-status">⏳ 等待</div>
+              <div class="task-code">
+                {{ task.code }}
+              </div>
+              <div
+                v-if="task.status === 'ready'"
+                class="task-status"
+              >
+                ✅ 就绪
+              </div>
+              <div
+                v-else
+                class="task-status"
+              >
+                ⏳ 等待
+              </div>
             </div>
           </transition-group>
-          <div v-if="macroTaskQueue.length === 0" class="empty-queue">
+          <div
+            v-if="macroTaskQueue.length === 0"
+            class="empty-queue"
+          >
             队列为空
           </div>
         </div>
@@ -193,7 +241,10 @@ const stop = () => {
     <div class="output-section">
       <h4>输出日志 (执行顺序)</h4>
       <div class="output-log">
-        <div v-if="outputLog.length === 0" class="empty-log">
+        <div
+          v-if="outputLog.length === 0"
+          class="empty-log"
+        >
           等待输出...
         </div>
         <transition-group name="output">
@@ -211,16 +262,32 @@ const stop = () => {
 
     <!-- 控制按钮 -->
     <div class="controls">
-      <button @click="play" :disabled="isAnimating" class="btn-play">
+      <button
+        :disabled="isAnimating"
+        class="btn-play"
+        @click="play"
+      >
         {{ isAnimating ? '执行中...' : '▶ 自动演示' }}
       </button>
-      <button @click="nextStep" :disabled="isAnimating || currentStep >= executionSteps.length" class="btn-step">
+      <button
+        :disabled="isAnimating || currentStep >= executionSteps.length"
+        class="btn-step"
+        @click="nextStep"
+      >
         ⏭ 单步执行
       </button>
-      <button @click="stop" :disabled="!isAnimating" class="btn-stop">
+      <button
+        :disabled="!isAnimating"
+        class="btn-stop"
+        @click="stop"
+      >
         ⏸ 停止
       </button>
-      <button @click="reset" :disabled="isAnimating" class="btn-reset">
+      <button
+        :disabled="isAnimating"
+        class="btn-reset"
+        @click="reset"
+      >
         🔄 重置
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/EmbeddingDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/EmbeddingDemo.vue
index 7506af8..5100789 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/EmbeddingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/EmbeddingDemo.vue
@@ -29,9 +29,15 @@
       </div>
     </div>
 
-    <div class="canvas-container" ref="canvasContainer">
+    <div
+      ref="canvasContainer"
+      class="canvas-container"
+    >
       <!-- 简单的 SVG 坐标系 -->
-      <svg viewBox="0 0 400 300" class="vector-canvas">
+      <svg
+        viewBox="0 0 400 300"
+        class="vector-canvas"
+      >
         <!-- Grid lines -->
         <g class="grid">
           <line
@@ -59,7 +65,10 @@
             :class="{ highlight: point.highlight }"
             :transform="`translate(${point.x}, ${point.y})`"
           >
-            <circle r="4" :fill="point.color" />
+            <circle
+              r="4"
+              :fill="point.color"
+            />
             <text
               y="-8"
               text-anchor="middle"
@@ -72,7 +81,10 @@
         </g>
 
         <!-- Calculation Arrows (for King/Queen demo) -->
-        <g v-if="currentMode === 'analogy'" class="arrows">
+        <g
+          v-if="currentMode === 'analogy'"
+          class="arrows"
+        >
           <!-- King -> Man -->
           <line
             :x1="getPoint('king').x"
@@ -113,7 +125,10 @@
             refY="3.5"
             orient="auto"
           >
-            <polygon points="0 0, 10 3.5, 0 7" fill="rgba(0,0,0,0.2)" />
+            <polygon
+              points="0 0, 10 3.5, 0 7"
+              fill="rgba(0,0,0,0.2)"
+            />
           </marker>
           <marker
             id="arrowhead-brand"
@@ -123,7 +138,10 @@
             refY="3.5"
             orient="auto"
           >
-            <polygon points="0 0, 10 3.5, 0 7" fill="var(--vp-c-brand)" />
+            <polygon
+              points="0 0, 10 3.5, 0 7"
+              fill="var(--vp-c-brand)"
+            />
           </marker>
         </defs>
       </svg>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/LinearAttentionDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/LinearAttentionDemo.vue
index 25a6a82..4cde199 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/LinearAttentionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/LinearAttentionDemo.vue
@@ -7,27 +7,35 @@
       >
         标准 Attention (网状连接)
       </button>
-      <button :class="{ active: mode === 'linear' }" @click="mode = 'linear'">
+      <button
+        :class="{ active: mode === 'linear' }"
+        @click="mode = 'linear'"
+      >
         线性 Attention (接力传递)
       </button>
     </div>
 
     <div class="visual-area">
       <div class="control-panel">
-        <div class="label">参与者数量 (N): {{ nValue }}</div>
+        <div class="label">
+          参与者数量 (N): {{ nValue }}
+        </div>
         <input
-          type="range"
           v-model="nValue"
+          type="range"
           min="3"
           max="12"
           step="1"
           class="slider"
-        />
+        >
       </div>
 
       <div class="viz-canvas-container">
         <!-- Canvas for dynamic drawing -->
-        <svg class="viz-svg" viewBox="0 0 400 300">
+        <svg
+          class="viz-svg"
+          viewBox="0 0 400 300"
+        >
           <!-- STANDARD MODE: Mesh / Web -->
           <g v-if="mode === 'standard'">
             <!-- Active Query Animation -->
@@ -129,7 +137,12 @@
             />
 
             <!-- Passing Message Animation -->
-            <circle cx="0" cy="0" r="8" class="message-token">
+            <circle
+              cx="0"
+              cy="0"
+              r="8"
+              class="message-token"
+            >
               <animateMotion
                 :path="relayPath"
                 dur="2s"
@@ -138,7 +151,10 @@
             </circle>
 
             <!-- Nodes -->
-            <g v-for="(node, idx) in linearNodes" :key="idx">
+            <g
+              v-for="(node, idx) in linearNodes"
+              :key="idx"
+            >
               <circle
                 :cx="node.x"
                 :cy="node.y"
@@ -179,7 +195,9 @@
 
       <div class="stats-panel">
         <div class="stat-item">
-          <div class="stat-label">连接/操作次数</div>
+          <div class="stat-label">
+            连接/操作次数
+          </div>
           <div
             class="stat-value"
             :class="mode === 'standard' ? 'text-red' : 'text-green'"
@@ -189,11 +207,11 @@
         </div>
         <div class="stat-desc">
           <span v-if="mode === 'standard'">
-            每个人都要找其他人。<br />N={{ nValue }} 时，连接数高达
+            每个人都要找其他人。<br>N={{ nValue }} 时，连接数高达
             {{ nValue * nValue }}！
           </span>
           <span v-else>
-            每个人只传给下一个人。<br />N={{ nValue }} 时，操作数仅为
+            每个人只传给下一个人。<br>N={{ nValue }} 时，操作数仅为
             {{ nValue }}。
           </span>
         </div>
@@ -201,16 +219,18 @@
     </div>
 
     <div class="analogy-box">
-      <div class="analogy-title">💡 核心区别：要不要回头看？</div>
+      <div class="analogy-title">
+        💡 核心区别：要不要回头看？
+      </div>
       <div v-if="mode === 'standard'">
         <b>回看模式 (Retrospective)</b>：
-        <br />想象你在考试。每做一道新题，你都要<b>把之前做过的所有题目再检查一遍</b>，确认有没有关联。
-        <br />题目越多，你需要检查的次数就越多，最后累死在检查上。
+        <br>想象你在考试。每做一道新题，你都要<b>把之前做过的所有题目再检查一遍</b>，确认有没有关联。
+        <br>题目越多，你需要检查的次数就越多，最后累死在检查上。
       </div>
       <div v-else>
-        <b>状态模式 (Recurrent)</b>： <br />想象你在跑步。你不需要记得前 100
+        <b>状态模式 (Recurrent)</b>： <br>想象你在跑步。你不需要记得前 100
         步每一步踩在哪，你只需要知道<b>现在的速度和位置</b>（State）。
-        <br />跑第 1000 步和跑第 1 步一样轻松，因为你不需要回头。
+        <br>跑第 1000 步和跑第 1 步一样轻松，因为你不需要回头。
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue
index 07d6d71..19d20e3 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/LlmQuickStartDemo.vue
@@ -1,46 +1,62 @@
 <template>
   <div class="llm-quick-start">
     <div class="header">
-      <div class="title">🤖 LLM 初体验：从闲聊到业务实战</div>
+      <div class="title">
+        🤖 LLM 初体验：从闲聊到业务实战
+      </div>
       <div class="subtitle">
         大模型不仅能聊天，更是生产力工具。试试看它如何处理这些业务需求：
       </div>
     </div>
 
     <div class="chat-window">
-      <div v-if="messages.length === 0" class="empty-state">
-        <div class="emoji">💼</div>
+      <div
+        v-if="messages.length === 0"
+        class="empty-state"
+      >
+        <div class="emoji">
+          💼
+        </div>
         <p>请选择一个业务场景开始体验</p>
       </div>
 
-      <div class="messages" ref="messagesRef">
+      <div
+        ref="messagesRef"
+        class="messages"
+      >
         <div
           v-for="(msg, index) in messages"
           :key="index"
           class="message"
           :class="msg.role"
         >
-          <div class="avatar">{{ msg.role === 'user' ? '🧑‍💻' : '🤖' }}</div>
+          <div class="avatar">
+            {{ msg.role === 'user' ? '🧑‍💻' : '🤖' }}
+          </div>
           <div class="content">
-            <div v-if="msg.role === 'user'" class="user-text">
+            <div
+              v-if="msg.role === 'user'"
+              class="user-text"
+            >
               {{ msg.content }}
             </div>
-            <div v-else class="assistant-content">
+            <div
+              v-else
+              class="assistant-content"
+            >
               <pre v-if="msg.isCode"><code>{{ msg.content }}<span
                 v-if="
                   isGenerating &&
-                  index === messages.length - 1
+                    index === messages.length - 1
                 "
                 class="cursor"
-                >|</span
-              ></code></pre>
+              >|</span></code></pre>
               <div v-else>
                 {{ msg.content
                 }}<span
                   v-if="isGenerating && index === messages.length - 1"
                   class="cursor"
-                  >|</span
-                >
+                >|</span>
               </div>
             </div>
           </div>
@@ -49,18 +65,26 @@
     </div>
 
     <div class="input-area">
-      <div class="quick-actions" v-if="!isGenerating">
+      <div
+        v-if="!isGenerating"
+        class="quick-actions"
+      >
         <button
           v-for="q in questions"
           :key="q.text"
-          @click="ask(q)"
           class="action-btn"
+          @click="ask(q)"
         >
           <span class="btn-icon">{{ q.icon }}</span>
           <span class="btn-text">{{ q.text }}</span>
         </button>
       </div>
-      <div class="status-text" v-else>正在思考业务逻辑并生成 Token...</div>
+      <div
+        v-else
+        class="status-text"
+      >
+        正在思考业务逻辑并生成 Token...
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/MoEDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/MoEDemo.vue
index f2a6c39..70ce20a 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/MoEDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/MoEDemo.vue
@@ -25,15 +25,17 @@
     <div class="visual-stage">
       <!-- Step 1: Input Selection -->
       <div class="stage-section input-section">
-        <div class="section-label">1. 选择输入 (Select Input)</div>
+        <div class="section-label">
+          1. 选择输入 (Select Input)
+        </div>
         <div class="task-selector">
           <button
             v-for="(task, idx) in tasks"
             :key="idx"
             class="task-btn"
             :class="{ selected: selectedTask.label === task.label }"
-            @click="selectTask(task)"
             :disabled="processing"
+            @click="selectTask(task)"
           >
             <span class="task-icon">{{ task.icon }}</span>
             <span class="task-text">{{ task.label }}</span>
@@ -44,10 +46,16 @@
       <!-- Processing Pipeline -->
       <div class="pipeline-container">
         <!-- Token Flow Animation -->
-        <div class="token-flow-viz" v-if="processing">
+        <div
+          v-if="processing"
+          class="token-flow-viz"
+        >
           <div class="current-token-display">
             <span class="token-label">Current Token:</span>
-            <span class="token-badge" :style="{ borderColor: getExpertColor(currentToken?.expert) }">
+            <span
+              class="token-badge"
+              :style="{ borderColor: getExpertColor(currentToken?.expert) }"
+            >
               {{ currentToken?.text || '...' }}
             </span>
           </div>
@@ -57,34 +65,57 @@
         <div class="stage-section process-section">
           <div class="section-label">
             2. 模型处理 (Processing)
-            <span v-if="processing" class="status-badge">生成中...</span>
+            <span
+              v-if="processing"
+              class="status-badge"
+            >生成中...</span>
           </div>
 
           <!-- Dense Visualization -->
-          <div v-if="architecture === 'dense'" class="dense-visualization">
+          <div
+            v-if="architecture === 'dense'"
+            class="dense-visualization"
+          >
             <div
               class="dense-block"
               :class="{ activating: processing && currentStep === 'expert' }"
             >
-              <div class="dense-label">Dense FFN Layers</div>
-              <div class="neuron-grid">
-                <div v-for="n in 32" :key="n" class="neuron"></div>
+              <div class="dense-label">
+                Dense FFN Layers
               </div>
-              <div class="activation-info" v-if="processing">
+              <div class="neuron-grid">
+                <div
+                  v-for="n in 32"
+                  :key="n"
+                  class="neuron"
+                />
+              </div>
+              <div
+                v-if="processing"
+                class="activation-info"
+              >
                 🔥 激活率: 100% (All Parameters)
               </div>
             </div>
           </div>
 
           <!-- MoE Visualization -->
-          <div v-else class="moe-visualization">
+          <div
+            v-else
+            class="moe-visualization"
+          >
             <!-- Router -->
             <div
               class="router-node"
               :class="{ active: processing && currentStep === 'router' }"
             >
-              <div class="router-label">Router (Token 分发)</div>
-              <div class="router-action" v-if="processing && currentToken">
+              <div class="router-label">
+                Router (Token 分发)
+              </div>
+              <div
+                v-if="processing && currentToken"
+                class="router-action"
+              >
                 Routing "{{ currentToken.text.trim() }}" → {{ experts[currentToken.expert].name }}
               </div>
             </div>
@@ -100,9 +131,9 @@
                   inactive: processing && currentStep === 'expert' && currentToken?.expert !== idx
                 }"
                 :style="{
-                   borderColor: processing && currentStep === 'expert' && currentToken?.expert === idx ? expert.color : ''
+                  borderColor: processing && currentStep === 'expert' && currentToken?.expert === idx ? expert.color : ''
                 }"
-              ></div>
+              />
             </div>
 
             <!-- Experts -->
@@ -116,14 +147,18 @@
                   inactive: processing && currentStep === 'expert' && currentToken?.expert !== idx
                 }"
                 :style="{
-                   borderColor: processing && currentStep === 'expert' && currentToken?.expert === idx ? expert.color : ''
+                  borderColor: processing && currentStep === 'expert' && currentToken?.expert === idx ? expert.color : ''
                 }"
               >
-                <div class="expert-icon">{{ expert.icon }}</div>
-                <div class="expert-name">{{ expert.name }}</div>
+                <div class="expert-icon">
+                  {{ expert.icon }}
+                </div>
+                <div class="expert-name">
+                  {{ expert.name }}
+                </div>
                 <div
-                  class="expert-status"
                   v-if="processing && currentStep === 'expert' && currentToken?.expert === idx"
+                  class="expert-status"
                   :style="{ color: expert.color }"
                 >
                   ⚡ Active
@@ -136,7 +171,9 @@
 
       <!-- Step 3: Output -->
       <div class="stage-section output-section">
-        <div class="section-label">3. 逐步生成 (Output Stream)</div>
+        <div class="section-label">
+          3. 逐步生成 (Output Stream)
+        </div>
         <div class="output-box">
           <span class="output-content">
             <span
@@ -146,16 +183,28 @@
               :style="{ color: architecture === 'moe' ? experts[token.expert].color : 'inherit' }"
               :title="architecture === 'moe' ? `Expert: ${experts[token.expert].name}` : ''"
             >{{ token.text }}</span>
-            <span v-if="processing" class="cursor">|</span>
+            <span
+              v-if="processing"
+              class="cursor"
+            >|</span>
           </span>
-          <div v-if="generatedTokens.length === 0 && !processing" class="placeholder">点击运行查看生成过程...</div>
+          <div
+            v-if="generatedTokens.length === 0 && !processing"
+            class="placeholder"
+          >
+            点击运行查看生成过程...
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Controls -->
     <div class="demo-controls">
-      <button class="run-btn" @click="runDemo" :disabled="processing">
+      <button
+        class="run-btn"
+        :disabled="processing"
+        @click="runDemo"
+      >
         {{ processing ? '正在生成 (Generating)...' : '▶️ 开始生成 (Run Generation)' }}
       </button>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/NextTokenPrediction.vue b/docs/.vitepress/theme/components/appendix/llm-intro/NextTokenPrediction.vue
index 49d892b..4280a7a 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/NextTokenPrediction.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/NextTokenPrediction.vue
@@ -17,13 +17,26 @@
     <div class="header">
       <div class="scene-selector">
         <label>Scenario / 场景:</label>
-        <select v-model="currentSceneKey" @change="resetScene">
-          <option value="en-fox">English: The quick brown...</option>
-          <option value="zh-ai">中文: 人工智能...</option>
-          <option value="code">Code: if (x > 0)...</option>
+        <select
+          v-model="currentSceneKey"
+          @change="resetScene"
+        >
+          <option value="en-fox">
+            English: The quick brown...
+          </option>
+          <option value="zh-ai">
+            中文: 人工智能...
+          </option>
+          <option value="code">
+            Code: if (x > 0)...
+          </option>
         </select>
       </div>
-      <button class="reset-btn" @click="resetScene" title="Reset">
+      <button
+        class="reset-btn"
+        title="Reset"
+        @click="resetScene"
+      >
         <span class="icon">↺</span>
       </button>
     </div>
@@ -34,9 +47,8 @@
           v-for="(token, index) in tokenizedContext"
           :key="index"
           class="context-token"
-          >{{ token }}</span
-        >
-        <span class="cursor"></span>
+        >{{ token }}</span>
+        <span class="cursor" />
       </div>
     </div>
 
@@ -55,16 +67,14 @@
         >
           <div class="candidate-info">
             <span class="candidate-text">"{{ candidate.text }}"</span>
-            <span class="candidate-prob"
-              >{{ (candidate.prob * 100).toFixed(1) }}%</span
-            >
+            <span class="candidate-prob">{{ (candidate.prob * 100).toFixed(1) }}%</span>
           </div>
           <div class="prob-bar-bg">
             <div
               class="prob-bar-fill"
               :style="{ width: `${candidate.prob * 100}%` }"
               :class="`rank-${index}`"
-            ></div>
+            />
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/RNNvsTransformer.vue b/docs/.vitepress/theme/components/appendix/llm-intro/RNNvsTransformer.vue
index 9111f51..eefce75 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/RNNvsTransformer.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/RNNvsTransformer.vue
@@ -16,7 +16,10 @@
 <template>
   <div class="arch-demo">
     <div class="control-tabs">
-      <button :class="{ active: mode === 'rnn' }" @click="mode = 'rnn'">
+      <button
+        :class="{ active: mode === 'rnn' }"
+        @click="mode = 'rnn'"
+      >
         🐌 RNN (Sequential)
       </button>
       <button
@@ -29,7 +32,10 @@
 
     <div class="visualization-area">
       <!-- RNN Visualization -->
-      <div v-if="mode === 'rnn'" class="rnn-viz">
+      <div
+        v-if="mode === 'rnn'"
+        class="rnn-viz"
+      >
         <div class="sequence-display">
           <div
             v-for="(word, idx) in rnnWords"
@@ -52,14 +58,21 @@
                 <div
                   class="memory-level"
                   :style="{ height: rnnMemoryStrength + '%' }"
-                ></div>
+                />
               </div>
             </div>
-            <div class="arrow-right">→</div>
-            <div class="output-box">Output: {{ rnnOutput }}</div>
+            <div class="arrow-right">
+              →
+            </div>
+            <div class="output-box">
+              Output: {{ rnnOutput }}
+            </div>
           </div>
           <div class="controls">
-            <button @click="playRnn" :disabled="isPlayingRnn">
+            <button
+              :disabled="isPlayingRnn"
+              @click="playRnn"
+            >
               {{ isPlayingRnn ? 'Processing...' : '▶ Play Sequence' }}
             </button>
           </div>
@@ -71,7 +84,10 @@
       </div>
 
       <!-- Transformer Visualization -->
-      <div v-else class="transformer-viz">
+      <div
+        v-else
+        class="transformer-viz"
+      >
         <div class="sentence-container">
           <div
             v-for="(word, idx) in transformerWords"
@@ -81,24 +97,30 @@
               hovered: hoveredWordIndex === idx,
               attended: getAttentionScore(hoveredWordIndex, idx) > 0
             }"
-            @mouseenter="hoveredWordIndex = idx"
-            @mouseleave="hoveredWordIndex = -1"
             :style="{
               backgroundColor: getAttentionColor(hoveredWordIndex, idx)
             }"
+            @mouseenter="hoveredWordIndex = idx"
+            @mouseleave="hoveredWordIndex = -1"
           >
             {{ word }}
           </div>
         </div>
 
-        <div class="attention-info" v-if="hoveredWordIndex !== -1">
+        <div
+          v-if="hoveredWordIndex !== -1"
+          class="attention-info"
+        >
           <p>
             Current Focus:
             <strong>"{{ transformerWords[hoveredWordIndex] }}"</strong>
           </p>
           <p class="sub-info">
             Paying attention to:
-            <span v-for="(attn, idx) in currentAttentions" :key="idx">
+            <span
+              v-for="(attn, idx) in currentAttentions"
+              :key="idx"
+            >
               <span v-if="attn.score > 0.01">
                 "{{ transformerWords[attn.idx] }}" ({{
                   Math.round(attn.score * 100)
@@ -107,14 +129,17 @@
             </span>
           </p>
         </div>
-        <div class="attention-info" v-else>
+        <div
+          v-else
+          class="attention-info"
+        >
           <p>👆 鼠标悬停在任意单词上，查看它在“关注”谁。</p>
         </div>
 
         <p class="desc-text">
           Transformer 一眼看完整个句子（并行）。Self-Attention
           机制让每个词都能直接“看见”其他词，无论距离多远。
-          <br />例如：悬停在 <strong>"it"</strong> 上，你会发现它强烈关注
+          <br>例如：悬停在 <strong>"it"</strong> 上，你会发现它强烈关注
           <strong>"animal"</strong>，因为它指代的就是 animal。
         </p>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/ThinkingModelDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/ThinkingModelDemo.vue
index a5da2d4..bbff028 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/ThinkingModelDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/ThinkingModelDemo.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="thinking-demo">
     <div class="mode-switch">
-      <button :class="{ active: mode === 'fast' }" @click="switchMode('fast')">
+      <button
+        :class="{ active: mode === 'fast' }"
+        @click="switchMode('fast')"
+      >
         ⚡️ 传统快思考 (System 1)
       </button>
-      <button :class="{ active: mode === 'slow' }" @click="switchMode('slow')">
+      <button
+        :class="{ active: mode === 'slow' }"
+        @click="switchMode('slow')"
+      >
         🧠 深度慢思考 (System 2)
       </button>
     </div>
@@ -17,11 +23,21 @@
 
       <div class="process-area">
         <!-- Fast Mode Visualization -->
-        <div v-if="mode === 'fast'" class="fast-track">
-          <div class="model-node">LLM</div>
-          <div class="arrow">➜</div>
+        <div
+          v-if="mode === 'fast'"
+          class="fast-track"
+        >
+          <div class="model-node">
+            LLM
+          </div>
+          <div class="arrow">
+            ➜
+          </div>
           <div class="output-box">
-            <div class="typing-effect" v-if="generating">
+            <div
+              v-if="generating"
+              class="typing-effect"
+            >
               {{ displayedOutput }}
             </div>
             <div v-else>
@@ -31,18 +47,37 @@
         </div>
 
         <!-- Slow Mode Visualization -->
-        <div v-else class="slow-track">
-          <div class="model-node">Thinking LLM</div>
-          <div class="arrow">➜</div>
+        <div
+          v-else
+          class="slow-track"
+        >
+          <div class="model-node">
+            Thinking LLM
+          </div>
+          <div class="arrow">
+            ➜
+          </div>
           <div class="output-container">
             <!-- Thinking Process -->
-            <div class="thought-bubble" :class="{ visible: showThoughts }">
-              <div class="bubble-header" @click="toggleThoughts">
+            <div
+              class="thought-bubble"
+              :class="{ visible: showThoughts }"
+            >
+              <div
+                class="bubble-header"
+                @click="toggleThoughts"
+              >
                 💭 思考过程 (Chain of Thought)
                 <span class="toggle-icon">{{ thoughtsOpen ? '▼' : '▶' }}</span>
               </div>
-              <div class="bubble-content" v-show="thoughtsOpen">
-                <div class="typing-effect-thought" v-if="generatingThoughts">
+              <div
+                v-show="thoughtsOpen"
+                class="bubble-content"
+              >
+                <div
+                  v-if="generatingThoughts"
+                  class="typing-effect-thought"
+                >
                   {{ displayedThoughts }}
                 </div>
                 <div v-else>
@@ -52,8 +87,14 @@
             </div>
 
             <!-- Final Answer -->
-            <div class="output-box final-answer" v-if="showFinalAnswer">
-              <div class="typing-effect" v-if="generatingFinal">
+            <div
+              v-if="showFinalAnswer"
+              class="output-box final-answer"
+            >
+              <div
+                v-if="generatingFinal"
+                class="typing-effect"
+              >
                 {{ displayedOutput }}
               </div>
               <div v-else>
@@ -66,12 +107,19 @@
     </div>
 
     <div class="controls">
-      <button class="run-btn" @click="runSimulation" :disabled="isRunning">
+      <button
+        class="run-btn"
+        :disabled="isRunning"
+        @click="runSimulation"
+      >
         {{ isRunning ? '生成中...' : '开始生成' }}
       </button>
     </div>
 
-    <div class="metrics" v-if="completed">
+    <div
+      v-if="completed"
+      class="metrics"
+    >
       <div class="metric-item">
         <span class="label">Token 消耗:</span>
         <span class="value">{{ mode === 'fast' ? '5' : '150' }} tokens</span>
@@ -82,7 +130,10 @@
       </div>
       <div class="metric-item">
         <span class="label">准确率:</span>
-        <span class="value" :class="mode === 'fast' ? 'bad' : 'good'">
+        <span
+          class="value"
+          :class="mode === 'fast' ? 'bad' : 'good'"
+        >
           {{ mode === 'fast' ? '❌ 错误' : '✅ 正确' }}
         </span>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizationDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizationDemo.vue
index b9397da..24fbf98 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizationDemo.vue
@@ -21,7 +21,7 @@
             v-model="inputText"
             rows="3"
             placeholder="Type something to see how AI reads it..."
-          ></textarea>
+          />
         </div>
 
         <div class="settings-group">
@@ -31,21 +31,33 @@
               class="radio-option"
               :class="{ active: algorithm === 'bpe' }"
             >
-              <input type="radio" v-model="algorithm" value="bpe" />
+              <input
+                v-model="algorithm"
+                type="radio"
+                value="bpe"
+              >
               <span>BPE (GPT-4)</span>
             </label>
             <label
               class="radio-option"
               :class="{ active: algorithm === 'word' }"
             >
-              <input type="radio" v-model="algorithm" value="word" />
+              <input
+                v-model="algorithm"
+                type="radio"
+                value="word"
+              >
               <span>Word (Legacy)</span>
             </label>
             <label
               class="radio-option"
               :class="{ active: algorithm === 'char' }"
             >
-              <input type="radio" v-model="algorithm" value="char" />
+              <input
+                v-model="algorithm"
+                type="radio"
+                value="char"
+              >
               <span>Character (Raw)</span>
             </label>
           </div>
@@ -65,7 +77,9 @@
     </div>
 
     <!-- Tokenizer Process Visualization -->
-    <div class="tokenizer-arrow">⬇</div>
+    <div class="tokenizer-arrow">
+      ⬇
+    </div>
 
     <div class="visualization-area">
       <div class="token-list">
@@ -79,8 +93,11 @@
         >
           <span class="token-text">{{ token.text }}</span>
           <span class="token-id">{{ token.id }}</span>
-          <div class="tooltip" v-if="hoverIndex === index">
-            ID: {{ token.id }}<br />
+          <div
+            v-if="hoverIndex === index"
+            class="tooltip"
+          >
+            ID: {{ token.id }}<br>
             Type: {{ token.type }}
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue
index 049599c..366cd6c 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/TokenizerToMatrix.vue
@@ -20,7 +20,7 @@
         placeholder="输入一段文本..."
         class="text-input"
         :disabled="currentStep > 0"
-      />
+      >
       <div class="step-controls">
         <button
           class="step-btn prev"
@@ -29,7 +29,9 @@
         >
           ← 上一步
         </button>
-        <div class="step-indicator">Step {{ currentStep + 1 }} / 4</div>
+        <div class="step-indicator">
+          Step {{ currentStep + 1 }} / 4
+        </div>
         <button
           class="step-btn next"
           :disabled="currentStep === 3"
@@ -42,8 +44,13 @@
 
     <div class="visualization-stage">
       <!-- Step 1: Tokenization -->
-      <div class="stage-content" v-if="currentStep === 0">
-        <h3 class="stage-title">Step 1: Tokenization (分词)</h3>
+      <div
+        v-if="currentStep === 0"
+        class="stage-content"
+      >
+        <h3 class="stage-title">
+          Step 1: Tokenization (分词)
+        </h3>
         <p class="stage-desc">
           计算机首先将文本切分为最小的语义单位（Token）。
           <span
@@ -71,24 +78,37 @@
       </div>
 
       <!-- Step 2: ID Mapping -->
-      <div class="stage-content" v-if="currentStep === 1">
-        <h3 class="stage-title">Step 2: ID Mapping (索引映射)</h3>
+      <div
+        v-if="currentStep === 1"
+        class="stage-content"
+      >
+        <h3 class="stage-title">
+          Step 2: ID Mapping (索引映射)
+        </h3>
         <p class="stage-desc">
           在词表（Vocabulary）中查找每个 Token 对应的唯一数字 ID。
         </p>
         <div class="mapping-container">
-          <div v-for="(token, idx) in tokens" :key="idx" class="mapping-row">
+          <div
+            v-for="(token, idx) in tokens"
+            :key="idx"
+            class="mapping-row"
+          >
             <div
               class="token-box sm"
               :style="{ borderColor: getTokenColor(idx) }"
             >
               {{ token.text }}
             </div>
-            <div class="arrow">→</div>
+            <div class="arrow">
+              →
+            </div>
             <div class="vocab-lookup">
               <span class="vocab-label">Vocab Lookup</span>
             </div>
-            <div class="arrow">→</div>
+            <div class="arrow">
+              →
+            </div>
             <div class="id-box">
               {{ token.id }}
             </div>
@@ -97,15 +117,28 @@
       </div>
 
       <!-- Step 3: Embedding Lookup -->
-      <div class="stage-content" v-if="currentStep === 2">
-        <h3 class="stage-title">Step 3: Embedding Lookup (向量查表)</h3>
+      <div
+        v-if="currentStep === 2"
+        class="stage-content"
+      >
+        <h3 class="stage-title">
+          Step 3: Embedding Lookup (向量查表)
+        </h3>
         <p class="stage-desc">
           每个 ID 对应一个预训练好的高维向量（这里简化为 4 维）。
         </p>
         <div class="lookup-container">
-          <div v-for="(token, idx) in tokens" :key="idx" class="lookup-row">
-            <div class="id-box">{{ token.id }}</div>
-            <div class="arrow">→</div>
+          <div
+            v-for="(token, idx) in tokens"
+            :key="idx"
+            class="lookup-row"
+          >
+            <div class="id-box">
+              {{ token.id }}
+            </div>
+            <div class="arrow">
+              →
+            </div>
             <div class="vector-row">
               <span class="bracket">[</span>
               <span
@@ -122,16 +155,25 @@
       </div>
 
       <!-- Step 4: Input Matrix -->
-      <div class="stage-content" v-if="currentStep === 3">
-        <h3 class="stage-title">Step 4: Matrix Construction (构建矩阵)</h3>
+      <div
+        v-if="currentStep === 3"
+        class="stage-content"
+      >
+        <h3 class="stage-title">
+          Step 4: Matrix Construction (构建矩阵)
+        </h3>
         <p class="stage-desc">
           所有向量堆叠在一起，形成了输入矩阵（Shape: [Batch, Seq_Len,
           Dim]）。这就是 LLM 真正“看见”的东西。
         </p>
         <div class="matrix-container">
-          <div class="matrix-bracket left"></div>
+          <div class="matrix-bracket left" />
           <div class="matrix-grid">
-            <div v-for="(token, rIdx) in tokens" :key="rIdx" class="matrix-row">
+            <div
+              v-for="(token, rIdx) in tokens"
+              :key="rIdx"
+              class="matrix-row"
+            >
               <div
                 v-for="(val, cIdx) in token.vector"
                 :key="cIdx"
@@ -143,8 +185,10 @@
               </div>
             </div>
           </div>
-          <div class="matrix-bracket right"></div>
-          <div class="matrix-label">Shape: ({{ tokens.length }}, 4)</div>
+          <div class="matrix-bracket right" />
+          <div class="matrix-label">
+            Shape: ({{ tokens.length }}, 4)
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/llm-intro/TrainingInferenceDemo.vue b/docs/.vitepress/theme/components/appendix/llm-intro/TrainingInferenceDemo.vue
index 3591ed8..6938b13 100644
--- a/docs/.vitepress/theme/components/appendix/llm-intro/TrainingInferenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/llm-intro/TrainingInferenceDemo.vue
@@ -19,11 +19,13 @@
 
     <div class="demo-content">
       <!-- Tab 1: 基础能力 - 文本续写 -->
-      <div v-if="currentTab === 'completion'" class="mode-view">
+      <div
+        v-if="currentTab === 'completion'"
+        class="mode-view"
+      >
         <div class="desc-box">
           <p>
-            <strong>LLM 的本能是“续写”</strong
-            >：它并不懂对话，只是根据上文猜下一个词。
+            <strong>LLM 的本能是“续写”</strong>：它并不懂对话，只是根据上文猜下一个词。
           </p>
         </div>
 
@@ -31,15 +33,15 @@
           <div class="input-row">
             <span class="prompt-label">Prompt (提示词):</span>
             <input
-              type="text"
               v-model="completionInput"
+              type="text"
               placeholder="Enter text..."
               :disabled="isGenerating"
-            />
+            >
             <button
               class="primary-btn"
-              @click="runCompletion"
               :disabled="isGenerating || !completionInput"
+              @click="runCompletion"
             >
               ✨ Generate
             </button>
@@ -48,17 +50,26 @@
           <div class="result-box">
             <span class="user-text">{{ completionInput }}</span>
             <span class="ai-text typing">{{ completionOutput }}</span>
-            <span v-if="isGenerating" class="cursor">|</span>
+            <span
+              v-if="isGenerating"
+              class="cursor"
+            >|</span>
           </div>
 
-          <div class="explanation" v-if="completionOutput">
+          <div
+            v-if="completionOutput"
+            class="explanation"
+          >
             💡 模型在计算概率：<code>P(blue | The sky is) = 90%</code>
           </div>
         </div>
       </div>
 
       <!-- Tab 2: 技巧 - 对话原理 (Template) -->
-      <div v-if="currentTab === 'chat'" class="mode-view">
+      <div
+        v-if="currentTab === 'chat'"
+        class="mode-view"
+      >
         <div class="desc-box">
           <p>
             <strong>如何让它对话？</strong>
@@ -68,34 +79,54 @@
 
         <div class="chat-container">
           <div class="chat-ui-half">
-            <div class="half-label">用户看到的 (Chat UI)</div>
+            <div class="half-label">
+              用户看到的 (Chat UI)
+            </div>
             <div class="chat-messages">
-              <div class="msg bot">我是 AI 助手，你好！</div>
-              <div class="msg user">{{ chatInput || '...' }}</div>
-              <div class="msg bot" v-if="chatOutput">{{ chatOutput }}</div>
+              <div class="msg bot">
+                我是 AI 助手，你好！
+              </div>
+              <div class="msg user">
+                {{ chatInput || '...' }}
+              </div>
+              <div
+                v-if="chatOutput"
+                class="msg bot"
+              >
+                {{ chatOutput }}
+              </div>
             </div>
             <div class="input-area">
               <input
                 v-model="chatInput"
                 placeholder="Say hello..."
                 @keyup.enter="runChat"
-              />
-              <button @click="runChat" :disabled="isGenerating">Send</button>
+              >
+              <button
+                :disabled="isGenerating"
+                @click="runChat"
+              >
+                Send
+              </button>
             </div>
           </div>
 
-          <div class="arrow-divider">➡️ 转换 ➡️</div>
+          <div class="arrow-divider">
+            ➡️ 转换 ➡️
+          </div>
 
           <div class="model-view-half">
-            <div class="half-label">模型看到的 (Raw Prompt)</div>
+            <div class="half-label">
+              模型看到的 (Raw Prompt)
+            </div>
             <div class="raw-prompt">
-              <span class="sys-tag">&lt;|system|&gt;</span><br />
-              You are a helpful assistant.<br />
-              <span class="bot-tag">&lt;|assistant|&gt;</span><br />
-              我是 AI 助手，你好！<br />
-              <span class="user-tag">&lt;|user|&gt;</span><br />
-              {{ chatInput || '...' }}<br />
-              <span class="bot-tag">&lt;|assistant|&gt;</span><br />
+              <span class="sys-tag">&lt;|system|&gt;</span><br>
+              You are a helpful assistant.<br>
+              <span class="bot-tag">&lt;|assistant|&gt;</span><br>
+              我是 AI 助手，你好！<br>
+              <span class="user-tag">&lt;|user|&gt;</span><br>
+              {{ chatInput || '...' }}<br>
+              <span class="bot-tag">&lt;|assistant|&gt;</span><br>
               <span class="ai-text typing">{{ chatOutput }}</span>
             </div>
           </div>
@@ -103,7 +134,10 @@
       </div>
 
       <!-- Tab 3: 原理 - 训练 (Training) -->
-      <div v-if="currentTab === 'train'" class="mode-view">
+      <div
+        v-if="currentTab === 'train'"
+        class="mode-view"
+      >
         <div class="desc-box">
           <p>
             <strong>Training (训练原理)</strong>:
@@ -116,26 +150,27 @@
           <!-- 左侧：训练过程可视化 -->
           <div class="train-process-panel card-panel">
             <div class="panel-header">
-              <span class="step-badge"
-                >Step {{ currentStep }}/{{ totalSteps }}</span
-              >
+              <span class="step-badge">Step {{ currentStep }}/{{ totalSteps }}</span>
               <span class="panel-title">Training Process</span>
             </div>
 
             <div class="data-flow">
               <!-- Input Section -->
               <div class="flow-stage input-stage">
-                <div class="stage-label">1. Input (输入)</div>
+                <div class="stage-label">
+                  1. Input (输入)
+                </div>
                 <div
                   v-if="currentStep === 0"
                   class="content-box input placeholder"
                 >
                   <span class="text-content">点击下方按钮开始训练</span>
                 </div>
-                <div v-else class="content-box input">
-                  <span class="text-content"
-                    >"{{ currentTrainData.input }}"</span
-                  >
+                <div
+                  v-else
+                  class="content-box input"
+                >
+                  <span class="text-content">"{{ currentTrainData.input }}"</span>
                 </div>
                 <div class="matrix-viz">
                   <span class="matrix-label">Embedding:</span>
@@ -148,20 +183,30 @@
                         opacity: inputEmbeddingOpacities[n - 1] ?? 0.6,
                         transform: `scaleY(${inputEmbeddingOpacities[n - 1] ?? 1})`
                       }"
-                    ></span>
+                    />
                   </div>
                 </div>
               </div>
 
-              <div v-if="currentStep > 0" class="process-arrow">
-                <div class="arrow-line"></div>
-                <div class="process-badge">Model Matrix Ops</div>
-                <div class="arrow-line"></div>
+              <div
+                v-if="currentStep > 0"
+                class="process-arrow"
+              >
+                <div class="arrow-line" />
+                <div class="process-badge">
+                  Model Matrix Ops
+                </div>
+                <div class="arrow-line" />
               </div>
 
               <!-- Prediction vs Target Section -->
-              <div v-if="currentStep > 0" class="flow-stage comparison">
-                <div class="stage-label">2. Prediction vs Target</div>
+              <div
+                v-if="currentStep > 0"
+                class="flow-stage comparison"
+              >
+                <div class="stage-label">
+                  2. Prediction vs Target
+                </div>
 
                 <div class="compare-row">
                   <div class="compare-item">
@@ -181,12 +226,14 @@
                           :style="{
                             opacity: predEmbeddingOpacities[n - 1] ?? 0.6
                           }"
-                        ></span>
+                        />
                       </div>
                     </div>
                   </div>
 
-                  <div class="vs-badge">VS</div>
+                  <div class="vs-badge">
+                    VS
+                  </div>
 
                   <div class="compare-item">
                     <span class="sub-label">Target</span>
@@ -202,7 +249,7 @@
                           :style="{
                             opacity: targetEmbeddingOpacities[n - 1] ?? 0.9
                           }"
-                        ></span>
+                        />
                       </div>
                     </div>
                   </div>
@@ -210,14 +257,16 @@
               </div>
 
               <!-- Loss Section -->
-              <div v-if="currentStep > 0" class="flow-stage loss-stage">
+              <div
+                v-if="currentStep > 0"
+                class="flow-stage loss-stage"
+              >
                 <div class="stage-header">
                   <span class="stage-label">3. Loss Calculation</span>
                   <span
                     class="loss-val-badge"
                     :style="{ backgroundColor: getLossColor(currentLoss) }"
-                    >Loss: {{ currentLoss.toFixed(4) }}</span
-                  >
+                  >Loss: {{ currentLoss.toFixed(4) }}</span>
                 </div>
                 <div class="loss-bar-container">
                   <div class="loss-bar-bg">
@@ -227,7 +276,7 @@
                         width: Math.min((currentLoss / 3) * 100, 100) + '%',
                         backgroundColor: getLossColor(currentLoss)
                       }"
-                    ></div>
+                    />
                   </div>
                   <div
                     class="loss-feedback"
@@ -253,7 +302,10 @@
               <span class="panel-title">Training Metrics</span>
             </div>
             <div class="chart-container">
-              <svg viewBox="0 0 300 150" class="loss-chart">
+              <svg
+                viewBox="0 0 300 150"
+                class="loss-chart"
+              >
                 <!-- Background Grid -->
                 <defs>
                   <pattern
@@ -289,7 +341,11 @@
                     />
                   </linearGradient>
                 </defs>
-                <rect width="100%" height="100%" fill="url(#grid)" />
+                <rect
+                  width="100%"
+                  height="100%"
+                  fill="url(#grid)"
+                />
 
                 <!-- Axes -->
                 <line
@@ -336,14 +392,17 @@
             <div class="log-console-container">
               <div class="console-header">
                 <div class="window-dots">
-                  <span class="dot red"></span>
-                  <span class="dot yellow"></span>
-                  <span class="dot green"></span>
+                  <span class="dot red" />
+                  <span class="dot yellow" />
+                  <span class="dot green" />
                 </div>
                 <span class="console-title">training_log.txt</span>
               </div>
               <div class="log-console">
-                <div v-if="trainingLogs.length === 0" class="log-placeholder">
+                <div
+                  v-if="trainingLogs.length === 0"
+                  class="log-placeholder"
+                >
                   Waiting for training to start...
                 </div>
                 <div
@@ -351,24 +410,18 @@
                   :key="idx"
                   class="log-item"
                 >
-                  <span class="log-step"
-                    >[Step {{ String(log.step).padStart(2, '0') }}]</span
-                  >
+                  <span class="log-step">[Step {{ String(log.step).padStart(2, '0') }}]</span>
                   <span
                     class="log-loss"
                     :style="{ color: getLossColor(log.loss) }"
-                    >Loss={{ log.loss.toFixed(2) }}</span
-                  >
-                  <span class="log-detail"
-                    >{{ log.input }} ->
+                  >Loss={{ log.loss.toFixed(2) }}</span>
+                  <span class="log-detail">{{ log.input }} ->
                     <span
                       :class="{
                         'text-green': log.pred === log.target,
                         'text-red': log.pred !== log.target
                       }"
-                      >{{ log.pred }}</span
-                    ></span
-                  >
+                    >{{ log.pred }}</span></span>
                 </div>
               </div>
             </div>
@@ -378,21 +431,31 @@
         <div class="action-bar">
           <button
             class="train-btn"
-            @click="handleTrainClick"
             :class="{ 'is-restart': currentStep >= totalSteps }"
+            @click="handleTrainClick"
           >
-            <span class="btn-icon" v-if="currentStep === 0">🚀</span>
-            <span class="btn-icon" v-else-if="currentStep >= totalSteps"
-              >🔄</span
-            >
-            <span class="btn-icon" v-else>▶️</span>
+            <span
+              v-if="currentStep === 0"
+              class="btn-icon"
+            >🚀</span>
+            <span
+              v-else-if="currentStep >= totalSteps"
+              class="btn-icon"
+            >🔄</span>
+            <span
+              v-else
+              class="btn-icon"
+            >▶️</span>
             {{ trainButtonText }}
           </button>
         </div>
       </div>
 
       <!-- Tab 4: 进阶 - 微调与对齐 (RLHF) -->
-      <div v-if="currentTab === 'rlhf'" class="mode-view">
+      <div
+        v-if="currentTab === 'rlhf'"
+        class="mode-view"
+      >
         <div class="desc-box">
           <p>
             <strong>从“胡说”到“好助手”</strong>：通过 RLHF (人类反馈)
@@ -408,23 +471,36 @@
                 class="radio-option"
                 :class="{ active: alignmentState === 'base' }"
               >
-                <input type="radio" v-model="alignmentState" value="base" />
+                <input
+                  v-model="alignmentState"
+                  type="radio"
+                  value="base"
+                >
                 Base Model (未对齐)
               </label>
               <label
                 class="radio-option"
                 :class="{ active: alignmentState === 'aligned' }"
               >
-                <input type="radio" v-model="alignmentState" value="aligned" />
+                <input
+                  v-model="alignmentState"
+                  type="radio"
+                  value="aligned"
+                >
                 Aligned Model (已对齐)
               </label>
             </div>
           </div>
 
           <div class="scenario">
-            <div class="user-query">User: "如何制造混乱？"</div>
+            <div class="user-query">
+              User: "如何制造混乱？"
+            </div>
 
-            <div class="model-response" :class="alignmentState">
+            <div
+              class="model-response"
+              :class="alignmentState"
+            >
               <div class="avatar">
                 {{ alignmentState === 'base' ? '🤪' : '🤖' }}
               </div>
@@ -439,10 +515,14 @@
             </div>
 
             <div class="analysis">
-              <span v-if="alignmentState === 'base'" class="bad-tag"
-                >⚠️ Unsafe / Not Helpful</span
-              >
-              <span v-else class="good-tag">✅ Safe & Helpful</span>
+              <span
+                v-if="alignmentState === 'base'"
+                class="bad-tag"
+              >⚠️ Unsafe / Not Helpful</span>
+              <span
+                v-else
+                class="good-tag"
+              >✅ Safe & Helpful</span>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
index c31fd4e..cbf7582 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/AutoScalingDemo.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="auto-scaling-demo">
     <div class="header">
-      <div class="title">自动扩缩容</div>
-      <div class="subtitle">基于CPU、内存、QPS的智能弹性伸缩</div>
+      <div class="title">
+        自动扩缩容
+      </div>
+      <div class="subtitle">
+        基于CPU、内存、QPS的智能弹性伸缩
+      </div>
     </div>
 
     <!-- 指标选择器 -->
     <div class="metric-selector">
-      <div class="selector-label">扩容指标：</div>
+      <div class="selector-label">
+        扩容指标：
+      </div>
       <div class="selector-buttons">
         <button
           v-for="metric in metrics"
@@ -27,14 +33,17 @@
       <div class="dashboard-header">
         <span class="dashboard-title">实时监控</span>
         <span class="refresh-indicator">
-          <span class="live-dot"></span>
+          <span class="live-dot" />
           实时
         </span>
       </div>
 
       <div class="metrics-grid">
         <!-- CPU使用率 -->
-        <div class="metric-card" :class="{ warning: cpuUsage > 70, danger: cpuUsage > 90 }">
+        <div
+          class="metric-card"
+          :class="{ warning: cpuUsage > 70, danger: cpuUsage > 90 }"
+        >
           <div class="metric-header">
             <span class="metric-icon">💻</span>
             <span class="metric-name">CPU使用率</span>
@@ -44,7 +53,10 @@
             <span class="value-unit">%</span>
           </div>
           <div class="metric-progress">
-            <div class="progress-bar" :style="{ width: cpuUsage + '%', background: getUsageColor(cpuUsage) }"></div>
+            <div
+              class="progress-bar"
+              :style="{ width: cpuUsage + '%', background: getUsageColor(cpuUsage) }"
+            />
           </div>
           <div class="metric-threshold">
             <span>扩容阈值: 70%</span>
@@ -53,7 +65,10 @@
         </div>
 
         <!-- 内存使用率 -->
-        <div class="metric-card" :class="{ warning: memoryUsage > 75, danger: memoryUsage > 90 }">
+        <div
+          class="metric-card"
+          :class="{ warning: memoryUsage > 75, danger: memoryUsage > 90 }"
+        >
           <div class="metric-header">
             <span class="metric-icon">🧠</span>
             <span class="metric-name">内存使用率</span>
@@ -63,7 +78,10 @@
             <span class="value-unit">%</span>
           </div>
           <div class="metric-progress">
-            <div class="progress-bar" :style="{ width: memoryUsage + '%', background: getUsageColor(memoryUsage) }"></div>
+            <div
+              class="progress-bar"
+              :style="{ width: memoryUsage + '%', background: getUsageColor(memoryUsage) }"
+            />
           </div>
           <div class="metric-threshold">
             <span>扩容阈值: 75%</span>
@@ -82,7 +100,10 @@
             <span class="value-unit">req/s</span>
           </div>
           <div class="metric-chart">
-            <svg viewBox="0 0 200 40" class="sparkline">
+            <svg
+              viewBox="0 0 200 40"
+              class="sparkline"
+            >
               <polyline
                 fill="none"
                 stroke="var(--vp-c-brand)"
@@ -123,7 +144,10 @@
               {{ i }}
             </div>
           </div>
-          <div v-if="scaleReason" class="scale-reason">
+          <div
+            v-if="scaleReason"
+            class="scale-reason"
+          >
             <span class="reason-icon">{{ scaleReason.includes('扩容') ? '📈' : '📉' }}</span>
             <span class="reason-text">{{ scaleReason }}</span>
           </div>
@@ -144,46 +168,70 @@
           class="history-item"
           :class="{ scaleOut: record.type === '缩容' }"
         >
-          <div class="item-icon">{{ record.type === '扩容' ? '📈' : '📉' }}</div>
+          <div class="item-icon">
+            {{ record.type === '扩容' ? '📈' : '📉' }}
+          </div>
           <div class="item-details">
             <div class="item-action">
               {{ record.type }}: {{ record.from }} → {{ record.to }} 实例
             </div>
-            <div class="item-reason">{{ record.reason }}</div>
+            <div class="item-reason">
+              {{ record.reason }}
+            </div>
+          </div>
+          <div class="item-time">
+            {{ record.time }}
           </div>
-          <div class="item-time">{{ record.time }}</div>
         </div>
       </div>
     </div>
 
     <!-- 最佳实践 -->
     <div class="best-practices">
-      <div class="practices-title">自动扩缩容最佳实践</div>
+      <div class="practices-title">
+        自动扩缩容最佳实践
+      </div>
       <div class="practices-grid">
         <div class="practice-card">
-          <div class="practice-icon">⏱️</div>
-          <div class="practice-title">冷却时间</div>
+          <div class="practice-icon">
+            ⏱️
+          </div>
+          <div class="practice-title">
+            冷却时间
+          </div>
           <div class="practice-desc">
             设置适当的冷却时间（通常3-5分钟），避免扩缩容操作过于频繁导致的震荡
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">📊</div>
-          <div class="practice-title">多指标综合</div>
+          <div class="practice-icon">
+            📊
+          </div>
+          <div class="practice-title">
+            多指标综合
+          </div>
           <div class="practice-desc">
             不要依赖单一指标，结合CPU、内存、QPS、连接数等多维度进行综合判断
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">🎯</div>
-          <div class="practice-title">目标利用率</div>
+          <div class="practice-icon">
+            🎯
+          </div>
+          <div class="practice-title">
+            目标利用率
+          </div>
           <div class="practice-desc">
             设置合理的资源目标利用率（如70%），预留足够的缓冲应对突发流量
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">⚡</div>
-          <div class="practice-title">快速扩容</div>
+          <div class="practice-icon">
+            ⚡
+          </div>
+          <div class="practice-title">
+            快速扩容
+          </div>
           <div class="practice-desc">
             扩容操作应该比缩容更激进，确保系统能快速应对流量增长
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
index 0402e48..5de9e15 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/BlueGreenDeploymentDemo.vue
@@ -1,17 +1,30 @@
 <template>
   <div class="blue-green-deployment-demo">
     <div class="header">
-      <div class="title">蓝绿部署</div>
-      <div class="subtitle">零停机发布的经典策略，两套环境瞬间切换</div>
+      <div class="title">
+        蓝绿部署
+      </div>
+      <div class="subtitle">
+        零停机发布的经典策略，两套环境瞬间切换
+      </div>
     </div>
 
     <!-- 部署状态控制 -->
     <div class="deployment-control">
       <div class="status-display">
-        <div class="status-item" :class="{ active: currentEnv === 'blue' }">
-          <div class="status-icon">🔵</div>
-          <div class="status-label">蓝环境</div>
-          <div class="status-version">v{{ blueVersion }}</div>
+        <div
+          class="status-item"
+          :class="{ active: currentEnv === 'blue' }"
+        >
+          <div class="status-icon">
+            🔵
+          </div>
+          <div class="status-label">
+            蓝环境
+          </div>
+          <div class="status-version">
+            v{{ blueVersion }}
+          </div>
           <div class="status-traffic">
             {{ currentEnv === 'blue' ? '100%' : '0%' }} 流量
           </div>
@@ -20,28 +33,46 @@
         <div class="switch-control">
           <button
             class="switch-btn"
-            @click="toggleEnvironment"
             :disabled="isSwitching"
             :class="{ switching: isSwitching }"
+            @click="toggleEnvironment"
           >
             <span v-if="!isSwitching">
               {{ currentEnv === 'blue' ? '切换到绿环境 →' : '← 切换到蓝环境' }}
             </span>
-            <span v-else class="switching-text">
-              <span class="spinner"></span>
+            <span
+              v-else
+              class="switching-text"
+            >
+              <span class="spinner" />
               切换中...
             </span>
           </button>
 
-          <div class="progress-bar" v-if="isSwitching">
-            <div class="progress-fill" :style="{ width: switchProgress + '%' }"></div>
+          <div
+            v-if="isSwitching"
+            class="progress-bar"
+          >
+            <div
+              class="progress-fill"
+              :style="{ width: switchProgress + '%' }"
+            />
           </div>
         </div>
 
-        <div class="status-item" :class="{ active: currentEnv === 'green' }">
-          <div class="status-icon">🟢</div>
-          <div class="status-label">绿环境</div>
-          <div class="status-version">v{{ greenVersion }}</div>
+        <div
+          class="status-item"
+          :class="{ active: currentEnv === 'green' }"
+        >
+          <div class="status-icon">
+            🟢
+          </div>
+          <div class="status-label">
+            绿环境
+          </div>
+          <div class="status-version">
+            v{{ greenVersion }}
+          </div>
           <div class="status-traffic">
             {{ currentEnv === 'green' ? '100%' : '0%' }} 流量
           </div>
@@ -52,24 +83,40 @@
     <!-- 架构可视化 -->
     <div class="architecture-view">
       <div class="layer users">
-        <div class="layer-title">用户流量</div>
+        <div class="layer-title">
+          用户流量
+        </div>
         <div class="users-row">
-          <div v-for="i in 5" :key="i" class="user-avatar" :class="{ active: isUserActive(i) }">
+          <div
+            v-for="i in 5"
+            :key="i"
+            class="user-avatar"
+            :class="{ active: isUserActive(i) }"
+          >
             👤
           </div>
         </div>
       </div>
 
-      <div class="arrow-down">↓</div>
+      <div class="arrow-down">
+        ↓
+      </div>
 
       <div class="layer load-balancer">
         <div class="lb-box">
-          <div class="lb-icon">⚖️</div>
+          <div class="lb-icon">
+            ⚖️
+          </div>
           <div class="lb-info">
-            <div class="lb-title">负载均衡器</div>
+            <div class="lb-title">
+              负载均衡器
+            </div>
             <div class="lb-status">
               当前指向:
-              <span class="env-badge" :class="currentEnv">
+              <span
+                class="env-badge"
+                :class="currentEnv"
+              >
                 {{ currentEnv === 'blue' ? '🔵 蓝环境' : '🟢 绿环境' }}
               </span>
             </div>
@@ -77,12 +124,17 @@
         </div>
       </div>
 
-      <div class="arrow-down">↓</div>
+      <div class="arrow-down">
+        ↓
+      </div>
 
       <div class="layer environments">
         <div class="env-row">
           <!-- 蓝环境 -->
-          <div class="env-box" :class="{ active: currentEnv === 'blue', standby: currentEnv === 'green' }">
+          <div
+            class="env-box"
+            :class="{ active: currentEnv === 'blue', standby: currentEnv === 'green' }"
+          >
             <div class="env-header">
               <span class="env-icon">🔵</span>
               <span class="env-name">蓝环境</span>
@@ -90,10 +142,18 @@
             </div>
             <div class="env-content">
               <div class="server-list">
-                <div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('blue', i) }">
+                <div
+                  v-for="i in 3"
+                  :key="i"
+                  class="server-item"
+                  :class="{ busy: isServerBusy('blue', i) }"
+                >
                   <span class="server-icon">🖥️</span>
                   <span class="server-name">B{{ i }}</span>
-                  <span class="server-status" :class="getServerStatus('blue', i)">
+                  <span
+                    class="server-status"
+                    :class="getServerStatus('blue', i)"
+                  >
                     {{ getServerStatus('blue', i) === 'healthy' ? '●' : '○' }}
                   </span>
                 </div>
@@ -102,18 +162,27 @@
             <div class="env-footer">
               <div class="traffic-indicator">
                 <span class="indicator-label">流量:</span>
-                <span class="indicator-value" :class="{ active: currentEnv === 'blue' }">
+                <span
+                  class="indicator-value"
+                  :class="{ active: currentEnv === 'blue' }"
+                >
                   {{ currentEnv === 'blue' ? '100%' : '0%' }}
                 </span>
               </div>
-              <div class="status-badge" :class="currentEnv === 'blue' ? 'active' : 'standby'">
+              <div
+                class="status-badge"
+                :class="currentEnv === 'blue' ? 'active' : 'standby'"
+              >
                 {{ currentEnv === 'blue' ? '生产环境' : '待命' }}
               </div>
             </div>
           </div>
 
           <!-- 绿环境 -->
-          <div class="env-box" :class="{ active: currentEnv === 'green', standby: currentEnv === 'blue' }">
+          <div
+            class="env-box"
+            :class="{ active: currentEnv === 'green', standby: currentEnv === 'blue' }"
+          >
             <div class="env-header">
               <span class="env-icon">🟢</span>
               <span class="env-name">绿环境</span>
@@ -121,10 +190,18 @@
             </div>
             <div class="env-content">
               <div class="server-list">
-                <div v-for="i in 3" :key="i" class="server-item" :class="{ busy: isServerBusy('green', i) }">
+                <div
+                  v-for="i in 3"
+                  :key="i"
+                  class="server-item"
+                  :class="{ busy: isServerBusy('green', i) }"
+                >
                   <span class="server-icon">🖥️</span>
                   <span class="server-name">G{{ i }}</span>
-                  <span class="server-status" :class="getServerStatus('green', i)">
+                  <span
+                    class="server-status"
+                    :class="getServerStatus('green', i)"
+                  >
                     {{ getServerStatus('green', i) === 'healthy' ? '●' : '○' }}
                   </span>
                 </div>
@@ -133,11 +210,17 @@
             <div class="env-footer">
               <div class="traffic-indicator">
                 <span class="indicator-label">流量:</span>
-                <span class="indicator-value" :class="{ active: currentEnv === 'green' }">
+                <span
+                  class="indicator-value"
+                  :class="{ active: currentEnv === 'green' }"
+                >
                   {{ currentEnv === 'green' ? '100%' : '0%' }}
                 </span>
               </div>
-              <div class="status-badge" :class="currentEnv === 'green' ? 'active' : 'standby'">
+              <div
+                class="status-badge"
+                :class="currentEnv === 'green' ? 'active' : 'standby'"
+              >
                 {{ currentEnv === 'green' ? '生产环境' : '待命' }}
               </div>
             </div>
@@ -148,37 +231,81 @@
 
     <!-- 部署流程说明 -->
     <div class="deployment-process">
-      <div class="process-title">蓝绿部署流程</div>
+      <div class="process-title">
+        蓝绿部署流程
+      </div>
       <div class="process-steps">
-        <div class="step" :class="{ active: deploymentStep >= 1 }">
-          <div class="step-number">1</div>
+        <div
+          class="step"
+          :class="{ active: deploymentStep >= 1 }"
+        >
+          <div class="step-number">
+            1
+          </div>
           <div class="step-content">
-            <div class="step-title">绿环境部署</div>
-            <div class="step-desc">在绿环境部署新版本，进行冒烟测试</div>
+            <div class="step-title">
+              绿环境部署
+            </div>
+            <div class="step-desc">
+              在绿环境部署新版本，进行冒烟测试
+            </div>
           </div>
         </div>
-        <div class="step-arrow">→</div>
-        <div class="step" :class="{ active: deploymentStep >= 2 }">
-          <div class="step-number">2</div>
+        <div class="step-arrow">
+          →
+        </div>
+        <div
+          class="step"
+          :class="{ active: deploymentStep >= 2 }"
+        >
+          <div class="step-number">
+            2
+          </div>
           <div class="step-content">
-            <div class="step-title">切换流量</div>
-            <div class="step-desc">将负载均衡器指向绿环境，流量瞬间切换</div>
+            <div class="step-title">
+              切换流量
+            </div>
+            <div class="step-desc">
+              将负载均衡器指向绿环境，流量瞬间切换
+            </div>
           </div>
         </div>
-        <div class="step-arrow">→</div>
-        <div class="step" :class="{ active: deploymentStep >= 3 }">
-          <div class="step-number">3</div>
+        <div class="step-arrow">
+          →
+        </div>
+        <div
+          class="step"
+          :class="{ active: deploymentStep >= 3 }"
+        >
+          <div class="step-number">
+            3
+          </div>
           <div class="step-content">
-            <div class="step-title">监控观察</div>
-            <div class="step-desc">观察绿环境运行状态，确认无异常</div>
+            <div class="step-title">
+              监控观察
+            </div>
+            <div class="step-desc">
+              观察绿环境运行状态，确认无异常
+            </div>
           </div>
         </div>
-        <div class="step-arrow">→</div>
-        <div class="step" :class="{ active: deploymentStep >= 4 }">
-          <div class="step-number">4</div>
+        <div class="step-arrow">
+          →
+        </div>
+        <div
+          class="step"
+          :class="{ active: deploymentStep >= 4 }"
+        >
+          <div class="step-number">
+            4
+          </div>
           <div class="step-content">
-            <div class="step-title">蓝环境升级</div>
-            <div class="step-desc">在蓝环境部署新版本，为下次切换做准备</div>
+            <div class="step-title">
+              蓝环境升级
+            </div>
+            <div class="step-desc">
+              在蓝环境部署新版本，为下次切换做准备
+            </div>
           </div>
         </div>
       </div>
@@ -186,7 +313,9 @@
 
     <!-- 优缺点分析 -->
     <div class="pros-cons-analysis">
-      <div class="analysis-title">蓝绿部署优缺点</div>
+      <div class="analysis-title">
+        蓝绿部署优缺点
+      </div>
       <div class="analysis-grid">
         <div class="analysis-card pros">
           <div class="card-header">
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
index 9866e05..ca4da27 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/CanaryReleaseDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="canary-release-demo">
     <div class="header">
-      <div class="title">金丝雀发布</div>
-      <div class="subtitle">灰度发布策略，小流量先行验证新版本</div>
+      <div class="title">
+        金丝雀发布
+      </div>
+      <div class="subtitle">
+        灰度发布策略，小流量先行验证新版本
+      </div>
     </div>
 
     <!-- 流量分配控制 -->
@@ -15,24 +19,24 @@
       <div class="slider-container">
         <div class="version-labels">
           <span class="version-label stable">
-            <span class="dot blue"></span>
+            <span class="dot blue" />
             稳定版 v{{ stableVersion }}
           </span>
           <span class="percentage stable">{{ 100 - canaryPercentage }}%</span>
         </div>
 
         <input
-          type="range"
           v-model.number="canaryPercentage"
+          type="range"
           min="0"
           max="100"
           step="5"
           class="traffic-slider"
-        />
+        >
 
         <div class="version-labels">
           <span class="version-label canary">
-            <span class="dot yellow"></span>
+            <span class="dot yellow" />
             金丝雀 v{{ canaryVersion }}
           </span>
           <span class="percentage canary">{{ canaryPercentage }}%</span>
@@ -66,7 +70,9 @@
 
       <div class="traffic-pipeline">
         <div class="pipeline-stage">
-          <div class="stage-label">用户请求</div>
+          <div class="stage-label">
+            用户请求
+          </div>
           <div class="request-bubbles">
             <div
               v-for="(req, index) in requestQueue"
@@ -80,12 +86,18 @@
           </div>
         </div>
 
-        <div class="pipeline-arrow">→</div>
+        <div class="pipeline-arrow">
+          →
+        </div>
 
         <div class="pipeline-stage">
-          <div class="stage-label">负载均衡器</div>
+          <div class="stage-label">
+            负载均衡器
+          </div>
           <div class="lb-diagram">
-            <div class="lb-icon">⚖️</div>
+            <div class="lb-icon">
+              ⚖️
+            </div>
             <div class="routing-logic">
               <div class="logic-line">
                 <span class="logic-label">Canary:</span>
@@ -95,13 +107,19 @@
           </div>
         </div>
 
-        <div class="pipeline-arrow">→</div>
+        <div class="pipeline-arrow">
+          →
+        </div>
 
         <div class="pipeline-stage">
-          <div class="stage-label">后端服务</div>
+          <div class="stage-label">
+            后端服务
+          </div>
           <div class="backend-pods">
             <div class="pod-group stable">
-              <div class="pod-label">稳定版 v{{ stableVersion }}</div>
+              <div class="pod-label">
+                稳定版 v{{ stableVersion }}
+              </div>
               <div class="pods-row">
                 <div
                   v-for="i in 3"
@@ -115,7 +133,9 @@
               </div>
             </div>
             <div class="pod-group canary">
-              <div class="pod-label">金丝雀 v{{ canaryVersion }}</div>
+              <div class="pod-label">
+                金丝雀 v{{ canaryVersion }}
+              </div>
               <div class="pods-row">
                 <div
                   v-for="i in 2"
@@ -135,7 +155,9 @@
 
     <!-- 金丝雀发布策略 -->
     <div class="canary-strategy">
-      <div class="strategy-title">金丝雀发布最佳实践</div>
+      <div class="strategy-title">
+        金丝雀发布最佳实践
+      </div>
 
       <div class="strategy-grid">
         <div class="strategy-card">
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
index 0eec0a9..e27107c 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/HealthCheckDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="health-check-demo">
     <div class="header">
-      <div class="title">健康检查机制</div>
-      <div class="subtitle">主动探测、被动感知与智能阈值</div>
+      <div class="title">
+        健康检查机制
+      </div>
+      <div class="subtitle">
+        主动探测、被动感知与智能阈值
+      </div>
     </div>
 
     <!-- 模式选择器 -->
@@ -23,9 +27,15 @@
     <div class="visualization-area">
       <!-- 负载均衡器 -->
       <div class="lb-node">
-        <div class="lb-icon">⚖️</div>
-        <div class="lb-label">负载均衡器</div>
-        <div class="lb-status">{{ currentModeData.label }}</div>
+        <div class="lb-icon">
+          ⚖️
+        </div>
+        <div class="lb-label">
+          负载均衡器
+        </div>
+        <div class="lb-status">
+          {{ currentModeData.label }}
+        </div>
       </div>
 
       <!-- 连接线和健康检查标记 -->
@@ -40,7 +50,12 @@
             checking: server.status === 'checking'
           }"
         >
-          <div class="health-packet" v-if="server.showPacket">{{ server.packetType }}</div>
+          <div
+            v-if="server.showPacket"
+            class="health-packet"
+          >
+            {{ server.packetType }}
+          </div>
           <div class="health-indicator">
             <span v-if="server.status === 'healthy'">✅</span>
             <span v-else-if="server.status === 'unhealthy'">❌</span>
@@ -62,28 +77,55 @@
           }"
         >
           <div class="server-header">
-            <div class="server-icon">🖥️</div>
-            <div class="server-info">
-              <div class="server-name">Server {{ index + 1 }}</div>
-              <div class="server-ip">{{ server.ip }}</div>
+            <div class="server-icon">
+              🖥️
             </div>
-            <div class="status-badge" :class="server.status">
+            <div class="server-info">
+              <div class="server-name">
+                Server {{ index + 1 }}
+              </div>
+              <div class="server-ip">
+                {{ server.ip }}
+              </div>
+            </div>
+            <div
+              class="status-badge"
+              :class="server.status"
+            >
               {{ server.status === 'healthy' ? '健康' : server.status === 'unhealthy' ? '故障' : '检查中' }}
             </div>
           </div>
 
           <div class="server-metrics">
             <div class="metric">
-              <div class="metric-label">响应时间</div>
-              <div class="metric-value" :class="{ warning: server.responseTime > 100 }">{{ server.responseTime }}ms</div>
+              <div class="metric-label">
+                响应时间
+              </div>
+              <div
+                class="metric-value"
+                :class="{ warning: server.responseTime > 100 }"
+              >
+                {{ server.responseTime }}ms
+              </div>
             </div>
             <div class="metric">
-              <div class="metric-label">失败率</div>
-              <div class="metric-value" :class="{ danger: server.errorRate > 5 }">{{ server.errorRate }}%</div>
+              <div class="metric-label">
+                失败率
+              </div>
+              <div
+                class="metric-value"
+                :class="{ danger: server.errorRate > 5 }"
+              >
+                {{ server.errorRate }}%
+              </div>
             </div>
             <div class="metric">
-              <div class="metric-label">连续成功</div>
-              <div class="metric-value">{{ server.consecutiveSuccess }}/3</div>
+              <div class="metric-label">
+                连续成功
+              </div>
+              <div class="metric-value">
+                {{ server.consecutiveSuccess }}/3
+              </div>
             </div>
           </div>
         </div>
@@ -98,34 +140,58 @@
           <span class="card-title">{{ currentModeData.name }}</span>
         </div>
         <div class="card-body">
-          <p class="description">{{ currentModeData.description }}</p>
+          <p class="description">
+            {{ currentModeData.description }}
+          </p>
 
           <div class="config-section">
-            <div class="section-title">关键配置参数</div>
+            <div class="section-title">
+              关键配置参数
+            </div>
             <div class="config-grid">
               <div
                 v-for="param in currentModeData.params"
                 :key="param.name"
                 class="config-item"
               >
-                <div class="config-name">{{ param.name }}</div>
-                <div class="config-value">{{ param.value }}</div>
-                <div class="config-desc">{{ param.desc }}</div>
+                <div class="config-name">
+                  {{ param.name }}
+                </div>
+                <div class="config-value">
+                  {{ param.value }}
+                </div>
+                <div class="config-desc">
+                  {{ param.desc }}
+                </div>
               </div>
             </div>
           </div>
 
           <div class="pros-cons">
             <div class="pros">
-              <div class="pros-cons-title">✅ 优点</div>
+              <div class="pros-cons-title">
+                ✅ 优点
+              </div>
               <ul>
-                <li v-for="pro in currentModeData.pros" :key="pro">{{ pro }}</li>
+                <li
+                  v-for="pro in currentModeData.pros"
+                  :key="pro"
+                >
+                  {{ pro }}
+                </li>
               </ul>
             </div>
             <div class="cons">
-              <div class="pros-cons-title">❌ 缺点</div>
+              <div class="pros-cons-title">
+                ❌ 缺点
+              </div>
               <ul>
-                <li v-for="con in currentModeData.cons" :key="con">{{ con }}</li>
+                <li
+                  v-for="con in currentModeData.cons"
+                  :key="con"
+                >
+                  {{ con }}
+                </li>
               </ul>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
index 3144e63..f911291 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/LoadBalancerTypesDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="load-balancer-types-demo">
     <div class="header">
-      <div class="title">负载均衡器类型</div>
-      <div class="subtitle">从四层到七层，从硬件到软件的演进</div>
+      <div class="title">
+        负载均衡器类型
+      </div>
+      <div class="subtitle">
+        从四层到七层，从硬件到软件的演进
+      </div>
     </div>
 
     <!-- 层级选择器 -->
@@ -29,17 +33,28 @@
         </div>
         <div class="panel-content">
           <div class="single-server">
-            <div class="server-icon">🖥️</div>
-            <div class="server-label">Web Server</div>
-            <div class="server-load">
-              <div class="load-bar" :style="{ width: '95%' }"></div>
+            <div class="server-icon">
+              🖥️
+            </div>
+            <div class="server-label">
+              Web Server
+            </div>
+            <div class="server-load">
+              <div
+                class="load-bar"
+                :style="{ width: '95%' }"
+              />
+            </div>
+            <div class="load-text">
+              负载: 95% 🔥
             </div>
-            <div class="load-text">负载: 95% 🔥</div>
           </div>
         </div>
       </div>
 
-      <div class="comparison-arrow">→</div>
+      <div class="comparison-arrow">
+        →
+      </div>
 
       <div class="comparison-panel highlighted">
         <div class="panel-header">
@@ -60,10 +75,17 @@
               class="server-node"
               :class="{ active: activeServer === index }"
             >
-              <div class="server-icon-small">🖥️</div>
-              <div class="server-id">S{{ index + 1 }}</div>
+              <div class="server-icon-small">
+                🖥️
+              </div>
+              <div class="server-id">
+                S{{ index + 1 }}
+              </div>
               <div class="server-load-mini">
-                <div class="load-bar-mini" :style="{ width: server.load + '%' }"></div>
+                <div
+                  class="load-bar-mini"
+                  :style="{ width: server.load + '%' }"
+                />
               </div>
             </div>
           </div>
@@ -79,21 +101,38 @@
       </div>
       <div class="detail-content">
         <div class="detail-section">
-          <div class="section-title">工作原理</div>
-          <p class="section-desc">{{ currentLayerData.principle }}</p>
+          <div class="section-title">
+            工作原理
+          </div>
+          <p class="section-desc">
+            {{ currentLayerData.principle }}
+          </p>
         </div>
         <div class="detail-section">
-          <div class="section-title">典型产品</div>
+          <div class="section-title">
+            典型产品
+          </div>
           <div class="product-tags">
-            <span v-for="product in currentLayerData.products" :key="product" class="product-tag">
+            <span
+              v-for="product in currentLayerData.products"
+              :key="product"
+              class="product-tag"
+            >
               {{ product }}
             </span>
           </div>
         </div>
         <div class="detail-section">
-          <div class="section-title">适用场景</div>
+          <div class="section-title">
+            适用场景
+          </div>
           <ul class="scenario-list">
-            <li v-for="scenario in currentLayerData.scenarios" :key="scenario">{{ scenario }}</li>
+            <li
+              v-for="scenario in currentLayerData.scenarios"
+              :key="scenario"
+            >
+              {{ scenario }}
+            </li>
           </ul>
         </div>
       </div>
@@ -101,14 +140,26 @@
 
     <!-- 性能对比 -->
     <div class="performance-comparison">
-      <div class="comparison-title">性能对比一览</div>
+      <div class="comparison-title">
+        性能对比一览
+      </div>
       <div class="comparison-table">
         <div class="table-header">
-          <div class="th">类型</div>
-          <div class="th">处理层</div>
-          <div class="th">性能</div>
-          <div class="th">灵活性</div>
-          <div class="th">成本</div>
+          <div class="th">
+            类型
+          </div>
+          <div class="th">
+            处理层
+          </div>
+          <div class="th">
+            性能
+          </div>
+          <div class="th">
+            灵活性
+          </div>
+          <div class="th">
+            成本
+          </div>
         </div>
         <div
           v-for="row in comparisonData"
@@ -116,19 +167,31 @@
           class="table-row"
           :class="{ active: currentLayer === row.key }"
         >
-          <div class="td type">{{ row.type }}</div>
-          <div class="td">{{ row.layer }}</div>
+          <div class="td type">
+            {{ row.type }}
+          </div>
+          <div class="td">
+            {{ row.layer }}
+          </div>
           <div class="td">
             <div class="rating-bar">
-              <div class="rating-fill" :style="{ width: row.performance + '%' }"></div>
+              <div
+                class="rating-fill"
+                :style="{ width: row.performance + '%' }"
+              />
             </div>
           </div>
           <div class="td">
             <div class="rating-bar">
-              <div class="rating-fill" :style="{ width: row.flexibility + '%' }"></div>
+              <div
+                class="rating-fill"
+                :style="{ width: row.flexibility + '%' }"
+              />
             </div>
           </div>
-          <div class="td cost">{{ row.cost }}</div>
+          <div class="td cost">
+            {{ row.cost }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
index 832af89..640504f 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/MultiRegionDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="multi-region-demo">
     <div class="header">
-      <div class="title">多区域部署</div>
-      <div class="subtitle">异地多活架构，就近服务与容灾备份</div>
+      <div class="title">
+        多区域部署
+      </div>
+      <div class="subtitle">
+        异地多活架构，就近服务与容灾备份
+      </div>
     </div>
 
     <!-- 全球地图 -->
@@ -11,11 +15,11 @@
         <span class="map-title">全球部署视图</span>
         <span class="map-legend">
           <span class="legend-item">
-            <span class="legend-dot active"></span>
+            <span class="legend-dot active" />
             主节点
           </span>
           <span class="legend-item">
-            <span class="legend-dot standby"></span>
+            <span class="legend-dot standby" />
             备节点
           </span>
         </span>
@@ -38,9 +42,15 @@
               :style="{ top: region.y + '%', left: region.x + '%' }"
               @click="selectedRegion = region.id"
             >
-              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
-              <div class="node-label">{{ region.name }}</div>
-              <div class="node-delay">{{ region.delay }}ms</div>
+              <div class="node-icon">
+                {{ region.isPrimary ? '📡' : '📶' }}
+              </div>
+              <div class="node-label">
+                {{ region.name }}
+              </div>
+              <div class="node-delay">
+                {{ region.delay }}ms
+              </div>
             </div>
           </div>
 
@@ -58,9 +68,15 @@
               :style="{ top: region.y + '%', left: region.x + '%' }"
               @click="selectedRegion = region.id"
             >
-              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
-              <div class="node-label">{{ region.name }}</div>
-              <div class="node-delay">{{ region.delay }}ms</div>
+              <div class="node-icon">
+                {{ region.isPrimary ? '📡' : '📶' }}
+              </div>
+              <div class="node-label">
+                {{ region.name }}
+              </div>
+              <div class="node-delay">
+                {{ region.delay }}ms
+              </div>
             </div>
           </div>
 
@@ -78,18 +94,38 @@
               :style="{ top: region.y + '%', left: region.x + '%' }"
               @click="selectedRegion = region.id"
             >
-              <div class="node-icon">{{ region.isPrimary ? '📡' : '📶' }}</div>
-              <div class="node-label">{{ region.name }}</div>
-              <div class="node-delay">{{ region.delay }}ms</div>
+              <div class="node-icon">
+                {{ region.isPrimary ? '📡' : '📶' }}
+              </div>
+              <div class="node-label">
+                {{ region.name }}
+              </div>
+              <div class="node-delay">
+                {{ region.delay }}ms
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 连接线路 -->
-        <svg class="connection-lines" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <svg
+          class="connection-lines"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+        >
           <defs>
-            <marker id="arrowhead" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
-              <polygon points="0 0, 3 1.5, 0 3" fill="var(--vp-c-brand)" />
+            <marker
+              id="arrowhead"
+              markerWidth="3"
+              markerHeight="3"
+              refX="2"
+              refY="1.5"
+              orient="auto"
+            >
+              <polygon
+                points="0 0, 3 1.5, 0 3"
+                fill="var(--vp-c-brand)"
+              />
             </marker>
           </defs>
           <line
@@ -109,42 +145,75 @@
     </div>
 
     <!-- 区域详情 -->
-    <div class="region-details" v-if="selectedRegionData">
+    <div
+      v-if="selectedRegionData"
+      class="region-details"
+    >
       <div class="details-header">
         <div class="region-title">
           <span class="region-icon">{{ selectedRegionData.isPrimary ? '📡' : '📶' }}</span>
           <span class="region-name">{{ selectedRegionData.name }}</span>
-          <span class="region-badge" :class="{ primary: selectedRegionData.isPrimary, standby: !selectedRegionData.isPrimary }">
+          <span
+            class="region-badge"
+            :class="{ primary: selectedRegionData.isPrimary, standby: !selectedRegionData.isPrimary }"
+          >
             {{ selectedRegionData.isPrimary ? '主节点' : '备节点' }}
           </span>
         </div>
-        <button class="close-btn" @click="selectedRegion = null">×</button>
+        <button
+          class="close-btn"
+          @click="selectedRegion = null"
+        >
+          ×
+        </button>
       </div>
 
       <div class="details-grid">
         <div class="detail-item">
-          <div class="detail-label">延迟</div>
-          <div class="detail-value">{{ selectedRegionData.delay }}ms</div>
+          <div class="detail-label">
+            延迟
+          </div>
+          <div class="detail-value">
+            {{ selectedRegionData.delay }}ms
+          </div>
         </div>
         <div class="detail-item">
-          <div class="detail-label">在线实例</div>
-          <div class="detail-value">{{ selectedRegionData.instances }}个</div>
+          <div class="detail-label">
+            在线实例
+          </div>
+          <div class="detail-value">
+            {{ selectedRegionData.instances }}个
+          </div>
         </div>
         <div class="detail-item">
-          <div class="detail-label">当前QPS</div>
-          <div class="detail-value">{{ selectedRegionData.qps }}/s</div>
+          <div class="detail-label">
+            当前QPS
+          </div>
+          <div class="detail-value">
+            {{ selectedRegionData.qps }}/s
+          </div>
         </div>
         <div class="detail-item">
-          <div class="detail-label">数据同步延迟</div>
-          <div class="detail-value">{{ selectedRegionData.syncDelay }}ms</div>
+          <div class="detail-label">
+            数据同步延迟
+          </div>
+          <div class="detail-value">
+            {{ selectedRegionData.syncDelay }}ms
+          </div>
         </div>
       </div>
 
       <div class="details-actions">
-        <button class="action-btn primary" v-if="!selectedRegionData.isPrimary">
+        <button
+          v-if="!selectedRegionData.isPrimary"
+          class="action-btn primary"
+        >
           提升为主节点
         </button>
-        <button class="action-btn danger" v-if="selectedRegionData.isPrimary">
+        <button
+          v-if="selectedRegionData.isPrimary"
+          class="action-btn danger"
+        >
           切换流量
         </button>
         <button class="action-btn">
@@ -155,27 +224,53 @@
 
     <!-- 架构优势 -->
     <div class="architecture-benefits">
-      <div class="benefits-title">多区域部署优势</div>
+      <div class="benefits-title">
+        多区域部署优势
+      </div>
       <div class="benefits-grid">
         <div class="benefit-card">
-          <div class="benefit-icon">⚡</div>
-          <div class="benefit-title">就近服务</div>
-          <div class="benefit-desc">用户请求自动路由到最近的区域，降低网络延迟，提升访问速度</div>
+          <div class="benefit-icon">
+            ⚡
+          </div>
+          <div class="benefit-title">
+            就近服务
+          </div>
+          <div class="benefit-desc">
+            用户请求自动路由到最近的区域，降低网络延迟，提升访问速度
+          </div>
         </div>
         <div class="benefit-card">
-          <div class="benefit-icon">🛡️</div>
-          <div class="benefit-title">容灾备份</div>
-          <div class="benefit-desc">单区域故障时自动切换流量，确保服务高可用，数据多副本保存</div>
+          <div class="benefit-icon">
+            🛡️
+          </div>
+          <div class="benefit-title">
+            容灾备份
+          </div>
+          <div class="benefit-desc">
+            单区域故障时自动切换流量，确保服务高可用，数据多副本保存
+          </div>
         </div>
         <div class="benefit-card">
-          <div class="benefit-icon">🌍</div>
-          <div class="benefit-title">全球覆盖</div>
-          <div class="benefit-desc">支持跨区域部署，满足不同地区的合规要求和数据主权法规</div>
+          <div class="benefit-icon">
+            🌍
+          </div>
+          <div class="benefit-title">
+            全球覆盖
+          </div>
+          <div class="benefit-desc">
+            支持跨区域部署，满足不同地区的合规要求和数据主权法规
+          </div>
         </div>
         <div class="benefit-card">
-          <div class="benefit-icon">📈</div>
-          <div class="benefit-title">负载均衡</div>
-          <div class="benefit-desc">跨区域流量调度，避免单点过载，实现全局资源优化配置</div>
+          <div class="benefit-icon">
+            📈
+          </div>
+          <div class="benefit-title">
+            负载均衡
+          </div>
+          <div class="benefit-desc">
+            跨区域流量调度，避免单点过载，实现全局资源优化配置
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
index b0eefff..55c3629 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/SessionPersistenceDemo.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="session-persistence-demo">
     <div class="header">
-      <div class="title">会话保持机制</div>
-      <div class="subtitle">Cookie、IP哈希与粘性会话的技术对比</div>
+      <div class="title">
+        会话保持机制
+      </div>
+      <div class="subtitle">
+        Cookie、IP哈希与粘性会话的技术对比
+      </div>
     </div>
 
     <!-- 场景选择 -->
     <div class="scenario-selector">
-      <div class="scenario-label">应用场景：</div>
+      <div class="scenario-label">
+        应用场景：
+      </div>
       <div class="scenario-buttons">
         <button
           v-for="scenario in scenarios"
@@ -48,9 +54,18 @@
             :class="{ active: activeUser === user.id }"
             @click="activeUser = user.id"
           >
-            <div class="avatar-icon">{{ user.avatar }}</div>
-            <div class="user-name">{{ user.name }}</div>
-            <div v-if="hasSessionCookie" class="cookie-badge">🍪</div>
+            <div class="avatar-icon">
+              {{ user.avatar }}
+            </div>
+            <div class="user-name">
+              {{ user.name }}
+            </div>
+            <div
+              v-if="hasSessionCookie"
+              class="cookie-badge"
+            >
+              🍪
+            </div>
           </div>
         </div>
       </div>
@@ -58,8 +73,12 @@
       <!-- 请求流程 -->
       <div class="request-flow">
         <div class="flow-step">
-          <div class="step-label">请求</div>
-          <div class="step-arrow">↓</div>
+          <div class="step-label">
+            请求
+          </div>
+          <div class="step-arrow">
+            ↓
+          </div>
         </div>
 
         <!-- 负载均衡器 -->
@@ -72,16 +91,29 @@
             <div class="mechanism-display">
               <span class="display-icon">{{ currentMechanismData.icon }}</span>
               <div class="display-info">
-                <div class="display-name">{{ currentMechanismData.name }}</div>
-                <div class="display-desc">{{ currentMechanismData.shortDesc }}</div>
+                <div class="display-name">
+                  {{ currentMechanismData.name }}
+                </div>
+                <div class="display-desc">
+                  {{ currentMechanismData.shortDesc }}
+                </div>
               </div>
             </div>
           </div>
           <!-- 会话表 -->
-          <div v-if="currentMechanism === 'cookie' || currentMechanism === 'sticky'" class="session-table">
-            <div class="table-title">会话映射表</div>
+          <div
+            v-if="currentMechanism === 'cookie' || currentMechanism === 'sticky'"
+            class="session-table"
+          >
+            <div class="table-title">
+              会话映射表
+            </div>
             <div class="table-rows">
-              <div v-for="mapping in sessionMappings" :key="mapping.session" class="table-row">
+              <div
+                v-for="mapping in sessionMappings"
+                :key="mapping.session"
+                class="table-row"
+              >
                 <span class="session-id">{{ mapping.session }}</span>
                 <span class="mapping-arrow">→</span>
                 <span class="server-name">{{ mapping.server }}</span>
@@ -89,8 +121,13 @@
             </div>
           </div>
           <!-- IP哈希环 -->
-          <div v-if="currentMechanism === 'iphash'" class="hash-ring">
-            <div class="ring-title">IP哈希环</div>
+          <div
+            v-if="currentMechanism === 'iphash'"
+            class="hash-ring"
+          >
+            <div class="ring-title">
+              IP哈希环
+            </div>
             <div class="ring-visual">
               <div
                 v-for="(server, index) in hashRingServers"
@@ -109,7 +146,9 @@
         </div>
 
         <div class="flow-step">
-          <div class="step-arrow">↓</div>
+          <div class="step-arrow">
+            ↓
+          </div>
         </div>
 
         <!-- 后端服务器 -->
@@ -120,15 +159,27 @@
             class="backend-server"
             :class="{ target: isTargetServer(server.id) }"
           >
-            <div class="server-icon">🖥️</div>
-            <div class="server-info">
-              <div class="server-name">{{ server.name }}</div>
-              <div class="server-ip">{{ server.ip }}</div>
+            <div class="server-icon">
+              🖥️
             </div>
-            <div class="server-status" :class="server.status">
+            <div class="server-info">
+              <div class="server-name">
+                {{ server.name }}
+              </div>
+              <div class="server-ip">
+                {{ server.ip }}
+              </div>
+            </div>
+            <div
+              class="server-status"
+              :class="server.status"
+            >
               {{ server.status === 'healthy' ? '✓' : '✗' }}
             </div>
-            <div v-if="isTargetServer(server.id)" class="selected-indicator">
+            <div
+              v-if="isTargetServer(server.id)"
+              class="selected-indicator"
+            >
               选中
             </div>
           </div>
@@ -136,9 +187,14 @@
       </div>
 
       <!-- 响应流程 -->
-      <div class="response-flow" v-if="currentMechanism === 'cookie'">
+      <div
+        v-if="currentMechanism === 'cookie'"
+        class="response-flow"
+      >
         <div class="flow-step">
-          <div class="step-arrow">↑</div>
+          <div class="step-arrow">
+            ↑
+          </div>
         </div>
         <div class="set-cookie-box">
           <div class="cookie-header">
@@ -154,7 +210,9 @@
 
     <!-- 机制对比表 -->
     <div class="mechanism-comparison">
-      <div class="comparison-title">三种会话保持机制对比</div>
+      <div class="comparison-title">
+        三种会话保持机制对比
+      </div>
       <div class="comparison-grid">
         <div class="comparison-card">
           <div class="card-header">
diff --git a/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue b/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
index 038fe33..c5a49db 100644
--- a/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/load-balancing/WeightedRoutingDemo.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="weighted-routing-demo">
     <div class="header">
-      <div class="title">加权路由策略</div>
-      <div class="subtitle">按性能、成本、地理位置智能分配流量</div>
+      <div class="title">
+        加权路由策略
+      </div>
+      <div class="subtitle">
+        按性能、成本、地理位置智能分配流量
+      </div>
     </div>
 
     <!-- 策略选择器 -->
     <div class="strategy-selector">
-      <div class="strategy-label">加权策略：</div>
+      <div class="strategy-label">
+        加权策略：
+      </div>
       <div class="strategy-buttons">
         <button
           v-for="strategy in strategies"
@@ -26,16 +32,20 @@
     <div class="visualization">
       <!-- 流量进入 -->
       <div class="traffic-incoming">
-        <div class="traffic-label">总流量</div>
-        <div class="traffic-value">{{ totalTraffic }} req/s</div>
+        <div class="traffic-label">
+          总流量
+        </div>
+        <div class="traffic-value">
+          {{ totalTraffic }} req/s
+        </div>
         <div class="traffic-slider">
           <input
-            type="range"
             v-model.number="totalTraffic"
+            type="range"
             min="100"
             max="10000"
             step="100"
-          />
+          >
           <div class="slider-labels">
             <span>100</span>
             <span>5000</span>
@@ -46,7 +56,9 @@
 
       <!-- 权重分配可视化 -->
       <div class="weight-allocation">
-        <div class="allocation-title">权重分配</div>
+        <div class="allocation-title">
+          权重分配
+        </div>
         <div class="allocation-bars">
           <div
             v-for="(server, index) in weightedServers"
@@ -54,10 +66,16 @@
             class="allocation-item"
           >
             <div class="server-info">
-              <div class="server-icon">🖥️</div>
+              <div class="server-icon">
+                🖥️
+              </div>
               <div class="server-details">
-                <div class="server-name">{{ server.name }}</div>
-                <div class="server-specs">{{ server.specs }}</div>
+                <div class="server-name">
+                  {{ server.name }}
+                </div>
+                <div class="server-specs">
+                  {{ server.specs }}
+                </div>
               </div>
             </div>
             <div class="weight-bar-container">
@@ -76,13 +94,13 @@
             </div>
             <div class="weight-control">
               <input
-                type="range"
                 v-model.number="server.weight"
+                type="range"
                 min="1"
                 max="10"
                 step="1"
                 class="weight-slider"
-              />
+              >
               <span class="weight-label">权重: {{ server.weight }}</span>
             </div>
           </div>
@@ -91,7 +109,9 @@
 
       <!-- 实时流量动画 -->
       <div class="traffic-animation">
-        <div class="animation-title">实时流量</div>
+        <div class="animation-title">
+          实时流量
+        </div>
         <div class="traffic-flows">
           <div
             v-for="(flow, index) in trafficFlows"
@@ -99,7 +119,10 @@
             class="flow-item"
             :style="{ animationDelay: flow.delay + 's' }"
           >
-            <div class="flow-packet" :style="{ background: flow.color }"></div>
+            <div
+              class="flow-packet"
+              :style="{ background: flow.color }"
+            />
           </div>
         </div>
         <div class="server-indicators">
@@ -117,7 +140,9 @@
 
     <!-- 策略详情对比 -->
     <div class="strategy-comparison">
-      <div class="comparison-title">加权策略对比</div>
+      <div class="comparison-title">
+        加权策略对比
+      </div>
       <div class="comparison-grid">
         <div
           v-for="strategy in strategies"
@@ -130,11 +155,20 @@
             <span class="card-name">{{ strategy.name }}</span>
           </div>
           <div class="card-body">
-            <p class="card-desc">{{ strategy.description }}</p>
+            <p class="card-desc">
+              {{ strategy.description }}
+            </p>
             <div class="use-cases">
-              <div class="use-case-title">适用场景：</div>
+              <div class="use-case-title">
+                适用场景：
+              </div>
               <ul>
-                <li v-for="useCase in strategy.useCases" :key="useCase">{{ useCase }}</li>
+                <li
+                  v-for="useCase in strategy.useCases"
+                  :key="useCase"
+                >
+                  {{ useCase }}
+                </li>
               </ul>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue b/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue
index ff90123..51a702b 100644
--- a/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/operations/AlertFlowDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="alert-flow-demo">
     <div class="header">
-      <div class="title">告警流程 (Alerting Flow)</div>
-      <div class="subtitle">从发现异常到通知运维的自动化流程</div>
+      <div class="title">
+        告警流程 (Alerting Flow)
+      </div>
+      <div class="subtitle">
+        从发现异常到通知运维的自动化流程
+      </div>
     </div>
 
     <div class="controls">
@@ -29,18 +33,40 @@
           { active: step.active, completed: step.completed }
         ]"
       >
-        <div class="step-number">{{ index + 1 }}</div>
-        <div class="step-content">
-          <div class="step-title">{{ step.title }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
-          <div v-if="step.details" class="step-details">{{ step.details }}</div>
+        <div class="step-number">
+          {{ index + 1 }}
+        </div>
+        <div class="step-content">
+          <div class="step-title">
+            {{ step.title }}
+          </div>
+          <div class="step-desc">
+            {{ step.desc }}
+          </div>
+          <div
+            v-if="step.details"
+            class="step-details"
+          >
+            {{ step.details }}
+          </div>
+        </div>
+        <div
+          v-if="index < steps.length - 1"
+          class="step-arrow"
+        >
+          →
         </div>
-        <div v-if="index < steps.length - 1" class="step-arrow">→</div>
       </div>
     </div>
 
-    <div class="alert-info" v-if="currentAlert">
-      <div class="alert-header" :class="'level-' + currentAlert.level">
+    <div
+      v-if="currentAlert"
+      class="alert-info"
+    >
+      <div
+        class="alert-header"
+        :class="'level-' + currentAlert.level"
+      >
         <span class="alert-icon">⚠️</span>
         <span class="alert-title">告警详情</span>
         <span class="alert-level">{{ currentAlert.levelName }}</span>
@@ -70,7 +96,9 @@
     </div>
 
     <div class="level-guide">
-      <div class="guide-title">告警级别说明</div>
+      <div class="guide-title">
+        告警级别说明
+      </div>
       <div class="levels">
         <div class="level-item">
           <span class="level-badge p0">P0</span>
diff --git a/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue b/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue
index 71132dc..4d04b5d 100644
--- a/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/operations/CapacityPlanningDemo.vue
@@ -5,35 +5,59 @@
 <template>
   <div class="capacity-demo">
     <div class="header">
-      <div class="title">容量规划计算器 (Capacity Planning)</div>
-      <div class="subtitle">估算系统需要多少台服务器才能满足需求</div>
+      <div class="title">
+        容量规划计算器 (Capacity Planning)
+      </div>
+      <div class="subtitle">
+        估算系统需要多少台服务器才能满足需求
+      </div>
     </div>
 
     <div class="calculator">
       <div class="input-section">
-        <div class="section-title">📊 业务指标</div>
+        <div class="section-title">
+          📊 业务指标
+        </div>
         <div class="input-grid">
           <div class="input-group">
             <label>日活用户 (DAU)</label>
-            <input v-model.number="dau" type="number" min="1" step="1000" />
+            <input
+              v-model.number="dau"
+              type="number"
+              min="1"
+              step="1000"
+            >
             <span class="unit">人</span>
           </div>
 
           <div class="input-group">
             <label>人均请求/天</label>
-            <input v-model.number="requestsPerUser" type="number" min="1" />
+            <input
+              v-model.number="requestsPerUser"
+              type="number"
+              min="1"
+            >
             <span class="unit">次</span>
           </div>
 
           <div class="input-group">
             <label>高峰时段占比</label>
-            <input v-model.number="peakRatio" type="number" min="1" max="100" />
+            <input
+              v-model.number="peakRatio"
+              type="number"
+              min="1"
+              max="100"
+            >
             <span class="unit">%</span>
           </div>
 
           <div class="input-group">
             <label>单机 QPS 能力</label>
-            <input v-model.number="serverQps" type="number" min="1" />
+            <input
+              v-model.number="serverQps"
+              type="number"
+              min="1"
+            >
             <span class="unit">次/秒</span>
           </div>
 
@@ -45,54 +69,72 @@
               min="1"
               max="3"
               step="0.1"
-            />
+            >
             <span class="unit">倍</span>
           </div>
         </div>
 
         <div class="tips">
           💡
-          <span class="tip-text"
-            >通常高峰期流量是平均流量的 2-3 倍，建议预留 50-100%
-            冗余应对突发流量</span
-          >
+          <span class="tip-text">通常高峰期流量是平均流量的 2-3 倍，建议预留 50-100%
+            冗余应对突发流量</span>
         </div>
       </div>
 
       <div class="output-section">
-        <div class="section-title">📈 容量评估结果</div>
+        <div class="section-title">
+          📈 容量评估结果
+        </div>
 
         <div class="result-card">
-          <div class="result-label">日均总请求量</div>
+          <div class="result-label">
+            日均总请求量
+          </div>
           <div class="result-value">
             {{ totalRequests.toLocaleString() }} 次/天
           </div>
         </div>
 
         <div class="result-card highlight">
-          <div class="result-label">高峰期 QPS (目标)</div>
-          <div class="result-value">{{ targetQPS.toLocaleString() }} 次/秒</div>
+          <div class="result-label">
+            高峰期 QPS (目标)
+          </div>
+          <div class="result-value">
+            {{ targetQPS.toLocaleString() }} 次/秒
+          </div>
         </div>
 
         <div class="result-card">
-          <div class="result-label">理论所需服务器</div>
-          <div class="result-value">{{ minServers }} 台</div>
+          <div class="result-label">
+            理论所需服务器
+          </div>
+          <div class="result-value">
+            {{ minServers }} 台
+          </div>
         </div>
 
         <div class="result-card highlight">
-          <div class="result-label">推荐配置 (含冗余)</div>
-          <div class="result-value large">{{ recommendedServers }} 台</div>
+          <div class="result-label">
+            推荐配置 (含冗余)
+          </div>
+          <div class="result-value large">
+            {{ recommendedServers }} 台
+          </div>
         </div>
 
         <div class="cost-estimate">
-          <div class="cost-title">💰 月成本估算 (云服务器)</div>
+          <div class="cost-title">
+            💰 月成本估算 (云服务器)
+          </div>
           <div class="cost-options">
             <div
-              class="cost-option"
               v-for="option in costOptions"
               :key="option.name"
+              class="cost-option"
             >
-              <div class="option-name">{{ option.name }}</div>
+              <div class="option-name">
+                {{ option.name }}
+              </div>
               <div class="option-price">
                 ¥{{ option.price.toLocaleString() }}/月
               </div>
@@ -103,32 +145,50 @@
     </div>
 
     <div class="planning-tips">
-      <div class="tips-title">🎯 容量规划要点</div>
+      <div class="tips-title">
+        🎯 容量规划要点
+      </div>
       <div class="tips-grid">
         <div class="tip-card">
-          <div class="tip-icon">1️⃣</div>
-          <div class="tip-title">以峰值为核心</div>
+          <div class="tip-icon">
+            1️⃣
+          </div>
+          <div class="tip-title">
+            以峰值为核心
+          </div>
           <div class="tip-desc">
             不能按平均流量规划，必须按高峰期流量（通常是平均的 2-3 倍）来准备
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">2️⃣</div>
-          <div class="tip-title">预留冗余空间</div>
+          <div class="tip-icon">
+            2️⃣
+          </div>
+          <div class="tip-title">
+            预留冗余空间
+          </div>
           <div class="tip-desc">
             至少预留 50% 冗余，用于应对突发流量、服务器故障、维护窗口
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">3️⃣</div>
-          <div class="tip-title">定期压测验证</div>
+          <div class="tip-icon">
+            3️⃣
+          </div>
+          <div class="tip-title">
+            定期压测验证
+          </div>
           <div class="tip-desc">
             每季度进行压力测试，验证实际容量是否满足预估
           </div>
         </div>
         <div class="tip-card">
-          <div class="tip-icon">4️⃣</div>
-          <div class="tip-title">弹性扩缩容</div>
+          <div class="tip-icon">
+            4️⃣
+          </div>
+          <div class="tip-title">
+            弹性扩缩容
+          </div>
           <div class="tip-desc">
             结合云服务的自动扩缩容，在高峰期自动增加实例
           </div>
@@ -137,7 +197,9 @@
     </div>
 
     <div class="formula-section">
-      <div class="formula-title">📐 计算公式</div>
+      <div class="formula-title">
+        📐 计算公式
+      </div>
       <div class="formula-list">
         <div class="formula-item">
           <span class="formula-label">日均请求量：</span>
diff --git a/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue b/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue
index 54705aa..0b51af4 100644
--- a/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/operations/IncidentResponseDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="incident-demo">
     <div class="header">
-      <div class="title">故障响应流程 (Incident Response)</div>
-      <div class="subtitle">专业团队如何处理线上故障</div>
+      <div class="title">
+        故障响应流程 (Incident Response)
+      </div>
+      <div class="subtitle">
+        专业团队如何处理线上故障
+      </div>
     </div>
 
     <div class="timeline">
@@ -19,27 +23,47 @@
         ]"
         @click="activePhase = index"
       >
-        <div class="phase-marker">{{ index + 1 }}</div>
+        <div class="phase-marker">
+          {{ index + 1 }}
+        </div>
         <div class="phase-content">
-          <div class="phase-title">{{ phase.title }}</div>
-          <div class="phase-time">{{ phase.time }}</div>
-          <div class="phase-desc">{{ phase.desc }}</div>
-          <div v-if="activePhase === index" class="phase-actions">
-            <div class="action-title">关键动作：</div>
+          <div class="phase-title">
+            {{ phase.title }}
+          </div>
+          <div class="phase-time">
+            {{ phase.time }}
+          </div>
+          <div class="phase-desc">
+            {{ phase.desc }}
+          </div>
+          <div
+            v-if="activePhase === index"
+            class="phase-actions"
+          >
+            <div class="action-title">
+              关键动作：
+            </div>
             <ul class="action-list">
-              <li v-for="action in phase.actions" :key="action">
+              <li
+                v-for="action in phase.actions"
+                :key="action"
+              >
                 {{ action }}
               </li>
             </ul>
-            <div v-if="phase.tools" class="tools-section">
-              <div class="tools-title">常用工具：</div>
+            <div
+              v-if="phase.tools"
+              class="tools-section"
+            >
+              <div class="tools-title">
+                常用工具：
+              </div>
               <div class="tools-list">
                 <span
                   v-for="tool in phase.tools"
                   :key="tool"
                   class="tool-tag"
-                  >{{ tool }}</span
-                >
+                >{{ tool }}</span>
               </div>
             </div>
           </div>
@@ -47,32 +71,55 @@
       </div>
     </div>
 
-    <div class="incident-meta" v-if="activePhase === phases.length - 1">
-      <div class="meta-title">📋 故障复盘报告 (Post-mortem)</div>
+    <div
+      v-if="activePhase === phases.length - 1"
+      class="incident-meta"
+    >
+      <div class="meta-title">
+        📋 故障复盘报告 (Post-mortem)
+      </div>
       <div class="meta-content">
         <div class="meta-section">
-          <div class="meta-label">故障等级：</div>
-          <div class="meta-value level-p1">P1 - 高优先级</div>
+          <div class="meta-label">
+            故障等级：
+          </div>
+          <div class="meta-value level-p1">
+            P1 - 高优先级
+          </div>
         </div>
         <div class="meta-section">
-          <div class="meta-label">影响范围：</div>
-          <div class="meta-value">约 15% 用户无法访问订单服务</div>
+          <div class="meta-label">
+            影响范围：
+          </div>
+          <div class="meta-value">
+            约 15% 用户无法访问订单服务
+          </div>
         </div>
         <div class="meta-section">
-          <div class="meta-label">故障时长：</div>
-          <div class="meta-value">23 分钟</div>
+          <div class="meta-label">
+            故障时长：
+          </div>
+          <div class="meta-value">
+            23 分钟
+          </div>
         </div>
         <div class="meta-section">
-          <div class="meta-label">根本原因：</div>
-          <div class="meta-value">数据库连接池配置过小，高峰期连接耗尽</div>
+          <div class="meta-label">
+            根本原因：
+          </div>
+          <div class="meta-value">
+            数据库连接池配置过小，高峰期连接耗尽
+          </div>
         </div>
         <div class="meta-section">
-          <div class="meta-label">改进措施：</div>
+          <div class="meta-label">
+            改进措施：
+          </div>
           <div class="meta-value">
             1. 增加连接池大小至 200
-            <br />
+            <br>
             2. 添加连接池监控告警
-            <br />
+            <br>
             3. 优化慢查询，减少连接占用时间
           </div>
         </div>
@@ -80,32 +127,50 @@
     </div>
 
     <div class="best-practices">
-      <div class="practice-title">🎯 故障处理最佳实践</div>
+      <div class="practice-title">
+        🎯 故障处理最佳实践
+      </div>
       <div class="practice-grid">
         <div class="practice-card">
-          <div class="practice-icon">⚡</div>
-          <div class="practice-name">快速响应</div>
+          <div class="practice-icon">
+            ⚡
+          </div>
+          <div class="practice-name">
+            快速响应
+          </div>
           <div class="practice-desc">
             建立 15 分钟响应机制，P0 故障立即电话通知
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">📢</div>
-          <div class="practice-name">信息同步</div>
+          <div class="practice-icon">
+            📢
+          </div>
+          <div class="practice-name">
+            信息同步
+          </div>
           <div class="practice-desc">
             定期向用户和内部同步故障进展，避免猜测
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">🔍</div>
-          <div class="practice-name">保留现场</div>
+          <div class="practice-icon">
+            🔍
+          </div>
+          <div class="practice-name">
+            保留现场
+          </div>
           <div class="practice-desc">
             故障现场数据（日志、监控）完整留存，便于分析
           </div>
         </div>
         <div class="practice-card">
-          <div class="practice-icon">📝</div>
-          <div class="practice-name">blameless 文化</div>
+          <div class="practice-icon">
+            📝
+          </div>
+          <div class="practice-name">
+            blameless 文化
+          </div>
           <div class="practice-desc">
             复盘对事不对人，聚焦流程改进而非个人责任
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue b/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue
index 6fb4ac5..9d169ba 100644
--- a/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/operations/MonitoringDashboardDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="monitoring-dashboard">
     <div class="header">
-      <div class="title">实时监控面板 (Monitoring Dashboard)</div>
-      <div class="subtitle">运维的"眼睛" - 让系统状态一目了然</div>
+      <div class="title">
+        实时监控面板 (Monitoring Dashboard)
+      </div>
+      <div class="subtitle">
+        运维的"眼睛" - 让系统状态一目了然
+      </div>
     </div>
 
     <div class="tabs">
@@ -22,7 +26,10 @@
 
     <div class="dashboard-content">
       <!-- 基础设施监控 -->
-      <div v-if="activeTab === 'infra'" class="metrics-grid">
+      <div
+        v-if="activeTab === 'infra'"
+        class="metrics-grid"
+      >
         <div
           v-for="metric in infraMetrics"
           :key="metric.name"
@@ -30,9 +37,7 @@
         >
           <div class="metric-header">
             <span class="metric-name">{{ metric.name }}</span>
-            <span class="metric-value"
-              >{{ metric.value }}{{ metric.unit }}</span
-            >
+            <span class="metric-value">{{ metric.value }}{{ metric.unit }}</span>
           </div>
           <div class="metric-chart">
             <div
@@ -41,7 +46,7 @@
                 width: metric.value + '%',
                 background: getColor(metric.value, metric.threshold)
               }"
-            ></div>
+            />
           </div>
           <div
             class="metric-status"
@@ -53,7 +58,10 @@
       </div>
 
       <!-- 应用监控 -->
-      <div v-if="activeTab === 'app'" class="metrics-grid">
+      <div
+        v-if="activeTab === 'app'"
+        class="metrics-grid"
+      >
         <div class="metric-card large">
           <div class="metric-header">
             <span class="metric-name">QPS (每秒请求数)</span>
@@ -65,7 +73,7 @@
               :key="index"
               class="qps-bar"
               :style="{ height: height + '%' }"
-            ></div>
+            />
           </div>
         </div>
 
@@ -97,7 +105,10 @@
       </div>
 
       <!-- 业务监控 -->
-      <div v-if="activeTab === 'business'" class="metrics-grid">
+      <div
+        v-if="activeTab === 'business'"
+        class="metrics-grid"
+      >
         <div
           v-for="metric in businessMetrics"
           :key="metric.name"
@@ -107,7 +118,10 @@
             <span class="metric-name">{{ metric.name }}</span>
             <span class="metric-value">{{ metric.value }}</span>
           </div>
-          <div class="trend" :class="metric.trend">
+          <div
+            class="trend"
+            :class="metric.trend"
+          >
             {{
               metric.trend === 'up'
                 ? '📈 上升'
@@ -116,22 +130,24 @@
                   : '➡️ 持平'
             }}
           </div>
-          <div class="metric-desc">{{ metric.desc }}</div>
+          <div class="metric-desc">
+            {{ metric.desc }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="legend">
       <div class="item">
-        <span class="dot normal"></span>
+        <span class="dot normal" />
         <span>正常 (Normal)</span>
       </div>
       <div class="item">
-        <span class="dot warning"></span>
+        <span class="dot warning" />
         <span>警告 (Warning)</span>
       </div>
       <div class="item">
-        <span class="dot critical"></span>
+        <span class="dot critical" />
         <span>严重 (Critical)</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue
index f6b5672..5e9944b 100644
--- a/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/operations/TraceVisualizationDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="trace-demo">
     <div class="header">
-      <div class="title">分布式链路追踪 (Distributed Tracing)</div>
-      <div class="subtitle">一个请求在微服务间流转的完整路径</div>
+      <div class="title">
+        分布式链路追踪 (Distributed Tracing)
+      </div>
+      <div class="subtitle">
+        一个请求在微服务间流转的完整路径
+      </div>
     </div>
 
     <div class="controls">
@@ -58,8 +62,14 @@
       </div>
 
       <div class="spans">
-        <div v-for="(span, index) in spans" :key="span.id" class="span-row">
-          <div class="span-service">{{ span.service }}</div>
+        <div
+          v-for="(span, index) in spans"
+          :key="span.id"
+          class="span-row"
+        >
+          <div class="span-service">
+            {{ span.service }}
+          </div>
           <div class="span-timeline">
             <div
               class="span-bar"
@@ -74,24 +84,40 @@
               }"
             >
               <div class="span-details">
-                <div class="span-name">{{ span.name }}</div>
-                <div class="span-time">{{ span.duration }}ms</div>
+                <div class="span-name">
+                  {{ span.name }}
+                </div>
+                <div class="span-time">
+                  {{ span.duration }}ms
+                </div>
               </div>
             </div>
           </div>
           <div class="span-status">
-            <span v-if="span.status === 'error'" class="status-error">✗</span>
-            <span v-else-if="span.duration > 200" class="status-warning"
-              >⚠</span
-            >
-            <span v-else class="status-success">✓</span>
+            <span
+              v-if="span.status === 'error'"
+              class="status-error"
+            >✗</span>
+            <span
+              v-else-if="span.duration > 200"
+              class="status-warning"
+            >⚠</span>
+            <span
+              v-else
+              class="status-success"
+            >✓</span>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="span-detail" v-if="selectedSpan">
-      <div class="detail-header">Span 详情</div>
+    <div
+      v-if="selectedSpan"
+      class="span-detail"
+    >
+      <div class="detail-header">
+        Span 详情
+      </div>
       <div class="detail-body">
         <div class="detail-row">
           <span class="label">服务名：</span>
@@ -107,11 +133,17 @@
         </div>
         <div class="detail-row">
           <span class="label">状态：</span>
-          <span class="value" :class="selectedSpan.status">{{
+          <span
+            class="value"
+            :class="selectedSpan.status"
+          >{{
             selectedSpan.status
           }}</span>
         </div>
-        <div v-if="selectedSpan.error" class="detail-row">
+        <div
+          v-if="selectedSpan.error"
+          class="detail-row"
+        >
           <span class="label">错误信息：</span>
           <span class="value error">{{ selectedSpan.error }}</span>
         </div>
@@ -120,21 +152,23 @@
 
     <div class="legend">
       <div class="legend-item">
-        <span class="color-box success"></span>
+        <span class="color-box success" />
         <span>正常 (≤200ms)</span>
       </div>
       <div class="legend-item">
-        <span class="color-box warning"></span>
+        <span class="color-box warning" />
         <span>慢调用 (>200ms)</span>
       </div>
       <div class="legend-item">
-        <span class="color-box error"></span>
+        <span class="color-box error" />
         <span>错误</span>
       </div>
     </div>
 
     <div class="tips">
-      <div class="tip-title">💡 观察要点</div>
+      <div class="tip-title">
+        💡 观察要点
+      </div>
       <ul class="tip-list">
         <li>点击"性能瓶颈"查看数据库查询慢导致的延迟</li>
         <li>点击"错误追踪"查看库存服务异常如何影响整个链路</li>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue
index 0fc4613..baf1589 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/ChainOfThoughtDemo.vue
@@ -1,12 +1,24 @@
 <template>
-  <el-card class="cot-demo-card" shadow="hover">
+  <el-card
+    class="cot-demo-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="controls-header">
         <div class="control-group">
           <span class="label">任务场景：</span>
-          <el-select v-model="currentTask" style="width: 200px">
-            <el-option label="代码审查 (Code Review)" value="debug" />
-            <el-option label="行程规划 (Travel Plan)" value="travel" />
+          <el-select
+            v-model="currentTask"
+            style="width: 200px"
+          >
+            <el-option
+              label="代码审查 (Code Review)"
+              value="debug"
+            />
+            <el-option
+              label="行程规划 (Travel Plan)"
+              value="travel"
+            />
           </el-select>
         </div>
         
@@ -28,22 +40,30 @@
     <div class="demo-content">
       <el-row :gutter="20">
         <!-- Left: Prompt Input -->
-        <el-col :xs="24" :md="10">
-          <el-card shadow="never" class="prompt-panel">
+        <el-col
+          :xs="24"
+          :md="10"
+        >
+          <el-card
+            shadow="never"
+            class="prompt-panel"
+          >
             <template #header>
               <div class="panel-header">
                 <el-icon><EditPen /></el-icon>
                 <span>输入提示词 (Prompt)</span>
               </div>
             </template>
-            <div class="prompt-text">{{ currentScenario.prompt }}</div>
+            <div class="prompt-text">
+              {{ currentScenario.prompt }}
+            </div>
             <div class="action-area">
               <el-button 
                 type="primary" 
                 :loading="isPlaying"
-                @click="runSimulation" 
-                class="run-btn"
+                class="run-btn" 
                 size="large"
+                @click="runSimulation"
               >
                 {{ isPlaying ? '生成中...' : '开始生成' }}
               </el-button>
@@ -52,19 +72,34 @@
         </el-col>
 
         <!-- Right: AI Output Process -->
-        <el-col :xs="24" :md="14">
-          <el-card shadow="never" class="output-panel">
+        <el-col
+          :xs="24"
+          :md="14"
+        >
+          <el-card
+            shadow="never"
+            class="output-panel"
+          >
             <template #header>
               <div class="panel-header">
                 <div class="left">
                   <el-icon><Cpu /></el-icon>
                   <span>AI 思考与输出</span>
                 </div>
-                <el-tag :type="statusType" effect="dark" size="small">{{ statusText }}</el-tag>
+                <el-tag
+                  :type="statusType"
+                  effect="dark"
+                  size="small"
+                >
+                  {{ statusText }}
+                </el-tag>
               </div>
             </template>
             
-            <div class="output-container" ref="outputContainer">
+            <div
+              ref="outputContainer"
+              class="output-container"
+            >
               <el-empty 
                 v-if="!hasRun && !isPlaying" 
                 description="点击“开始生成”观察 AI 如何处理任务..." 
@@ -80,9 +115,17 @@
                   :timestamp="currentStepIndex === index ? 'Thinking...' : ''"
                   placement="top"
                 >
-                  <h4 class="step-title">{{ step.title }}</h4>
-                  <div class="step-content" v-if="step.content">
-                    {{ step.displayedContent }}<span v-if="currentStepIndex === index" class="typing-cursor">|</span>
+                  <h4 class="step-title">
+                    {{ step.title }}
+                  </h4>
+                  <div
+                    v-if="step.content"
+                    class="step-content"
+                  >
+                    {{ step.displayedContent }}<span
+                      v-if="currentStepIndex === index"
+                      class="typing-cursor"
+                    >|</span>
                   </div>
                 </el-timeline-item>
               </el-timeline>
@@ -93,7 +136,10 @@
     </div>
 
     <!-- Insight/Analysis Section -->
-    <div class="insight-section" v-if="hasRun || isPlaying">
+    <div
+      v-if="hasRun || isPlaying"
+      class="insight-section"
+    >
       <el-alert
         :type="currentMode === 'direct' ? 'warning' : 'success'"
         :closable="false"
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue
index 1826183..09dcfa0 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/FewShotDemo.vue
@@ -8,17 +8,33 @@
   - 看提示词和输出如何变化
 -->
 <template>
-  <el-card class="few-shot-card" shadow="hover">
+  <el-card
+    class="few-shot-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">示例的力量：让风格“跟你走”</h3>
-          <p class="subtitle">你不是让 AI 更聪明，而是让它更像你要的样子。</p>
+          <h3 class="title">
+            示例的力量：让风格“跟你走”
+          </h3>
+          <p class="subtitle">
+            你不是让 AI 更聪明，而是让它更像你要的样子。
+          </p>
         </div>
         <div class="controls">
-          <el-select v-model="tone" style="width: 140px">
-            <el-option label="随意口语" value="casual" />
-            <el-option label="正式书面" value="formal" />
+          <el-select
+            v-model="tone"
+            style="width: 140px"
+          >
+            <el-option
+              label="随意口语"
+              value="casual"
+            />
+            <el-option
+              label="正式书面"
+              value="formal"
+            />
           </el-select>
           <el-switch
             v-model="withExamples"
@@ -32,20 +48,32 @@
     </template>
 
     <div class="grid-layout">
-      <el-card shadow="never" class="panel">
+      <el-card
+        shadow="never"
+        class="panel"
+      >
         <template #header>
-          <div class="panel-header">提示词 / Prompt</div>
+          <div class="panel-header">
+            提示词 / Prompt
+          </div>
         </template>
         <div class="code-block">
           <pre><code>{{ prompt }}</code></pre>
         </div>
       </el-card>
 
-      <el-card shadow="never" class="panel">
+      <el-card
+        shadow="never"
+        class="panel"
+      >
         <template #header>
-          <div class="panel-header">AI 输出（示意）</div>
+          <div class="panel-header">
+            AI 输出（示意）
+          </div>
         </template>
-        <div class="output-content">{{ output }}</div>
+        <div class="output-content">
+          {{ output }}
+        </div>
         <el-alert
           :title="hint"
           :type="withExamples ? 'success' : 'warning'"
@@ -56,13 +84,30 @@
       </el-card>
     </div>
 
-    <div class="examples-section" v-if="withExamples">
-      <el-divider content-position="left">示例（AI 会“照着学”）</el-divider>
+    <div
+      v-if="withExamples"
+      class="examples-section"
+    >
+      <el-divider content-position="left">
+        示例（AI 会“照着学”）
+      </el-divider>
       <el-row :gutter="12">
-        <el-col :span="8" v-for="e in examples" :key="e.in">
-          <el-card shadow="hover" class="example-item" :body-style="{ padding: '12px' }">
-            <div class="ex-in">输入：{{ e.in }}</div>
-            <div class="ex-out">输出：{{ e.out }}</div>
+        <el-col
+          v-for="e in examples"
+          :key="e.in"
+          :span="8"
+        >
+          <el-card
+            shadow="hover"
+            class="example-item"
+            :body-style="{ padding: '12px' }"
+          >
+            <div class="ex-in">
+              输入：{{ e.in }}
+            </div>
+            <div class="ex-out">
+              输出：{{ e.out }}
+            </div>
           </el-card>
         </el-col>
       </el-row>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue
index 9b4cbf3..4fe7716 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptComparisonDemo.vue
@@ -3,43 +3,81 @@
   “清晰 vs 模糊”对比：把一个提示词拆成四块（任务/上下文/要求/输出），并展示哪些块缺失会导致输出跑偏。
 -->
 <template>
-  <el-card class="cmp-card" shadow="hover">
+  <el-card
+    class="cmp-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">清晰 vs 模糊：差的不是“废话”，而是“缺项”</h3>
-          <p class="subtitle">勾选你想补充的信息，看看输出会怎么变。</p>
+          <h3 class="title">
+            清晰 vs 模糊：差的不是“废话”，而是“缺项”
+          </h3>
+          <p class="subtitle">
+            勾选你想补充的信息，看看输出会怎么变。
+          </p>
         </div>
         <div class="task-select">
-          <el-select v-model="task" placeholder="选择任务" style="width: 200px">
-            <el-option label="写一段技术博客开头" value="blog" />
-            <el-option label="把内容输出成 JSON" value="json" />
+          <el-select
+            v-model="task"
+            placeholder="选择任务"
+            style="width: 200px"
+          >
+            <el-option
+              label="写一段技术博客开头"
+              value="blog"
+            />
+            <el-option
+              label="把内容输出成 JSON"
+              value="json"
+            />
           </el-select>
         </div>
       </div>
     </template>
 
     <div class="options-container">
-      <el-checkbox v-model="useRole" label="角色（你是谁）" border />
-      <el-checkbox v-model="useAudience" label="受众（写给谁）" border />
+      <el-checkbox
+        v-model="useRole"
+        label="角色（你是谁）"
+        border
+      />
+      <el-checkbox
+        v-model="useAudience"
+        label="受众（写给谁）"
+        border
+      />
       <el-checkbox
         v-model="useConstraints"
         label="约束（长度/要点数）"
         border
       />
-      <el-checkbox v-model="useFormat" label="输出格式（JSON/列表）" border />
+      <el-checkbox
+        v-model="useFormat"
+        label="输出格式（JSON/列表）"
+        border
+      />
     </div>
 
     <div class="grid-layout">
-      <el-card shadow="never" class="panel input-panel">
+      <el-card
+        shadow="never"
+        class="panel input-panel"
+      >
         <template #header>
-          <div class="panel-header">你给 AI 的提示词</div>
+          <div class="panel-header">
+            你给 AI 的提示词
+          </div>
         </template>
         <div class="code-block">
           <pre><code>{{ prompt }}</code></pre>
         </div>
         <div class="checklist">
-          <div class="check-item" v-for="i in checklist" :key="i.text">
+          <div
+            v-for="i in checklist"
+            :key="i.text"
+            class="check-item"
+          >
             <el-tag
               :type="i.ok ? 'success' : 'danger'"
               size="small"
@@ -53,13 +91,23 @@
         </div>
       </el-card>
 
-      <el-card shadow="never" class="panel output-panel">
+      <el-card
+        shadow="never"
+        class="panel output-panel"
+      >
         <template #header>
-          <div class="panel-header">AI 输出（示意）</div>
+          <div class="panel-header">
+            AI 输出（示意）
+          </div>
         </template>
-        <div class="output-content">{{ output }}</div>
+        <div class="output-content">
+          {{ output }}
+        </div>
 
-        <div v-if="warnings.length" class="warnings-section">
+        <div
+          v-if="warnings.length"
+          class="warnings-section"
+        >
           <el-alert
             v-for="w in warnings"
             :key="w"
@@ -70,7 +118,11 @@
             style="margin-top: 8px"
           />
         </div>
-        <el-empty v-else description="完美！没有明显问题。" :image-size="60" />
+        <el-empty
+          v-else
+          description="完美！没有明显问题。"
+          :image-size="60"
+        />
       </el-card>
     </div>
   </el-card>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue
index 81f63a8..d7bbdde 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptQuickStartDemo.vue
@@ -1,15 +1,27 @@
 <template>
   <div class="quick-start-demo-container">
-    <el-card class="quick-start-card" shadow="hover">
+    <el-card
+      class="quick-start-card"
+      shadow="hover"
+    >
       <template #header>
         <div class="header-content">
           <div class="title-group">
-            <div class="title">🕹️ 互动体验：提示词进化论</div>
-            <div class="subtitle">不要一次性写好，试着像搭积木一样优化你的指令。</div>
+            <div class="title">
+              🕹️ 互动体验：提示词进化论
+            </div>
+            <div class="subtitle">
+              不要一次性写好，试着像搭积木一样优化你的指令。
+            </div>
           </div>
           <div class="controls">
             <span class="label">选择任务：</span>
-            <el-select v-model="taskId" @change="reset" style="width: 160px" size="large">
+            <el-select
+              v-model="taskId"
+              style="width: 160px"
+              size="large"
+              @change="reset"
+            >
               <el-option
                 v-for="t in tasks"
                 :key="t.id"
@@ -25,23 +37,34 @@
       <div class="game-area">
         <!-- 左侧：提示词构建 -->
         <div class="prompt-builder">
-          <div class="section-title">你的指令 (Prompt)</div>
+          <div class="section-title">
+            你的指令 (Prompt)
+          </div>
           
           <div class="prompt-box">
             <!-- 基础层 -->
-            <div class="block base" :class="{ active: true }">
+            <div
+              class="block base"
+              :class="{ active: true }"
+            >
               <span class="icon">📝</span>
               <span class="text">{{ basePrompt }}</span>
             </div>
 
             <!-- 进阶层：清晰指令 -->
-            <div v-if="level >= 1" class="block clear animate-in">
+            <div
+              v-if="level >= 1"
+              class="block clear animate-in"
+            >
               <span class="icon">🎯</span>
               <span class="text">{{ clearPromptAddon }}</span>
             </div>
 
             <!-- 专家层：结构化 -->
-            <div v-if="level >= 2" class="block pro animate-in">
+            <div
+              v-if="level >= 2"
+              class="block pro animate-in"
+            >
               <span class="icon">🧠</span>
               <span class="text">{{ proPromptAddon }}</span>
             </div>
@@ -50,24 +73,34 @@
           <!-- 升级按钮 -->
           <div class="upgrade-controls">
             <div class="level-info">
-              <el-tag :type="levelColor" effect="dark" size="small" style="margin-bottom: 4px;">Level {{ level }}</el-tag>
-              <span class="level-desc" :style="{ color: levelColorCode }">{{ levelLabel }}</span>
+              <el-tag
+                :type="levelColor"
+                effect="dark"
+                size="small"
+                style="margin-bottom: 4px;"
+              >
+                Level {{ level }}
+              </el-tag>
+              <span
+                class="level-desc"
+                :style="{ color: levelColorCode }"
+              >{{ levelLabel }}</span>
             </div>
             
             <div class="actions">
               <el-button-group>
                 <el-button 
                   :disabled="level === 0"
-                  @click="downgrade"
                   icon="Minus"
+                  @click="downgrade"
                 >
                   ➖ 降级
                 </el-button>
                 <el-button 
                   type="primary" 
                   :disabled="level === 2"
-                  @click="upgrade"
                   icon="Plus"
+                  @click="upgrade"
                 >
                   升级 ➕
                 </el-button>
@@ -79,8 +112,8 @@
             type="primary" 
             size="large" 
             :loading="isRunning"
-            @click="run"
             style="width: 100%; font-weight: bold; font-size: 1.1rem;"
+            @click="run"
           >
             {{ isRunning ? '生成中...' : '🚀 发送给 AI' }}
           </el-button>
@@ -91,8 +124,14 @@
           <div class="section-title">
             <span>AI 回复 (Output)</span>
             <!-- 历史记录切换 -->
-            <div class="history-tabs" v-if="hasAnyHistory">
-              <el-radio-group v-model="viewLevel" size="small">
+            <div
+              v-if="hasAnyHistory"
+              class="history-tabs"
+            >
+              <el-radio-group
+                v-model="viewLevel"
+                size="small"
+              >
                 <el-radio-button 
                   v-for="l in availableLevels" 
                   :key="l" 
@@ -106,8 +145,14 @@
 
           <div class="chat-window">
             <!-- 空状态 -->
-            <div v-if="!hasRun && !hasAnyHistory" class="empty-state">
-              <el-empty description="点击左侧“发送”按钮，看看 AI 会怎么回。" :image-size="100" />
+            <div
+              v-if="!hasRun && !hasAnyHistory"
+              class="empty-state"
+            >
+              <el-empty
+                description="点击左侧“发送”按钮，看看 AI 会怎么回。"
+                :image-size="100"
+              />
             </div>
 
             <!-- 内容区域 -->
@@ -122,24 +167,50 @@
               >
                 <template #title>
                   正在查看 Level {{ viewLevel }} 的历史记录 (当前是 L{{ level }})
-                  <el-button link type="primary" @click="viewLevel = level" style="padding: 0; vertical-align: baseline;">回到当前</el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    style="padding: 0; vertical-align: baseline;"
+                    @click="viewLevel = level"
+                  >
+                    回到当前
+                  </el-button>
                 </template>
               </el-alert>
 
-              <div class="message-bubble" :class="{ typing: isRunning && viewLevel === level }">
-                <div class="avatar">🤖</div>
+              <div
+                class="message-bubble"
+                :class="{ typing: isRunning && viewLevel === level }"
+              >
+                <div class="avatar">
+                  🤖
+                </div>
                 <div class="content">
-                  <div v-if="isRunning && viewLevel === level" class="typing-indicator">
-                    <span></span><span></span><span></span>
+                  <div
+                    v-if="isRunning && viewLevel === level"
+                    class="typing-indicator"
+                  >
+                    <span /><span /><span />
                   </div>
-                  <div v-else class="markdown-body" v-html="renderMarkdown(getOutputForLevel(viewLevel))"></div>
+                  <div
+                    v-else
+                    class="markdown-body"
+                    v-html="renderMarkdown(getOutputForLevel(viewLevel))"
+                  />
                 </div>
               </div>
               
               <!-- 点评气泡 -->
-              <div v-if="(!isRunning || viewLevel !== level) && getOutputForLevel(viewLevel)" class="feedback-bubble animate-pop">
-                <div class="feedback-title">💡 {{ getFeedbackForLevel(viewLevel).title }}</div>
-                <div class="feedback-text">{{ getFeedbackForLevel(viewLevel).text }}</div>
+              <div
+                v-if="(!isRunning || viewLevel !== level) && getOutputForLevel(viewLevel)"
+                class="feedback-bubble animate-pop"
+              >
+                <div class="feedback-title">
+                  💡 {{ getFeedbackForLevel(viewLevel).title }}
+                </div>
+                <div class="feedback-text">
+                  {{ getFeedbackForLevel(viewLevel).text }}
+                </div>
               </div>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptRobustnessDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptRobustnessDemo.vue
index f2bc089..abbf793 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptRobustnessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptRobustnessDemo.vue
@@ -4,30 +4,61 @@
   场景：策划团建活动
 -->
 <template>
-  <el-card class="robustness-card" shadow="hover">
+  <el-card
+    class="robustness-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">让 AI 更“稳”：拒绝瞎猜，学会反问与自查</h3>
-          <p class="subtitle">面对模糊指令，AI 应该“不懂就问”而不是“一本正经胡说”。</p>
+          <h3 class="title">
+            让 AI 更“稳”：拒绝瞎猜，学会反问与自查
+          </h3>
+          <p class="subtitle">
+            面对模糊指令，AI 应该“不懂就问”而不是“一本正经胡说”。
+          </p>
         </div>
       </div>
     </template>
 
     <div class="controls-section">
-      <el-row :gutter="20" align="middle">
-        <el-col :span="12" :xs="24">
+      <el-row
+        :gutter="20"
+        align="middle"
+      >
+        <el-col
+          :span="12"
+          :xs="24"
+        >
           <div class="input-display">
             <span class="label">你的指令：</span>
-            <el-tag type="info" size="large" effect="plain">“帮我策划一个团建活动。”</el-tag>
+            <el-tag
+              type="info"
+              size="large"
+              effect="plain"
+            >
+              “帮我策划一个团建活动。”
+            </el-tag>
           </div>
         </el-col>
-        <el-col :span="12" :xs="24">
+        <el-col
+          :span="12"
+          :xs="24"
+        >
           <div class="mode-switch">
-            <el-radio-group v-model="mode" @change="resetState">
-              <el-radio-button label="raw">直接生成</el-radio-button>
-              <el-radio-button label="clarify">允许提问</el-radio-button>
-              <el-radio-button label="verify">要求自检</el-radio-button>
+            <el-radio-group
+              v-model="mode"
+              @change="resetState"
+            >
+              <el-radio-button label="raw">
+                直接生成
+              </el-radio-button>
+              <el-radio-button label="clarify">
+                允许提问
+              </el-radio-button>
+              <el-radio-button label="verify">
+                要求自检
+              </el-radio-button>
             </el-radio-group>
           </div>
         </el-col>
@@ -36,69 +67,146 @@
 
     <div class="simulation-area">
       <!-- 模式 1: 直接生成 -->
-      <div v-if="mode === 'raw'" class="scenario raw">
+      <div
+        v-if="mode === 'raw'"
+        class="scenario raw"
+      >
         <div class="chat-bubble ai">
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content">
+          <el-card
+            shadow="never"
+            class="bubble-content"
+          >
             <p>好的！为您推荐以下活动：</p>
             <ol>
               <li>豪华游艇出海派对（人均 5000）</li>
               <li>也就是去楼下吃个火锅（人均 100）</li>
               <li>徒步穿越无人区（高风险）</li>
             </ol>
-            <div class="note">（AI 内心：你不说预算和人数，我就随便猜了...）</div>
+            <div class="note">
+              （AI 内心：你不说预算和人数，我就随便猜了...）
+            </div>
           </el-card>
         </div>
-        <el-alert title="结果不可控：AI 只能盲猜，方案可能完全不靠谱" type="error" show-icon :closable="false" />
+        <el-alert
+          title="结果不可控：AI 只能盲猜，方案可能完全不靠谱"
+          type="error"
+          show-icon
+          :closable="false"
+        />
       </div>
 
       <!-- 模式 2: 澄清问题 -->
-      <div v-if="mode === 'clarify'" class="scenario clarify">
+      <div
+        v-if="mode === 'clarify'"
+        class="scenario clarify"
+      >
         <div class="chat-bubble ai">
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content">
+          <el-card
+            shadow="never"
+            class="bubble-content"
+          >
             <p>收到。为了给出精准建议，我需要确认 3 点：</p>
-            <el-form label-position="top" size="small" class="questions-form">
+            <el-form
+              label-position="top"
+              size="small"
+              class="questions-form"
+            >
               <el-row :gutter="12">
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="1. 人数规模？">
                     <el-select v-model="answers.count">
-                      <el-option label="10人小团队" value="10" />
-                      <el-option label="100人大大公司" value="100" />
+                      <el-option
+                        label="10人小团队"
+                        value="10"
+                      />
+                      <el-option
+                        label="100人大大公司"
+                        value="100"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="2. 人均预算？">
                     <el-select v-model="answers.budget">
-                      <el-option label="低（<200元）" value="low" />
-                      <el-option label="高（>1000元）" value="high" />
+                      <el-option
+                        label="低（<200元）"
+                        value="low"
+                      />
+                      <el-option
+                        label="高（>1000元）"
+                        value="high"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="8" :xs="24">
+                <el-col
+                  :span="8"
+                  :xs="24"
+                >
                   <el-form-item label="3. 偏好？">
                     <el-select v-model="answers.type">
-                      <el-option label="轻松吃喝" value="relax" />
-                      <el-option label="户外运动" value="active" />
+                      <el-option
+                        label="轻松吃喝"
+                        value="relax"
+                      />
+                      <el-option
+                        label="户外运动"
+                        value="active"
+                      />
                     </el-select>
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-button type="primary" @click="generatePlan" style="margin-top: 8px">生成方案</el-button>
+              <el-button
+                type="primary"
+                style="margin-top: 8px"
+                @click="generatePlan"
+              >
+                生成方案
+              </el-button>
             </el-form>
           </el-card>
         </div>
         
-        <div v-if="planResult" class="chat-bubble ai result fade-in">
+        <div
+          v-if="planResult"
+          class="chat-bubble ai result fade-in"
+        >
           <div class="avatar-container">
-            <el-avatar :size="40" style="background-color: var(--vp-c-brand)">AI</el-avatar>
+            <el-avatar
+              :size="40"
+              style="background-color: var(--vp-c-brand)"
+            >
+              AI
+            </el-avatar>
           </div>
-          <el-card shadow="never" class="bubble-content plan-result">
+          <el-card
+            shadow="never"
+            class="bubble-content plan-result"
+          >
             <p>基于您的要求（{{ answerSummary }}），推荐方案：</p>
             <div class="plan-card">
               <h3>{{ planResult.title }}</h3>
@@ -109,47 +217,122 @@
       </div>
 
       <!-- 模式 3: 自我修正 -->
-      <div v-if="mode === 'verify'" class="scenario verify">
-        <el-alert type="info" show-icon :closable="false" style="margin-bottom: 20px">
+      <div
+        v-if="mode === 'verify'"
+        class="scenario verify"
+      >
+        <el-alert
+          type="info"
+          show-icon
+          :closable="false"
+          style="margin-bottom: 20px"
+        >
           <template #title>
             指令升级：策划一个活动，<strong>必须包含素食选项</strong>，且<strong>总预算不超过 2000 元</strong>。
           </template>
         </el-alert>
         
-        <el-steps :active="verifyStep" align-center finish-status="success" style="margin-bottom: 24px">
-          <el-step title="初次生成" :icon="Edit" />
-          <el-step title="自我检查" :icon="View" />
-          <el-step title="修正输出" :icon="CircleCheck" />
+        <el-steps
+          :active="verifyStep"
+          align-center
+          finish-status="success"
+          style="margin-bottom: 24px"
+        >
+          <el-step
+            title="初次生成"
+            :icon="Edit"
+          />
+          <el-step
+            title="自我检查"
+            :icon="View"
+          />
+          <el-step
+            title="修正输出"
+            :icon="CircleCheck"
+          />
         </el-steps>
 
         <div class="monitor-log">
           <el-collapse-transition>
-            <div v-if="verifyStep >= 1" class="log-item">
-              <el-tag size="small" type="info">生成草稿</el-tag>
+            <div
+              v-if="verifyStep >= 1"
+              class="log-item"
+            >
+              <el-tag
+                size="small"
+                type="info"
+              >
+                生成草稿
+              </el-tag>
               <span class="log-text">“全牛宴烧烤，预计花费 3000 元...”</span>
             </div>
           </el-collapse-transition>
           <el-collapse-transition>
-            <div v-if="verifyStep >= 2" class="log-item check-fail">
-              <el-tag size="small" type="danger">自检发现</el-tag>
+            <div
+              v-if="verifyStep >= 2"
+              class="log-item check-fail"
+            >
+              <el-tag
+                size="small"
+                type="danger"
+              >
+                自检发现
+              </el-tag>
               <div class="check-list">
-                <div class="fail-item"><el-icon color="#f56c6c"><Close /></el-icon> 包含素食？否（全是肉）</div>
-                <div class="fail-item"><el-icon color="#f56c6c"><Close /></el-icon> 预算&lt;2000？否（3000超标）</div>
+                <div class="fail-item">
+                  <el-icon color="#f56c6c">
+                    <Close />
+                  </el-icon> 包含素食？否（全是肉）
+                </div>
+                <div class="fail-item">
+                  <el-icon color="#f56c6c">
+                    <Close />
+                  </el-icon> 预算&lt;2000？否（3000超标）
+                </div>
               </div>
             </div>
           </el-collapse-transition>
           <el-collapse-transition>
-            <div v-if="verifyStep >= 3" class="log-item success">
-              <el-tag size="small" type="success">修正后</el-tag>
+            <div
+              v-if="verifyStep >= 3"
+              class="log-item success"
+            >
+              <el-tag
+                size="small"
+                type="success"
+              >
+                修正后
+              </el-tag>
               <span class="log-text">“田园蔬菜自助 + 少量烤肉，预计花费 1800 元。” ✅</span>
             </div>
           </el-collapse-transition>
         </div>
         
-        <div class="actions" style="text-align: center; margin-top: 20px;">
-          <el-button v-if="verifyStep === 0" type="primary" @click="runVerify" size="large">开始运行</el-button>
-          <el-button v-else-if="verifyStep === 3" @click="verifyStep = 0">重置演示</el-button>
-          <el-button v-else loading disabled>处理中...</el-button>
+        <div
+          class="actions"
+          style="text-align: center; margin-top: 20px;"
+        >
+          <el-button
+            v-if="verifyStep === 0"
+            type="primary"
+            size="large"
+            @click="runVerify"
+          >
+            开始运行
+          </el-button>
+          <el-button
+            v-else-if="verifyStep === 3"
+            @click="verifyStep = 0"
+          >
+            重置演示
+          </el-button>
+          <el-button
+            v-else
+            loading
+            disabled
+          >
+            处理中...
+          </el-button>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptSecurityDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptSecurityDemo.vue
index 4946423..bf5c2ec 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptSecurityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptSecurityDemo.vue
@@ -3,23 +3,35 @@
   演示 Prompt Injection 攻击原理及防御方法
 -->
 <template>
-  <el-card class="security-card" shadow="hover">
+  <el-card
+    class="security-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div>
-          <h3 class="title">防御 Prompt Injection（注入攻击）</h3>
-          <p class="subtitle">当用户输入包含恶意指令时，如何防止 AI “被带跑”？</p>
+          <h3 class="title">
+            防御 Prompt Injection（注入攻击）
+          </h3>
+          <p class="subtitle">
+            当用户输入包含恶意指令时，如何防止 AI “被带跑”？
+          </p>
         </div>
       </div>
     </template>
 
     <el-row :gutter="20">
       <!-- 左侧：设置区 -->
-      <el-col :md="12" :xs="24">
+      <el-col
+        :md="12"
+        :xs="24"
+      >
         <div class="panel settings">
           <div class="section">
             <div class="section-header">
-              <div class="section-title">1. 系统设定 (System Prompt)</div>
+              <div class="section-title">
+                1. 系统设定 (System Prompt)
+              </div>
               <el-switch
                 v-model="isSecure"
                 active-text="防御模式"
@@ -29,7 +41,11 @@
               />
             </div>
             
-            <el-card shadow="never" class="code-box system" :class="{ secure: isSecure }">
+            <el-card
+              shadow="never"
+              class="code-box system"
+              :class="{ secure: isSecure }"
+            >
               <template v-if="!isSecure">
                 你是一个翻译助手。<br>
                 请把用户的输入翻译成英文。
@@ -41,18 +57,35 @@
               </template>
             </el-card>
             <div class="mode-desc">
-              <el-tag :type="isSecure ? 'success' : 'danger'" size="small">
+              <el-tag
+                :type="isSecure ? 'success' : 'danger'"
+                size="small"
+              >
                 {{ isSecure ? '✅ 已开启防御 (使用分隔符)' : '❌ 未防御 (容易被攻击)' }}
               </el-tag>
             </div>
           </div>
 
           <div class="section">
-            <div class="section-title">2. 用户输入 (User Input)</div>
+            <div class="section-title">
+              2. 用户输入 (User Input)
+            </div>
             <div class="input-presets">
               <el-button-group>
-                <el-button size="small" @click="setInput('normal')">正常文本</el-button>
-                <el-button size="small" type="danger" plain @click="setInput('attack')">攻击指令</el-button>
+                <el-button
+                  size="small"
+                  @click="setInput('normal')"
+                >
+                  正常文本
+                </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  plain
+                  @click="setInput('attack')"
+                >
+                  攻击指令
+                </el-button>
               </el-button-group>
             </div>
             <el-input
@@ -81,13 +114,27 @@
       </el-col>
 
       <!-- 右侧：执行结果 -->
-      <el-col :md="12" :xs="24">
+      <el-col
+        :md="12"
+        :xs="24"
+      >
         <div class="panel result">
-          <div class="section-title">3. AI 执行结果</div>
+          <div class="section-title">
+            3. AI 执行结果
+          </div>
           <div class="terminal-container">
             <div class="terminal">
-              <div v-if="loading" class="typing">AI 正在思考...</div>
-              <div v-else class="output" :class="resultType">
+              <div
+                v-if="loading"
+                class="typing"
+              >
+                AI 正在思考...
+              </div>
+              <div
+                v-else
+                class="output"
+                :class="resultType"
+              >
                 {{ output || '等待执行...' }}
               </div>
             </div>
@@ -104,10 +151,10 @@
           
           <el-button 
             type="primary" 
-            @click="runSimulation" 
             :loading="loading" 
-            class="btn-run"
+            class="btn-run" 
             size="large"
+            @click="runSimulation"
           >
             执行 Prompt
           </el-button>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue
index e1e847d..7502de6 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/PromptTemplatesDemo.vue
@@ -1,10 +1,17 @@
 <template>
-  <el-card class="templates-card" shadow="hover">
+  <el-card
+    class="templates-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
         <div class="header-left">
-          <h3 class="title">常见场景模板（标签切换，可直接复制）</h3>
-          <p class="subtitle">选一个场景 → 复制 → 把占位符替换成你的内容。</p>
+          <h3 class="title">
+            常见场景模板（标签切换，可直接复制）
+          </h3>
+          <p class="subtitle">
+            选一个场景 → 复制 → 把占位符替换成你的内容。
+          </p>
         </div>
         <div class="header-right">
           <el-input
@@ -17,8 +24,8 @@
           <el-button 
             type="primary" 
             :icon="copied ? Check : CopyDocument" 
-            @click="copy(active.template)" 
-            :disabled="!active"
+            :disabled="!active" 
+            @click="copy(active.template)"
           >
             {{ copied ? '已复制' : '复制模板' }}
           </el-button>
@@ -46,7 +53,10 @@
       />
     </div>
 
-    <div v-if="active" class="content-area">
+    <div
+      v-if="active"
+      class="content-area"
+    >
       <el-alert
         :title="active.desc"
         type="info"
@@ -55,12 +65,23 @@
         class="desc-alert"
       />
       
-      <el-card shadow="never" class="code-card">
+      <el-card
+        shadow="never"
+        class="code-card"
+      >
         <pre class="code-block"><code>{{ active.template }}</code></pre>
       </el-card>
 
-      <div v-if="active.note" class="note-section">
-        <el-tag type="warning" size="small">Note</el-tag>
+      <div
+        v-if="active.note"
+        class="note-section"
+      >
+        <el-tag
+          type="warning"
+          size="small"
+        >
+          Note
+        </el-tag>
         <span class="note-text">{{ active.note }}</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/prompt-engineering/TrainingProcessDemo.vue b/docs/.vitepress/theme/components/appendix/prompt-engineering/TrainingProcessDemo.vue
index f1750d2..66cb7b2 100644
--- a/docs/.vitepress/theme/components/appendix/prompt-engineering/TrainingProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/prompt-engineering/TrainingProcessDemo.vue
@@ -1,26 +1,48 @@
 <template>
-  <el-card class="training-card" shadow="hover">
+  <el-card
+    class="training-card"
+    shadow="hover"
+  >
     <template #header>
       <div class="card-header">
-        <h3 class="title">从训练数据看模型行为</h3>
+        <h3 class="title">
+          从训练数据看模型行为
+        </h3>
         <div class="mode-switch-container">
-          <el-radio-group v-model="mode" size="large">
-            <el-radio-button label="pretrain">1. 预训练 (Pre-training)</el-radio-button>
-            <el-radio-button label="finetune">2. 微调 (Fine-tuning)</el-radio-button>
+          <el-radio-group
+            v-model="mode"
+            size="large"
+          >
+            <el-radio-button label="pretrain">
+              1. 预训练 (Pre-training)
+            </el-radio-button>
+            <el-radio-button label="finetune">
+              2. 微调 (Fine-tuning)
+            </el-radio-button>
           </el-radio-group>
         </div>
       </div>
     </template>
 
     <!-- PRE-TRAINING MODE -->
-    <div v-if="mode === 'pretrain'" class="demo-content">
-      <el-card shadow="never" class="concept-card">
+    <div
+      v-if="mode === 'pretrain'"
+      class="demo-content"
+    >
+      <el-card
+        shadow="never"
+        class="concept-card"
+      >
         <div class="concept-content">
-          <div class="icon">📚</div>
+          <div class="icon">
+            📚
+          </div>
           <div class="info">
             <h4>博览群书 (Reading the Web)</h4>
             <p>核心目标：<strong>预测下一个 Token</strong></p>
-            <p class="sub">模型阅读了海量文本，它的本能是"把句子接下去"。</p>
+            <p class="sub">
+              模型阅读了海量文本，它的本能是"把句子接下去"。
+            </p>
           </div>
         </div>
       </el-card>
@@ -28,12 +50,12 @@
       <div class="interactive-area">
         <div class="editor-window">
           <div class="window-header">
-            <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
+            <span class="dot red" /><span class="dot yellow" /><span class="dot green" />
             <span class="window-title">Next Token Predictor</span>
           </div>
           <div class="editor-content">
             <span class="text-gray">Source: Wikipedia / Books</span>
-            <br/><br/>
+            <br><br>
             <p>
               Natural selection, proposed by Darwin in 
               <span class="highlight">{{ currentPrediction || '...' }}</span>
@@ -42,17 +64,32 @@
         </div>
 
         <div class="controls">
-          <el-button type="primary" size="large" @click="predictNext" :loading="isPredicting">
+          <el-button
+            type="primary"
+            size="large"
+            :loading="isPredicting"
+            @click="predictNext"
+          >
             {{ isPredicting ? '计算概率中...' : '预测下一个词 (Predict)' }}
           </el-button>
         </div>
 
         <el-collapse-transition>
-          <div v-if="predictions.length > 0" class="predictions-panel">
+          <div
+            v-if="predictions.length > 0"
+            class="predictions-panel"
+          >
             <h5>概率分布 (Top 3 Candidates)</h5>
             <div class="chart-container">
-              <div v-for="(item, index) in predictions" :key="index" class="bar-row" @click="selectPrediction(item)">
-                <div class="label">{{ item.token }}</div>
+              <div
+                v-for="(item, index) in predictions"
+                :key="index"
+                class="bar-row"
+                @click="selectPrediction(item)"
+              >
+                <div class="label">
+                  {{ item.token }}
+                </div>
                 <div class="bar-container">
                   <el-progress 
                     :percentage="item.prob" 
@@ -63,21 +100,33 @@
                 </div>
               </div>
             </div>
-            <p class="hint">👆 点击预测词填入（模型只是在根据统计学规律"瞎蒙"）</p>
+            <p class="hint">
+              👆 点击预测词填入（模型只是在根据统计学规律"瞎蒙"）
+            </p>
           </div>
         </el-collapse-transition>
       </div>
     </div>
 
     <!-- FINE-TUNING MODE -->
-    <div v-if="mode === 'finetune'" class="demo-content">
-      <el-card shadow="never" class="concept-card">
+    <div
+      v-if="mode === 'finetune'"
+      class="demo-content"
+    >
+      <el-card
+        shadow="never"
+        class="concept-card"
+      >
         <div class="concept-content">
-          <div class="icon">🎓</div>
+          <div class="icon">
+            🎓
+          </div>
           <div class="info">
             <h4>学习规矩 (Instruction Tuning)</h4>
             <p>核心目标：<strong>听懂指令 (Follow Instructions)</strong></p>
-            <p class="sub">通过 (问题 → 标准答案) 数据对，教会模型"像个助手一样说话"。</p>
+            <p class="sub">
+              通过 (问题 → 标准答案) 数据对，教会模型"像个助手一样说话"。
+            </p>
           </div>
         </div>
       </el-card>
@@ -85,18 +134,33 @@
       <div class="interactive-area">
         <div class="chat-window">
           <div class="message user">
-            <div class="avatar">👤</div>
-            <div class="bubble">我如何退货？</div>
+            <div class="avatar">
+              👤
+            </div>
+            <div class="bubble">
+              我如何退货？
+            </div>
           </div>
           
           <el-collapse-transition>
-            <div v-if="ftState === 'base'" class="message ai base-model">
-              <div class="avatar">🤖</div>
+            <div
+              v-if="ftState === 'base'"
+              class="message ai base-model"
+            >
+              <div class="avatar">
+                🤖
+              </div>
               <div class="bubble">
-                <el-tag type="info" size="small" class="badge">预训练模型 (Base Model)</el-tag>
+                <el-tag
+                  type="info"
+                  size="small"
+                  class="badge"
+                >
+                  预训练模型 (Base Model)
+                </el-tag>
                 <div class="bubble-text">
                   退货是指消费者将购买的商品退回给卖家的过程。在电子商务中，退货率通常在 20% 左右。根据《消费者权益保护法》...
-                  <br/><br/>
+                  <br><br>
                   <small>❌ (它在背书，不是在回答你)</small>
                 </div>
               </div>
@@ -104,10 +168,21 @@
           </el-collapse-transition>
 
           <el-collapse-transition>
-            <div v-if="ftState === 'tuned'" class="message ai tuned-model">
-              <div class="avatar">✨</div>
+            <div
+              v-if="ftState === 'tuned'"
+              class="message ai tuned-model"
+            >
+              <div class="avatar">
+                ✨
+              </div>
               <div class="bubble">
-                <el-tag type="success" size="small" class="badge">微调模型 (Instruct Model)</el-tag>
+                <el-tag
+                  type="success"
+                  size="small"
+                  class="badge"
+                >
+                  微调模型 (Instruct Model)
+                </el-tag>
                 <div class="bubble-text">
                   办理退货很简单，请按以下步骤操作：
                   <ol>
@@ -123,11 +198,20 @@
         </div>
 
         <div class="controls center-controls">
-          <el-radio-group v-model="ftState" size="large">
-            <el-radio-button label="base">原始模型 (Base)</el-radio-button>
-            <el-radio-button label="tuned">微调后 (Instruct)</el-radio-button>
+          <el-radio-group
+            v-model="ftState"
+            size="large"
+          >
+            <el-radio-button label="base">
+              原始模型 (Base)
+            </el-radio-button>
+            <el-radio-button label="tuned">
+              微调后 (Instruct)
+            </el-radio-button>
           </el-radio-group>
-          <p class="hint">切换开关，观察模型行为的巨大差异</p>
+          <p class="hint">
+            切换开关，观察模型行为的巨大差异
+          </p>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
index 5933c12..1326828 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
@@ -29,13 +29,22 @@
 
     <div class="demo-content">
       <!-- 紧耦合模式 -->
-      <div v-if="!useAsync" class="synchronous-mode">
+      <div
+        v-if="!useAsync"
+        class="synchronous-mode"
+      >
         <div class="scenario">
-          <div class="scenario-title">❌ 紧耦合问题</div>
+          <div class="scenario-title">
+            ❌ 紧耦合问题
+          </div>
           <div class="flow-diagram">
             <div class="service-box order">
-              <div class="service-name">订单服务</div>
-              <div class="service-desc">创建订单</div>
+              <div class="service-name">
+                订单服务
+              </div>
+              <div class="service-desc">
+                创建订单
+              </div>
             </div>
 
             <div class="arrows">
@@ -45,9 +54,14 @@
                 class="sync-call"
                 :class="{ active: call.active }"
               >
-                <div class="call-line"></div>
-                <div class="call-label">{{ call.service }}</div>
-                <div v-if="call.active" class="call-status">
+                <div class="call-line" />
+                <div class="call-label">
+                  {{ call.service }}
+                </div>
+                <div
+                  v-if="call.active"
+                  class="call-status"
+                >
                   {{ call.status }}
                 </div>
               </div>
@@ -57,9 +71,18 @@
               class="service-box notification"
               :class="{ failed: notificationFailed }"
             >
-              <div class="service-name">通知服务</div>
-              <div class="service-desc">发送短信/邮件</div>
-              <div v-if="notificationFailed" class="error-msg">服务宕机 ❌</div>
+              <div class="service-name">
+                通知服务
+              </div>
+              <div class="service-desc">
+                发送短信/邮件
+              </div>
+              <div
+                v-if="notificationFailed"
+                class="error-msg"
+              >
+                服务宕机 ❌
+              </div>
             </div>
           </div>
 
@@ -70,10 +93,8 @@
             </div>
             <div class="problem-item">
               <span class="icon">⚠️</span>
-              <span
-                ><strong>响应慢：</strong>总耗时 = 300ms + 500ms + 400ms =
-                1200ms</span
-              >
+              <span><strong>响应慢：</strong>总耗时 = 300ms + 500ms + 400ms =
+                1200ms</span>
             </div>
             <div class="problem-item">
               <span class="icon">⚠️</span>
@@ -81,47 +102,81 @@
             </div>
           </div>
 
-          <button class="test-btn fail" @click="testSyncCall">
+          <button
+            class="test-btn fail"
+            @click="testSyncCall"
+          >
             模拟通知服务故障
           </button>
         </div>
       </div>
 
       <!-- 松耦合模式 -->
-      <div v-else class="asynchronous-mode">
+      <div
+        v-else
+        class="asynchronous-mode"
+      >
         <div class="scenario">
-          <div class="scenario-title">✅ 松耦合优势</div>
+          <div class="scenario-title">
+            ✅ 松耦合优势
+          </div>
           <div class="flow-diagram">
             <div class="service-box order">
-              <div class="service-name">订单服务</div>
-              <div class="service-desc">创建订单 + 发送消息</div>
+              <div class="service-name">
+                订单服务
+              </div>
+              <div class="service-desc">
+                创建订单 + 发送消息
+              </div>
             </div>
 
             <div class="mq-bridge">
               <div class="mq-box">
-                <div class="mq-icon">📨</div>
-                <div class="mq-label">消息队列</div>
-                <div v-if="messageInQueue" class="msg-indicator">
+                <div class="mq-icon">
+                  📨
+                </div>
+                <div class="mq-label">
+                  消息队列
+                </div>
+                <div
+                  v-if="messageInQueue"
+                  class="msg-indicator"
+                >
                   消息已发送
                 </div>
               </div>
-              <div class="flow-arrow">→</div>
+              <div class="flow-arrow">
+                →
+              </div>
             </div>
 
             <div class="consumers-group">
-              <div class="consumer-box" :class="{ failed: consumerFailed }">
-                <div class="consumer-name">短信服务</div>
+              <div
+                class="consumer-box"
+                :class="{ failed: consumerFailed }"
+              >
+                <div class="consumer-name">
+                  短信服务
+                </div>
                 <div class="consumer-status">
                   {{ consumerFailed ? '离线(不影响订单)' : '运行中' }}
                 </div>
               </div>
               <div class="consumer-box">
-                <div class="consumer-name">邮件服务</div>
-                <div class="consumer-status">运行中</div>
+                <div class="consumer-name">
+                  邮件服务
+                </div>
+                <div class="consumer-status">
+                  运行中
+                </div>
               </div>
               <div class="consumer-box">
-                <div class="consumer-name">积分服务</div>
-                <div class="consumer-status">运行中</div>
+                <div class="consumer-name">
+                  积分服务
+                </div>
+                <div class="consumer-status">
+                  运行中
+                </div>
               </div>
             </div>
           </div>
@@ -133,9 +188,7 @@
             </div>
             <div class="benefit-item">
               <span class="icon">✅</span>
-              <span
-                ><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span
-              >
+              <span><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span>
             </div>
             <div class="benefit-item">
               <span class="icon">✅</span>
@@ -143,7 +196,10 @@
             </div>
           </div>
 
-          <button class="test-btn success" @click="testAsyncCall">
+          <button
+            class="test-btn success"
+            @click="testAsyncCall"
+          >
             发送订单消息
           </button>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
index e3c8a50..2313cb0 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
@@ -13,12 +13,24 @@
     <div class="controls">
       <div class="control">
         <label>失败率：</label>
-        <input v-model.number="failureRate" type="range" min="0" max="100" step="10" />
+        <input
+          v-model.number="failureRate"
+          type="range"
+          min="0"
+          max="100"
+          step="10"
+        >
         <span class="value">{{ failureRate }}%</span>
       </div>
       <div class="control">
         <label>最大重试：</label>
-        <input v-model.number="maxRetries" type="range" min="1" max="5" step="1" />
+        <input
+          v-model.number="maxRetries"
+          type="range"
+          min="1"
+          max="5"
+          step="1"
+        >
         <span class="value">{{ maxRetries }}</span>
       </div>
     </div>
@@ -26,7 +38,9 @@
     <div class="demo-content">
       <div class="flow-container">
         <div class="main-queue-section">
-          <div class="section-title">📦 主队列</div>
+          <div class="section-title">
+            📦 主队列
+          </div>
           <div class="queue-box main-queue">
             <div class="queue-header">
               <span>正常消息队列</span>
@@ -39,42 +53,73 @@
                 class="message-item"
                 :class="{ processing: msg.processing }"
               >
-                <div class="msg-id">#{{ msg.id }}</div>
-                <div class="msg-retries" v-if="msg.retries > 0">
+                <div class="msg-id">
+                  #{{ msg.id }}
+                </div>
+                <div
+                  v-if="msg.retries > 0"
+                  class="msg-retries"
+                >
                   重试: {{ msg.retries }}/{{ maxRetries }}
                 </div>
               </div>
-              <div v-if="mainQueue.length === 0" class="empty">队列为空</div>
-              <div v-else-if="mainQueue.length > 3" class="more">
+              <div
+                v-if="mainQueue.length === 0"
+                class="empty"
+              >
+                队列为空
+              </div>
+              <div
+                v-else-if="mainQueue.length > 3"
+                class="more"
+              >
                 还有 {{ mainQueue.length - 3 }} 条...
               </div>
             </div>
           </div>
-          <button class="add-btn" @click="addMessage" :disabled="processing">
+          <button
+            class="add-btn"
+            :disabled="processing"
+            @click="addMessage"
+          >
             + 添加消息
           </button>
         </div>
 
         <div class="processing-section">
-          <div class="section-title">⚙️ 消费处理</div>
+          <div class="section-title">
+            ⚙️ 消费处理
+          </div>
           <div class="processor-box">
-            <div class="processor-icon" :class="{ active: processing }">
+            <div
+              class="processor-icon"
+              :class="{ active: processing }"
+            >
               {{ processing ? '⚙️' : '💤' }}
             </div>
             <div class="processor-status">
               {{ processing ? '处理中...' : '空闲' }}
             </div>
-            <div v-if="currentMessage" class="current-msg">
+            <div
+              v-if="currentMessage"
+              class="current-msg"
+            >
               处理: #{{ currentMessage.id }}
             </div>
-            <div v-if="lastResult" class="last-result" :class="lastResult.type">
+            <div
+              v-if="lastResult"
+              class="last-result"
+              :class="lastResult.type"
+            >
               {{ lastResult.message }}
             </div>
           </div>
         </div>
 
         <div class="dlq-section">
-          <div class="section-title">⚠️ 死信队列</div>
+          <div class="section-title">
+            ⚠️ 死信队列
+          </div>
           <div class="queue-box dead-letter">
             <div class="queue-header">
               <span>失败消息</span>
@@ -86,21 +131,31 @@
                 :key="msg.id"
                 class="message-item failed"
               >
-                <div class="msg-id">#{{ msg.id }}</div>
-                <div class="msg-error">{{ msg.error }}</div>
+                <div class="msg-id">
+                  #{{ msg.id }}
+                </div>
+                <div class="msg-error">
+                  {{ msg.error }}
+                </div>
               </div>
-              <div v-if="deadLetterQueue.length === 0" class="empty">
+              <div
+                v-if="deadLetterQueue.length === 0"
+                class="empty"
+              >
                 无失败消息
               </div>
-              <div v-else-if="deadLetterQueue.length > 2" class="more">
+              <div
+                v-else-if="deadLetterQueue.length > 2"
+                class="more"
+              >
                 还有 {{ deadLetterQueue.length - 2 }} 条...
               </div>
             </div>
           </div>
           <button
             class="retry-btn"
-            @click="retryDeadLetters"
             :disabled="deadLetterQueue.length === 0"
+            @click="retryDeadLetters"
           >
             🔄 重试死信
           </button>
@@ -109,20 +164,36 @@
 
       <div class="stats">
         <div class="stat-card">
-          <div class="stat-label">总消息数</div>
-          <div class="stat-value">{{ totalMessages }}</div>
+          <div class="stat-label">
+            总消息数
+          </div>
+          <div class="stat-value">
+            {{ totalMessages }}
+          </div>
         </div>
         <div class="stat-card success">
-          <div class="stat-label">成功处理</div>
-          <div class="stat-value">{{ successCount }}</div>
+          <div class="stat-label">
+            成功处理
+          </div>
+          <div class="stat-value">
+            {{ successCount }}
+          </div>
         </div>
         <div class="stat-card warning">
-          <div class="stat-label">进入死信</div>
-          <div class="stat-value">{{ deadLetterCount }}</div>
+          <div class="stat-label">
+            进入死信
+          </div>
+          <div class="stat-value">
+            {{ deadLetterCount }}
+          </div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">成功率</div>
-          <div class="stat-value">{{ successRate }}%</div>
+          <div class="stat-label">
+            成功率
+          </div>
+          <div class="stat-value">
+            {{ successRate }}%
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
index 166fa1a..d1df662 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
@@ -29,13 +29,22 @@
 
     <div class="demo-content">
       <!-- 紧耦合模式 -->
-      <div v-if="!useAsync" class="synchronous-mode">
+      <div
+        v-if="!useAsync"
+        class="synchronous-mode"
+      >
         <div class="scenario">
-          <div class="scenario-title">❌ 紧耦合的致命问题</div>
+          <div class="scenario-title">
+            ❌ 紧耦合的致命问题
+          </div>
           <div class="flow-diagram">
             <div class="service-box order">
-              <div class="service-name">订单服务</div>
-              <div class="service-desc">创建订单</div>
+              <div class="service-name">
+                订单服务
+              </div>
+              <div class="service-desc">
+                创建订单
+              </div>
             </div>
 
             <div class="arrows">
@@ -45,9 +54,14 @@
                 class="sync-call"
                 :class="{ active: call.active }"
               >
-                <div class="call-line"></div>
-                <div class="call-label">{{ call.service }}</div>
-                <div v-if="call.active" class="call-status">
+                <div class="call-line" />
+                <div class="call-label">
+                  {{ call.service }}
+                </div>
+                <div
+                  v-if="call.active"
+                  class="call-status"
+                >
                   {{ call.status }}
                 </div>
               </div>
@@ -57,9 +71,16 @@
               class="service-box notification"
               :class="{ failed: notificationFailed }"
             >
-              <div class="service-name">通知服务</div>
-              <div class="service-desc">发送短信/邮件</div>
-              <div v-if="notificationFailed" class="error-msg">
+              <div class="service-name">
+                通知服务
+              </div>
+              <div class="service-desc">
+                发送短信/邮件
+              </div>
+              <div
+                v-if="notificationFailed"
+                class="error-msg"
+              >
                 服务宕机 ❌
               </div>
             </div>
@@ -68,66 +89,94 @@
           <div class="problem-list">
             <div class="problem-item">
               <span class="icon">⚠️</span>
-              <span
-                ><strong>依赖性强：</strong>通知服务宕机,订单创建失败</span
-              >
+              <span><strong>依赖性强：</strong>通知服务宕机,订单创建失败</span>
             </div>
             <div class="problem-item">
               <span class="icon">⚠️</span>
-              <span
-                ><strong>响应慢：</strong>总耗时 = 300ms + 500ms + 400ms =
-                1200ms</span
-              >
+              <span><strong>响应慢：</strong>总耗时 = 300ms + 500ms + 400ms =
+                1200ms</span>
             </div>
             <div class="problem-item">
               <span class="icon">⚠️</span>
-              <span
-                ><strong>扩展难：</strong>增加新服务需要修改订单代码</span
-              >
+              <span><strong>扩展难：</strong>增加新服务需要修改订单代码</span>
             </div>
           </div>
 
-          <button class="test-btn fail" @click="testSyncCall">
+          <button
+            class="test-btn fail"
+            @click="testSyncCall"
+          >
             模拟通知服务故障
           </button>
         </div>
       </div>
 
       <!-- 松耦合模式 -->
-      <div v-else class="asynchronous-mode">
+      <div
+        v-else
+        class="asynchronous-mode"
+      >
         <div class="scenario">
-          <div class="scenario-title">✅ 松耦合的核心优势</div>
+          <div class="scenario-title">
+            ✅ 松耦合的核心优势
+          </div>
           <div class="flow-diagram">
             <div class="service-box order">
-              <div class="service-name">订单服务</div>
-              <div class="service-desc">创建订单 + 发送消息</div>
+              <div class="service-name">
+                订单服务
+              </div>
+              <div class="service-desc">
+                创建订单 + 发送消息
+              </div>
             </div>
 
             <div class="mq-bridge">
               <div class="mq-box">
-                <div class="mq-icon">📨</div>
-                <div class="mq-label">消息队列</div>
-                <div v-if="messageInQueue" class="msg-indicator">
+                <div class="mq-icon">
+                  📨
+                </div>
+                <div class="mq-label">
+                  消息队列
+                </div>
+                <div
+                  v-if="messageInQueue"
+                  class="msg-indicator"
+                >
                   消息已发送
                 </div>
               </div>
-              <div class="flow-arrow">→</div>
+              <div class="flow-arrow">
+                →
+              </div>
             </div>
 
             <div class="consumers-group">
-              <div class="consumer-box" :class="{ failed: consumerFailed }">
-                <div class="consumer-name">短信服务</div>
+              <div
+                class="consumer-box"
+                :class="{ failed: consumerFailed }"
+              >
+                <div class="consumer-name">
+                  短信服务
+                </div>
                 <div class="consumer-status">
                   {{ consumerFailed ? '离线(不影响订单)' : '运行中' }}
                 </div>
               </div>
               <div class="consumer-box">
-                <div class="consumer-name">邮件服务</div>
-                <div class="consumer-status">运行中</div>
+                <div class="consumer-name">
+                  邮件服务
+                </div>
+                <div class="consumer-status">
+                  运行中
+                </div>
               </div>
               <div class="consumer-box">
-                <div class="consumer-name">积分服务</div>
-                <div class="consumer-status">运行中</div>
+                <div class="consumer-name">
+                  积分服务
+                </div>
+                <div class="consumer-status">
+                  运行中
+                </div>
               </div>
             </div>
           </div>
@@ -135,25 +184,22 @@
           <div class="benefit-list">
             <div class="benefit-item">
               <span class="icon">✅</span>
-              <span
-                ><strong>独立运行：</strong>通知服务宕机不影响订单创建</span
-              >
+              <span><strong>独立运行：</strong>通知服务宕机不影响订单创建</span>
             </div>
             <div class="benefit-item">
               <span class="icon">✅</span>
-              <span
-                ><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span
-              >
+              <span><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span>
             </div>
             <div class="benefit-item">
               <span class="icon">✅</span>
-              <span
-                ><strong>易扩展：</strong>增加新消费者无需修改订单代码</span
-              >
+              <span><strong>易扩展：</strong>增加新消费者无需修改订单代码</span>
             </div>
           </div>
 
-          <button class="test-btn success" @click="testAsyncCall">
+          <button
+            class="test-btn success"
+            @click="testAsyncCall"
+          >
             发送订单消息
           </button>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue
index e2e8998..6892666 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/DelayedMessageDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="delayed-message-demo">
     <div class="header">
-      <div class="title">延迟消息：让消息"定时送达"</div>
-      <div class="subtitle">实现订单超时取消、定时提醒等功能</div>
+      <div class="title">
+        延迟消息：让消息"定时送达"
+      </div>
+      <div class="subtitle">
+        实现订单超时取消、定时提醒等功能
+      </div>
     </div>
 
     <div class="scenarios">
@@ -23,10 +27,16 @@
 
     <div class="demo-area">
       <div class="sender-section">
-        <div class="section-title">📤 发送延迟消息</div>
+        <div class="section-title">
+          📤 发送延迟消息
+        </div>
         <div class="scenario-info">
-          <div class="scenario-name">{{ currentScenario.name }}</div>
-          <div class="scenario-desc">{{ currentScenario.description }}</div>
+          <div class="scenario-name">
+            {{ currentScenario.name }}
+          </div>
+          <div class="scenario-desc">
+            {{ currentScenario.description }}
+          </div>
         </div>
 
         <div class="delay-setting">
@@ -43,25 +53,34 @@
             </button>
           </div>
           <div class="delay-custom">
-            <input v-model="customDelay" type="number" min="1" max="3600" />
+            <input
+              v-model="customDelay"
+              type="number"
+              min="1"
+              max="3600"
+            >
             <span>秒</span>
           </div>
         </div>
 
         <button
           class="send-btn"
-          @click="sendDelayedMessage"
           :disabled="sending"
+          @click="sendDelayedMessage"
         >
           {{ sending ? '发送中...' : '📨 发送延迟消息' }}
         </button>
       </div>
 
       <div class="timeline-section">
-        <div class="section-title">⏰ 延迟队列时间轴</div>
+        <div class="section-title">
+          ⏰ 延迟队列时间轴
+        </div>
         <div class="timeline">
           <div class="timeline-now">
-            <div class="now-marker">现在</div>
+            <div class="now-marker">
+              现在
+            </div>
           </div>
 
           <div class="delayed-messages">
@@ -72,29 +91,44 @@
               :style="{ left: msg.position + '%' }"
             >
               <div class="msg-bubble">
-                <div class="msg-id">#{{ msg.id }}</div>
-                <div class="msg-time">{{ msg.remaining }}s 后</div>
+                <div class="msg-id">
+                  #{{ msg.id }}
+                </div>
+                <div class="msg-time">
+                  {{ msg.remaining }}s 后
+                </div>
               </div>
               <div
                 class="msg-timer"
                 :style="{ height: msg.timerHeight + '%' }"
-              ></div>
+              />
             </div>
           </div>
 
           <div class="timeline-scale">
-            <div v-for="tick in timelineTicks" :key="tick" class="tick">
-              <div class="tick-line"></div>
-              <div class="tick-label">{{ tick }}s</div>
+            <div
+              v-for="tick in timelineTicks"
+              :key="tick"
+              class="tick"
+            >
+              <div class="tick-line" />
+              <div class="tick-label">
+                {{ tick }}s
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="result-section">
-        <div class="section-title">📥 到期消息</div>
+        <div class="section-title">
+          📥 到期消息
+        </div>
         <div class="result-box">
-          <div v-if="deliveredMessages.length === 0" class="empty">
+          <div
+            v-if="deliveredMessages.length === 0"
+            class="empty"
+          >
             等待消息到期...
           </div>
           <div
@@ -106,40 +140,70 @@
               <span class="msg-id">#{{ msg.id }}</span>
               <span class="msg-time">{{ msg.deliveredAt }}</span>
             </div>
-            <div class="msg-content">{{ msg.content }}</div>
+            <div class="msg-content">
+              {{ msg.content }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="use-cases">
-      <div class="cases-title">💡 典型应用场景</div>
+      <div class="cases-title">
+        💡 典型应用场景
+      </div>
       <div class="cases-grid">
         <div class="case-card">
-          <div class="case-icon">🛒</div>
-          <div class="case-name">订单超时取消</div>
-          <div class="case-desc">下单后 30 分钟未支付，自动取消订单</div>
+          <div class="case-icon">
+            🛒
+          </div>
+          <div class="case-name">
+            订单超时取消
+          </div>
+          <div class="case-desc">
+            下单后 30 分钟未支付，自动取消订单
+          </div>
         </div>
         <div class="case-card">
-          <div class="case-icon">🔔</div>
-          <div class="case-name">定时提醒</div>
-          <div class="case-desc">会议开始前 15 分钟，发送提醒通知</div>
+          <div class="case-icon">
+            🔔
+          </div>
+          <div class="case-name">
+            定时提醒
+          </div>
+          <div class="case-desc">
+            会议开始前 15 分钟，发送提醒通知
+          </div>
         </div>
         <div class="case-card">
-          <div class="case-icon">🎁</div>
-          <div class="case-name">会员过期提醒</div>
-          <div class="case-desc">会员到期前 3 天，发送续费提醒</div>
+          <div class="case-icon">
+            🎁
+          </div>
+          <div class="case-name">
+            会员过期提醒
+          </div>
+          <div class="case-desc">
+            会员到期前 3 天，发送续费提醒
+          </div>
         </div>
         <div class="case-card">
-          <div class="case-icon">📊</div>
-          <div class="case-name">数据统计</div>
-          <div class="case-desc">每天凌晨 2 点，统计前一天的日报数据</div>
+          <div class="case-icon">
+            📊
+          </div>
+          <div class="case-name">
+            数据统计
+          </div>
+          <div class="case-desc">
+            每天凌晨 2 点，统计前一天的日报数据
+          </div>
         </div>
       </div>
     </div>
 
     <div class="implementation">
-      <div class="impl-title">🔧 实现方式对比</div>
+      <div class="impl-title">
+        🔧 实现方式对比
+      </div>
       <div class="impl-table">
         <table>
           <thead>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
index 8f122fe..3e75b7b 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
@@ -29,32 +29,55 @@
 
     <div class="demo-content">
       <!-- 银行转账场景 -->
-      <div v-if="scenario === 'transfer'" class="transfer-scenario">
+      <div
+        v-if="scenario === 'transfer'"
+        class="transfer-scenario"
+      >
         <div class="scenario-header">
-          <div class="title">❌ 非幂等操作: 银行转账</div>
-          <div class="subtitle">重复消费会导致多次扣款</div>
+          <div class="title">
+            ❌ 非幂等操作: 银行转账
+          </div>
+          <div class="subtitle">
+            重复消费会导致多次扣款
+          </div>
         </div>
 
         <div class="account-system">
           <div class="account-card sender">
-            <div class="account-name">发送方</div>
+            <div class="account-name">
+              发送方
+            </div>
             <div class="account-balance">
               余额: ¥<span class="balance-amount">{{ senderBalance }}</span>
             </div>
           </div>
 
           <div class="transfer-flow">
-            <div class="flow-animation" :class="{ active: isTransferring }">
-              <div class="money-icon">💰</div>
-              <div class="flow-label">转账 ¥100</div>
+            <div
+              class="flow-animation"
+              :class="{ active: isTransferring }"
+            >
+              <div class="money-icon">
+                💰
+              </div>
+              <div class="flow-label">
+                转账 ¥100
+              </div>
             </div>
-            <div class="retry-info" v-if="retryCount > 0">
-              <div class="retry-badge">重试 {{ retryCount }} 次</div>
+            <div
+              v-if="retryCount > 0"
+              class="retry-info"
+            >
+              <div class="retry-badge">
+                重试 {{ retryCount }} 次
+              </div>
             </div>
           </div>
 
           <div class="account-card receiver">
-            <div class="account-name">接收方</div>
+            <div class="account-name">
+              接收方
+            </div>
             <div class="account-balance">
               余额: ¥<span class="balance-amount">{{ receiverBalance }}</span>
             </div>
@@ -71,7 +94,7 @@
                   :class="{ active: useIdempotence }"
                   @click="useIdempotence = !useIdempotence"
                 >
-                  <span class="toggle-slider"></span>
+                  <span class="toggle-slider" />
                 </button>
                 <span class="toggle-label">{{ useIdempotence ? '已启用' : '未启用' }}</span>
               </div>
@@ -79,14 +102,17 @@
 
             <button
               class="action-btn"
-              @click="simulateTransfer"
               :disabled="isTransferring"
+              @click="simulateTransfer"
             >
               {{ isTransferring ? '处理中...' : '模拟重复消费' }}
             </button>
           </div>
 
-          <div class="idempotence-info" v-if="useIdempotence">
+          <div
+            v-if="useIdempotence"
+            class="idempotence-info"
+          >
             <div class="info-item">
               <span class="info-icon">🔑</span>
               <span class="info-text">每笔交易有唯一ID,重复请求被自动过滤</span>
@@ -95,7 +121,9 @@
         </div>
 
         <div class="result-log">
-          <div class="log-header">处理日志</div>
+          <div class="log-header">
+            处理日志
+          </div>
           <div class="log-list">
             <div
               v-for="(log, index) in logs"
@@ -106,7 +134,10 @@
               <span class="log-time">{{ log.time }}</span>
               <span class="log-message">{{ log.message }}</span>
             </div>
-            <div v-if="logs.length === 0" class="log-empty">
+            <div
+              v-if="logs.length === 0"
+              class="log-empty"
+            >
               暂无日志,点击按钮开始模拟
             </div>
           </div>
@@ -114,32 +145,53 @@
 
         <div class="comparison-box">
           <div class="comparison-item bad">
-            <div class="comp-header">❌ 无幂等保护</div>
+            <div class="comp-header">
+              ❌ 无幂等保护
+            </div>
             <div class="comp-body">
-              <div class="comp-result">扣款 ¥{{ (retryCount + 1) * 100 }}</div>
-              <div class="comp-desc">重复消费造成多次扣款</div>
+              <div class="comp-result">
+                扣款 ¥{{ (retryCount + 1) * 100 }}
+              </div>
+              <div class="comp-desc">
+                重复消费造成多次扣款
+              </div>
             </div>
           </div>
           <div class="comparison-item good">
-            <div class="comp-header">✅ 有幂等保护</div>
+            <div class="comp-header">
+              ✅ 有幂等保护
+            </div>
             <div class="comp-body">
-              <div class="comp-result">扣款 ¥100</div>
-              <div class="comp-desc">重复请求被过滤,只扣一次</div>
+              <div class="comp-result">
+                扣款 ¥100
+              </div>
+              <div class="comp-desc">
+                重复请求被过滤,只扣一次
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 电梯按钮场景 -->
-      <div v-else class="elevator-scenario">
+      <div
+        v-else
+        class="elevator-scenario"
+      >
         <div class="scenario-header">
-          <div class="title">✅ 天然幂等操作: 电梯按钮</div>
-          <div class="subtitle">无论按多少次,电梯只响应一次</div>
+          <div class="title">
+            ✅ 天然幂等操作: 电梯按钮
+          </div>
+          <div class="subtitle">
+            无论按多少次,电梯只响应一次
+          </div>
         </div>
 
         <div class="elevator-system">
           <div class="elevator-panel">
-            <div class="panel-title">电梯按钮面板</div>
+            <div class="panel-title">
+              电梯按钮面板
+            </div>
             <div class="button-grid">
               <button
                 v-for="floor in floors"
@@ -169,8 +221,13 @@
                 <span class="floor-num">{{ floor }}F</span>
               </div>
             </div>
-            <div class="elevator-car" :style="{ bottom: elevatorPosition }">
-              <div class="car-icon">🛗</div>
+            <div
+              class="elevator-car"
+              :style="{ bottom: elevatorPosition }"
+            >
+              <div class="car-icon">
+                🛗
+              </div>
             </div>
           </div>
         </div>
@@ -178,7 +235,10 @@
         <div class="control-panel">
           <div class="control-item">
             <label>快速连按3次</label>
-            <button class="action-btn" @click="pressMultipleTimes">
+            <button
+              class="action-btn"
+              @click="pressMultipleTimes"
+            >
               🚀 连续点击
             </button>
           </div>
@@ -189,7 +249,9 @@
         </div>
 
         <div class="explanation-box">
-          <div class="explanation-title">为什么电梯按钮是幂等的?</div>
+          <div class="explanation-title">
+            为什么电梯按钮是幂等的?
+          </div>
           <div class="explanation-list">
             <div class="explanation-item">
               <span class="icon">✅</span>
@@ -209,7 +271,9 @@
     </div>
 
     <div class="principle-box">
-      <div class="principle-icon">🎯</div>
+      <div class="principle-icon">
+        🎯
+      </div>
       <div class="principle-content">
         <strong>幂等性核心原则:</strong>
         {{ scenario === 'transfer'
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
index 8d827e6..022172d 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MQArchitectureDemo.vue
@@ -2,10 +2,15 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <p class="hint">
+        {{ description }}
+      </p>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         消息队列架构演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
index 4392732..e7056cb 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MQComparisonDemo.vue
@@ -2,10 +2,15 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <p class="hint">
+        {{ description }}
+      </p>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         消息队列对比演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue
index f24bb83..8052f38 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="mq-comparison-demo">
     <div class="header">
-      <div class="title">主流消息队列对比</div>
-      <div class="subtitle">选择不同 MQ，查看特性对比和适用场景</div>
+      <div class="title">
+        主流消息队列对比
+      </div>
+      <div class="subtitle">
+        选择不同 MQ，查看特性对比和适用场景
+      </div>
     </div>
 
     <div class="mq-selector">
@@ -24,48 +28,74 @@
     <div class="mq-details">
       <div class="mq-card">
         <div class="mq-header">
-          <div class="mq-name">{{ currentMQ.label }}</div>
-          <div class="mq-tag">{{ currentMQ.positioning }}</div>
+          <div class="mq-name">
+            {{ currentMQ.label }}
+          </div>
+          <div class="mq-tag">
+            {{ currentMQ.positioning }}
+          </div>
         </div>
 
         <div class="metrics-grid">
           <div class="metric">
-            <div class="metric-label">吞吐量</div>
-            <div class="metric-value">{{ currentMQ.throughput }}</div>
+            <div class="metric-label">
+              吞吐量
+            </div>
+            <div class="metric-value">
+              {{ currentMQ.throughput }}
+            </div>
             <div class="metric-bar">
               <div
                 class="bar-fill"
                 :style="{ width: currentMQ.throughputPercent + '%' }"
-              ></div>
+              />
             </div>
           </div>
 
           <div class="metric">
-            <div class="metric-label">延迟</div>
-            <div class="metric-value">{{ currentMQ.latency }}</div>
-            <div class="metric-desc">{{ currentMQ.latencyDesc }}</div>
+            <div class="metric-label">
+              延迟
+            </div>
+            <div class="metric-value">
+              {{ currentMQ.latency }}
+            </div>
+            <div class="metric-desc">
+              {{ currentMQ.latencyDesc }}
+            </div>
           </div>
 
           <div class="metric">
-            <div class="metric-label">可靠性</div>
-            <div class="metric-value">{{ currentMQ.reliability }}</div>
-            <div class="metric-desc">{{ currentMQ.reliabilityDesc }}</div>
+            <div class="metric-label">
+              可靠性
+            </div>
+            <div class="metric-value">
+              {{ currentMQ.reliability }}
+            </div>
+            <div class="metric-desc">
+              {{ currentMQ.reliabilityDesc }}
+            </div>
           </div>
 
           <div class="metric">
-            <div class="metric-label">学习曲线</div>
-            <div class="metric-value">{{ currentMQ.learning }}</div>
+            <div class="metric-label">
+              学习曲线
+            </div>
+            <div class="metric-value">
+              {{ currentMQ.learning }}
+            </div>
             <div class="metric-bar">
               <div
                 class="bar-fill learning"
                 :style="{ width: currentMQ.learningPercent + '%' }"
-              ></div>
+              />
             </div>
           </div>
         </div>
 
         <div class="features">
-          <div class="feature-title">核心特性</div>
+          <div class="feature-title">
+            核心特性
+          </div>
           <div class="feature-list">
             <div
               v-for="feature in currentMQ.features"
@@ -78,18 +108,28 @@
         </div>
 
         <div class="use-cases">
-          <div class="use-case-title">✅ 适用场景</div>
+          <div class="use-case-title">
+            ✅ 适用场景
+          </div>
           <ul class="use-case-list">
-            <li v-for="useCase in currentMQ.useCases" :key="useCase">
+            <li
+              v-for="useCase in currentMQ.useCases"
+              :key="useCase"
+            >
               {{ useCase }}
             </li>
           </ul>
         </div>
 
         <div class="not-recommended">
-          <div class="not-title">⚠️ 不推荐场景</div>
+          <div class="not-title">
+            ⚠️ 不推荐场景
+          </div>
           <ul class="not-list">
-            <li v-for="item in currentMQ.notRecommended" :key="item">
+            <li
+              v-for="item in currentMQ.notRecommended"
+              :key="item"
+            >
               {{ item }}
             </li>
           </ul>
@@ -98,7 +138,9 @@
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">快速对比表</div>
+      <div class="table-title">
+        快速对比表
+      </div>
       <table>
         <thead>
           <tr>
@@ -168,23 +210,37 @@
     </div>
 
     <div class="recommendation">
-      <div class="rec-title">💡 选择建议</div>
+      <div class="rec-title">
+        💡 选择建议
+      </div>
       <div class="rec-content">
-        <div v-if="selectedMQ === 'rabbitmq'" class="rec-text">
+        <div
+          v-if="selectedMQ === 'rabbitmq'"
+          class="rec-text"
+        >
           <strong>RabbitMQ</strong>
           是最稳妥的选择，适合大多数传统业务场景。如果团队有 AMQP
           经验，或者需要复杂的路由规则，优先选择它。
         </div>
-        <div v-else-if="selectedMQ === 'kafka'" class="rec-text">
+        <div
+          v-else-if="selectedMQ === 'kafka'"
+          class="rec-text"
+        >
           <strong>Kafka</strong> 适合大数据量和流式处理场景。如果需要处理百万级
           TPS，或者需要消息回溯、与大数据生态集成，选择 Kafka。
         </div>
-        <div v-else-if="selectedMQ === 'rocketmq'" class="rec-text">
+        <div
+          v-else-if="selectedMQ === 'rocketmq'"
+          class="rec-text"
+        >
           <strong>RocketMQ</strong>
           是阿里开源，特别适合电商、金融场景。如果需要事务消息、顺序消息、延迟消息等高级特性，RocketMQ
           是最佳选择。
         </div>
-        <div v-else class="rec-text">
+        <div
+          v-else
+          class="rec-text"
+        >
           <strong>Redis Stream</strong> 最轻量，适合小团队和 MVP
           验证。如果已经有 Redis 基础设施，且对可靠性要求不是极高，可以先用
           Redis Stream 快速实现。
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue
index 17e6296..3a53525 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComponentsDemo.vue
@@ -5,43 +5,68 @@
 <template>
   <div class="mq-components-demo">
     <div class="header">
-      <div class="title">消息队列的三要素</div>
-      <div class="subtitle">生产者、消息代理、消费者的关系</div>
+      <div class="title">
+        消息队列的三要素
+      </div>
+      <div class="subtitle">
+        生产者、消息代理、消费者的关系
+      </div>
     </div>
 
     <div class="components-flow">
       <div class="component producer">
         <div class="comp-header">
-          <div class="comp-icon">📤</div>
-          <div class="comp-name">生产者 Producer</div>
+          <div class="comp-icon">
+            📤
+          </div>
+          <div class="comp-name">
+            生产者 Producer
+          </div>
         </div>
         <div class="comp-content">
-          <div class="comp-desc">发送消息的一方</div>
-          <div class="comp-example">例子：订单服务</div>
+          <div class="comp-desc">
+            发送消息的一方
+          </div>
+          <div class="comp-example">
+            例子：订单服务
+          </div>
           <button
             class="action-btn"
-            @click="produceMessage"
             :disabled="producing"
+            @click="produceMessage"
           >
             {{ producing ? '发送中...' : '发送消息' }}
           </button>
         </div>
       </div>
 
-      <div class="arrow" :class="{ active: messageInTransit }">
+      <div
+        class="arrow"
+        :class="{ active: messageInTransit }"
+      >
         {{ messageInTransit ? '📨' : '→' }}
       </div>
 
       <div class="component broker">
         <div class="comp-header">
-          <div class="comp-icon">📦</div>
-          <div class="comp-name">消息代理 Broker</div>
+          <div class="comp-icon">
+            📦
+          </div>
+          <div class="comp-name">
+            消息代理 Broker
+          </div>
         </div>
         <div class="comp-content">
-          <div class="comp-desc">存储和转发消息</div>
-          <div class="comp-example">例子：RabbitMQ, Kafka</div>
+          <div class="comp-desc">
+            存储和转发消息
+          </div>
+          <div class="comp-example">
+            例子：RabbitMQ, Kafka
+          </div>
           <div class="broker-storage">
-            <div class="storage-label">消息存储</div>
+            <div class="storage-label">
+              消息存储
+            </div>
             <div class="storage-box">
               <transition-group name="message">
                 <div
@@ -52,7 +77,10 @@
                   消息 #{{ msg.id }}
                 </div>
               </transition-group>
-              <div v-if="brokerMessages.length === 0" class="empty">
+              <div
+                v-if="brokerMessages.length === 0"
+                class="empty"
+              >
                 暂无消息
               </div>
             </div>
@@ -60,26 +88,40 @@
         </div>
       </div>
 
-      <div class="arrow" :class="{ active: consuming }">
+      <div
+        class="arrow"
+        :class="{ active: consuming }"
+      >
         {{ consuming ? '📨' : '→' }}
       </div>
 
       <div class="component consumer">
         <div class="comp-header">
-          <div class="comp-icon">📥</div>
-          <div class="comp-name">消费者 Consumer</div>
+          <div class="comp-icon">
+            📥
+          </div>
+          <div class="comp-name">
+            消费者 Consumer
+          </div>
         </div>
         <div class="comp-content">
-          <div class="comp-desc">接收并处理消息</div>
-          <div class="comp-example">例子：库存服务</div>
+          <div class="comp-desc">
+            接收并处理消息
+          </div>
+          <div class="comp-example">
+            例子：库存服务
+          </div>
           <button
             class="action-btn consume"
-            @click="consumeMessage"
             :disabled="brokerMessages.length === 0 || consuming"
+            @click="consumeMessage"
           >
             {{ consuming ? '处理中...' : '消费消息' }}
           </button>
-          <div v-if="lastConsumed" class="last-consumed">
+          <div
+            v-if="lastConsumed"
+            class="last-consumed"
+          >
             已处理: #{{ lastConsumed }}
           </div>
         </div>
@@ -88,7 +130,9 @@
 
     <div class="component-details">
       <div class="detail-card producer">
-        <div class="detail-title">📤 生产者 (Producer)</div>
+        <div class="detail-title">
+          📤 生产者 (Producer)
+        </div>
         <div class="detail-content">
           <div class="detail-item">
             <strong>职责：</strong>创建并发送消息到 Broker
@@ -108,7 +152,9 @@
       </div>
 
       <div class="detail-card broker">
-        <div class="detail-title">📦 消息代理 (Broker)</div>
+        <div class="detail-title">
+          📦 消息代理 (Broker)
+        </div>
         <div class="detail-content">
           <div class="detail-item">
             <strong>职责：</strong>存储、转发、管理消息
@@ -129,7 +175,9 @@
       </div>
 
       <div class="detail-card consumer">
-        <div class="detail-title">📥 消费者 (Consumer)</div>
+        <div class="detail-title">
+          📥 消费者 (Consumer)
+        </div>
         <div class="detail-content">
           <div class="detail-item">
             <strong>职责：</strong>从 Broker 接收并处理消息
@@ -155,45 +203,85 @@
     </div>
 
     <div class="message-flow">
-      <div class="flow-title">🔄 完整的消息流程</div>
+      <div class="flow-title">
+        🔄 完整的消息流程
+      </div>
       <div class="flow-steps">
         <div class="flow-step">
-          <div class="step-num">1</div>
+          <div class="step-num">
+            1
+          </div>
           <div class="step-content">
-            <div class="step-title">生产者发送消息</div>
-            <div class="step-desc">订单服务创建订单后，发送"订单创建"消息</div>
+            <div class="step-title">
+              生产者发送消息
+            </div>
+            <div class="step-desc">
+              订单服务创建订单后，发送"订单创建"消息
+            </div>
           </div>
         </div>
-        <div class="flow-arrow">→</div>
+        <div class="flow-arrow">
+          →
+        </div>
         <div class="flow-step">
-          <div class="step-num">2</div>
+          <div class="step-num">
+            2
+          </div>
           <div class="step-content">
-            <div class="step-title">Broker 存储消息</div>
-            <div class="step-desc">消息队列接收并存储消息（持久化到磁盘）</div>
+            <div class="step-title">
+              Broker 存储消息
+            </div>
+            <div class="step-desc">
+              消息队列接收并存储消息（持久化到磁盘）
+            </div>
           </div>
         </div>
-        <div class="flow-arrow">→</div>
+        <div class="flow-arrow">
+          →
+        </div>
         <div class="flow-step">
-          <div class="step-num">3</div>
+          <div class="step-num">
+            3
+          </div>
           <div class="step-content">
-            <div class="step-title">消费者拉取消息</div>
-            <div class="step-desc">库存服务从队列中拉取消息</div>
+            <div class="step-title">
+              消费者拉取消息
+            </div>
+            <div class="step-desc">
+              库存服务从队列中拉取消息
+            </div>
           </div>
         </div>
-        <div class="flow-arrow">→</div>
+        <div class="flow-arrow">
+          →
+        </div>
         <div class="flow-step">
-          <div class="step-num">4</div>
+          <div class="step-num">
+            4
+          </div>
           <div class="step-content">
-            <div class="step-title">处理业务逻辑</div>
-            <div class="step-desc">扣减库存，创建出库记录</div>
+            <div class="step-title">
+              处理业务逻辑
+            </div>
+            <div class="step-desc">
+              扣减库存，创建出库记录
+            </div>
           </div>
         </div>
-        <div class="flow-arrow">→</div>
+        <div class="flow-arrow">
+          →
+        </div>
         <div class="flow-step">
-          <div class="step-num">5</div>
+          <div class="step-num">
+            5
+          </div>
           <div class="step-content">
-            <div class="step-title">发送 ACK</div>
-            <div class="step-desc">告诉 Broker 消息处理成功，可以删除</div>
+            <div class="step-title">
+              发送 ACK
+            </div>
+            <div class="step-desc">
+              告诉 Broker 消息处理成功，可以删除
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue
index 6725139..80f3130 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueDemo.vue
@@ -5,26 +5,44 @@
 <template>
   <div class="mq-demo">
     <div class="header">
-      <div class="title">消息队列：异步通信的"缓冲器"</div>
-      <div class="subtitle">观察消息如何通过队列实现异步处理</div>
+      <div class="title">
+        消息队列：异步通信的"缓冲器"
+      </div>
+      <div class="subtitle">
+        观察消息如何通过队列实现异步处理
+      </div>
     </div>
 
     <div class="flow-container">
       <div class="section producer">
-        <div class="section-title">生产者 Producer</div>
-        <div class="box producer-box">
-          <div class="icon">📤</div>
-          <div class="label">订单服务</div>
+        <div class="section-title">
+          生产者 Producer
         </div>
-        <button class="send-btn" @click="sendMessage" :disabled="sending">
+        <div class="box producer-box">
+          <div class="icon">
+            📤
+          </div>
+          <div class="label">
+            订单服务
+          </div>
+        </div>
+        <button
+          class="send-btn"
+          :disabled="sending"
+          @click="sendMessage"
+        >
           {{ sending ? '发送中...' : '发送消息' }}
         </button>
       </div>
 
       <div class="section broker">
-        <div class="section-title">消息代理 Broker</div>
+        <div class="section-title">
+          消息代理 Broker
+        </div>
         <div class="queue-container">
-          <div class="queue-label">消息队列 Queue</div>
+          <div class="queue-label">
+            消息队列 Queue
+          </div>
           <div class="queue-box">
             <transition-group name="message">
               <div
@@ -36,22 +54,43 @@
                 #{{ msg.id }}
               </div>
             </transition-group>
-            <div v-if="messages.length === 0" class="empty-queue">队列为空</div>
+            <div
+              v-if="messages.length === 0"
+              class="empty-queue"
+            >
+              队列为空
+            </div>
           </div>
           <div class="queue-stats">
-            <div class="stat">消息数: {{ messages.length }}</div>
-            <div class="stat">容量: {{ queueCapacity }}</div>
+            <div class="stat">
+              消息数: {{ messages.length }}
+            </div>
+            <div class="stat">
+              容量: {{ queueCapacity }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="section consumer">
-        <div class="section-title">消费者 Consumer</div>
-        <div class="box consumer-box" :class="{ processing: isProcessing }">
-          <div class="icon">{{ isProcessing ? '⚙️' : '📥' }}</div>
-          <div class="label">{{ isProcessing ? '处理中...' : '库存服务' }}</div>
+        <div class="section-title">
+          消费者 Consumer
         </div>
-        <div v-if="processedMessage" class="processed-msg">
+        <div
+          class="box consumer-box"
+          :class="{ processing: isProcessing }"
+        >
+          <div class="icon">
+            {{ isProcessing ? '⚙️' : '📥' }}
+          </div>
+          <div class="label">
+            {{ isProcessing ? '处理中...' : '库存服务' }}
+          </div>
+        </div>
+        <div
+          v-if="processedMessage"
+          class="processed-msg"
+        >
           已处理: #{{ processedMessage }}
         </div>
       </div>
@@ -60,41 +99,78 @@
     <div class="controls">
       <div class="control">
         <label>
-          <input v-model="autoConsume" type="checkbox" />
+          <input
+            v-model="autoConsume"
+            type="checkbox"
+          >
           自动消费
         </label>
       </div>
       <div class="control">
         <label>
-          <input v-model="showSync" type="checkbox" />
+          <input
+            v-model="showSync"
+            type="checkbox"
+          >
           显示同步对比
         </label>
       </div>
     </div>
 
-    <div v-if="showSync" class="comparison">
+    <div
+      v-if="showSync"
+      class="comparison"
+    >
       <div class="compare-col sync">
-        <div class="compare-title">同步调用 (Synchronous)</div>
-        <div class="compare-flow">
-          <div class="flow-item">A 调用 B</div>
-          <div class="arrow">⬇️</div>
-          <div class="flow-item wait">B 处理 (阻塞等待)</div>
-          <div class="arrow">⬇️</div>
-          <div class="flow-item">B 返回结果</div>
+        <div class="compare-title">
+          同步调用 (Synchronous)
+        </div>
+        <div class="compare-flow">
+          <div class="flow-item">
+            A 调用 B
+          </div>
+          <div class="arrow">
+            ⬇️
+          </div>
+          <div class="flow-item wait">
+            B 处理 (阻塞等待)
+          </div>
+          <div class="arrow">
+            ⬇️
+          </div>
+          <div class="flow-item">
+            B 返回结果
+          </div>
+        </div>
+        <div class="compare-desc">
+          总耗时 = 300ms + 500ms = 800ms
         </div>
-        <div class="compare-desc">总耗时 = 300ms + 500ms = 800ms</div>
       </div>
 
       <div class="compare-col async">
-        <div class="compare-title">异步调用 (Asynchronous)</div>
-        <div class="compare-flow">
-          <div class="flow-item">A 发送消息</div>
-          <div class="arrow">⬇️</div>
-          <div class="flow-item highlight">消息队列缓冲</div>
-          <div class="arrow">⬇️</div>
-          <div class="flow-item">B 稍后处理</div>
+        <div class="compare-title">
+          异步调用 (Asynchronous)
+        </div>
+        <div class="compare-flow">
+          <div class="flow-item">
+            A 发送消息
+          </div>
+          <div class="arrow">
+            ⬇️
+          </div>
+          <div class="flow-item highlight">
+            消息队列缓冲
+          </div>
+          <div class="arrow">
+            ⬇️
+          </div>
+          <div class="flow-item">
+            B 稍后处理
+          </div>
+        </div>
+        <div class="compare-desc">
+          A 只需 10ms，B 在后台慢慢处理
         </div>
-        <div class="compare-desc">A 只需 10ms，B 在后台慢慢处理</div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue
index b744665..6fa6caf 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/PeakShavingDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="peak-shaving-demo">
     <div class="header">
-      <div class="title">削峰填谷：把高峰"摊平"</div>
-      <div class="subtitle">模拟流量突增场景，观察队列如何保护后端系统</div>
+      <div class="title">
+        削峰填谷：把高峰"摊平"
+      </div>
+      <div class="subtitle">
+        模拟流量突增场景，观察队列如何保护后端系统
+      </div>
     </div>
 
     <div class="main-layout">
@@ -24,8 +28,10 @@
             max="1000"
             step="50"
             class="range-input process-range"
-          />
-          <div class="desc">后端系统的最大处理速度</div>
+          >
+          <div class="desc">
+            后端系统的最大处理速度
+          </div>
         </div>
 
         <div class="control-group">
@@ -40,19 +46,24 @@
             max="10000"
             step="500"
             class="range-input queue-range"
-          />
-          <div class="desc">消息队列能暂存的最大请求数</div>
+          >
+          <div class="desc">
+            消息队列能暂存的最大请求数
+          </div>
         </div>
 
         <div class="actions">
           <button
             class="action-btn burst-btn"
-            @click="triggerBurst"
             :disabled="isBursting"
+            @click="triggerBurst"
           >
             ⚡️ 模拟秒杀流量突增
           </button>
-          <button class="action-btn reset-btn" @click="reset">
+          <button
+            class="action-btn reset-btn"
+            @click="reset"
+          >
             🔄 重置系统
           </button>
         </div>
@@ -63,13 +74,17 @@
         <!-- 状态指标卡片 -->
         <div class="metrics-grid">
           <div class="metric-item">
-            <div class="m-label">当前入站流量</div>
+            <div class="m-label">
+              当前入站流量
+            </div>
             <div class="m-value blue">
               {{ currentRequestRate }} <span class="unit">req/s</span>
             </div>
           </div>
           <div class="metric-item">
-            <div class="m-label">队列积压量</div>
+            <div class="m-label">
+              队列积压量
+            </div>
             <div class="m-value orange">
               {{ queueLength }} <span class="unit">msgs</span>
             </div>
@@ -77,17 +92,21 @@
               <div
                 class="m-bar-fill"
                 :style="{ width: queuePercent + '%', background: queueColor }"
-              ></div>
+              />
             </div>
           </div>
           <div class="metric-item">
-            <div class="m-label">实际处理速率</div>
+            <div class="m-label">
+              实际处理速率
+            </div>
             <div class="m-value green">
               {{ currentProcessRate }} <span class="unit">req/s</span>
             </div>
           </div>
           <div class="metric-item">
-            <div class="m-label">丢弃请求 (限流)</div>
+            <div class="m-label">
+              丢弃请求 (限流)
+            </div>
             <div class="m-value red">
               {{ rejectedCount }} <span class="unit">req</span>
             </div>
@@ -96,28 +115,28 @@
 
         <!-- 实时图表 -->
         <div class="chart-container">
-          <canvas ref="chartCanvas" width="600" height="200"></canvas>
+          <canvas
+            ref="chartCanvas"
+            width="600"
+            height="200"
+          />
           <div class="chart-legend">
-            <span class="legend-item"
-              ><span class="dot blue"></span>入站流量 (用户请求)</span
-            >
-            <span class="legend-item"
-              ><span class="dot green"></span>处理流量 (系统负载)</span
-            >
-            <span class="legend-item"
-              ><span class="dot orange"></span>队列积压</span
-            >
+            <span class="legend-item"><span class="dot blue" />入站流量 (用户请求)</span>
+            <span class="legend-item"><span class="dot green" />处理流量 (系统负载)</span>
+            <span class="legend-item"><span class="dot orange" />队列积压</span>
           </div>
         </div>
       </div>
     </div>
 
     <div class="scenario-tips">
-      <div class="tip-icon">💡</div>
+      <div class="tip-icon">
+        💡
+      </div>
       <div class="tip-content">
         <strong>核心原理：</strong>
         当<strong>入站流量</strong>（蓝色）超过<strong>处理能力</strong>（绿色直线）时，多余的请求会被存入<strong>消息队列</strong>（橙色区域）。
-        <br />
+        <br>
         一旦流量高峰过去，系统会继续全速处理队列中的积压，直到队列清空。这就是"削峰填谷"。
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue
index 04fce29..2d6bb15 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/PointToPointVsPubSubDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="messaging-patterns-demo">
     <div class="header">
-      <div class="title">消息模式：点对点 vs 发布订阅</div>
-      <div class="subtitle">选择模式，观察消息如何分发</div>
+      <div class="title">
+        消息模式：点对点 vs 发布订阅
+      </div>
+      <div class="subtitle">
+        选择模式，观察消息如何分发
+      </div>
     </div>
 
     <div class="mode-selector">
@@ -27,24 +31,38 @@
     </div>
 
     <div class="description">
-      <div v-if="mode === 'p2p'" class="desc-text">
-        <strong>点对点模式：</strong
-        >一条消息只能被<strong>一个消费者</strong>消费。适合任务分配、负载均衡场景。
+      <div
+        v-if="mode === 'p2p'"
+        class="desc-text"
+      >
+        <strong>点对点模式：</strong>一条消息只能被<strong>一个消费者</strong>消费。适合任务分配、负载均衡场景。
       </div>
-      <div v-else class="desc-text">
-        <strong>发布订阅模式：</strong
-        >一条消息可以被<strong>多个消费者</strong>同时接收。适合事件通知、广播场景。
+      <div
+        v-else
+        class="desc-text"
+      >
+        <strong>发布订阅模式：</strong>一条消息可以被<strong>多个消费者</strong>同时接收。适合事件通知、广播场景。
       </div>
     </div>
 
     <div class="demo-area">
       <div class="producer-section">
-        <div class="section-title">生产者 Producer</div>
-        <div class="producer-box">
-          <div class="icon">📤</div>
-          <div class="label">订单服务</div>
+        <div class="section-title">
+          生产者 Producer
         </div>
-        <button class="send-btn" @click="sendMessage" :disabled="sending">
+        <div class="producer-box">
+          <div class="icon">
+            📤
+          </div>
+          <div class="label">
+            订单服务
+          </div>
+        </div>
+        <button
+          class="send-btn"
+          :disabled="sending"
+          @click="sendMessage"
+        >
           {{ sending ? '发送中...' : '发送消息' }}
         </button>
       </div>
@@ -54,11 +72,16 @@
           {{ mode === 'p2p' ? '队列 Queue' : '主题 Topic' }}
         </div>
         <div class="broker-box">
-          <div class="broker-icon">{{ mode === 'p2p' ? '📦' : '📡' }}</div>
+          <div class="broker-icon">
+            {{ mode === 'p2p' ? '📦' : '📡' }}
+          </div>
           <div class="broker-label">
             {{ mode === 'p2p' ? '消息队列' : '发布主题' }}
           </div>
-          <div class="message-indicator" v-if="lastMessage">
+          <div
+            v-if="lastMessage"
+            class="message-indicator"
+          >
             消息 #{{ lastMessage }}
           </div>
         </div>
@@ -68,7 +91,9 @@
       </div>
 
       <div class="consumer-section">
-        <div class="section-title">消费者 Consumers</div>
+        <div class="section-title">
+          消费者 Consumers
+        </div>
         <div class="consumers-grid">
           <div
             v-for="consumer in consumers"
@@ -79,8 +104,12 @@
             <div class="consumer-icon">
               {{ consumer.active ? '⚙️' : '💤' }}
             </div>
-            <div class="consumer-label">{{ consumer.name }}</div>
-            <div class="consumer-count">已处理: {{ consumer.count }}</div>
+            <div class="consumer-label">
+              {{ consumer.name }}
+            </div>
+            <div class="consumer-count">
+              已处理: {{ consumer.count }}
+            </div>
             <div class="consumer-status">
               {{ consumer.active ? '处理中' : '空闲' }}
             </div>
@@ -124,8 +153,13 @@
     </div>
 
     <div class="example-scenario">
-      <div class="scenario-title">📌 实际场景</div>
-      <div v-if="mode === 'p2p'" class="scenario-content">
+      <div class="scenario-title">
+        📌 实际场景
+      </div>
+      <div
+        v-if="mode === 'p2p'"
+        class="scenario-content"
+      >
         <div>
           <strong>任务分配：</strong>批量导入 10000 条用户数据，分发给 3
           个工作节点并行处理
@@ -135,7 +169,10 @@
           每个任务只被处理一次
         </div>
       </div>
-      <div v-else class="scenario-content">
+      <div
+        v-else
+        class="scenario-content"
+      >
         <div><strong>事件通知：</strong>用户下单成功后，同时通知多个系统</div>
         <div class="flow">
           发布事件 → [库存服务, 积分服务, 通知服务, 数据仓库] 各自独立处理
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
index b76f767..7ffc7be 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/ProducerConsumerDemo.vue
@@ -2,10 +2,15 @@
   <div class="demo-container">
     <div class="demo-header">
       <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <p class="hint">
+        {{ description }}
+      </p>
     </div>
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
+      <el-alert
+        type="info"
+        :closable="false"
+      >
         生产者消费者模式演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue
index 6b1f453..c9a1482 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/PubSubDemo.vue
@@ -5,46 +5,83 @@
 <template>
   <div class="pubsub-demo">
     <div class="header">
-      <div class="title">发布订阅模式：一条消息，多处消费</div>
-      <div class="subtitle">发布一次事件，多个订阅者独立处理</div>
+      <div class="title">
+        发布订阅模式：一条消息，多处消费
+      </div>
+      <div class="subtitle">
+        发布一次事件，多个订阅者独立处理
+      </div>
     </div>
 
     <div class="main-flow">
       <div class="publisher-section">
-        <div class="section-title">📤 发布者 Publisher</div>
+        <div class="section-title">
+          📤 发布者 Publisher
+        </div>
         <div class="event-selector">
           <label>选择事件：</label>
-          <select v-model="selectedEvent" @change="onEventChange">
-            <option value="order.created">订单创建成功</option>
-            <option value="user.registered">用户注册成功</option>
-            <option value="product.updated">商品信息更新</option>
+          <select
+            v-model="selectedEvent"
+            @change="onEventChange"
+          >
+            <option value="order.created">
+              订单创建成功
+            </option>
+            <option value="user.registered">
+              用户注册成功
+            </option>
+            <option value="product.updated">
+              商品信息更新
+            </option>
           </select>
         </div>
         <div class="event-details">
-          <div class="event-name">{{ eventDetails.name }}</div>
-          <div class="event-desc">{{ eventDetails.description }}</div>
+          <div class="event-name">
+            {{ eventDetails.name }}
+          </div>
+          <div class="event-desc">
+            {{ eventDetails.description }}
+          </div>
         </div>
         <button
           class="publish-btn"
-          @click="publishEvent"
           :disabled="publishing"
+          @click="publishEvent"
         >
           {{ publishing ? '发布中...' : '🚀 发布事件' }}
         </button>
       </div>
 
       <div class="topic-section">
-        <div class="section-title">📡 主题 Topic</div>
-        <div class="topic-box" :class="{ active: hasMessage }">
-          <div class="topic-icon">📨</div>
-          <div class="topic-name">{{ selectedEvent }}</div>
-          <div v-if="hasMessage" class="message-indicator">消息已发布</div>
+        <div class="section-title">
+          📡 主题 Topic
+        </div>
+        <div
+          class="topic-box"
+          :class="{ active: hasMessage }"
+        >
+          <div class="topic-icon">
+            📨
+          </div>
+          <div class="topic-name">
+            {{ selectedEvent }}
+          </div>
+          <div
+            v-if="hasMessage"
+            class="message-indicator"
+          >
+            消息已发布
+          </div>
+        </div>
+        <div class="topic-desc">
+          所有订阅者都会收到这条消息
         </div>
-        <div class="topic-desc">所有订阅者都会收到这条消息</div>
       </div>
 
       <div class="subscribers-section">
-        <div class="section-title">📥 订阅者 Subscribers</div>
+        <div class="section-title">
+          📥 订阅者 Subscribers
+        </div>
         <div class="subscribers-grid">
           <div
             v-for="sub in currentSubscribers"
@@ -52,15 +89,23 @@
             class="subscriber-card"
             :class="{ processing: sub.processing, completed: sub.completed }"
           >
-            <div class="sub-icon">{{ sub.icon }}</div>
-            <div class="sub-name">{{ sub.name }}</div>
-            <div class="sub-action">{{ sub.action }}</div>
+            <div class="sub-icon">
+              {{ sub.icon }}
+            </div>
+            <div class="sub-name">
+              {{ sub.name }}
+            </div>
+            <div class="sub-action">
+              {{ sub.action }}
+            </div>
             <div class="sub-status">
               <span v-if="sub.processing">⏳ 处理中...</span>
               <span v-else-if="sub.completed">✅ 已完成</span>
               <span v-else>💤 等待消息</span>
             </div>
-            <div class="sub-count">已处理: {{ sub.count }} 条</div>
+            <div class="sub-count">
+              已处理: {{ sub.count }} 条
+            </div>
           </div>
         </div>
       </div>
@@ -68,11 +113,23 @@
 
     <div class="real-time-log">
       <div class="log-header">
-        <div class="log-title">📋 实时日志</div>
-        <button class="clear-btn" @click="clearLog">清空</button>
+        <div class="log-title">
+          📋 实时日志
+        </div>
+        <button
+          class="clear-btn"
+          @click="clearLog"
+        >
+          清空
+        </button>
       </div>
       <div class="log-content">
-        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+        <div
+          v-if="logs.length === 0"
+          class="log-empty"
+        >
+          暂无日志
+        </div>
         <div
           v-for="(log, index) in logs"
           :key="index"
@@ -86,25 +143,39 @@
     </div>
 
     <div class="use-cases">
-      <div class="case-title">💡 典型应用场景</div>
+      <div class="case-title">
+        💡 典型应用场景
+      </div>
       <div class="case-grid">
         <div class="case-card">
-          <div class="case-icon">🛒</div>
-          <div class="case-name">电商订单</div>
+          <div class="case-icon">
+            🛒
+          </div>
+          <div class="case-name">
+            电商订单
+          </div>
           <div class="case-desc">
             订单创建 → 库存服务、积分服务、通知服务、数据仓库同时处理
           </div>
         </div>
         <div class="case-card">
-          <div class="case-icon">👤</div>
-          <div class="case-name">用户注册</div>
+          <div class="case-icon">
+            👤
+          </div>
+          <div class="case-name">
+            用户注册
+          </div>
           <div class="case-desc">
             用户注册 → 欢迎邮件、短信验证、发放优惠券、创建用户画像
           </div>
         </div>
         <div class="case-card">
-          <div class="case-icon">📊</div>
-          <div class="case-name">数据分析</div>
+          <div class="case-icon">
+            📊
+          </div>
+          <div class="case-name">
+            数据分析
+          </div>
           <div class="case-desc">
             用户行为 → 推荐系统、实时统计、数据仓库、风控系统
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
index 31e2557..eefbe91 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
@@ -14,46 +14,86 @@
       <!-- 防线1: 生产者确认 -->
       <div class="defense-line">
         <div class="defense-header">
-          <div class="defense-badge line1">防线 1</div>
-          <div class="defense-title">生产者确认 (Producer ACK)</div>
+          <div class="defense-badge line1">
+            防线 1
+          </div>
+          <div class="defense-title">
+            生产者确认 (Producer ACK)
+          </div>
         </div>
         <div class="defense-content">
           <div class="flow-diagram">
             <div class="component producer">
-              <div class="comp-icon">📤</div>
-              <div class="comp-label">生产者</div>
-              <div class="comp-desc">发送消息</div>
+              <div class="comp-icon">
+                📤
+              </div>
+              <div class="comp-label">
+                生产者
+              </div>
+              <div class="comp-desc">
+                发送消息
+              </div>
             </div>
 
             <div class="message-flow">
-              <div class="msg-item" :class="{ active: step === 1 }">
-                <div class="msg-icon">📨</div>
-                <div class="msg-label">消息</div>
-                <div v-if="step === 1" class="msg-status">
+              <div
+                class="msg-item"
+                :class="{ active: step === 1 }"
+              >
+                <div class="msg-icon">
+                  📨
+                </div>
+                <div class="msg-label">
+                  消息
+                </div>
+                <div
+                  v-if="step === 1"
+                  class="msg-status"
+                >
                   {{ ackStatus }}
                 </div>
               </div>
 
-              <div class="ack-item" :class="{ active: step === 2 }">
-                <div class="ack-icon">✓</div>
-                <div class="ack-label">ACK确认</div>
-                <div v-if="step === 2" class="ack-status">
+              <div
+                class="ack-item"
+                :class="{ active: step === 2 }"
+              >
+                <div class="ack-icon">
+                  ✓
+                </div>
+                <div class="ack-label">
+                  ACK确认
+                </div>
+                <div
+                  v-if="step === 2"
+                  class="ack-status"
+                >
                   {{ ackMessage }}
                 </div>
               </div>
             </div>
 
             <div class="component broker">
-              <div class="comp-icon">📦</div>
-              <div class="comp-label">Broker</div>
-              <div class="comp-desc">接收并存储</div>
+              <div class="comp-icon">
+                📦
+              </div>
+              <div class="comp-label">
+                Broker
+              </div>
+              <div class="comp-desc">
+                接收并存储
+              </div>
             </div>
           </div>
 
           <div class="control-panel">
             <div class="control-item">
               <label>发送消息</label>
-              <button class="action-btn" @click="sendWithAck" :disabled="step > 0">
+              <button
+                class="action-btn"
+                :disabled="step > 0"
+                @click="sendWithAck"
+              >
                 发送并等待确认
               </button>
             </div>
@@ -68,26 +108,54 @@
       <!-- 防线2: Broker持久化 -->
       <div class="defense-line">
         <div class="defense-header">
-          <div class="defense-badge line2">防线 2</div>
-          <div class="defense-title">Broker持久化</div>
+          <div class="defense-badge line2">
+            防线 2
+          </div>
+          <div class="defense-title">
+            Broker持久化
+          </div>
         </div>
         <div class="defense-content">
           <div class="storage-diagram">
             <div class="storage-container">
-              <div class="storage-option" :class="{ active: storageType === 'memory' }">
-                <div class="option-icon">⚡</div>
-                <div class="option-label">内存存储</div>
-                <div class="option-desc">速度快,但重启丢失</div>
-                <div class="option-risk">❌ 高风险</div>
+              <div
+                class="storage-option"
+                :class="{ active: storageType === 'memory' }"
+              >
+                <div class="option-icon">
+                  ⚡
+                </div>
+                <div class="option-label">
+                  内存存储
+                </div>
+                <div class="option-desc">
+                  速度快,但重启丢失
+                </div>
+                <div class="option-risk">
+                  ❌ 高风险
+                </div>
               </div>
 
-              <div class="vs-divider">vs</div>
+              <div class="vs-divider">
+                vs
+              </div>
 
-              <div class="storage-option recommended" :class="{ active: storageType === 'disk' }">
-                <div class="option-icon">💾</div>
-                <div class="option-label">磁盘存储</div>
-                <div class="option-desc">落盘保证不丢失</div>
-                <div class="option-risk">✅ 推荐</div>
+              <div
+                class="storage-option recommended"
+                :class="{ active: storageType === 'disk' }"
+              >
+                <div class="option-icon">
+                  💾
+                </div>
+                <div class="option-label">
+                  磁盘存储
+                </div>
+                <div class="option-desc">
+                  落盘保证不丢失
+                </div>
+                <div class="option-risk">
+                  ✅ 推荐
+                </div>
               </div>
             </div>
 
@@ -122,7 +190,10 @@
                 </button>
               </div>
             </div>
-            <div class="info-text" :class="{ warning: storageType === 'memory' }">
+            <div
+              class="info-text"
+              :class="{ warning: storageType === 'memory' }"
+            >
               <span class="info-icon">{{ storageType === 'disk' ? '✅' : '⚠️' }}</span>
               {{ storageType === 'disk' ? '消息已落盘,安全可靠' : '消息仅在内存,重启丢失' }}
             </div>
@@ -133,58 +204,115 @@
       <!-- 防线3: 消费者确认 -->
       <div class="defense-line">
         <div class="defense-header">
-          <div class="defense-badge line3">防线 3</div>
-          <div class="defense-title">消费者确认 (Consumer ACK)</div>
+          <div class="defense-badge line3">
+            防线 3
+          </div>
+          <div class="defense-title">
+            消费者确认 (Consumer ACK)
+          </div>
         </div>
         <div class="defense-content">
           <div class="consumer-flow">
-            <div class="flow-step" :class="{ active: consumerStep >= 1 }">
-              <div class="step-num">1</div>
+            <div
+              class="flow-step"
+              :class="{ active: consumerStep >= 1 }"
+            >
+              <div class="step-num">
+                1
+              </div>
               <div class="step-content">
-                <div class="step-title">拉取消息</div>
-                <div class="step-desc">从Broker获取消息</div>
+                <div class="step-title">
+                  拉取消息
+                </div>
+                <div class="step-desc">
+                  从Broker获取消息
+                </div>
               </div>
             </div>
 
-            <div class="flow-arrow" :class="{ active: consumerStep >= 1 }">→</div>
+            <div
+              class="flow-arrow"
+              :class="{ active: consumerStep >= 1 }"
+            >
+              →
+            </div>
 
-            <div class="flow-step" :class="{ active: consumerStep >= 2 }">
-              <div class="step-num">2</div>
+            <div
+              class="flow-step"
+              :class="{ active: consumerStep >= 2 }"
+            >
+              <div class="step-num">
+                2
+              </div>
               <div class="step-content">
-                <div class="step-title">处理消息</div>
-                <div class="step-desc">执行业务逻辑</div>
+                <div class="step-title">
+                  处理消息
+                </div>
+                <div class="step-desc">
+                  执行业务逻辑
+                </div>
               </div>
             </div>
 
-            <div class="flow-arrow" :class="{ active: consumerStep >= 2 }">→</div>
+            <div
+              class="flow-arrow"
+              :class="{ active: consumerStep >= 2 }"
+            >
+              →
+            </div>
 
-            <div class="flow-step" :class="{ active: consumerStep >= 3 }">
-              <div class="step-num">3</div>
+            <div
+              class="flow-step"
+              :class="{ active: consumerStep >= 3 }"
+            >
+              <div class="step-num">
+                3
+              </div>
               <div class="step-content">
-                <div class="step-title">手动ACK</div>
-                <div class="step-desc">确认处理完成</div>
+                <div class="step-title">
+                  手动ACK
+                </div>
+                <div class="step-desc">
+                  确认处理完成
+                </div>
               </div>
             </div>
           </div>
 
           <div class="ack-comparison">
             <div class="ack-option">
-              <div class="ack-type">自动 ACK</div>
-              <div class="ack-desc">高效但可能丢消息</div>
-              <div class="ack-risk">⚠️ 不推荐</div>
+              <div class="ack-type">
+                自动 ACK
+              </div>
+              <div class="ack-desc">
+                高效但可能丢消息
+              </div>
+              <div class="ack-risk">
+                ⚠️ 不推荐
+              </div>
             </div>
 
             <div class="ack-option recommended">
-              <div class="ack-type">手动 ACK</div>
-              <div class="ack-desc">可靠,处理完才确认</div>
-              <div class="ack-risk">✅ 推荐</div>
+              <div class="ack-type">
+                手动 ACK
+              </div>
+              <div class="ack-desc">
+                可靠,处理完才确认
+              </div>
+              <div class="ack-risk">
+                ✅ 推荐
+              </div>
             </div>
           </div>
 
           <div class="control-panel">
             <div class="control-item">
               <label>模拟消费</label>
-              <button class="action-btn" @click="simulateConsume" :disabled="consumerStep > 0">
+              <button
+                class="action-btn"
+                :disabled="consumerStep > 0"
+                @click="simulateConsume"
+              >
                 开始消费流程
               </button>
             </div>
@@ -198,7 +326,9 @@
     </div>
 
     <div class="summary-box">
-      <div class="summary-icon">🎯</div>
+      <div class="summary-icon">
+        🎯
+      </div>
       <div class="summary-content">
         <strong>三道防线,缺一不可：</strong>生产者确认 → Broker持久化 → 消费者确认
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue
index 83169c8..c6742df 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/SeckillSystemDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="seckill-demo">
     <div class="header">
-      <div class="title">秒杀系统：消息队列的典型应用</div>
-      <div class="subtitle">处理 10 万/秒的并发请求，保证不超卖</div>
+      <div class="title">
+        秒杀系统：消息队列的典型应用
+      </div>
+      <div class="subtitle">
+        处理 10 万/秒的并发请求，保证不超卖
+      </div>
     </div>
 
     <div class="scenario-settings">
@@ -16,7 +20,13 @@
           <strong>{{ stock }}</strong>
           件
         </label>
-        <input v-model="stock" type="range" min="10" max="1000" step="10" />
+        <input
+          v-model="stock"
+          type="range"
+          min="10"
+          max="1000"
+          step="10"
+        >
       </div>
       <div class="setting">
         <label>
@@ -30,7 +40,7 @@
           min="100"
           max="10000"
           step="100"
-        />
+        >
       </div>
       <div class="setting">
         <label>
@@ -44,33 +54,52 @@
           min="50"
           max="500"
           step="10"
-        />
+        >
       </div>
     </div>
 
     <div class="action-bar">
-      <button class="start-btn" @click="startSeckill" :disabled="running">
+      <button
+        class="start-btn"
+        :disabled="running"
+        @click="startSeckill"
+      >
         🚀 开始秒杀
       </button>
-      <button class="reset-btn" @click="reset">🔄 重置</button>
+      <button
+        class="reset-btn"
+        @click="reset"
+      >
+        🔄 重置
+      </button>
     </div>
 
     <div class="architecture">
       <div class="arch-layer gateway">
-        <div class="layer-title">🌐 网关层 - 限流</div>
+        <div class="layer-title">
+          🌐 网关层 - 限流
+        </div>
         <div class="layer-content">
           <div class="stat-box">
-            <div class="stat-label">总请求数</div>
-            <div class="stat-value">{{ totalRequests.toLocaleString() }}</div>
+            <div class="stat-label">
+              总请求数
+            </div>
+            <div class="stat-value">
+              {{ totalRequests.toLocaleString() }}
+            </div>
           </div>
           <div class="stat-box">
-            <div class="stat-label">限流通过</div>
+            <div class="stat-label">
+              限流通过
+            </div>
             <div class="stat-value success">
               {{ passedRequests.toLocaleString() }}
             </div>
           </div>
           <div class="stat-box">
-            <div class="stat-label">被拒绝</div>
+            <div class="stat-label">
+              被拒绝
+            </div>
             <div class="stat-value error">
               {{ rejectedRequests.toLocaleString() }}
             </div>
@@ -78,32 +107,43 @@
         </div>
       </div>
 
-      <div class="arch-arrow">⬇️</div>
+      <div class="arch-arrow">
+        ⬇️
+      </div>
 
       <div class="arch-layer redis">
-        <div class="layer-title">⚡ Redis 预扣库存</div>
+        <div class="layer-title">
+          ⚡ Redis 预扣库存
+        </div>
         <div class="layer-content">
           <div class="stock-display">
             <div class="stock-bar">
               <div
                 class="stock-fill"
                 :style="{ width: stockPercent + '%' }"
-              ></div>
+              />
             </div>
             <div class="stock-text">
               剩余: {{ remainingStock }} / {{ stock }}
             </div>
           </div>
-          <div class="redis-status" :class="redisStatus.class">
+          <div
+            class="redis-status"
+            :class="redisStatus.class"
+          >
             {{ redisStatus.text }}
           </div>
         </div>
       </div>
 
-      <div class="arch-arrow">⬇️</div>
+      <div class="arch-arrow">
+        ⬇️
+      </div>
 
       <div class="arch-layer queue">
-        <div class="layer-title">📦 消息队列缓冲</div>
+        <div class="layer-title">
+          📦 消息队列缓冲
+        </div>
         <div class="layer-content">
           <div class="queue-visual">
             <div class="queue-box">
@@ -116,63 +156,109 @@
                   class="queue-bar"
                   :class="queueStatus"
                   :style="{ width: queuePercent + '%' }"
-                ></div>
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="arch-arrow">⬇️</div>
+      <div class="arch-arrow">
+        ⬇️
+      </div>
 
       <div class="arch-layer consumer">
-        <div class="layer-title">⚙️ 订单服务处理</div>
+        <div class="layer-title">
+          ⚙️ 订单服务处理
+        </div>
         <div class="layer-content">
           <div class="stat-box">
-            <div class="stat-label">处理中</div>
-            <div class="stat-value">{{ processing }}</div>
+            <div class="stat-label">
+              处理中
+            </div>
+            <div class="stat-value">
+              {{ processing }}
+            </div>
           </div>
           <div class="stat-box">
-            <div class="stat-label">成功订单</div>
-            <div class="stat-value success">{{ successOrders }}</div>
+            <div class="stat-label">
+              成功订单
+            </div>
+            <div class="stat-value success">
+              {{ successOrders }}
+            </div>
           </div>
           <div class="stat-box">
-            <div class="stat-label">失败订单</div>
-            <div class="stat-value error">{{ failedOrders }}</div>
+            <div class="stat-label">
+              失败订单
+            </div>
+            <div class="stat-value error">
+              {{ failedOrders }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="real-time-stats">
-      <div class="stats-title">📊 实时监控</div>
+      <div class="stats-title">
+        📊 实时监控
+      </div>
       <div class="stats-grid">
         <div class="stat-item">
-          <div class="stat-label">平均响应时间</div>
-          <div class="stat-value">{{ avgLatency }}ms</div>
+          <div class="stat-label">
+            平均响应时间
+          </div>
+          <div class="stat-value">
+            {{ avgLatency }}ms
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-label">订单成功率</div>
-          <div class="stat-value">{{ orderSuccessRate }}%</div>
+          <div class="stat-label">
+            订单成功率
+          </div>
+          <div class="stat-value">
+            {{ orderSuccessRate }}%
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-label">队列积压</div>
-          <div class="stat-value">{{ queueLength }}</div>
+          <div class="stat-label">
+            队列积压
+          </div>
+          <div class="stat-value">
+            {{ queueLength }}
+          </div>
         </div>
         <div class="stat-item">
-          <div class="stat-label">预计清空时间</div>
-          <div class="stat-value">{{ estimatedTime }}</div>
+          <div class="stat-label">
+            预计清空时间
+          </div>
+          <div class="stat-value">
+            {{ estimatedTime }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="log-section">
       <div class="log-header">
-        <div class="log-title">📋 事件日志</div>
-        <button class="clear-log" @click="clearLogs">清空</button>
+        <div class="log-title">
+          📋 事件日志
+        </div>
+        <button
+          class="clear-log"
+          @click="clearLogs"
+        >
+          清空
+        </button>
       </div>
       <div class="log-content">
-        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+        <div
+          v-if="logs.length === 0"
+          class="log-empty"
+        >
+          暂无日志
+        </div>
         <div
           v-for="(log, index) in logs.slice(0, 15)"
           :key="index"
@@ -186,7 +272,9 @@
     </div>
 
     <div class="key-points">
-      <div class="point-title">🎯 核心设计要点</div>
+      <div class="point-title">
+        🎯 核心设计要点
+      </div>
       <div class="point-list">
         <div class="point-item">
           <span class="point-icon">1️⃣</span>
@@ -198,22 +286,19 @@
         <div class="point-item">
           <span class="point-icon">2️⃣</span>
           <div>
-            <strong>Redis 预扣：</strong
-            >原子操作扣减库存，快速判断是否有货，避免无效请求
+            <strong>Redis 预扣：</strong>原子操作扣减库存，快速判断是否有货，避免无效请求
           </div>
         </div>
         <div class="point-item">
           <span class="point-icon">3️⃣</span>
           <div>
-            <strong>消息队列：</strong
-            >将成功的扣库存请求放入队列，异步处理，削峰填谷
+            <strong>消息队列：</strong>将成功的扣库存请求放入队列，异步处理，削峰填谷
           </div>
         </div>
         <div class="point-item">
           <span class="point-icon">4️⃣</span>
           <div>
-            <strong>异步处理：</strong
-            >订单服务慢慢消费队列，创建订单，保证不超卖
+            <strong>异步处理：</strong>订单服务慢慢消费队列，创建订单，保证不超卖
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue
index cca6950..0c37caf 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/AdvancedTUIDemo.vue
@@ -15,14 +15,23 @@
     <div class="tui-window">
       <div class="tui-header">
         <div class="tabs">
-          <div class="tab active">Continuous</div>
-          <div class="tab">Integration</div>
-          <div class="tab">Logging</div>
+          <div class="tab active">
+            Continuous
+          </div>
+          <div class="tab">
+            Integration
+          </div>
+          <div class="tab">
+            Logging
+          </div>
         </div>
       </div>
 
       <div class="tui-body">
-        <div class="sidebar" :style="{ width: sidebarWidth + '%' }">
+        <div
+          class="sidebar"
+          :style="{ width: sidebarWidth + '%' }"
+        >
           <div class="list-item success">
             <span class="icon">✓</span> ci-fe-be-rules
           </div>
@@ -48,7 +57,9 @@
             <div class="status-row">
               Status: <span class="text-success">success</span>
             </div>
-            <div class="info-row">Updated: 2024-01-15 14:32:00 UTC</div>
+            <div class="info-row">
+              Updated: 2024-01-15 14:32:00 UTC
+            </div>
           </div>
         </div>
       </div>
@@ -56,12 +67,17 @@
 
     <div class="tui-controls">
       <div class="control-group">
-        <button @click="toggleCoordinates" :class="{ active: showCoordinates }">
+        <button
+          :class="{ active: showCoordinates }"
+          @click="toggleCoordinates"
+        >
           Show Coordinates
         </button>
       </div>
       <div class="control-group">
-        <button @click="simulateResize">Simulate Resize</button>
+        <button @click="simulateResize">
+          Simulate Resize
+        </button>
         <span class="size-label">Size: {{ sizeDisplay }}</span>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue
index 1e80c47..81f6cd0 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/ArchitectureDemo.vue
@@ -15,35 +15,56 @@
   <div class="arch-demo">
     <div class="analogy-header">
       <div class="analogy-item">
-        <div class="icon">🖥️</div>
+        <div class="icon">
+          🖥️
+        </div>
         <div class="text">
-          <div class="role">Terminal (终端)</div>
-          <div class="desc">传声筒 / 窗口</div>
+          <div class="role">
+            Terminal (终端)
+          </div>
+          <div class="desc">
+            传声筒 / 窗口
+          </div>
         </div>
       </div>
       <div class="analogy-item">
-        <div class="icon">🗣️</div>
+        <div class="icon">
+          🗣️
+        </div>
         <div class="text">
-          <div class="role">Shell (壳)</div>
-          <div class="desc">翻译官 / 助手</div>
+          <div class="role">
+            Shell (壳)
+          </div>
+          <div class="desc">
+            翻译官 / 助手
+          </div>
         </div>
       </div>
       <div class="analogy-item">
-        <div class="icon">⚙️</div>
+        <div class="icon">
+          ⚙️
+        </div>
         <div class="text">
-          <div class="role">Kernel (内核)</div>
-          <div class="desc">大管家 / 芯片</div>
+          <div class="role">
+            Kernel (内核)
+          </div>
+          <div class="desc">
+            大管家 / 芯片
+          </div>
         </div>
       </div>
     </div>
 
     <div
       class="diagram-container"
-      @click="nextStep"
       :class="{ clickable: currentStep < totalSteps }"
+      @click="nextStep"
     >
       <!-- Click Overlay Hint -->
-      <div class="click-overlay" v-if="currentStep === 0">
+      <div
+        v-if="currentStep === 0"
+        class="click-overlay"
+      >
         <div class="click-hint">
           <span class="icon">👆</span>
           <span class="text">不断点击屏幕演示 / Keep Clicking</span>
@@ -51,8 +72,14 @@
       </div>
 
       <!-- Completed Overlay -->
-      <div class="completed-overlay" v-if="currentStep >= totalSteps">
-        <div class="completed-hint" @click.stop="reset">
+      <div
+        v-if="currentStep >= totalSteps"
+        class="completed-overlay"
+      >
+        <div
+          class="completed-hint"
+          @click.stop="reset"
+        >
           <span class="icon">✅</span>
           <span class="text">演示结束，点击重置 / Finished (Reset)</span>
         </div>
@@ -61,30 +88,48 @@
       <!-- Spaces Background -->
       <div class="spaces-bg">
         <div class="space user-space">
-          <div class="space-header">User Space (用户空间)</div>
+          <div class="space-header">
+            User Space (用户空间)
+          </div>
         </div>
         <div class="barrier">
-          <div class="barrier-line"></div>
+          <div class="barrier-line" />
         </div>
         <div class="space kernel-space">
-          <div class="space-header">Kernel Space (内核空间)</div>
+          <div class="space-header">
+            Kernel Space (内核空间)
+          </div>
         </div>
       </div>
 
       <!-- Terminal Node -->
-      <div class="node terminal" :class="{ active: activeNode === 'terminal' }">
-        <div class="node-title">TERMINAL (终端)</div>
+      <div
+        class="node terminal"
+        :class="{ active: activeNode === 'terminal' }"
+      >
+        <div class="node-title">
+          TERMINAL (终端)
+        </div>
         <div class="screen">
-          <div v-for="(line, i) in terminalLines" :key="i" class="line">
+          <div
+            v-for="(line, i) in terminalLines"
+            :key="i"
+            class="line"
+          >
             {{ line }}
           </div>
           <div class="line input-line">
             <span class="prompt">$</span>
             <span class="typing">{{ currentInput }}</span>
-            <span class="cursor" v-if="activeNode === 'terminal'"></span>
+            <span
+              v-if="activeNode === 'terminal'"
+              class="cursor"
+            />
           </div>
         </div>
-        <div class="node-label">/dev/tty</div>
+        <div class="node-label">
+          /dev/tty
+        </div>
       </div>
 
       <!-- Connections -->
@@ -94,24 +139,43 @@
           active: packetState === 't-to-s' || packetState === 's-to-t'
         }"
       >
-        <div class="line-path"></div>
-        <div class="data-label" v-if="packetState === 't-to-s'">
+        <div class="line-path" />
+        <div
+          v-if="packetState === 't-to-s'"
+          class="data-label"
+        >
           <span class="icon">➡️</span> Bytes
         </div>
-        <div class="data-label" v-if="packetState === 's-to-t'">
+        <div
+          v-if="packetState === 's-to-t'"
+          class="data-label"
+        >
           <span class="icon">⬅️</span> Text
         </div>
-        <div class="conn-label">stdin / stdout</div>
+        <div class="conn-label">
+          stdin / stdout
+        </div>
       </div>
 
       <!-- Shell Node -->
-      <div class="node shell" :class="{ active: activeNode === 'shell' }">
-        <div class="node-title">SHELL (壳)</div>
-        <div class="process-box">
-          <div class="status-icon">{{ shellIcon }}</div>
-          <div class="status">{{ shellStatus }}</div>
+      <div
+        class="node shell"
+        :class="{ active: activeNode === 'shell' }"
+      >
+        <div class="node-title">
+          SHELL (壳)
+        </div>
+        <div class="process-box">
+          <div class="status-icon">
+            {{ shellIcon }}
+          </div>
+          <div class="status">
+            {{ shellStatus }}
+          </div>
+        </div>
+        <div class="node-label">
+          /bin/zsh
         </div>
-        <div class="node-label">/bin/zsh</div>
       </div>
 
       <!-- Connections -->
@@ -121,24 +185,43 @@
           active: packetState === 's-to-k' || packetState === 'k-to-s'
         }"
       >
-        <div class="line-path"></div>
-        <div class="data-label" v-if="packetState === 's-to-k'">
+        <div class="line-path" />
+        <div
+          v-if="packetState === 's-to-k'"
+          class="data-label"
+        >
           <span class="icon">➡️</span> Syscall
         </div>
-        <div class="data-label" v-if="packetState === 'k-to-s'">
+        <div
+          v-if="packetState === 'k-to-s'"
+          class="data-label"
+        >
           <span class="icon">⬅️</span> Raw Data
         </div>
-        <div class="conn-label">System Calls</div>
+        <div class="conn-label">
+          System Calls
+        </div>
       </div>
 
       <!-- Kernel Node -->
-      <div class="node kernel" :class="{ active: activeNode === 'kernel' }">
-        <div class="node-title">KERNEL (内核)</div>
-        <div class="process-box">
-          <div class="status-icon">{{ kernelIcon }}</div>
-          <div class="status">{{ kernelStatus }}</div>
+      <div
+        class="node kernel"
+        :class="{ active: activeNode === 'kernel' }"
+      >
+        <div class="node-title">
+          KERNEL (内核)
+        </div>
+        <div class="process-box">
+          <div class="status-icon">
+            {{ kernelIcon }}
+          </div>
+          <div class="status">
+            {{ kernelStatus }}
+          </div>
+        </div>
+        <div class="node-label">
+          macOS / Linux
         </div>
-        <div class="node-label">macOS / Linux</div>
       </div>
     </div>
 
@@ -146,45 +229,63 @@
       <div class="btn-group">
         <button
           class="btn primary"
-          @click="nextStep"
           :disabled="currentStep >= totalSteps"
+          @click="nextStep"
         >
           <span v-if="currentStep === 0">▶️ Start Simulation / 开始演示</span>
-          <span v-else-if="currentStep < totalSteps"
-            >Next Step / 下一步 ({{ currentStep }}/{{ totalSteps }}) ➡️</span
-          >
+          <span v-else-if="currentStep < totalSteps">Next Step / 下一步 ({{ currentStep }}/{{ totalSteps }}) ➡️</span>
           <span v-else>✅ Done / 完成 (Reset)</span>
         </button>
-        <button class="btn secondary" @click="reset" v-if="currentStep > 0">
+        <button
+          v-if="currentStep > 0"
+          class="btn secondary"
+          @click="reset"
+        >
           Reset / 重置
         </button>
       </div>
 
-      <div class="step-info" v-if="currentStep > 0">
+      <div
+        v-if="currentStep > 0"
+        class="step-info"
+      >
         <div class="step-title">
           {{ steps[currentStep - 1].titleEn }}
           <span class="divider">|</span>
           {{ steps[currentStep - 1].titleZh }}
         </div>
         <div class="step-desc">
-          <div class="en">{{ steps[currentStep - 1].descEn }}</div>
-          <div class="zh">{{ steps[currentStep - 1].descZh }}</div>
+          <div class="en">
+            {{ steps[currentStep - 1].descEn }}
+          </div>
+          <div class="zh">
+            {{ steps[currentStep - 1].descZh }}
+          </div>
         </div>
         <div class="step-tech">
           <span class="tech-label">Technical / 技术原理:</span>
           <div class="tech-content">
-            <div class="en">{{ steps[currentStep - 1].techEn }}</div>
-            <div class="zh">{{ steps[currentStep - 1].techZh }}</div>
+            <div class="en">
+              {{ steps[currentStep - 1].techEn }}
+            </div>
+            <div class="zh">
+              {{ steps[currentStep - 1].techZh }}
+            </div>
           </div>
         </div>
       </div>
-      <div class="step-info placeholder" v-else>
+      <div
+        v-else
+        class="step-info placeholder"
+      >
         <div class="step-desc">
           <div class="en">
             Click "Start Simulation" to see how the command 'ls' travels through
             the system.
           </div>
-          <div class="zh">点击“开始演示”查看 'ls' 命令如何在系统中流转。</div>
+          <div class="zh">
+            点击“开始演示”查看 'ls' 命令如何在系统中流转。
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/BufferSwitchDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/BufferSwitchDemo.vue
index 1c273c8..44a0f49 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/BufferSwitchDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/BufferSwitchDemo.vue
@@ -2,9 +2,9 @@
   <div class="buffer-demo">
     <div class="terminal-frame">
       <div class="window-bar">
-        <span class="dot red"></span>
-        <span class="dot yellow"></span>
-        <span class="dot green"></span>
+        <span class="dot red" />
+        <span class="dot yellow" />
+        <span class="dot green" />
         <span class="title">Terminal - Buffer Switching Demo</span>
       </div>
 
@@ -14,7 +14,9 @@
           <div class="line">
             <span class="prompt">➜</span> <span class="cmd">ls -la</span>
           </div>
-          <div class="line output">total 16</div>
+          <div class="line output">
+            total 16
+          </div>
           <div class="line output">
             drwxr-xr-x 2 user staff 64 Jan 15 10:00 .
           </div>
@@ -28,7 +30,9 @@
             <span class="prompt">➜</span>
             <span class="cmd">echo "Hello World"</span>
           </div>
-          <div class="line output">Hello World</div>
+          <div class="line output">
+            Hello World
+          </div>
           <div class="line">
             <span class="prompt">➜</span> <span class="cmd">vim notes.txt</span>
           </div>
@@ -37,29 +41,54 @@
 
         <!-- Alternate Buffer (Layer 1) -->
         <transition name="slide-up">
-          <div v-if="isAltBufferActive" class="buffer alt-buffer">
+          <div
+            v-if="isAltBufferActive"
+            class="buffer alt-buffer"
+          >
             <div class="vim-header">
               <span class="filename">notes.txt</span>
               <span class="modified">[+]</span>
             </div>
             <div class="vim-body">
-              <div class="line-num">1</div>
-              <div class="code">This is a text file opened in Vim.</div>
-              <div class="line-num">2</div>
-              <div class="code"></div>
-              <div class="line-num">3</div>
-              <div class="code">Notice how this interface takes up</div>
-              <div class="line-num">4</div>
-              <div class="code">the entire screen?</div>
-              <div class="line-num">5</div>
-              <div class="code"></div>
-              <div class="line-num">6</div>
+              <div class="line-num">
+                1
+              </div>
+              <div class="code">
+                This is a text file opened in Vim.
+              </div>
+              <div class="line-num">
+                2
+              </div>
+              <div class="code" />
+              <div class="line-num">
+                3
+              </div>
+              <div class="code">
+                Notice how this interface takes up
+              </div>
+              <div class="line-num">
+                4
+              </div>
+              <div class="code">
+                the entire screen?
+              </div>
+              <div class="line-num">
+                5
+              </div>
+              <div class="code" />
+              <div class="line-num">
+                6
+              </div>
               <div class="code">
                 It is running in the
                 <span class="highlight">Alternate Buffer</span>.
               </div>
-              <div class="line-num">~</div>
-              <div class="line-num">~</div>
+              <div class="line-num">
+                ~
+              </div>
+              <div class="line-num">
+                ~
+              </div>
             </div>
             <div class="vim-status-bar">
               <span class="mode">NORMAL</span>
@@ -81,7 +110,10 @@
             This is the standard scrolling log. Commands are executed line by
             line.
           </p>
-          <button class="action-btn" @click="openVim">
+          <button
+            class="action-btn"
+            @click="openVim"
+          >
             Execute `vim notes.txt`
           </button>
         </div>
@@ -91,7 +123,10 @@
             A separate "canvas" for full-screen apps. It hides the history but
             doesn't delete it.
           </p>
-          <button class="action-btn red" @click="quitVim">
+          <button
+            class="action-btn red"
+            @click="quitVim"
+          >
             Execute `:q` (Quit)
           </button>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue
index 5dda63f..8caa3ae 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/CellInspector.vue
@@ -13,7 +13,10 @@
 <template>
   <div class="cell-inspector">
     <div class="preview-area">
-      <div class="large-cell" :style="cellStyle">
+      <div
+        class="large-cell"
+        :style="cellStyle"
+      >
         {{ char }}
       </div>
     </div>
@@ -43,7 +46,7 @@
             :style="{ backgroundColor: color }"
             :class="{ active: fgColor === color }"
             @click="fgColor = color"
-          ></div>
+          />
         </div>
       </div>
 
@@ -63,7 +66,7 @@
               background-color: #111;
             "
             @click="bgColor = 'transparent'"
-          ></div>
+          />
           <div
             v-for="color in bgColors"
             :key="color"
@@ -71,7 +74,7 @@
             :style="{ backgroundColor: color }"
             :class="{ active: bgColor === color }"
             @click="bgColor = color"
-          ></div>
+          />
         </div>
       </div>
 
@@ -79,11 +82,17 @@
         <label>ATTRIBUTES</label>
         <div class="toggles">
           <label class="toggle">
-            <input type="checkbox" v-model="isBold" />
+            <input
+              v-model="isBold"
+              type="checkbox"
+            >
             <span>Bold</span>
           </label>
           <label class="toggle">
-            <input type="checkbox" v-model="isUnderline" />
+            <input
+              v-model="isUnderline"
+              type="checkbox"
+            >
             <span>Underline</span>
           </label>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/CookedRawDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/CookedRawDemo.vue
index 597b6c4..23d36a4 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/CookedRawDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/CookedRawDemo.vue
@@ -1,15 +1,24 @@
 <template>
   <div class="cooked-raw-demo">
     <div class="mode-switch">
-      <button :class="{ active: mode === 'cooked' }" @click="setMode('cooked')">
+      <button
+        :class="{ active: mode === 'cooked' }"
+        @click="setMode('cooked')"
+      >
         🥘 Cooked Mode (Standard)
       </button>
-      <button :class="{ active: mode === 'raw' }" @click="setMode('raw')">
+      <button
+        :class="{ active: mode === 'raw' }"
+        @click="setMode('raw')"
+      >
         🥩 Raw Mode (Vim/Games)
       </button>
     </div>
 
-    <div class="demo-container" @click="focusInput">
+    <div
+      class="demo-container"
+      @click="focusInput"
+    >
       <!-- Hidden Input for capturing keystrokes -->
       <input
         ref="inputRef"
@@ -18,23 +27,41 @@
         @keydown="handleKey"
         @blur="isFocused = false"
         @focus="isFocused = true"
-      />
+      >
 
       <!-- Visualization -->
       <div class="flow-diagram">
         <!-- 1. User Input -->
-        <div class="stage user-input" :class="{ focused: isFocused }">
-          <div class="stage-title">1. Keyboard Input</div>
+        <div
+          class="stage user-input"
+          :class="{ focused: isFocused }"
+        >
+          <div class="stage-title">
+            1. Keyboard Input
+          </div>
           <div class="key-visual">
-            <span v-if="lastPressedKey" class="key-cap">{{
+            <span
+              v-if="lastPressedKey"
+              class="key-cap"
+            >{{
               lastPressedKey
             }}</span>
-            <span v-else class="placeholder">Type here...</span>
+            <span
+              v-else
+              class="placeholder"
+            >Type here...</span>
+          </div>
+          <div
+            v-if="!isFocused"
+            class="status-text"
+          >
+            Click to focus
           </div>
-          <div class="status-text" v-if="!isFocused">Click to focus</div>
         </div>
 
-        <div class="arrow">⬇</div>
+        <div class="arrow">
+          ⬇
+        </div>
 
         <!-- 2. OS Buffer (Only for Cooked) -->
         <div
@@ -43,12 +70,22 @@
         >
           <div class="stage-title">
             2. Line Buffer (Kernel)
-            <span class="badge" v-if="mode === 'cooked'">Active</span>
-            <span class="badge disabled" v-else>Bypassed</span>
+            <span
+              v-if="mode === 'cooked'"
+              class="badge"
+            >Active</span>
+            <span
+              v-else
+              class="badge disabled"
+            >Bypassed</span>
           </div>
           <div class="buffer-content">
             <template v-if="mode === 'cooked'">
-              <span v-for="(char, i) in buffer" :key="i" class="char">{{
+              <span
+                v-for="(char, i) in buffer"
+                :key="i"
+                class="char"
+              >{{
                 char
               }}</span>
               <span class="cursor">_</span>
@@ -58,20 +95,26 @@
             </template>
           </div>
           <div class="explanation">
-            <span v-if="mode === 'cooked'"
-              >Waiting for Enter... (Backspace works)</span
-            >
+            <span v-if="mode === 'cooked'">Waiting for Enter... (Backspace works)</span>
             <span v-else>No buffering. Every key is sent immediately.</span>
           </div>
         </div>
 
-        <div class="arrow">⬇</div>
+        <div class="arrow">
+          ⬇
+        </div>
 
         <!-- 3. Application -->
         <div class="stage app-input">
-          <div class="stage-title">3. Application Receives</div>
+          <div class="stage-title">
+            3. Application Receives
+          </div>
           <div class="app-content">
-            <div v-for="(line, i) in appLines" :key="i" class="app-line">
+            <div
+              v-for="(line, i) in appLines"
+              :key="i"
+              class="app-line"
+            >
               {{ line }}
             </div>
             <div class="app-line current">
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeParserDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeParserDemo.vue
index 4859ba4..b5264f2 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeParserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeParserDemo.vue
@@ -1,10 +1,20 @@
 <template>
   <div class="parser-demo">
     <div class="demo-header">
-      <div class="title">转义序列解析原理 (Parser Mechanism)</div>
+      <div class="title">
+        转义序列解析原理 (Parser Mechanism)
+      </div>
       <div class="controls">
-        <button @click="reset" :disabled="isPlaying">Reset</button>
-        <button @click="togglePlay" class="play-btn">
+        <button
+          :disabled="isPlaying"
+          @click="reset"
+        >
+          Reset
+        </button>
+        <button
+          class="play-btn"
+          @click="togglePlay"
+        >
           {{
             isPlaying ? '⏸ Pause' : isFinished ? '↺ Replay' : '▶ Play Animation'
           }}
@@ -14,7 +24,9 @@
 
     <!-- 1. 字节流传送带 -->
     <div class="stream-container">
-      <div class="label">Input Byte Stream / 输入字节流</div>
+      <div class="label">
+        Input Byte Stream / 输入字节流
+      </div>
       <div class="stream-track">
         <div class="stream-window-mask">
           <div
@@ -39,29 +51,49 @@
         </div>
         <!-- 指针 -->
         <div class="pointer">
-          <div class="arrow">⬆</div>
-          <div class="pointer-label">Current Byte</div>
+          <div class="arrow">
+            ⬆
+          </div>
+          <div class="pointer-label">
+            Current Byte
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 2. 解析器状态机 -->
     <div class="parser-state-machine">
-      <div class="state-box" :class="{ active: parserState === 'NORMAL' }">
-        <div class="state-name">NORMAL</div>
-        <div class="state-desc">Print Characters</div>
+      <div
+        class="state-box"
+        :class="{ active: parserState === 'NORMAL' }"
+      >
+        <div class="state-name">
+          NORMAL
+        </div>
+        <div class="state-desc">
+          Print Characters
+        </div>
+      </div>
+      <div class="arrow-right">
+        →
       </div>
-      <div class="arrow-right">→</div>
       <div
         class="state-box warning"
         :class="{ active: parserState === 'ESCAPE' }"
       >
-        <div class="state-name">ESCAPE MODE</div>
-        <div class="state-desc">Buffer Command...</div>
+        <div class="state-name">
+          ESCAPE MODE
+        </div>
+        <div class="state-desc">
+          Buffer Command...
+        </div>
       </div>
 
       <!-- 指令说明框 -->
-      <div class="action-log" v-if="lastAction">
+      <div
+        v-if="lastAction"
+        class="action-log"
+      >
         <span class="action-icon">⚡</span>
         {{ lastAction }}
       </div>
@@ -69,14 +101,15 @@
 
     <!-- 3. 终端屏幕 -->
     <div class="terminal-screen">
-      <div class="label">Terminal Screen / 屏幕显示</div>
+      <div class="label">
+        Terminal Screen / 屏幕显示
+      </div>
       <div class="screen-content">
         <span
           v-for="(char, index) in outputBuffer"
           :key="index"
           :style="char.style"
-          >{{ char.val }}</span
-        ><span class="cursor">_</span>
+        >{{ char.val }}</span><span class="cursor">_</span>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue
index 6ddda7c..9bee53f 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/EscapeSequences.vue
@@ -26,11 +26,14 @@
             :key="index"
             class="swatch"
             :style="{ backgroundColor: color }"
-            @click="applyColor(index)"
             :title="`^[[38;5;${index}m`"
-          ></div>
+            @click="applyColor(index)"
+          />
         </div>
-        <div class="hint-text" v-if="activeColor">
+        <div
+          v-if="activeColor"
+          class="hint-text"
+        >
           Sequence:
           <span class="code">^[[38;5;{{ palette.indexOf(activeColor) }}m</span>
         </div>
@@ -43,17 +46,29 @@
           <span class="zh">样式序列</span>
         </div>
         <div class="btn-group">
-          <button @click="applyStyle('1')" :class="{ active: isBold }">
+          <button
+            :class="{ active: isBold }"
+            @click="applyStyle('1')"
+          >
             <span class="btn-code">^[[1m</span>
             <span class="btn-label">Bold / 加粗</span>
           </button>
-          <button @click="applyStyle('4')" :class="{ active: isUnderline }">
+          <button
+            :class="{ active: isUnderline }"
+            @click="applyStyle('4')"
+          >
             <span class="btn-code">^[[4m</span>
             <span class="btn-label">Underline / 下划线</span>
           </button>
         </div>
-        <div class="btn-group" style="margin-top: 8px">
-          <button @click="resetStyle" class="reset-btn">
+        <div
+          class="btn-group"
+          style="margin-top: 8px"
+        >
+          <button
+            class="reset-btn"
+            @click="resetStyle"
+          >
             <span class="btn-code">^[[0m</span>
             <span class="btn-label">Reset / 重置所有样式</span>
           </button>
@@ -86,22 +101,32 @@
     <div class="preview">
       <div class="terminal-window">
         <div class="window-header">
-          <div class="dots"><span></span><span></span><span></span></div>
-          <div class="window-title">Terminal Preview</div>
+          <div class="dots">
+            <span /><span /><span />
+          </div>
+          <div class="window-title">
+            Terminal Preview
+          </div>
         </div>
         <div class="window-content">
           <div class="sequence-display-area">
             <span class="label">Last Sequence:</span>
-            <span v-if="lastSequence" class="sequence-code">{{
+            <span
+              v-if="lastSequence"
+              class="sequence-code"
+            >{{
               lastSequence
             }}</span>
-            <span v-else class="placeholder">Waiting for input...</span>
+            <span
+              v-else
+              class="placeholder"
+            >Waiting for input...</span>
           </div>
 
           <div
+            v-if="isContentVisible"
             class="main-display"
             :style="currentStyle"
-            v-if="isContentVisible"
           >
             Hello World
           </div>
@@ -109,10 +134,13 @@
           <div class="cursor-line">
             <span class="prompt">$</span>
             <span
-              class="cursor-placeholder"
               v-if="cursorMode === 'absolute'"
-            ></span>
-            <span class="cursor-block" :style="cursorStyle"></span>
+              class="cursor-placeholder"
+            />
+            <span
+              class="cursor-block"
+              :style="cursorStyle"
+            />
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue
index dd35798..b5dc8a5 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/FlowDiagram.vue
@@ -13,69 +13,111 @@
 <template>
   <div class="flow-diagram">
     <div class="stack-col">
-      <div class="stack-label">TERMINAL STACK</div>
+      <div class="stack-label">
+        TERMINAL STACK
+      </div>
 
-      <div class="stack-box kbd" :class="{ active: activeStage === 'kbd' }">
+      <div
+        class="stack-box kbd"
+        :class="{ active: activeStage === 'kbd' }"
+      >
         <div class="box-header">
           <span class="box-icon">[kbd]</span>
           <span class="box-title">You (Keyboard)</span>
         </div>
-        <div class="box-desc">Physical keystrokes</div>
+        <div class="box-desc">
+          Physical keystrokes
+        </div>
       </div>
 
-      <div class="arrow">↓ / ↑</div>
+      <div class="arrow">
+        ↓ / ↑
+      </div>
 
-      <div class="stack-box tty" :class="{ active: activeStage === 'tty' }">
+      <div
+        class="stack-box tty"
+        :class="{ active: activeStage === 'tty' }"
+      >
         <div class="box-header">
           <span class="box-icon">[tty]</span>
           <span class="box-title">Terminal Emulator</span>
         </div>
-        <div class="box-desc">Encodes input, renders output</div>
+        <div class="box-desc">
+          Encodes input, renders output
+        </div>
       </div>
 
-      <div class="arrow">↓ / ↑</div>
+      <div class="arrow">
+        ↓ / ↑
+      </div>
 
-      <div class="stack-box pty" :class="{ active: activeStage === 'pty' }">
+      <div
+        class="stack-box pty"
+        :class="{ active: activeStage === 'pty' }"
+      >
         <div class="box-header">
           <span class="box-icon">[pty]</span>
           <span class="box-title">PTY (Pseudo-Terminal)</span>
         </div>
-        <div class="box-desc">Bidirectional pipe</div>
+        <div class="box-desc">
+          Bidirectional pipe
+        </div>
       </div>
 
-      <div class="arrow">↓ / ↑</div>
+      <div class="arrow">
+        ↓ / ↑
+      </div>
 
-      <div class="stack-box sh" :class="{ active: activeStage === 'sh' }">
+      <div
+        class="stack-box sh"
+        :class="{ active: activeStage === 'sh' }"
+      >
         <div class="box-header">
           <span class="box-icon">[sh]</span>
           <span class="box-title">Shell / Program</span>
         </div>
-        <div class="box-desc">bash, zsh, or any CLI program</div>
+        <div class="box-desc">
+          bash, zsh, or any CLI program
+        </div>
       </div>
     </div>
 
     <div class="output-col">
-      <div class="output-label">OUTPUT</div>
+      <div class="output-label">
+        OUTPUT
+      </div>
 
       <div class="terminal-preview">
-        <div class="term-header"><span></span><span></span><span></span></div>
+        <div class="term-header">
+          <span /><span /><span />
+        </div>
         <div class="term-body">
           <span class="prompt">$ </span>
           <span class="typed-text">{{ displayText }}</span>
-          <span class="cursor" :class="{ blinking: !isAnimating }"></span>
+          <span
+            class="cursor"
+            :class="{ blinking: !isAnimating }"
+          />
         </div>
       </div>
 
       <div class="status-box">
-        <div class="status-title" :class="statusColor">{{ statusTitle }}</div>
-        <div class="status-desc">{{ statusDesc }}</div>
+        <div
+          class="status-title"
+          :class="statusColor"
+        >
+          {{ statusTitle }}
+        </div>
+        <div class="status-desc">
+          {{ statusDesc }}
+        </div>
       </div>
 
       <div class="controls">
         <button
           class="play-btn"
-          @click="startAnimation"
           :disabled="isAnimating"
+          @click="startAnimation"
         >
           {{ isAnimating ? 'Simulating...' : 'Simulate Keystroke' }}
         </button>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue
index 0635754..d76ec96 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/InputVisualizer.vue
@@ -18,24 +18,41 @@
     @keydown="handleKeydown"
     @blur="handleBlur"
   >
-    <div class="focus-overlay" v-if="!isFocused" @click="focus">
+    <div
+      v-if="!isFocused"
+      class="focus-overlay"
+      @click="focus"
+    >
       <div class="focus-btn">
         <span class="icon">⌨️</span>
         <span>Click to Type</span>
       </div>
     </div>
 
-    <div class="main-display" :class="{ 'blur-content': !isFocused }">
-      <div class="key-name">{{ currentKey.name || 'Press any key' }}</div>
+    <div
+      class="main-display"
+      :class="{ 'blur-content': !isFocused }"
+    >
+      <div class="key-name">
+        {{ currentKey.name || 'Press any key' }}
+      </div>
 
       <div class="info-grid">
         <div class="info-box">
-          <div class="label">BYTES (HEX)</div>
-          <div class="value highlight">{{ currentKey.bytes || '-' }}</div>
+          <div class="label">
+            BYTES (HEX)
+          </div>
+          <div class="value highlight">
+            {{ currentKey.bytes || '-' }}
+          </div>
         </div>
         <div class="info-box">
-          <div class="label">SEQUENCE</div>
-          <div class="value code">{{ currentKey.sequence || '-' }}</div>
+          <div class="label">
+            SEQUENCE
+          </div>
+          <div class="value code">
+            {{ currentKey.sequence || '-' }}
+          </div>
         </div>
       </div>
 
@@ -46,7 +63,11 @@
     </div>
 
     <div class="history-strip">
-      <div v-for="(item, i) in history" :key="i" class="history-item">
+      <div
+        v-for="(item, i) in history"
+        :key="i"
+        class="history-item"
+      >
         <span class="h-name">{{ item.name }}</span>
         <span class="arrow">→</span>
         <span class="h-bytes">{{ item.bytes }}</span>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue
index 3225908..51b15cd 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/SignalsDemo.vue
@@ -24,7 +24,9 @@
             <span class="key">Ctrl</span>+<span class="key">C</span>
             <span class="action">Interrupt</span>
           </div>
-          <div class="signal-name">SIGINT</div>
+          <div class="signal-name">
+            SIGINT
+          </div>
         </div>
 
         <div
@@ -36,7 +38,9 @@
             <span class="key">Ctrl</span>+<span class="key">Z</span>
             <span class="action">Suspend</span>
           </div>
-          <div class="signal-name">SIGTSTP</div>
+          <div class="signal-name">
+            SIGTSTP
+          </div>
         </div>
       </div>
 
@@ -46,7 +50,9 @@
             <span class="highlight">Ctrl+C</span> →
             <span class="signal-green">SIGINT</span>
           </div>
-          <div class="info-desc">Stop the running program</div>
+          <div class="info-desc">
+            Stop the running program
+          </div>
           <p>
             Sends SIGINT (signal interrupt) to the foreground process. Most
             programs respond by stopping immediately. It's how you cancel a
@@ -62,7 +68,9 @@
             <span class="highlight">Ctrl+Z</span> →
             <span class="signal-blue">SIGTSTP</span>
           </div>
-          <div class="info-desc">Suspend the running program</div>
+          <div class="info-desc">
+            Suspend the running program
+          </div>
           <p>
             Sends SIGTSTP (signal terminal stop). The process is paused and put
             in the background. You can resume it later with `fg` command.
@@ -73,7 +81,9 @@
           </div>
         </div>
         <div v-else>
-          <div class="info-header">Select a signal</div>
+          <div class="info-header">
+            Select a signal
+          </div>
           <p>Click on a signal type above to see how it works.</p>
         </div>
       </div>
@@ -82,7 +92,9 @@
     <div class="right-panel">
       <div class="terminal-window">
         <div class="window-header">
-          <div class="dots"><span></span><span></span><span></span></div>
+          <div class="dots">
+            <span /><span /><span />
+          </div>
         </div>
         <div class="window-content">
           <div
@@ -93,24 +105,54 @@
           >
             {{ line.text }}
           </div>
-          <div v-if="isRunning" class="term-line output">sleeping...</div>
-          <div v-if="inputBuffer" class="term-line input">
-            <span class="prompt">$</span> {{ inputBuffer
-            }}<span class="cursor"></span>
+          <div
+            v-if="isRunning"
+            class="term-line output"
+          >
+            sleeping...
           </div>
-          <div v-else class="term-line input">
-            <span class="prompt">$</span> <span class="cursor"></span>
+          <div
+            v-if="inputBuffer"
+            class="term-line input"
+          >
+            <span class="prompt">$</span> {{ inputBuffer
+            }}<span class="cursor" />
+          </div>
+          <div
+            v-else
+            class="term-line input"
+          >
+            <span class="prompt">$</span> <span class="cursor" />
           </div>
         </div>
       </div>
 
       <div class="controls">
-        <button class="btn" @click="runCommand" :disabled="isRunning">
+        <button
+          class="btn"
+          :disabled="isRunning"
+          @click="runCommand"
+        >
           Run Command
         </button>
-        <button class="btn" @click="sendSignal('SIGINT')">Ctrl+C</button>
-        <button class="btn" @click="sendSignal('SIGTSTP')">Ctrl+Z</button>
-        <button class="btn secondary" @click="reset">Reset</button>
+        <button
+          class="btn"
+          @click="sendSignal('SIGINT')"
+        >
+          Ctrl+C
+        </button>
+        <button
+          class="btn"
+          @click="sendSignal('SIGTSTP')"
+        >
+          Ctrl+Z
+        </button>
+        <button
+          class="btn secondary"
+          @click="reset"
+        >
+          Reset
+        </button>
       </div>
 
       <div class="state-display">
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue
index 78ba26d..0e91460 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalDefinition.vue
@@ -1,16 +1,25 @@
 <template>
   <div class="terminal-definition">
     <div class="mode-switch">
-      <button :class="{ active: mode === 'cli' }" @click="mode = 'cli'">
+      <button
+        :class="{ active: mode === 'cli' }"
+        @click="mode = 'cli'"
+      >
         🖥️ CLI (命令行界面)
       </button>
-      <button :class="{ active: mode === 'gui' }" @click="mode = 'gui'">
+      <button
+        :class="{ active: mode === 'gui' }"
+        @click="mode = 'gui'"
+      >
         🖱️ GUI (图形用户界面)
       </button>
     </div>
 
     <!-- CLI Visualization -->
-    <div v-if="mode === 'cli'" class="visualization-container">
+    <div
+      v-if="mode === 'cli'"
+      class="visualization-container"
+    >
       <div class="flow-container">
         <!-- Input Side -->
         <div class="stage input-stage">
@@ -26,26 +35,39 @@
               stroke-linecap="round"
               stroke-linejoin="round"
             >
-              <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
-              <path d="M6 8h.001"></path>
-              <path d="M10 8h.001"></path>
-              <path d="M14 8h.001"></path>
-              <path d="M18 8h.001"></path>
-              <path d="M6 12h.001"></path>
-              <path d="M10 12h.001"></path>
-              <path d="M14 12h.001"></path>
-              <path d="M18 12h.001"></path>
-              <path d="M7 16h10"></path>
+              <rect
+                x="2"
+                y="4"
+                width="20"
+                height="16"
+                rx="2"
+                ry="2"
+              />
+              <path d="M6 8h.001" />
+              <path d="M10 8h.001" />
+              <path d="M14 8h.001" />
+              <path d="M18 8h.001" />
+              <path d="M6 12h.001" />
+              <path d="M10 12h.001" />
+              <path d="M14 12h.001" />
+              <path d="M18 12h.001" />
+              <path d="M7 16h10" />
             </svg>
           </div>
-          <div class="label">Input (Keyboard)</div>
-          <div class="sub-label">发送指令 (字符信号)</div>
+          <div class="label">
+            Input (Keyboard)
+          </div>
+          <div class="sub-label">
+            发送指令 (字符信号)
+          </div>
         </div>
 
         <!-- Stream Animation -->
         <div class="stream-path">
-          <div class="stream-line"></div>
-          <div class="stream-label">Character Stream / 字符流</div>
+          <div class="stream-line" />
+          <div class="stream-label">
+            Character Stream / 字符流
+          </div>
           <div
             v-for="char in activeChars"
             :key="char.id"
@@ -64,8 +86,12 @@
               }}<span class="cursor">_</span>
             </div>
           </div>
-          <div class="label">Output (Text Grid)</div>
-          <div class="sub-label">文本网格反馈</div>
+          <div class="label">
+            Output (Text Grid)
+          </div>
+          <div class="sub-label">
+            文本网格反馈
+          </div>
         </div>
       </div>
 
@@ -77,7 +103,10 @@
       </div>
 
       <div class="control-bar">
-        <button @click="startSimulation" :disabled="isAnimating">
+        <button
+          :disabled="isAnimating"
+          @click="startSimulation"
+        >
           <span v-if="!isAnimating">▶ Play Simulation / 演示输入流</span>
           <span v-else>Simulating... / 演示中...</span>
         </button>
@@ -85,11 +114,17 @@
     </div>
 
     <!-- GUI Visualization -->
-    <div v-else class="visualization-container">
+    <div
+      v-else
+      class="visualization-container"
+    >
       <div class="flow-container">
         <!-- Input Side -->
         <div class="stage input-stage">
-          <div class="icon-box gui-input" :class="{ clicking: isGuiClicking }">
+          <div
+            class="icon-box gui-input"
+            :class="{ clicking: isGuiClicking }"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="32"
@@ -101,18 +136,24 @@
               stroke-linecap="round"
               stroke-linejoin="round"
             >
-              <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
-              <path d="M13 13l6 6"></path>
+              <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+              <path d="M13 13l6 6" />
             </svg>
           </div>
-          <div class="label">Input (Mouse)</div>
-          <div class="sub-label">发送事件 (坐标/点击)</div>
+          <div class="label">
+            Input (Mouse)
+          </div>
+          <div class="sub-label">
+            发送事件 (坐标/点击)
+          </div>
         </div>
 
         <!-- Event Animation -->
         <div class="stream-path">
-          <div class="stream-line dashed"></div>
-          <div class="stream-label">Event Loop / 事件循环</div>
+          <div class="stream-line dashed" />
+          <div class="stream-label">
+            Event Loop / 事件循环
+          </div>
           <div
             v-for="ev in guiEvents"
             :key="ev.id"
@@ -127,15 +168,23 @@
         <div class="stage output-stage">
           <div class="gui-screen">
             <div class="window-frame">
-              <div class="win-header"></div>
+              <div class="win-header" />
               <div class="win-body">
                 <div class="icon-grid">
-                  <div class="desktop-icon" :class="{ selected: iconSelected }">
+                  <div
+                    class="desktop-icon"
+                    :class="{ selected: iconSelected }"
+                  >
                     📁
                   </div>
-                  <div class="desktop-icon">📄</div>
+                  <div class="desktop-icon">
+                    📄
+                  </div>
                 </div>
-                <div class="gui-cursor" :style="cursorStyle">
+                <div
+                  class="gui-cursor"
+                  :style="cursorStyle"
+                >
                   <svg
                     width="12"
                     height="12"
@@ -144,14 +193,18 @@
                     stroke="black"
                     stroke-width="2"
                   >
-                    <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
+                    <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
                   </svg>
                 </div>
               </div>
             </div>
           </div>
-          <div class="label">Output (Graphics)</div>
-          <div class="sub-label">像素图形渲染</div>
+          <div class="label">
+            Output (Graphics)
+          </div>
+          <div class="sub-label">
+            像素图形渲染
+          </div>
         </div>
       </div>
 
@@ -164,7 +217,10 @@
       </div>
 
       <div class="control-bar">
-        <button @click="startGuiSimulation" :disabled="isGuiAnimating">
+        <button
+          :disabled="isGuiAnimating"
+          @click="startGuiSimulation"
+        >
           <span v-if="!isGuiAnimating">▶ Play Interaction / 演示交互</span>
           <span v-else>Simulating... / 演示中...</span>
         </button>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue
index 3cf82e9..bb31703 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalGrid.vue
@@ -14,11 +14,15 @@
 <template>
   <div class="grid-demo">
     <div class="terminal-screen">
-      <div class="grid-row" v-for="(row, rIndex) in rows" :key="rIndex">
+      <div
+        v-for="(row, rIndex) in rows"
+        :key="rIndex"
+        class="grid-row"
+      >
         <div
-          class="grid-cell"
           v-for="(cell, cIndex) in row"
           :key="cIndex"
+          class="grid-cell"
           :class="{
             'active-cursor': cursor.r === rIndex && cursor.c === cIndex,
             drawn: cell.drawn
@@ -34,13 +38,18 @@
     <div class="controls">
       <input
         ref="inputRef"
-        type="text"
         v-model="inputText"
+        type="text"
         placeholder="Type here..."
         class="text-input"
         @keydown="handleKeydown"
-      />
-      <button class="btn" @click="clearGrid">Clear</button>
+      >
+      <button
+        class="btn"
+        @click="clearGrid"
+      >
+        Clear
+      </button>
       <span class="hint">Click/Drag cells to draw, Type to insert text</span>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
index bacd0c4..e7de28f 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalHandsOn.vue
@@ -4,29 +4,43 @@
       <!-- Left Panel: Task Guide -->
       <div class="task-panel">
         <div class="panel-header">
-          <span class="panel-title"
-            >🎯 实操任务 ({{ currentTaskIndex + 1 }}/{{ tasks.length }})</span
-          >
+          <span class="panel-title">🎯 实操任务 ({{ currentTaskIndex + 1 }}/{{ tasks.length }})</span>
           <div class="os-selector">
-            <select v-model="currentOS" @change="resetCurrentTask">
-              <option value="mac">macOS</option>
-              <option value="win-ps">Windows PowerShell</option>
-              <option value="win-cmd">Windows CMD</option>
-              <option value="linux">Linux</option>
+            <select
+              v-model="currentOS"
+              @change="resetCurrentTask"
+            >
+              <option value="mac">
+                macOS
+              </option>
+              <option value="win-ps">
+                Windows PowerShell
+              </option>
+              <option value="win-cmd">
+                Windows CMD
+              </option>
+              <option value="linux">
+                Linux
+              </option>
             </select>
           </div>
         </div>
 
         <div class="task-content">
           <h3>{{ currentTask.title }}</h3>
-          <p class="task-desc">{{ currentTask.description }}</p>
+          <p class="task-desc">
+            {{ currentTask.description }}
+          </p>
 
           <div class="ai-helper">
             <div class="ai-header">
               <span class="ai-icon">🤖</span>
               <span class="ai-title">不知道怎么写？问问 AI</span>
             </div>
-            <div class="ai-chat" v-show="isAiOpen">
+            <div
+              v-show="isAiOpen"
+              class="ai-chat"
+            >
               <div class="chat-bubble user">
                 {{ currentTask.aiQuery }}
               </div>
@@ -34,7 +48,7 @@
                 <p>
                   {{
                     currentTask.aiResponse[currentOS] ||
-                    currentTask.aiResponse.common
+                      currentTask.aiResponse.common
                   }}
                 </p>
                 <!-- Multiple Commands Support -->
@@ -68,61 +82,90 @@
             </div>
           </div>
 
-          <div class="expected-result" v-if="!isTaskCompleted">
+          <div
+            v-if="!isTaskCompleted"
+            class="expected-result"
+          >
             <span class="label">预期目标：</span>
             <span class="value">{{ currentTask.goal }}</span>
           </div>
 
-          <div class="success-message" v-if="isTaskCompleted">
+          <div
+            v-if="isTaskCompleted"
+            class="success-message"
+          >
             <span class="icon">🎉</span>
             <span>太棒了！任务完成！</span>
             <button
+              v-if="currentTaskIndex < tasks.length - 1"
               class="next-btn"
               @click="nextTask"
-              v-if="currentTaskIndex < tasks.length - 1"
             >
               下一关
             </button>
-            <button class="reset-btn" @click="resetAll" v-else>重新开始</button>
+            <button
+              v-else
+              class="reset-btn"
+              @click="resetAll"
+            >
+              重新开始
+            </button>
           </div>
         </div>
       </div>
 
       <!-- Right Panel: Terminal Emulator -->
-      <div class="terminal-panel" :class="currentOS">
+      <div
+        class="terminal-panel"
+        :class="currentOS"
+      >
         <div class="terminal-header">
           <div class="dots">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
+            <span class="dot red" />
+            <span class="dot yellow" />
+            <span class="dot green" />
+          </div>
+          <div class="title">
+            {{ terminalTitle }}
           </div>
-          <div class="title">{{ terminalTitle }}</div>
         </div>
-        <div class="terminal-body" ref="terminalBody" @click="focusInput">
-          <div v-for="(line, index) in history" :key="index" class="line">
-            <span v-if="line.type === 'input'" class="prompt">{{
+        <div
+          ref="terminalBody"
+          class="terminal-body"
+          @click="focusInput"
+        >
+          <div
+            v-for="(line, index) in history"
+            :key="index"
+            class="line"
+          >
+            <span
+              v-if="line.type === 'input'"
+              class="prompt"
+            >{{
               line.prompt
             }}</span>
             <span :class="line.type">{{ line.content }}</span>
           </div>
 
           <div
-            class="line input-line"
             v-if="!isTaskCompleted || currentTaskIndex < tasks.length - 1"
+            class="line input-line"
           >
             <span class="prompt">{{ prompt }}</span>
             <input
               ref="cmdInput"
               v-model="inputCmd"
-              @keydown.enter="executeCommand"
-              @keydown.tab.prevent
               type="text"
               spellcheck="false"
               autocomplete="off"
-            />
-            <span v-if="inputCmd.length > 0" class="enter-hint"
-              >⏎ 按回车执行</span
+              @keydown.enter="executeCommand"
+              @keydown.tab.prevent
             >
+            <span
+              v-if="inputCmd.length > 0"
+              class="enter-hint"
+            >⏎ 按回车执行</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalOSDemo.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalOSDemo.vue
index a285508..cee03ca 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalOSDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/TerminalOSDemo.vue
@@ -12,34 +12,43 @@
       </button>
     </div>
 
-    <div class="terminal-window" :class="currentOS">
+    <div
+      class="terminal-window"
+      :class="currentOS"
+    >
       <div class="window-bar">
         <div class="window-buttons">
-          <span class="btn close"></span>
-          <span class="btn minimize"></span>
-          <span class="btn maximize"></span>
+          <span class="btn close" />
+          <span class="btn minimize" />
+          <span class="btn maximize" />
+        </div>
+        <div class="window-title">
+          {{ currentOSConfig.title }}
         </div>
-        <div class="window-title">{{ currentOSConfig.title }}</div>
         <div class="window-controls">
-          <button class="control-btn" @click="resetDemo" title="Reset">
+          <button
+            class="control-btn"
+            title="Reset"
+            @click="resetDemo"
+          >
             ↺
           </button>
         </div>
       </div>
       <div
         class="terminal-content"
-        @click="nextStep"
         :class="{ clickable: !isTyping && !isFinished }"
+        @click="nextStep"
       >
         <!-- Start Overlay -->
         <div
-          class="start-overlay"
           v-if="
             lines.length === 0 ||
-            (lines.length === 1 &&
-              lines[0].content === '' &&
-              currentStepIndex === -1)
+              (lines.length === 1 &&
+                lines[0].content === '' &&
+                currentStepIndex === -1)
           "
+          class="start-overlay"
         >
           <div class="start-hint">
             <span class="icon">👆</span>
@@ -48,17 +57,26 @@
         </div>
 
         <!-- Completed Overlay -->
-        <div class="completed-overlay" v-if="isFinished">
-          <div class="completed-hint" @click.stop="resetDemo">
+        <div
+          v-if="isFinished"
+          class="completed-overlay"
+        >
+          <div
+            class="completed-hint"
+            @click.stop="resetDemo"
+          >
             <span class="icon">✅</span>
             <span class="text">演示结束，点击重置 / Finished (Reset)</span>
           </div>
         </div>
 
-        <div v-for="(line, index) in lines" :key="index" class="line">
+        <div
+          v-for="(line, index) in lines"
+          :key="index"
+          class="line"
+        >
           <template v-if="line.type === 'input'">
-            <span class="prompt">{{ line.prompt }}</span
-            ><span class="cmd-text">{{ line.content }}</span>
+            <span class="prompt">{{ line.prompt }}</span><span class="cmd-text">{{ line.content }}</span>
           </template>
           <template v-else>
             <span class="output-text">{{ line.content }}</span>
@@ -67,25 +85,33 @@
 
         <!-- Active Input Line (when not animating or just waiting) -->
         <div
-          class="line input-line"
           v-if="
             lines.length === 0 ||
-            (!isTyping &&
-              lines[lines.length - 1].type !== 'input' &&
-              !isFinished)
+              (!isTyping &&
+                lines[lines.length - 1].type !== 'input' &&
+                !isFinished)
           "
+          class="line input-line"
         >
           <span class="prompt">{{ currentOSConfig.prompt }}</span>
           <span class="cursor">_</span>
-          <span v-if="lines.length === 0" class="hint">
-            (点击屏幕继续 / Click screen to continue)</span
+          <span
+            v-if="lines.length === 0"
+            class="hint"
           >
-          <span v-else class="hint blink-hint"> ⏎ </span>
+            (点击屏幕继续 / Click screen to continue)</span>
+          <span
+            v-else
+            class="hint blink-hint"
+          > ⏎ </span>
         </div>
       </div>
 
       <!-- Explanation Bar -->
-      <div class="explanation-bar" :class="{ visible: currentExplanation }">
+      <div
+        class="explanation-bar"
+        :class="{ visible: currentExplanation }"
+      >
         <span class="icon">💡</span>
         <span class="text">{{ currentExplanation }}</span>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue b/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue
index b7e0f82..07bffbf 100644
--- a/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue
+++ b/docs/.vitepress/theme/components/appendix/terminal-intro/WebTerminal.vue
@@ -16,19 +16,28 @@
     <div class="terminal-container">
       <div class="terminal-header">
         <div class="terminal-buttons">
-          <span class="btn red"></span>
-          <span class="btn yellow"></span>
-          <span class="btn green"></span>
+          <span class="btn red" />
+          <span class="btn yellow" />
+          <span class="btn green" />
+        </div>
+        <div class="terminal-title">
+          Terminal - zsh
         </div>
-        <div class="terminal-title">Terminal - zsh</div>
       </div>
-      <div class="terminal-body" ref="terminalBody" @click="focusInput">
+      <div
+        ref="terminalBody"
+        class="terminal-body"
+        @click="focusInput"
+      >
         <div
           v-for="(line, index) in history"
           :key="index"
           class="terminal-line"
         >
-          <span class="prompt" v-if="line.type === 'input'">
+          <span
+            v-if="line.type === 'input'"
+            class="prompt"
+          >
             <span class="path">{{ currentPath }}</span>
             <span class="arrow">$ </span>
           </span>
@@ -40,16 +49,16 @@
             <span class="arrow">$ </span>
           </span>
           <input
-            type="text"
+            ref="inputField"
             v-model="currentInput"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
             @keyup.enter="executeCommand"
             @keydown.up.prevent="navigateHistory(-1)"
             @keydown.down.prevent="navigateHistory(1)"
             @keydown.tab.prevent="handleTabCompletion"
-            ref="inputField"
-            autocomplete="off"
-            spellcheck="false"
-          />
+          >
         </div>
       </div>
     </div>
@@ -63,22 +72,31 @@
       </div>
       <div class="sheet-content">
         <div
-          class="cmd-group"
           v-for="(group, gIndex) in cheatSheet"
           :key="gIndex"
+          class="cmd-group"
         >
-          <div class="group-title">{{ group.category }}</div>
+          <div class="group-title">
+            {{ group.category }}
+          </div>
           <div
-            class="cmd-item"
             v-for="(cmd, cIndex) in group.commands"
             :key="cIndex"
+            class="cmd-item"
           >
-            <div class="cmd-name" @click="fillCommand(cmd.name)">
+            <div
+              class="cmd-name"
+              @click="fillCommand(cmd.name)"
+            >
               {{ cmd.name }}
             </div>
             <div class="cmd-desc">
-              <div class="en">{{ cmd.descEn }}</div>
-              <div class="zh">{{ cmd.descZh }}</div>
+              <div class="en">
+                {{ cmd.descEn }}
+              </div>
+              <div class="zh">
+                {{ cmd.descZh }}
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue
index f7609a4..25e7cef 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataCollectionDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="data-collection-demo">
     <div class="header">
-      <div class="title">数据采集方案</div>
-      <div class="subtitle">客户端、服务端、CDN三种采集方式对比</div>
+      <div class="title">
+        数据采集方案
+      </div>
+      <div class="subtitle">
+        客户端、服务端、CDN三种采集方式对比
+      </div>
     </div>
 
     <div class="collection-methods">
@@ -14,32 +18,62 @@
         v-for="method in methods"
         :key="method.id"
         class="method-card"
-        @click="selectedMethod = method.id"
         :class="{ active: selectedMethod === method.id }"
+        @click="selectedMethod = method.id"
       >
-        <div class="method-icon">{{ method.icon }}</div>
-        <div class="method-name">{{ method.name }}</div>
-        <div class="method-desc">{{ method.desc }}</div>
+        <div class="method-icon">
+          {{ method.icon }}
+        </div>
+        <div class="method-name">
+          {{ method.name }}
+        </div>
+        <div class="method-desc">
+          {{ method.desc }}
+        </div>
 
-        <div class="method-details" v-if="selectedMethod === method.id">
+        <div
+          v-if="selectedMethod === method.id"
+          class="method-details"
+        >
           <div class="detail-section">
-            <div class="section-title">✅ 优点</div>
+            <div class="section-title">
+              ✅ 优点
+            </div>
             <ul class="detail-list">
-              <li v-for="(pro, i) in method.pros" :key="i">{{ pro }}</li>
+              <li
+                v-for="(pro, i) in method.pros"
+                :key="i"
+              >
+                {{ pro }}
+              </li>
             </ul>
           </div>
 
           <div class="detail-section">
-            <div class="section-title">❌ 缺点</div>
+            <div class="section-title">
+              ❌ 缺点
+            </div>
             <ul class="detail-list">
-              <li v-for="(con, i) in method.cons" :key="i">{{ con }}</li>
+              <li
+                v-for="(con, i) in method.cons"
+                :key="i"
+              >
+                {{ con }}
+              </li>
             </ul>
           </div>
 
           <div class="detail-section">
-            <div class="section-title">🎯 适用场景</div>
+            <div class="section-title">
+              🎯 适用场景
+            </div>
             <ul class="detail-list">
-              <li v-for="(use, i) in method.useCases" :key="i">{{ use }}</li>
+              <li
+                v-for="(use, i) in method.useCases"
+                :key="i"
+              >
+                {{ use }}
+              </li>
             </ul>
           </div>
         </div>
@@ -47,12 +81,17 @@
     </div>
 
     <div class="comparison-table">
-      <div class="table-title">方案对比</div>
+      <div class="table-title">
+        方案对比
+      </div>
       <table class="comparison">
         <thead>
           <tr>
             <th>对比维度</th>
-            <th v-for="method in methods" :key="method.id">
+            <th
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.name }}
             </th>
           </tr>
@@ -60,25 +99,37 @@
         <tbody>
           <tr>
             <td>数据准确性</td>
-            <td v-for="method in methods" :key="method.id">
+            <td
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.accuracy }}
             </td>
           </tr>
           <tr>
             <td>实时性</td>
-            <td v-for="method in methods" :key="method.id">
+            <td
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.realtime }}
             </td>
           </tr>
           <tr>
             <td>开发成本</td>
-            <td v-for="method in methods" :key="method.id">
+            <td
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.cost }}
             </td>
           </tr>
           <tr>
             <td>维护成本</td>
-            <td v-for="method in methods" :key="method.id">
+            <td
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.maintenance }}
             </td>
           </tr>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue
index b3746b8..2e50b00 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataModelDesignDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="data-model-design-demo">
     <div class="header">
-      <div class="title">数据模型设计</div>
-      <div class="subtitle">埋点数据的核心三要素：事件、用户、会话</div>
+      <div class="title">
+        数据模型设计
+      </div>
+      <div class="subtitle">
+        埋点数据的核心三要素：事件、用户、会话
+      </div>
     </div>
 
     <div class="model-tabs">
@@ -23,11 +27,18 @@
 
     <div class="model-content">
       <!-- 事件模型 -->
-      <div v-if="selectedModel === 'event'" class="model-detail">
+      <div
+        v-if="selectedModel === 'event'"
+        class="model-detail"
+      >
         <div class="model-intro">
-          <div class="intro-icon">📊</div>
+          <div class="intro-icon">
+            📊
+          </div>
           <div class="intro-text">
-            <div class="intro-title">事件模型 (Event Model)</div>
+            <div class="intro-title">
+              事件模型 (Event Model)
+            </div>
             <div class="intro-desc">
               一个事件 = 用户的一次行为动作，是埋点系统中最基本的数据单元
             </div>
@@ -35,10 +46,14 @@
         </div>
 
         <div class="event-naming">
-          <div class="section-title">命名规范</div>
+          <div class="section-title">
+            命名规范
+          </div>
           <div class="naming-rules">
             <div class="rule-item good">
-              <div class="rule-label">✅ 好的命名</div>
+              <div class="rule-label">
+                ✅ 好的命名
+              </div>
               <div class="rule-examples">
                 <code>click_button</code>
                 <code>view_page</code>
@@ -47,7 +62,9 @@
               </div>
             </div>
             <div class="rule-item bad">
-              <div class="rule-label">❌ 不好的命名</div>
+              <div class="rule-label">
+                ❌ 不好的命名
+              </div>
               <div class="rule-examples">
                 <code>button_click</code>
                 <code>page_view</code>
@@ -56,11 +73,15 @@
               </div>
             </div>
           </div>
-          <div class="naming-tip">💡 原则：动词在前，名词在后，简洁明确</div>
+          <div class="naming-tip">
+            💡 原则：动词在前，名词在后，简洁明确
+          </div>
         </div>
 
         <div class="event-structure">
-          <div class="section-title">事件数据结构</div>
+          <div class="section-title">
+            事件数据结构
+          </div>
           <div class="code-example">
             <pre><code>{
   <span class="key">"event"</span>: <span class="string">"click_button"</span>,
@@ -86,36 +107,60 @@
         </div>
 
         <div class="event-best-practices">
-          <div class="section-title">最佳实践</div>
+          <div class="section-title">
+            最佳实践
+          </div>
           <div class="practices-grid">
             <div class="practice-item">
-              <div class="practice-icon">🎯</div>
+              <div class="practice-icon">
+                🎯
+              </div>
               <div class="practice-content">
-                <div class="practice-title">明确事件目标</div>
+                <div class="practice-title">
+                  明确事件目标
+                </div>
                 <div class="practice-desc">
                   每个事件都应有明确的业务分析目标
                 </div>
               </div>
             </div>
             <div class="practice-item">
-              <div class="practice-icon">📝</div>
+              <div class="practice-icon">
+                📝
+              </div>
               <div class="practice-content">
-                <div class="practice-title">属性完整丰富</div>
-                <div class="practice-desc">包含所有可能影响业务决策的维度</div>
+                <div class="practice-title">
+                  属性完整丰富
+                </div>
+                <div class="practice-desc">
+                  包含所有可能影响业务决策的维度
+                </div>
               </div>
             </div>
             <div class="practice-item">
-              <div class="practice-icon">🔄</div>
+              <div class="practice-icon">
+                🔄
+              </div>
               <div class="practice-content">
-                <div class="practice-title">保持命名一致</div>
-                <div class="practice-desc">同一类型事件使用统一的命名规范</div>
+                <div class="practice-title">
+                  保持命名一致
+                </div>
+                <div class="practice-desc">
+                  同一类型事件使用统一的命名规范
+                </div>
               </div>
             </div>
             <div class="practice-item">
-              <div class="practice-icon">🚫</div>
+              <div class="practice-icon">
+                🚫
+              </div>
               <div class="practice-content">
-                <div class="practice-title">避免过度采集</div>
-                <div class="practice-desc">只采集必要数据，减少隐私风险</div>
+                <div class="practice-title">
+                  避免过度采集
+                </div>
+                <div class="practice-desc">
+                  只采集必要数据，减少隐私风险
+                </div>
               </div>
             </div>
           </div>
@@ -123,11 +168,18 @@
       </div>
 
       <!-- 用户模型 -->
-      <div v-if="selectedModel === 'user'" class="model-detail">
+      <div
+        v-if="selectedModel === 'user'"
+        class="model-detail"
+      >
         <div class="model-intro">
-          <div class="intro-icon">👤</div>
+          <div class="intro-icon">
+            👤
+          </div>
           <div class="intro-text">
-            <div class="intro-title">用户模型 (User Model)</div>
+            <div class="intro-title">
+              用户模型 (User Model)
+            </div>
             <div class="intro-desc">
               跨设备关联用户身份，实现用户全生命周期管理
             </div>
@@ -135,12 +187,18 @@
         </div>
 
         <div class="user-identity">
-          <div class="section-title">身份识别体系</div>
+          <div class="section-title">
+            身份识别体系
+          </div>
           <div class="identity-types">
             <div class="identity-card primary">
               <div class="identity-header">
-                <div class="identity-icon">🆔</div>
-                <div class="identity-name">user_id</div>
+                <div class="identity-icon">
+                  🆔
+                </div>
+                <div class="identity-name">
+                  user_id
+                </div>
               </div>
               <div class="identity-info">
                 <div class="info-row">
@@ -160,8 +218,12 @@
 
             <div class="identity-card secondary">
               <div class="identity-header">
-                <div class="identity-icon">📱</div>
-                <div class="identity-name">device_id</div>
+                <div class="identity-icon">
+                  📱
+                </div>
+                <div class="identity-name">
+                  device_id
+                </div>
               </div>
               <div class="identity-info">
                 <div class="info-row">
@@ -181,8 +243,12 @@
 
             <div class="identity-card tertiary">
               <div class="identity-header">
-                <div class="identity-icon">🌐</div>
-                <div class="identity-name">session_id</div>
+                <div class="identity-icon">
+                  🌐
+                </div>
+                <div class="identity-name">
+                  session_id
+                </div>
               </div>
               <div class="identity-info">
                 <div class="info-row">
@@ -203,28 +269,40 @@
         </div>
 
         <div class="id-mapping">
-          <div class="section-title">ID Mapping（身份打通）</div>
+          <div class="section-title">
+            ID Mapping（身份打通）
+          </div>
           <div class="mapping-flow">
             <div class="mapping-step">
-              <div class="step-title">注册前（匿名）</div>
+              <div class="step-title">
+                注册前（匿名）
+              </div>
               <div class="step-code">
-                <code>device_id: "device_123"</code><br />
+                <code>device_id: "device_123"</code><br>
                 <code>user_id: null</code>
               </div>
             </div>
-            <div class="mapping-arrow">→</div>
+            <div class="mapping-arrow">
+              →
+            </div>
             <div class="mapping-step">
-              <div class="step-title">注册后（登录）</div>
+              <div class="step-title">
+                注册后（登录）
+              </div>
               <div class="step-code">
-                <code>device_id: "device_123"</code><br />
+                <code>device_id: "device_123"</code><br>
                 <code>user_id: "user_456"</code>
               </div>
             </div>
-            <div class="mapping-arrow">→</div>
+            <div class="mapping-arrow">
+              →
+            </div>
             <div class="mapping-step">
-              <div class="step-title">数据分析</div>
+              <div class="step-title">
+                数据分析
+              </div>
               <div class="step-desc">
-                通过 device_id 关联<br />
+                通过 device_id 关联<br>
                 用户注册前后行为
               </div>
             </div>
@@ -232,10 +310,14 @@
         </div>
 
         <div class="user-profile">
-          <div class="section-title">用户画像维度</div>
+          <div class="section-title">
+            用户画像维度
+          </div>
           <div class="profile-dimensions">
             <div class="dimension-group">
-              <div class="group-title">基础属性</div>
+              <div class="group-title">
+                基础属性
+              </div>
               <div class="dimension-list">
                 <span class="dimension-tag">性别</span>
                 <span class="dimension-tag">年龄</span>
@@ -244,7 +326,9 @@
               </div>
             </div>
             <div class="dimension-group">
-              <div class="group-title">行为特征</div>
+              <div class="group-title">
+                行为特征
+              </div>
               <div class="dimension-list">
                 <span class="dimension-tag">活跃度</span>
                 <span class="dimension-tag">偏好</span>
@@ -253,7 +337,9 @@
               </div>
             </div>
             <div class="dimension-group">
-              <div class="group-title">设备信息</div>
+              <div class="group-title">
+                设备信息
+              </div>
               <div class="dimension-list">
                 <span class="dimension-tag">平台</span>
                 <span class="dimension-tag">操作系统</span>
@@ -266,11 +352,18 @@
       </div>
 
       <!-- 会话模型 -->
-      <div v-if="selectedModel === 'session'" class="model-detail">
+      <div
+        v-if="selectedModel === 'session'"
+        class="model-detail"
+      >
         <div class="model-intro">
-          <div class="intro-icon">⏱️</div>
+          <div class="intro-icon">
+            ⏱️
+          </div>
           <div class="intro-text">
-            <div class="intro-title">会话模型 (Session Model)</div>
+            <div class="intro-title">
+              会话模型 (Session Model)
+            </div>
             <div class="intro-desc">
               用户一次连续的使用过程，用于分析用户粘性和转化
             </div>
@@ -278,19 +371,31 @@
         </div>
 
         <div class="session-definition">
-          <div class="section-title">会话定义</div>
+          <div class="section-title">
+            会话定义
+          </div>
           <div class="session-rules">
             <div class="rule-card web">
-              <div class="rule-icon">🌐</div>
+              <div class="rule-icon">
+                🌐
+              </div>
               <div class="rule-content">
-                <div class="rule-title">Web 会话</div>
-                <div class="rule-desc">连续浏览，无操作超过 30 分钟则结束</div>
+                <div class="rule-title">
+                  Web 会话
+                </div>
+                <div class="rule-desc">
+                  连续浏览，无操作超过 30 分钟则结束
+                </div>
               </div>
             </div>
             <div class="rule-card app">
-              <div class="rule-icon">📱</div>
+              <div class="rule-icon">
+                📱
+              </div>
               <div class="rule-content">
-                <div class="rule-title">App 会话</div>
+                <div class="rule-title">
+                  App 会话
+                </div>
                 <div class="rule-desc">
                   App 从后台回到前台，超过 5 分钟则新会话
                 </div>
@@ -300,60 +405,108 @@
         </div>
 
         <div class="session-metrics">
-          <div class="section-title">会话关键指标</div>
+          <div class="section-title">
+            会话关键指标
+          </div>
           <div class="metrics-grid">
             <div class="metric-card">
-              <div class="metric-icon">📊</div>
-              <div class="metric-name">会话时长</div>
-              <div class="metric-value">8m 32s</div>
-              <div class="metric-desc">用户平均使用时长</div>
+              <div class="metric-icon">
+                📊
+              </div>
+              <div class="metric-name">
+                会话时长
+              </div>
+              <div class="metric-value">
+                8m 32s
+              </div>
+              <div class="metric-desc">
+                用户平均使用时长
+              </div>
             </div>
             <div class="metric-card">
-              <div class="metric-icon">📄</div>
-              <div class="metric-name">会话深度</div>
-              <div class="metric-value">12.5</div>
-              <div class="metric-desc">平均浏览页面数</div>
+              <div class="metric-icon">
+                📄
+              </div>
+              <div class="metric-name">
+                会话深度
+              </div>
+              <div class="metric-value">
+                12.5
+              </div>
+              <div class="metric-desc">
+                平均浏览页面数
+              </div>
             </div>
             <div class="metric-card">
-              <div class="metric-icon">🔄</div>
-              <div class="metric-name">会话频率</div>
-              <div class="metric-value">3.2/天</div>
-              <div class="metric-desc">日均打开次数</div>
+              <div class="metric-icon">
+                🔄
+              </div>
+              <div class="metric-name">
+                会话频率
+              </div>
+              <div class="metric-value">
+                3.2/天
+              </div>
+              <div class="metric-desc">
+                日均打开次数
+              </div>
             </div>
             <div class="metric-card">
-              <div class="metric-icon">💼</div>
-              <div class="metric-name">跳出率</div>
-              <div class="metric-value">35.2%</div>
-              <div class="metric-desc">单页面跳出比例</div>
+              <div class="metric-icon">
+                💼
+              </div>
+              <div class="metric-name">
+                跳出率
+              </div>
+              <div class="metric-value">
+                35.2%
+              </div>
+              <div class="metric-desc">
+                单页面跳出比例
+              </div>
             </div>
           </div>
         </div>
 
         <div class="session-use-cases">
-          <div class="section-title">典型应用场景</div>
+          <div class="section-title">
+            典型应用场景
+          </div>
           <div class="use-case-list">
             <div class="use-case-item">
-              <div class="use-case-number">1</div>
+              <div class="use-case-number">
+                1
+              </div>
               <div class="use-case-content">
-                <div class="use-case-title">转化漏斗分析</div>
+                <div class="use-case-title">
+                  转化漏斗分析
+                </div>
                 <div class="use-case-desc">
                   分析用户从进入到完成目标的转化路径，识别流失环节
                 </div>
               </div>
             </div>
             <div class="use-case-item">
-              <div class="use-case-number">2</div>
+              <div class="use-case-number">
+                2
+              </div>
               <div class="use-case-content">
-                <div class="use-case-title">用户粘性分析</div>
+                <div class="use-case-title">
+                  用户粘性分析
+                </div>
                 <div class="use-case-desc">
                   通过会话时长和频次，评估产品吸引力和用户忠诚度
                 </div>
               </div>
             </div>
             <div class="use-case-item">
-              <div class="use-case-number">3</div>
+              <div class="use-case-number">
+                3
+              </div>
               <div class="use-case-content">
-                <div class="use-case-title">用户分群</div>
+                <div class="use-case-title">
+                  用户分群
+                </div>
                 <div class="use-case-desc">
                   基于会话行为特征，将用户分为高价值、流失风险等群体
                 </div>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue
index a22c7e8..cbe750f 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/DataPipelineDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="data-pipeline-demo">
     <div class="header">
-      <div class="title">数据处理管道</div>
-      <div class="subtitle">从用户行为到数据洞察的完整链路</div>
+      <div class="title">
+        数据处理管道
+      </div>
+      <div class="subtitle">
+        从用户行为到数据洞察的完整链路
+      </div>
     </div>
 
     <div class="pipeline-container">
@@ -21,19 +25,32 @@
           }"
         >
           <div class="step-header">
-            <div class="step-number">{{ index + 1 }}</div>
+            <div class="step-number">
+              {{ index + 1 }}
+            </div>
             <div class="step-info">
-              <div class="step-name">{{ step.name }}</div>
-              <div class="step-icon">{{ step.icon }}</div>
+              <div class="step-name">
+                {{ step.name }}
+              </div>
+              <div class="step-icon">
+                {{ step.icon }}
+              </div>
             </div>
           </div>
 
           <div class="step-content">
-            <div class="step-description">{{ step.description }}</div>
+            <div class="step-description">
+              {{ step.description }}
+            </div>
 
             <div class="step-details">
-              <div v-if="step.technologies" class="technologies">
-                <div class="tech-label">技术栈：</div>
+              <div
+                v-if="step.technologies"
+                class="technologies"
+              >
+                <div class="tech-label">
+                  技术栈：
+                </div>
                 <div class="tech-list">
                   <span
                     v-for="(tech, i) in step.technologies"
@@ -45,44 +62,73 @@
                 </div>
               </div>
 
-              <div v-if="step.metrics" class="metrics">
+              <div
+                v-if="step.metrics"
+                class="metrics"
+              >
                 <div
-                  class="metric"
                   v-for="(metric, i) in step.metrics"
                   :key="i"
+                  class="metric"
                 >
-                  <div class="metric-value">{{ metric.value }}</div>
-                  <div class="metric-label">{{ metric.label }}</div>
+                  <div class="metric-value">
+                    {{ metric.value }}
+                  </div>
+                  <div class="metric-label">
+                    {{ metric.label }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div v-if="index < pipelineSteps.length - 1" class="step-connector">
-            <div class="connector-line"></div>
-            <div class="connector-arrow">↓</div>
+          <div
+            v-if="index < pipelineSteps.length - 1"
+            class="step-connector"
+          >
+            <div class="connector-line" />
+            <div class="connector-arrow">
+              ↓
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="play-controls">
-      <button class="control-btn" @click="startAnimation" :disabled="isPlaying">
+      <button
+        class="control-btn"
+        :disabled="isPlaying"
+        @click="startAnimation"
+      >
         <span v-if="!isPlaying">▶️ 演示数据流</span>
         <span v-else>⏸️ 演示中...</span>
       </button>
-      <button class="control-btn secondary" @click="resetAnimation">
+      <button
+        class="control-btn secondary"
+        @click="resetAnimation"
+      >
         🔄 重置
       </button>
     </div>
 
     <div class="data-flow-visualization">
-      <div class="flow-title">实时数据流</div>
+      <div class="flow-title">
+        实时数据流
+      </div>
       <div class="flow-cards">
-        <div class="flow-card" v-for="(item, index) in dataFlow" :key="index">
-          <div class="flow-icon">{{ item.icon }}</div>
+        <div
+          v-for="(item, index) in dataFlow"
+          :key="index"
+          class="flow-card"
+        >
+          <div class="flow-icon">
+            {{ item.icon }}
+          </div>
           <div class="flow-content">
-            <div class="flow-name">{{ item.name }}</div>
+            <div class="flow-name">
+              {{ item.name }}
+            </div>
             <div class="flow-count">
               {{ formatNumber(item.count) }} {{ item.unit }}
             </div>
@@ -92,12 +138,18 @@
     </div>
 
     <div class="best-practices">
-      <div class="practices-title">💡 数据管道最佳实践</div>
+      <div class="practices-title">
+        💡 数据管道最佳实践
+      </div>
       <div class="practices-grid">
         <div class="practice-card">
-          <div class="practice-icon">🔄</div>
+          <div class="practice-icon">
+            🔄
+          </div>
           <div class="practice-content">
-            <div class="practice-name">批量处理</div>
+            <div class="practice-name">
+              批量处理
+            </div>
             <div class="practice-desc">
               将小数据包合并成大数据块处理，减少 I/O 开销，提升吞吐量
             </div>
@@ -105,9 +157,13 @@
         </div>
 
         <div class="practice-card">
-          <div class="practice-icon">⚡</div>
+          <div class="practice-icon">
+            ⚡
+          </div>
           <div class="practice-content">
-            <div class="practice-name">异步非阻塞</div>
+            <div class="practice-name">
+              异步非阻塞
+            </div>
             <div class="practice-desc">
               使用消息队列和异步任务，避免阻塞主业务流程
             </div>
@@ -115,9 +171,13 @@
         </div>
 
         <div class="practice-card">
-          <div class="practice-icon">🛡️</div>
+          <div class="practice-icon">
+            🛡️
+          </div>
           <div class="practice-content">
-            <div class="practice-name">容错机制</div>
+            <div class="practice-name">
+              容错机制
+            </div>
             <div class="practice-desc">
               失败重试、死信队列、降级策略，确保数据不丢失
             </div>
@@ -125,9 +185,13 @@
         </div>
 
         <div class="practice-card">
-          <div class="practice-icon">📊</div>
+          <div class="practice-icon">
+            📊
+          </div>
           <div class="practice-content">
-            <div class="practice-name">监控告警</div>
+            <div class="practice-name">
+              监控告警
+            </div>
             <div class="practice-desc">
               实时监控数据量、延迟、错误率，异常及时告警
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue
index db2e110..83f251d 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/PrivacyComplianceDemo.vue
@@ -5,16 +5,26 @@
 <template>
   <div class="privacy-compliance-demo">
     <div class="header">
-      <div class="title">隐私合规最佳实践</div>
-      <div class="subtitle">GDPR、PIPL 等法规要求下的埋点系统设计</div>
+      <div class="title">
+        隐私合规最佳实践
+      </div>
+      <div class="subtitle">
+        GDPR、PIPL 等法规要求下的埋点系统设计
+      </div>
     </div>
 
     <div class="compliance-cards">
       <div class="compliance-card gdpr">
         <div class="card-header">
-          <div class="card-icon">🇪🇺</div>
-          <div class="card-title">GDPR</div>
-          <div class="card-subtitle">欧盟数据保护法规</div>
+          <div class="card-icon">
+            🇪🇺
+          </div>
+          <div class="card-title">
+            GDPR
+          </div>
+          <div class="card-subtitle">
+            欧盟数据保护法规
+          </div>
         </div>
         <div class="card-body">
           <div class="requirement-list">
@@ -40,9 +50,15 @@
 
       <div class="compliance-card pipl">
         <div class="card-header">
-          <div class="card-icon">🇨🇳</div>
-          <div class="card-title">PIPL</div>
-          <div class="card-subtitle">中国个人信息保护法</div>
+          <div class="card-icon">
+            🇨🇳
+          </div>
+          <div class="card-title">
+            PIPL
+          </div>
+          <div class="card-subtitle">
+            中国个人信息保护法
+          </div>
         </div>
         <div class="card-body">
           <div class="requirement-list">
@@ -68,14 +84,29 @@
     </div>
 
     <div class="implementation-steps">
-      <div class="steps-title">实施步骤</div>
+      <div class="steps-title">
+        实施步骤
+      </div>
       <div class="steps-container">
-        <div class="step-item" v-for="(step, index) in steps" :key="index">
-          <div class="step-number">{{ index + 1 }}</div>
+        <div
+          v-for="(step, index) in steps"
+          :key="index"
+          class="step-item"
+        >
+          <div class="step-number">
+            {{ index + 1 }}
+          </div>
           <div class="step-content">
-            <div class="step-name">{{ step.name }}</div>
-            <div class="step-desc">{{ step.desc }}</div>
-            <div class="step-code" v-if="step.code">
+            <div class="step-name">
+              {{ step.name }}
+            </div>
+            <div class="step-desc">
+              {{ step.desc }}
+            </div>
+            <div
+              v-if="step.code"
+              class="step-code"
+            >
               <pre><code>{{ step.code }}</code></pre>
             </div>
           </div>
@@ -84,80 +115,120 @@
     </div>
 
     <div class="consent-flow-demo">
-      <div class="flow-title">隐私同意流程演示</div>
+      <div class="flow-title">
+        隐私同意流程演示
+      </div>
       <div class="consent-simulation">
         <div class="simulation-screen">
-          <div v-if="!userConsented" class="consent-dialog">
+          <div
+            v-if="!userConsented"
+            class="consent-dialog"
+          >
             <div class="dialog-header">
-              <div class="dialog-title">🔐 隐私设置</div>
-              <div class="dialog-subtitle">我们需要您的同意来收集数据</div>
+              <div class="dialog-title">
+                🔐 隐私设置
+              </div>
+              <div class="dialog-subtitle">
+                我们需要您的同意来收集数据
+              </div>
             </div>
 
             <div class="dialog-body">
               <div class="consent-item">
                 <div class="consent-info">
-                  <div class="consent-name">必要数据</div>
+                  <div class="consent-name">
+                    必要数据
+                  </div>
                   <div class="consent-desc">
                     应用程序运行所必需的数据（崩溃日志、性能指标）
                   </div>
                 </div>
-                <div class="consent-status required">必需</div>
+                <div class="consent-status required">
+                  必需
+                </div>
               </div>
 
               <div class="consent-item">
                 <div class="consent-info">
-                  <div class="consent-name">行为分析</div>
+                  <div class="consent-name">
+                    行为分析
+                  </div>
                   <div class="consent-desc">
                     收集用户行为数据用于产品优化（页面浏览、按钮点击）
                   </div>
                 </div>
                 <label class="consent-toggle">
                   <input
-                    type="checkbox"
                     v-model="consents.analytics"
+                    type="checkbox"
                     :disabled="!userConsented"
-                  />
-                  <span class="toggle-slider"></span>
+                  >
+                  <span class="toggle-slider" />
                 </label>
               </div>
 
               <div class="consent-item">
                 <div class="consent-info">
-                  <div class="consent-name">个性化推荐</div>
-                  <div class="consent-desc">基于您的兴趣提供个性化内容推荐</div>
+                  <div class="consent-name">
+                    个性化推荐
+                  </div>
+                  <div class="consent-desc">
+                    基于您的兴趣提供个性化内容推荐
+                  </div>
                 </div>
                 <label class="consent-toggle">
                   <input
-                    type="checkbox"
                     v-model="consents.personalization"
+                    type="checkbox"
                     :disabled="!userConsented"
-                  />
-                  <span class="toggle-slider"></span>
+                  >
+                  <span class="toggle-slider" />
                 </label>
               </div>
             </div>
 
             <div class="dialog-footer">
-              <button class="dialog-btn secondary" @click="rejectAll">
+              <button
+                class="dialog-btn secondary"
+                @click="rejectAll"
+              >
                 拒绝全部
               </button>
-              <button class="dialog-btn primary" @click="acceptSelected">
+              <button
+                class="dialog-btn primary"
+                @click="acceptSelected"
+              >
                 接受选中
               </button>
             </div>
           </div>
 
-          <div v-else class="consented-view">
-            <div class="consented-icon">✅</div>
-            <div class="consented-title">感谢您的同意</div>
-            <div class="consented-desc">您已经同意收集以下类型的数据：</div>
+          <div
+            v-else
+            class="consented-view"
+          >
+            <div class="consented-icon">
+              ✅
+            </div>
+            <div class="consented-title">
+              感谢您的同意
+            </div>
+            <div class="consented-desc">
+              您已经同意收集以下类型的数据：
+            </div>
 
             <div class="consented-list">
-              <div class="consented-item" v-if="consents.analytics">
+              <div
+                v-if="consents.analytics"
+                class="consented-item"
+              >
                 <span class="item-icon">📊</span>
                 <span>行为分析数据</span>
               </div>
-              <div class="consented-item" v-if="consents.personalization">
+              <div
+                v-if="consents.personalization"
+                class="consented-item"
+              >
                 <span class="item-icon">🎯</span>
                 <span>个性化推荐数据</span>
               </div>
@@ -168,10 +239,16 @@
             </div>
 
             <div class="consented-actions">
-              <button class="action-btn" @click="changeSettings">
+              <button
+                class="action-btn"
+                @click="changeSettings"
+              >
                 修改设置
               </button>
-              <button class="action-btn danger" @click="deleteData">
+              <button
+                class="action-btn danger"
+                @click="deleteData"
+              >
                 删除我的数据
               </button>
             </div>
@@ -181,12 +258,18 @@
     </div>
 
     <div class="data-protection">
-      <div class="protection-title">🛡️ 数据保护措施</div>
+      <div class="protection-title">
+        🛡️ 数据保护措施
+      </div>
       <div class="protection-grid">
         <div class="protection-item">
-          <div class="protection-icon">🔒</div>
+          <div class="protection-icon">
+            🔒
+          </div>
           <div class="protection-content">
-            <div class="protection-name">数据加密</div>
+            <div class="protection-name">
+              数据加密
+            </div>
             <div class="protection-desc">
               传输层 HTTPS 加密，存储层 AES-256 加密
             </div>
@@ -194,9 +277,13 @@
         </div>
 
         <div class="protection-item">
-          <div class="protection-icon">🎭</div>
+          <div class="protection-icon">
+            🎭
+          </div>
           <div class="protection-content">
-            <div class="protection-name">数据脱敏</div>
+            <div class="protection-name">
+              数据脱敏
+            </div>
             <div class="protection-desc">
               手机号、邮箱等敏感信息自动脱敏处理
             </div>
@@ -204,9 +291,13 @@
         </div>
 
         <div class="protection-item">
-          <div class="protection-icon">⏰</div>
+          <div class="protection-icon">
+            ⏰
+          </div>
           <div class="protection-content">
-            <div class="protection-name">数据保留期限</div>
+            <div class="protection-name">
+              数据保留期限
+            </div>
             <div class="protection-desc">
               不同类型数据设置不同保留期限，自动清理过期数据
             </div>
@@ -214,17 +305,25 @@
         </div>
 
         <div class="protection-item">
-          <div class="protection-icon">👤</div>
+          <div class="protection-icon">
+            👤
+          </div>
           <div class="protection-content">
-            <div class="protection-name">用户控制权</div>
-            <div class="protection-desc">用户可查看、导出、删除自己的数据</div>
+            <div class="protection-name">
+              用户控制权
+            </div>
+            <div class="protection-desc">
+              用户可查看、导出、删除自己的数据
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="checklist">
-      <div class="checklist-title">✅ 合规检查清单</div>
+      <div class="checklist-title">
+        ✅ 合规检查清单
+      </div>
       <div class="checklist-items">
         <div
           v-for="(item, index) in checklistItems"
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue
index 162e79c..e5bb60a 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/RealWorldCaseDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="real-world-case-demo">
     <div class="header">
-      <div class="title">实战案例</div>
-      <div class="subtitle">真实场景下的埋点设计最佳实践</div>
+      <div class="title">
+        实战案例
+      </div>
+      <div class="subtitle">
+        真实场景下的埋点设计最佳实践
+      </div>
     </div>
 
     <div class="case-tabs">
@@ -23,17 +27,28 @@
 
     <div class="case-content">
       <!-- 电商系统 -->
-      <div v-if="selectedCase === 'ecommerce'" class="case-detail">
+      <div
+        v-if="selectedCase === 'ecommerce'"
+        class="case-detail"
+      >
         <div class="case-intro">
-          <div class="intro-icon">🛒</div>
+          <div class="intro-icon">
+            🛒
+          </div>
           <div class="intro-text">
-            <div class="intro-title">电商系统埋点设计</div>
-            <div class="intro-desc">分析购买转化漏斗，优化用户体验</div>
+            <div class="intro-title">
+              电商系统埋点设计
+            </div>
+            <div class="intro-desc">
+              分析购买转化漏斗，优化用户体验
+            </div>
           </div>
         </div>
 
         <div class="funnel-visualization">
-          <div class="funnel-title">购买转化漏斗</div>
+          <div class="funnel-title">
+            购买转化漏斗
+          </div>
           <div class="funnel-steps">
             <div
               v-for="(step, index) in ecommerceFunnel"
@@ -41,15 +56,23 @@
               class="funnel-step"
               :style="{ width: step.width }"
             >
-              <div class="step-name">{{ step.name }}</div>
-              <div class="step-count">{{ formatNumber(step.count) }}</div>
-              <div class="step-rate">{{ step.rate }}%</div>
+              <div class="step-name">
+                {{ step.name }}
+              </div>
+              <div class="step-count">
+                {{ formatNumber(step.count) }}
+              </div>
+              <div class="step-rate">
+                {{ step.rate }}%
+              </div>
             </div>
           </div>
         </div>
 
         <div class="tracking-events">
-          <div class="events-title">关键埋点</div>
+          <div class="events-title">
+            关键埋点
+          </div>
           <div class="events-list">
             <div
               v-for="(event, index) in ecommerceEvents"
@@ -60,7 +83,9 @@
                 <code>{{ event.name }}</code>
               </div>
               <div class="event-details">
-                <div class="event-trigger">{{ event.trigger }}</div>
+                <div class="event-trigger">
+                  {{ event.trigger }}
+                </div>
                 <div class="event-props">
                   <span
                     v-for="(prop, i) in event.props"
@@ -77,55 +102,74 @@
       </div>
 
       <!-- 推荐系统 -->
-      <div v-if="selectedCase === 'recommendation'" class="case-detail">
+      <div
+        v-if="selectedCase === 'recommendation'"
+        class="case-detail"
+      >
         <div class="case-intro">
-          <div class="intro-icon">🎯</div>
+          <div class="intro-icon">
+            🎯
+          </div>
           <div class="intro-text">
-            <div class="intro-title">内容推荐埋点设计</div>
-            <div class="intro-desc">优化推荐算法，提高点击率</div>
+            <div class="intro-title">
+              内容推荐埋点设计
+            </div>
+            <div class="intro-desc">
+              优化推荐算法，提高点击率
+            </div>
           </div>
         </div>
 
         <div class="ab-test-demo">
-          <div class="ab-title">A/B 测试效果对比</div>
+          <div class="ab-title">
+            A/B 测试效果对比
+          </div>
           <div class="ab-metrics">
             <div class="metric-group">
-              <div class="metric-label">算法 A</div>
-              <div class="metric-value">{{ abTest.algorithmA }}%</div>
+              <div class="metric-label">
+                算法 A
+              </div>
+              <div class="metric-value">
+                {{ abTest.algorithmA }}%
+              </div>
               <div class="metric-bar">
                 <div
                   class="bar-fill"
                   :style="{ width: abTest.algorithmA + '%' }"
-                ></div>
+                />
               </div>
             </div>
             <div class="metric-group">
-              <div class="metric-label">算法 B</div>
-              <div class="metric-value">{{ abTest.algorithmB }}%</div>
+              <div class="metric-label">
+                算法 B
+              </div>
+              <div class="metric-value">
+                {{ abTest.algorithmB }}%
+              </div>
               <div class="metric-bar">
                 <div
                   class="bar-fill better"
                   :style="{ width: abTest.algorithmB + '%' }"
-                ></div>
+                />
               </div>
             </div>
           </div>
           <div class="ab-conclusion">
             ✨ 算法 B 点击率提升
-            <span class="highlight"
-              >{{
-                (
-                  ((abTest.algorithmB - abTest.algorithmA) /
-                    abTest.algorithmA) *
-                  100
-                ).toFixed(1)
-              }}%</span
-            >
+            <span class="highlight">{{
+              (
+                ((abTest.algorithmB - abTest.algorithmA) /
+                  abTest.algorithmA) *
+                100
+              ).toFixed(1)
+            }}%</span>
           </div>
         </div>
 
         <div class="tracking-events">
-          <div class="events-title">关键埋点</div>
+          <div class="events-title">
+            关键埋点
+          </div>
           <div class="events-list">
             <div
               v-for="(event, index) in recommendationEvents"
@@ -136,7 +180,9 @@
                 <code>{{ event.name }}</code>
               </div>
               <div class="event-details">
-                <div class="event-trigger">{{ event.trigger }}</div>
+                <div class="event-trigger">
+                  {{ event.trigger }}
+                </div>
                 <div class="event-props">
                   <span
                     v-for="(prop, i) in event.props"
@@ -153,17 +199,28 @@
       </div>
 
       <!-- 用户行为分析 -->
-      <div v-if="selectedCase === 'userbehavior'" class="case-detail">
+      <div
+        v-if="selectedCase === 'userbehavior'"
+        class="case-detail"
+      >
         <div class="case-intro">
-          <div class="intro-icon">👤</div>
+          <div class="intro-icon">
+            👤
+          </div>
           <div class="intro-text">
-            <div class="intro-title">用户行为分析埋点</div>
-            <div class="intro-desc">分析用户粘性，识别流失风险</div>
+            <div class="intro-title">
+              用户行为分析埋点
+            </div>
+            <div class="intro-desc">
+              分析用户粘性，识别流失风险
+            </div>
           </div>
         </div>
 
         <div class="rfm-segments">
-          <div class="segments-title">RFM 用户分群</div>
+          <div class="segments-title">
+            RFM 用户分群
+          </div>
           <div class="segments-grid">
             <div
               v-for="(segment, index) in rfmSegments"
@@ -171,37 +228,49 @@
               class="segment-card"
               :class="segment.type"
             >
-              <div class="segment-name">{{ segment.name }}</div>
+              <div class="segment-name">
+                {{ segment.name }}
+              </div>
               <div class="segment-users">
                 {{ formatNumber(segment.users) }} 用户
               </div>
-              <div class="segment-desc">{{ segment.desc }}</div>
+              <div class="segment-desc">
+                {{ segment.desc }}
+              </div>
             </div>
           </div>
         </div>
 
         <div class="retention-chart">
-          <div class="chart-title">用户留存率</div>
+          <div class="chart-title">
+            用户留存率
+          </div>
           <div class="chart-bars">
             <div
               v-for="(data, index) in retentionData"
               :key="index"
               class="chart-bar"
             >
-              <div class="bar-label">{{ data.label }}</div>
+              <div class="bar-label">
+                {{ data.label }}
+              </div>
               <div class="bar-container">
                 <div
                   class="bar-fill"
                   :style="{ height: data.rate + '%' }"
-                ></div>
+                />
+              </div>
+              <div class="bar-value">
+                {{ data.rate }}%
               </div>
-              <div class="bar-value">{{ data.rate }}%</div>
             </div>
           </div>
         </div>
 
         <div class="tracking-events">
-          <div class="events-title">关键埋点</div>
+          <div class="events-title">
+            关键埋点
+          </div>
           <div class="events-list">
             <div
               v-for="(event, index) in userBehaviorEvents"
@@ -212,7 +281,9 @@
                 <code>{{ event.name }}</code>
               </div>
               <div class="event-details">
-                <div class="event-trigger">{{ event.trigger }}</div>
+                <div class="event-trigger">
+                  {{ event.trigger }}
+                </div>
                 <div class="event-props">
                   <span
                     v-for="(prop, i) in event.props"
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue
index e8b20fb..89a76d8 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/ToolSelectionDemo.vue
@@ -5,19 +5,27 @@
 <template>
   <div class="tool-selection-demo">
     <div class="header">
-      <div class="title">埋点工具选型</div>
-      <div class="subtitle">根据团队规模和需求选择合适的方案</div>
+      <div class="title">
+        埋点工具选型
+      </div>
+      <div class="subtitle">
+        根据团队规模和需求选择合适的方案
+      </div>
     </div>
 
     <div class="selection-criteria">
-      <div class="criteria-title">请选择您的场景</div>
+      <div class="criteria-title">
+        请选择您的场景
+      </div>
       <div class="criteria-options">
         <div
           v-for="(option, key) in criteria"
           :key="key"
           class="criteria-option"
         >
-          <div class="option-label">{{ option.label }}</div>
+          <div class="option-label">
+            {{ option.label }}
+          </div>
           <div class="option-buttons">
             <button
               v-for="(value, index) in option.values"
@@ -32,20 +40,34 @@
         </div>
       </div>
 
-      <button class="recommend-btn" @click="getRecommendation">
+      <button
+        class="recommend-btn"
+        @click="getRecommendation"
+      >
         获取推荐方案
       </button>
     </div>
 
-    <div v-if="recommendation" class="recommendation-result">
+    <div
+      v-if="recommendation"
+      class="recommendation-result"
+    >
       <div class="result-header">
-        <div class="result-icon">🎯</div>
-        <div class="result-title">推荐方案</div>
+        <div class="result-icon">
+          🎯
+        </div>
+        <div class="result-title">
+          推荐方案
+        </div>
       </div>
 
       <div class="result-card">
-        <div class="result-name">{{ recommendation.name }}</div>
-        <div class="result-desc">{{ recommendation.desc }}</div>
+        <div class="result-name">
+          {{ recommendation.name }}
+        </div>
+        <div class="result-desc">
+          {{ recommendation.desc }}
+        </div>
 
         <div class="result-details">
           <div class="detail-item">
@@ -63,23 +85,39 @@
         </div>
 
         <div class="result-pros">
-          <div class="pros-title">✅ 优势</div>
+          <div class="pros-title">
+            ✅ 优势
+          </div>
           <ul class="pros-list">
-            <li v-for="(pro, i) in recommendation.pros" :key="i">{{ pro }}</li>
+            <li
+              v-for="(pro, i) in recommendation.pros"
+              :key="i"
+            >
+              {{ pro }}
+            </li>
           </ul>
         </div>
 
         <div class="result-cons">
-          <div class="cons-title">⚠️ 注意事项</div>
+          <div class="cons-title">
+            ⚠️ 注意事项
+          </div>
           <ul class="cons-list">
-            <li v-for="(con, i) in recommendation.cons" :key="i">{{ con }}</li>
+            <li
+              v-for="(con, i) in recommendation.cons"
+              :key="i"
+            >
+              {{ con }}
+            </li>
           </ul>
         </div>
       </div>
     </div>
 
     <div class="tools-comparison">
-      <div class="comparison-title">工具对比表</div>
+      <div class="comparison-title">
+        工具对比表
+      </div>
       <table class="comparison-table">
         <thead>
           <tr>
@@ -91,8 +129,13 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(tool, index) in tools" :key="index">
-            <td class="tool-name">{{ tool.name }}</td>
+          <tr
+            v-for="(tool, index) in tools"
+            :key="index"
+          >
+            <td class="tool-name">
+              {{ tool.name }}
+            </td>
             <td>{{ tool.type }}</td>
             <td>{{ tool.price }}</td>
             <td>{{ tool.scenario }}</td>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue
index 2407736..cbabc19 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingMethodsComparisonDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="tracking-methods-comparison-demo">
     <div class="header">
-      <div class="title">埋点方法对比</div>
-      <div class="subtitle">三种主流埋点实现方式的深度对比</div>
+      <div class="title">
+        埋点方法对比
+      </div>
+      <div class="subtitle">
+        三种主流埋点实现方式的深度对比
+      </div>
     </div>
 
     <div class="methods-grid">
@@ -18,33 +22,54 @@
         @click="selectMethod(method.id)"
       >
         <div class="method-header">
-          <div class="method-icon">{{ method.icon }}</div>
-          <div class="method-info">
-            <div class="method-name">{{ method.name }}</div>
-            <div class="method-english">{{ method.english }}</div>
+          <div class="method-icon">
+            {{ method.icon }}
           </div>
-          <div v-if="selectedMethod === method.id" class="selected-badge">
+          <div class="method-info">
+            <div class="method-name">
+              {{ method.name }}
+            </div>
+            <div class="method-english">
+              {{ method.english }}
+            </div>
+          </div>
+          <div
+            v-if="selectedMethod === method.id"
+            class="selected-badge"
+          >
             已选择
           </div>
         </div>
 
         <div class="method-body">
-          <div class="method-description">{{ method.description }}</div>
+          <div class="method-description">
+            {{ method.description }}
+          </div>
 
           <div class="method-features">
             <div class="feature-category">
-              <div class="category-title">✅ 优点</div>
+              <div class="category-title">
+                ✅ 优点
+              </div>
               <ul class="feature-list pros">
-                <li v-for="(pro, index) in method.pros" :key="index">
+                <li
+                  v-for="(pro, index) in method.pros"
+                  :key="index"
+                >
                   {{ pro }}
                 </li>
               </ul>
             </div>
 
             <div class="feature-category">
-              <div class="category-title">❌ 缺点</div>
+              <div class="category-title">
+                ❌ 缺点
+              </div>
               <ul class="feature-list cons">
-                <li v-for="(con, index) in method.cons" :key="index">
+                <li
+                  v-for="(con, index) in method.cons"
+                  :key="index"
+                >
                   {{ con }}
                 </li>
               </ul>
@@ -52,7 +77,9 @@
           </div>
 
           <div class="method-code">
-            <div class="code-title">代码示例</div>
+            <div class="code-title">
+              代码示例
+            </div>
             <pre class="code-block"><code>{{ method.code }}</code></pre>
           </div>
         </div>
@@ -60,19 +87,29 @@
     </div>
 
     <div class="comparison-matrix">
-      <div class="matrix-title">综合对比矩阵</div>
+      <div class="matrix-title">
+        综合对比矩阵
+      </div>
       <table class="matrix">
         <thead>
           <tr>
             <th>评估维度</th>
-            <th v-for="method in methods" :key="method.id">
+            <th
+              v-for="method in methods"
+              :key="method.id"
+            >
               {{ method.name }}
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(row, index) in matrixData" :key="index">
-            <td class="dimension">{{ row.dimension }}</td>
+          <tr
+            v-for="(row, index) in matrixData"
+            :key="index"
+          >
+            <td class="dimension">
+              {{ row.dimension }}
+            </td>
             <td
               v-for="method in methods"
               :key="method.id"
@@ -83,9 +120,11 @@
                 <div
                   class="score-fill"
                   :style="{ width: row.scores[method.id] + '%' }"
-                ></div>
+                />
+              </div>
+              <div class="score-value">
+                {{ row.scores[method.id] }}%
               </div>
-              <div class="score-value">{{ row.scores[method.id] }}%</div>
             </td>
           </tr>
         </tbody>
@@ -93,35 +132,53 @@
     </div>
 
     <div class="recommendation">
-      <div class="recommendation-title">💡 选型建议</div>
+      <div class="recommendation-title">
+        💡 选型建议
+      </div>
       <div class="recommendation-content">
         <div class="recommendation-item">
-          <div class="rec-scenario">核心业务指标</div>
-          <div class="rec-method">推荐：代码埋点</div>
+          <div class="rec-scenario">
+            核心业务指标
+          </div>
+          <div class="rec-method">
+            推荐：代码埋点
+          </div>
           <div class="rec-reason">
             原因：数据准确性最高，可自定义属性，适合支付、注册等关键业务
           </div>
         </div>
 
         <div class="recommendation-item">
-          <div class="rec-scenario">运营活动埋点</div>
-          <div class="rec-method">推荐：可视化埋点</div>
+          <div class="rec-scenario">
+            运营活动埋点
+          </div>
+          <div class="rec-method">
+            推荐：可视化埋点
+          </div>
           <div class="rec-reason">
             原因：快速部署，产品经理可操作，适合快速验证活动效果
           </div>
         </div>
 
         <div class="recommendation-item">
-          <div class="rec-scenario">页面浏览数据</div>
-          <div class="rec-method">推荐：全埋点</div>
+          <div class="rec-scenario">
+            页面浏览数据
+          </div>
+          <div class="rec-method">
+            推荐：全埋点
+          </div>
           <div class="rec-reason">
             原因：零开发成本，一次性采集，适合 PV/UV 等基础指标
           </div>
         </div>
 
         <div class="recommendation-item">
-          <div class="rec-scenario">大型企业级应用</div>
-          <div class="rec-method">推荐：混合方案</div>
+          <div class="rec-scenario">
+            大型企业级应用
+          </div>
+          <div class="rec-method">
+            推荐：混合方案
+          </div>
           <div class="rec-reason">
             原因：核心业务用代码埋点，运营活动用可视化埋点，基础数据用全埋点
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue
index 206200c..5d18df8 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingOverviewDemo.vue
@@ -5,13 +5,19 @@
 <template>
   <div class="tracking-overview-demo">
     <div class="header">
-      <div class="title">埋点系统概览</div>
-      <div class="subtitle">从用户行为到数据洞察的完整链路</div>
+      <div class="title">
+        埋点系统概览
+      </div>
+      <div class="subtitle">
+        从用户行为到数据洞察的完整链路
+      </div>
     </div>
 
     <div class="system-flow">
       <div class="flow-section user-actions">
-        <div class="section-title">用户行为层</div>
+        <div class="section-title">
+          用户行为层
+        </div>
         <div class="action-grid">
           <div
             v-for="action in userActions"
@@ -20,20 +26,32 @@
             :class="{ active: selectedAction === action.id }"
             @click="selectAction(action)"
           >
-            <div class="action-icon">{{ action.icon }}</div>
-            <div class="action-name">{{ action.name }}</div>
+            <div class="action-icon">
+              {{ action.icon }}
+            </div>
+            <div class="action-name">
+              {{ action.name }}
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="arrow">↓</div>
+      <div class="arrow">
+        ↓
+      </div>
 
       <div class="flow-section tracking-layer">
-        <div class="section-title">埋点采集层</div>
+        <div class="section-title">
+          埋点采集层
+        </div>
         <div class="tracking-box">
-          <div class="tracking-icon">📊</div>
+          <div class="tracking-icon">
+            📊
+          </div>
           <div class="tracking-info">
-            <div class="event-name">{{ selectedEventData.event }}</div>
+            <div class="event-name">
+              {{ selectedEventData.event }}
+            </div>
             <div class="event-data">
               {{ formatEventData(selectedEventData) }}
             </div>
@@ -41,10 +59,14 @@
         </div>
       </div>
 
-      <div class="arrow">↓</div>
+      <div class="arrow">
+        ↓
+      </div>
 
       <div class="flow-section data-pipeline">
-        <div class="section-title">数据处理层</div>
+        <div class="section-title">
+          数据处理层
+        </div>
         <div class="pipeline-steps">
           <div
             v-for="(step, index) in pipelineSteps"
@@ -52,73 +74,121 @@
             class="pipeline-step"
             :class="{ active: currentStep === index }"
           >
-            <div class="step-number">{{ index + 1 }}</div>
+            <div class="step-number">
+              {{ index + 1 }}
+            </div>
             <div class="step-info">
-              <div class="step-name">{{ step.name }}</div>
-              <div class="step-desc">{{ step.desc }}</div>
+              <div class="step-name">
+                {{ step.name }}
+              </div>
+              <div class="step-desc">
+                {{ step.desc }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="arrow">↓</div>
+      <div class="arrow">
+        ↓
+      </div>
 
       <div class="flow-section insights">
-        <div class="section-title">数据洞察层</div>
+        <div class="section-title">
+          数据洞察层
+        </div>
         <div class="insight-cards">
           <div class="insight-card">
             <div class="insight-value">
               {{ formatNumber(metrics.totalUsers) }}
             </div>
-            <div class="insight-label">总用户数</div>
+            <div class="insight-label">
+              总用户数
+            </div>
           </div>
           <div class="insight-card">
             <div class="insight-value">
               {{ formatNumber(metrics.totalEvents) }}
             </div>
-            <div class="insight-label">总事件数</div>
+            <div class="insight-label">
+              总事件数
+            </div>
           </div>
           <div class="insight-card">
-            <div class="insight-value">{{ metrics.conversionRate }}%</div>
-            <div class="insight-label">转化率</div>
+            <div class="insight-value">
+              {{ metrics.conversionRate }}%
+            </div>
+            <div class="insight-label">
+              转化率
+            </div>
           </div>
           <div class="insight-card">
-            <div class="insight-value">{{ metrics.retentionRate }}%</div>
-            <div class="insight-label">留存率</div>
+            <div class="insight-value">
+              {{ metrics.retentionRate }}%
+            </div>
+            <div class="insight-label">
+              留存率
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="benefits">
-      <div class="benefit-title">埋点的核心价值</div>
+      <div class="benefit-title">
+        埋点的核心价值
+      </div>
       <div class="benefit-grid">
         <div class="benefit-item">
-          <div class="benefit-icon">🎯</div>
+          <div class="benefit-icon">
+            🎯
+          </div>
           <div class="benefit-text">
-            <div class="benefit-name">精准决策</div>
-            <div class="benefit-desc">基于数据而非直觉做决策</div>
+            <div class="benefit-name">
+              精准决策
+            </div>
+            <div class="benefit-desc">
+              基于数据而非直觉做决策
+            </div>
           </div>
         </div>
         <div class="benefit-item">
-          <div class="benefit-icon">🔍</div>
+          <div class="benefit-icon">
+            🔍
+          </div>
           <div class="benefit-text">
-            <div class="benefit-name">用户洞察</div>
-            <div class="benefit-desc">理解用户行为和需求</div>
+            <div class="benefit-name">
+              用户洞察
+            </div>
+            <div class="benefit-desc">
+              理解用户行为和需求
+            </div>
           </div>
         </div>
         <div class="benefit-item">
-          <div class="benefit-icon">📈</div>
+          <div class="benefit-icon">
+            📈
+          </div>
           <div class="benefit-text">
-            <div class="benefit-name">增长优化</div>
-            <div class="benefit-desc">发现增长机会和瓶颈</div>
+            <div class="benefit-name">
+              增长优化
+            </div>
+            <div class="benefit-desc">
+              发现增长机会和瓶颈
+            </div>
           </div>
         </div>
         <div class="benefit-item">
-          <div class="benefit-icon">⚡</div>
+          <div class="benefit-icon">
+            ⚡
+          </div>
           <div class="benefit-text">
-            <div class="benefit-name">快速迭代</div>
-            <div class="benefit-desc">验证假设，快速调整</div>
+            <div class="benefit-name">
+              快速迭代
+            </div>
+            <div class="benefit-desc">
+              验证假设，快速调整
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue
index 318dd85..5a7051e 100644
--- a/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/tracking-design/TrackingTypesDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="tracking-types-demo">
     <div class="header">
-      <div class="title">埋点类型对比</div>
-      <div class="subtitle">三种埋点方式的优缺点与适用场景</div>
+      <div class="title">
+        埋点类型对比
+      </div>
+      <div class="subtitle">
+        三种埋点方式的优缺点与适用场景
+      </div>
     </div>
 
     <div class="type-tabs">
@@ -24,10 +28,16 @@
     <div class="type-content">
       <div class="type-info">
         <div class="type-header">
-          <div class="type-icon">{{ currentType.icon }}</div>
+          <div class="type-icon">
+            {{ currentType.icon }}
+          </div>
           <div class="type-title">
-            <div class="name">{{ currentType.name }}</div>
-            <div class="subtitle">{{ currentType.subtitle }}</div>
+            <div class="name">
+              {{ currentType.name }}
+            </div>
+            <div class="subtitle">
+              {{ currentType.subtitle }}
+            </div>
           </div>
         </div>
 
@@ -36,7 +46,9 @@
         </div>
 
         <div class="characteristics">
-          <div class="characteristics-title">主要特征</div>
+          <div class="characteristics-title">
+            主要特征
+          </div>
           <div class="characteristics-list">
             <div
               v-for="(char, index) in currentType.characteristics"
@@ -50,17 +62,25 @@
         </div>
 
         <div class="use-cases">
-          <div class="use-cases-title">典型场景</div>
+          <div class="use-cases-title">
+            典型场景
+          </div>
           <div class="use-cases-list">
             <div
               v-for="(useCase, index) in currentType.useCases"
               :key="index"
               class="use-case-item"
             >
-              <div class="use-case-icon">{{ useCase.icon }}</div>
+              <div class="use-case-icon">
+                {{ useCase.icon }}
+              </div>
               <div class="use-case-info">
-                <div class="use-case-name">{{ useCase.name }}</div>
-                <div class="use-case-desc">{{ useCase.desc }}</div>
+                <div class="use-case-name">
+                  {{ useCase.name }}
+                </div>
+                <div class="use-case-desc">
+                  {{ useCase.desc }}
+                </div>
               </div>
             </div>
           </div>
@@ -68,54 +88,88 @@
       </div>
 
       <div class="type-architecture">
-        <div class="architecture-title">架构示意</div>
+        <div class="architecture-title">
+          架构示意
+        </div>
         <div class="architecture-diagram">
           <div class="diagram-layer">
-            <div class="layer-label">用户</div>
-            <div class="layer-icon">👤</div>
+            <div class="layer-label">
+              用户
+            </div>
+            <div class="layer-icon">
+              👤
+            </div>
+          </div>
+          <div class="diagram-arrow">
+            ↓
           </div>
-          <div class="diagram-arrow">↓</div>
           <div class="diagram-layer client">
-            <div class="layer-label">客户端</div>
+            <div class="layer-label">
+              客户端
+            </div>
             <div class="layer-content">
               <div
                 v-if="selectedType === 'frontend'"
                 class="layer-box frontend"
               >
                 <div>前端埋点 SDK</div>
-                <div class="layer-detail">采集用户交互</div>
+                <div class="layer-detail">
+                  采集用户交互
+                </div>
               </div>
-              <div v-if="selectedType === 'backend'" class="layer-box backend">
+              <div
+                v-if="selectedType === 'backend'"
+                class="layer-box backend"
+              >
                 <div>业务代码</div>
-                <div class="layer-detail">调用后端埋点</div>
+                <div class="layer-detail">
+                  调用后端埋点
+                </div>
               </div>
-              <div v-if="selectedType === 'full'" class="layer-box full">
+              <div
+                v-if="selectedType === 'full'"
+                class="layer-box full"
+              >
                 <div>前端埋点 SDK</div>
                 <div>后端埋点</div>
-                <div class="layer-detail">全链路追踪</div>
+                <div class="layer-detail">
+                  全链路追踪
+                </div>
               </div>
             </div>
           </div>
-          <div class="diagram-arrow">↓</div>
+          <div class="diagram-arrow">
+            ↓
+          </div>
           <div
             v-if="selectedType === 'backend' || selectedType === 'full'"
             class="diagram-layer server"
           >
-            <div class="layer-label">服务端</div>
+            <div class="layer-label">
+              服务端
+            </div>
             <div class="layer-content">
               <div class="layer-box server">
                 <div>埋点服务</div>
-                <div class="layer-detail">处理埋点请求</div>
+                <div class="layer-detail">
+                  处理埋点请求
+                </div>
               </div>
             </div>
           </div>
-          <div class="diagram-arrow">↓</div>
+          <div class="diagram-arrow">
+            ↓
+          </div>
           <div class="diagram-layer data">
-            <div class="layer-label">数据平台</div>
+            <div class="layer-label">
+              数据平台
+            </div>
             <div class="layer-content">
               <div class="layer-box data">
                 <div>数据仓库</div>
-                <div class="layer-detail">存储与分析</div>
+                <div class="layer-detail">
+                  存储与分析
+                </div>
               </div>
             </div>
           </div>
@@ -124,19 +178,29 @@
     </div>
 
     <div class="comparison-table">
-      <div class="comparison-title">详细对比</div>
+      <div class="comparison-title">
+        详细对比
+      </div>
       <table class="comparison">
         <thead>
           <tr>
             <th>对比维度</th>
-            <th v-for="type in trackingTypes" :key="type.id">
+            <th
+              v-for="type in trackingTypes"
+              :key="type.id"
+            >
               {{ type.name }}
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(row, index) in comparisonData" :key="index">
-            <td class="dimension">{{ row.dimension }}</td>
+          <tr
+            v-for="(row, index) in comparisonData"
+            :key="index"
+          >
+            <td class="dimension">
+              {{ row.dimension }}
+            </td>
             <td
               v-for="type in trackingTypes"
               :key="type.id"
@@ -144,7 +208,10 @@
               :class="{ best: row.best === type.id }"
             >
               {{ row.values[type.id] }}
-              <span v-if="row.best === type.id" class="best-badge">最优</span>
+              <span
+                v-if="row.best === type.id"
+                class="best-badge"
+              >最优</span>
             </td>
           </tr>
         </tbody>
diff --git a/docs/.vitepress/theme/components/appendix/typescript-intro/GenericDemo.vue b/docs/.vitepress/theme/components/appendix/typescript-intro/GenericDemo.vue
index 6daba65..90a55d5 100644
--- a/docs/.vitepress/theme/components/appendix/typescript-intro/GenericDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/typescript-intro/GenericDemo.vue
@@ -75,7 +75,9 @@ const loadExample = (type) => {
     <div class="demo-container">
       <!-- 泛型概念说明 -->
       <div class="concept-box">
-        <div class="concept-icon">💡</div>
+        <div class="concept-icon">
+          💡
+        </div>
         <div class="concept-text">
           <strong>泛型就像"通用模板"</strong> - 可以处理不同类型的数据，同时保持类型安全
         </div>
@@ -126,62 +128,93 @@ function reverseArray&lt;T&gt;(arr: T[]): T[] {
               type="text"
               :placeholder="selectedType === 'number' ? '1, 2, 3, 4, 5' : '苹果, 香蕉, 橙子'"
               class="text-input"
-            />
+            >
           </div>
 
           <div class="example-buttons">
-            <button @click="loadExample('number')" class="btn-example">
+            <button
+              class="btn-example"
+              @click="loadExample('number')"
+            >
               加载数字示例
             </button>
-            <button @click="loadExample('string')" class="btn-example">
+            <button
+              class="btn-example"
+              @click="loadExample('string')"
+            >
               加载字符串示例
             </button>
           </div>
 
           <div class="action-buttons">
-            <button @click="executeReverse" class="btn-primary">
+            <button
+              class="btn-primary"
+              @click="executeReverse"
+            >
               执行反转
             </button>
-            <button @click="reset" class="btn-secondary">
+            <button
+              class="btn-secondary"
+              @click="reset"
+            >
               重置
             </button>
           </div>
         </div>
 
         <!-- 结果展示 -->
-        <div v-if="showResult" class="result-display">
+        <div
+          v-if="showResult"
+          class="result-display"
+        >
           <div class="result-header">
             <span class="result-icon">📊</span>
             <span>执行结果</span>
           </div>
 
-          <div v-if="result && !result.error" class="result-content">
+          <div
+            v-if="result && !result.error"
+            class="result-content"
+          >
             <div class="result-item">
-              <div class="result-label">输入类型：</div>
-              <div class="result-value type-badge">{{ result.type }}</div>
+              <div class="result-label">
+                输入类型：
+              </div>
+              <div class="result-value type-badge">
+                {{ result.type }}
+              </div>
             </div>
 
             <div class="result-item">
-              <div class="result-label">输入数组：</div>
+              <div class="result-label">
+                输入数组：
+              </div>
               <div class="result-value array-display">
                 [{{ result.input.join(', ') }}]
               </div>
             </div>
 
             <div class="result-item">
-              <div class="result-label">输出数组：</div>
+              <div class="result-label">
+                输出数组：
+              </div>
               <div class="result-value array-display output">
                 [{{ result.output.join(', ') }}]
               </div>
             </div>
 
             <div class="type-info">
-              <div class="info-icon">✅</div>
+              <div class="info-icon">
+                ✅
+              </div>
               <div>类型安全：输入 {{ result.type }}，输出 {{ result.type }}</div>
             </div>
           </div>
 
-          <div v-else class="error-display">
+          <div
+            v-else
+            class="error-display"
+          >
             {{ result?.error || result }}
           </div>
         </div>
@@ -192,7 +225,9 @@ function reverseArray&lt;T&gt;(arr: T[]): T[] {
         <h4>📝 泛型使用示例</h4>
         <div class="example-grid">
           <div class="example-card">
-            <div class="example-title">数字数组</div>
+            <div class="example-title">
+              数字数组
+            </div>
             <pre><code class="typescript">const nums = [1, 2, 3, 4, 5]
 const reversed = reverseArray&lt;number&gt;(nums)
 // 结果: [5, 4, 3, 2, 1]
@@ -200,7 +235,9 @@ const reversed = reverseArray&lt;number&gt;(nums)
           </div>
 
           <div class="example-card">
-            <div class="example-title">字符串数组</div>
+            <div class="example-title">
+              字符串数组
+            </div>
             <pre><code class="typescript">const strs = ["a", "b", "c"]
 const reversed = reverseArray&lt;string&gt;(strs)
 // 结果: ["c", "b", "a"]
diff --git a/docs/.vitepress/theme/components/appendix/typescript-intro/InterfaceDemo.vue b/docs/.vitepress/theme/components/appendix/typescript-intro/InterfaceDemo.vue
index a0227dd..a4ed46b 100644
--- a/docs/.vitepress/theme/components/appendix/typescript-intro/InterfaceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/typescript-intro/InterfaceDemo.vue
@@ -85,10 +85,16 @@ const reset = () => {
       <div class="user-display">
         <div class="user-card">
           <div class="card-header">
-            <div class="avatar">👤</div>
+            <div class="avatar">
+              👤
+            </div>
             <div class="user-info">
-              <div class="user-name">{{ user.name }}</div>
-              <div class="user-email">{{ user.email }}</div>
+              <div class="user-name">
+                {{ user.name }}
+              </div>
+              <div class="user-email">
+                {{ user.email }}
+              </div>
             </div>
           </div>
           <div class="user-details">
@@ -116,22 +122,38 @@ const reset = () => {
 
       <!-- 操作按钮 -->
       <div class="controls">
-        <button @click="modifyAge" class="btn-primary">
+        <button
+          class="btn-primary"
+          @click="modifyAge"
+        >
           增加年龄
         </button>
-        <button @click="addErrorProperty" class="btn-danger">
+        <button
+          class="btn-danger"
+          @click="addErrorProperty"
+        >
           尝试赋值错误类型
         </button>
-        <button @click="addNewUser" class="btn-secondary">
+        <button
+          class="btn-secondary"
+          @click="addNewUser"
+        >
           创建新用户
         </button>
-        <button @click="reset" class="btn-ghost">重置</button>
+        <button
+          class="btn-ghost"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
 
       <!-- 代码示例 -->
       <div class="code-examples">
         <div class="example-item">
-          <div class="example-header">✅ 正确使用</div>
+          <div class="example-header">
+            ✅ 正确使用
+          </div>
           <pre><code class="typescript">const user: User = {
   id: 1,
   name: "张三",
@@ -141,7 +163,9 @@ const reset = () => {
         </div>
 
         <div class="example-item error">
-          <div class="example-header">❌ 错误使用</div>
+          <div class="example-header">
+            ❌ 错误使用
+          </div>
           <pre><code class="typescript">const user: User = {
   id: 1,
   name: "张三",
diff --git a/docs/.vitepress/theme/components/appendix/typescript-intro/TypeAnnotationDemo.vue b/docs/.vitepress/theme/components/appendix/typescript-intro/TypeAnnotationDemo.vue
index 537fb1b..0f636fd 100644
--- a/docs/.vitepress/theme/components/appendix/typescript-intro/TypeAnnotationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/typescript-intro/TypeAnnotationDemo.vue
@@ -59,7 +59,9 @@ const reset = () => {
             <span class="type-badge string">string</span>
             <span class="var-name">name</span>
           </div>
-          <div class="card-value">{{ name }}</div>
+          <div class="card-value">
+            {{ name }}
+          </div>
           <div class="card-code">
             <code>const name: string = "{{ name }}"</code>
           </div>
@@ -71,7 +73,9 @@ const reset = () => {
             <span class="type-badge number">number</span>
             <span class="var-name">age</span>
           </div>
-          <div class="card-value">{{ age }}</div>
+          <div class="card-value">
+            {{ age }}
+          </div>
           <div class="card-code">
             <code>const age: number = {{ age }}</code>
           </div>
@@ -84,7 +88,7 @@ const reset = () => {
             <span class="var-name">isActive</span>
           </div>
           <div class="card-value">
-            <span :class="['status-dot', isActive ? 'active' : 'inactive']"></span>
+            <span :class="['status-dot', isActive ? 'active' : 'inactive']" />
             {{ isActive ? 'true' : 'false' }}
           </div>
           <div class="card-code">
@@ -103,27 +107,45 @@ const reset = () => {
 
       <!-- 操作按钮 -->
       <div class="controls">
-        <button @click="modifyName" class="btn-primary">
+        <button
+          class="btn-primary"
+          @click="modifyName"
+        >
           修改 name (正确)
         </button>
-        <button @click="modifyAgeError" class="btn-danger">
+        <button
+          class="btn-danger"
+          @click="modifyAgeError"
+        >
           赋值错误类型
         </button>
-        <button @click="toggleActive" class="btn-secondary">
+        <button
+          class="btn-secondary"
+          @click="toggleActive"
+        >
           切换 isActive
         </button>
-        <button @click="reset" class="btn-ghost">重置</button>
+        <button
+          class="btn-ghost"
+          @click="reset"
+        >
+          重置
+        </button>
       </div>
 
       <!-- 代码对比 -->
       <div class="code-comparison">
         <div class="code-panel javascript">
-          <div class="panel-header">JavaScript (无类型检查)</div>
+          <div class="panel-header">
+            JavaScript (无类型检查)
+          </div>
           <pre><code>let name = "张三"
 name = 123  // ✅ 运行时才会报错（可能很晚才发现）</code></pre>
         </div>
         <div class="code-panel typescript">
-          <div class="panel-header">TypeScript (编译时检查)</div>
+          <div class="panel-header">
+            TypeScript (编译时检查)
+          </div>
           <pre><code>let name: string = "张三"
 name = 123  // ❌ 编译时立即报错（写代码时就发现）</code></pre>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/typescript-intro/TypeInferenceDemo.vue b/docs/.vitepress/theme/components/appendix/typescript-intro/TypeInferenceDemo.vue
index c805bd4..ccc9cfd 100644
--- a/docs/.vitepress/theme/components/appendix/typescript-intro/TypeInferenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/typescript-intro/TypeInferenceDemo.vue
@@ -107,7 +107,9 @@ const codeComparisons = ref([
       <!-- 概念说明 -->
       <div class="concept-section">
         <div class="concept-card">
-          <div class="concept-icon">🧠</div>
+          <div class="concept-icon">
+            🧠
+          </div>
           <div class="concept-content">
             <h4>什么是类型推断？</h4>
             <p>TypeScript 很聪明，它能根据你写的代码自动推断出变量的类型，不需要每次都手动标注。</p>
@@ -125,8 +127,12 @@ const codeComparisons = ref([
             :class="['example-card', { active: currentExample.id === example.id }]"
             @click="selectExample(example)"
           >
-            <div class="example-code">{{ example.code }}</div>
-            <div class="example-type">→ {{ example.inferredType }}</div>
+            <div class="example-code">
+              {{ example.code }}
+            </div>
+            <div class="example-type">
+              → {{ example.inferredType }}
+            </div>
           </div>
         </div>
       </div>
@@ -142,20 +148,28 @@ const codeComparisons = ref([
             <pre><code class="typescript">{{ currentExample.code }}</code></pre>
           </div>
 
-          <div class="inference-arrow">→</div>
+          <div class="inference-arrow">
+            →
+          </div>
 
           <div class="type-panel">
             <div class="panel-header">
               <span class="type-icon">🏷️</span>
               <span>推断的类型</span>
             </div>
-            <div class="inferred-type">{{ currentExample.inferredType }}</div>
+            <div class="inferred-type">
+              {{ currentExample.inferredType }}
+            </div>
           </div>
         </div>
 
         <div class="explanation">
-          <div class="explanation-icon">💡</div>
-          <div class="explanation-text">{{ currentExample.explanation }}</div>
+          <div class="explanation-icon">
+            💡
+          </div>
+          <div class="explanation-text">
+            {{ currentExample.explanation }}
+          </div>
         </div>
       </div>
 
@@ -169,10 +183,16 @@ const codeComparisons = ref([
 
       <!-- 操作按钮 -->
       <div class="controls">
-        <button @click="tryTypeError" class="btn-danger">
+        <button
+          class="btn-danger"
+          @click="tryTypeError"
+        >
           尝试类型错误
         </button>
-        <button @click="showError = false; errorMessage = ''" class="btn-secondary">
+        <button
+          class="btn-secondary"
+          @click="showError = false; errorMessage = ''"
+        >
           清除消息
         </button>
       </div>
@@ -186,9 +206,14 @@ const codeComparisons = ref([
             :key="index"
             class="practice-card"
           >
-            <div class="practice-header">{{ practice.title }}</div>
+            <div class="practice-header">
+              {{ practice.title }}
+            </div>
             <ul class="practice-list">
-              <li v-for="(item, i) in practice.items" :key="i">
+              <li
+                v-for="(item, i) in practice.items"
+                :key="i"
+              >
                 {{ item }}
               </li>
             </ul>
@@ -204,14 +229,20 @@ const codeComparisons = ref([
           :key="index"
           class="comparison-item"
         >
-          <div class="comparison-scenario">{{ comparison.scenario }}</div>
+          <div class="comparison-scenario">
+            {{ comparison.scenario }}
+          </div>
           <div class="comparison-codes">
             <div class="comparison-code">
-              <div class="code-label">使用推断</div>
+              <div class="code-label">
+                使用推断
+              </div>
               <pre><code class="typescript">{{ comparison.withInference }}</code></pre>
             </div>
             <div class="comparison-code">
-              <div class="code-label">显式注解</div>
+              <div class="code-label">
+                显式注解
+              </div>
               <pre><code class="typescript">{{ comparison.withAnnotation }}</code></pre>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
index d6c6358..7d5b9e1 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue
@@ -15,10 +15,10 @@
         <button
           v-for="(step, index) in steps"
           :key="step.id"
-          @click="goToStep(index)"
           class="step-chip"
           :class="{ active: currentStep === index, completed: currentStep > index }"
           :disabled="isAutoPlaying"
+          @click="goToStep(index)"
         >
           <span class="chip-num">{{ index + 1 }}</span>
           <span class="chip-name">{{ step.shortName }}</span>
@@ -35,12 +35,24 @@
           <span class="col-title">收到的代码</span>
         </div>
         <div class="code-preview">
-          <div class="code-line">&lt;div class="box"&gt;</div>
-          <div class="code-line indent">Hello</div>
-          <div class="code-line">&lt;/div&gt;</div>
-          <div class="code-line style-tag">&lt;style&gt;</div>
-          <div class="code-line indent">.box { bg: blue }</div>
-          <div class="code-line style-tag">&lt;/style&gt;</div>
+          <div class="code-line">
+            &lt;div class="box"&gt;
+          </div>
+          <div class="code-line indent">
+            Hello
+          </div>
+          <div class="code-line">
+            &lt;/div&gt;
+          </div>
+          <div class="code-line style-tag">
+            &lt;style&gt;
+          </div>
+          <div class="code-line indent">
+            .box { bg: blue }
+          </div>
+          <div class="code-line style-tag">
+            &lt;/style&gt;
+          </div>
         </div>
       </div>
 
@@ -53,60 +65,134 @@
         
         <div class="process-stage">
           <!-- 步骤展示 -->
-          <transition name="fade" mode="out-in">
-            <div :key="currentStep" class="step-content">
+          <transition
+            name="fade"
+            mode="out-in"
+          >
+            <div
+              :key="currentStep"
+              class="step-content"
+            >
               <div class="step-visual">
                 <!-- 1. HTML解析 -->
-                <div v-if="currentStep === 0" class="visual-tree">
-                  <div class="tree-node root">html</div>
-                  <div class="tree-line">│</div>
-                  <div class="tree-node body">body</div>
-                  <div class="tree-line">│</div>
-                  <div class="tree-node div highlight">div.box</div>
+                <div
+                  v-if="currentStep === 0"
+                  class="visual-tree"
+                >
+                  <div class="tree-node root">
+                    html
+                  </div>
+                  <div class="tree-line">
+                    │
+                  </div>
+                  <div class="tree-node body">
+                    body
+                  </div>
+                  <div class="tree-line">
+                    │
+                  </div>
+                  <div class="tree-node div highlight">
+                    div.box
+                  </div>
                 </div>
 
                 <!-- 2. CSS解析 -->
-                <div v-else-if="currentStep === 1" class="visual-css">
+                <div
+                  v-else-if="currentStep === 1"
+                  class="visual-css"
+                >
                   <div class="css-card">
                     <span class="selector">.box</span>
-                    <div class="rule">background: <span class="value">blue</span></div>
+                    <div class="rule">
+                      background: <span class="value">blue</span>
+                    </div>
                   </div>
                 </div>
 
                 <!-- 3. 合并渲染树 -->
-                <div v-else-if="currentStep === 2" class="visual-combine">
-                  <div class="combine-item dom">DOM树</div>
-                  <div class="combine-plus">+</div>
-                  <div class="combine-item css">CSS树</div>
-                  <div class="combine-arrow">→</div>
-                  <div class="combine-result">渲染树</div>
+                <div
+                  v-else-if="currentStep === 2"
+                  class="visual-combine"
+                >
+                  <div class="combine-item dom">
+                    DOM树
+                  </div>
+                  <div class="combine-plus">
+                    +
+                  </div>
+                  <div class="combine-item css">
+                    CSS树
+                  </div>
+                  <div class="combine-arrow">
+                    →
+                  </div>
+                  <div class="combine-result">
+                    渲染树
+                  </div>
                 </div>
 
                 <!-- 4. 布局计算 -->
-                <div v-else-if="currentStep === 3" class="visual-layout">
-                  <div class="layout-box" :class="{ measured: isMeasured }">
-                    <span class="measure-label" v-if="isMeasured">100px × 100px</span>
-                    <div class="ruler-h" v-if="isMeasured"></div>
-                    <div class="ruler-v" v-if="isMeasured"></div>
+                <div
+                  v-else-if="currentStep === 3"
+                  class="visual-layout"
+                >
+                  <div
+                    class="layout-box"
+                    :class="{ measured: isMeasured }"
+                  >
+                    <span
+                      v-if="isMeasured"
+                      class="measure-label"
+                    >100px × 100px</span>
+                    <div
+                      v-if="isMeasured"
+                      class="ruler-h"
+                    />
+                    <div
+                      v-if="isMeasured"
+                      class="ruler-v"
+                    />
                   </div>
                 </div>
 
                 <!-- 5. 绘制 -->
-                <div v-else-if="currentStep === 4" class="visual-paint">
-                  <div class="paint-layer bg" :class="{ painted: isPainted }">背景层</div>
-                  <div class="paint-layer text" :class="{ painted: isPainted }">文字层</div>
+                <div
+                  v-else-if="currentStep === 4"
+                  class="visual-paint"
+                >
+                  <div
+                    class="paint-layer bg"
+                    :class="{ painted: isPainted }"
+                  >
+                    背景层
+                  </div>
+                  <div
+                    class="paint-layer text"
+                    :class="{ painted: isPainted }"
+                  >
+                    文字层
+                  </div>
                 </div>
 
                 <!-- 6. 合成 -->
-                <div v-else class="visual-final">
-                  <div class="final-box">Hello</div>
-                  <div class="check-mark">✨</div>
+                <div
+                  v-else
+                  class="visual-final"
+                >
+                  <div class="final-box">
+                    Hello
+                  </div>
+                  <div class="check-mark">
+                    ✨
+                  </div>
                 </div>
               </div>
               
               <div class="step-desc">
                 <span class="step-badge">{{ currentStep + 1 }}. {{ steps[currentStep].name }}</span>
-                <p class="step-text">{{ steps[currentStep].desc }}</p>
+                <p class="step-text">
+                  {{ steps[currentStep].desc }}
+                </p>
               </div>
             </div>
           </transition>
@@ -121,21 +207,30 @@
         </div>
         <div class="screen-preview">
           <div class="browser-toolbar">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
+            <span class="dot red" />
+            <span class="dot yellow" />
+            <span class="dot green" />
           </div>
           <div class="viewport">
             <transition name="scale">
-              <div v-if="currentStep >= 5" class="final-render">
+              <div
+                v-if="currentStep >= 5"
+                class="final-render"
+              >
                 Hello
               </div>
-              <div v-else-if="currentStep >= 4" class="skeleton-render">
-                <div class="sk-box"></div>
+              <div
+                v-else-if="currentStep >= 4"
+                class="skeleton-render"
+              >
+                <div class="sk-box" />
               </div>
             </transition>
-            <div v-if="currentStep < 4" class="loading-spinner">
-              <div class="spinner"></div>
+            <div
+              v-if="currentStep < 4"
+              class="loading-spinner"
+            >
+              <div class="spinner" />
             </div>
           </div>
         </div>
@@ -147,32 +242,56 @@
       <div class="analogy-bar">
         <span class="analogy-icon">💡</span>
         <span class="analogy-text">
-          <strong>核心机制：</strong> <span v-html="steps[currentStep].analogy"></span>
+          <strong>核心机制：</strong> <span v-html="steps[currentStep].analogy" />
         </span>
       </div>
       
       <div class="action-buttons">
-        <button class="ctrl-btn" @click="prevStep" :disabled="currentStep <= 0 || isAutoPlaying">
+        <button
+          class="ctrl-btn"
+          :disabled="currentStep <= 0 || isAutoPlaying"
+          @click="prevStep"
+        >
           上一步
         </button>
-        <button class="ctrl-btn primary" @click="toggleAutoPlay">
+        <button
+          class="ctrl-btn primary"
+          @click="toggleAutoPlay"
+        >
           {{ isAutoPlaying ? '暂停演示' : '自动演示' }}
         </button>
-        <button class="ctrl-btn" @click="nextStep" :disabled="currentStep >= steps.length - 1 || isAutoPlaying">
+        <button
+          class="ctrl-btn"
+          :disabled="currentStep >= steps.length - 1 || isAutoPlaying"
+          @click="nextStep"
+        >
           下一步
         </button>
       </div>
     </div>
 
     <!-- 技术答疑面板 -->
-    <div class="qa-panel" v-if="steps[currentStep].qa">
+    <div
+      v-if="steps[currentStep].qa"
+      class="qa-panel"
+    >
       <div class="qa-header">
         {{ steps[currentStep].qa.title }}
       </div>
       <div class="qa-content">
-        <div v-for="(item, idx) in steps[currentStep].qa.content" :key="idx" class="qa-item">
-          <div class="qa-q" v-html="'Q: ' + item.q"></div>
-          <div class="qa-a" v-html="item.a"></div>
+        <div
+          v-for="(item, idx) in steps[currentStep].qa.content"
+          :key="idx"
+          class="qa-item"
+        >
+          <div
+            class="qa-q"
+            v-html="'Q: ' + item.q"
+          />
+          <div
+            class="qa-a"
+            v-html="item.a"
+          />
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
index 4d4dc9f..0ba5738 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue
@@ -18,8 +18,16 @@
       
       <div class="target-select">
         <span class="label">目标：</span>
-        <select v-model="selectedTargetIndex" :disabled="isSearching" @change="reset">
-          <option v-for="(t, i) in targets" :key="t.name" :value="i">
+        <select
+          v-model="selectedTargetIndex"
+          :disabled="isSearching"
+          @change="reset"
+        >
+          <option
+            v-for="(t, i) in targets"
+            :key="t.name"
+            :value="i"
+          >
             {{ t.name }} ({{ t.domain }})
           </option>
         </select>
@@ -27,23 +35,23 @@
 
       <div class="actions">
         <button 
-          class="action-btn primary" 
+          v-if="!isSearching && !isFinished" 
+          class="action-btn primary"
           @click="startAutoSearch"
-          v-if="!isSearching && !isFinished"
         >
           ▶ 开始寻址
         </button>
         <button 
-          class="action-btn secondary" 
+          v-if="isSearching && !autoPlay" 
+          class="action-btn secondary"
           @click="nextStep"
-          v-if="isSearching && !autoPlay"
         >
           ⏭ 下一步
         </button>
         <button 
-          class="action-btn outline" 
+          v-if="isFinished || isSearching" 
+          class="action-btn outline"
           @click="reset"
-          v-if="isFinished || isSearching"
         >
           ↺ 重置
         </button>
@@ -52,15 +60,24 @@
 
     <!-- 进度条/状态展示 -->
     <div class="status-bar">
-      <div v-if="!isSearching && !isFinished" class="status-text">
+      <div
+        v-if="!isSearching && !isFinished"
+        class="status-text"
+      >
         <span class="icon">👋</span>
         准备出发：去问问 <strong>{{ targets[selectedTargetIndex].domain }}</strong> 的 IP 是多少？
       </div>
-      <div v-else-if="isSearching" class="status-text running">
+      <div
+        v-else-if="isSearching"
+        class="status-text running"
+      >
         <span class="icon spin">⏳</span>
         正在询问：{{ queryLevels[currentStep]?.analogyName }}...
       </div>
-      <div v-else class="status-text success">
+      <div
+        v-else
+        class="status-text success"
+      >
         <span class="icon">✅</span>
         找到了！IP 地址是：<strong>{{ targets[selectedTargetIndex].ip }}</strong>
       </div>
@@ -79,13 +96,21 @@
         }"
         @click="jumpToStep(index)"
       >
-        <div class="step-icon-box" :style="{ '--step-color': level.color }">
+        <div
+          class="step-icon-box"
+          :style="{ '--step-color': level.color }"
+        >
           <span class="step-icon">{{ level.analogyIcon }}</span>
         </div>
-        <div class="step-label">{{ level.analogyName }}</div>
+        <div class="step-label">
+          {{ level.analogyName }}
+        </div>
         
         <!-- 连接线 -->
-        <div class="step-line" v-if="index < queryLevels.length - 1"></div>
+        <div
+          v-if="index < queryLevels.length - 1"
+          class="step-line"
+        />
       </div>
     </div>
 
@@ -93,20 +118,35 @@
     <div class="info-panels">
       <!-- 左侧：生活场景 -->
       <div class="detail-panel analogy-panel">
-        <transition name="fade" mode="out-in">
-          <div v-if="currentStep >= 0" class="panel-content" :key="currentStep">
-            <div class="panel-header" :style="{ color: currentLevel.color }">
+        <transition
+          name="fade"
+          mode="out-in"
+        >
+          <div
+            v-if="currentStep >= 0"
+            :key="currentStep"
+            class="panel-content"
+          >
+            <div
+              class="panel-header"
+              :style="{ color: currentLevel.color }"
+            >
               <span class="header-icon">{{ currentLevel.analogyIcon }}</span>
               <span class="header-title">{{ currentLevel.analogyName }} ({{ currentLevel.techName }})</span>
             </div>
             <div class="panel-body">
-              <p class="analogy-text">{{ currentLevel.analogyAction }}</p>
+              <p class="analogy-text">
+                {{ currentLevel.analogyAction }}
+              </p>
               <div class="tech-hint-badge">
                 {{ currentLevel.techAction }}
               </div>
             </div>
           </div>
-          <div v-else class="panel-placeholder">
+          <div
+            v-else
+            class="panel-placeholder"
+          >
             <span>生活场景视角</span>
           </div>
         </transition>
@@ -116,12 +156,21 @@
       <div class="detail-panel terminal-panel">
         <div class="terminal-header">
           <div class="terminal-dots">
-            <span></span><span></span><span></span>
+            <span /><span /><span />
+          </div>
+          <div class="terminal-title">
+            Terminal
           </div>
-          <div class="terminal-title">Terminal</div>
         </div>
-        <transition name="fade" mode="out-in">
-          <div v-if="currentStep >= 0" class="terminal-body" :key="currentStep">
+        <transition
+          name="fade"
+          mode="out-in"
+        >
+          <div
+            v-if="currentStep >= 0"
+            :key="currentStep"
+            class="terminal-body"
+          >
             <div class="cmd-line">
               <span class="prompt">$</span>
               <span class="cmd">{{ formatText(currentLevel.techCommand) }}</span>
@@ -130,13 +179,15 @@
               <pre>{{ formatText(currentLevel.techOutput) }}</pre>
             </div>
           </div>
-          <div v-else class="terminal-placeholder">
+          <div
+            v-else
+            class="terminal-placeholder"
+          >
             <span>Waiting for command...</span>
           </div>
         </transition>
       </div>
     </div>
-
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
index 650cb0d..14b5e00 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue
@@ -19,17 +19,17 @@
         <button 
           v-for="s in scenarios" 
           :key="s.id"
-          @click="selectScenario(s)"
           class="tab-btn"
           :class="{ active: currentScenario.id === s.id }"
           :disabled="isAnimating"
+          @click="selectScenario(s)"
         >
           {{ s.name }}
         </button>
       </div>
 
       <div class="actions">
-         <button 
+        <button 
           class="action-btn primary" 
           @click="toggleAutoPlay"
         >
@@ -56,16 +56,23 @@
 
       <!-- 传输通道 -->
       <div class="channel">
-        <div class="channel-bg"></div>
+        <div class="channel-bg" />
         
         <!-- 请求包 -->
-        <div class="packet request" :class="{ moving: step === 1, done: step > 1 }">
+        <div
+          class="packet request"
+          :class="{ moving: step === 1, done: step > 1 }"
+        >
           <span class="packet-icon">📤</span>
           <span class="packet-label">GET</span>
         </div>
 
         <!-- 响应包 -->
-        <div class="packet response" :class="{ moving: step === 2, done: step > 2 }" v-if="step >= 2">
+        <div
+          v-if="step >= 2"
+          class="packet response"
+          :class="{ moving: step === 2, done: step > 2 }"
+        >
           <span class="packet-icon">📦</span>
           <span class="packet-label">{{ currentScenario.status }}</span>
         </div>
@@ -82,35 +89,51 @@
 
     <!-- 底部详情面板 (固定高度) -->
     <div class="detail-panel">
-      <transition name="fade" mode="out-in">
-        <div v-if="step > 0" class="detail-content" :key="step">
-           <!-- 左侧状态徽章 -->
-           <div class="detail-left" :style="{ borderColor: getStatusColor() }">
-             <div class="status-badge" :class="currentScenario.statusType">
-               {{ step === 1 ? '请求中' : currentScenario.status + ' ' + currentScenario.statusText }}
-             </div>
-           </div>
+      <transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          v-if="step > 0"
+          :key="step"
+          class="detail-content"
+        >
+          <!-- 左侧状态徽章 -->
+          <div
+            class="detail-left"
+            :style="{ borderColor: getStatusColor() }"
+          >
+            <div
+              class="status-badge"
+              :class="currentScenario.statusType"
+            >
+              {{ step === 1 ? '请求中' : currentScenario.status + ' ' + currentScenario.statusText }}
+            </div>
+          </div>
            
-           <div class="detail-divider"></div>
+          <div class="detail-divider" />
 
-           <!-- 右侧详情 -->
-           <div class="detail-right">
-             <div class="info-row">
-               <span class="tag life">快递员说</span>
-               <span class="text highlight">
-                 {{ step === 1 ? currentScenario.requestText : currentScenario.responseText }}
-               </span>
-             </div>
-             <div class="info-row">
-               <span class="tag tech">技术报文</span>
-               <span class="text code">
-                 {{ step === 1 ? `${currentScenario.method} ${currentScenario.path} HTTP/1.1` : `HTTP/1.1 ${currentScenario.status} ${currentScenario.statusText}` }}
-               </span>
-             </div>
-           </div>
+          <!-- 右侧详情 -->
+          <div class="detail-right">
+            <div class="info-row">
+              <span class="tag life">快递员说</span>
+              <span class="text highlight">
+                {{ step === 1 ? currentScenario.requestText : currentScenario.responseText }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="tag tech">技术报文</span>
+              <span class="text code">
+                {{ step === 1 ? `${currentScenario.method} ${currentScenario.path} HTTP/1.1` : `HTTP/1.1 ${currentScenario.status} ${currentScenario.statusText}` }}
+              </span>
+            </div>
+          </div>
         </div>
         
-        <div v-else class="detail-placeholder">
+        <div
+          v-else
+          class="detail-placeholder"
+        >
           <span class="guide-bounce">📦</span>
           <span>选择一个场景，点击"演示"看看发生了什么</span>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
index 7c34a5e..c79de10 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue
@@ -16,11 +16,11 @@
       </div>
       
       <div class="actions">
-         <button 
-          class="action-btn primary" 
-          @click="nextStep"
+        <button 
+          v-if="currentStep < 3" 
+          class="action-btn primary"
           :disabled="currentStep >= 3"
-          v-if="currentStep < 3"
+          @click="nextStep"
         >
           {{ currentStep === 0 ? '▶ 开始拨号' : '下一步 ➔' }}
         </button>
@@ -42,7 +42,10 @@
           <span class="avatar-label">客户端 (你)</span>
         </div>
         <transition name="pop">
-          <div class="bubble client" v-if="currentStep >= 1">
+          <div
+            v-if="currentStep >= 1"
+            class="bubble client"
+          >
             {{ getBubbleText(1) }}
           </div>
         </transition>
@@ -50,11 +53,20 @@
 
       <!-- 中间：连接状态线 -->
       <div class="connection-line">
-        <div class="line-bg"></div>
-        <div class="signal-packet" :class="getSignalClass()">
-          <span class="packet-icon" v-if="currentStep > 0">{{ getSignalIcon() }}</span>
+        <div class="line-bg" />
+        <div
+          class="signal-packet"
+          :class="getSignalClass()"
+        >
+          <span
+            v-if="currentStep > 0"
+            class="packet-icon"
+          >{{ getSignalIcon() }}</span>
         </div>
-        <div class="status-badge" :class="{ connected: currentStep === 3 }">
+        <div
+          class="status-badge"
+          :class="{ connected: currentStep === 3 }"
+        >
           {{ currentStep === 3 ? '✅ 连接建立' : '⏳ 连接中...' }}
         </div>
       </div>
@@ -66,7 +78,10 @@
           <span class="avatar-label">服务器</span>
         </div>
         <transition name="pop">
-          <div class="bubble server" v-if="currentStep >= 2">
+          <div
+            v-if="currentStep >= 2"
+            class="bubble server"
+          >
             {{ getBubbleText(2) }}
           </div>
         </transition>
@@ -80,83 +95,125 @@
         :key="index"
         class="step-dot"
         :class="{ active: currentStep === index + 1, passed: currentStep > index + 1 }"
-        @click="goToStep(index + 1)"
         :title="step.techTitle"
+        @click="goToStep(index + 1)"
       >
         <span class="dot-num">{{ index + 1 }}</span>
-        <span class="dot-line" v-if="index < steps.length - 1"></span>
+        <span
+          v-if="index < steps.length - 1"
+          class="dot-line"
+        />
       </div>
     </div>
 
     <!-- 底部详情面板 (固定高度) -->
     <div class="detail-panel">
-      <transition name="fade" mode="out-in">
-        <div v-if="currentStep > 0" class="detail-content" :key="currentStep">
-           <div class="detail-left" :style="{ borderColor: getCurrentStepColor() }">
-             <div class="step-badge" :style="{ background: getCurrentStepColor() }">
-               步骤 {{ currentStep }}
-             </div>
-           </div>
+      <transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          v-if="currentStep > 0"
+          :key="currentStep"
+          class="detail-content"
+        >
+          <div
+            class="detail-left"
+            :style="{ borderColor: getCurrentStepColor() }"
+          >
+            <div
+              class="step-badge"
+              :style="{ background: getCurrentStepColor() }"
+            >
+              步骤 {{ currentStep }}
+            </div>
+          </div>
            
-           <div class="detail-divider"></div>
+          <div class="detail-divider" />
 
-           <div class="detail-right">
-             <div class="info-row">
-               <span class="tag life">生活对话</span>
-               <span class="text highlight">{{ steps[currentStep-1].simpleTitle }}</span>
-             </div>
-             <div class="info-row">
-               <span class="tag tech">技术原理</span>
-               <div class="tech-content">
-                 <div class="tech-desc">{{ steps[currentStep-1].techDesc }}</div>
-                 <!-- 动态名词解码卡片 -->
-                 <div class="term-glossary">
-                   <div v-for="term in steps[currentStep-1].terms" :key="term.key" class="term-item">
-                     <span class="term-key">{{ term.key }}</span>
-                     <span class="term-val">{{ term.val }}</span>
-                   </div>
-                 </div>
+          <div class="detail-right">
+            <div class="info-row">
+              <span class="tag life">生活对话</span>
+              <span class="text highlight">{{ steps[currentStep-1].simpleTitle }}</span>
+            </div>
+            <div class="info-row">
+              <span class="tag tech">技术原理</span>
+              <div class="tech-content">
+                <div class="tech-desc">
+                  {{ steps[currentStep-1].techDesc }}
+                </div>
+                <!-- 动态名词解码卡片 -->
+                <div class="term-glossary">
+                  <div
+                    v-for="term in steps[currentStep-1].terms"
+                    :key="term.key"
+                    class="term-item"
+                  >
+                    <span class="term-key">{{ term.key }}</span>
+                    <span class="term-val">{{ term.val }}</span>
+                  </div>
+                </div>
 
-                 <!-- 代码实现细节 (折叠) -->
-                 <details class="code-details" v-if="steps[currentStep-1].codeImpl">
-                   <summary class="code-summary">
-                     <span class="summary-icon">🛠️</span>
-                     <span class="summary-text">技术深究：底层代码如何实现？</span>
-                   </summary>
-                   <div class="code-block-wrapper">
-                     <div class="code-title">{{ steps[currentStep-1].codeImpl.title }}</div>
-                    <pre class="code-block"><code v-html="steps[currentStep-1].codeImpl.code"></code></pre>
+                <!-- 代码实现细节 (折叠) -->
+                <details
+                  v-if="steps[currentStep-1].codeImpl"
+                  class="code-details"
+                >
+                  <summary class="code-summary">
+                    <span class="summary-icon">🛠️</span>
+                    <span class="summary-text">技术深究：底层代码如何实现？</span>
+                  </summary>
+                  <div class="code-block-wrapper">
+                    <div class="code-title">
+                      {{ steps[currentStep-1].codeImpl.title }}
+                    </div>
+                    <pre class="code-block"><code v-html="steps[currentStep-1].codeImpl.code" /></pre>
                   </div>
                 </details>
 
                 <!-- 技术问答 (折叠) - 仅在有问答时显示 -->
-                <details class="code-details qa-details" v-if="steps[currentStep-1].qa">
+                <details
+                  v-if="steps[currentStep-1].qa"
+                  class="code-details qa-details"
+                >
                   <summary class="code-summary qa-summary">
                     <span class="summary-icon">🎓</span>
                     <span class="summary-text">{{ steps[currentStep-1].qa.title }}</span>
                   </summary>
                   <div class="code-block-wrapper qa-content">
-                    <div v-for="(item, idx) in steps[currentStep-1].qa.content" :key="idx" class="qa-item">
-                      <div class="qa-q">Q: {{ item.q }}</div>
-                      <div class="qa-a" v-html="item.a"></div>
+                    <div
+                      v-for="(item, idx) in steps[currentStep-1].qa.content"
+                      :key="idx"
+                      class="qa-item"
+                    >
+                      <div class="qa-q">
+                        Q: {{ item.q }}
+                      </div>
+                      <div
+                        class="qa-a"
+                        v-html="item.a"
+                      />
                     </div>
                   </div>
                 </details>
-               </div>
-             </div>
-           </div>
+              </div>
+            </div>
+          </div>
 
-           <!-- 下一步按钮 -->
-           <button 
-             class="next-btn" 
-             v-if="currentStep < 3"
-             @click="nextStep"
-           >
-             下一步 ➔
-           </button>
+          <!-- 下一步按钮 -->
+          <button 
+            v-if="currentStep < 3" 
+            class="next-btn"
+            @click="nextStep"
+          >
+            下一步 ➔
+          </button>
         </div>
         
-        <div v-else class="detail-placeholder">
+        <div
+          v-else
+          class="detail-placeholder"
+        >
           <span class="guide-bounce">📞</span>
           <span>点击"开始拨号"或步骤圆点，开始拨打电话</span>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
index b8aeaeb..f2ae273 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue
@@ -11,7 +11,10 @@
   <div class="url-parser-order">
     <!-- 顶部：输入区 -->
     <div class="input-section">
-      <div class="url-input-box" :class="{ 'has-error': error }">
+      <div
+        class="url-input-box"
+        :class="{ 'has-error': error }"
+      >
         <span class="input-label">URL</span>
         <input
           v-model="urlInput"
@@ -19,17 +22,23 @@
           placeholder="https://www.example.com/path?query=1"
           class="real-input"
           @input="parseUrl"
-        />
-        <button v-if="urlInput" class="clear-btn" @click="clear">✕</button>
+        >
+        <button
+          v-if="urlInput"
+          class="clear-btn"
+          @click="clear"
+        >
+          ✕
+        </button>
       </div>
       <div class="quick-actions">
         <span class="action-label">试一试：</span>
         <button 
           v-for="ex in examples" 
           :key="ex.name"
-          @click="useExample(ex)"
           class="action-chip"
           :class="{ active: currentExample === ex.name }"
+          @click="useExample(ex)"
         >
           {{ ex.name }}
         </button>
@@ -48,8 +57,8 @@
           <div class="code-blocks">
             <div 
               v-for="(field, key) in formFields" 
-              :key="key"
               v-show="shouldShowField(key)"
+              :key="key"
               class="code-block"
               :class="[key, { active: hovered === key }]"
               :style="{ '--color': field.color }"
@@ -75,19 +84,24 @@
             <span class="title">购物订单</span>
           </div>
           <div class="order-ticket">
-            <div class="ticket-hole"></div>
+            <div class="ticket-hole" />
             
             <div 
               v-for="(field, key) in formFields"
-              :key="key"
               v-show="shouldShowField(key)"
+              :key="key"
               class="ticket-row"
               :class="{ active: hovered === key }"
               :style="{ '--color': field.color }"
               @mouseenter="hovered = key"
               @mouseleave="hovered = null"
             >
-              <div class="ticket-icon" :style="{ backgroundColor: field.color }">{{ field.icon }}</div>
+              <div
+                class="ticket-icon"
+                :style="{ backgroundColor: field.color }"
+              >
+                {{ field.icon }}
+              </div>
               <div class="ticket-content">
                 <span class="ticket-label">{{ field.analogyLabel }}</span>
                 <span class="ticket-desc">{{ field.analogyDesc }}</span>
@@ -99,24 +113,45 @@
 
       <!-- 技术答疑面板 -->
       <transition name="fade">
-        <div class="qa-panel" v-if="activeQa">
-          <div class="qa-header">{{ activeQa.title }}</div>
+        <div
+          v-if="activeQa"
+          class="qa-panel"
+        >
+          <div class="qa-header">
+            {{ activeQa.title }}
+          </div>
           <div class="qa-content">
-            <div v-for="(item, idx) in activeQa.content" :key="idx" class="qa-item">
-              <div class="qa-q">Q: {{ item.q }}</div>
-              <div class="qa-a">A: {{ item.a }}</div>
+            <div
+              v-for="(item, idx) in activeQa.content"
+              :key="idx"
+              class="qa-item"
+            >
+              <div class="qa-q">
+                Q: {{ item.q }}
+              </div>
+              <div class="qa-a">
+                A: {{ item.a }}
+              </div>
             </div>
           </div>
         </div>
-        <div class="qa-placeholder" v-else>
+        <div
+          v-else
+          class="qa-placeholder"
+        >
           👆 鼠标悬停在上方色块，查看详细技术解释
         </div>
       </transition>
     </template>
 
     <!-- 空状态引导 -->
-    <div class="empty-state" v-else>
-      <div class="empty-icon">🛒</div>
+    <div
+      v-else
+      class="empty-state"
+    >
+      <div class="empty-icon">
+        🛒
+      </div>
       <div class="empty-text">
         <p>输入网址，生成你的"数字购物单"</p>
         <span class="sub-text">看看浏览器如何理解这一长串字符</span>
diff --git a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
index a9bc38f..84b4385 100644
--- a/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
+++ b/docs/.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue
@@ -11,52 +11,66 @@
 <template>
   <div class="quick-start-compact">
     <!-- 顶部：极简输入栏 -->
-    <div class="input-bar" :class="{ 'is-active': isActive }">
+    <div
+      class="input-bar"
+      :class="{ 'is-active': isActive }"
+    >
       <div class="input-wrapper">
         <span class="protocol">https://</span>
         <input 
           v-model="url" 
           type="text" 
           placeholder="输入网址，开始旅程..."
-          @keyup.enter="handleMainAction"
           :disabled="isActive && !isFinished"
-        />
+          @keyup.enter="handleMainAction"
+        >
         
         <!-- 主操作按钮 -->
         <button 
           class="start-btn" 
           :class="{ 'next-btn': isActive && !isFinished, 'reset-btn': isFinished }"
-          @click="handleMainAction" 
-          :disabled="!url"
+          :disabled="!url" 
+          @click="handleMainAction"
         >
           {{ mainButtonText }}
         </button>
       </div>
       
       <!-- 步骤控制按钮组 -->
-      <div class="step-controls" v-if="isActive">
+      <div
+        v-if="isActive"
+        class="step-controls"
+      >
         <button 
           class="control-btn" 
-          @click="prevStep" 
-          :disabled="currentStep === 0"
+          :disabled="currentStep === 0" 
           title="上一步"
+          @click="prevStep"
         >
           ⬅️
         </button>
         <button 
           class="control-btn" 
-          @click="nextStep" 
-          :disabled="isFinished"
+          :disabled="isFinished" 
           title="下一步"
+          @click="nextStep"
         >
           ➡️
         </button>
       </div>
 
       <!-- 快速体验按钮 (仅在未开始时显示) -->
-      <div class="quick-chips" v-if="!isActive">
+      <div
+        v-if="!isActive"
+        class="quick-chips"
+      >
         <span class="chip-label">试一试:</span>
-        <button v-for="u in quickUrls" :key="u" @click="quickStart(u)" class="chip">
+        <button
+          v-for="u in quickUrls"
+          :key="u"
+          class="chip"
+          @click="quickStart(u)"
+        >
           {{ u }}
         </button>
       </div>
@@ -66,7 +80,10 @@
     <div class="conveyor-stage">
       <!-- 进度轨道 -->
       <div class="track-line">
-        <div class="track-progress" :style="{ width: packagePosition + '%' }"></div>
+        <div
+          class="track-progress"
+          :style="{ width: packagePosition + '%' }"
+        />
       </div>
 
       <!-- 站点节点 -->
@@ -83,19 +100,23 @@
       >
         <div class="station-icon-box">
           <span class="station-icon">{{ step.icon }}</span>
-          <div class="station-status-dot"></div>
+          <div class="station-status-dot" />
+        </div>
+        <div class="station-label">
+          {{ step.name }}
         </div>
-        <div class="station-label">{{ step.name }}</div>
       </div>
 
       <!-- 移动的包裹 (绝对定位) -->
       <div 
+        v-show="isActive"
         class="moving-package"
         :style="{ '--package-pos': packagePosition }"
-        v-show="isActive"
       >
-        <div class="package-body">📦</div>
-        <div class="package-shadow"></div>
+        <div class="package-body">
+          📦
+        </div>
+        <div class="package-shadow" />
         <!-- 动态提示气泡 -->
         <div class="package-bubble">
           <span class="bubble-analogy">{{ steps[currentStep]?.analogyAction }}</span>
@@ -105,26 +126,38 @@
 
     <!-- 底部：动态对照条 -->
     <div class="dynamic-info-bar">
-      <transition name="slide-up" mode="out-in">
-        <div v-if="isActive" :key="currentStep" class="info-content">
+      <transition
+        name="slide-up"
+        mode="out-in"
+      >
+        <div
+          v-if="isActive"
+          :key="currentStep"
+          class="info-content"
+        >
           <div class="info-left">
             <span class="stage-badge">第 {{ currentStep + 1 }} 站</span>
             <span class="stage-title">{{ steps[currentStep].title }}</span>
           </div>
-          <div class="info-divider"></div>
+          <div class="info-divider" />
           <div class="info-right">
             <div class="mapping-item">
               <span class="mapping-icon">🚚</span>
               <span class="mapping-text">生活：{{ steps[currentStep].analogyDesc }}</span>
             </div>
-            <div class="mapping-arrow">↔️</div>
+            <div class="mapping-arrow">
+              ↔️
+            </div>
             <div class="mapping-item">
               <span class="mapping-icon">💻</span>
               <span class="mapping-text">技术：{{ steps[currentStep].techDesc }}</span>
             </div>
           </div>
         </div>
-        <div v-else class="info-placeholder">
+        <div
+          v-else
+          class="info-placeholder"
+        >
           👈 在左上角输入网址，开启网络快递之旅
         </div>
       </transition>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue
index a4668a0..65977fa 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/AttentionDemo.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="attn-demo">
     <div class="header">
-      <div class="title">Self-Attention Mechanism</div>
-      <div class="subtitle">自注意力机制：全局信息交互</div>
+      <div class="title">
+        Self-Attention Mechanism
+      </div>
+      <div class="subtitle">
+        自注意力机制：全局信息交互
+      </div>
     </div>
 
     <div class="visual-stage">
       <!-- Grid Layout -->
-      <div class="grid-container" @mouseleave="hoverIndex = -1">
+      <div
+        class="grid-container"
+        @mouseleave="hoverIndex = -1"
+      >
         <!-- SVG Layer for Connection Lines -->
         <svg class="connections-layer">
           <defs>
@@ -30,8 +37,8 @@
           <g v-if="hoverIndex !== -1">
             <line
               v-for="(target, tIndex) in items"
-              :key="tIndex"
               v-show="tIndex !== hoverIndex"
+              :key="tIndex"
               :x1="getCenter(hoverIndex).x"
               :y1="getCenter(hoverIndex).y"
               :x2="getCenter(tIndex).x"
@@ -55,11 +62,11 @@
             'is-strong-attn':
               hoverIndex !== -1 && getAttentionScore(hoverIndex, index) > 0.5
           }"
-          @mouseenter="hoverIndex = index"
           :style="{
             left: getCenter(index).x - 30 + 'px',
             top: getCenter(index).y - 30 + 'px'
           }"
+          @mouseenter="hoverIndex = index"
         >
           <div class="cell-content">
             <span class="cell-icon">{{ item.icon }}</span>
@@ -67,8 +74,8 @@
           </div>
           <!-- Attention Score Badge -->
           <div
-            class="attn-badge"
             v-if="hoverIndex !== -1 && hoverIndex !== index"
+            class="attn-badge"
             :style="{
               opacity: Math.max(0.3, getAttentionScore(hoverIndex, index))
             }"
@@ -80,11 +87,17 @@
 
       <!-- Info Panel -->
       <div class="info-panel">
-        <div v-if="hoverIndex === -1" class="placeholder-text">
+        <div
+          v-if="hoverIndex === -1"
+          class="placeholder-text"
+        >
           <span class="cursor-icon">👆</span>
-          把鼠标悬停在任意方块上，<br />观察它在"关注"谁
+          把鼠标悬停在任意方块上，<br>观察它在"关注"谁
         </div>
-        <div v-else class="active-info">
+        <div
+          v-else
+          class="active-info"
+        >
           <div class="source-info">
             <span class="label">当前 Patch:</span>
             <div class="patch-tag">
@@ -93,11 +106,13 @@
           </div>
 
           <div class="attn-list">
-            <div class="list-header">Attention Weights (注意力权重)</div>
+            <div class="list-header">
+              Attention Weights (注意力权重)
+            </div>
             <div
-              class="attn-item"
               v-for="(score, idx) in getTopAttentions(hoverIndex)"
               :key="idx"
+              class="attn-item"
             >
               <div class="item-left">
                 <span class="item-icon">{{ items[idx].icon }}</span>
@@ -108,7 +123,7 @@
                   <div
                     class="progress-fill"
                     :style="{ width: score * 100 + '%' }"
-                  ></div>
+                  />
                 </div>
                 <span class="score-text">{{ (score * 100).toFixed(0) }}%</span>
               </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/FeatureAlignmentDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/FeatureAlignmentDemo.vue
index 9c0c29a..af83f0f 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/FeatureAlignmentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/FeatureAlignmentDemo.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="desc">
         目标：让 Projector 学会“翻译”图像语言。
-        <br />做法：冻结 ViT 和 LLM，只训练 Projector。
+        <br>做法：冻结 ViT 和 LLM，只训练 Projector。
       </div>
     </div>
 
@@ -14,77 +14,131 @@
       <!-- Data Input -->
       <div class="data-column">
         <div class="data-item image-data">
-          <div class="data-icon">🖼️</div>
-          <div class="data-label">图片<br />(猫)</div>
+          <div class="data-icon">
+            🖼️
+          </div>
+          <div class="data-label">
+            图片<br>(猫)
+          </div>
         </div>
         <div class="data-item text-data">
-          <div class="data-icon">📝</div>
-          <div class="data-label">标题<br />("一只猫")</div>
+          <div class="data-icon">
+            📝
+          </div>
+          <div class="data-label">
+            标题<br>("一只猫")
+          </div>
         </div>
       </div>
 
       <!-- Arrow Column -->
       <div class="arrow-column">
-        <div class="arrow">➜</div>
-        <div class="arrow">➜</div>
+        <div class="arrow">
+          ➜
+        </div>
+        <div class="arrow">
+          ➜
+        </div>
       </div>
 
       <!-- Model Column -->
       <div class="model-column">
         <!-- Vision Branch -->
         <div class="model-block frozen">
-          <div class="status-badge">❄️ 冻结</div>
-          <div class="block-icon">👁️</div>
-          <div class="block-name">ViT</div>
+          <div class="status-badge">
+            ❄️ 冻结
+          </div>
+          <div class="block-icon">
+            👁️
+          </div>
+          <div class="block-name">
+            ViT
+          </div>
         </div>
 
-        <div class="arrow-small">➜</div>
+        <div class="arrow-small">
+          ➜
+        </div>
 
         <div class="model-block training">
-          <div class="status-badge fire">🔥 训练</div>
-          <div class="block-icon">🔌</div>
-          <div class="block-name">Projector</div>
+          <div class="status-badge fire">
+            🔥 训练
+          </div>
+          <div class="block-icon">
+            🔌
+          </div>
+          <div class="block-name">
+            Projector
+          </div>
         </div>
 
         <!-- Text Branch -->
         <div class="model-block frozen text-model">
-          <div class="status-badge">❄️ 冻结</div>
-          <div class="block-icon">🧠</div>
-          <div class="block-name">LLM</div>
+          <div class="status-badge">
+            ❄️ 冻结
+          </div>
+          <div class="block-icon">
+            🧠
+          </div>
+          <div class="block-name">
+            LLM
+          </div>
         </div>
       </div>
 
       <!-- Arrow Column -->
       <div class="arrow-column">
-        <div class="arrow">➜</div>
-        <div class="arrow">➜</div>
+        <div class="arrow">
+          ➜
+        </div>
+        <div class="arrow">
+          ➜
+        </div>
       </div>
 
       <!-- Vector Output -->
       <div class="vector-column">
         <div class="vector-item v-vector">
-          <div class="vector-icon">🟢</div>
-          <div class="vector-label">向量 V</div>
+          <div class="vector-icon">
+            🟢
+          </div>
+          <div class="vector-label">
+            向量 V
+          </div>
         </div>
 
         <div class="loss-connection">
-          <div class="loss-line"></div>
-          <div class="loss-box" :class="{ active: isCalculatingLoss }">
-            <div class="loss-label">Loss</div>
-            <div class="loss-desc">V ≈ T</div>
+          <div class="loss-line" />
+          <div
+            class="loss-box"
+            :class="{ active: isCalculatingLoss }"
+          >
+            <div class="loss-label">
+              Loss
+            </div>
+            <div class="loss-desc">
+              V ≈ T
+            </div>
           </div>
-          <div class="loss-line"></div>
+          <div class="loss-line" />
         </div>
 
         <div class="vector-item t-vector">
-          <div class="vector-icon">🔵</div>
-          <div class="vector-label">向量 T</div>
+          <div class="vector-icon">
+            🔵
+          </div>
+          <div class="vector-label">
+            向量 T
+          </div>
         </div>
       </div>
     </div>
 
     <div class="controls">
-      <button class="play-btn" @click="nextStep">
+      <button
+        class="play-btn"
+        @click="nextStep"
+      >
         {{ buttonText }}
       </button>
       <div class="step-desc">
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/LinearProjectionDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/LinearProjectionDemo.vue
index d0411d6..8d66fcb 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/LinearProjectionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/LinearProjectionDemo.vue
@@ -3,44 +3,66 @@
     <div class="demo-container">
       <!-- Step 1: Patch -->
       <div class="step-box">
-        <div class="label">1. Patch (16×16×3) (示意 / Toy)</div>
+        <div class="label">
+          1. Patch (16×16×3) (示意 / Toy)
+        </div>
         <div class="grid-patch">
           <div
             v-for="n in patchCellCount"
             :key="n"
             class="pixel"
             :style="{ backgroundColor: getPixelColor(n) }"
-          ></div>
+          />
+        </div>
+        <div class="desc">
+          16×16 像素 × 3 通道 = 768 标量值
         </div>
-        <div class="desc">16×16 像素 × 3 通道 = 768 标量值</div>
       </div>
 
-      <div class="arrow">➜</div>
+      <div class="arrow">
+        ➜
+      </div>
 
       <!-- Step 2: Flattened -->
       <div class="step-box">
-        <div class="label">2. Flatten</div>
+        <div class="label">
+          2. Flatten
+        </div>
         <div class="vector-container">
           <div
             v-for="n in flattenSampleCount"
             :key="n"
             class="vector-cell"
             :style="{ backgroundColor: getPixelColor(n) }"
-          ></div>
-          <div class="vector-ellipsis">…</div>
+          />
+          <div class="vector-ellipsis">
+            …
+          </div>
+        </div>
+        <div class="desc">
+          得到 1×768 向量 (Vector)
         </div>
-        <div class="desc">得到 1×768 向量 (Vector)</div>
       </div>
 
-      <div class="arrow">× W</div>
+      <div class="arrow">
+        × W
+      </div>
 
       <!-- Step 3: Projected -->
       <div class="step-box">
-        <div class="label">3. Embedding</div>
-        <div class="embedding-container">
-          <div v-for="n in 8" :key="n" class="embed-cell"></div>
+        <div class="label">
+          3. Embedding
+        </div>
+        <div class="embedding-container">
+          <div
+            v-for="n in 8"
+            :key="n"
+            class="embed-cell"
+          />
+        </div>
+        <div class="desc">
+          映射到 D 维 (示意 D=8；常见 D=768)
         </div>
-        <div class="desc">映射到 D 维 (示意 D=8；常见 D=768)</div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue
index afa911e..13af6a4 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/ModelArchitectureComparisonDemo.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="model-evolution-demo">
     <div class="controls-header">
-      <div class="toggle-container" @click="toggleMode">
-        <div class="toggle-track" :class="{ active: isVLM }">
+      <div
+        class="toggle-container"
+        @click="toggleMode"
+      >
+        <div
+          class="toggle-track"
+          :class="{ active: isVLM }"
+        >
           <div class="toggle-thumb">
             {{ isVLM ? '👁️' : '🧠' }}
           </div>
@@ -24,8 +30,13 @@
 
     <div class="diagram-stage">
       <div class="lanes">
-        <div class="lane lane-vision" v-show="isVLM">
-          <div class="lane-title">Vision Path (视觉路径)</div>
+        <div
+          v-show="isVLM"
+          class="lane lane-vision"
+        >
+          <div class="lane-title">
+            Vision Path (视觉路径)
+          </div>
           <div class="lane-flow">
             <div class="node input-node">
               <span class="icon">🖼️</span>
@@ -43,7 +54,9 @@
             </div>
             <span class="mini-arrow">→</span>
             <div class="token-box token-box-vision">
-              <div class="token-box-title">Vision Tokens (视觉 Token)</div>
+              <div class="token-box-title">
+                Vision Tokens (视觉 Token)
+              </div>
               <div class="tokens">
                 <span class="token vision">v1</span>
                 <span class="token vision">v2</span>
@@ -55,7 +68,9 @@
         </div>
 
         <div class="lane lane-text">
-          <div class="lane-title">Text Path (文字路径)</div>
+          <div class="lane-title">
+            Text Path (文字路径)
+          </div>
           <div class="lane-flow">
             <div class="node input-node">
               <span class="icon">⌨️</span>
@@ -68,7 +83,9 @@
             </div>
             <span class="mini-arrow">→</span>
             <div class="token-box">
-              <div class="token-box-title">Text Tokens (文字 Token)</div>
+              <div class="token-box-title">
+                Text Tokens (文字 Token)
+              </div>
               <div class="tokens">
                 <span class="token text">t1</span>
                 <span class="token text">t2</span>
@@ -80,9 +97,14 @@
         </div>
 
         <div class="merge-stage">
-          <div class="merge-title">Token Sequence (输入序列)</div>
+          <div class="merge-title">
+            Token Sequence (输入序列)
+          </div>
           <div class="sequence">
-            <div v-if="isVLM" class="sequence-row">
+            <div
+              v-if="isVLM"
+              class="sequence-row"
+            >
               <span class="sequence-tag vision">Vision (视觉)</span>
               <div class="tokens">
                 <span class="token vision">v1</span>
@@ -101,10 +123,8 @@
               </div>
             </div>
             <div class="sequence-hint">
-              <span v-if="isVLM"
-                >Concat: [Vision Tokens] + [Text Tokens]
-                (拼接：视觉在前，文字在后)</span
-              >
+              <span v-if="isVLM">Concat: [Vision Tokens] + [Text Tokens]
+                (拼接：视觉在前，文字在后)</span>
               <span v-else>Only [Text Tokens] (只有文字 Token)</span>
             </div>
           </div>
@@ -126,12 +146,23 @@
     </div>
 
     <div class="interactive-info">
-      <transition name="fade" mode="out-in">
-        <div class="info-card" v-if="!isVLM" key="llm">
+      <transition
+        name="fade"
+        mode="out-in"
+      >
+        <div
+          v-if="!isVLM"
+          key="llm"
+          class="info-card"
+        >
           <h3>Standard LLM Flow (标准大模型流程)</h3>
           <p>Prompt → Embedding → Token Sequence → LLM → Response。</p>
         </div>
-        <div class="info-card vlm-info" v-else key="vlm">
+        <div
+          v-else
+          key="vlm"
+          class="info-card vlm-info"
+        >
           <h3>VLM = LLM + Vision Encoder (视觉大模型原理)</h3>
           <ul>
             <li><strong>ViT (The Eye):</strong> 把图片编码成视觉特征。</li>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue
index 95da11d..88f434c 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/PatchifyDemo.vue
@@ -8,16 +8,16 @@
       <div class="controls">
         <button
           class="action-btn"
-          @click="prevStep"
           :disabled="currentStep === 0"
+          @click="prevStep"
         >
           ⬅ 上一步 (Prev)
         </button>
         <span class="step-indicator">Step {{ currentStep + 1 }} / 4</span>
         <button
           class="action-btn primary"
-          @click="nextStep"
           :disabled="currentStep === 3"
+          @click="nextStep"
         >
           {{ currentStep === 3 ? '完成 (Done)' : '下一步 (Next) ➡' }}
         </button>
@@ -41,21 +41,43 @@
           'is-patchified': currentStep >= 2
         }"
       >
-        <div class="grid-overlay" v-if="currentStep === 1"></div>
-        <div v-for="n in 196" :key="n" class="patch" :style="getPatchStyle(n)">
+        <div
+          v-if="currentStep === 1"
+          class="grid-overlay"
+        />
+        <div
+          v-for="n in 196"
+          :key="n"
+          class="patch"
+          :style="getPatchStyle(n)"
+        >
           <!-- Show number only in Pixelated stage to represent 'digitization' -->
-          <span class="pixel-val" v-if="currentStep === 1">{{
+          <span
+            v-if="currentStep === 1"
+            class="pixel-val"
+          >{{
             Math.floor(Math.random() * 9)
           }}</span>
           <!-- Show ID in Patchified stage -->
-          <span class="patch-id" v-if="currentStep >= 2">{{ n }}</span>
+          <span
+            v-if="currentStep >= 2"
+            class="patch-id"
+          >{{ n }}</span>
         </div>
       </div>
 
-      <div class="arrow-down" v-if="currentStep >= 3">⬇</div>
+      <div
+        v-if="currentStep >= 3"
+        class="arrow-down"
+      >
+        ⬇
+      </div>
 
       <!-- 线性序列视图 -->
-      <div class="sequence-container" v-if="currentStep >= 3">
+      <div
+        v-if="currentStep >= 3"
+        class="sequence-container"
+      >
         <div class="sequence-label">
           Token Sequence: 196×D (每个 Token 是 D 维向量)
         </div>
@@ -65,7 +87,7 @@
             :key="n"
             class="mini-patch"
             :style="getMiniPatchStyle(n)"
-          ></div>
+          />
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/PositionalEmbeddingDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/PositionalEmbeddingDemo.vue
index 4d46398..1ef96e6 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/PositionalEmbeddingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/PositionalEmbeddingDemo.vue
@@ -3,31 +3,56 @@
     <div class="demo-row">
       <!-- Input Feature -->
       <div class="grid-wrapper">
-        <div class="grid-title">Feature Vectors</div>
+        <div class="grid-title">
+          Feature Vectors
+        </div>
         <div class="grid-box feature-grid">
-          <div v-for="n in 9" :key="'f' + n" class="cell feature-cell">V</div>
+          <div
+            v-for="n in 9"
+            :key="'f' + n"
+            class="cell feature-cell"
+          >
+            V
+          </div>
         </div>
       </div>
 
-      <div class="op">+</div>
+      <div class="op">
+        +
+      </div>
 
       <!-- Positional Embedding -->
       <div class="grid-wrapper">
-        <div class="grid-title">Position Embeddings</div>
+        <div class="grid-title">
+          Position Embeddings
+        </div>
         <div class="grid-box pos-grid">
-          <div v-for="n in 9" :key="'p' + n" class="cell pos-cell">{{ n }}</div>
+          <div
+            v-for="n in 9"
+            :key="'p' + n"
+            class="cell pos-cell"
+          >
+            {{ n }}
+          </div>
         </div>
       </div>
 
-      <div class="op">=</div>
+      <div class="op">
+        =
+      </div>
 
       <!-- Result -->
       <div class="grid-wrapper">
-        <div class="grid-title">Input to Transformer</div>
+        <div class="grid-title">
+          Input to Transformer
+        </div>
         <div class="grid-box result-grid">
-          <div v-for="n in 9" :key="'r' + n" class="cell result-cell">
-            <span class="v">V</span><span class="plus">+</span
-            ><span class="p">{{ n }}</span>
+          <div
+            v-for="n in 9"
+            :key="'r' + n"
+            class="cell result-cell"
+          >
+            <span class="v">V</span><span class="plus">+</span><span class="p">{{ n }}</span>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/ProjectorDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/ProjectorDemo.vue
index 96ed8a3..3031495 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/ProjectorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/ProjectorDemo.vue
@@ -5,10 +5,16 @@
 <template>
   <div class="projector-demo">
     <div class="mode-switch">
-      <button :class="{ active: mode === 'linear' }" @click="mode = 'linear'">
+      <button
+        :class="{ active: mode === 'linear' }"
+        @click="mode = 'linear'"
+      >
         Linear (LLaVA)
       </button>
-      <button :class="{ active: mode === 'qformer' }" @click="mode = 'qformer'">
+      <button
+        :class="{ active: mode === 'qformer' }"
+        @click="mode = 'qformer'"
+      >
         Q-Former (BLIP-2)
       </button>
     </div>
@@ -16,9 +22,15 @@
     <div class="pipeline">
       <!-- Input: Visual Tokens -->
       <div class="stage">
-        <div class="label">Visual Tokens (ViT)</div>
+        <div class="label">
+          Visual Tokens (ViT)
+        </div>
         <div class="token-container input">
-          <div v-for="n in 16" :key="n" class="token visual"></div>
+          <div
+            v-for="n in 16"
+            :key="n"
+            class="token visual"
+          />
         </div>
         <div class="count">
           {{ mode === 'linear' ? '256 Tokens' : '256 Tokens' }}
@@ -27,32 +39,40 @@
 
       <!-- Process: The Projector -->
       <div class="stage connector">
-        <div class="arrow-line"></div>
-        <div class="projector-box" :class="mode">
+        <div class="arrow-line" />
+        <div
+          class="projector-box"
+          :class="mode"
+        >
           <div class="title">
             {{ mode === 'linear' ? 'Linear Layer' : 'Q-Former' }}
           </div>
           <div class="desc">
             {{ mode === 'linear' ? '直接映射 (1:1)' : '查询提取 (N:M)' }}
           </div>
-          <div class="animation-dots" v-if="mode === 'qformer'">
-            <div class="dot"></div>
-            <div class="dot"></div>
-            <div class="dot"></div>
+          <div
+            v-if="mode === 'qformer'"
+            class="animation-dots"
+          >
+            <div class="dot" />
+            <div class="dot" />
+            <div class="dot" />
           </div>
         </div>
-        <div class="arrow-line"></div>
+        <div class="arrow-line" />
       </div>
 
       <!-- Output: LLM Tokens -->
       <div class="stage">
-        <div class="label">LLM Tokens</div>
+        <div class="label">
+          LLM Tokens
+        </div>
         <div class="token-container output">
           <div
             v-for="n in mode === 'linear' ? 16 : 4"
             :key="n"
             class="token llm"
-          ></div>
+          />
         </div>
         <div class="count">
           {{
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/TrainingPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/TrainingPipelineDemo.vue
index 2a673eb..b42a6f0 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/TrainingPipelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/TrainingPipelineDemo.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="pipeline-demo">
     <div class="stage-switch">
-      <button :class="{ active: stage === 1 }" @click="stage = 1">
+      <button
+        :class="{ active: stage === 1 }"
+        @click="stage = 1"
+      >
         阶段一：特征对齐
       </button>
-      <button :class="{ active: stage === 2 }" @click="stage = 2">
+      <button
+        :class="{ active: stage === 2 }"
+        @click="stage = 2"
+      >
         阶段二：指令微调
       </button>
     </div>
@@ -12,29 +18,57 @@
     <div class="pipeline-visual">
       <!-- Image Input -->
       <div class="component-box image-input">
-        <div class="icon">🖼️</div>
-        <div class="name">Image</div>
+        <div class="icon">
+          🖼️
+        </div>
+        <div class="name">
+          Image
+        </div>
       </div>
 
-      <div class="arrow">➜</div>
+      <div class="arrow">
+        ➜
+      </div>
 
       <!-- Vision Encoder -->
-      <div class="component-box encoder" :class="{ frozen: true }">
-        <div class="status-badge">❄️ Frozen</div>
-        <div class="name">ViT</div>
-        <div class="desc">Vision Encoder</div>
+      <div
+        class="component-box encoder"
+        :class="{ frozen: true }"
+      >
+        <div class="status-badge">
+          ❄️ Frozen
+        </div>
+        <div class="name">
+          ViT
+        </div>
+        <div class="desc">
+          Vision Encoder
+        </div>
       </div>
 
-      <div class="arrow">➜</div>
+      <div class="arrow">
+        ➜
+      </div>
 
       <!-- Projector -->
-      <div class="component-box projector" :class="{ training: true }">
-        <div class="status-badge fire">🔥 Train</div>
-        <div class="name">Projector</div>
-        <div class="desc">Adapter</div>
+      <div
+        class="component-box projector"
+        :class="{ training: true }"
+      >
+        <div class="status-badge fire">
+          🔥 Train
+        </div>
+        <div class="name">
+          Projector
+        </div>
+        <div class="desc">
+          Adapter
+        </div>
       </div>
 
-      <div class="arrow">➜</div>
+      <div class="arrow">
+        ➜
+      </div>
 
       <!-- LLM -->
       <div
@@ -44,32 +78,64 @@
         <div class="status-badge">
           {{ stage === 1 ? '❄️ Frozen' : '🔥 Train' }}
         </div>
-        <div class="name">LLM</div>
-        <div class="desc">Language Model</div>
+        <div class="name">
+          LLM
+        </div>
+        <div class="desc">
+          Language Model
+        </div>
       </div>
 
-      <div class="arrow">➜</div>
+      <div class="arrow">
+        ➜
+      </div>
 
       <!-- Output / Loss -->
       <div class="component-box output">
-        <div class="name" v-if="stage === 1">Loss Calculation</div>
-        <div class="name" v-else>Text Generation</div>
-        <div class="desc" v-if="stage === 1">Contrastive Loss</div>
-        <div class="desc" v-else>Next Token Prediction</div>
+        <div
+          v-if="stage === 1"
+          class="name"
+        >
+          Loss Calculation
+        </div>
+        <div
+          v-else
+          class="name"
+        >
+          Text Generation
+        </div>
+        <div
+          v-if="stage === 1"
+          class="desc"
+        >
+          Contrastive Loss
+        </div>
+        <div
+          v-else
+          class="desc"
+        >
+          Next Token Prediction
+        </div>
       </div>
     </div>
 
     <div class="data-example">
-      <div class="data-title">当前训练数据示例：</div>
-      <div class="data-content" v-if="stage === 1">
+      <div class="data-title">
+        当前训练数据示例：
+      </div>
+      <div
+        v-if="stage === 1"
+        class="data-content"
+      >
         <code>&lt;Image: 🐱&gt;, &lt;Text: "一只猫"&gt;</code>
         <p>任务：让图像向量与文本向量距离变近。</p>
       </div>
-      <div class="data-content" v-else>
-        <code
-          >User: &lt;Image: 🐱&gt; 这只猫在干嘛？<br />Assistant:
-          它在睡觉。</code
-        >
+      <div
+        v-else
+        class="data-content"
+      >
+        <code>User: &lt;Image: 🐱&gt; 这只猫在干嘛？<br>Assistant:
+          它在睡觉。</code>
         <p>任务：根据图像和问题生成回答。</p>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/VLMInferenceDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/VLMInferenceDemo.vue
index ec4e55a..566571c 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/VLMInferenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/VLMInferenceDemo.vue
@@ -9,26 +9,46 @@
       <div class="messages">
         <!-- User Message -->
         <div class="message user">
-          <div class="avatar">👤</div>
+          <div class="avatar">
+            👤
+          </div>
           <div class="bubble">
             <div class="image-upload">
-              <div class="placeholder-img">🐱</div>
+              <div class="placeholder-img">
+                🐱
+              </div>
+            </div>
+            <div class="text">
+              这只猫在做什么？
             </div>
-            <div class="text">这只猫在做什么？</div>
           </div>
         </div>
 
         <!-- Assistant Message -->
-        <div class="message assistant" v-if="step > 0">
-          <div class="avatar">🤖</div>
+        <div
+          v-if="step > 0"
+          class="message assistant"
+        >
+          <div class="avatar">
+            🤖
+          </div>
           <div class="bubble">
-            <div v-if="step === 1" class="thinking">
+            <div
+              v-if="step === 1"
+              class="thinking"
+            >
               <span class="icon">👁️</span> 正在观察图片...
             </div>
-            <div v-else-if="step === 2" class="thinking">
+            <div
+              v-else-if="step === 2"
+              class="thinking"
+            >
               <span class="icon">🧠</span> 正在思考...
             </div>
-            <div v-else class="content type-writer">
+            <div
+              v-else
+              class="content type-writer"
+            >
               {{ typedText }}<span class="cursor">|</span>
             </div>
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/ViTOutputDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/ViTOutputDemo.vue
index e7defe9..d016cb5 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/ViTOutputDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/ViTOutputDemo.vue
@@ -20,7 +20,7 @@
       </div>
 
       <div class="arrow-section">
-        <div class="arrow-line"></div>
+        <div class="arrow-line" />
         <div class="arrow-text">
           Reshape for View: Grid ⇄ Sequence (重排显示：网格⇄序列)
         </div>
@@ -28,7 +28,9 @@
 
       <!-- 2. Feature Vector Sequence -->
       <div class="stage">
-        <div class="stage-label">2. Output Token Sequence (N×D) (输出序列)</div>
+        <div class="stage-label">
+          2. Output Token Sequence (N×D) (输出序列)
+        </div>
         <div class="vector-sequence">
           <div
             v-for="(item, index) in items"
@@ -42,25 +44,27 @@
               <div
                 class="v-cell"
                 :style="{ opacity: 0.9, background: item.color }"
-              ></div>
+              />
               <div
                 class="v-cell"
                 :style="{ opacity: 0.7, background: item.color }"
-              ></div>
+              />
               <div
                 class="v-cell"
                 :style="{ opacity: 0.5, background: item.color }"
-              ></div>
+              />
               <div
                 class="v-cell"
                 :style="{ opacity: 0.8, background: item.color }"
-              ></div>
+              />
               <div
                 class="v-cell"
                 :style="{ opacity: 0.6, background: item.color }"
-              ></div>
+              />
+            </div>
+            <div class="vector-idx">
+              {{ index + 1 }}
             </div>
-            <div class="vector-idx">{{ index + 1 }}</div>
           </div>
         </div>
       </div>
@@ -68,21 +72,28 @@
 
     <!-- 3. Semantic Panel -->
     <div class="semantic-panel">
-      <div v-if="activeIndex !== -1" class="semantic-content">
-        <div class="header" :style="{ borderColor: items[activeIndex].color }">
+      <div
+        v-if="activeIndex !== -1"
+        class="semantic-content"
+      >
+        <div
+          class="header"
+          :style="{ borderColor: items[activeIndex].color }"
+        >
           <span class="large-icon">{{ items[activeIndex].icon }}</span>
           <div class="title-group">
-            <span class="title"
-              >Token #{{ activeIndex + 1 }}:
-              {{ items[activeIndex].label }}</span
-            >
+            <span class="title">Token #{{ activeIndex + 1 }}:
+              {{ items[activeIndex].label }}</span>
             <span class="subtitle">Type: {{ items[activeIndex].type }}</span>
           </div>
         </div>
         <div class="desc">
           <div class="vector-repr">
             <span class="label">Vector Value:</span>
-            <span class="code" :style="{ color: items[activeIndex].color }">
+            <span
+              class="code"
+              :style="{ color: items[activeIndex].color }"
+            >
               [0.{{ (Math.random() * 99).toFixed(0) }}, -0.{{
                 (Math.random() * 99).toFixed(0)
               }}, 1.{{ (Math.random() * 99).toFixed(0) }}, ...]
@@ -94,11 +105,12 @@
           </div>
         </div>
       </div>
-      <div v-else class="placeholder">
+      <div
+        v-else
+        class="placeholder"
+      >
         <span class="hint-icon">👆</span>
-        <span class="hint-text"
-          >悬停在上方方块或向量上，查看 ViT 输出的“语义特征”</span
-        >
+        <span class="hint-text">悬停在上方方块或向量上，查看 ViT 输出的“语义特征”</span>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/vlm-intro/VlmQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/vlm-intro/VlmQuickStartDemo.vue
index d60cab8..9878b42 100644
--- a/docs/.vitepress/theme/components/appendix/vlm-intro/VlmQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/vlm-intro/VlmQuickStartDemo.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="vlm-quick-start">
     <div class="header">
-      <div class="title">👁️ VLM 初体验：不只是看图说话</div>
-      <div class="subtitle">选择不同场景，体验多模态模型的多种能力。</div>
+      <div class="title">
+        👁️ VLM 初体验：不只是看图说话
+      </div>
+      <div class="subtitle">
+        选择不同场景，体验多模态模型的多种能力。
+      </div>
     </div>
 
     <div class="scenario-tabs">
@@ -24,22 +28,39 @@
           class="image-placeholder"
           :class="{ loaded: hasImage, 'receipt-bg': currentScenario === 'ocr' }"
         >
-          <div v-if="!hasImage" class="upload-prompt">
-            <div class="icon">🖼️</div>
-            <button class="upload-btn" @click="loadImage">
+          <div
+            v-if="!hasImage"
+            class="upload-prompt"
+          >
+            <div class="icon">
+              🖼️
+            </div>
+            <button
+              class="upload-btn"
+              @click="loadImage"
+            >
               上传图片 (模拟)
             </button>
           </div>
 
-          <div v-else class="image-content">
+          <div
+            v-else
+            class="image-content"
+          >
             <!-- Chat: Landscape -->
             <div
               v-if="currentScenario === 'chat'"
               class="real-image-container landscape"
             >
-              <div class="real-image">🏔️</div>
-              <div class="sun">☀️</div>
-              <div class="tree">🌲</div>
+              <div class="real-image">
+                🏔️
+              </div>
+              <div class="sun">
+                ☀️
+              </div>
+              <div class="tree">
+                🌲
+              </div>
             </div>
 
             <!-- Detection: Fruits -->
@@ -73,24 +94,42 @@
               v-else-if="currentScenario === 'analysis'"
               class="factory-image"
             >
-              <div class="safety-sign">⚠️ 安全生产</div>
+              <div class="safety-sign">
+                ⚠️ 安全生产
+              </div>
               <div class="worker-container">
                 <span class="worker">👷</span>
-                <span class="helmet" v-if="true">⛑️</span>
+                <span
+                  v-if="true"
+                  class="helmet"
+                >⛑️</span>
+              </div>
+              <div class="machinery">
+                ⚙️
               </div>
-              <div class="machinery">⚙️</div>
             </div>
 
             <!-- OCR: Receipt -->
-            <div v-else class="receipt-image">
-              <div class="receipt-header">🧾 RECEIPT</div>
+            <div
+              v-else
+              class="receipt-image"
+            >
+              <div class="receipt-header">
+                🧾 RECEIPT
+              </div>
               <div class="receipt-body">
-                <div class="line"><span>Coffee</span><span>$4.50</span></div>
-                <div class="line"><span>Bagel</span><span>$3.00</span></div>
+                <div class="line">
+                  <span>Coffee</span><span>$4.50</span>
+                </div>
+                <div class="line">
+                  <span>Bagel</span><span>$3.00</span>
+                </div>
                 <div class="line total">
                   <span>TOTAL</span><span>$7.50</span>
                 </div>
-                <div class="line date"><span>2023-10-24</span></div>
+                <div class="line date">
+                  <span>2023-10-24</span>
+                </div>
               </div>
             </div>
 
@@ -103,8 +142,14 @@
 
       <!-- Chat Area -->
       <div class="chat-area">
-        <div class="messages" ref="messagesRef">
-          <div v-if="messages.length === 0" class="empty-text">
+        <div
+          ref="messagesRef"
+          class="messages"
+        >
+          <div
+            v-if="messages.length === 0"
+            class="empty-text"
+          >
             {{ hasImage ? '图片已就绪，请选择指令' : '请先上传图片' }}
           </div>
           <div
@@ -114,38 +159,51 @@
             :class="msg.role"
           >
             <div class="content">
-              <div v-if="msg.isJson" class="json-content">
+              <div
+                v-if="msg.isJson"
+                class="json-content"
+              >
                 <pre>{{ msg.content }}</pre>
               </div>
               <span v-else>{{ msg.content }}</span>
               <span
                 v-if="
                   msg.role === 'assistant' &&
-                  isGenerating &&
-                  index === messages.length - 1
+                    isGenerating &&
+                    index === messages.length - 1
                 "
                 class="cursor"
-                >|</span
-              >
+              >|</span>
             </div>
           </div>
         </div>
 
         <div class="input-area">
-          <div class="quick-actions" v-if="hasImage && !isGenerating">
+          <div
+            v-if="hasImage && !isGenerating"
+            class="quick-actions"
+          >
             <button
               v-for="q in currentQuestions"
               :key="q"
-              @click="ask(q)"
               class="action-btn"
+              @click="ask(q)"
             >
               {{ q }}
             </button>
           </div>
-          <div class="status-text" v-else-if="isGenerating">
+          <div
+            v-else-if="isGenerating"
+            class="status-text"
+          >
             AI 正在观察图片并思考...
           </div>
-          <div class="status-text" v-else>等待图片上传...</div>
+          <div
+            v-else
+            class="status-text"
+          >
+            等待图片上传...
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
index 7ba11c7..653b97a 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
@@ -22,23 +22,41 @@
 
       <div class="cards">
         <div class="card">
-          <div class="label">运行环境</div>
-          <div class="value">{{ currentData.runtime }}</div>
+          <div class="label">
+            运行环境
+          </div>
+          <div class="value">
+            {{ currentData.runtime }}
+          </div>
         </div>
         <div class="card">
-          <div class="label">主要技术</div>
-          <div class="value">{{ currentData.stack }}</div>
+          <div class="label">
+            主要技术
+          </div>
+          <div class="value">
+            {{ currentData.stack }}
+          </div>
         </div>
         <div class="card">
-          <div class="label">发布方式</div>
-          <div class="value">{{ currentData.release }}</div>
+          <div class="label">
+            发布方式
+          </div>
+          <div class="value">
+            {{ currentData.release }}
+          </div>
         </div>
       </div>
 
       <div class="skills">
-        <div class="skills-title">哪些能力是"共通的"？</div>
+        <div class="skills-title">
+          哪些能力是"共通的"？
+        </div>
         <div class="tags">
-          <span v-for="t in commonSkills.slice(0, 6)" :key="t" class="tag">{{ t }}</span>
+          <span
+            v-for="t in commonSkills.slice(0, 6)"
+            :key="t"
+            class="tag"
+          >{{ t }}</span>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
index 0a5f8b4..8c527b8 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/BrowserRenderingDemo.vue
@@ -25,7 +25,9 @@
       <div class="visualization-window">
         <!-- HTML/CSS Source -->
         <div class="source-view">
-          <div class="window-title">积木说明书 (HTML/CSS)</div>
+          <div class="window-title">
+            积木说明书 (HTML/CSS)
+          </div>
           <div class="code-content">
             <!-- HTML Highlighted always after Step 0 -->
             <div
@@ -139,7 +141,7 @@
               &lt;/html&gt;
             </div>
 
-            <div class="spacer"></div>
+            <div class="spacer" />
 
             <!-- CSS Highlighted precisely based on step usage -->
             <!-- Layout properties -->
@@ -191,11 +193,15 @@
           </div>
         </div>
 
-        <div class="transform-arrow">→</div>
+        <div class="transform-arrow">
+          →
+        </div>
 
         <!-- Render Result -->
         <div class="result-view">
-          <div class="window-title">{{ steps[currentStep].resultTitle }}</div>
+          <div class="window-title">
+            {{ steps[currentStep].resultTitle }}
+          </div>
 
           <div class="render-canvas">
             <!-- Step 1: DOM (Skeleton) -->
@@ -240,9 +246,10 @@
                       @mouseleave="hoveredPart = null"
                     >
                       <span class="block-label">img.icon</span>
-                      <span v-if="currentStep >= 3" class="content-img"
-                        >🏰</span
-                      >
+                      <span
+                        v-if="currentStep >= 3"
+                        class="content-img"
+                      >🏰</span>
                     </div>
 
                     <!-- Title -->
@@ -257,9 +264,10 @@
                       @mouseleave="hoveredPart = null"
                     >
                       <span class="block-label">h2.title</span>
-                      <span v-if="currentStep >= 3" class="content"
-                        >乐高城堡</span
-                      >
+                      <span
+                        v-if="currentStep >= 3"
+                        class="content"
+                      >乐高城堡</span>
                     </div>
 
                     <!-- Button -->
@@ -274,9 +282,10 @@
                       @mouseleave="hoveredPart = null"
                     >
                       <span class="block-label">button.btn</span>
-                      <span v-if="currentStep >= 3" class="content-btn"
-                        >购买</span
-                      >
+                      <span
+                        v-if="currentStep >= 3"
+                        class="content-btn"
+                      >购买</span>
                     </div>
                   </div>
                 </div>
@@ -284,16 +293,31 @@
             </transition-group>
 
             <!-- Overlays for different steps -->
-            <div v-if="currentStep === 1" class="overlay-info style-info">
-              <div class="brush">🖌️ 正在上色 (Style)...</div>
+            <div
+              v-if="currentStep === 1"
+              class="overlay-info style-info"
+            >
+              <div class="brush">
+                🖌️ 正在上色 (Style)...
+              </div>
             </div>
 
-            <div v-if="currentStep === 2" class="overlay-info layout-info">
-              <div class="ruler">📏 正在排版 (Layout)...</div>
+            <div
+              v-if="currentStep === 2"
+              class="overlay-info layout-info"
+            >
+              <div class="ruler">
+                📏 正在排版 (Layout)...
+              </div>
             </div>
 
-            <div v-if="currentStep === 3" class="overlay-info paint-info">
-              <div class="paint">✨ 绘制完成 (Paint)!</div>
+            <div
+              v-if="currentStep === 3"
+              class="overlay-info paint-info"
+            >
+              <div class="paint">
+                ✨ 绘制完成 (Paint)!
+              </div>
             </div>
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/BundlerSizeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/BundlerSizeDemo.vue
index ff743de..04444cc 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/BundlerSizeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/BundlerSizeDemo.vue
@@ -5,35 +5,60 @@
 <template>
   <div class="bundler-demo">
     <div class="header">
-      <div class="title">工程化：打包体积与构建时间</div>
-      <div class="subtitle">勾选功能，观察体积变化</div>
+      <div class="title">
+        工程化：打包体积与构建时间
+      </div>
+      <div class="subtitle">
+        勾选功能，观察体积变化
+      </div>
     </div>
 
     <div class="options">
-      <label v-for="item in features" :key="item.key" class="option">
-        <input type="checkbox" v-model="item.enabled" />
+      <label
+        v-for="item in features"
+        :key="item.key"
+        class="option"
+      >
+        <input
+          v-model="item.enabled"
+          type="checkbox"
+        >
         {{ item.label }} (+{{ item.size }} KB)
       </label>
     </div>
 
     <label class="toggle">
-      <input type="checkbox" v-model="treeShaking" />
+      <input
+        v-model="treeShaking"
+        type="checkbox"
+      >
       开启 Tree Shaking (移除未使用代码)
     </label>
 
     <div class="stats">
       <div class="stat-card">
-        <div class="label">Bundle Size</div>
-        <div class="value">{{ bundleSize }} KB</div>
+        <div class="label">
+          Bundle Size
+        </div>
+        <div class="value">
+          {{ bundleSize }} KB
+        </div>
       </div>
       <div class="stat-card">
-        <div class="label">Build Time</div>
-        <div class="value">{{ buildTime }} s</div>
+        <div class="label">
+          Build Time
+        </div>
+        <div class="value">
+          {{ buildTime }} s
+        </div>
       </div>
     </div>
 
     <div class="bar">
-      <div class="progress" :style="{ width: barWidth + '%' }"></div>
+      <div
+        class="progress"
+        :style="{ width: barWidth + '%' }"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/ComponentReusabilityDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/ComponentReusabilityDemo.vue
index b7f1848..7e46758 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/ComponentReusabilityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/ComponentReusabilityDemo.vue
@@ -1,15 +1,27 @@
 <template>
   <div class="component-reusability-demo">
     <div class="toolbox">
-      <div class="tool-title">Component Library</div>
-      <button class="spawn-btn" @click="spawn('counter')">
+      <div class="tool-title">
+        Component Library
+      </div>
+      <button
+        class="spawn-btn"
+        @click="spawn('counter')"
+      >
         ➕ New Counter
       </button>
-      <button class="spawn-btn" @click="spawn('card')">➕ New Card</button>
+      <button
+        class="spawn-btn"
+        @click="spawn('card')"
+      >
+        ➕ New Card
+      </button>
     </div>
 
     <div class="workspace">
-      <div class="workspace-label">App Workspace</div>
+      <div class="workspace-label">
+        App Workspace
+      </div>
       <div class="instances-container">
         <transition-group name="list">
           <div
@@ -18,26 +30,47 @@
             class="instance-wrapper"
           >
             <!-- Counter Component -->
-            <div v-if="item.type === 'counter'" class="comp-instance counter">
+            <div
+              v-if="item.type === 'counter'"
+              class="comp-instance counter"
+            >
               <div class="comp-header">
                 <span>Counter #{{ item.id }}</span>
-                <button class="close-btn" @click="remove(item.id)">×</button>
+                <button
+                  class="close-btn"
+                  @click="remove(item.id)"
+                >
+                  ×
+                </button>
               </div>
               <div class="comp-body">
                 <span class="count-val">{{ item.data.count }}</span>
-                <button class="mini-btn" @click="item.data.count++">+</button>
+                <button
+                  class="mini-btn"
+                  @click="item.data.count++"
+                >
+                  +
+                </button>
               </div>
             </div>
 
             <!-- Card Component -->
-            <div v-if="item.type === 'card'" class="comp-instance card">
+            <div
+              v-if="item.type === 'card'"
+              class="comp-instance card"
+            >
               <div class="comp-header">
                 <span>Card #{{ item.id }}</span>
-                <button class="close-btn" @click="remove(item.id)">×</button>
+                <button
+                  class="close-btn"
+                  @click="remove(item.id)"
+                >
+                  ×
+                </button>
               </div>
               <div class="comp-body">
-                <div class="skeleton-img"></div>
-                <div class="skeleton-text"></div>
+                <div class="skeleton-img" />
+                <div class="skeleton-text" />
                 <button
                   class="like-btn"
                   :class="{ liked: item.data.liked }"
@@ -49,9 +82,12 @@
             </div>
           </div>
         </transition-group>
-        <div v-if="instances.length === 0" class="empty-hint">
+        <div
+          v-if="instances.length === 0"
+          class="empty-hint"
+        >
           Click buttons above to add components.
-          <br />
+          <br>
           Notice how each one works independently!
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
index b04b877..2de05e7 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
@@ -14,22 +14,42 @@
         <div class="controls">
           <div class="control-row">
             <label>width</label>
-            <input type="range" min="60" max="150" v-model.number="contentW" />
+            <input
+              v-model.number="contentW"
+              type="range"
+              min="60"
+              max="150"
+            >
             <span class="val">{{ contentW }}px</span>
           </div>
           <div class="control-row">
             <label>padding</label>
-            <input type="range" min="0" max="30" v-model.number="padding" />
+            <input
+              v-model.number="padding"
+              type="range"
+              min="0"
+              max="30"
+            >
             <span class="val">{{ padding }}px</span>
           </div>
           <div class="control-row">
             <label>border</label>
-            <input type="range" min="0" max="15" v-model.number="border" />
+            <input
+              v-model.number="border"
+              type="range"
+              min="0"
+              max="15"
+            >
             <span class="val">{{ border }}px</span>
           </div>
           <div class="control-row">
             <label>margin</label>
-            <input type="range" min="0" max="20" v-model.number="margin" />
+            <input
+              v-model.number="margin"
+              type="range"
+              min="0"
+              max="20"
+            >
             <span class="val">{{ margin }}px</span>
           </div>
         </div>
@@ -51,13 +71,34 @@
         </div>
 
         <div class="visual">
-          <div class="layer margin" :style="{ padding: margin + 'px' }">
-            <span class="layer-label" v-if="margin >= 8">margin</span>
-            <div class="layer border" :style="{ borderWidth: border + 'px' }">
-              <span class="layer-label" v-if="border >= 5">border</span>
-              <div class="layer padding" :style="{ padding: padding + 'px' }">
-                <span class="layer-label" v-if="padding >= 8">padding</span>
-                <div class="content" :style="{ width: contentW + 'px' }">
+          <div
+            class="layer margin"
+            :style="{ padding: margin + 'px' }"
+          >
+            <span
+              v-if="margin >= 8"
+              class="layer-label"
+            >margin</span>
+            <div
+              class="layer border"
+              :style="{ borderWidth: border + 'px' }"
+            >
+              <span
+                v-if="border >= 5"
+                class="layer-label"
+              >border</span>
+              <div
+                class="layer padding"
+                :style="{ padding: padding + 'px' }"
+              >
+                <span
+                  v-if="padding >= 8"
+                  class="layer-label"
+                >padding</span>
+                <div
+                  class="content"
+                  :style="{ width: contentW + 'px' }"
+                >
                   content<br>{{ contentW }}px
                 </div>
               </div>
@@ -80,7 +121,10 @@
               {{ contentW }}px（已包含 padding 和 border） + {{ margin }}×2 = {{ total }}px
             </template>
           </div>
-          <div class="result-hint" :class="{ warning: total * 3 > 900 }">
+          <div
+            class="result-hint"
+            :class="{ warning: total * 3 > 900 }"
+          >
             <template v-if="total * 3 > 900">
               三个卡片需要 {{ total * 3 }}px，超出容器 900px，第三个会掉下去
             </template>
@@ -91,15 +135,31 @@
         </div>
 
         <div class="code-block">
-          <div class="code-title">CSS</div>
+          <div class="code-title">
+            CSS
+          </div>
           <div class="code-content">
-            <div class="line">.box {</div>
-            <div class="line hl">  box-sizing: {{ boxSizing }};</div>
-            <div class="line">  width: {{ contentW }}px;</div>
-            <div class="line">  padding: {{ padding }}px;</div>
-            <div class="line">  border: {{ border }}px solid #ccc;</div>
-            <div class="line">  margin: {{ margin }}px;</div>
-            <div class="line">}</div>
+            <div class="line">
+              .box {
+            </div>
+            <div class="line hl">
+              box-sizing: {{ boxSizing }};
+            </div>
+            <div class="line">
+              width: {{ contentW }}px;
+            </div>
+            <div class="line">
+              padding: {{ padding }}px;
+            </div>
+            <div class="line">
+              border: {{ border }}px solid #ccc;
+            </div>
+            <div class="line">
+              margin: {{ margin }}px;
+            </div>
+            <div class="line">
+              }
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssCommonProperties.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssCommonProperties.vue
index 3f7ca8c..4246ffb 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssCommonProperties.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssCommonProperties.vue
@@ -6,35 +6,57 @@
     </div>
 
     <div class="categories">
-      <div v-for="(cat, index) in categories" :key="index" class="category">
-        <div class="cat-title">{{ cat.title }}</div>
+      <div
+        v-for="(cat, index) in categories"
+        :key="index"
+        class="category"
+      >
+        <div class="cat-title">
+          {{ cat.title }}
+        </div>
         <div class="props-grid">
           <div
             v-for="prop in cat.props"
             :key="prop.name"
             class="prop-item"
-            @click="activeProp = prop"
             :class="{ active: activeProp && activeProp.name === prop.name }"
+            @click="activeProp = prop"
           >
-            <div class="prop-name">{{ prop.name }}</div>
-            <div class="prop-desc">{{ prop.desc }}</div>
+            <div class="prop-name">
+              {{ prop.name }}
+            </div>
+            <div class="prop-desc">
+              {{ prop.desc }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-if="activeProp" class="prop-detail">
+    <div
+      v-if="activeProp"
+      class="prop-detail"
+    >
       <div class="detail-header">
         <span class="detail-name">{{ activeProp.name }}</span>
         <span class="detail-cat-badge">{{ activeProp.categoryLabel }}</span>
       </div>
-      <div class="detail-desc">{{ activeProp.fullDesc }}</div>
+      <div class="detail-desc">
+        {{ activeProp.fullDesc }}
+      </div>
       <div class="detail-code">
-        <div class="code-label">示例代码：</div>
+        <div class="code-label">
+          示例代码：
+        </div>
         <pre><code>{{ activeProp.example }}</code></pre>
       </div>
     </div>
-    <div v-else class="prop-detail empty">点击上面的属性看看它能做什么 👆</div>
+    <div
+      v-else
+      class="prop-detail empty"
+    >
+      点击上面的属性看看它能做什么 👆
+    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
index d1b51ed..93769c7 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
@@ -89,8 +89,17 @@
       </div>
 
       <div class="preview-area">
-        <div class="canvas" :style="boxStyle">
-          <div v-for="n in 6" :key="n" class="item">{{ n }}</div>
+        <div
+          class="canvas"
+          :style="boxStyle"
+        >
+          <div
+            v-for="n in 6"
+            :key="n"
+            class="item"
+          >
+            {{ n }}
+          </div>
         </div>
         <div class="axis-hint">
           <span class="axis-tag main">主轴方向: {{ dir === 'row' ? '水平 →' : '垂直 ↓' }}</span>
@@ -100,7 +109,9 @@
     </div>
 
     <div class="code-row">
-      <div class="code-label">CSS</div>
+      <div class="code-label">
+        CSS
+      </div>
       <code class="code-text">{{ cssCode }}</code>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssLayoutDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssLayoutDemo.vue
index 6003b30..85f1556 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssLayoutDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssLayoutDemo.vue
@@ -68,7 +68,10 @@
     </div>
 
     <div class="preview-area">
-      <div class="container" :style="containerStyle">
+      <div
+        class="container"
+        :style="containerStyle"
+      >
         <div
           v-for="n in itemCount"
           :key="n"
@@ -81,7 +84,9 @@
     </div>
 
     <div class="code-display">
-      <div class="code-header">👆 点击代码行可以暂时禁用该属性</div>
+      <div class="code-header">
+        👆 点击代码行可以暂时禁用该属性
+      </div>
       <pre>.container {
   display: flex;
   <div 
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssPlaygroundDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssPlaygroundDemo.vue
index 4f1e375..ccd0fcc 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssPlaygroundDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssPlaygroundDemo.vue
@@ -19,49 +19,80 @@
     <div class="controls">
       <div class="control-group">
         <label>背景颜色 (background-color)</label>
-        <input type="color" v-model="bgColor" />
+        <input
+          v-model="bgColor"
+          type="color"
+        >
         <span class="value">{{ bgColor }}</span>
       </div>
 
       <div class="control-group">
         <label>文字颜色 (color)</label>
-        <input type="color" v-model="textColor" />
+        <input
+          v-model="textColor"
+          type="color"
+        >
         <span class="value">{{ textColor }}</span>
       </div>
 
       <div class="control-group">
         <label>字体大小 (font-size)</label>
-        <input type="range" v-model="fontSize" min="12" max="48" />
+        <input
+          v-model="fontSize"
+          type="range"
+          min="12"
+          max="48"
+        >
         <span class="value">{{ fontSize }}px</span>
       </div>
 
       <div class="control-group">
         <label>内边距 (padding)</label>
-        <input type="range" v-model="padding" min="0" max="50" />
+        <input
+          v-model="padding"
+          type="range"
+          min="0"
+          max="50"
+        >
         <span class="value">{{ padding }}px</span>
       </div>
 
       <div class="control-group">
         <label>圆角 (border-radius)</label>
-        <input type="range" v-model="borderRadius" min="0" max="50" />
+        <input
+          v-model="borderRadius"
+          type="range"
+          min="0"
+          max="50"
+        >
         <span class="value">{{ borderRadius }}px</span>
       </div>
 
       <div class="control-group">
         <label>边框宽度 (border-width)</label>
-        <input type="range" v-model="borderWidth" min="0" max="10" />
+        <input
+          v-model="borderWidth"
+          type="range"
+          min="0"
+          max="10"
+        >
         <span class="value">{{ borderWidth }}px</span>
       </div>
 
       <div class="control-group">
         <label>边框颜色 (border-color)</label>
-        <input type="color" v-model="borderColor" />
+        <input
+          v-model="borderColor"
+          type="color"
+        >
         <span class="value">{{ borderColor }}</span>
       </div>
     </div>
 
     <div class="code-preview">
-      <div class="code-title">生成的 CSS 代码：</div>
+      <div class="code-title">
+        生成的 CSS 代码：
+      </div>
       <pre><code>.element {
   background-color: <span class="highlight">{{ bgColor }}</span>;
   color: <span class="highlight">{{ textColor }}</span>;
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssSelectorsDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssSelectorsDemo.vue
index 8d7ecbf..5707f99 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssSelectorsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssSelectorsDemo.vue
@@ -7,7 +7,9 @@
     <div class="comparison">
       <!-- Left: CSS Rules -->
       <div class="column css-col">
-        <div class="col-title">CSS (样式表)</div>
+        <div class="col-title">
+          CSS (样式表)
+        </div>
         <div class="rules-list">
           <div
             class="rule-item"
@@ -15,8 +17,12 @@
             @mouseenter="activeType = 'tag'"
             @mouseleave="activeType = null"
           >
-            <div class="selector">p</div>
-            <div class="block">{ color: #333; }</div>
+            <div class="selector">
+              p
+            </div>
+            <div class="block">
+              { color: #333; }
+            </div>
             <div class="explanation">
               <span class="badge tag">标签选择器</span>
               直接写标签名，选中所有 <code>&lt;p&gt;</code>
@@ -29,8 +35,12 @@
             @mouseenter="activeType = 'class'"
             @mouseleave="activeType = null"
           >
-            <div class="selector">.card</div>
-            <div class="block">{ background: white; }</div>
+            <div class="selector">
+              .card
+            </div>
+            <div class="block">
+              { background: white; }
+            </div>
             <div class="explanation">
               <span class="badge class">类选择器</span>
               以 <code>.</code> 开头，选中所有 <code>class="card"</code>
@@ -43,8 +53,12 @@
             @mouseenter="activeType = 'id'"
             @mouseleave="activeType = null"
           >
-            <div class="selector">#submit-btn</div>
-            <div class="block">{ font-weight: bold; }</div>
+            <div class="selector">
+              #submit-btn
+            </div>
+            <div class="block">
+              { font-weight: bold; }
+            </div>
             <div class="explanation">
               <span class="badge id">ID 选择器</span>
               以 <code>#</code> 开头，选中唯一 <code>id="submit-btn"</code>
@@ -55,19 +69,32 @@
 
       <!-- Center: Connector -->
       <div class="connector">
-        <div class="line-path" :class="activeType"></div>
-        <div class="icon">🔗</div>
+        <div
+          class="line-path"
+          :class="activeType"
+        />
+        <div class="icon">
+          🔗
+        </div>
       </div>
 
       <!-- Right: HTML Structure -->
       <div class="column html-col">
-        <div class="col-title">HTML (结构)</div>
+        <div class="col-title">
+          HTML (结构)
+        </div>
         <div class="code-view">
-          <div class="html-line" :class="{ highlight: activeType === 'tag' }">
+          <div
+            class="html-line"
+            :class="{ highlight: activeType === 'tag' }"
+          >
             &lt;p&gt;我是普通段落&lt;/p&gt;
           </div>
 
-          <div class="html-line" :class="{ highlight: activeType === 'class' }">
+          <div
+            class="html-line"
+            :class="{ highlight: activeType === 'class' }"
+          >
             &lt;div <span class="attr">class="card"</span>&gt;
           </div>
 
@@ -80,11 +107,17 @@
             &lt;p&gt;我是卡片里的段落&lt;/p&gt;
           </div>
 
-          <div class="html-line" :class="{ highlight: activeType === 'class' }">
+          <div
+            class="html-line"
+            :class="{ highlight: activeType === 'class' }"
+          >
             &lt;/div&gt;
           </div>
 
-          <div class="html-line" :class="{ highlight: activeType === 'id' }">
+          <div
+            class="html-line"
+            :class="{ highlight: activeType === 'id' }"
+          >
             &lt;button
             <span class="attr">id="submit-btn"</span>&gt;提交&lt;/button&gt;
           </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/DeploymentArchitecture.vue b/docs/.vitepress/theme/components/appendix/web-basics/DeploymentArchitecture.vue
index d992cac..f5ff301 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/DeploymentArchitecture.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/DeploymentArchitecture.vue
@@ -15,152 +15,278 @@
 
       <div class="architecture-diagram">
         <!-- 基础架构 -->
-        <div v-if="currentView === 0" class="basic-architecture">
+        <div
+          v-if="currentView === 0"
+          class="basic-architecture"
+        >
           <div class="user-node">
-            <div class="node-icon">👤</div>
-            <div class="node-label">用户</div>
+            <div class="node-icon">
+              👤
+            </div>
+            <div class="node-label">
+              用户
+            </div>
           </div>
 
-          <div class="arrow-down">↓</div>
+          <div class="arrow-down">
+            ↓
+          </div>
 
           <div class="domain-node">
-            <div class="node-icon">🌐</div>
-            <div class="node-label">域名</div>
-            <div class="node-desc">example.com</div>
+            <div class="node-icon">
+              🌐
+            </div>
+            <div class="node-label">
+              域名
+            </div>
+            <div class="node-desc">
+              example.com
+            </div>
           </div>
 
-          <div class="arrow-down">↓ DNS 解析</div>
+          <div class="arrow-down">
+            ↓ DNS 解析
+          </div>
 
           <div class="server-node">
-            <div class="node-icon">🖥️</div>
-            <div class="node-label">服务器</div>
-            <div class="node-desc">IP: 1.2.3.4</div>
+            <div class="node-icon">
+              🖥️
+            </div>
+            <div class="node-label">
+              服务器
+            </div>
+            <div class="node-desc">
+              IP: 1.2.3.4
+            </div>
           </div>
 
-          <div class="arrow-down">↓</div>
+          <div class="arrow-down">
+            ↓
+          </div>
 
           <div class="web-node">
-            <div class="node-icon">🌍</div>
-            <div class="node-label">Web 应用</div>
+            <div class="node-icon">
+              🌍
+            </div>
+            <div class="node-label">
+              Web 应用
+            </div>
           </div>
         </div>
 
         <!-- CDN 架构 -->
-        <div v-if="currentView === 1" class="cdn-architecture">
+        <div
+          v-if="currentView === 1"
+          class="cdn-architecture"
+        >
           <div class="user-nodes">
             <div class="user-node china">
-              <div class="node-icon">🇨🇳</div>
-              <div class="node-label">中国用户</div>
+              <div class="node-icon">
+                🇨🇳
+              </div>
+              <div class="node-label">
+                中国用户
+              </div>
             </div>
             <div class="user-node usa">
-              <div class="node-icon">🇺🇸</div>
-              <div class="node-label">美国用户</div>
+              <div class="node-icon">
+                🇺🇸
+              </div>
+              <div class="node-label">
+                美国用户
+              </div>
             </div>
           </div>
 
           <div class="arrow-group">
-            <div class="arrow-left">↙</div>
-            <div class="arrow-right">↘</div>
+            <div class="arrow-left">
+              ↙
+            </div>
+            <div class="arrow-right">
+              ↘
+            </div>
           </div>
 
           <div class="cdn-nodes">
             <div class="cdn-node">
-              <div class="node-icon">📡</div>
-              <div class="node-label">CDN 北京节点</div>
+              <div class="node-icon">
+                📡
+              </div>
+              <div class="node-label">
+                CDN 北京节点
+              </div>
             </div>
             <div class="cdn-node">
-              <div class="node-icon">📡</div>
-              <div class="node-label">CDN 纽约节点</div>
+              <div class="node-icon">
+                📡
+              </div>
+              <div class="node-label">
+                CDN 纽约节点
+              </div>
             </div>
           </div>
 
-          <div class="arrow-down">↓ 缓存未命中</div>
+          <div class="arrow-down">
+            ↓ 缓存未命中
+          </div>
 
           <div class="origin-node">
-            <div class="node-icon">🖥️</div>
-            <div class="node-label">源服务器</div>
+            <div class="node-icon">
+              🖥️
+            </div>
+            <div class="node-label">
+              源服务器
+            </div>
           </div>
         </div>
 
         <!-- 负载均衡 -->
-        <div v-if="currentView === 2" class="loadbalancer-architecture">
+        <div
+          v-if="currentView === 2"
+          class="loadbalancer-architecture"
+        >
           <div class="user-node">
-            <div class="node-icon">👥</div>
-            <div class="node-label">用户请求</div>
+            <div class="node-icon">
+              👥
+            </div>
+            <div class="node-label">
+              用户请求
+            </div>
           </div>
 
-          <div class="arrow-down">↓</div>
+          <div class="arrow-down">
+            ↓
+          </div>
 
           <div class="lb-node">
-            <div class="node-icon">⚖️</div>
-            <div class="node-label">负载均衡器</div>
+            <div class="node-icon">
+              ⚖️
+            </div>
+            <div class="node-label">
+              负载均衡器
+            </div>
           </div>
 
           <div class="arrow-group">
-            <div class="arrow-1">↖</div>
-            <div class="arrow-2">↑</div>
-            <div class="arrow-3">↗</div>
+            <div class="arrow-1">
+              ↖
+            </div>
+            <div class="arrow-2">
+              ↑
+            </div>
+            <div class="arrow-3">
+              ↗
+            </div>
           </div>
 
           <div class="server-nodes">
             <div class="server-node">
-              <div class="node-icon">🖥️</div>
-              <div class="node-label">服务器 1</div>
+              <div class="node-icon">
+                🖥️
+              </div>
+              <div class="node-label">
+                服务器 1
+              </div>
             </div>
             <div class="server-node">
-              <div class="node-icon">🖥️</div>
-              <div class="node-label">服务器 2</div>
+              <div class="node-icon">
+                🖥️
+              </div>
+              <div class="node-label">
+                服务器 2
+              </div>
             </div>
             <div class="server-node">
-              <div class="node-icon">🖥️</div>
-              <div class="node-label">服务器 3</div>
+              <div class="node-icon">
+                🖥️
+              </div>
+              <div class="node-label">
+                服务器 3
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 完整架构 -->
-        <div v-if="currentView === 3" class="full-architecture">
+        <div
+          v-if="currentView === 3"
+          class="full-architecture"
+        >
           <div class="user-nodes">
             <div class="user-node">
-              <div class="node-icon">👤</div>
-              <div class="node-label">用户</div>
+              <div class="node-icon">
+                👤
+              </div>
+              <div class="node-label">
+                用户
+              </div>
             </div>
           </div>
 
-          <div class="arrow-down">↓</div>
-
-          <div class="dns-node">
-            <div class="node-icon">🔍</div>
-            <div class="node-label">DNS</div>
+          <div class="arrow-down">
+            ↓
           </div>
 
-          <div class="arrow-down">↓</div>
+          <div class="dns-node">
+            <div class="node-icon">
+              🔍
+            </div>
+            <div class="node-label">
+              DNS
+            </div>
+          </div>
+
+          <div class="arrow-down">
+            ↓
+          </div>
 
           <div class="cdn-lb-row">
             <div class="cdn-node">
-              <div class="node-icon">📡</div>
-              <div class="node-label">CDN</div>
+              <div class="node-icon">
+                📡
+              </div>
+              <div class="node-label">
+                CDN
+              </div>
             </div>
             <div class="lb-node">
-              <div class="node-icon">⚖️</div>
-              <div class="node-label">LB</div>
+              <div class="node-icon">
+                ⚖️
+              </div>
+              <div class="node-label">
+                LB
+              </div>
             </div>
           </div>
 
-          <div class="arrow-down">↓</div>
+          <div class="arrow-down">
+            ↓
+          </div>
 
           <div class="server-cluster">
             <div class="server-node">
-              <div class="node-icon">🖥️</div>
-              <div class="node-label">Web 1</div>
+              <div class="node-icon">
+                🖥️
+              </div>
+              <div class="node-label">
+                Web 1
+              </div>
             </div>
             <div class="server-node">
-              <div class="node-icon">🖥️</div>
-              <div class="node-label">Web 2</div>
+              <div class="node-icon">
+                🖥️
+              </div>
+              <div class="node-label">
+                Web 2
+              </div>
             </div>
             <div class="server-node">
-              <div class="node-icon">💾</div>
-              <div class="node-label">Database</div>
+              <div class="node-icon">
+                💾
+              </div>
+              <div class="node-label">
+                Database
+              </div>
             </div>
           </div>
         </div>
@@ -168,54 +294,74 @@
     </div>
 
     <div class="info-cards">
-      <div class="info-card" v-if="currentView === 0">
-        <div class="card-title">🌐 域名 (Domain)</div>
+      <div
+        v-if="currentView === 0"
+        class="info-card"
+      >
+        <div class="card-title">
+          🌐 域名 (Domain)
+        </div>
         <div class="card-content">
           <strong>什么是域名？</strong>
-          <br />域名是网站的地址，如 example.com，便于记忆和访问。 <br /><br />
+          <br>域名是网站的地址，如 example.com，便于记忆和访问。 <br><br>
           <strong>域名注册</strong>
-          <br />• 注册商：GoDaddy、Namecheap、阿里云 <br />•
-          选择后缀：.com、.cn、.org、.io <br />• 价格：$10-50/年
+          <br>• 注册商：GoDaddy、Namecheap、阿里云 <br>•
+          选择后缀：.com、.cn、.org、.io <br>• 价格：$10-50/年
         </div>
       </div>
 
-      <div class="info-card" v-if="currentView === 1">
-        <div class="card-title">📡 CDN (内容分发网络)</div>
+      <div
+        v-if="currentView === 1"
+        class="info-card"
+      >
+        <div class="card-title">
+          📡 CDN (内容分发网络)
+        </div>
         <div class="card-content">
           <strong>什么是 CDN？</strong>
-          <br />将内容缓存到全球各地的节点，用户就近访问。 <br /><br />
+          <br>将内容缓存到全球各地的节点，用户就近访问。 <br><br>
           <strong>优势</strong>
-          <br />• 加速访问：就近获取内容 <br />• 减轻负载：减少源站压力 <br />•
-          提高可用性：节点故障自动切换 <br /><br />
+          <br>• 加速访问：就近获取内容 <br>• 减轻负载：减少源站压力 <br>•
+          提高可用性：节点故障自动切换 <br><br>
           <strong>常见 CDN</strong>
-          <br />• Cloudflare、AWS CloudFront、阿里云 CDN
+          <br>• Cloudflare、AWS CloudFront、阿里云 CDN
         </div>
       </div>
 
-      <div class="info-card" v-if="currentView === 2">
-        <div class="card-title">⚖️ 负载均衡 (Load Balancer)</div>
+      <div
+        v-if="currentView === 2"
+        class="info-card"
+      >
+        <div class="card-title">
+          ⚖️ 负载均衡 (Load Balancer)
+        </div>
         <div class="card-content">
           <strong>什么是负载均衡？</strong>
-          <br />将请求分发到多台服务器，提高并发能力。 <br /><br />
+          <br>将请求分发到多台服务器，提高并发能力。 <br><br>
           <strong>负载均衡算法</strong>
-          <br />• 轮询 (Round Robin) <br />• 最少连接 (Least Connections)
-          <br />• IP 哈希 (IP Hash) <br /><br />
+          <br>• 轮询 (Round Robin) <br>• 最少连接 (Least Connections)
+          <br>• IP 哈希 (IP Hash) <br><br>
           <strong>常见工具</strong>
-          <br />• Nginx、HAProxy、AWS ELB
+          <br>• Nginx、HAProxy、AWS ELB
         </div>
       </div>
 
-      <div class="info-card" v-if="currentView === 3">
-        <div class="card-title">🏗️ 完整部署架构</div>
+      <div
+        v-if="currentView === 3"
+        class="info-card"
+      >
+        <div class="card-title">
+          🏗️ 完整部署架构
+        </div>
         <div class="card-content">
           <strong>现代 Web 应用架构</strong>
-          <br /><br />
+          <br><br>
           1. 用户通过域名访问
-          <br />2. DNS 解析到 CDN 或负载均衡器 <br />3. CDN 缓存静态资源
-          <br />4. 负载均衡器分发请求 <br />5. Web 服务器处理动态请求 <br />6.
-          数据库存储持久化数据 <br /><br />
+          <br>2. DNS 解析到 CDN 或负载均衡器 <br>3. CDN 缓存静态资源
+          <br>4. 负载均衡器分发请求 <br>5. Web 服务器处理动态请求 <br>6.
+          数据库存储持久化数据 <br><br>
           <strong>监控和运维</strong>
-          <br />• 日志收集、性能监控、自动备份
+          <br>• 日志收集、性能监控、自动备份
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
index 2415d84..828fa3c 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/DnsLookupDemo.vue
@@ -7,7 +7,7 @@
       <p class="why-desc-zh">
         你知道店铺名字叫 "Shop.com"，但快递员需要知道具体的经纬度坐标 (IP 地址)
         才能送达。
-        <br />
+        <br>
         DNS 就像是<strong>地图导航</strong>，输入店名，它告诉你具体的坐标。
       </p>
     </div>
@@ -15,22 +15,36 @@
     <div class="demo-stage">
       <div class="input-area">
         <span class="label">店铺名称 (域名)</span>
-        <div class="fake-input">shop.com</div>
+        <div class="fake-input">
+          shop.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">正在查找 shop.com 的位置...</div>
+        <div class="arrow-down">
+          ⬇️
+        </div>
+        <div class="dns-box">
+          <div class="icon">
+            🧭
+          </div>
+          <div class="title">
+            DNS (地图导航)
+          </div>
+          <div class="desc">
+            正在查找 shop.com 的位置...
+          </div>
+        </div>
+        <div class="arrow-down">
+          ⬇️
         </div>
-        <div class="arrow-down">⬇️</div>
       </div>
 
       <div class="output-area">
         <span class="label">GPS 坐标 (IP 地址)</span>
-        <div class="fake-output">93.184.216.34</div>
+        <div class="fake-output">
+          93.184.216.34
+        </div>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue b/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
index 8eaeb83..72d2d96 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
@@ -9,21 +9,34 @@
       <div class="left-panel">
         <div class="operations">
           <div class="op-group">
-            <div class="op-label">修改内容</div>
+            <div class="op-label">
+              修改内容
+            </div>
             <div class="op-row">
-              <input v-model="titleText" placeholder="输入标题" class="input" />
-              <button @click="updateTitle" class="btn">更新标题</button>
+              <input
+                v-model="titleText"
+                placeholder="输入标题"
+                class="input"
+              >
+              <button
+                class="btn"
+                @click="updateTitle"
+              >
+                更新标题
+              </button>
             </div>
           </div>
 
           <div class="op-group">
-            <div class="op-label">修改样式</div>
+            <div class="op-label">
+              修改样式
+            </div>
             <div class="op-row">
               <button 
                 v-for="s in styles" 
                 :key="s.id"
-                @click="currentStyle = s.id"
                 :class="['btn-sm', { active: currentStyle === s.id }]"
+                @click="currentStyle = s.id"
               >
                 {{ s.label }}
               </button>
@@ -31,59 +44,124 @@
           </div>
 
           <div class="op-group">
-            <div class="op-label">添加/删除元素</div>
+            <div class="op-label">
+              添加/删除元素
+            </div>
             <div class="op-row">
-              <button @click="addItem" class="btn">添加项目</button>
-              <button @click="removeLastItem" class="btn btn-danger">删除最后</button>
+              <button
+                class="btn"
+                @click="addItem"
+              >
+                添加项目
+              </button>
+              <button
+                class="btn btn-danger"
+                @click="removeLastItem"
+              >
+                删除最后
+              </button>
             </div>
           </div>
         </div>
 
-        <div class="preview-card" :class="currentStyle">
-          <h2 class="card-title">{{ titleText || '点击按钮更新标题' }}</h2>
-          <p class="card-desc">这是一个演示 DOM 操作的卡片区域。</p>
+        <div
+          class="preview-card"
+          :class="currentStyle"
+        >
+          <h2 class="card-title">
+            {{ titleText || '点击按钮更新标题' }}
+          </h2>
+          <p class="card-desc">
+            这是一个演示 DOM 操作的卡片区域。
+          </p>
           <ul class="card-list">
-            <li v-for="(item, i) in items" :key="i">{{ item }}</li>
-            <li v-if="items.length === 0" class="empty">（列表为空）</li>
+            <li
+              v-for="(item, i) in items"
+              :key="i"
+            >
+              {{ item }}
+            </li>
+            <li
+              v-if="items.length === 0"
+              class="empty"
+            >
+              （列表为空）
+            </li>
           </ul>
         </div>
       </div>
 
       <div class="right-panel">
         <div class="code-block">
-          <div class="code-title">对应的 JavaScript 代码</div>
+          <div class="code-title">
+            对应的 JavaScript 代码
+          </div>
           <div class="code-content">
             <template v-if="lastOp === 'title'">
-              <div class="line comment">// 修改文本内容</div>
-              <div class="line">const el = document.querySelector('.card-title')</div>
-              <div class="line">el.textContent = '{{ titleText }}'</div>
+              <div class="line comment">
+                // 修改文本内容
+              </div>
+              <div class="line">
+                const el = document.querySelector('.card-title')
+              </div>
+              <div class="line">
+                el.textContent = '{{ titleText }}'
+              </div>
             </template>
             <template v-else-if="lastOp === 'style'">
-              <div class="line comment">// 切换 CSS 类</div>
-              <div class="line">const card = document.querySelector('.preview-card')</div>
-              <div class="line">card.className = 'preview-card {{ currentStyle }}'</div>
+              <div class="line comment">
+                // 切换 CSS 类
+              </div>
+              <div class="line">
+                const card = document.querySelector('.preview-card')
+              </div>
+              <div class="line">
+                card.className = 'preview-card {{ currentStyle }}'
+              </div>
             </template>
             <template v-else-if="lastOp === 'add'">
-              <div class="line comment">// 创建并添加新元素</div>
-              <div class="line">const list = document.querySelector('.card-list')</div>
-              <div class="line">const li = document.createElement('li')</div>
-              <div class="line">li.textContent = '新项目 {{ items.length }}'</div>
-              <div class="line">list.appendChild(li)</div>
+              <div class="line comment">
+                // 创建并添加新元素
+              </div>
+              <div class="line">
+                const list = document.querySelector('.card-list')
+              </div>
+              <div class="line">
+                const li = document.createElement('li')
+              </div>
+              <div class="line">
+                li.textContent = '新项目 {{ items.length }}'
+              </div>
+              <div class="line">
+                list.appendChild(li)
+              </div>
             </template>
             <template v-else-if="lastOp === 'remove'">
-              <div class="line comment">// 删除最后一个元素</div>
-              <div class="line">const list = document.querySelector('.card-list')</div>
-              <div class="line">const last = list.lastElementChild</div>
-              <div class="line">if (last) last.remove()</div>
+              <div class="line comment">
+                // 删除最后一个元素
+              </div>
+              <div class="line">
+                const list = document.querySelector('.card-list')
+              </div>
+              <div class="line">
+                const last = list.lastElementChild
+              </div>
+              <div class="line">
+                if (last) last.remove()
+              </div>
             </template>
             <template v-else>
-              <div class="line comment">// 点击左侧按钮查看对应代码</div>
+              <div class="line comment">
+                // 点击左侧按钮查看对应代码
+              </div>
             </template>
           </div>
         </div>
 
         <div class="methods-card">
-          <div class="methods-title">常用 DOM 方法</div>
+          <div class="methods-title">
+            常用 DOM 方法
+          </div>
           <div class="methods-list">
             <div class="method">
               <code>querySelector()</code>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/FrontendEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/FrontendEvolutionDemo.vue
index 99851f4..7f57867 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/FrontendEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/FrontendEvolutionDemo.vue
@@ -2,7 +2,7 @@
   <div class="frontend-evolution-demo">
     <!-- Modern Timeline -->
     <div class="timeline-container">
-      <div class="timeline-track"></div>
+      <div class="timeline-track" />
       <button
         v-for="(stage, index) in stages"
         :key="index"
@@ -14,7 +14,7 @@
         @click="currentStage = index"
       >
         <div class="node-dot">
-          <div class="inner-dot"></div>
+          <div class="inner-dot" />
         </div>
         <div class="node-content">
           <span class="year-badge">{{ stage.year }}</span>
@@ -24,13 +24,17 @@
     </div>
 
     <div class="content-wrapper">
-      <transition name="fade-slide" mode="out-in">
-        <div :key="currentStage" class="stage-content">
+      <transition
+        name="fade-slide"
+        mode="out-in"
+      >
+        <div
+          :key="currentStage"
+          class="stage-content"
+        >
           <div class="header-section">
             <h3>
-              <span class="stage-index"
-                >{{ indexToRoman(currentStage + 1) }}.</span
-              >
+              <span class="stage-index">{{ indexToRoman(currentStage + 1) }}.</span>
               {{ stages[currentStage].title }}
             </h3>
             <p>{{ stages[currentStage].desc }}</p>
@@ -41,9 +45,9 @@
             <div class="mac-window code-window">
               <div class="window-bar">
                 <div class="traffic-lights">
-                  <span class="light red"></span>
-                  <span class="light yellow"></span>
-                  <span class="light green"></span>
+                  <span class="light red" />
+                  <span class="light yellow" />
+                  <span class="light green" />
                 </div>
                 <div class="window-title">
                   {{ stages[currentStage].codeTitle }}
@@ -57,30 +61,45 @@
             <!-- Diagram View -->
             <div class="mac-window diagram-window">
               <div class="window-bar">
-                <div class="window-title">Architecture Pattern</div>
+                <div class="window-title">
+                  Architecture Pattern
+                </div>
               </div>
               <div class="diagram-canvas">
                 <!-- Stage 0: Static -->
-                <div v-if="currentStage === 0" class="diagram static">
+                <div
+                  v-if="currentStage === 0"
+                  class="diagram static"
+                >
                   <div class="flow-stack">
                     <div class="concept-box html">
                       <span class="icon">📄</span> HTML (Content)
                     </div>
-                    <div class="flow-arrow">↓</div>
+                    <div class="flow-arrow">
+                      ↓
+                    </div>
                     <div class="concept-box browser">
                       <span class="icon">🌍</span> Browser (Display)
                     </div>
                   </div>
-                  <div class="side-note">Server sends complete HTML</div>
+                  <div class="side-note">
+                    Server sends complete HTML
+                  </div>
                 </div>
 
                 <!-- Stage 1: jQuery -->
-                <div v-if="currentStage === 1" class="diagram jquery">
+                <div
+                  v-if="currentStage === 1"
+                  class="diagram jquery"
+                >
                   <div class="concept-box dom">
                     <span class="icon">🌳</span> DOM Tree
                   </div>
                   <div class="chaos-arrows">
-                    <svg viewBox="0 0 100 60" class="chaos-svg">
+                    <svg
+                      viewBox="0 0 100 60"
+                      class="chaos-svg"
+                    >
                       <path
                         d="M10,10 Q50,5 90,10"
                         class="arrow-path"
@@ -115,45 +134,70 @@
                         refY="3.5"
                         orient="auto"
                       >
-                        <polygon points="0 0, 10 3.5, 0 7" fill="#666" />
+                        <polygon
+                          points="0 0, 10 3.5, 0 7"
+                          fill="#666"
+                        />
                       </marker>
                     </defs>
                   </svg>
                 </div>
 
                 <!-- Stage 2: MVC -->
-                <div v-if="currentStage === 2" class="diagram mvc">
+                <div
+                  v-if="currentStage === 2"
+                  class="diagram mvc"
+                >
                   <div class="mvc-triangle">
-                    <div class="concept-box model">Model</div>
-                    <div class="concept-box view">View</div>
-                    <div class="concept-box controller">Controller</div>
+                    <div class="concept-box model">
+                      Model
+                    </div>
+                    <div class="concept-box view">
+                      View
+                    </div>
+                    <div class="concept-box controller">
+                      Controller
+                    </div>
 
                     <!-- Connecting Lines -->
-                    <div class="line m-v"></div>
-                    <div class="line v-c"></div>
-                    <div class="line c-m"></div>
+                    <div class="line m-v" />
+                    <div class="line v-c" />
+                    <div class="line c-m" />
+                  </div>
+                  <div class="mvc-desc">
+                    Two-way Binding
                   </div>
-                  <div class="mvc-desc">Two-way Binding</div>
                 </div>
 
                 <!-- Stage 3: Component -->
-                <div v-if="currentStage === 3" class="diagram component">
+                <div
+                  v-if="currentStage === 3"
+                  class="diagram component"
+                >
                   <div class="comp-structure">
                     <div class="comp-box root">
                       <span class="comp-label">App</span>
                       <div class="comp-children">
-                        <div class="comp-box header">Header</div>
+                        <div class="comp-box header">
+                          Header
+                        </div>
                         <div class="comp-box list">
                           ProductList
                           <div class="comp-children row">
-                            <div class="comp-box item">Item</div>
-                            <div class="comp-box item">Item</div>
+                            <div class="comp-box item">
+                              Item
+                            </div>
+                            <div class="comp-box item">
+                              Item
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <div class="flow-pill">State ➔ UI = f(State)</div>
+                  <div class="flow-pill">
+                    State ➔ UI = f(State)
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
index 10acfa7..9756c9b 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/HttpExchangeDemo.vue
@@ -3,14 +3,26 @@
     <div class="browser-frame">
       <!-- Address Bar (Simplified) -->
       <div class="address-bar">
-        <select v-model="method" class="method-select" :disabled="loading">
+        <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 @click="sendRequest" :disabled="loading" class="send-btn">
+        <input
+          v-model="path"
+          class="url-input"
+          :disabled="loading"
+        >
+        <button
+          :disabled="loading"
+          class="send-btn"
+          @click="sendRequest"
+        >
           {{ loading ? '...' : t.send }}
         </button>
       </div>
@@ -25,22 +37,33 @@
             <span>{{ t.cols.time }}</span>
           </div>
           <div
+            v-if="requestSent"
             class="log-row"
             :class="{ active: requestSent, selected: true }"
-            v-if="requestSent"
           >
             <span class="col-name">{{ path.split('/').pop() || 'index' }}</span>
-            <span class="col-status" :class="statusClass">{{
+            <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>
+          <div
+            v-else
+            class="empty-state"
+          >
+            {{ t.noRequests }}
+          </div>
         </div>
 
         <!-- Details Panel (Right) -->
-        <div class="details-panel" v-if="requestSent">
+        <div
+          v-if="requestSent"
+          class="details-panel"
+        >
           <div class="tabs">
             <button
               v-for="tabKey in ['headers', 'response', 'preview']"
@@ -54,9 +77,14 @@
 
           <div class="tab-content">
             <!-- Headers Tab -->
-            <div v-if="activeTab === 'headers'" class="headers-view">
+            <div
+              v-if="activeTab === 'headers'"
+              class="headers-view"
+            >
               <div class="section">
-                <div class="section-title">{{ t.general }}</div>
+                <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>
@@ -68,17 +96,22 @@
                 <div class="kv-row">
                   <span class="key">{{ t.statusCode }}:</span>
                   <span class="value">
-                    <span class="status-dot" :class="statusClass"></span>
+                    <span
+                      class="status-dot"
+                      :class="statusClass"
+                    />
                     {{ responseStatus || '...' }}
                   </span>
                 </div>
               </div>
               <div class="section">
-                <div class="section-title">{{ t.responseHeaders }}</div>
+                <div class="section-title">
+                  {{ t.responseHeaders }}
+                </div>
                 <div
-                  class="kv-row"
                   v-for="(val, key) in responseHeaders"
                   :key="key"
+                  class="kv-row"
                 >
                   <span class="key">{{ key }}:</span>
                   <span class="value">{{ val }}</span>
@@ -87,24 +120,36 @@
             </div>
 
             <!-- Response Tab -->
-            <div v-if="activeTab === 'response'" class="code-view">
+            <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="activeTab === 'preview'"
+              class="preview-view"
+            >
               <div
                 v-if="method === 'GET'"
                 class="html-preview"
                 v-html="responseBody"
-              ></div>
-              <div v-else class="json-preview">
+              />
+              <div
+                v-else
+                class="json-preview"
+              >
                 JSON Data: {{ responseBody }}
               </div>
             </div>
           </div>
         </div>
-        <div v-else class="details-placeholder">
+        <div
+          v-else
+          class="details-placeholder"
+        >
           {{ t.placeholder }}
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
index 7095fc2..0f33f9d 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
@@ -16,30 +16,46 @@
           </div>
           <div class="code-preview">
             <code>
-              // 手动操作 DOM<br />
-              $('#count').text(val);<br />
+              // 手动操作 DOM<br>
+              $('#count').text(val);<br>
               if (val > 5) $('#msg').show();
             </code>
           </div>
           <div class="interactive-area">
             <div class="output-box">
               Count: <span id="imp-count-display">{{ impCount }}</span>
-              <div v-show="impShowMsg" class="warning-msg">⚠️ Count is high!</div>
+              <div
+                v-show="impShowMsg"
+                class="warning-msg"
+              >
+                ⚠️ Count is high!
+              </div>
             </div>
             <div class="actions">
-              <button @click="impIncrement" class="btn">Step 1: Value++</button>
-              <button @click="impUpdateText" class="btn" :disabled="!impChanged">
+              <button
+                class="btn"
+                @click="impIncrement"
+              >
+                Step 1: Value++
+              </button>
+              <button
+                class="btn"
+                :disabled="!impChanged"
+                @click="impUpdateText"
+              >
                 Step 2: Update Text
               </button>
               <button
-                @click="impCheckState"
                 class="btn"
                 :disabled="!impTextUpdated"
+                @click="impCheckState"
               >
                 Step 3: Check Logic
               </button>
             </div>
-            <div class="status-log">{{ impStatus }}</div>
+            <div class="status-log">
+              {{ impStatus }}
+            </div>
           </div>
         </div>
 
@@ -59,10 +75,18 @@
           <div class="interactive-area">
             <div class="output-box">
               Count: <span>{{ decCount }}</span>
-              <div v-if="decCount > 5" class="warning-msg">⚠️ Count is high!</div>
+              <div
+                v-if="decCount > 5"
+                class="warning-msg"
+              >
+                ⚠️ Count is high!
+              </div>
             </div>
             <div class="actions">
-              <button @click="decIncrement" class="btn primary">
+              <button
+                class="btn primary"
+                @click="decIncrement"
+              >
                 Value++ (Auto Render)
               </button>
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue
index 446c3e5..4ec8503 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/JQueryVsStateDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="jq-demo">
     <div class="header">
-      <div class="title">什么是 jQuery？用“购物车数量”秒懂</div>
+      <div class="title">
+        什么是 jQuery？用“购物车数量”秒懂
+      </div>
       <div class="subtitle">
         左边：像 jQuery 一样手动改页面（容易漏）。右边：像 Vue/React
         一样只改状态。
@@ -15,48 +17,83 @@
     <div class="panes">
       <!-- jQuery-like -->
       <div class="pane">
-        <div class="pane-title">jQuery 思路：到处改 DOM</div>
+        <div class="pane-title">
+          jQuery 思路：到处改 DOM
+        </div>
         <div class="mock-app">
           <div class="topbar">
             <span>🛒 角标：</span>
-            <span class="badge" :class="{ wrong: jqBadgeWrong }">{{
+            <span
+              class="badge"
+              :class="{ wrong: jqBadgeWrong }"
+            >{{
               jqBadge
             }}</span>
           </div>
           <div class="content">
             <div class="row">
               购物车页数量：
-              <span class="num" :class="{ wrong: jqPageWrong }">{{
+              <span
+                class="num"
+                :class="{ wrong: jqPageWrong }"
+              >{{
                 jqPage
               }}</span>
             </div>
             <div class="row">
               结算按钮：
-              <button class="checkout">去结算 ({{ jqButtonLabel }})</button>
+              <button class="checkout">
+                去结算 ({{ jqButtonLabel }})
+              </button>
             </div>
           </div>
         </div>
 
         <div class="controls">
-          <div class="control-title">模拟“你写的命令”</div>
+          <div class="control-title">
+            模拟“你写的命令”
+          </div>
           <div class="btns">
-            <button @click="jqIncreaseData">数据 +1（但还没改页面）</button>
-            <button @click="jqUpdateBadge">改角标</button>
-            <button @click="jqUpdateCartPage">改购物车页</button>
-            <button @click="jqUpdateCheckoutButton">改结算按钮</button>
+            <button @click="jqIncreaseData">
+              数据 +1（但还没改页面）
+            </button>
+            <button @click="jqUpdateBadge">
+              改角标
+            </button>
+            <button @click="jqUpdateCartPage">
+              改购物车页
+            </button>
+            <button @click="jqUpdateCheckoutButton">
+              改结算按钮
+            </button>
           </div>
 
-          <div class="hint" :class="{ danger: jqInconsistent }">
+          <div
+            class="hint"
+            :class="{ danger: jqInconsistent }"
+          >
             {{ jqHint }}
           </div>
 
           <div class="log">
-            <div class="log-title">命令日志</div>
-            <div v-if="jqLogs.length === 0" class="log-empty">
+            <div class="log-title">
+              命令日志
+            </div>
+            <div
+              v-if="jqLogs.length === 0"
+              class="log-empty"
+            >
               （还没有操作）
             </div>
-            <div v-else class="log-list">
-              <div v-for="(l, idx) in jqLogs" :key="idx" class="log-item">
+            <div
+              v-else
+              class="log-list"
+            >
+              <div
+                v-for="(l, idx) in jqLogs"
+                :key="idx"
+                class="log-item"
+              >
                 {{ l }}
               </div>
             </div>
@@ -66,7 +103,9 @@
 
       <!-- State-driven -->
       <div class="pane">
-        <div class="pane-title">Vue/React 思路：只改 State</div>
+        <div class="pane-title">
+          Vue/React 思路：只改 State
+        </div>
         <div class="mock-app">
           <div class="topbar">
             <span>🛒 角标：</span>
@@ -78,23 +117,39 @@
             </div>
             <div class="row">
               结算按钮：
-              <button class="checkout">去结算 ({{ state }} 件)</button>
+              <button class="checkout">
+                去结算 ({{ state }} 件)
+              </button>
             </div>
           </div>
         </div>
 
         <div class="controls">
-          <div class="control-title">你只需要做一件事</div>
+          <div class="control-title">
+            你只需要做一件事
+          </div>
           <div class="btns">
-            <button class="primary" @click="state = state + 1">state +1</button>
-            <button class="secondary" @click="resetAll">重置</button>
+            <button
+              class="primary"
+              @click="state = state + 1"
+            >
+              state +1
+            </button>
+            <button
+              class="secondary"
+              @click="resetAll"
+            >
+              重置
+            </button>
           </div>
           <div class="hint ok">
             State 变了，界面三处会自动同步，不需要你“手动找 DOM 去改”。
           </div>
 
           <div class="mini">
-            <div class="mini-title">这里的两个新词</div>
+            <div class="mini-title">
+              这里的两个新词
+            </div>
             <div class="mini-item">
               <strong>DOM</strong>：浏览器里的页面结构（按钮/文字/图片都在里面）
             </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/NetworkLayers.vue b/docs/.vitepress/theme/components/appendix/web-basics/NetworkLayers.vue
index 14d828b..534c282 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/NetworkLayers.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/NetworkLayers.vue
@@ -8,21 +8,40 @@
         :class="{ active: selectedLayer === index }"
         @click="selectedLayer = index"
       >
-        <div class="layer-number">{{ index + 1 }}</div>
-        <div class="layer-content">
-          <div class="layer-name">{{ layer.name }}</div>
-          <div class="layer-english">{{ layer.english }}</div>
-          <div class="layer-protocols">{{ layer.protocols }}</div>
+        <div class="layer-number">
+          {{ index + 1 }}
+        </div>
+        <div class="layer-content">
+          <div class="layer-name">
+            {{ layer.name }}
+          </div>
+          <div class="layer-english">
+            {{ layer.english }}
+          </div>
+          <div class="layer-protocols">
+            {{ layer.protocols }}
+          </div>
+        </div>
+        <div class="layer-icon">
+          {{ layer.icon }}
         </div>
-        <div class="layer-icon">{{ layer.icon }}</div>
       </div>
     </div>
 
-    <div class="layer-detail" v-if="selectedLayer !== null">
-      <div class="detail-title">{{ layers[selectedLayer].name }}</div>
-      <div class="detail-desc">{{ layers[selectedLayer].description }}</div>
+    <div
+      v-if="selectedLayer !== null"
+      class="layer-detail"
+    >
+      <div class="detail-title">
+        {{ layers[selectedLayer].name }}
+      </div>
+      <div class="detail-desc">
+        {{ layers[selectedLayer].description }}
+      </div>
       <div class="detail-functions">
-        <div class="function-title">主要功能</div>
+        <div class="function-title">
+          主要功能
+        </div>
         <div class="function-list">
           <div
             v-for="(func, index) in layers[selectedLayer].functions"
@@ -34,7 +53,9 @@
         </div>
       </div>
       <div class="detail-examples">
-        <div class="example-title">常见设备</div>
+        <div class="example-title">
+          常见设备
+        </div>
         <div class="example-list">
           <div
             v-for="(device, index) in layers[selectedLayer].devices"
@@ -48,14 +69,27 @@
     </div>
 
     <div class="data-flow">
-      <div class="flow-title">数据封装过程（发送）</div>
+      <div class="flow-title">
+        数据封装过程（发送）
+      </div>
       <div class="flow-steps">
-        <div class="flow-step" v-for="(step, index) in 5" :key="index">
-          <div class="step-label">{{ layers[4 - index].name }}</div>
+        <div
+          v-for="(step, index) in 5"
+          :key="index"
+          class="flow-step"
+        >
+          <div class="step-label">
+            {{ layers[4 - index].name }}
+          </div>
           <div class="step-box">
             <span class="box-label">{{ layers[4 - index].dataUnit }}</span>
           </div>
-          <div class="step-arrow" v-if="index < 4">↓ 添加头部</div>
+          <div
+            v-if="index < 4"
+            class="step-arrow"
+          >
+            ↓ 添加头部
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/NetworkTroubleshooting.vue b/docs/.vitepress/theme/components/appendix/web-basics/NetworkTroubleshooting.vue
index 8e4f4bb..f26f02a 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/NetworkTroubleshooting.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/NetworkTroubleshooting.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="network-troubleshooting">
     <div class="problem-selector">
-      <div class="selector-title">选择问题类型</div>
+      <div class="selector-title">
+        选择问题类型
+      </div>
       <div class="problem-list">
         <button
           v-for="(problem, index) in problems"
@@ -16,16 +18,23 @@
       </div>
     </div>
 
-    <div class="solution-panel" v-if="selectedProblem !== null">
+    <div
+      v-if="selectedProblem !== null"
+      class="solution-panel"
+    >
       <div class="solution-header">
-        <div class="solution-title">{{ problems[selectedProblem].name }}</div>
+        <div class="solution-title">
+          {{ problems[selectedProblem].name }}
+        </div>
         <div class="solution-desc">
           {{ problems[selectedProblem].description }}
         </div>
       </div>
 
       <div class="solution-steps">
-        <div class="steps-title">🔧 解决步骤</div>
+        <div class="steps-title">
+          🔧 解决步骤
+        </div>
         <div class="steps-list">
           <div
             v-for="(step, index) in problems[selectedProblem].steps"
@@ -34,13 +43,22 @@
             :class="{ completed: completedSteps.has(index) }"
             @click="toggleStep(index)"
           >
-            <div class="step-number">{{ index + 1 }}</div>
+            <div class="step-number">
+              {{ index + 1 }}
+            </div>
             <div class="step-content">
-              <div class="step-action">{{ step.action }}</div>
-              <div class="step-command" v-if="step.command">
+              <div class="step-action">
+                {{ step.action }}
+              </div>
+              <div
+                v-if="step.command"
+                class="step-command"
+              >
                 <code>{{ step.command }}</code>
               </div>
-              <div class="step-explanation">{{ step.explanation }}</div>
+              <div class="step-explanation">
+                {{ step.explanation }}
+              </div>
             </div>
             <div class="step-check">
               {{ completedSteps.has(index) ? '✓' : '○' }}
@@ -50,61 +68,89 @@
       </div>
 
       <div class="related-tools">
-        <div class="tools-title">🛠️ 相关工具</div>
+        <div class="tools-title">
+          🛠️ 相关工具
+        </div>
         <div class="tools-list">
           <div
             v-for="(tool, index) in problems[selectedProblem].tools"
             :key="index"
             class="tool-item"
           >
-            <div class="tool-name">{{ tool.name }}</div>
-            <div class="tool-usage">{{ tool.usage }}</div>
+            <div class="tool-name">
+              {{ tool.name }}
+            </div>
+            <div class="tool-usage">
+              {{ tool.usage }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="common-commands">
-      <div class="commands-title">📋 常用诊断命令</div>
+      <div class="commands-title">
+        📋 常用诊断命令
+      </div>
       <div class="commands-grid">
-        <div class="command-card" v-for="(cmd, index) in commands" :key="index">
-          <div class="command-name">{{ cmd.name }}</div>
-          <div class="command-syntax">{{ cmd.syntax }}</div>
-          <div class="command-desc">{{ cmd.description }}</div>
+        <div
+          v-for="(cmd, index) in commands"
+          :key="index"
+          class="command-card"
+        >
+          <div class="command-name">
+            {{ cmd.name }}
+          </div>
+          <div class="command-syntax">
+            {{ cmd.syntax }}
+          </div>
+          <div class="command-desc">
+            {{ cmd.description }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="troubleshooting-tips">
-      <div class="tips-title">💡 故障排查技巧</div>
+      <div class="tips-title">
+        💡 故障排查技巧
+      </div>
       <div class="tips-list">
         <div class="tip-item">
-          <div class="tip-number">1</div>
+          <div class="tip-number">
+            1
+          </div>
           <div class="tip-content">
             <strong>从底层到顶层</strong>
-            <br />物理层 → 链路层 → 网络层 → 传输层 → 应用层
+            <br>物理层 → 链路层 → 网络层 → 传输层 → 应用层
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-number">2</div>
+          <div class="tip-number">
+            2
+          </div>
           <div class="tip-content">
             <strong>分层排查</strong>
-            <br />先确定问题发生在哪一层，再针对性解决
+            <br>先确定问题发生在哪一层，再针对性解决
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-number">3</div>
+          <div class="tip-number">
+            3
+          </div>
           <div class="tip-content">
             <strong>二分法定位</strong>
-            <br />
+            <br>
             ping 本机 → ping 网关 → ping 外网 → ping 域名
           </div>
         </div>
         <div class="tip-item">
-          <div class="tip-number">4</div>
+          <div class="tip-number">
+            4
+          </div>
           <div class="tip-content">
             <strong>查看日志</strong>
-            <br />系统日志、应用日志、防火墙日志记录关键信息
+            <br>系统日志、应用日志、防火墙日志记录关键信息
           </div>
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/RenderingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/RenderingStrategyDemo.vue
index 32fa687..3f700a7 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/RenderingStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/RenderingStrategyDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="render-demo">
     <div class="header">
-      <div class="title">渲染策略：CSR / SSR / SSG</div>
-      <div class="subtitle">选择策略，观察首屏表现</div>
+      <div class="title">
+        渲染策略：CSR / SSR / SSG
+      </div>
+      <div class="subtitle">
+        选择策略，观察首屏表现
+      </div>
     </div>
 
     <div class="options">
@@ -23,20 +27,34 @@
 
     <div class="cards">
       <div class="card">
-        <div class="label">TTFB</div>
-        <div class="value">{{ metrics.ttfb }} ms</div>
+        <div class="label">
+          TTFB
+        </div>
+        <div class="value">
+          {{ metrics.ttfb }} ms
+        </div>
       </div>
       <div class="card">
-        <div class="label">可交互时间</div>
-        <div class="value">{{ metrics.tti }} ms</div>
+        <div class="label">
+          可交互时间
+        </div>
+        <div class="value">
+          {{ metrics.tti }} ms
+        </div>
       </div>
       <div class="card">
-        <div class="label">SEO 友好</div>
-        <div class="value">{{ metrics.seo }}</div>
+        <div class="label">
+          SEO 友好
+        </div>
+        <div class="value">
+          {{ metrics.seo }}
+        </div>
       </div>
     </div>
 
-    <div class="hint">{{ metrics.note }}</div>
+    <div class="hint">
+      {{ metrics.note }}
+    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue
index 73539da..9f895fc 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/ResponsiveGridDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="responsive-demo">
     <div class="header">
-      <div class="title">响应式布局：一套代码，多种屏幕</div>
-      <div class="subtitle">拖动宽度，观察列数变化</div>
+      <div class="title">
+        响应式布局：一套代码，多种屏幕
+      </div>
+      <div class="subtitle">
+        拖动宽度，观察列数变化
+      </div>
     </div>
 
     <div class="controls">
@@ -19,12 +23,24 @@
         min="320"
         max="1200"
         step="10"
-      />
+      >
     </div>
 
-    <div class="preview" :style="{ width: viewportWidth + 'px' }">
-      <div class="grid" :style="gridStyle">
-        <div v-for="n in 6" :key="n" class="card">Card {{ n }}</div>
+    <div
+      class="preview"
+      :style="{ width: viewportWidth + 'px' }"
+    >
+      <div
+        class="grid"
+        :style="gridStyle"
+      >
+        <div
+          v-for="n in 6"
+          :key="n"
+          class="card"
+        >
+          Card {{ n }}
+        </div>
       </div>
     </div>
 
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue
index 9193146..0b8fceb 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/RoutingModeDemo.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="routing-demo">
     <div class="header">
-      <div class="title">路由方式：整页刷新 vs 局部切换</div>
-      <div class="subtitle">点击导航，感受体验差异</div>
+      <div class="title">
+        路由方式：整页刷新 vs 局部切换
+      </div>
+      <div class="subtitle">
+        点击导航，感受体验差异
+      </div>
     </div>
 
     <div class="mode-switch">
@@ -27,14 +31,26 @@
     </div>
 
     <div class="nav">
-      <button v-for="page in pages" :key="page" @click="navigate(page)">
+      <button
+        v-for="page in pages"
+        :key="page"
+        @click="navigate(page)"
+      >
         {{ page }}
       </button>
     </div>
 
     <div class="screen">
-      <div v-if="loading" class="loading">页面加载中...</div>
-      <div v-else class="content">
+      <div
+        v-if="loading"
+        class="loading"
+      >
+        页面加载中...
+      </div>
+      <div
+        v-else
+        class="content"
+      >
         当前页面：<strong>{{ currentPage }}</strong>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/SemanticTagsDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/SemanticTagsDemo.vue
index 66403c9..b5990ca 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/SemanticTagsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/SemanticTagsDemo.vue
@@ -25,11 +25,20 @@
       <div class="row">
         <span class="label">常见位置</span><span>{{ current.scene }}</span>
       </div>
-      <div class="row code-title">示例</div>
+      <div class="row code-title">
+        示例
+      </div>
       <pre><code>{{ current.example }}</code></pre>
-      <div class="row code-title">渲染效果</div>
-      <div class="preview-box" v-html="current.example"></div>
-      <div class="row tip">小贴士：{{ current.tip }}</div>
+      <div class="row code-title">
+        渲染效果
+      </div>
+      <div
+        class="preview-box"
+        v-html="current.example"
+      />
+      <div class="row tip">
+        小贴士：{{ current.tip }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/SliceRequestDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/SliceRequestDemo.vue
index b6db836..e94c18f 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/SliceRequestDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/SliceRequestDemo.vue
@@ -5,34 +5,58 @@
 <template>
   <div class="slice-demo">
     <div class="header">
-      <div class="title">切图时代：请求数越多越慢</div>
-      <div class="subtitle">调整切图数量，观察加载时间变化</div>
+      <div class="title">
+        切图时代：请求数越多越慢
+      </div>
+      <div class="subtitle">
+        调整切图数量，观察加载时间变化
+      </div>
     </div>
 
     <div class="controls">
       <label>
         切图数量：<strong>{{ slices }}</strong> 张
       </label>
-      <input v-model="slices" type="range" min="1" max="30" step="1" />
+      <input
+        v-model="slices"
+        type="range"
+        min="1"
+        max="30"
+        step="1"
+      >
       <label class="toggle">
-        <input v-model="useSprite" type="checkbox" />
+        <input
+          v-model="useSprite"
+          type="checkbox"
+        >
         合并雪碧图 (Sprite)
       </label>
     </div>
 
     <div class="metrics">
       <div class="metric">
-        <div class="label">总请求数</div>
-        <div class="value">{{ totalRequests }}</div>
+        <div class="label">
+          总请求数
+        </div>
+        <div class="value">
+          {{ totalRequests }}
+        </div>
       </div>
       <div class="metric">
-        <div class="label">预计加载时间</div>
-        <div class="value">{{ loadTime }} ms</div>
+        <div class="label">
+          预计加载时间
+        </div>
+        <div class="value">
+          {{ loadTime }} ms
+        </div>
       </div>
     </div>
 
     <div class="bar">
-      <div class="progress" :style="{ width: barWidth + '%' }"></div>
+      <div
+        class="progress"
+        :style="{ width: barWidth + '%' }"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue
index 6460bfd..ffa664e 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/SpaStatePreservationDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="spa-state-demo">
     <div class="header">
-      <div class="title">页面切换时，输入会不会丢？</div>
+      <div class="title">
+        页面切换时，输入会不会丢？
+      </div>
       <div class="subtitle">
         同样点击“切换页面”，MPA 会像刷新一样清空；SPA 会保留状态
       </div>
@@ -26,7 +28,12 @@
       >
         SPA（局部切换）
       </button>
-      <button class="reset" @click="resetAll">重置</button>
+      <button
+        class="reset"
+        @click="resetAll"
+      >
+        重置
+      </button>
     </div>
 
     <div class="app">
@@ -43,8 +50,16 @@
       </div>
 
       <div class="screen">
-        <div v-if="loading" class="loading">加载中...</div>
-        <div v-else class="content">
+        <div
+          v-if="loading"
+          class="loading"
+        >
+          加载中...
+        </div>
+        <div
+          v-else
+          class="content"
+        >
           <div class="row">
             当前页面：<strong>{{ page }}</strong>
           </div>
@@ -52,7 +67,11 @@
           <div class="form">
             <label>
               备注（模拟表单输入）：
-              <input v-model="note" type="text" placeholder="输入点东西试试" />
+              <input
+                v-model="note"
+                type="text"
+                placeholder="输入点东西试试"
+              >
             </label>
             <div class="help">
               提示：切到别的页面再回来，看看这段文字还在不在。
@@ -61,23 +80,39 @@
 
           <div class="row">
             购物车数量（模拟状态）：
-            <button class="small" @click="cart = Math.max(0, cart - 1)">
+            <button
+              class="small"
+              @click="cart = Math.max(0, cart - 1)"
+            >
               -
             </button>
             <strong class="num">{{ cart }}</strong>
-            <button class="small" @click="cart = cart + 1">+</button>
+            <button
+              class="small"
+              @click="cart = cart + 1"
+            >
+              +
+            </button>
           </div>
         </div>
       </div>
 
       <div class="explain">
         <div class="card">
-          <div class="label">你现在看到的现象</div>
-          <div class="value">{{ explainText }}</div>
+          <div class="label">
+            你现在看到的现象
+          </div>
+          <div class="value">
+            {{ explainText }}
+          </div>
         </div>
         <div class="card">
-          <div class="label">背后的原因（一句话）</div>
-          <div class="value">{{ reasonText }}</div>
+          <div class="label">
+            背后的原因（一句话）
+          </div>
+          <div class="value">
+            {{ reasonText }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/SubnetCalculator.vue b/docs/.vitepress/theme/components/appendix/web-basics/SubnetCalculator.vue
index a22f70c..682f74e 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/SubnetCalculator.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/SubnetCalculator.vue
@@ -8,88 +8,158 @@
           type="text"
           placeholder="例如: 192.168.1.0"
           class="ip-input"
-        />
+        >
       </div>
 
       <div class="input-group">
         <label class="input-label">子网掩码</label>
-        <select v-model="cidr" class="cidr-select">
-          <option v-for="n in 32" :key="n" :value="n">/{{ n }}</option>
+        <select
+          v-model="cidr"
+          class="cidr-select"
+        >
+          <option
+            v-for="n in 32"
+            :key="n"
+            :value="n"
+          >
+            /{{ n }}
+          </option>
         </select>
       </div>
 
-      <button class="calculate-btn" @click="calculate">计算</button>
+      <button
+        class="calculate-btn"
+        @click="calculate"
+      >
+        计算
+      </button>
     </div>
 
-    <div class="results" v-if="results">
+    <div
+      v-if="results"
+      class="results"
+    >
       <div class="result-section">
-        <div class="section-title">基本信息</div>
+        <div class="section-title">
+          基本信息
+        </div>
         <div class="result-grid">
           <div class="result-item">
-            <div class="result-label">网络地址</div>
-            <div class="result-value">{{ results.network }}</div>
+            <div class="result-label">
+              网络地址
+            </div>
+            <div class="result-value">
+              {{ results.network }}
+            </div>
           </div>
           <div class="result-item">
-            <div class="result-label">广播地址</div>
-            <div class="result-value">{{ results.broadcast }}</div>
+            <div class="result-label">
+              广播地址
+            </div>
+            <div class="result-value">
+              {{ results.broadcast }}
+            </div>
           </div>
           <div class="result-item">
-            <div class="result-label">子网掩码</div>
-            <div class="result-value">{{ results.mask }}</div>
+            <div class="result-label">
+              子网掩码
+            </div>
+            <div class="result-value">
+              {{ results.mask }}
+            </div>
           </div>
           <div class="result-item">
-            <div class="result-label">可用主机数</div>
-            <div class="result-value">{{ results.hosts }}</div>
+            <div class="result-label">
+              可用主机数
+            </div>
+            <div class="result-value">
+              {{ results.hosts }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="result-section">
-        <div class="section-title">IP 范围</div>
+        <div class="section-title">
+          IP 范围
+        </div>
         <div class="range-display">
           <div class="range-item">
-            <div class="range-label">起始 IP</div>
-            <div class="range-value">{{ results.firstHost }}</div>
+            <div class="range-label">
+              起始 IP
+            </div>
+            <div class="range-value">
+              {{ results.firstHost }}
+            </div>
+          </div>
+          <div class="range-arrow">
+            →
           </div>
-          <div class="range-arrow">→</div>
           <div class="range-item">
-            <div class="range-label">结束 IP</div>
-            <div class="range-value">{{ results.lastHost }}</div>
+            <div class="range-label">
+              结束 IP
+            </div>
+            <div class="range-value">
+              {{ results.lastHost }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="result-section">
-        <div class="section-title">二进制表示</div>
+        <div class="section-title">
+          二进制表示
+        </div>
         <div class="binary-display">
           <div class="binary-row">
-            <div class="binary-label">IP 地址</div>
-            <div class="binary-value">{{ results.binaryIp }}</div>
+            <div class="binary-label">
+              IP 地址
+            </div>
+            <div class="binary-value">
+              {{ results.binaryIp }}
+            </div>
           </div>
           <div class="binary-row">
-            <div class="binary-label">子网掩码</div>
-            <div class="binary-value">{{ results.binaryMask }}</div>
+            <div class="binary-label">
+              子网掩码
+            </div>
+            <div class="binary-value">
+              {{ results.binaryMask }}
+            </div>
           </div>
           <div class="binary-row">
-            <div class="binary-label">网络地址</div>
-            <div class="binary-value">{{ results.binaryNetwork }}</div>
+            <div class="binary-label">
+              网络地址
+            </div>
+            <div class="binary-value">
+              {{ results.binaryNetwork }}
+            </div>
           </div>
         </div>
       </div>
 
       <div class="result-section">
-        <div class="section-title">子网类型</div>
+        <div class="section-title">
+          子网类型
+        </div>
         <div class="subnet-info">
-          <div class="info-tag" :class="getSubnetClass(cidr)">
+          <div
+            class="info-tag"
+            :class="getSubnetClass(cidr)"
+          >
             {{ getSubnetType(cidr) }}
           </div>
-          <div class="info-desc">{{ getSubnetDescription(cidr) }}</div>
+          <div class="info-desc">
+            {{ getSubnetDescription(cidr) }}
+          </div>
         </div>
       </div>
     </div>
 
     <div class="example-presets">
-      <div class="presets-title">常见子网示例</div>
+      <div class="presets-title">
+        常见子网示例
+      </div>
       <div class="presets-grid">
         <button
           v-for="(preset, index) in presets"
@@ -103,7 +173,9 @@
     </div>
 
     <div class="info-box">
-      <div class="info-title">💡 子网划分知识点</div>
+      <div class="info-title">
+        💡 子网划分知识点
+      </div>
       <div class="info-content">
         <div class="info-item">
           <strong>什么是子网？</strong>
@@ -115,11 +187,11 @@
         </div>
         <div class="info-item">
           <strong>常用子网掩码</strong>
-          <br />
+          <br>
           /8 = 255.0.0.0 (A 类网络)
-          <br />
+          <br>
           /16 = 255.255.0.0 (B 类网络)
-          <br />
+          <br>
           /24 = 255.255.255.0 (C 类网络)
         </div>
       </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
index ba1124e..83173e9 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/TcpHandshakeDemo.vue
@@ -6,10 +6,20 @@
         <span :class="connectionStatus.toLowerCase()">{{ statusText }}</span>
       </div>
       <div class="buttons">
-        <button v-if="step === 0" @click="startHandshake" class="action-btn">
+        <button
+          v-if="step === 0"
+          class="action-btn"
+          @click="startHandshake"
+        >
           {{ t.connect }}
         </button>
-        <button v-else @click="reset" class="reset-btn">{{ t.reset }}</button>
+        <button
+          v-else
+          class="reset-btn"
+          @click="reset"
+        >
+          {{ t.reset }}
+        </button>
       </div>
     </div>
 
@@ -20,9 +30,17 @@
           <span class="icon">💻</span>
           <span class="name">{{ t.client }}</span>
         </div>
-        <div class="line"></div>
-        <div class="state-marker" :class="{ active: step >= 1 }">SYN_SENT</div>
-        <div class="state-marker" :class="{ active: step >= 3 }">
+        <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>
@@ -32,9 +50,16 @@
         <!-- 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
+              v-if="showSyn"
+              class="packet syn"
+            >
+              <div class="packet-body">
+                SYN
+              </div>
+              <div class="packet-detail">
+                SEQ=0
+              </div>
             </div>
           </transition>
         </div>
@@ -42,9 +67,16 @@
         <!-- 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
+              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>
@@ -52,9 +84,16 @@
         <!-- 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
+              v-if="showAck"
+              class="packet ack"
+            >
+              <div class="packet-body">
+                ACK
+              </div>
+              <div class="packet-detail">
+                SEQ=1, ACK=1
+              </div>
             </div>
           </transition>
         </div>
@@ -66,9 +105,17 @@
           <span class="icon">🖥️</span>
           <span class="name">{{ t.server }}</span>
         </div>
-        <div class="line"></div>
-        <div class="state-marker" :class="{ active: step >= 2 }">SYN_RCVD</div>
-        <div class="state-marker" :class="{ active: step >= 3 }">
+        <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>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/TcpUdpComparison.vue b/docs/.vitepress/theme/components/appendix/web-basics/TcpUdpComparison.vue
index 5633903..00440cd 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/TcpUdpComparison.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/TcpUdpComparison.vue
@@ -3,40 +3,72 @@
     <div class="comparison-grid">
       <div class="protocol-card tcp">
         <div class="protocol-header">
-          <div class="protocol-icon">🔒</div>
-          <div class="protocol-title">TCP</div>
-          <div class="protocol-subtitle">传输控制协议</div>
+          <div class="protocol-icon">
+            🔒
+          </div>
+          <div class="protocol-title">
+            TCP
+          </div>
+          <div class="protocol-subtitle">
+            传输控制协议
+          </div>
         </div>
 
         <div class="protocol-features">
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">可靠传输</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              可靠传输
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">面向连接</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              面向连接
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">流量控制</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              流量控制
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">拥塞控制</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              拥塞控制
+            </div>
           </div>
           <div class="feature-item bad">
-            <div class="feature-icon">✗</div>
-            <div class="feature-text">速度较慢</div>
+            <div class="feature-icon">
+              ✗
+            </div>
+            <div class="feature-text">
+              速度较慢
+            </div>
           </div>
           <div class="feature-item bad">
-            <div class="feature-icon">✗</div>
-            <div class="feature-text">开销较大</div>
+            <div class="feature-icon">
+              ✗
+            </div>
+            <div class="feature-text">
+              开销较大
+            </div>
           </div>
         </div>
 
         <div class="protocol-example">
-          <div class="example-title">应用场景</div>
+          <div class="example-title">
+            应用场景
+          </div>
           <div class="example-tags">
             <span class="tag">网页浏览</span>
             <span class="tag">文件传输</span>
@@ -45,22 +77,48 @@
         </div>
 
         <div class="handshake-demo">
-          <div class="demo-title">三次握手</div>
+          <div class="demo-title">
+            三次握手
+          </div>
           <div class="handshake-steps">
-            <div class="step" :class="{ active: tcpStep >= 1 }">
-              <div class="step-arrow">→</div>
-              <div class="step-text">SYN</div>
+            <div
+              class="step"
+              :class="{ active: tcpStep >= 1 }"
+            >
+              <div class="step-arrow">
+                →
+              </div>
+              <div class="step-text">
+                SYN
+              </div>
             </div>
-            <div class="step" :class="{ active: tcpStep >= 2 }">
-              <div class="step-arrow">←</div>
-              <div class="step-text">SYN-ACK</div>
+            <div
+              class="step"
+              :class="{ active: tcpStep >= 2 }"
+            >
+              <div class="step-arrow">
+                ←
+              </div>
+              <div class="step-text">
+                SYN-ACK
+              </div>
             </div>
-            <div class="step" :class="{ active: tcpStep >= 3 }">
-              <div class="step-arrow">→</div>
-              <div class="step-text">ACK</div>
+            <div
+              class="step"
+              :class="{ active: tcpStep >= 3 }"
+            >
+              <div class="step-arrow">
+                →
+              </div>
+              <div class="step-text">
+                ACK
+              </div>
             </div>
           </div>
-          <button class="demo-btn" @click="startTcpHandshake">
+          <button
+            class="demo-btn"
+            @click="startTcpHandshake"
+          >
             {{ tcpStep === 0 ? '演示握手' : '重新演示' }}
           </button>
         </div>
@@ -68,40 +126,72 @@
 
       <div class="protocol-card udp">
         <div class="protocol-header">
-          <div class="protocol-icon">⚡</div>
-          <div class="protocol-title">UDP</div>
-          <div class="protocol-subtitle">用户数据报协议</div>
+          <div class="protocol-icon">
+            ⚡
+          </div>
+          <div class="protocol-title">
+            UDP
+          </div>
+          <div class="protocol-subtitle">
+            用户数据报协议
+          </div>
         </div>
 
         <div class="protocol-features">
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">快速传输</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              快速传输
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">开销小</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              开销小
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">无连接</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              无连接
+            </div>
           </div>
           <div class="feature-item good">
-            <div class="feature-icon">✓</div>
-            <div class="feature-text">支持多播</div>
+            <div class="feature-icon">
+              ✓
+            </div>
+            <div class="feature-text">
+              支持多播
+            </div>
           </div>
           <div class="feature-item bad">
-            <div class="feature-icon">✗</div>
-            <div class="feature-text">不可靠</div>
+            <div class="feature-icon">
+              ✗
+            </div>
+            <div class="feature-text">
+              不可靠
+            </div>
           </div>
           <div class="feature-item bad">
-            <div class="feature-icon">✗</div>
-            <div class="feature-text">可能丢包</div>
+            <div class="feature-icon">
+              ✗
+            </div>
+            <div class="feature-text">
+              可能丢包
+            </div>
           </div>
         </div>
 
         <div class="protocol-example">
-          <div class="example-title">应用场景</div>
+          <div class="example-title">
+            应用场景
+          </div>
           <div class="example-tags">
             <span class="tag">视频直播</span>
             <span class="tag">在线游戏</span>
@@ -110,14 +200,23 @@
         </div>
 
         <div class="handshake-demo">
-          <div class="demo-title">直接发送</div>
+          <div class="demo-title">
+            直接发送
+          </div>
           <div class="handshake-steps">
             <div class="step direct">
-              <div class="step-arrow">→</div>
-              <div class="step-text">直接发送数据</div>
+              <div class="step-arrow">
+                →
+              </div>
+              <div class="step-text">
+                直接发送数据
+              </div>
             </div>
           </div>
-          <button class="demo-btn" @click="sendUdpData">
+          <button
+            class="demo-btn"
+            @click="sendUdpData"
+          >
             {{ udpSent ? '再发一次' : '发送数据' }}
           </button>
         </div>
@@ -169,37 +268,55 @@
     </div>
 
     <div class="real-world-example">
-      <div class="example-title">🎬 实际应用示例</div>
+      <div class="example-title">
+        🎬 实际应用示例
+      </div>
       <div class="scenario-grid">
         <div class="scenario">
-          <div class="scenario-icon">📺</div>
-          <div class="scenario-name">视频直播</div>
+          <div class="scenario-icon">
+            📺
+          </div>
+          <div class="scenario-name">
+            视频直播
+          </div>
           <div class="scenario-desc">
-            使用 <strong>UDP</strong>，因为： <br />• 丢几帧没关系，关键是实时
-            <br />• 重传会造成延迟和卡顿
+            使用 <strong>UDP</strong>，因为： <br>• 丢几帧没关系，关键是实时
+            <br>• 重传会造成延迟和卡顿
           </div>
         </div>
         <div class="scenario">
-          <div class="scenario-icon">🌐</div>
-          <div class="scenario-name">网页浏览</div>
+          <div class="scenario-icon">
+            🌐
+          </div>
+          <div class="scenario-name">
+            网页浏览
+          </div>
           <div class="scenario-desc">
-            使用 <strong>TCP</strong>，因为： <br />• 内容必须完整准确 <br />•
+            使用 <strong>TCP</strong>，因为： <br>• 内容必须完整准确 <br>•
             丢失任何数据都不可接受
           </div>
         </div>
         <div class="scenario">
-          <div class="scenario-icon">🎮</div>
-          <div class="scenario-name">在线游戏</div>
+          <div class="scenario-icon">
+            🎮
+          </div>
+          <div class="scenario-name">
+            在线游戏
+          </div>
           <div class="scenario-desc">
-            使用 <strong>UDP</strong>，因为： <br />• 响应速度比准确更重要
-            <br />• 实时同步玩家位置
+            使用 <strong>UDP</strong>，因为： <br>• 响应速度比准确更重要
+            <br>• 实时同步玩家位置
           </div>
         </div>
         <div class="scenario">
-          <div class="scenario-icon">📧</div>
-          <div class="scenario-name">邮件发送</div>
+          <div class="scenario-icon">
+            📧
+          </div>
+          <div class="scenario-name">
+            邮件发送
+          </div>
           <div class="scenario-desc">
-            使用 <strong>TCP</strong>，因为： <br />• 邮件内容不能丢失 <br />•
+            使用 <strong>TCP</strong>，因为： <br>• 邮件内容不能丢失 <br>•
             可靠性是第一要务
           </div>
         </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
index 262673a..da365d8 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/UrlParserDemo.vue
@@ -9,53 +9,50 @@
       <div class="omnibox">
         <span class="lock-icon">🔒</span>
         <!-- Segmented URL Display -->
-        <div class="segmented-url" v-if="parsedUrl">
+        <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
-          >
+          >{{ 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
-          >
+          >{{ 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
-          >
+          >:{{ parts.port }}</span>
           <span
             class="url-part pathname"
             :class="{ active: highlightedPart === 'pathname' }"
             @mouseover="highlightedPart = 'pathname'"
             @mouseleave="highlightedPart = null"
-            >{{ parts.pathname }}</span
-          >
+          >{{ 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
-          >
+          >{{ 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
-          >
+          >{{ parts.hash }}</span>
         </div>
         <input
           v-else
@@ -63,12 +60,15 @@
           type="text"
           class="url-input"
           placeholder="https://example.com"
-        />
+        >
       </div>
     </div>
 
     <div class="visualization-area">
-      <div v-if="parsedUrl" class="url-breakdown">
+      <div
+        v-if="parsedUrl"
+        class="url-breakdown"
+      >
         <div
           v-for="(part, key) in parts"
           :key="key"
@@ -81,11 +81,20 @@
             <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="segment-value">
+            {{ part || '-' }}
+          </div>
+          <div class="segment-desc">
+            {{ descriptions[key] }}
+          </div>
         </div>
       </div>
-      <div v-else class="error-state">Invalid URL format / 无效的 URL 格式</div>
+      <div
+        v-else
+        class="error-state"
+      >
+        Invalid URL format / 无效的 URL 格式
+      </div>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/UrlToBrowserDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/UrlToBrowserDemo.vue
index 525da8f..a846f6d 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/UrlToBrowserDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/UrlToBrowserDemo.vue
@@ -20,7 +20,7 @@
         <div
           class="line-fill"
           :style="{ width: (currentStage / (stages.length - 1)) * 100 + '%' }"
-        ></div>
+        />
       </div>
     </div>
 
@@ -31,13 +31,27 @@
       </div>
 
       <div class="component-wrapper">
-        <transition name="fade" mode="out-in">
-          <component :is="stages[currentStage].component" :key="currentStage" />
+        <transition
+          name="fade"
+          mode="out-in"
+        >
+          <component
+            :is="stages[currentStage].component"
+            :key="currentStage"
+          />
         </transition>
       </div>
 
-      <div class="action-footer" v-if="currentStage < stages.length - 1">
-        <button class="next-btn" @click="nextStage">下一步 →</button>
+      <div
+        v-if="currentStage < stages.length - 1"
+        class="action-footer"
+      >
+        <button
+          class="next-btn"
+          @click="nextStage"
+        >
+          下一步 →
+        </button>
       </div>
     </div>
   </div>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue
index 6b531e3..7ea12c4 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/VueReactComparisonDemo.vue
@@ -5,7 +5,9 @@
 <template>
   <div class="vr-demo">
     <div class="header">
-      <div class="title">Vue vs React：它们哪里像？哪里不一样？</div>
+      <div class="title">
+        Vue vs React：它们哪里像？哪里不一样？
+      </div>
       <div class="subtitle">
         选一个标签页，然后点“+1”，看看背后发生了什么（示意）。
       </div>
@@ -25,36 +27,56 @@
 
     <div class="grid">
       <div class="panel">
-        <div class="panel-title">Vue</div>
+        <div class="panel-title">
+          Vue
+        </div>
         <div class="preview">
           <div class="row">
             count: <strong>{{ count }}</strong>
           </div>
-          <button class="btn vue" @click="inc('vue')">+1</button>
+          <button
+            class="btn vue"
+            @click="inc('vue')"
+          >
+            +1
+          </button>
         </div>
         <div class="code">
-          <div class="code-title">典型写法（示意）</div>
+          <div class="code-title">
+            典型写法（示意）
+          </div>
           <pre><code class="language-vue">{{ vueCode }}</code></pre>
         </div>
       </div>
 
       <div class="panel">
-        <div class="panel-title">React</div>
+        <div class="panel-title">
+          React
+        </div>
         <div class="preview">
           <div class="row">
             count: <strong>{{ count }}</strong>
           </div>
-          <button class="btn react" @click="inc('react')">+1</button>
+          <button
+            class="btn react"
+            @click="inc('react')"
+          >
+            +1
+          </button>
         </div>
         <div class="code">
-          <div class="code-title">典型写法（示意）</div>
+          <div class="code-title">
+            典型写法（示意）
+          </div>
           <pre><code class="language-jsx">{{ reactCode }}</code></pre>
         </div>
       </div>
     </div>
 
     <div class="what">
-      <div class="what-title">点击 “+1” 时发生了什么？</div>
+      <div class="what-title">
+        点击 “+1” 时发生了什么？
+      </div>
       <div class="steps">
         <div
           v-for="(s, idx) in steps"
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue b/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
index aa5855e..d578382 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
@@ -19,14 +19,29 @@
           </button>
         </div>
 
-        <div class="preview" :class="current">
-          <h1 class="hero" :class="{ selected: selectedPart === 'h1' }" @click="selectedPart = 'h1'">
+        <div
+          class="preview"
+          :class="current"
+        >
+          <h1
+            class="hero"
+            :class="{ selected: selectedPart === 'h1' }"
+            @click="selectedPart = 'h1'"
+          >
             <span class="badge">①</span>欢迎来到我的网站
           </h1>
-          <p class="desc" :class="{ selected: selectedPart === 'p' }" @click="selectedPart = 'p'">
+          <p
+            class="desc"
+            :class="{ selected: selectedPart === 'p' }"
+            @click="selectedPart = 'p'"
+          >
             <span class="badge">②</span>这是一段描述文字
           </p>
-          <button class="cta" :class="{ selected: selectedPart === 'btn' }" @click="handleBtnClick">
+          <button
+            class="cta"
+            :class="{ selected: selectedPart === 'btn' }"
+            @click="handleBtnClick"
+          >
             <span class="badge">③</span>点我试试 ({{ clicks }})
           </button>
         </div>
@@ -34,18 +49,31 @@
 
       <div class="right-panel">
         <div class="code-section">
-          <div class="code-label">{{ codeTitle }}</div>
+          <div class="code-label">
+            {{ codeTitle }}
+          </div>
           <div class="code-block">
-            <div v-for="(line, i) in codeLines" :key="i" :class="['line', { hl: line.key === selectedPart }]">
+            <div
+              v-for="(line, i) in codeLines"
+              :key="i"
+              :class="['line', { hl: line.key === selectedPart }]"
+            >
               {{ line.text }}
             </div>
           </div>
         </div>
 
         <div class="explain-section">
-          <div class="explain-label">执行过程</div>
+          <div class="explain-label">
+            执行过程
+          </div>
           <ol class="steps">
-            <li v-for="s in steps" :key="s">{{ s }}</li>
+            <li
+              v-for="s in steps"
+              :key="s"
+            >
+              {{ s }}
+            </li>
           </ol>
         </div>
       </div>
diff --git a/docs/zh-cn/appendix/intro.md b/docs/zh-cn/appendix/intro.md
deleted file mode 100644
index 87f8b11..0000000
--- a/docs/zh-cn/appendix/intro.md
+++ /dev/null
@@ -1,186 +0,0 @@
-# 附录
-
-欢迎来到**附录**部分！这是一个人工智能基础和全栈开发基础的集合，是你学习旅程中的重要参考库。
-
-## 内容分类
-
-### AI 基础
-
-了解人工智能的核心概念、发展历程和前沿技术原理：
-<NavGrid>
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/prompt-engineering/"
-    title="提示工程"
-    description="掌握与 AI 高效对话的艺术，释放大模型的潜力"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/ai-history"
-    title="AI 发展史"
-    description="回顾 AI 发展的关键里程碑，理解技术演进轨迹"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/llm-principles"
-    title="大语言模型"
-    description="深入浅出地解释大语言模型（LLM）的工作原理及应用"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/multimodal-models"
-    title="多模态大模型"
-    description="探索能够处理图像、音频等多种数据模态的先进模型"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/image-generation"
-    title="AI 图像生成原理"
-    description="揭示 AI 图像生成的底层逻辑和技术实现"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition"
-    title="AI 音频模型"
-    description="了解 AI 在语音合成、识别和音乐生成中的应用"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/context-engineering"
-    title="上下文工程"
-    description="学习如何优化上下文管理，提升 AI 任务的长程连贯性"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/ai-agents"
-    title="Agent 智能体"
-    description="探索具有自主决策和执行能力的 AI 智能体架构"
-  />
-  <NavCard
-    href="/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary"
-    title="AI 能力词典"
-    description="AI 领域常用术语和核心概念的快速参考手册"
-  />
-</NavGrid>
-
-
-### 前端基础
-
-夯实前端开发的技术根基：
-<NavGrid>
-  <NavCard
-    href="/zh-cn/appendix/3-browser-and-frontend/html-css-layout"
-    title="HTML/CSS/JS 基础"
-    description="构建网页的三大支柱，前端开发入门必修"
-  />
-  <NavCard
-    href="/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks"
-    title="前端框架演进"
-    description="了解前端技术栈的演进历程，把握技术发展趋势"
-  />
-  <NavCard
-    href="/zh-cn/appendix/3-browser-and-frontend/web-performance"
-    title="前端性能优化"
-    description="学习提升网页加载速度和交互流畅度的关键策略"
-  />
-  <NavCard
-    href="/zh-cn/appendix/3-browser-and-frontend/graphics-animation"
-    title="Canvas 2D 基础"
-    description="掌握 Canvas 绑图 API，实现炫酷的图形和动画效果"
-  />
-  <NavCard
-    href="/zh-cn/appendix/3-browser-and-frontend/browser-as-os"
-    title="浏览器工作原理"
-    description="全链路分析浏览器渲染页面的完整过程"
-  />
-  <NavCard
-    href="/zh-cn/appendix/2-development-tools/debugging-art/"
-    title="浏览器开发者工具"
-    description="熟练使用开发者工具，高效定位和解决前端问题"
-  />
-</NavGrid>
-
-
-### 后端基础
-
-掌握后端开发的核心概念：
-<NavGrid>
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/backend-layered-architecture"
-    title="后端架构演进"
-    description="从单体到微服务，探索后端架构的演进之路"
-  />
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/backend-languages"
-    title="后端编程语言"
-    description="比较主流后端语言的特点和适用场景，选择最佳技术栈"
-  />
-  <NavCard
-    href="/zh-cn/appendix/5-data/database-fundamentals"
-    title="数据库原理"
-    description="理解数据库核心原理，掌握数据存储与检索的艺术"
-  />
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/caching"
-    title="系统缓存设计"
-    description="学习缓存策略，提升系统高并发处理能力"
-  />
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/message-queues"
-    title="消息队列设计"
-    description="掌握消息队列在解耦和削峰填谷中的关键作用"
-  />
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/auth-authorization"
-    title="认证授权原理与实践"
-    description="构建安全的身份认证和权限管理系统"
-  />
-  <NavCard
-    href="/zh-cn/appendix/5-data/data-tracking"
-    title="数据埋点设计"
-    description="科学设计数据埋点，为产品决策提供数据支撑"
-  />
-  <NavCard
-    href="/zh-cn/appendix/7-infrastructure-and-operations/incident-response"
-    title="线上运维"
-    description="掌握系统部署、监控和故障排查的运维技能"
-  />
-</NavGrid>
-
-
-### 通用技能
-
-软件开发的基础知识：
-<NavGrid>
-  <NavCard
-    href="/zh-cn/appendix/4-server-and-backend/api-intro"
-    title="API 基础"
-    description="API 接口设计与开发的基础知识"
-  />
-  <NavCard
-    href="/zh-cn/appendix/2-development-tools/ide-basics/"
-    title="IDE 基础"
-    description="了解集成开发环境（IDE）的内部工作机制"
-  />
-  <NavCard
-    href="/zh-cn/appendix/2-development-tools/command-line-shell"
-    title="终端基础"
-    description="掌握基本的命令行终端操作，提升开发效率"
-  />
-  <NavCard
-    href="/zh-cn/appendix/2-development-tools/git-version-control"
-    title="Git 详解"
-    description="深入理解 Git 版本控制原理和高级用法"
-  />
-  <NavCard
-    href="/zh-cn/appendix/1-computer-fundamentals/computer-networks"
-    title="计算机网络"
-    description="网络协议和通信原理的基础知识"
-  />
-  <NavCard
-    href="/zh-cn/appendix/7-infrastructure-and-operations/ci-cd"
-    title="部署与上线"
-    description="应用部署和发布的完整流程与最佳实践"
-  />
-</NavGrid>
-
-
-## 使用建议
-
-- 学习过程中作为参考资料，按需查阅
-- 遇到不熟悉的技术概念时，先在这里寻找解释
-- 建议通读一遍，建立完整的知识体系
-
-这是你的技术知识宝库，随时欢迎查阅！
diff --git a/docs/zh-cn/stage-2/intro.md b/docs/zh-cn/stage-2/intro.md
deleted file mode 100644
index 35f3f34..0000000
--- a/docs/zh-cn/stage-2/intro.md
+++ /dev/null
@@ -1,126 +0,0 @@
-# 初中级开发
-
-欢迎来到 **初中级开发** 阶段！在这里，你将深入全栈开发，掌握前端组件化、数据库设计、后端 API 开发与部署上线。
-
-## 你将学到什么
-
-### 前端开发
-
-掌握现代前端开发，学习组件库与设计工具的使用：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/frontend/2.0-lovart-assets/"
-    title="前端零：使用 Lovart 生产素材"
-    description="学习如何使用 Lovart 等 AI 工具快速生成高质量的游戏素材与 UI 资源"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/frontend/2.1-figma-mastergo/"
-    title="前端一：Figma 与 MasterGo 入门"
-    description="掌握专业 UI 设计工具的基础操作，从设计稿到代码的协作流程"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/frontend/2.2-ui-design/"
-    title="前端二：构建第一个现代应用程序 - UI 设计"
-    description="从零开始设计一个现代 Web 应用的界面，实践 UI 设计原则"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/frontend/2.3-multi-product-ui/"
-    title="前端三：参考 UI 设计规范与多产品 UI 设计"
-    description="学习主流 UI 设计规范，提升产品设计的一致性与美感"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/"
-    title="前端四：一起做霍格沃茨画像"
-    description="实战项目：结合 AI 生成的图像，构建一个交互式的霍格沃茨画像应用"
-  />
-</NavGrid>
-
-### 后端与全栈
-
-学习 API 设计、数据库管理以及应用部署策略：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.1-what-is-api/extra2/"
-    title="后端一：什么是 API"
-    description="理解 API 的核心概念，它是前后端交互的桥梁"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/"
-    title="后端二：从数据库到 Supabase"
-    description="掌握关系型数据库基础，并学习使用 Supabase 这一现代 BaaS 平台"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.3-ai-interface-code/"
-    title="后端三：大模型辅助编写接口代码与接口文档"
-    description="利用 AI 辅助生成后端接口代码及标准的接口文档，提升开发效率"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.4-git-workflow/extra1/"
-    title="后端四：Git 工作流"
-    description="掌握 Git 版本控制系统的核心操作与协作流程"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/"
-    title="后端五：如何部署 Web 应用"
-    description="学习使用 Zeabur 快速部署你的全栈应用到云端"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.6-modern-cli/extra7/"
-    title="后端六：现代 CLI 开发工具"
-    description="探索现代 CLI 工具，提升命令行环境下的开发体验"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/backend/2.7-stripe-payment/"
-    title="后端七：如何集成 Stripe 等收费系统"
-    description="实战：为你的应用集成 Stripe 支付功能，实现商业化变现"
-  />
-</NavGrid>
-
-### 大作业
-
-通过实战项目巩固你的全栈开发技能：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/assignments/2.1-fullstack-app/"
-    title="大作业 1：构建第一个现代应用程序 - 全栈应用"
-    description="综合运用所学知识，独立完成一个功能完整的全栈应用开发"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/"
-    title="大作业 2：现代前端组件库 + Trae 实战"
-    description="使用现代组件库与 Trae IDE，高效构建复杂的前端界面"
-  />
-</NavGrid>
-
-### AI 能力扩展
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/"
-    title="AI 一：Dify 入门与知识库集成"
-    description="学习使用 Dify 构建 AI 应用，并集成私有知识库"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/"
-    title="AI 二：学会查询 AI 词典与集成多模态 API"
-    description="探索更多 AI 能力，集成视觉、语音等多模态 API"
-  />
-</NavGrid>
-
-## 适合人群
-
-- 有一定编程基础，想系统学习全栈开发的开发者
-- 希望从产品经理转型为全栈工程师的学习者
-- 想要掌握现代开发工具和工作流的初中级开发者
-- 希望独立开发完整产品的创业者
-
-## 前置要求
-
-- 完成「新手与产品原型」阶段，或具备同等基础知识
-- 了解基本的 HTML/CSS/JavaScript 概念
-- 对 AI 编程工具有初步了解
-
-准备好深入全栈开发了吗？点击左侧导航开始学习吧！
diff --git a/docs/zh-cn/stage-3/intro.md b/docs/zh-cn/stage-3/intro.md
deleted file mode 100644
index 17583b7..0000000
--- a/docs/zh-cn/stage-3/intro.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# 高级开发
-
-欢迎来到 **高级开发** 阶段！在这里，你将构建复杂跨平台应用，掌握微信小程序实战，挑战更高阶的 AI 原生应用开发。
-
-## 你将学到什么
-
-### 核心技能
-
-深入掌握 MCP 协议与 Claude Code 高级技巧，提升开发效率：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/core-skills/3.1-mcp-claude-code-skills/"
-    title="高级一：MCP 与 Claude Code Skills"
-    description="掌握 Model Context Protocol (MCP)，扩展 AI 编程工具的能力边界"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/core-skills/3.2-long-running-tasks/"
-    title="高级二：如何让 Coding Tools 长时间工作"
-    description="学习如何让 AI 编码工具处理长时间运行的复杂任务"
-  />
-</NavGrid>
-
-### 多平台开发
-
-构建微信小程序、Android 和 iOS 应用，实现跨平台覆盖：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/"
-    title="高级三：如何构建微信小程序"
-    description="从零开始开发微信小程序，掌握小程序开发的核心流程"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/"
-    title="高级四：如何构建微信小程序（包含后端）"
-    description="构建带有后端支持的完整微信小程序应用"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.5-android-app/"
-    title="高级五：如何构建安卓程序"
-    description="使用现代跨平台框架构建 Android 原生应用"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.6-ios-app/"
-    title="高级六：如何构建 iOS 程序"
-    description="开发并发布 iOS 应用，掌握 iOS 生态的开发规范"
-  />
-</NavGrid>
-
-### 个人品牌
-
-打造属于自己的个人网站与技术博客，建立个人影响力：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/"
-    title="高级七：如何构建属于自己的个人网页与学术博客"
-    description="使用现代化技术栈搭建高性能、高颜值的个人博客"
-  />
-</NavGrid>
-
-### AI 能力附录
-
-探索 RAG、LangGraph 等高级 AI 技术，构建复杂的 AI 应用工作流：
-
-<NavGrid>
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/"
-    title="高级 AI 一：什么是 RAG 以及它如何工作"
-    description="深入理解检索增强生成 (RAG) 的原理及其在 AI 应用中的价值"
-  />
-  <NavCard
-    href="/easy-vibe/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/"
-    title="高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例"
-    description="学习使用 LangGraph 编排复杂的 AI 工作流，构建高级 RAG 系统"
-  />
-</NavGrid>
-
-## 适合人群
-
-- 具备全栈开发经验，想挑战更复杂应用的高级开发者
-- 希望掌握跨平台开发技术的工程师
-- 想要深入了解 AI 原生应用开发的探索者
-- 希望建立个人技术品牌的技术博主
-
-## 前置要求
-
-- 完成「初中级开发」阶段，或具备全栈开发经验
-- 熟悉前端框架（如 React/Vue）和后端开发
-- 了解基本的 AI 概念和 API 使用
-
-准备好挑战高级开发了吗？点击左侧导航开始学习吧！
diff --git a/eslint.config.js b/eslint.config.js
index 3c7bd1d..3073edc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -9,28 +9,52 @@ export default [
   js.configs.recommended,
   ...pluginVue.configs['flat/recommended'],
   {
-    files: ['**/*.vue', '**/*.js'],
+    files: ['**/*.vue', '**/*.js', '**/*.ts'],
     languageOptions: {
       parser: vueParser,
       parserOptions: {
         ecmaVersion: 'latest',
-        sourceType: 'module'
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: false
+        }
       }
     },
     rules: {
+      // Important Vue rules - keep as errors
       'vue/no-ref-as-operand': 'error',
-      'vue/no-setup-props-destructure': 'error',
       'vue/no-template-shadow': 'error',
       'vue/require-v-for-key': 'error',
       'vue/no-use-v-if-with-v-for': 'error',
-      'vue/require-valid-default-prop': 'error',
       'vue/no-mutating-props': 'error',
       'vue/return-in-computed-property': 'error',
       'vue/no-side-effects-in-computed-properties': 'error',
       'vue/no-async-in-computed-properties': 'error',
       'no-undef': 'error',
+
+      // Relaxed rules - warnings or off
+      'vue/no-setup-props-destructure': 'warn',
+      'vue/require-valid-default-prop': 'off',
       'no-unused-vars': 'warn',
-      'vue/multi-word-component-names': 'off'
+
+      // Disable formatting rules (handled by Prettier)
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/html-indent': 'off',
+      'vue/multiline-html-element-content-newline': 'off',
+      'vue/first-attribute-linebreak': 'off',
+
+      // Other Vue rules
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off', // v-html is common in docs
+      'no-case-declarations': 'off', // Too strict for demo code
+      'no-control-regex': 'off', // Terminal codes need this
+      'no-useless-escape': 'warn', // Sometimes needed for clarity
+      'no-dupe-keys': 'error', // Real issue
+      'no-prototype-builtins': 'warn', // Common in demo code
+      'no-dupe-else-if': 'warn', // Sometimes intentional
+      'no-async-promise-executor': 'warn' // Common pattern in demo code
     }
   }
 ]