fix(eslint): reduce warnings in GitHub Actions deployment
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
@@ -23,7 +23,7 @@
|
||||
type="text"
|
||||
class="endpoint-input"
|
||||
placeholder="/users"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,23 +37,44 @@
|
||||
<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" />
|
||||
<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" />
|
||||
<input
|
||||
v-model.number="limit"
|
||||
type="number"
|
||||
class="param-input small"
|
||||
min="1"
|
||||
max="100"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="send-btn" @click="sendRequest" :disabled="loading">
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="loading"
|
||||
@click="sendRequest"
|
||||
>
|
||||
{{ loading ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
|
||||
<div class="response" v-if="response">
|
||||
<div
|
||||
v-if="response"
|
||||
class="response"
|
||||
>
|
||||
<div class="response-header">
|
||||
<span class="status-badge" :class="response.status >= 200 && response.status < 300 ? 'success' : 'error'">
|
||||
<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>
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<span class="icon">📖</span>
|
||||
<span class="title">API 文档翻译机</span>
|
||||
</div>
|
||||
<button class="translate-btn" @click="isHuman = !isHuman">
|
||||
<button
|
||||
class="translate-btn"
|
||||
@click="isHuman = !isHuman"
|
||||
>
|
||||
{{ isHuman ? '🔄 还原回黑话' : '✨ 翻译成人话' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -19,21 +22,30 @@
|
||||
<div class="api-doc">
|
||||
<div class="doc-row method-row">
|
||||
<span class="label">Method:</span>
|
||||
<span class="value method" :class="{ human: isHuman }">
|
||||
<span
|
||||
class="value method"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
{{ isHuman ? '我要下单 (POST)' : 'POST' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="doc-row url-row">
|
||||
<span class="label">Endpoint:</span>
|
||||
<span class="value url" :class="{ human: isHuman }">
|
||||
<span
|
||||
class="value url"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
{{ isHuman ? '去哪里找厨师' : 'https://api.deepseek.com/chat' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="doc-row headers-row">
|
||||
<span class="label">Headers:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
<span class="key">{{
|
||||
isHuman ? '我是谁:' : 'Authorization:'
|
||||
@@ -55,25 +67,41 @@
|
||||
|
||||
<div class="doc-row body-row">
|
||||
<span class="label">Body:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div class="line">{</div>
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
{
|
||||
</div>
|
||||
<div class="line indent">
|
||||
<span class="key">"model":</span>
|
||||
<span class="val">"deepseek-chat",</span>
|
||||
<span class="comment" v-if="isHuman"> // 选个聪明的厨师</span>
|
||||
<span
|
||||
v-if="isHuman"
|
||||
class="comment"
|
||||
> // 选个聪明的厨师</span>
|
||||
</div>
|
||||
<div class="line indent">
|
||||
<span class="key">"messages":</span>
|
||||
<span class="val">[...]</span>
|
||||
<span class="comment" v-if="isHuman"> // 我要说的话</span>
|
||||
<span
|
||||
v-if="isHuman"
|
||||
class="comment"
|
||||
> // 我要说的话</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
}
|
||||
</div>
|
||||
<div class="line">}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="doc-row response-row">
|
||||
<span class="label">Response:</span>
|
||||
<div class="code-block" :class="{ human: isHuman }">
|
||||
<div
|
||||
class="code-block"
|
||||
:class="{ human: isHuman }"
|
||||
>
|
||||
<div class="line">
|
||||
<span class="key">{{ isHuman ? '状态:' : 'Status:' }}</span>
|
||||
<span class="status-ok">{{
|
||||
|
||||
@@ -4,81 +4,143 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？</div>
|
||||
<p class="subtitle">把它们想象成对数据的"操作方式"</p>
|
||||
<div class="title">
|
||||
🔍 HTTP 方法：GET、POST、PUT、DELETE 是什么？
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
把它们想象成对数据的"操作方式"
|
||||
</p>
|
||||
|
||||
<div class="methods-grid">
|
||||
<div class="method-card get">
|
||||
<div class="method-badge">GET</div>
|
||||
<div class="method-title">📖 获取（查询）</div>
|
||||
<div class="method-badge">
|
||||
GET
|
||||
</div>
|
||||
<div class="method-title">
|
||||
📖 获取（查询）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>只看不改</strong> - 从服务器获取数据</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 查询用户信息</div>
|
||||
<div class="example-item">• 搜索商品</div>
|
||||
<div class="example-item">• 获取文章列表</div>
|
||||
<div class="example-item">
|
||||
• 查询用户信息
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 搜索商品
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 获取文章列表
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">💡 可以安全重试，不会改变服务器数据</div>
|
||||
<div class="method-tip">
|
||||
💡 可以安全重试，不会改变服务器数据
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card post">
|
||||
<div class="method-badge">POST</div>
|
||||
<div class="method-title">➕ 创建（新增）</div>
|
||||
<div class="method-badge">
|
||||
POST
|
||||
</div>
|
||||
<div class="method-title">
|
||||
➕ 创建（新增）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>新建数据</strong> - 在服务器创建新资源</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 创建新用户</div>
|
||||
<div class="example-item">• 提交订单</div>
|
||||
<div class="example-item">• 发表评论</div>
|
||||
<div class="example-item">
|
||||
• 创建新用户
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 提交订单
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 发表评论
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 不能随意重试，可能会重复创建</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 不能随意重试，可能会重复创建
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card put">
|
||||
<div class="method-badge">PUT</div>
|
||||
<div class="method-title">✏️ 更新（替换）</div>
|
||||
<div class="method-badge">
|
||||
PUT
|
||||
</div>
|
||||
<div class="method-title">
|
||||
✏️ 更新（替换）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>整体替换</strong> - 用新数据完全替换旧数据</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 修改用户全部信息</div>
|
||||
<div class="example-item">• 更换文章全部内容</div>
|
||||
<div class="example-item">
|
||||
• 修改用户全部信息
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 更换文章全部内容
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 会覆盖整个资源，需要提供完整数据</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 会覆盖整个资源，需要提供完整数据
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card patch">
|
||||
<div class="method-badge">PATCH</div>
|
||||
<div class="method-title">🔧 修改（部分）</div>
|
||||
<div class="method-badge">
|
||||
PATCH
|
||||
</div>
|
||||
<div class="method-title">
|
||||
🔧 修改（部分）
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>局部更新</strong> - 只修改资源的部分字段</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 只修改用户昵称</div>
|
||||
<div class="example-item">• 更新文章标题</div>
|
||||
<div class="example-item">
|
||||
• 只修改用户昵称
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 更新文章标题
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">💡 只传需要修改的字段，更灵活</div>
|
||||
<div class="method-tip">
|
||||
💡 只传需要修改的字段，更灵活
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card delete">
|
||||
<div class="method-badge">DELETE</div>
|
||||
<div class="method-title">🗑️ 删除</div>
|
||||
<div class="method-badge">
|
||||
DELETE
|
||||
</div>
|
||||
<div class="method-title">
|
||||
🗑️ 删除
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
<p><strong>移除数据</strong> - 从服务器删除资源</p>
|
||||
<div class="method-examples">
|
||||
<div class="example-item">• 删除用户</div>
|
||||
<div class="example-item">• 取消订单</div>
|
||||
<div class="example-item">• 删除评论</div>
|
||||
<div class="example-item">
|
||||
• 删除用户
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 取消订单
|
||||
</div>
|
||||
<div class="example-item">
|
||||
• 删除评论
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-tip">⚠️ 操作不可逆，删除后无法恢复</div>
|
||||
<div class="method-tip">
|
||||
⚠️ 操作不可逆，删除后无法恢复
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">📊 快速对比</div>
|
||||
<div class="table-title">
|
||||
📊 快速对比
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="api-playground">
|
||||
<div class="header">
|
||||
<div class="title">🧪 API 练手场</div>
|
||||
<div class="subtitle">随便玩，坏了算我的</div>
|
||||
<div class="title">
|
||||
🧪 API 练手场
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
随便玩，坏了算我的
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="playground-layout">
|
||||
<div class="left-panel">
|
||||
<div class="panel-title">发送请求</div>
|
||||
<div class="panel-title">
|
||||
发送请求
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Endpoint（网址）</label>
|
||||
@@ -16,7 +22,7 @@
|
||||
type="text"
|
||||
placeholder="/users/123"
|
||||
class="input"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
@@ -33,13 +39,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" v-if="method === 'POST'">
|
||||
<div
|
||||
v-if="method === 'POST'"
|
||||
class="input-group"
|
||||
>
|
||||
<label>Body（JSON）</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
class="textarea"
|
||||
placeholder='{"name": "张三"}'
|
||||
></textarea>
|
||||
placeholder="{"name": "张三"}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
@@ -49,25 +58,42 @@
|
||||
type="password"
|
||||
placeholder="sk-..."
|
||||
class="input"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
|
||||
<button class="send-btn" @click="sendRequest" :disabled="loading">
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="loading"
|
||||
@click="sendRequest"
|
||||
>
|
||||
{{ loading ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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 class="panel-title">
|
||||
响应结果
|
||||
</div>
|
||||
|
||||
<div v-else class="response-content">
|
||||
<div class="status-bar" :class="getStatusClass(response.status)">
|
||||
<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>
|
||||
@@ -76,7 +102,10 @@
|
||||
<pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation" v-if="response.explanation">
|
||||
<div
|
||||
v-if="response.explanation"
|
||||
class="explanation"
|
||||
>
|
||||
💡 {{ response.explanation }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,14 +113,28 @@
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<div class="tip-title">可以试试这些玩法：</div>
|
||||
<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>
|
||||
<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>
|
||||
@@ -208,7 +251,7 @@ function sendRequest() {
|
||||
data: { error: 'Resource not found' },
|
||||
explanation: '地址错了，这个接口不存在'
|
||||
}
|
||||
} else if (endpoint.value === '/users' && method.value === 'GET') {
|
||||
} else if (endpoint.value === '/users' && method.value === 'DELETE') {
|
||||
response.value = {
|
||||
status: 429,
|
||||
statusText: 'Too Many Requests',
|
||||
|
||||
@@ -11,24 +11,41 @@
|
||||
|
||||
<div class="content">
|
||||
<div class="action-area">
|
||||
<button class="call-btn" :disabled="calling" @click="callApi">
|
||||
<button
|
||||
class="call-btn"
|
||||
:disabled="calling"
|
||||
@click="callApi"
|
||||
>
|
||||
<span v-if="!calling">📡 发起 API 请求</span>
|
||||
<span v-else>🔄 请求处理中...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="result-area" v-if="result || calling">
|
||||
<div class="loading-dots" v-if="calling">
|
||||
<div
|
||||
v-if="result || calling"
|
||||
class="result-area"
|
||||
>
|
||||
<div
|
||||
v-if="calling"
|
||||
class="loading-dots"
|
||||
>
|
||||
<span>.</span><span>.</span><span>.</span>
|
||||
</div>
|
||||
<div class="response-card" v-else-if="result">
|
||||
<div
|
||||
v-else-if="result"
|
||||
class="response-card"
|
||||
>
|
||||
<div class="response-header">
|
||||
<span class="status-badge success">200 OK</span>
|
||||
<span class="time">耗时: {{ result.time }}ms</span>
|
||||
</div>
|
||||
<div class="response-body">
|
||||
<div class="time-display">{{ result.timeString }}</div>
|
||||
<div class="timezone">{{ result.timezone }}</div>
|
||||
<div class="time-display">
|
||||
{{ result.timeString }}
|
||||
</div>
|
||||
<div class="timezone">
|
||||
{{ result.timezone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<div class="function-api-demo">
|
||||
<div class="header">
|
||||
<div class="title">🔧 你早就在用 API 了</div>
|
||||
<div class="subtitle">函数就是最基础的 API</div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -48,22 +54,43 @@ print(result)</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="try-it">
|
||||
<div class="try-title">🎮 试试调用：</div>
|
||||
<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
|
||||
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>
|
||||
<button
|
||||
class="call-btn"
|
||||
@click="callFunction"
|
||||
>
|
||||
调用 greet()
|
||||
</button>
|
||||
</div>
|
||||
<div class="result" v-if="result">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<span class="arrow">→</span>
|
||||
<code>{{ result }}</code>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🤖 真实场景：让 AI 帮你写产品文案</div>
|
||||
<p class="subtitle">体验两种调用方式的区别</p>
|
||||
<div class="title">
|
||||
🤖 真实场景：让 AI 帮你写产品文案
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
体验两种调用方式的区别
|
||||
</p>
|
||||
|
||||
<div class="scenario">
|
||||
<div class="scenario-header">
|
||||
@@ -35,53 +39,84 @@
|
||||
|
||||
<div class="mode-content">
|
||||
<!-- HTTP 模式 -->
|
||||
<div v-if="mode === 'http'" class="mode-details">
|
||||
<div
|
||||
v-if="mode === 'http'"
|
||||
class="mode-details"
|
||||
>
|
||||
<div class="steps">
|
||||
<div class="step" :class="{ active: currentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">找到网址（打开外卖 APP）</div>
|
||||
<div class="step-title">
|
||||
找到网址（打开外卖 APP）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
https://api.openai.com/v1/chat/completions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">准备订单（填写信息）</div>
|
||||
<div class="step-title">
|
||||
准备订单（填写信息）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
Authorization: Bearer 你的API密钥<br />
|
||||
Authorization: Bearer 你的API密钥<br>
|
||||
Content-Type: application/json
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">下单（发送请求）</div>
|
||||
<div class="step-title">
|
||||
下单（发送请求）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
{<br />
|
||||
"model": "gpt-4",<br />
|
||||
"messages": [<br />
|
||||
{<br>
|
||||
"model": "gpt-4",<br>
|
||||
"messages": [<br>
|
||||
{ "role": "system", "content":
|
||||
"你是营销文案专家" },<br />
|
||||
"你是营销文案专家" },<br>
|
||||
{ "role": "user", "content":
|
||||
"写智能手表文案" }<br />
|
||||
]<br />
|
||||
"写智能手表文案" }<br>
|
||||
]<br>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 4 }">
|
||||
<div class="step-number">4</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">等待配送（解析响应）</div>
|
||||
<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>
|
||||
@@ -99,52 +134,85 @@
|
||||
</div>
|
||||
|
||||
<!-- SDK 模式 -->
|
||||
<div v-else class="mode-details">
|
||||
<div
|
||||
v-else
|
||||
class="mode-details"
|
||||
>
|
||||
<div class="steps">
|
||||
<div class="step" :class="{ active: currentStep >= 1 }">
|
||||
<div class="step-number">1</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 1 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">走进餐厅（安装 SDK）</div>
|
||||
<div class="step-code">import OpenAI from 'openai'</div>
|
||||
<div class="step-title">
|
||||
走进餐厅（安装 SDK）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
import OpenAI from 'openai'
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 2 }">
|
||||
<div class="step-number">2</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 2 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">找服务员（初始化客户端）</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 3 }">
|
||||
<div class="step-number">3</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 3 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
3
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">直接点菜（调用函数）</div>
|
||||
<div class="step-title">
|
||||
直接点菜（调用函数）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
const response = await client.chat.completions.create({<br />
|
||||
model: 'gpt-4',<br />
|
||||
messages: [<br />
|
||||
const response = await client.chat.completions.create({<br>
|
||||
model: 'gpt-4',<br>
|
||||
messages: [<br>
|
||||
{ role: 'system', content:
|
||||
'你是营销文案专家' },<br />
|
||||
'你是营销文案专家' },<br>
|
||||
{ role: 'user', content:
|
||||
'写智能手表文案' }<br />
|
||||
]<br />
|
||||
'写智能手表文案' }<br>
|
||||
]<br>
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" :class="{ active: currentStep >= 4 }">
|
||||
<div class="step-number">4</div>
|
||||
<div
|
||||
class="step"
|
||||
:class="{ active: currentStep >= 4 }"
|
||||
>
|
||||
<div class="step-number">
|
||||
4
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">享用美食（直接使用）</div>
|
||||
<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>
|
||||
@@ -163,11 +231,18 @@
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<button class="run-btn" :disabled="running" @click="runDemo">
|
||||
<button
|
||||
class="run-btn"
|
||||
:disabled="running"
|
||||
@click="runDemo"
|
||||
>
|
||||
{{ running ? '调用中...' : '🚀 开始调用 AI' }}
|
||||
</button>
|
||||
|
||||
<div class="result" v-if="result">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<div class="result-header">
|
||||
{{ mode === 'http' ? '🌐 HTTP API 返回' : '📦 SDK 返回' }}
|
||||
</div>
|
||||
|
||||
@@ -4,38 +4,65 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="title">🔄 一次 API 调用的流程</div>
|
||||
<p class="subtitle">点一下按钮，看请求怎么飞过去再飞回来</p>
|
||||
<div class="title">
|
||||
🔄 一次 API 调用的流程
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
点一下按钮，看请求怎么飞过去再飞回来
|
||||
</p>
|
||||
|
||||
<div class="flow-container">
|
||||
<div class="side you">
|
||||
<div class="window">
|
||||
<div class="window-header">👤 你这边</div>
|
||||
<div class="window-header">
|
||||
👤 你这边
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="message">我想调用 API</div>
|
||||
<div class="message">
|
||||
我想调用 API
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="arrow" :class="{ animating: isAnimating }">➔</div>
|
||||
<button class="send-btn" :disabled="isAnimating" @click="send">
|
||||
<div
|
||||
class="arrow"
|
||||
:class="{ animating: isAnimating }"
|
||||
>
|
||||
➔
|
||||
</div>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="isAnimating"
|
||||
@click="send"
|
||||
>
|
||||
{{ isAnimating ? '发送中...' : '🚀 发送请求' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="side server">
|
||||
<div class="window">
|
||||
<div class="window-header">🖥️ 对方服务器</div>
|
||||
<div class="window-header">
|
||||
🖥️ 对方服务器
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div class="message">{{ serverMessage }}</div>
|
||||
<div class="message">
|
||||
{{ serverMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result" v-if="result">
|
||||
<div class="result-box" :class="result.type">
|
||||
<div
|
||||
v-if="result"
|
||||
class="result"
|
||||
>
|
||||
<div
|
||||
class="result-box"
|
||||
:class="result.type"
|
||||
>
|
||||
{{ result.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user