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/api-intro/ApiConceptDemo.vue

@@ -1,155 +1,120 @@
 <!--
-  ApiConceptDemo.vue - 互动点餐版
-  目标：通过"点菜"的过程演示 API 的三个核心要素
+  ApiConceptDemo.vue
+  目标：直观演示 API 的基本要素：地址 + 参数
 -->
 <template>
   <div class="demo">
     <div class="header">
-      <span class="icon">🍳</span>
-      <span class="title">互动演示：向 AI 厨房点菜</span>
+      <span class="icon">🔧</span>
+      <span class="title">互动演示：调用 API 需要什么？</span>
     </div>
 
-    <div class="stepper">
-      <!-- Step 1: Endpoint -->
-      <div class="step-group">
-        <div class="step-label">1. 跟谁说？(Endpoint)</div>
-        <select v-model="endpoint" class="control">
-          <option value="/kitchen/chef">👨‍🍳 主厨 (/kitchen/chef)</option>
-          <option value="/kitchen/bar">🍸 调酒师 (/kitchen/bar)</option>
-        </select>
-      </div>
-
-      <!-- Step 2: Method -->
-      <div class="step-group">
-        <div class="step-label">2. 怎么说？(Method)</div>
-        <div class="toggle-group">
-          <button 
-            :class="['toggle-btn', { active: method === 'GET' }]"
-            @click="method = 'GET'"
-          >
-            GET (看看有什么)
-          </button>
-          <button 
-            :class="['toggle-btn', { active: method === 'POST' }]"
-            @click="method = 'POST'"
-          >
-            POST (我要下单)
-          </button>
+    <div class="content">
+      <div class="step">
+        <div class="step-header">
+          <span class="step-num">1</span>
+          <span class="step-title">地址 (Endpoint) - 告诉服务器你要找谁</span>
+        </div>
+        <div class="step-body">
+          <div class="url-bar">
+            <span class="url">https://api.example.com</span>
+            <input
+              v-model="endpoint"
+              type="text"
+              class="endpoint-input"
+              placeholder="/users"
+            />
+          </div>
         </div>
       </div>
 
-      <!-- Step 3: Params -->
-      <div class="step-group" v-if="method === 'POST'">
-        <div class="step-label">3. 点什么？(Body)</div>
-        <div class="params-editor">
-          { "food": 
-          <select v-model="food" class="inline-select">
-            <option value="steak">🥩 牛排</option>
-            <option value="pasta">🍝 意面</option>
-            <option value="salad">🥗 沙拉</option>
-          </select>
-          }
+      <div class="step">
+        <div class="step-header">
+          <span class="step-num">2</span>
+          <span class="step-title">参数 (Params) - 告诉服务器你要什么</span>
         </div>
-      </div>
-      <div class="step-group" v-else>
-        <div class="step-label">3. 查什么？(Params)</div>
-        <div class="params-editor">
-          ?type=
-          <select v-model="menuType" class="inline-select">
-            <option value="today">📅 今日特供</option>
-            <option value="all">📜 全部菜单</option>
-          </select>
+        <div class="step-body">
+          <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" />
+            </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" />
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Action -->
       <button class="send-btn" @click="sendRequest" :disabled="loading">
-        {{ loading ? '🍳 正在做...' : '🚀 发送请求' }}
+        {{ loading ? '发送中...' : '🚀 发送请求' }}
       </button>
-    </div>
 
-    <!-- Result -->
-    <div class="result-box" v-if="response">
-      <div class="result-header">
-        <span class="badge" :class="response.status === 200 ? 'success' : 'error'">
-          {{ response.status }} {{ response.statusText }}
-        </span>
-      </div>
-      <div class="result-content">
-        {{ response.data }}
-      </div>
-      <div class="result-explanation">
-        💡 <strong>解释：</strong> {{ response.explanation }}
+      <div class="response" v-if="response">
+        <div class="response-header">
+          <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>
+        </div>
+        <pre class="response-body">{{ JSON.stringify(response.data, null, 2) }}</pre>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
-const endpoint = ref('/kitchen/chef')
-const method = ref('GET')
-const food = ref('steak')
-const menuType = ref('today')
+const endpoint = ref('/users')
+const page = ref(1)
+const limit = ref(5)
 const loading = ref(false)
 const response = ref(null)
 
