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
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
@@ -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
}