574 lines
25 KiB
JavaScript
574 lines
25 KiB
JavaScript
/*
|
||
Copyright (C) 2025 QuantumNous
|
||
|
||
This program is free software: you can redistribute it and/or modify
|
||
it under the terms of the GNU Affero General Public License as
|
||
published by the Free Software Foundation, either version 3 of the
|
||
License, or (at your option) any later version.
|
||
For commercial licensing, please contact support@quantumnous.com
|
||
*/
|
||
|
||
import React, { useState, useRef, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
BookOpen,
|
||
Zap,
|
||
Key,
|
||
Terminal,
|
||
Box,
|
||
Gauge,
|
||
HelpCircle,
|
||
ChevronRight,
|
||
Copy,
|
||
Check,
|
||
ExternalLink,
|
||
ArrowRight,
|
||
Code,
|
||
Server,
|
||
Globe,
|
||
Shield,
|
||
Clock,
|
||
Sparkles,
|
||
Layers,
|
||
Menu,
|
||
X,
|
||
Rocket,
|
||
MessageSquare,
|
||
Image,
|
||
Music,
|
||
Video,
|
||
FileText,
|
||
} from 'lucide-react';
|
||
|
||
/* ─── DOCS SECTIONS ─── */
|
||
const DOC_SECTIONS = [
|
||
{ id: 'overview', icon: BookOpen, label: '概述', labelEn: 'Overview' },
|
||
{ id: 'quickstart', icon: Rocket, label: '快速开始', labelEn: 'Quick Start' },
|
||
{ id: 'apikey', icon: Key, label: 'API 密钥', labelEn: 'API Keys' },
|
||
{ id: 'chat', icon: MessageSquare, label: '对话补全', labelEn: 'Chat Completions' },
|
||
{ id: 'image', icon: Image, label: '图片生成', labelEn: 'Image Generation' },
|
||
{ id: 'audio', icon: Music, label: '语音 & 音频', labelEn: 'Audio & Speech' },
|
||
{ id: 'video', icon: Video, label: '视频生成', labelEn: 'Video Generation' },
|
||
{ id: 'models', icon: Box, label: '支持模型', labelEn: 'Supported Models' },
|
||
{ id: 'ratelimit', icon: Gauge, label: '速率限制', labelEn: 'Rate Limits' },
|
||
{ id: 'faq', icon: HelpCircle, label: '常见问题', labelEn: 'FAQ' },
|
||
];
|
||
|
||
/* ─── CodeBlock Component ─── */
|
||
function CodeBlock({ code, lang = 'bash' }) {
|
||
const { t } = useTranslation();
|
||
const [copied, setCopied] = useState(false);
|
||
const copy = () => {
|
||
navigator.clipboard.writeText(code);
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 1500);
|
||
};
|
||
return (
|
||
<div className="relative group my-4 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||
<div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||
<span className="text-xs font-mono text-gray-500 dark:text-gray-400 uppercase">{lang}</span>
|
||
<button
|
||
onClick={copy}
|
||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||
>
|
||
{copied ? <Check size={14} /> : <Copy size={14} />}
|
||
{copied ? t('已复制') : t('复制')}
|
||
</button>
|
||
</div>
|
||
<pre className="p-4 overflow-x-auto text-sm font-mono text-gray-800 dark:text-gray-200 leading-relaxed">
|
||
<code>{code}</code>
|
||
</pre>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── SectionTitle ─── */
|
||
function SectionTitle({ id, icon: Icon, children }) {
|
||
return (
|
||
<h2 id={id} className="group flex items-center gap-3 mt-12 mb-5 scroll-mt-24">
|
||
<span className="flex items-center justify-center w-9 h-9 rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
||
<Icon size={18} />
|
||
</span>
|
||
<span className="text-2xl font-bold text-gray-900 dark:text-white">{children}</span>
|
||
</h2>
|
||
);
|
||
}
|
||
|
||
/* ─── SubSection ─── */
|
||
function SubSection({ children, className = '' }) {
|
||
return <h3 className={`text-lg font-semibold text-gray-800 dark:text-gray-200 mt-8 mb-3 ${className}`}>{children}</h3>;
|
||
}
|
||
|
||
/* ─── Paragraph ─── */
|
||
function P({ children, className = '' }) {
|
||
return <p className={`text-gray-600 dark:text-gray-400 leading-relaxed mb-4 ${className}`}>{children}</p>;
|
||
}
|
||
|
||
/* ─── Table Component ─── */
|
||
function DocsTable({ headers, rows }) {
|
||
return (
|
||
<div className="overflow-x-auto my-4 rounded-lg border border-gray-200 dark:border-gray-700">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="bg-gray-50 dark:bg-gray-800/50">
|
||
{headers.map((h, i) => (
|
||
<th key={i} className="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
|
||
{h}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((row, i) => (
|
||
<tr key={i} className="border-b border-gray-100 dark:border-gray-800 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
|
||
{row.map((cell, j) => (
|
||
<td key={j} className="px-4 py-3 text-gray-600 dark:text-gray-400">{cell}</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── Info Card ─── */
|
||
function InfoCard({ icon: Icon, title, children, className = '' }) {
|
||
return (
|
||
<div className={`flex gap-4 p-5 rounded-xl border border-violet-200 dark:border-violet-800 bg-violet-50 dark:bg-violet-900/20 ${className}`}>
|
||
<span className="flex-shrink-0 mt-0.5 text-violet-500 dark:text-violet-400"><Icon size={20} /></span>
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-violet-700 dark:text-violet-300 mb-1">{title}</h4>
|
||
<div className="text-sm text-violet-600 dark:text-violet-400">{children}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── MAIN DOCS PAGE ─── */
|
||
export default function Docs() {
|
||
const { t } = useTranslation();
|
||
const [activeSection, setActiveSection] = useState('overview');
|
||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||
const contentRef = useRef(null);
|
||
|
||
// Scroll spy
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
for (const entry of entries) {
|
||
if (entry.isIntersecting) {
|
||
setActiveSection(entry.target.id);
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
{ rootMargin: '-80px 0px -70% 0px', threshold: 0 }
|
||
);
|
||
|
||
const ids = DOC_SECTIONS.map((s) => s.id);
|
||
ids.forEach((id) => {
|
||
const el = document.getElementById(id);
|
||
if (el) observer.observe(el);
|
||
});
|
||
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const scrollTo = (id) => {
|
||
setSidebarOpen(false);
|
||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
|
||
const BASE_HOST = window.location.origin;
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white dark:bg-gray-950">
|
||
{/* ── Top Nav Bar ── */}
|
||
<header className="sticky top-0 z-40 h-14 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md">
|
||
<div className="flex items-center h-full px-4 lg:px-6 max-w-[1400px] mx-auto gap-3">
|
||
<button
|
||
className="lg:hidden p-2 -ml-2 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
|
||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||
>
|
||
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
|
||
</button>
|
||
<a href="/" className="flex items-center gap-2 flex-shrink-0">
|
||
<img src="/logo.jpg" alt="logo" className="w-7 h-7 rounded-full object-cover" />
|
||
<span className="font-heading text-lg font-bold tracking-tight text-gray-900 dark:text-white">TuringToken</span>
|
||
</a>
|
||
<span className="hidden sm:inline text-sm text-gray-400 dark:text-gray-500">|</span>
|
||
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300">{t('文档')}</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="max-w-[1400px] mx-auto flex">
|
||
{/* ── Sidebar (Desktop) ── */}
|
||
<aside className="hidden lg:block w-[240px] flex-shrink-0 sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto border-r border-gray-200 dark:border-gray-800 py-6 px-3">
|
||
<nav className="space-y-1">
|
||
{DOC_SECTIONS.map((s) => (
|
||
<button
|
||
key={s.id}
|
||
onClick={() => scrollTo(s.id)}
|
||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-150 text-left
|
||
${activeSection === s.id
|
||
? 'bg-violet-50 dark:bg-violet-900/20 text-violet-700 dark:text-violet-300 font-semibold'
|
||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white'
|
||
}`}
|
||
>
|
||
<s.icon size={16} className={activeSection === s.id ? 'text-violet-500' : 'text-gray-400'} />
|
||
{s.label}
|
||
{activeSection === s.id && <ChevronRight size={14} className="ml-auto text-violet-400" />}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</aside>
|
||
|
||
{/* ── Mobile Sidebar Overlay ── */}
|
||
{sidebarOpen && (
|
||
<>
|
||
<div className="fixed inset-0 z-40 bg-black/40 lg:hidden" onClick={() => setSidebarOpen(false)} />
|
||
<aside className="fixed top-14 left-0 z-50 w-[260px] h-[calc(100vh-3.5rem)] overflow-y-auto bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800 py-6 px-3 lg:hidden">
|
||
<nav className="space-y-1">
|
||
{DOC_SECTIONS.map((s) => (
|
||
<button
|
||
key={s.id}
|
||
onClick={() => scrollTo(s.id)}
|
||
className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-sm transition-all text-left
|
||
${activeSection === s.id
|
||
? 'bg-violet-50 dark:bg-violet-900/20 text-violet-700 dark:text-violet-300 font-semibold'
|
||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50'
|
||
}`}
|
||
>
|
||
<s.icon size={16} className={activeSection === s.id ? 'text-violet-500' : 'text-gray-400'} />
|
||
{s.label}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</aside>
|
||
</>
|
||
)}
|
||
|
||
{/* ── Content ── */}
|
||
<main ref={contentRef} className="flex-1 min-w-0 py-8 px-6 lg:px-10 xl:px-16 max-w-4xl">
|
||
|
||
{/* ── Section: 概述 ── */}
|
||
<SectionTitle id="overview" icon={BookOpen}>{t('概述')}</SectionTitle>
|
||
<P>
|
||
TuringToken 是一个统一的 AI API 网关，聚合了
|
||
<strong className="text-gray-900 dark:text-white"> 40+ 主流 AI 提供商</strong>（OpenAI、Claude、Gemini、DeepSeek、Qwen 等），
|
||
提供与 OpenAI API 完全兼容的接口格式。一次接入，即可访问所有模型，无需分别对接各个厂商。
|
||
</P>
|
||
|
||
<div className="grid sm:grid-cols-2 gap-4 mt-6 mb-8">
|
||
{[
|
||
{ icon: Server, title: '统一接口', desc: '与 OpenAI API 格式完全兼容，零改造迁移' },
|
||
{ icon: Globe, title: '多供应商聚合', desc: '一站式接入 40+ AI 厂商，按需切换' },
|
||
{ icon: Shield, title: '安全可靠', desc: 'API 密钥管理、速率限制、访问控制' },
|
||
{ icon: Clock, title: '按量计费', desc: '按 Token 用量计费，灵活成本控制' },
|
||
].map((f, i) => (
|
||
<div key={i} className="flex gap-3 p-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
|
||
<span className="flex-shrink-0 text-violet-500 dark:text-violet-400"><f.icon size={20} /></span>
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">{f.title}</h4>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400">{f.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── Section: 快速开始 ── */}
|
||
<SectionTitle id="quickstart" icon={Rocket}>{t('快速开始')}</SectionTitle>
|
||
<P>只需三步，即可接入 AI 能力：</P>
|
||
|
||
<div className="space-y-6 mt-6">
|
||
<div className="flex gap-4">
|
||
<span className="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-violet-500 text-white text-sm font-bold">1</span>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-1">{t('注册账号')}</h4>
|
||
<P className="!mb-0">访问 <a href="/register" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">注册页面</a> 创建 TuringToken 账号。</P>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<span className="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-violet-500 text-white text-sm font-bold">2</span>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-1">{t('创建 API 密钥')}</h4>
|
||
<P className="!mb-0">进入 <a href="/console/token" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">控制台 → API Key</a>，点击"新建"生成密钥。</P>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<span className="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-violet-500 text-white text-sm font-bold">3</span>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-1">{t('发送请求')}</h4>
|
||
<P className="!mb-0">使用下方示例代码，将 Base URL 替换为 TuringToken 地址即可。</P>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<InfoCard icon={Zap} title="Base URL" className="mt-6">
|
||
<code className="font-mono text-sm bg-violet-100 dark:bg-violet-900/40 px-2 py-0.5 rounded">{BASE_HOST}/v1</code>
|
||
</InfoCard>
|
||
|
||
{/* ── Section: API 密钥 ── */}
|
||
<SectionTitle id="apikey" icon={Key}>{t('API 密钥')}</SectionTitle>
|
||
<P>
|
||
API 密钥是与 TuringToken 通信的凭证。每个密钥可以设置额度上限、有效期和 IP 白名单。
|
||
</P>
|
||
|
||
<SubSection>创建密钥</SubSection>
|
||
<P>
|
||
登录后进入 <a href="/console/token" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">控制台 → API Key</a>，
|
||
点击"新建 API Key"，填写名称后即可生成。请务必妥善保存密钥，关闭页面后将无法再次查看完整密钥。
|
||
</P>
|
||
|
||
<SubSection>使用密钥</SubSection>
|
||
<P>在所有 API 请求中，通过 Bearer Token 方式传递密钥：</P>
|
||
<CodeBlock
|
||
lang="http"
|
||
code={`Authorization: Bearer sk-your-api-key-here`}
|
||
/>
|
||
|
||
<InfoCard icon={Shield} title="安全提醒">
|
||
请勿将 API 密钥硬编码在前端代码或公开仓库中。建议使用环境变量或后端代理方式管理密钥。
|
||
</InfoCard>
|
||
|
||
{/* ── Section: 对话补全 ── */}
|
||
<SectionTitle id="chat" icon={MessageSquare}>{t('对话补全')}</SectionTitle>
|
||
<P>
|
||
对话补全是最常用的 API 接口，支持多轮对话、流式输出和 Function Calling。
|
||
兼容 OpenAI Chat Completions API 格式。
|
||
</P>
|
||
|
||
<SubSection>基础请求</SubSection>
|
||
<CodeBlock
|
||
lang="bash"
|
||
code={`curl ${BASE_HOST}/v1/chat/completions \\
|
||
-H "Content-Type: application/json" \\
|
||
-H "Authorization: Bearer sk-your-api-key" \\
|
||
-d '{
|
||
"model": "gpt-4o",
|
||
"messages": [
|
||
{"role": "system", "content": "你是一个有用的AI助手。"},
|
||
{"role": "user", "content": "你好，请介绍一下你自己。"}
|
||
]
|
||
}'`}
|
||
/>
|
||
|
||
<SubSection>流式输出</SubSection>
|
||
<P>设置 <code className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-violet-600 dark:text-violet-400">stream: true</code> 即可启用 SSE 流式响应：</P>
|
||
<CodeBlock
|
||
lang="bash"
|
||
code={`curl ${BASE_HOST}/v1/chat/completions \\
|
||
-H "Content-Type: application/json" \\
|
||
-H "Authorization: Bearer sk-your-api-key" \\
|
||
-d '{
|
||
"model": "gpt-4o",
|
||
"messages": [{"role": "user", "content": "写一首关于春天的诗"}],
|
||
"stream": true
|
||
}'`}
|
||
/>
|
||
|
||
<SubSection>Python SDK 示例</SubSection>
|
||
<CodeBlock
|
||
lang="python"
|
||
code={`from openai import OpenAI
|
||
|
||
client = OpenAI(
|
||
base_url="${BASE_HOST}/v1",
|
||
api_key="sk-your-api-key",
|
||
)
|
||
|
||
response = client.chat.completions.create(
|
||
model="gpt-4o",
|
||
messages=[
|
||
{"role": "user", "content": "你好，请介绍一下你自己。"}
|
||
],
|
||
)
|
||
|
||
print(response.choices[0].message.content)`}
|
||
/>
|
||
|
||
<SubSection>Node.js SDK 示例</SubSection>
|
||
<CodeBlock
|
||
lang="javascript"
|
||
code={`import OpenAI from 'openai';
|
||
|
||
const client = new OpenAI({
|
||
baseURL: '${BASE_HOST}/v1',
|
||
apiKey: 'sk-your-api-key',
|
||
});
|
||
|
||
const completion = await client.chat.completions.create({
|
||
model: 'gpt-4o',
|
||
messages: [
|
||
{ role: 'user', content: '你好，请介绍一下你自己。' }
|
||
],
|
||
});
|
||
|
||
console.log(completion.choices[0].message.content);`}
|
||
/>
|
||
|
||
{/* ── Section: 图片生成 ── */}
|
||
<SectionTitle id="image" icon={Image}>{t('图片生成')}</SectionTitle>
|
||
<P>
|
||
支持 DALL·E、Stable Diffusion 等多种图片生成模型，兼容 OpenAI Images API 格式。
|
||
</P>
|
||
|
||
<SubSection>生成图片</SubSection>
|
||
<CodeBlock
|
||
lang="bash"
|
||
code={`curl ${BASE_HOST}/v1/images/generations \\
|
||
-H "Content-Type: application/json" \\
|
||
-H "Authorization: Bearer sk-your-api-key" \\
|
||
-d '{
|
||
"model": "dall-e-3",
|
||
"prompt": "一只正在敲代码的可爱猫咪，赛博朋克风格",
|
||
"n": 1,
|
||
"size": "1024x1024"
|
||
}'`}
|
||
/>
|
||
|
||
{/* ── Section: 语音 & 音频 ── */}
|
||
<SectionTitle id="audio" icon={Music}>{t('语音 & 音频')}</SectionTitle>
|
||
<P>支持语音转文字（STT）和文字转语音（TTS），兼容 OpenAI Audio API 格式。</P>
|
||
|
||
<SubSection>语音转文字 (STT)</SubSection>
|
||
<CodeBlock
|
||
lang="bash"
|
||
code={`curl ${BASE_HOST}/v1/audio/transcriptions \\
|
||
-H "Authorization: Bearer sk-your-api-key" \\
|
||
-F "file=@audio.mp3" \\
|
||
-F "model=whisper-1"`}
|
||
/>
|
||
|
||
<SubSection>文字转语音 (TTS)</SubSection>
|
||
<CodeBlock
|
||
lang="bash"
|
||
code={`curl ${BASE_HOST}/v1/audio/speech \\
|
||
-H "Authorization: Bearer sk-your-api-key" \\
|
||
-H "Content-Type: application/json" \\
|
||
-d '{
|
||
"model": "tts-1",
|
||
"input": "你好，欢迎使用 TuringToken！",
|
||
"voice": "alloy"
|
||
}' \\
|
||
--output speech.mp3`}
|
||
/>
|
||
|
||
{/* ── Section: 视频生成 ── */}
|
||
<SectionTitle id="video" icon={Video}>{t('视频生成')}</SectionTitle>
|
||
<P>
|
||
TuringToken 集成了多家视频生成厂商（可灵、即梦、Vidu、Sora 等），
|
||
支持文生视频和图生视频能力。
|
||
</P>
|
||
<P>
|
||
视频生成接口因厂商而异，详细参数请参考 <a href="/pricing" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">模型列表</a> 中各视频模型的说明，
|
||
或访问 <a href="/console" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">控制台</a> 在线体验。
|
||
</P>
|
||
|
||
{/* ── Section: 支持模型 ── */}
|
||
<SectionTitle id="models" icon={Box}>{t('支持模型')}</SectionTitle>
|
||
<P>TuringToken 聚合了以下主流 AI 模型的 API 访问：</P>
|
||
|
||
<DocsTable
|
||
headers={['供应商', '代表模型', '能力']}
|
||
rows={[
|
||
['OpenAI', 'GPT-4o, GPT-4o-mini, o3, o4-mini', '对话、推理、视觉'],
|
||
['Anthropic', 'Claude 3.5 Sonnet, Claude 3 Opus, Claude 4', '对话、长文本'],
|
||
['Google', 'Gemini 2.5 Pro, Gemini 2.5 Flash', '对话、多模态'],
|
||
['DeepSeek', 'DeepSeek-V3, DeepSeek-R1', '对话、推理'],
|
||
['阿里巴巴', 'Qwen3, Qwen-Max, Qwen-Plus', '对话、视觉'],
|
||
['智谱', 'GLM-4-Plus, GLM-4-Flash', '对话、工具调用'],
|
||
['Moonshot', 'Kimi-K2, Moonshot-v1', '对话、长文本'],
|
||
['字节跳动', 'Doubao-Pro, Seedance', '对话、视频'],
|
||
['MiniMax', 'abab6.5s, MiniMax-M1', '对话'],
|
||
['Mistral', 'Mistral Large, Mixtral 8x22B', '对话、开源'],
|
||
['xAI', 'Grok-3, Grok-2', '对话'],
|
||
['Cohere', 'Command R+, Command R', '对话、RAG'],
|
||
['Meta', 'Llama 4, Llama 3.3 70B', '对话、开源'],
|
||
['百度', 'ERNIE-4.0, ERNIE-Speed', '对话'],
|
||
['讯飞', 'Spark 4.0 Ultra', '对话'],
|
||
['腾讯', 'Hunyuan-Pro, Hunyuan-Turbo', '对话'],
|
||
]}
|
||
/>
|
||
|
||
<P className="mt-4">
|
||
查看 <a href="/pricing" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">完整模型列表和定价 →</a>
|
||
</P>
|
||
|
||
{/* ── Section: 速率限制 ── */}
|
||
<SectionTitle id="ratelimit" icon={Gauge}>{t('速率限制')}</SectionTitle>
|
||
<P>
|
||
为确保服务稳定性，TuringToken 对不同用户类型设置了速率限制：
|
||
</P>
|
||
|
||
<DocsTable
|
||
headers={['用户类型', '请求频率', '并发连接', '每日限额']}
|
||
rows={[
|
||
['免费用户', '30 次/分钟', '5', '500 次/天'],
|
||
['基础用户', '120 次/分钟', '10', '5000 次/天'],
|
||
['专业用户', '600 次/分钟', '30', '50000 次/天'],
|
||
['企业用户', '3000 次/分钟', '100', '无限制'],
|
||
]}
|
||
/>
|
||
|
||
<InfoCard icon={Gauge} title="提示" className="mt-6">
|
||
具体限制以控制台中实际配置为准。管理员可在后台自定义速率限制策略。超出限制时 API 将返回 HTTP 429 状态码。
|
||
</InfoCard>
|
||
|
||
{/* ── Section: 常见问题 ── */}
|
||
<SectionTitle id="faq" icon={HelpCircle}>{t('常见问题')}</SectionTitle>
|
||
|
||
<div className="space-y-6 mt-6">
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">TuringToken 与直接使用 OpenAI API 有什么区别？</h4>
|
||
<P>
|
||
TuringToken 提供与 OpenAI 完全兼容的接口，但同时聚合了 40+ 其他 AI 厂商的模型。
|
||
您无需分别对接每个厂商，一键切换模型，按量统一计费。
|
||
</P>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">如何切换不同的 AI 模型？</h4>
|
||
<P>
|
||
只需在请求中修改 <code className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-violet-600 dark:text-violet-400">model</code> 参数即可，接口格式完全一致。
|
||
例如将 <code className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">gpt-4o</code> 替换为 <code className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">claude-3-5-sonnet-20241022</code>。
|
||
</P>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">支持流式响应 (Streaming) 吗？</h4>
|
||
<P>
|
||
支持。设置 <code className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-violet-600 dark:text-violet-400">stream: true</code> 即可启用 SSE 流式输出，所有模型均支持。
|
||
</P>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">支持 Function Calling / Tool Use 吗？</h4>
|
||
<P>
|
||
支持。GPT-4o、Claude、Gemini、Qwen、DeepSeek 等模型均支持 Function Calling，可用于构建 Agent 和工具调用场景。
|
||
</P>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">如何查看我的 API 使用量和消费明细？</h4>
|
||
<P>
|
||
登录后进入 <a href="/console" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">控制台</a>，可在仪表盘查看实时用量统计和消费明细。
|
||
</P>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-2">密钥泄露了怎么办？</h4>
|
||
<P>
|
||
立即前往 <a href="/console/token" className="text-violet-600 dark:text-violet-400 hover:underline font-medium">控制台 → API Key</a> 删除泄露的密钥，并创建新密钥。
|
||
</P>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Footer ── */}
|
||
<div className="mt-20 pt-8 border-t border-gray-200 dark:border-gray-800">
|
||
<P className="text-center text-sm text-gray-400 !mb-0">
|
||
更多问题？请联系我们的技术支持团队获取帮助。
|
||
</P>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|