feat(docs): add StepBar component for progress tracking

Introduce a reusable StepBar component to replace inline step progress indicators
Update documentation pages to use the new component for consistent progress display

docs/.vitepress/theme/components/StepBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-steps :active="active" align-center>
+    <el-step
+      v-for="(item, index) in items"
+      :key="index"
+      :title="item.title"
+      :description="item.description"
+    />
+  </el-steps>
+</template>
+
+<script setup>
+defineProps({
+  active: {
+    type: Number,
+    default: 0
+  },
+  items: {
+    type: Array,
+    default: () => [
+      { title: "困境与机会", description: "普通人的编程新可能" },
+      { title: "能力初探", description: "60秒极速开发体验" },
+      { title: "原生实战", description: "打造AI原生贪吃蛇" },
+      { title: "拓展创造", description: "举一反三做游戏" }
+    ]
+  }
+})
+</script>

docs/.vitepress/theme/index.js

@@ -7,11 +7,13 @@ import TypeIt from 'typeit'
 import { onMounted, watch, nextTick } from 'vue'
 import { useRoute, useData } from 'vitepress'
 import './style.css'
+import StepBar from './components/StepBar.vue'
 
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
     app.use(ElementPlus)
+    app.component('StepBar', StepBar)
   },
   setup() {
     const route = useRoute()

docs/stage-0/0.2-ai-capabilities-through-games/index.md

@@ -24,12 +24,14 @@
 - Assignment：复现贪吃蛇，并（可选）实现一种你感兴趣的 AI 原生游戏
 
 <div style="margin: 50px 0;">
-  <el-steps :active="0" align-center>
+  <ClientOnly>
-    <el-step title="困境与机会" description="普通人的编程新可能" />
+    <StepBar :active="0" :items="[
-    <el-step title="能力初探" description="60秒极速开发体验" />
+      { title: '困境与机会', description: '普通人的编程新可能' },
-    <el-step title="原生实战" description="打造AI原生贪吃蛇" />
+      { title: '能力初探', description: '60秒极速开发体验' },
-    <el-step title="拓展创造" description="举一反三做游戏" />
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
-  </el-steps>
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
 </div>
 
 ## 1. 普通人的困境与机会
@@ -45,12 +47,14 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
 这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。
 
 <div style="margin: 50px 0;">
-  <el-steps :active="1" align-center>
+  <ClientOnly>
-    <el-step title="困境与机会" description="普通人的编程新可能" />
+    <StepBar :active="1" :items="[
-    <el-step title="能力初探" description="60秒极速开发体验" />
+      { title: '困境与机会', description: '普通人的编程新可能' },
-    <el-step title="原生实战" description="打造AI原生贪吃蛇" />
+      { title: '能力初探', description: '60秒极速开发体验' },
-    <el-step title="拓展创造" description="举一反三做游戏" />
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
-  </el-steps>
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
 </div>
 
 ## 2. AI 能帮你做到什么程度
@@ -134,6 +138,17 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
 在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档：
 只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。
 
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '困境与机会', description: '普通人的编程新可能' },
+      { title: '能力初探', description: '60秒极速开发体验' },
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
+</div>
+
 ## 3. 动手：你的第一个 AI 原生应用
 
 让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 **vibe coding** 技巧创建一个**现代版**的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。
@@ -224,12 +239,14 @@ z.ai 的回复将会是这样的：
 ![](images/image58.png)
 
 <div style="margin: 50px 0;">
-  <el-steps :active="3" align-center>
+  <ClientOnly>
-    <el-step title="困境与机会" description="普通人的编程新可能" />
+    <StepBar :active="3" :items="[
-    <el-step title="能力初探" description="60秒极速开发体验" />
+      { title: '困境与机会', description: '普通人的编程新可能' },
-    <el-step title="原生实战" description="打造AI原生贪吃蛇" />
+      { title: '能力初探', description: '60秒极速开发体验' },
-    <el-step title="拓展创造" description="举一反三做游戏" />
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
-  </el-steps>
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
 </div>
 
 ### 3.3 尝试制作其他小游戏