feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout
- Restructure stage-0 index pages across languages into intro.md with new navigation components
- Remove old stage-0 index.md files and update stage-3 pages similarly
- Add new dependencies 'claude' and 'codex' to package.json
- Improve code formatting in multiple Vue components for better readability
- Update documentation content and structure for better user experience

docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue

@@ -1,151 +1,203 @@
 <template>
   <div class="backpropagation-demo">
-    <div class="demo-header">
-      <h4>🔄 反向传播演示</h4>
-      <p>观察神经网络如何通过误差反向调整权重</p>
-    </div>
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <h4>🔄 反向传播演示</h4>
+          <p class="subtitle">观察神经网络如何通过误差反向调整权重</p>
+        </div>
+      </template>
 
-    <div class="demo-content">
-      <div class="network-view">
-        <svg class="network-svg" viewBox="0 0 600 300">
-          <!-- Layers visualization -->
-          <g v-for="(layer, lIndex) in 3" :key="lIndex">
-            <text :x="100 + lIndex * 200" y="20" text-anchor="middle" class="layer-label">
-              {{ lIndex === 0 ? '输入层' : lIndex === 1 ? '隐藏层' : '输出层' }}
-            </text>
+      <div class="demo-content">
+        <div class="network-view">
+          <svg class="network-svg" viewBox="0 0 600 300">
+            <!-- Layers visualization -->
+            <g v-for="(layer, lIndex) in 3" :key="lIndex">
+              <text
+                :x="100 + lIndex * 200"
+                y="20"
+                text-anchor="middle"
+                class="layer-label"
+                fill="currentColor"
+              >
+                {{
+                  lIndex === 0 ? '输入层' : lIndex === 1 ? '隐藏层' : '输出层'
+                }}
+              </text>
 
-            <circle
-              v-for="n in 3"
-              :key="`${lIndex}-${n}`"
-              :cx="100 + lIndex * 200"
-              :cy="60 + n * 70"
-              :r="25"
-              :class="['neuron', getNeuronClass(lIndex, n)]"
+              <circle
+                v-for="n in 3"
+                :key="`${lIndex}-${n}`"
+                :cx="100 + lIndex * 200"
+                :cy="60 + n * 70"
+                :r="25"
+                :class="['neuron', getNeuronClass(lIndex, n)]"
+              />
+            </g>
+
+            <!-- Connections with error flow -->
+            <line
+              v-for="conn in connections"
+              :key="conn.id"
+              :x1="conn.x1"
+              :y1="conn.y1"
+              :x2="conn.x2"
+              :y2="conn.y2"
+              :stroke="conn.color"
+              :stroke-width="conn.width"
+              :opacity="conn.opacity"
+              class="connection"
             />
-          </g>
+          </svg>
+        </div>
 
-          <!-- Connections with error flow -->
-          <line
-            v-for="conn in connections"
-            :key="conn.id"
-            :x1="conn.x1"
-            :y1="conn.y1"
-            :x2="conn.x2"
-            :y2="conn.y2"
-            :stroke="conn.color"
-            :stroke-width="conn.width"
-            :opacity="conn.opacity"
-            class="connection"
+        <el-divider />
+
+        <div class="controls-panel">
+          <el-steps :active="currentStep" align-center finish-status="success">
+            <el-step
+              v-for="(step, index) in steps"
+              :key="index"
+              :title="step"
+            />
+          </el-steps>
+
+          <div class="error-display mt-4">
+            <div class="flex justify-between mb-2">
+              <span class="text-sm">误差 (Loss)</span>
+              <span class="text-sm font-bold">{{ errorValue.toFixed(4) }}</span>
+            </div>
+            <el-progress
+              :percentage="Math.round(errorValue * 100)"
+              :color="customColors"
+              :striped="currentStep === 2"
+              :striped-flow="currentStep === 2"
+            />
+          </div>
+
+          <el-alert
+            :title="explanations[currentStep]"
+            type="info"
+            show-icon
+            :closable="false"
+            class="mt-4"
           />
