docs: 更新 API 文档和 AI 能力集成页面

docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue

@@ -1,57 +1,82 @@
 <!--
-  ApiPlayground.vue - 简化版
-  目标：用最简单的演示展示 API 调用的各种情况
+  ApiPlayground.vue - 闯关版
+  目标：通过"通关"的方式让用户体验 401/404/200
 -->
 <template>
   <div class="demo">
-    <div class="title">🎮 练习场：试试调用 API</div>
-    <p class="subtitle">体验一下成功和失败的情况</p>
+    <div class="header">
+      <span class="icon">🎮</span>
+      <span class="title">练手场：搞崩它，再修好它</span>
+    </div>
 
     <div class="playground">
-      <div class="controls">
-        <div class="control-group">
-          <label>🔑 钥匙（API Key）：</label>
-          <button
-            :class="['toggle', { active: hasKey }]"
-            @click="hasKey = !hasKey"
-          >
-            {{ hasKey ? '✅ 有钥匙' : '❌ 没有钥匙' }}
+      <!-- 控制台 -->
+      <div class="console">
+        <div class="console-header">
+          <div class="dots">
+            <span></span><span></span><span></span>
+          </div>
+          <span class="console-title">API Console</span>
+        </div>
+        
+        <div class="console-body">
+          <div class="input-group">
+            <label>METHOD</label>
+            <select v-model="method" class="method-select" :class="method">
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+            </select>
+          </div>
+
+          <div class="input-group">
+            <label>URL</label>
+            <div class="url-input-wrapper">
+              <span class="host">https://api.game.com</span>
+              <input v-model="path" type="text" class="url-input" placeholder="/users/1" />
+            </div>
+          </div>
+
+          <div class="input-group">
+            <label>HEADERS</label>
+            <div class="code-editor">
+              Authorization: <input v-model="token" placeholder="(空)" class="code-input" />
+            </div>
+          </div>
+
+          <button class="send-btn" @click="sendRequest" :disabled="loading">
+            {{ loading ? 'Sending...' : 'SEND REQUEST' }}
           </button>
         </div>
-
-        <div class="control-group">
-          <label>📍 用户 ID：</label>
-          <input
-            v-model="userId"
-            class="input"
-            placeholder="例如：u_123"
-          />
-        </div>
-
-        <button class="call-btn" :disabled="calling" @click="callApi">
-          {{ calling ? '调用中...' : '🚀 调用 API' }}
-        </button>
       </div>
 
-      <div class="result-area">
-        <div v-if="!result" class="placeholder">
-          还没有结果。点一下"调用 API"试试！
-        </div>
-        <div v-else class="result" :class="result.type">
-          <div class="result-header">
-            {{ result.type === 'success' ? '✅ 成功' : '❌ 失败' }}
-          </div>
-          <div class="result-body">{{ result.message }}</div>
+      <!-- 任务区 -->
+      <div class="mission-panel">
+        <div class="mission-title">👇 点这些按钮试错</div>
+        <div class="scenarios">
+          <button class="scenario-btn error-401" @click="loadScenario('401')">
+            1. 没带钥匙 (401)
+          </button>
+          <button class="scenario-btn error-404" @click="loadScenario('404')">
+            2. 找错人了 (404)
+          </button>
+          <button class="scenario-btn success-200" @click="loadScenario('200')">
+            3. 成功通关 (200)
+          </button>
         </div>
       </div>
 
-      <div class="tips">
-        <p><strong>💡 玩法建议：</strong></p>
-        <ul>
-          <li>试试把"钥匙"改成"没有钥匙"，看看会发生什么</li>
-          <li>试试把 ID 改成 <code>u_404</code>，看看会怎样</li>
-          <li>连续快速点击，看看"限流"提示</li>
-        </ul>
+      <!-- 结果区 -->
+      <div class="result-area" v-if="result">
+        <div class="status-bar" :class="result.statusClass">
+          <span class="status-code">{{ result.code }}</span>
+          <span class="status-text">{{ result.text }}</span>
+        </div>
+        <div class="response-preview">
+          {{ result.data }}
+        </div>
+        <div class="result-tip">
+          <strong>💡 现象解析：</strong> {{ result.tip }}
+        </div>
       </div>
     </div>
   </div>
