feat(docs): add performance overview demo component and update content structure

- Create PerformanceOverviewDemo.vue with interactive performance dimension visualization
- Update config.mjs to support new component registration
- Add new frontend evolution components to theme/index.js
- Consolidate stage-0 intro pages into index.md across all locales
- Enhance LLM intro documentation with tokenization details

docs/.vitepress/theme/components/appendix/llm-intro/MoEDemo.vue

@@ -15,8 +15,8 @@
       <div class="mode-desc">
         {{
           architecture === 'dense'
-            ? '全能天才：每个问题都动用整个大脑 (100% 激活)'
-            : '专家团队：根据问题指派专人处理 (稀疏激活)'
+            ? '全能天才：每个 Token 都激活所有神经元 (100% 激活)'
+            : '专家团队：每个 Token 路由给特定专家 (Token-Level Routing)'
         }}
       </div>
     </div>
@@ -25,7 +25,7 @@
     <div class="visual-stage">
       <!-- Step 1: Input Selection -->
       <div class="stage-section input-section">
-        <div class="section-label">1. 输入指令 (Input)</div>
+        <div class="section-label">1. 选择输入 (Select Input)</div>
         <div class="task-selector">
           <button
             v-for="(task, idx) in tasks"
@@ -39,105 +39,116 @@
             <span class="task-text">{{ task.label }}</span>
           </button>
         </div>
-        <div
-          class="token-stream"
-          :class="{ flowing: processing && currentStep >= 1 }"
-        >
-          <div class="token-particle">{{ selectedTask.icon }}</div>
-        </div>
       </div>
 
-      <!-- Arrow -->
-      <div class="flow-arrow">⬇️</div>
-
-      <!-- Step 2: Processing Unit (Dense or MoE) -->
-      <div class="stage-section process-section">
-        <div class="section-label">
-          2. 模型处理 (Processing)
-          <span v-if="processing" class="status-badge">计算中...</span>
-        </div>
-
-        <!-- Dense Visualization -->
-        <div v-if="architecture === 'dense'" class="dense-visualization">
-          <div
-            class="dense-block"
-            :class="{ activating: processing && currentStep === 2 }"
-          >
-            <div class="dense-label">前馈神经网络 (FFN)</div>
-            <div class="neuron-grid">
-              <div v-for="n in 32" :key="n" class="neuron"></div>
-            </div>
-            <div class="activation-info" v-if="processing && currentStep === 2">
-              🔥 激活率: 100% (全员过载)
-            </div>
+      <!-- Processing Pipeline -->
+      <div class="pipeline-container">
+        <!-- Token Flow Animation -->
+        <div class="token-flow-viz" v-if="processing">
+          <div class="current-token-display">
+            <span class="token-label">Current Token:</span>
+            <span class="token-badge" :style="{ borderColor: getExpertColor(currentToken?.expert) }">
+              {{ currentToken?.text || '...' }}
+            </span>
           </div>
         </div>
 
-        <!-- MoE Visualization -->
-        <div v-else class="moe-visualization">
-          <!-- Router -->
-          <div
-            class="router-node"
-            :class="{ active: processing && currentStep === 1 }"
-          >
-            <div class="router-label">门控路由 (Router)</div>
-            <div class="router-action" v-if="processing && currentStep >= 1">
-              🔍 识别意图: "{{ selectedTask.type }}"
-            </div>
+        <!-- Step 2: Processing Unit (Dense or MoE) -->
+        <div class="stage-section process-section">
+          <div class="section-label">
+            2. 模型处理 (Processing)
+            <span v-if="processing" class="status-badge">生成中...</span>
           </div>
 
-          <!-- Connections -->
-          <div class="connections">
+          <!-- Dense Visualization -->
+          <div v-if="architecture === 'dense'" class="dense-visualization">
             <div
-              v-for="(expert, idx) in experts"
-              :key="idx"
-              class="connection-line"
-              :class="{
-                active: processing && currentStep >= 2 && isExpertSelected(idx),
-                inactive:
-                  processing && currentStep >= 2 && !isExpertSelected(idx)
-              }"
-            ></div>
-          </div>
-
-          <!-- Experts -->
-          <div class="experts-grid">
-            <div
-              v-for="(expert, idx) in experts"
-              :key="idx"
-              class="expert-card"
-              :class="{
-                active: processing && currentStep >= 2 && isExpertSelected(idx),
-                inactive:
-                  processing && currentStep >= 2 && !isExpertSelected(idx)
-              }"
+              class="dense-block"
+              :class="{ activating: processing && currentStep === 'expert' }"
             >
