delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
sanbuphy
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
+209 -192
View File
@@ -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>
docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
+17 -7
View File
@@ -35,12 +35,20 @@
<span class="label">Headers:</span>
<div class="code-block" :class="{ human: isHuman }">
<div class="line">
<span class="key">{{ isHuman ? '我是谁:' : 'Authorization:' }}</span>
<span class="val">{{ isHuman ? ' 这是我的会员卡号' : ' Bearer sk-8f9s...' }}</span>
<span class="key">{{
isHuman ? '我是谁:' : 'Authorization:'
}}</span>
<span class="val">{{
isHuman ? ' 这是我的会员卡号' : ' Bearer sk-8f9s...'
}}</span>
</div>
<div class="line">
<span class="key">{{ isHuman ? '用什么语言:' : 'Content-Type:' }}</span>
<span class="val">{{ isHuman ? ' 标准格式(JSON)' : ' application/json' }}</span>
<span class="key">{{
isHuman ? '用什么语言:' : 'Content-Type:'
}}</span>
<span class="val">{{
isHuman ? ' 标准格式(JSON)' : ' application/json'
}}</span>
</div>
</div>
</div>
@@ -66,9 +74,11 @@
<div class="doc-row response-row">
<span class="label">Response:</span>
<div class="code-block" :class="{ human: isHuman }">
<div class="line">
<div class="line">
<span class="key">{{ isHuman ? '状态:' : 'Status:' }}</span>
<span class="status-ok">{{ isHuman ? '搞定了 (200)' : '200 OK' }}</span>
<span class="status-ok">{{
isHuman ? '搞定了 (200)' : '200 OK'
}}</span>
</div>
</div>
</div>
@@ -90,7 +100,7 @@ const isHuman = ref(false)
background: var(--vp-c-bg-soft);
margin: 24px 0;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.header {
docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
+54 -31
View File
@@ -19,9 +19,7 @@
<div class="example-item">• 获取文章列表</div>
</div>
</div>
<div class="method-tip">
💡 可以安全重试，不会改变服务器数据
</div>
<div class="method-tip">💡 可以安全重试，不会改变服务器数据</div>
</div>
<div class="method-card post">
@@ -35,9 +33,7 @@
<div class="example-item">• 发表评论</div>
</div>
</div>
<div class="method-tip">
⚠️ 不能随意重试，可能会重复创建
</div>
<div class="method-tip">⚠️ 不能随意重试，可能会重复创建</div>
</div>
<div class="method-card put">
@@ -50,9 +46,7 @@
<div class="example-item">• 更换文章全部内容</div>
</div>
</div>
<div class="method-tip">
⚠️ 会覆盖整个资源，需要提供完整数据
</div>
<div class="method-tip">⚠️ 会覆盖整个资源，需要提供完整数据</div>
</div>
<div class="method-card patch">
@@ -65,9 +59,7 @@
<div class="example-item">• 更新文章标题</div>
</div>
</div>
<div class="method-tip">
💡 只传需要修改的字段，更灵活
</div>
<div class="method-tip">💡 只传需要修改的字段，更灵活</div>
</div>
<div class="method-card delete">
@@ -81,9 +73,7 @@
<div class="example-item">• 删除评论</div>
</div>
</div>
<div class="method-tip">
⚠️ 操作不可逆，删除后无法恢复
</div>
<div class="method-tip">⚠️ 操作不可逆，删除后无法恢复</div>
</div>
</div>
@@ -136,7 +126,10 @@
<div class="tips">
<p><strong>💡 新手建议：</strong></p>
<ul>
<li>先学会 <strong>GET</strong>（查询）和 <strong>POST</strong>（创建）就够用了</li>
<li>
先学会 <strong>GET</strong>（查询）和
<strong>POST</strong>（创建）就够用了
</li>
<li>PUT/PATCH/DELETE 可以慢慢学，理解原理更重要</li>
<li>实际开发中，GET 和 POST 占了 80% 的使用场景</li>
</ul>
@@ -184,11 +177,21 @@
position: relative;
}
.method-card.get { border-color: #3b82f6; }
.method-card.post { border-color: #22c55e; }
.method-card.put { border-color: #f59e0b; }
.method-card.patch { border-color: #8b5cf6; }
.method-card.delete { border-color: #ef4444; }
.method-card.get {
border-color: #3b82f6;
}
.method-card.post {
border-color: #22c55e;
}
.method-card.put {
border-color: #f59e0b;
}
.method-card.patch {
border-color: #8b5cf6;
}
.method-card.delete {
border-color: #ef4444;
}
.method-badge {
position: absolute;
@@ -201,11 +204,21 @@
color: white;
}
.method-card.get .method-badge { background: #3b82f6; }
.method-card.post .method-badge { background: #22c55e; }
.method-card.put .method-badge { background: #f59e0b; }
.method-card.patch .method-badge { background: #8b5cf6; }
.method-card.delete .method-badge { background: #ef4444; }
.method-card.get .method-badge {
background: #3b82f6;
}
.method-card.post .method-badge {
background: #22c55e;
}
.method-card.put .method-badge {
background: #f59e0b;
}
.method-card.patch .method-badge {
background: #8b5cf6;
}
.method-card.delete .method-badge {
background: #ef4444;
}
.method-title {
font-size: 16px;
@@ -307,11 +320,21 @@ tr:last-child td {
color: white;
}
.badge.get { background: #3b82f6; }
.badge.post { background: #22c55e; }
.badge.put { background: #f59e0b; }
.badge.patch { background: #8b5cf6; }
.badge.delete { background: #ef4444; }
.badge.get {
background: #3b82f6;
}
.badge.post {
background: #22c55e;
}
.badge.put {
background: #f59e0b;
}
.badge.patch {
background: #8b5cf6;
}
.badge.delete {
background: #ef4444;
}
.tips {
background: var(--vp-c-bg);
docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
+382 -288
View File
@@ -1,82 +1,97 @@
<!--
ApiPlayground.vue - 闯关版
目标：通过"通关"的方式让用户体验 401/404/200
-->
<template>
<div class="demo">
<div class="api-playground">
<div class="header">
<span class="icon">🎮</span>
<span class="title">练手场：搞崩它，再修好它</span>
<div class="title">🧪 API 练手场</div>
<div class="subtitle">随便玩，坏了算我的</div>
</div>
<div class="playground">
<!-- 控制台 -->
<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 class="playground-layout">
<div class="left-panel">
<div class="panel-title">发送请求</div>
<div class="input-group">
<label>Endpoint（网址）</label>
<input
v-model="endpoint"
type="text"
placeholder="/users/123"
class="input"
/>
</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 class="input-group">
<label>方法</label>
<div class="method-buttons">
<button
v-for="m in methods"
:key="m"
:class="['method-btn', { active: method === m }]"
@click="method = m"
>
{{ m }}
</button>
</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="input-group" v-if="method === 'POST'">
<label>Body（JSON）</label>
<textarea
v-model="body"
class="textarea"
placeholder='{"name": "张三"}'
></textarea>
</div>
<div class="input-group">
<label>API Key</label>
<input
v-model="apiKey"
type="password"
placeholder="sk-..."
class="input"
/>
</div>
<button class="send-btn" @click="sendRequest" :disabled="loading">
{{ loading ? '发送中...' : '🚀 发送请求' }}
</button>
</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 class="right-panel">
<div class="panel-title">响应结果</div>
<div v-if="!response" class="empty-state">
<span class="empty-icon">📭</span>
<p>点击发送按钮，看看会发生什么</p>
<p class="hint">可以试试输入错误的地址或 Key</p>
</div>
<div v-else class="response-content">
<div class="status-bar" :class="getStatusClass(response.status)">
<span class="status-code">{{ response.status }}</span>
<span class="status-text">{{ response.statusText }}</span>
</div>
<div class="response-body">
<pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
</div>
<div class="explanation" v-if="response.explanation">
💡 {{ response.explanation }}
</div>
</div>
</div>
</div>
<!-- 结果区 -->
<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 class="tips">
<div class="tip-title">可以试试这些玩法：</div>
<div class="tip-list">
<button @click="tryEndpoint('/users')">✅ GET /users</button>
<button @click="tryEndpoint('/users/123')">✅ GET /users/123</button>
<button @click="tryEndpoint('/posts')">✅ GET /posts</button>
<button @click="tryError401">❌ 401 没带 Key</button>
<button @click="tryError404">❌ 404 地址错了</button>
<button @click="tryError429">❌ 429 点太快了</button>
</div>
</div>
</div>
@@ -85,74 +100,127 @@
<script setup>
import { ref } from 'vue'
const endpoint = ref('/users')
const method = ref('GET')
const path = ref('/secret-treasure')
const token = ref('')
const methods = ['GET', 'POST']
const body = ref('{\n "name": "张三",\n "age": 25\n}')
const apiKey = ref('')
const loading = ref(false)
const result = ref(null)
const response = ref(null)
function loadScenario(type) {
result.value = null
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 tryEndpoint(path) {
endpoint.value = path
method.value = 'GET'
apiKey.value = 'sk-test123'
}
function tryError401() {
endpoint.value = '/users'
method.value = 'GET'
apiKey.value = ''
}
function tryError404() {
endpoint.value = '/unknown-path'
method.value = 'GET'
apiKey.value = 'sk-test123'
}
function tryError429() {
endpoint.value = '/users'
method.value = 'GET'
apiKey.value = 'sk-test123'
}
function getStatusClass(status) {
if (status >= 200 && status < 300) return 'success'
if (status >= 400 && status < 500) return 'client-error'
if (status >= 500) return 'server-error'
return ''
}
function sendRequest() {
loading.value = true
result.value = null
response.value = null
setTimeout(() => {
loading.value = false
// Logic
if (path.value === '/nothing-here') {
result.value = {
code: 404,
text: 'Not Found',
statusClass: 'error',
data: 'Error: The resource "/nothing-here" does not exist.',
tip: '请求的路径不存在。服务器无法找到对应的资源，因此返回 404 状态码。'
if (!apiKey.value) {
response.value = {
status: 401,
statusText: 'Unauthorized',
data: { error: 'Invalid API key' },
explanation: '没带 API Key，等于没带钱就想吃饭，被拒绝了'
}
return
}
if (!token.value || token.value.trim() === '') {
result.value = {
code: 401,
text: 'Unauthorized',
statusClass: 'error',
data: 'Error: Missing authentication token.',
tip: '请求头中缺少鉴权 Token。服务器无法识别身份，因此拒绝访问并返回 401。'
if (endpoint.value === '/users' && method.value === 'GET') {
response.value = {
status: 200,
statusText: 'OK',
data: {
users: [
{ id: 1, name: '张三', email: 'zhangsan@example.com' },
{ id: 2, name: '李四', email: 'lisi@example.com' },
{ id: 3, name: '王五', email: 'wangwu@example.com' }
],
total: 3
},
explanation: '成功了！服务器返回了用户列表'
}
return
}
if (path.value === '/secret-treasure') {
result.value = {
code: 200,
text: 'OK',
statusClass: 'success',
data: '🎉 Congratulations! You found the secret treasure: [Gold, Diamond, Ruby]',
tip: '请求成功。路径正确且鉴权通过，服务器正常返回了数据。'
} else if (endpoint.value === '/users/123' && method.value === 'GET') {
response.value = {
status: 200,
statusText: 'OK',
data: { id: 123, name: '张三', email: 'zhangsan@example.com' },
explanation: '找到了！服务器返回了单个用户信息'
}
} else if (endpoint.value === '/posts' && method.value === 'GET') {
response.value = {
status: 200,
statusText: 'OK',
data: {
posts: [
{ id: 1, title: '学习 API 的第一天', author: '张三' },
{ id: 2, title: 'API 原来这么简单', author: '李四' }
]
},
explanation: '成功了！服务器返回了文章列表'
}
} else if (endpoint.value === '/posts' && method.value === 'POST') {
response.value = {
status: 201,
statusText: 'Created',
data: {
id: 3,
title: '学习 API 的第一天',
author: '张三',
created_at: '2025-01-15T10:30:00Z'
},
explanation: '新建成功了！服务器返回了新创建的帖子'
}
} else if (endpoint.value === '/unknown-path') {
response.value = {
status: 404,
statusText: 'Not Found',
data: { error: 'Resource not found' },
explanation: '地址错了，这个接口不存在'
}
} else if (endpoint.value === '/users' && method.value === 'GET') {
response.value = {
status: 429,
statusText: 'Too Many Requests',
data: { error: 'Rate limit exceeded' },
explanation: '点太快了！1 秒内只能请求 5 次，你超了'
}
} else {
result.value = {
code: 404,
text: 'Not Found',
statusClass: 'error',
data: 'Error: Resource not found.',
tip: '路径错误。'
response.value = {
status: 404,
statusText: 'Not Found',
data: { error: 'Endpoint not found' },
explanation: '这个地址不存在，换一个试试？'
}
}
}, 500)
@@ -160,230 +228,256 @@ function sendRequest() {
</script>
<style scoped>
.demo {
.api-playground {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
background: var(--vp-c-bg-soft);
padding: 20px;
margin: 24px 0;
overflow: hidden;
}
.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 {
padding: 20px;
}
.console {
background: #1e293b;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
text-align: center;
margin-bottom: 20px;
}
.console-header {
background: #0f172a;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 12px;
.title {
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.dots {
display: flex;
gap: 6px;
.subtitle {
font-size: 14px;
color: var(--vp-c-text-2);
}
.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;
.playground-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.console-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
@media (max-width: 768px) {
.playground-layout {
grid-template-columns: 1fr;
}
}
.left-panel,
.right-panel {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 16px;
}
.panel-title {
font-weight: 600;
margin-bottom: 16px;
color: var(--vp-c-text-1);
}
.input-group {
margin-bottom: 12px;
}
.input-group label {
display: block;
color: #64748b;
font-size: 11px;
font-weight: bold;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
color: var(--vp-c-text-2);
}
.input {
width: 100%;
padding: 10px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 14px;
font-family: monospace;
background: var(--vp-c-bg-soft);
}
.method-select {
background: #334155;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-weight: bold;
.input:focus {
outline: none;
border-color: var(--vp-c-brand);
}
.method-select.GET { color: #22c55e; }
.method-select.POST { color: #eab308; }
.textarea {
width: 100%;
height: 80px;
padding: 10px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 13px;
font-family: monospace;
background: var(--vp-c-bg-soft);
resize: vertical;
}
.url-input-wrapper {
.method-buttons {
display: flex;
align-items: center;
background: #0f172a;
border-radius: 4px;
border: 1px solid #334155;
padding-left: 12px;
gap: 8px;
}
.host {
color: #64748b;
.method-btn {
padding: 6px 16px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg-soft);
font-size: 13px;
font-family: monospace;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.url-input {
flex: 1;
background: transparent;
border: none;
color: #fff;
padding: 8px;
font-family: monospace;
font-size: 13px;
}
.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;
.method-btn.active {
background: var(--vp-c-brand);
color: white;
border-color: var(--vp-c-brand);
}
.send-btn {
background: #3b82f6;
width: 100%;
padding: 12px;
background: var(--vp-c-brand);
color: white;
border: none;
padding: 10px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
font-family: monospace;
transition: all 0.2s;
}
.send-btn:hover {
background: #2563eb;
}
.mission-panel {
margin-bottom: 20px;
}
.mission-title {
font-size: 13px;
color: var(--vp-c-text-2);
margin-bottom: 10px;
border-radius: 8px;
font-weight: 600;
}
.scenarios {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.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);
margin-top: 8px;
transition: opacity 0.2s;
}
.scenario-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
.send-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.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); }
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--vp-c-text-3);
}
.result-area {
animation: slideUp 0.3s ease;
.empty-icon {
font-size: 48px;
display: block;
margin-bottom: 12px;
opacity: 0.5;
}
.hint {
font-size: 12px;
margin-top: 8px;
opacity: 0.7;
}
.response-content {
animation: fadeIn 0.3s ease;
}
.status-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 6px 6px 0 0;
font-weight: bold;
border-radius: 6px;
margin-bottom: 12px;
display: flex;
gap: 8px;
align-items: center;
}
.status-bar.success {
background: #dcfce7;
color: #166534;
}
.status-bar.client-error {
background: #fee2e2;
color: #991b1b;
}
.status-bar.server-error {
background: #fecaca;
color: #7f1d1d;
}
.status-code {
font-weight: 700;
font-family: monospace;
}
.status-bar.success { background: #dcfce7; color: #166534; }
.status-bar.error { background: #fee2e2; color: #991b1b; }
.response-preview {
.response-body {
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;
border-radius: 6px;
padding: 12px;
border-radius: 0 0 6px 6px;
font-size: 14px;
margin-bottom: 12px;
overflow-x: auto;
overflow-y: auto;
max-height: 180px;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
.response-body pre {
margin: 0;
font-family: monospace;
font-size: 12px;
color: #e2e8f0;
white-space: pre-wrap;
}
.explanation {
background: var(--vp-c-bg-soft);
padding: 12px;
border-radius: 6px;
font-size: 13px;
color: var(--vp-c-text-2);
border-left: 3px solid var(--vp-c-brand);
}
.tips {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--vp-c-divider);
}
.tip-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
color: var(--vp-c-text-2);
}
.tip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tip-list button {
padding: 6px 12px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: var(--vp-c-bg);
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.tip-list button:hover {
border-color: var(--vp-c-brand);
color: var(--vp-c-brand);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
+60 -30
View File
@@ -5,10 +5,10 @@
<template>
<div class="demo">
<div class="header">
<span class="icon">💡</span>
<span class="title">试试看：获取一条技术格言</span>
<span class="icon">🌐</span>
<span class="title">试试看：获取当前时间</span>
</div>
<div class="content">
<div class="action-area">
<button class="call-btn" :disabled="calling" @click="callApi">
@@ -24,17 +24,21 @@
<div class="response-card" v-else-if="result">
<div class="response-header">
<span class="status-badge success">200 OK</span>
<span class="time">耗时: 230ms</span>
<span class="time">耗时: {{ result.time }}ms</span>
</div>
<div class="response-body">
{{ result.data }}
<div class="time-display">{{ result.timeString }}</div>
<div class="timezone">{{ result.timezone }}</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>👆 <strong>流程演示：</strong> 点击按钮 -> 发送请求 -> 服务器处理 -> 返回数据。</p>
<p>
👆 <strong>流程演示：</strong> 点击按钮 -> 发送请求 -> 服务器处理 ->
返回数据。
</p>
</div>
</div>
</template>
@@ -45,27 +49,27 @@ import { ref } from 'vue'
const calling = ref(false)
const result = ref(null)
const quotes = [
"Talk is cheap. Show me the code. — Linus Torvalds",
"Programs must be written for people to read, and only incidentally for machines to execute. — Abelson & Sussman",
"Truth can only be found in one place: the code. — Robert C. Martin",
"Simplicity is the soul of efficiency. — Austin Freeman",
"Code is like humor. When you have to explain it, it’s bad. — Cory House"
]
function callApi() {
calling.value = true
result.value = null
// 模拟 API 网络延迟
const startTime = Date.now()
setTimeout(() => {
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]
const now = new Date()
const timeString = now.toLocaleString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
result.value = {
success: true,
data: randomQuote
time: Date.now() - startTime,
timeString: `🕐 ${timeString}`,
timezone: '亚洲/上海 (UTC+8)'
}
calling.value = false
}, 800)
}, 300 + Math.random() * 200)
}
</script>
@@ -76,7 +80,7 @@ function callApi() {
background: var(--vp-c-bg-soft);
margin: 24px 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.header {
@@ -161,9 +165,19 @@ function callApi() {
}
.response-body {
font-size: 15px;
line-height: 1.5;
text-align: center;
}
.time-display {
font-size: 24px;
font-weight: 600;
color: var(--vp-c-text-1);
margin-bottom: 4px;
}
.timezone {
font-size: 13px;
color: var(--vp-c-text-2);
}
.loading-dots span {
@@ -172,12 +186,16 @@ function callApi() {
margin: 0 2px;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
.loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
.footer {
padding: 12px 20px;
background: rgba(0,0,0,0.02);
background: rgba(0, 0, 0, 0.02);
border-top: 1px solid var(--vp-c-divider);
font-size: 13px;
color: var(--vp-c-text-2);
@@ -185,13 +203,25 @@ function callApi() {
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes blink {
0% { opacity: 0.2; }
20% { opacity: 1; }
100% { opacity: 0.2; }
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>
docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
+278
View File
@@ -0,0 +1,278 @@
<template>
<div class="function-api-demo">
<div class="header">
<div class="title">🔧 你早就在用 API 了</div>
<div class="subtitle">函数就是最基础的 API</div>
</div>
<div class="demo-container">
<div class="left">
<div class="code-panel">
<div class="code-title">📝 代码</div>
<pre><code><span class="keyword">def</span> <span class="function">greet</span>(name, greeting=<span class="string">"你好"</span>):
<span class="keyword">return</span> f<span class="string">"{greeting}，{name}！"</span>
<span class="comment"># 调用这个函数</span>
result = <span class="function">greet</span>(<span class="string">"张三"</span>)
print(result)</code></pre>
</div>
</div>
<div class="right">
<div class="explanation">
<p>这个 <code>greet()</code> 函数，就是一个 API：</p>
<div class="point">
<span class="icon">📦</span>
<div>
<strong>输入（参数）</strong>
<p>你传进去什么？<code>"张三"</code></p>
</div>
</div>
<div class="point">
<span class="icon">⚙️</span>
<div>
<strong>处理</strong>
<p>函数内部帮你做了拼接字符串的操作</p>
</div>
</div>
<div class="point">
<span class="icon">📤</span>
<div>
<strong>输出（返回值）</strong>
<p>得到什么？<code>"你好，张三！"</code></p>
</div>
</div>
</div>
<div class="try-it">
<div class="try-title">🎮 试试调用：</div>
<div class="interactive">
<input
v-model="name"
placeholder="输入名字"
class="name-input"
/>
<select v-model="greeting" class="greeting-select">
<option value="你好">你好</option>
<option value="Hello">Hello</option>
<option value="早上好">早上好</option>
<option value="晚安">晚安</option>
</select>
<button @click="callFunction" class="call-btn">调用 greet()</button>
</div>
<div class="result" v-if="result">
<span class="arrow">→</span>
<code>{{ result }}</code>
</div>
</div>
</div>
</div>
<div class="summary">
<div class="summary-item">
<span class="icon">🔑</span>
<p><strong>关键点：</strong> 你不需要知道函数内部是怎么实现的，只需要知道怎么调用它</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('张三')
const greeting = ref('你好')
const result = ref('')
function greet(name, greeting) {
return `${greeting}，${name}！`
}
function callFunction() {
result.value = greet(name.value, greeting.value)
}
</script>
<style scoped>
.function-api-demo {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 20px;
margin: 24px 0;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.title {
font-size: 18px;
font-weight: 700;
margin-bottom: 4px;
}
.subtitle {
font-size: 14px;
color: var(--vp-c-text-2);
}
.demo-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.demo-container {
grid-template-columns: 1fr;
}
}
.code-panel {
background: #1e293b;
border-radius: 10px;
padding: 16px;
font-family: monospace;
font-size: 14px;
}
.code-title {
color: #94a3b8;
margin-bottom: 12px;
font-size: 13px;
}
.code-panel code {
color: #e2e8f0;
line-height: 1.8;
}
.keyword {
color: #c084fc;
}
.function {
color: #60a5fa;
}
.string {
color: #4ade80;
}
.comment {
color: #64748b;
}
.explanation {
margin-bottom: 20px;
}
.explanation > p {
margin-bottom: 16px;
}
.point {
display: flex;
gap: 12px;
margin-bottom: 12px;
align-items: flex-start;
}
.point .icon {
font-size: 20px;
}
.point strong {
color: var(--vp-c-text-1);
}
.point p {
margin: 4px 0 0;
font-size: 13px;
color: var(--vp-c-text-2);
}
.try-it {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 10px;
padding: 16px;
}
.try-title {
font-weight: 600;
margin-bottom: 12px;
}
.interactive {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.name-input {
flex: 1;
min-width: 120px;
padding: 8px 12px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 14px;
}
.greeting-select {
padding: 8px 12px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
font-size: 14px;
background: var(--vp-c-bg);
}
.call-btn {
padding: 8px 16px;
background: var(--vp-c-brand);
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
.result {
margin-top: 16px;
padding: 12px;
background: #dcfce7;
border-radius: 6px;
font-size: 14px;
}
.result .arrow {
margin-right: 8px;
}
.result code {
color: #166534;
}
.summary {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--vp-c-divider);
}
.summary-item {
display: flex;
gap: 12px;
align-items: center;
font-size: 14px;
color: var(--vp-c-text-2);
}
.summary-item .icon {
font-size: 20px;
}
</style>
docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue
+26 -20
View File
@@ -41,7 +41,9 @@
<div class="step-number">1</div>
<div class="step-content">
<div class="step-title">找到网址（打开外卖 APP）</div>
<div class="step-code">https://api.openai.com/v1/chat/completions</div>
<div class="step-code">
https://api.openai.com/v1/chat/completions
</div>
</div>
</div>
@@ -50,7 +52,7 @@
<div class="step-content">
<div class="step-title">准备订单（填写信息）</div>
<div class="step-code">
Authorization: Bearer 你的API密钥<br>
Authorization: Bearer 你的API密钥<br />
Content-Type: application/json
</div>
</div>
@@ -61,12 +63,14 @@
<div class="step-content">
<div class="step-title">下单（发送请求）</div>
<div class="step-code">
{<br>
&nbsp;&nbsp;"model": "gpt-4",<br>
&nbsp;&nbsp;"messages": [<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ "role": "system", "content": "你是营销文案专家" },<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ "role": "user", "content": "写智能手表文案" }<br>
&nbsp;&nbsp;]<br>
{<br />
&nbsp;&nbsp;"model": "gpt-4",<br />
&nbsp;&nbsp;"messages": [<br />
&nbsp;&nbsp;&nbsp;&nbsp;{ "role": "system", "content":
"你是营销文案专家" },<br />
&nbsp;&nbsp;&nbsp;&nbsp;{ "role": "user", "content":
"写智能手表文案" }<br />
&nbsp;&nbsp;]<br />
}
</div>
</div>
@@ -77,7 +81,7 @@
<div class="step-content">
<div class="step-title">等待配送（解析响应）</div>
<div class="step-code">
response.choices[0].message.content<br>
response.choices[0].message.content<br />
<span class="step-hint">⚠️ 需要自己处理解析错误</span>
</div>
</div>
@@ -110,8 +114,8 @@
<div class="step-content">
<div class="step-title">找服务员（初始化客户端）</div>
<div class="step-code">
const client = new OpenAI({<br>
&nbsp;&nbsp;apiKey: '你的密钥'<br>
const client = new OpenAI({<br />
&nbsp;&nbsp;apiKey: '你的密钥'<br />
})
</div>
</div>
@@ -122,12 +126,14 @@
<div class="step-content">
<div class="step-title">直接点菜（调用函数）</div>
<div class="step-code">
const response = await client.chat.completions.create({<br>
&nbsp;&nbsp;model: 'gpt-4',<br>
&nbsp;&nbsp;messages: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ role: 'system', content: '你是营销文案专家' },<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ role: 'user', content: '写智能手表文案' }<br>
&nbsp;&nbsp;]<br>
const response = await client.chat.completions.create({<br />
&nbsp;&nbsp;model: 'gpt-4',<br />
&nbsp;&nbsp;messages: [<br />
&nbsp;&nbsp;&nbsp;&nbsp;{ role: 'system', content:
'你是营销文案专家' },<br />
&nbsp;&nbsp;&nbsp;&nbsp;{ role: 'user', content:
'写智能手表文案' }<br />
&nbsp;&nbsp;]<br />
})
</div>
</div>
@@ -138,7 +144,7 @@
<div class="step-content">
<div class="step-title">享用美食（直接使用）</div>
<div class="step-code">
console.log(response.choices[0].message.content)<br>
console.log(response.choices[0].message.content)<br />
<span class="step-hint">✅ SDK 帮你处理好了所有细节</span>
</div>
</div>
@@ -189,11 +195,11 @@ async function runDemo() {
// 模拟逐步执行
for (let i = 1; i <= 4; i++) {
await new Promise(resolve => setTimeout(resolve, 600))
await new Promise((resolve) => setTimeout(resolve, 600))
currentStep.value = i
}
await new Promise(resolve => setTimeout(resolve, 400))
await new Promise((resolve) => setTimeout(resolve, 400))
result.value = true
running.value = false
}
docs/.vitepress/theme/components/appendix/api-intro/RequestResponseFlow.vue
+7 -2
View File
@@ -147,8 +147,13 @@ function send() {
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.send-btn {