@@ -60,71 +85,77 @@
 <script setup>
 import { ref } from 'vue'
 
-const hasKey = ref(true)
-const userId = ref('u_123')
-const calling = ref(false)
+const method = ref('GET')
+const path = ref('/secret-treasure')
+const token = ref('')
+const loading = ref(false)
 const result = ref(null)
-const callCount = ref([])
-const now = ref(Date.now())
 
-function callApi() {
-  calling.value = true
+function loadScenario(type) {
   result.value = null
-
-  // 模拟限流
-  const currentTime = Date.now()
-  callCount.value = callCount.value.filter(t => currentTime - t < 2000)
-  callCount.value.push(currentTime)
-
-  if (callCount.value.length >= 4) {
-    setTimeout(() => {
-      result.value = {
-        type: 'error',
-        message: '太频繁了！请慢一点再试（限流）'
-      }
-      calling.value = false
-    }, 300)
-    return
+  if (type === '401') {
+    method.value = 'GET'
+    path.value = '/secret-treasure'
+    token.value = '' // Empty token
+  } else if (type === '404') {
+    method.value = 'GET'
+    path.value = '/nothing-here'
+    token.value = 'Bearer my-secret-key'
+  } else if (type === '200') {
+    method.value = 'GET'
+    path.value = '/secret-treasure'
+    token.value = 'Bearer my-secret-key'
   }
+}
 
+function sendRequest() {
+  loading.value = true
+  result.value = null
+  
   setTimeout(() => {
-    // 检查钥匙
-    if (!hasKey.value) {
+    loading.value = false
+    
+    // Logic
+    if (path.value === '/nothing-here') {
       result.value = {
-        type: 'error',
-        message: '没有钥匙！你没有权限调用这个 API（401 未授权）'
+        code: 404,
+        text: 'Not Found',
+        statusClass: 'error',
+        data: 'Error: The resource "/nothing-here" does not exist.',
+        tip: '请求的路径不存在。服务器无法找到对应的资源，因此返回 404 状态码。'
       }
-      calling.value = false
       return
     }
 
-    // 检查用户 ID
-    const id = userId.value.trim()
-    if (!id) {
+    if (!token.value || token.value.trim() === '') {
       result.value = {
-        type: 'error',
-        message: '你还没填用户 ID！'
+        code: 401,
+        text: 'Unauthorized',
+        statusClass: 'error',
+        data: 'Error: Missing authentication token.',
+        tip: '请求头中缺少鉴权 Token。服务器无法识别身份，因此拒绝访问并返回 401。'
       }
-      calling.value = false
       return
     }
 
-    if (id === 'u_404') {
+    if (path.value === '/secret-treasure') {
       result.value = {
-        type: 'error',
-        message: '找不到这个用户！ID 不存在（404）'
+        code: 200,
+        text: 'OK',
+        statusClass: 'success',
+        data: '🎉 Congratulations! You found the secret treasure: [Gold, Diamond, Ruby]',
+        tip: '请求成功。路径正确且鉴权通过，服务器正常返回了数据。'
+      }
+    } else {
+       result.value = {
+        code: 404,
+        text: 'Not Found',
+        statusClass: 'error',
+        data: 'Error: Resource not found.',
+        tip: '路径错误。'
       }
-      calling.value = false
-      return
     }
-
-    // 成功
-    result.value = {
-      type: 'success',
-      message: `成功获取用户信息：\nID: ${id}\n姓名: 张三\n邮箱: zhang@example.com`
-    }
-    calling.value = false
-  }, 800)
+  }, 500)
 }
 </script>
 
@@ -132,175 +163,227 @@ function callApi() {
 .demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
-  margin: 16px 0;
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  margin-bottom: 16px;
+.header {
+  padding: 12px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
 }
 
 .playground {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
   padding: 20px;
 }
 
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.console {
+  background: #1e293b;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
 }
 
-.control-group {
+.console-header {
+  background: #0f172a;
+  padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.control-group label {
-  font-weight: bold;
-  font-size: 14px;
-  min-width: 120px;
+.dots {
+  display: flex;
+  gap: 6px;
 }
 
-.toggle {
-  padding: 8px 16px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  cursor: pointer;
+.dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #334155;
+}
+.dots span:nth-child(1) { background: #ef4444; }
+.dots span:nth-child(2) { background: #eab308; }
+.dots span:nth-child(3) { background: #22c55e; }
+
+.console-title {
+  color: #94a3b8;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.console-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-group label {
+  display: block;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  font-family: monospace;
+}
+
+.method-select {
+  background: #334155;
+  color: #fff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.method-select.GET { color: #22c55e; }
+.method-select.POST { color: #eab308; }
+
+.url-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: #0f172a;
+  border-radius: 4px;
+  border: 1px solid #334155;
+  padding-left: 12px;
+}
+
+.host {
+  color: #64748b;
   font-size: 13px;
-  font-weight: bold;
-  transition: all 0.2s;
+  font-family: monospace;
 }
 
-.toggle.active {
-  border-color: #22c55e;
-  background: #dcfce7;
-  color: #166534;
-}
-
-.input {
+.url-input {
   flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  font-size: 14px;
-  background: var(--vp-c-bg-soft);
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 8px;
+  font-family: monospace;
+  font-size: 13px;
 }
 
-.call-btn {
-  width: 100%;
-  padding: 12px 20px;
-  background: var(--vp-c-brand-1);
+.code-editor {
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 4px;
+  padding: 8px 12px;
+  color: #eab308;
+  font-family: monospace;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+}
+
+.code-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #fff;
+  margin-left: 8px;
+  font-family: monospace;
+}
+
+.send-btn {
+  background: #3b82f6;
   color: white;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  padding: 10px;
+  border-radius: 4px;
   font-weight: bold;
   cursor: pointer;
+  font-family: monospace;
   transition: all 0.2s;
 }
 
-.call-btn:hover:not(:disabled) {
-  opacity: 0.9;
+.send-btn:hover {
+  background: #2563eb;
 }
 
-.call-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.result-area {
-  min-height: 120px;
+.mission-panel {
   margin-bottom: 20px;
 }
 
-.placeholder {
-  padding: 20px;
-  text-align: center;
+.mission-title {
+  font-size: 13px;
   color: var(--vp-c-text-2);
-  font-style: italic;
+  margin-bottom: 10px;
+  font-weight: 600;
 }
 
-.result {
-  border: 2px solid;
-  border-radius: 8px;
-  overflow: hidden;
+.scenarios {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.result.success {
-  border-color: #22c55e;
-  background: #f0fdf4;
+.scenario-btn {
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: var(--vp-c-bg);
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
-.result.error {
-  border-color: #ef4444;
-  background: #fef2f2;
+.scenario-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.result-header {
-  padding: 12px 16px;
+.error-401 { color: #ef4444; border-color: rgba(239,68,68,0.2); }
+.error-404 { color: #f97316; border-color: rgba(249,115,22,0.2); }
+.success-200 { color: #22c55e; border-color: rgba(34,197,94,0.2); }
+
+.result-area {
+  animation: slideUp 0.3s ease;
+}
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: 6px 6px 0 0;
   font-weight: bold;
+  font-family: monospace;
+}
+
+.status-bar.success { background: #dcfce7; color: #166534; }
+.status-bar.error { background: #fee2e2; color: #991b1b; }
+
+.response-preview {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 16px;
+  font-family: monospace;
+  font-size: 13px;
+  border-left: 1px solid #334155;
+  border-right: 1px solid #334155;
+}
+
+.result-tip {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-top: none;
+  padding: 12px;
+  border-radius: 0 0 6px 6px;
   font-size: 14px;
 }
 
-.result.success .result-header {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.result.error .result-header {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.result-body {
-  padding: 12px 16px;
-  font-size: 13px;
-  white-space: pre-line;
-  line-height: 1.6;
-}
-
-.tips {
-  background: var(--vp-c-bg-soft);
-  padding: 16px;
-  border-radius: 8px;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.tips p {
-  margin-bottom: 8px;
-}
-
-.tips ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.tips li {
-  margin: 4px 0;
-}
-
-.tips code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 12px;
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>