-              <div class="expert-icon">{{ expert.icon }}</div>
-              <div class="expert-name">{{ expert.name }}</div>
-              <div class="expert-role">{{ expert.role }}</div>
+              <div class="dense-label">Dense FFN Layers</div>
+              <div class="neuron-grid">
+                <div v-for="n in 32" :key="n" class="neuron"></div>
+              </div>
+              <div class="activation-info" v-if="processing">
+                🔥 激活率: 100% (All Parameters)
+              </div>
+            </div>
+          </div>
+
+          <!-- 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">
+                Routing "{{ currentToken.text.trim() }}" → {{ experts[currentToken.expert].name }}
+              </div>
+            </div>
+
+            <!-- Connections -->
+            <div class="connections">
               <div
-                class="expert-status"
-                v-if="processing && currentStep >= 2 && isExpertSelected(idx)"
+                v-for="(expert, idx) in experts"
+                :key="idx"
+                class="connection-line"
+                :class="{
+                  active: processing && currentStep === 'expert' && currentToken?.expert === idx,
+                  inactive: processing && currentStep === 'expert' && currentToken?.expert !== idx
+                }"
+                :style="{
+                   borderColor: processing && currentStep === 'expert' && currentToken?.expert === idx ? expert.color : ''
+                }"
+              ></div>
+            </div>
+
+            <!-- Experts -->
+            <div class="experts-grid">
+              <div
+                v-for="(expert, idx) in experts"
+                :key="idx"
+                class="expert-card"
+                :class="{
+                  active: processing && currentStep === 'expert' && currentToken?.expert === idx,
+                  inactive: processing && currentStep === 'expert' && currentToken?.expert !== idx
+                }"
+                :style="{
+                   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-status"
+                  v-if="processing && currentStep === 'expert' && currentToken?.expert === idx"
+                  :style="{ color: expert.color }"
+                >
+                  ⚡ Active
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Arrow -->
-      <div class="flow-arrow">⬇️</div>
-
       <!-- Step 3: Output -->
       <div class="stage-section output-section">
-        <div class="section-label">3. 生成结果 (Output)</div>
-        <div class="output-box" :class="{ revealed: currentStep === 3 }">
-          <div v-if="currentStep === 3" class="output-content">
-            <span class="output-icon">{{ selectedTask.icon }}</span>
-            <span class="typing-effect">{{ selectedTask.output }}</span>
-          </div>
-          <div v-else class="placeholder">等待处理...</div>
+        <div class="section-label">3. 逐步生成 (Output Stream)</div>
+        <div class="output-box">
+          <span class="output-content">
+            <span
+              v-for="(token, idx) in generatedTokens"
+              :key="idx"
+              class="generated-token"
+              :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>
+          <div v-if="generatedTokens.length === 0 && !processing" class="placeholder">点击运行查看生成过程...</div>
         </div>
       </div>
     </div>
@@ -145,7 +156,7 @@
     <!-- Controls -->
     <div class="demo-controls">
       <button class="run-btn" @click="runDemo" :disabled="processing">
-        {{ processing ? '正在推理...' : '▶️ 开始生成 (Run Inference)' }}
+        {{ processing ? '正在生成 (Generating)...' : '▶️ 开始生成 (Run Generation)' }}
       </button>
     </div>
   </div>
@@ -156,43 +167,54 @@ import { ref, computed } from 'vue'
 
 const architecture = ref('moe')
 const processing = ref(false)