-        </svg>
-      </div>
 
-      <div class="controls-panel">
-        <div class="step-indicator">
-          <div
-            v-for="(step, index) in steps"
-            :key="index"
-            :class="['step', { active: currentStep === index, completed: currentStep > index }]"
-          >
-            <div class="step-number">{{ index + 1 }}</div>
-            <div class="step-label">{{ step }}</div>
+          <div class="action-buttons mt-4 flex justify-center gap-4">
+            <el-button @click="resetDemo" :disabled="currentStep === 0">
+              重置
+            </el-button>
+            <el-button
+              type="primary"
+              @click="nextStep"
+              :disabled="currentStep >= 4"
+            >
+              {{ currentStep < 4 ? '下一步' : '完成' }}
+            </el-button>
           </div>
         </div>
-
-        <div class="error-display">
-          <div class="error-value">
-            误差: {{ errorValue.toFixed(4) }}
-          </div>
-          <div class="error-bar">
-            <div class="error-fill" :style="{ width: (errorValue * 100) + '%' }"></div>
-          </div>
-        </div>
-
-        <button @click="nextStep" class="step-btn" :disabled="currentStep >= 4">
-          {{ currentStep < 4 ? '下一步 ▶' : '完成 ✓' }}
-        </button>
-
-        <button @click="resetDemo" class="reset-btn">
-          🔄 重置演示
-        </button>
-
-        <div class="explanation">
-          <p><strong>当前步骤:</strong> {{ explanations[currentStep] }}</p>
-        </div>
       </div>
-    </div>
+    </el-card>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const currentStep = ref(0)
 const errorValue = ref(0.95)
 const steps = ['前向传播', '计算误差', '反向传播', '更新权重']
 const explanations = [
-  '输入数据通过各层传递，得到预测输出',
-  '对比预测值和真实值，计算误差',
-  '将误差从输出层反向传递到各层',
-  '根据误差梯度调整每个神经元的权重'
+  '输入数据通过各层传递，得到预测输出。就像学生做完了一套试卷。',
+  '对比预测值和真实值，计算误差。就像老师批改试卷，算出得了多少分（错得有多离谱）。',
+  '将误差从输出层反向传递到各层。就像老师把错题反馈给学生，告诉他是哪一步思路错了。',
+  '根据误差梯度调整每个神经元的权重。学生根据反馈修正自己的理解（权重），下次就能做对了。',
+  '演示完成！通过不断重复这个过程，网络就学会了任务。'
+]
+
+const customColors = [
+  { color: '#67c23a', percentage: 20 },
+  { color: '#e6a23c', percentage: 50 },
+  { color: '#f56c6c', percentage: 100 }
 ]
 
 const connections = ref([])
 
