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

refactor: 重构 api-intro、api-design、transistor-to-cpu 组件为紧凑布局

Browse Source 
- 重构 api-intro 7 个 Vue 组件为更紧凑的左右布局
- 重构 api-design 相关组件
- 重构 transistor-to-cpu 相关组件
- 统一使用 demo-root -> demo-header -> demo-layout -> info-box 结构
- 扩写文章内容为 MIT 讲义风格
This commit is contained in:
sanbuphy
2026-02-23 01:50:43 +08:00
parent 2a0fdd3392
commit 1062e2e16f
68 changed files with 4455 additions and 3469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/api-intro/RealWorldApiDemo.vue
+163 -450
View File
@@ -1,256 +1,71 @@
<!--
RealWorldApiDemo.vue
目标：展示真实场景中调用 AI 服务的两种方式
RealWorldApiDemo.vue - 紧凑版
目标：对比 HTTP 调用和 SDK 调用
-->
<template>
<div class="demo">
<div class="title">
🤖 真实场景：让 AI 帮你写产品文案
</div>
<p class="subtitle">
体验两种调用方式的区别
</p>
<div class="scenario">
<div class="scenario-header">
<span class="scenario-icon">📝</span>
<span class="scenario-title">你的需求</span>
</div>
<div class="scenario-body">
我想让 AI 帮智能手表写一段吸引人的产品文案
</div>
<div class="demo-root">
<div class="demo-header">
<span class="icon">⚡</span>
<span class="title">HTTP vs SDK：自己跑腿还是让管家代办？</span>
</div>
<div class="modes">
<div class="mode-tabs">
<div class="demo-layout">
<div class="tabs">
<button
:class="['tab', { active: mode === 'http' }]"
@click="mode = 'http'"
>
🌐 HTTP API（外卖模式）
HTTP API
</button>
<button
:class="['tab', { active: mode === 'sdk' }]"
@click="mode = 'sdk'"
>
📦 SDK（堂食模式）
SDK
</button>
</div>
<div class="mode-content">
<!-- HTTP 模式 -->
<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-content">
<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-content">
<div class="step-title">
准备订单（填写信息）
</div>
<div class="step-code">
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-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>
}
</div>
</div>
</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-code">
response.choices[0].message.content<br>
<span class="step-hint">⚠️ 需要自己处理解析错误</span>
</div>
</div>
</div>
</div>
<div class="summary">
<p><strong>💡 HTTP API 特点：</strong></p>
<ul>
<li>✅ 灵活：任何语言都能用</li>
<li>❌ 复杂：要手动处理很多细节</li>
<li>❌ 容易出错：鉴权、数据格式、错误处理都要自己写</li>
</ul>
</div>
<div class="code-area">
<div class="code-header">
<span>{{
mode === 'http' ? '自己处理所有细节' : '管家帮你处理'
}}</span>
</div>
<pre
class="code"
><code>{{ mode === 'http' ? httpCode : sdkCode }}</code></pre>
</div>
<!-- SDK 模式 -->
<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-content">
<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-content">
<div class="step-title">
找服务员（初始化客户端）
</div>
<div class="step-code">
const client = new OpenAI({<br>
&nbsp;&nbsp;apiKey: '你的密钥'<br>
})
</div>
</div>
</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-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>
})
</div>
</div>
</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-code">
console.log(response.choices[0].message.content)<br>
<span class="step-hint">✅ SDK 帮你处理好了所有细节</span>
</div>
</div>
</div>
<div class="compare-panel">
<div class="compare-title">对比</div>
<div class="compare-list">
<div class="compare-item">
<span class="ci-label">代码量</span>
<span class="ci-val">{{ mode === 'http' ? '多' : '少' }}</span>
</div>
<div class="summary">
<p><strong>💡 SDK 特点：</strong></p>
<ul>
<li>✅ 简单：只管调用函数</li>
<li>✅ 省心：SDK 自动处理鉴权、错误、数据格式</li>
<li>❌ 限制：通常只能在特定语言使用</li>
</ul>
<div class="compare-item">
<span class="ci-label">错误处理</span>
<span class="ci-val">{{
mode === 'http' ? '自己写' : '自动处理'
}}</span>
</div>
<div class="compare-item">
<span class="ci-label">重试逻辑</span>
<span class="ci-val">{{
mode === 'http' ? '自己写' : '内置'
}}</span>
</div>
<div class="compare-item">
<span class="ci-label">类型提示</span>
<span class="ci-val">{{ mode === 'http' ? '无' : '有' }}</span>
</div>
</div>
</div>
</div>
<div class="action">
<button
class="run-btn"
:disabled="running"
@click="runDemo"
>
{{ running ? '调用中...' : '🚀 开始调用 AI' }}
</button>
<div
v-if="result"
class="result"
>
<div class="result-header">
{{ mode === 'http' ? '🌐 HTTP API 返回' : '📦 SDK 返回' }}
</div>
<div class="result-body">
"这款智能手表，是你的贴身健康管家。全天候心率监测，运动模式自动识别..."
</div>
</div>
</div>
<div class="info-box">
<strong>核心思想：</strong>
<span>能用 SDK 就用 SDK，把麻烦事留给库，把时间留给自己。</span>
</div>
</div>
</template>
@@ -258,270 +73,168 @@
<script setup>
import { ref } from 'vue'
const mode = ref('http')
const currentStep = ref(0)
const running = ref(false)
const result = ref(null)
const mode = ref('sdk')
async function runDemo() {
running.value = true
result.value = null
currentStep.value = 0
const httpCode = `import requests
// 模拟逐步执行
for (let i = 1; i <= 4; i++) {
await new Promise((resolve) => setTimeout(resolve, 600))
currentStep.value = i
}
response = requests.post(
"https://api.deepseek.com/v1/chat/completions",
headers={
"Authorization": "Bearer sk-xxx",
"Content-Type": "application/json"
},
json={
"model": "deepseek-chat",
"messages": [{"role": "user", "content": "你好"}]
}
)
await new Promise((resolve) => setTimeout(resolve, 400))
result.value = true
running.value = false
}
if response.status_code == 200:
result = response.json()
content = result["choices"][0]["message"]["content"]
else:
# 处理错误...
pass`
const sdkCode = `from openai import OpenAI
client = OpenAI(
api_key="sk-xxx",
base_url="https://api.deepseek.com"
)
response = client.chat.completions.create(
model="deepseek-chat",
messages=[{"role": "user", "content": "你好"}]
)
content = response.choices[0].message.content`
</script>
<style scoped>
.demo {
.demo-root {
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
padding: 20px;
border-radius: 10px;
overflow: hidden;
background: var(--vp-c-bg-soft);
margin: 16px 0;
margin: 1rem 0;
font-size: 0.85rem;
}
.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: 20px;
}
.scenario {
.demo-header {
padding: 10px 16px;
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-brand-1);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
}
.scenario-header {
border-bottom: 1px solid var(--vp-c-divider);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.scenario-icon {
font-size: 24px;
.icon {
font-size: 18px;
}
.title {
font-weight: 600;
font-size: 0.9rem;
}
.scenario-title {
font-size: 16px;
font-weight: bold;
color: var(--vp-c-text-1);
}
.scenario-body {
font-size: 15px;
line-height: 1.6;
color: var(--vp-c-text-1);
padding-left: 32px;
}
.modes {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 12px;
overflow: hidden;
}
.mode-tabs {
.demo-layout {
display: flex;
border-bottom: 2px solid var(--vp-c-divider);
flex-direction: column;
}
.tabs {
display: flex;
gap: 4px;
padding: 10px 12px;
background: var(--vp-c-bg);
}
.tab {
flex: 1;
padding: 14px 20px;
border: none;
background: var(--vp-c-bg-soft);
font-size: 15px;
font-weight: bold;
padding: 6px 16px;
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
background: transparent;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
border-bottom: 3px solid transparent;
}
.tab:hover {
background: var(--vp-c-bg);
}
.tab.active {
background: var(--vp-c-brand);
color: white;
border-color: var(--vp-c-brand);
}
.code-area {
background: #1e293b;
}
.code-header {
padding: 6px 12px;
font-size: 0.75rem;
color: #94a3b8;
border-bottom: 1px solid #334155;
}
.code {
margin: 0;
padding: 12px;
font-family: 'Menlo', 'Monaco', monospace;
font-size: 0.72rem;
line-height: 1.5;
color: #e2e8f0;
overflow-x: auto;
white-space: pre;
}
.compare-panel {
padding: 12px;
background: var(--vp-c-bg);
border-bottom-color: var(--vp-c-brand-1);
}
.mode-content {
padding: 20px;
.compare-title {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 8px;
}
.steps {
.compare-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
gap: 12px;
flex-wrap: wrap;
}
.step {
display: flex;
gap: 16px;
opacity: 0.4;
transition: opacity 0.3s;
}
.step.active {
opacity: 1;
}
.step-number {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--vp-c-bg-soft);
border: 2px solid var(--vp-c-divider);
.compare-item {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
gap: 6px;
padding: 6px 10px;
background: var(--vp-c-bg-soft);
border-radius: 4px;
font-size: 0.75rem;
}
.ci-label {
color: var(--vp-c-text-2);
}
.step.active .step-number {
background: var(--vp-c-brand-1);
border-color: var(--vp-c-brand-1);
color: white;
.ci-val {
font-weight: 600;
}
.step-content {
flex: 1;
.info-box {
display: flex;
gap: 0.25rem;
padding: 10px 14px;
background: var(--vp-c-bg-alt);
border-top: 1px solid var(--vp-c-divider);
font-size: 0.8rem;
color: var(--vp-c-text-2);
}
.step-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 6px;
color: var(--vp-c-text-1);
}
.step-code {
background: #1e293b;
color: #e2e8f0;
padding: 12px;
border-radius: 6px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
line-height: 1.6;
position: relative;
}
.step-hint {
display: block;
margin-top: 8px;
font-size: 11px;
padding: 6px 8px;
border-radius: 4px;
}
.step.active .step-hint {
background: rgba(255, 255, 255, 0.1);
}
.summary {
background: var(--vp-c-bg-soft);
padding: 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.8;
}
.summary p {
margin-bottom: 8px;
}
.summary ul {
margin: 0;
padding-left: 20px;
}
.summary li {
margin: 4px 0;
}
.action {
padding: 20px;
border-top: 2px solid var(--vp-c-divider);
}
.run-btn {
width: 100%;
padding: 14px 24px;
background: var(--vp-c-brand-1);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
}
.run-btn:hover:not(:disabled) {
opacity: 0.9;
transform: scale(1.02);
}
.run-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.result {
margin-top: 16px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.result-header {
font-weight: bold;
font-size: 14px;
margin-bottom: 8px;
color: var(--vp-c-text-1);
}
.result-body {
background: #f0fdf4;
border: 2px solid #86efac;
border-radius: 6px;
padding: 16px;
font-size: 14px;
line-height: 1.6;
color: #166534;
.info-box strong {
white-space: nowrap;
flex-shrink: 0;
}
</style>