-// Reset response when inputs change
-watch([endpoint, method, food, menuType], () => {
-  response.value = null
-})
-
 function sendRequest() {
   loading.value = true
   response.value = null
 
   setTimeout(() => {
-    loading.value = false
-    
-    // Logic for different combinations
-    if (endpoint.value === '/kitchen/bar') {
-      if (method.value === 'GET') {
-        response.value = {
-          status: 200,
-          statusText: 'OK',
-          data: { menu: ['Mojito', 'Martini', 'Beer'] },
-          explanation: '你问调酒师有哪些酒，他给了你酒单。'
-        }
-      } else {
-        response.value = {
-          status: 400,
-          statusText: 'Bad Request',
-          data: { error: "Bar only serves drinks, not food!" },
-          explanation: '你试图向调酒师点菜（牛排/意面），他拒绝了你。你应该去 /kitchen/chef 点菜，或者只点酒。'
-        }
-      }
-      return
-    }
+    const startTime = Date.now()
+
+    if (endpoint.value === '/users') {
+      // 限制最多返回3条，避免结果太长
+      const actualLimit = Math.min(limit.value, 3)
+      const users = []
+      for (let i = 1; i <= actualLimit; i++) {
+        users.push({
+          id: i,
+          name: `用户${(page.value - 1) * limit.value + i}`,
+          age: 20 + i
+        })
+      }
 
-    // Chef logic
-    if (method.value === 'GET') {
       response.value = {
         status: 200,
         statusText: 'OK',
-        data: { specials: ['Spicy Chicken', 'Tofu Soup'] },
-        explanation: '你问主厨今天有什么特供，他告诉了你。'
+        time: Date.now() - startTime,
+        data: { 
+          users, 
+          total: 100, 
+          page: page.value, 
+          limit: limit.value,
+          note: limit.value > 3 ? `仅显示前3条，共${limit.value}条` : null
+        }
       }
     } else {
-      // POST to Chef
-      const foodMap = {
-        steak: '🥩 滋滋作响的牛排',
-        pasta: '🍝 香气扑鼻的意面',
-        salad: '🥗 新鲜健康的沙拉'
-      }
       response.value = {
-        status: 200,
-        statusText: 'Created',
-        data: { dish: foodMap[food.value], message: "Enjoy your meal!" },
-        explanation: `你向主厨下了单 (${food.value})，主厨为你做好了菜。`
+        status: 404,
+        statusText: 'Not Found',
+        time: Date.now() - startTime,
+        data: { error: '找不到这个接口' }
       }
     }
-  }, 600)
+
+    loading.value = false
+  }, 300 + Math.random() * 200)
 }
 </script>
 
@@ -163,89 +128,128 @@ function sendRequest() {
 }
 
 .header {
-  padding: 12px 20px;
+  padding: 14px 20px;
   background: var(--vp-c-bg);
   border-bottom: 1px solid var(--vp-c-divider);
   display: flex;
   align-items: center;
   gap: 10px;
-  font-weight: 600;
 }
 
-.stepper {
+.icon {
+  font-size: 20px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.content {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.step-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.step {
+  background: var(--vp-c-bg);
+  border-radius: 10px;
+  overflow: hidden;
 }
 
-.step-label {
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.step-num {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.step-title {
   font-size: 13px;
   font-weight: 600;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.control, .inline-select {
-  padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
-  font-size: 14px;
-  cursor: pointer;
 }
 
-.toggle-group {
-  display: flex;
-  background: var(--vp-c-divider);
-  padding: 2px;
-  border-radius: 8px;
-  width: fit-content;
+.step-body {
+  padding: 14px;
 }
 
-.toggle-btn {
-  padding: 6px 16px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.toggle-btn.active {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-brand-1);
-  font-weight: 600;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.params-editor {
-  font-family: monospace;
-  background: var(--vp-c-bg);
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
+.url-bar {
   display: flex;
   align-items: center;
   gap: 8px;
+  background: #1e293b;
+  padding: 10px 12px;
+  border-radius: 6px;
+}
+
+.url {
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.endpoint-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #60a5fa;
+  font-family: monospace;
+  font-size: 14px;
+  outline: none;
+}
+
+.params-box {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.params-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.param-label {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  min-width: 70px;
+}
+
+.param-input {
+  padding: 6px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  font-size: 13px;
+}
+
+.param-input.small {
+  width: 60px;
 }
 
 .send-btn {
-  margin-top: 8px;
-  background: var(--vp-c-brand-1);
+  padding: 12px;
+  background: var(--vp-c-brand);
   color: white;
   border: none;
-  padding: 12px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
@@ -257,48 +261,61 @@ function sendRequest() {
   cursor: not-allowed;
 }
 
-.result-box {
-  margin: 0 20px 20px;
-  background: #1e293b;
-  border-radius: 8px;
-  overflow: hidden;
-  color: #e2e8f0;
-  font-family: monospace;
-  animation: slideDown 0.3s ease;
+.response {
+  margin-top: 8px;
+  animation: fadeIn 0.3s ease;
 }
 
-.result-header {
-  padding: 8px 12px;
-  background: rgba(0,0,0,0.3);
+.response-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  margin-bottom: 8px;
 }
 
-.badge {
-  font-size: 12px;
-  padding: 2px 6px;
+.status-badge {
+  padding: 4px 10px;
   border-radius: 4px;
+  font-size: 12px;
   font-weight: bold;
 }
 
-.badge.success { background: #22c55e; color: #fff; }
-.badge.error { background: #ef4444; color: #fff; }
-
-.result-content {
-  padding: 16px;
-  white-space: pre-wrap;
+.status-badge.success {
+  background: #dcfce7;
+  color: #166534;
 }
 
-.result-explanation {
+.status-badge.error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.response-time {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.response-body {
+  background: #1e293b;
+  color: #e2e8f0;
   padding: 12px;
-  background: #334155;
-  font-family: var(--vp-font-family-base);
-  font-size: 13px;
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 12px;
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: 200px;
+  margin: 0;
 }
 
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>