-const currentStep = ref(0) // 0: idle, 1: router, 2: experts, 3: output
+const currentStep = ref('idle') // idle, router, expert
+const currentToken = ref(null)
+const generatedTokens = ref([])
 
 const experts = [
-  { icon: '💻', name: '代码专家', role: 'Python/JS/Rust' },
-  { icon: '🎨', name: '创意专家', role: '诗歌/小说/绘画' },
-  { icon: '📐', name: '逻辑专家', role: '数学/推理/证明' },
-  { icon: '🌍', name: '语言专家', role: '翻译/润色/摘要' }
+  { icon: '💻', name: 'Code', color: '#059669' },     // Green
+  { icon: '📐', name: 'Math', color: '#2563eb' },     // Blue
+  { icon: '🎨', name: 'Creative', color: '#d97706' }, // Amber
+  { icon: '📝', name: 'Grammar', color: '#7c3aed' }   // Purple
 ]
 
 const tasks = [
   {
-    label: '写 Python 脚本',
-    type: '编程',
+    label: 'Python 代码示例',
     icon: '🐍',
-    expertIdx: 0,
-    output: 'def fib(n): return n if n < 2 else...'
+    tokens: [
+      { text: 'def', expert: 0 },
+      { text: ' calc', expert: 3 },
+      { text: '_area', expert: 0 },
+      { text: '(', expert: 3 },
+      { text: 'r', expert: 0 },
+      { text: '):', expert: 0 },
+      { text: '\n  ', expert: 3 },
+      { text: 'return', expert: 0 },
+      { text: ' 3.14', expert: 1 }, // Math
+      { text: ' *', expert: 1 },
+      { text: ' r', expert: 0 },
+      { text: ' **', expert: 1 },
+      { text: ' 2', expert: 1 }
+    ]
   },
   {
-    label: '写七言绝句',
-    type: '文学',
-    icon: '🌸',
-    expertIdx: 1,
-    output: '窗含西岭千秋雪，门泊东吴万里船...'
-  },
-  {
-    label: '解二元方程',
-    type: '数学',
-    icon: '✖️',
-    expertIdx: 2,
-    output: 'x = 5, y = -2 (过程略)'
-  },
-  {
-    label: '翻译成英文',
-    type: '翻译',
-    icon: '🔤',
-    expertIdx: 3,
-    output: 'To be, or not to be, that is the question.'
+    label: '科幻小说片段',
+    icon: '🚀',
+    tokens: [
+      { text: 'The', expert: 3 },
+      { text: ' spaceship', expert: 2 },
+      { text: ' warped', expert: 2 },
+      { text: ' into', expert: 3 },
+      { text: ' dimension', expert: 1 }, // Logic/Math concept
+      { text: ' X', expert: 2 },
+      { text: '.', expert: 3 },
+      { text: ' Coordinates', expert: 1 },
+      { text: ':', expert: 3 },
+      { text: ' 42', expert: 1 },
+      { text: '.', expert: 3 },
+      { text: '00', expert: 1 }
+    ]
   }
 ]
 
@@ -211,33 +233,39 @@ const selectTask = (task) => {
 }
 
 const resetDemo = () => {
-  currentStep.value = 0
+  currentStep.value = 'idle'
+  generatedTokens.value = []
+  currentToken.value = null
 }
 
