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:
@@ -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>
|
||||
"model": "gpt-4",<br>
|
||||
"messages": [<br>
|
||||
{ "role": "system", "content": "你是营销文案专家" },<br>
|
||||
{ "role": "user", "content": "写智能手表文案" }<br>
|
||||
]<br>
|
||||
{<br />
|
||||
"model": "gpt-4",<br />
|
||||
"messages": [<br />
|
||||
{ "role": "system", "content":
|
||||
"你是营销文案专家" },<br />
|
||||
{ "role": "user", "content":
|
||||
"写智能手表文案" }<br />
|
||||
]<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>
|
||||
apiKey: '你的密钥'<br>
|
||||
const client = new OpenAI({<br />
|
||||
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>
|
||||
model: 'gpt-4',<br>
|
||||
messages: [<br>
|
||||
{ role: 'system', content: '你是营销文案专家' },<br>
|
||||
{ role: 'user', content: '写智能手表文案' }<br>
|
||||
]<br>
|
||||
const response = await client.chat.completions.create({<br />
|
||||
model: 'gpt-4',<br />
|
||||
messages: [<br />
|
||||
{ role: 'system', content:
|
||||
'你是营销文案专家' },<br />
|
||||
{ role: 'user', content:
|
||||
'写智能手表文案' }<br />
|
||||
]<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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user