-// 初始化连接
+// Generate initial connections
 const initConnections = () => {
   const conns = []
-  for (let l = 0; l < 2; l++) {
-    for (let i = 1; i <= 3; i++) {
-      for (let j = 1; j <= 3; j++) {
-        conns.push({
-          id: `${l}-${i}-${j}`,
-          x1: 100 + l * 200,
-          y1: 60 + i * 70,
-          x2: 100 + (l + 1) * 200,
-          y2: 60 + j * 70,
-          color: 'var(--vp-c-divider)',
-          width: 1,
-          opacity: 0.3,
-          active: false
-        })
-      }
+  // Input -> Hidden
+  for (let i = 1; i <= 3; i++) {
+    for (let j = 1; j <= 3; j++) {
+      conns.push({
+        id: `i${i}-h${j}`,
+        x1: 100,
+        y1: 60 + i * 70,
+        x2: 300,
+        y2: 60 + j * 70,
+        width: 2,
+        color: '#dcdfe6',
+        opacity: 0.5
+      })
+    }
+  }
+  // Hidden -> Output
+  for (let i = 1; i <= 3; i++) {
+    for (let j = 1; j <= 3; j++) {
+      conns.push({
+        id: `h${i}-o${j}`,
+        x1: 300,
+        y1: 60 + i * 70,
+        x2: 500,
+        y2: 60 + j * 70,
+        width: 2,
+        color: '#dcdfe6',
+        opacity: 0.5
+      })
     }
   }
   connections.value = conns
 }
 
-const getNeuronClass = (layer, neuron) => {
-  if (currentStep.value === 0 && layer === 0) return 'active'
-  if (currentStep.value === 1 && layer === 2) return 'error'
-  if (currentStep.value >= 2) return 'updated'
+const getNeuronClass = (layerIndex, neuronIndex) => {
+  if (currentStep.value === 0) return 'active' // Forward
+  if (currentStep.value === 2) {
+    // Backward
+    if (layerIndex === 2) return 'error-source'
+    if (layerIndex === 1) return 'error-passing'
+  }
+  if (currentStep.value === 3) return 'updating' // Update
   return ''
 }
 
 const nextStep = () => {
-  if (currentStep.value < 4) {
-    currentStep.value++
+  if (currentStep.value >= 4) return
+  currentStep.value++
 
-    // 模拟误差减小
-    if (currentStep.value === 2) {
-      errorValue.value = 0.95
-    } else if (currentStep.value === 3) {
-      errorValue.value = 0.65
-    } else if (currentStep.value === 4) {
-      errorValue.value = 0.32
-    }
+  if (currentStep.value === 1) {
+    // Calculate Error
+    // Visual effect only
+  } else if (currentStep.value === 2) {
+    // Backprop: highlight connections red
+    connections.value.forEach((c) => {
+      c.color = '#f56c6c'
+      c.width = 4
+      c.opacity = 1
+    })
+  } else if (currentStep.value === 3) {
+    // Update weights: error drops
+    const reduceError = setInterval(() => {
+      if (errorValue.value > 0.1) {
+        errorValue.value -= 0.05
+      } else {
+        clearInterval(reduceError)
+      }
+    }, 50)
 
-    // 更新连接显示
-    updateConnections()
-  }
-}
-
-const updateConnections = () => {
-  if (currentStep.value >= 2) {
-    connections.value.forEach((conn) => {
-      conn.color = 'var(--vp-c-brand)'
-      conn.width = 2
-      conn.opacity = 0.6
+    connections.value.forEach((c) => {
+      c.color = '#67c23a'
+      c.width = 2
+      c.opacity = 0.8
     })
   }
 }
@@ -156,228 +208,110 @@ const resetDemo = () => {
   initConnections()
 }
 
-// 初始化
-initConnections()
+onMounted(() => {
+  initConnections()
+})
 </script>
 
 <style scoped>
 .backpropagation-demo {
-  margin: 1rem 0;
-  padding: 1.5rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  color: var(--vp-c-text-1);
+  margin: 20px 0;
 }
 
-.demo-header {
-  text-align: center;
-  margin-bottom: 1.5rem;
-}
-
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  color: var(--vp-c-text-1);
-  font-size: 1.5rem;
-}
-
-.demo-header p {
+.card-header h4 {
   margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.875rem;
+  font-size: 16px;
+  font-weight: 600;
 }
 
-.demo-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
+.subtitle {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  margin: 4px 0 0;
 }
 
 .network-view {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  background-color: var(--vp-c-bg-alt);
   border-radius: 8px;
+  padding: 10px;
 }
 
 .network-svg {
   width: 100%;
+  max-width: 600px;
   height: auto;
 }
 
 .layer-label {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: bold;
   fill: var(--vp-c-text-2);
 }
 
 .neuron {
-  fill: var(--vp-c-bg-alt);
-  stroke: var(--vp-c-divider);
+  fill: var(--vp-c-bg);
+  stroke: var(--vp-c-text-2);
   stroke-width: 2;
-  transition: all 0.5s ease;
+  transition: all 0.5s;
 }
 
 .neuron.active {
-  fill: var(--vp-c-green-1, #22c55e);
-  stroke: var(--vp-c-green-2, #16a34a);
+  fill: var(--el-color-primary-light-9);
+  stroke: var(--el-color-primary);
 }
 
-.neuron.error {
-  fill: var(--vp-c-red-1, #ef4444);
-  stroke: var(--vp-c-red-2, #dc2626);
+.neuron.error-source {
+  fill: var(--el-color-danger-light-9);
+  stroke: var(--el-color-danger);
+  filter: drop-shadow(0 0 5px var(--el-color-danger));
 }
 
-.neuron.updated {
-  fill: var(--vp-c-brand);
-  stroke: var(--vp-c-brand);
+.neuron.error-passing {
+  fill: var(--el-color-warning-light-9);
+  stroke: var(--el-color-warning);
+}
+
+.neuron.updating {
+  fill: var(--el-color-success-light-9);
+  stroke: var(--el-color-success);
+  r: 28; /* Pulse effect */
 }
 
 .connection {
-  transition: all 0.5s ease;
+  transition: all 0.5s;
 }
 
-.controls-panel {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  padding: 1.5rem;
-  border-radius: 8px;
+.mt-4 {
+  margin-top: 16px;
 }
 
-.step-indicator {
+.mb-2 {
+  margin-bottom: 8px;
+}
+
+.flex {
   display: flex;
+}
+
+.justify-between {
   justify-content: space-between;
-  margin-bottom: 1.5rem;
 }
 
-.step {
-  flex: 1;
-  text-align: center;
-  position: relative;
-  opacity: 0.4;
-  transition: all 0.3s ease;
-}
-
-.step.active,
-.step.completed {
-  opacity: 1;
-}
-
-.step-number {
-  width: 36px;
-  height: 36px;
-  margin: 0 auto 0.5rem;
-  background: var(--vp-c-bg-alt);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
+.justify-center {
   justify-content: center;
-  font-weight: 700;
-  font-size: 0.875rem;
-  color: var(--vp-c-text-2);
-  transition: all 0.3s ease;
 }
 
-.step.active .step-number {
-  background: var(--vp-c-brand);
-  color: var(--vp-c-bg);
+.gap-4 {
+  gap: 16px;
 }
 
-.step.completed .step-number {
-  background: var(--vp-c-green-1, #22c55e);
-  color: var(--vp-c-bg);
+.text-sm {
+  font-size: 14px;
 }
 
-.step-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.error-display {
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-}
-
-.error-value {
-  font-weight: 700;
-  color: var(--vp-c-red-1, #ef4444);
-  margin-bottom: 0.5rem;
-}
-
-.error-bar {
-  height: 8px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.error-fill {
-  height: 100%;
-  background: var(--vp-c-red-1, #ef4444);
-  transition: width 0.5s ease;
-}
-
-.step-btn,
-.reset-btn {
-  width: 100%;
-  padding: 0.75rem;
-  margin-bottom: 0.75rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.step-btn {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-bg);
-}
-
-.step-btn:hover:not(:disabled) {
-  opacity: 0.95;
-}
-
-.step-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.reset-btn {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-}
-
-.reset-btn:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.explanation {
-  padding: 1rem;
-  background: rgba(var(--vp-c-brand-rgb), 0.08);
-  border-left: 4px solid var(--vp-c-brand);
-  border-radius: 4px;
-  border: 1px solid rgba(var(--vp-c-brand-rgb), 0.15);
-}
-
-.explanation p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--vp-c-text-2);
-}
-
-.explanation strong {
-  color: var(--vp-c-text-1);
-}
-
-@media (max-width: 768px) {
-  .demo-content {
-    grid-template-columns: 1fr;
-  }
+.font-bold {
+  font-weight: bold;
 }
 </style>