-const isExpertSelected = (idx) => {
-  if (architecture.value === 'dense') return true // All active in dense
-  return idx === selectedTask.value.expertIdx
+const getExpertColor = (expertIdx) => {
+  if (expertIdx === undefined || architecture.value === 'dense') return 'var(--vp-c-text-1)'
+  return experts[expertIdx].color
 }
 
 const runDemo = async () => {
   if (processing.value) return
   processing.value = true
-  currentStep.value = 0
+  resetDemo()
 
-  // Step 1: Input -> Router
-  await wait(300)
-  currentStep.value = 1
+  for (const token of selectedTask.value.tokens) {
+    currentToken.value = token
+    
+    // Step 1: Router (MoE only) or Prep (Dense)
+    currentStep.value = 'router'
+    await wait(architecture.value === 'moe' ? 400 : 200)
 
-  // Step 2: Router -> Expert / Dense Processing
-  await wait(800)
-  currentStep.value = 2
+    // Step 2: Expert Processing
+    currentStep.value = 'expert'
+    await wait(architecture.value === 'moe' ? 600 : 400) // Dense might be slower in reality, but for demo keep it brisk
 
-  // Step 3: Expert -> Output
-  await wait(1200)
-  currentStep.value = 3
+    // Step 3: Output
+    generatedTokens.value.push(token)
+    await wait(200)
+  }
 
-  // Finish
-  await wait(500)
+  currentStep.value = 'idle'
+  currentToken.value = null
   processing.value = false
 }
 
@@ -246,8 +274,7 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
 <style scoped>
 .moe-demo-container {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: monospace, system-ui;
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
@@ -278,7 +305,6 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   font-weight: 600;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: all 0.2s;
   border: none;
   background: transparent;
 }
@@ -298,8 +324,7 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 .visual-stage {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
 .stage-section {
@@ -309,7 +334,6 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   border-radius: 8px;
   padding: 16px;
   position: relative;
-  transition: all 0.3s;
 }
 
 .section-label {
@@ -343,42 +367,42 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   border-radius: 6px;
   background: var(--vp-c-bg-mute);
   cursor: pointer;
-  transition: all 0.2s;
   font-size: 13px;
 }
 
-.task-btn:hover {
-  background: var(--vp-c-bg-soft);
-}
-
 .task-btn.selected {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-dimm);
   color: var(--vp-c-brand);
 }
 
-.token-stream {
-  height: 4px;
-  background: var(--vp-c-divider);
-  margin-top: 12px;
-  border-radius: 2px;
-  position: relative;
-  overflow: hidden;
+/* Token Flow */
+.token-flow-viz {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+  height: 30px;
 }
 
-.token-particle {
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: all 0.3s;
+.current-token-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  animation: slideIn 0.3s ease-out;
 }
 
-.token-stream.flowing .token-particle {
-  opacity: 1;
-  top: 0;
-  animation: slideDown 0.5s forwards;
+.token-label {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.token-badge {
+  background: var(--vp-c-bg-mute);
+  border: 1px solid;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 14px;
 }
 
 /* Process Section */
@@ -393,12 +417,12 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   background: var(--vp-c-bg-mute);
   border-radius: 8px;
   padding: 12px;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .dense-block.activating {
   background: var(--vp-c-brand);
-  box-shadow: 0 0 20px var(--vp-c-brand-dimm);
+  box-shadow: 0 0 15px var(--vp-c-brand-dimm);
 }
 
 .dense-block.activating .neuron {
@@ -429,7 +453,7 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   padding-bottom: 100%;
   background: var(--vp-c-divider);
   border-radius: 50%;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .activation-info {
@@ -445,15 +469,16 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   background: var(--vp-c-bg-mute);
   border: 2px dashed var(--vp-c-text-3);
   border-radius: 8px;
-  padding: 10px;
+  padding: 8px;
   text-align: center;
   margin-bottom: 12px;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .router-node.active {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-dimm);
+  transform: scale(1.02);
 }
 
 .router-label {
@@ -464,14 +489,14 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 .router-action {
   font-size: 12px;
   color: var(--vp-c-brand);
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .connections {
   display: flex;
   justify-content: space-around;
   height: 20px;
-  margin-bottom: -10px; /* Overlap slightly */
+  margin-bottom: -10px;
   z-index: 0;
 }
 
@@ -479,12 +504,14 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   width: 2px;
   height: 100%;
   background: var(--vp-c-divider);
-  transition: all 0.3s;
+  transition: all 0.2s;
+  opacity: 0.3;
 }
 
 .connection-line.active {
-  background: var(--vp-c-brand);
-  box-shadow: 0 0 8px var(--vp-c-brand);
+  background: currentColor; /* Use inline style color */
+  box-shadow: 0 0 6px currentColor;
+  opacity: 1;
 }
 
 .experts-grid {
@@ -501,65 +528,44 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   border-radius: 6px;
   padding: 8px 4px;
   text-align: center;
-  transition: all 0.3s;
-  opacity: 0.7;
+  transition: all 0.2s;
+  opacity: 0.5;
 }
 
 .expert-card.active {
   opacity: 1;
-  border-color: var(--vp-c-brand);
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.expert-card.inactive {
-  opacity: 0.3;
-  transform: scale(0.95);
-}
-
 .expert-icon {
   font-size: 20px;
   margin-bottom: 4px;
 }
 .expert-name {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: bold;
   margin-bottom: 2px;
 }
-.expert-role {
-  font-size: 9px;
-  color: var(--vp-c-text-3);
-}
 .expert-status {
   font-size: 9px;
-  color: var(--vp-c-brand);
-  margin-top: 4px;
   font-weight: bold;
 }
 
 /* Output Section */
 .output-box {
   min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background: var(--vp-c-bg-mute);
   border-radius: 6px;
-  padding: 10px;
-  transition: all 0.3s;
-}
-
-.output-box.revealed {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-brand);
-}
-
-.output-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  padding: 12px;
   font-family: monospace;
-  font-size: 13px;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.generated-token {
+  display: inline-block;
+  transition: all 0.3s;
 }
 
 .placeholder {
@@ -568,6 +574,13 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   font-style: italic;
 }
 
+.cursor {
+  display: inline-block;
+  width: 2px;
+  background: var(--vp-c-text-1);
+  animation: blink 1s infinite;
+}
+
 /* Controls */
 .demo-controls {
   margin-top: 20px;
@@ -596,20 +609,13 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
   cursor: not-allowed;
 }
 
-/* Animations */
-.flow-arrow {
-  text-align: center;
-  color: var(--vp-c-divider);
-  font-size: 18px;
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }
 
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
-</style>
+</style>