feat(docs): 更新文档以反映 AI 服务商的更改和新特性
feat(layout): 添加渐变背景样式以提升视觉效果 feat(dashboard): 优化核心特性描述，增强用户体验 fix(pricing): 修复定价页面的样式问题，提升可读性 fix(tokens): 调整令牌页面的卡片样式，确保一致性
This commit is contained in:
Jeff Gu committed
1 parent
31c9788f99
commit
ffab957acc
6 files changed
+101
-95
No files matched your search
@@ -4,14 +4,13 @@
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🚀 **基于 Cloudflare Workers**：无服务器架构，全球边缘部署
|
||||
- 🔐 **多渠道支持**：支持 OpenAI、Azure OpenAI、Claude、OpenAI Responses、Azure OpenAI Responses
|
||||
- 🎫 **Token 管理**：完整的 API Token 生成、管理和配额控制
|
||||
- 📊 **使用量统计**：实时统计 API 使用量和费用
|
||||
- 🚀 **基于 Cloudflare Workers**：全球分布式网络、极低延、高性能
|
||||
- 🔐 **多渠道**：支持 OpenAI、Azure OpenAI、Claude 等多种 AI 服务商
|
||||
- 🎫 **负载均衡**：支持多KEY/渠道间分配请求，自动重试+自动轮换，确保高可用性
|
||||
- 📊 **用量统计**：Analytics Engine 实时统计，精确成本核算与日志回溯
|
||||
- 💰 **定价管理**：灵活的模型定价配置
|
||||
- 🎨 **Web 管理界面**：直观的 Web 界面进行配置管理
|
||||
- 🧪 **API 测试工具**：内置 API 测试功能，支持实时调试
|
||||
- 📚 **OpenAPI 文档**：自动生成的 API 文档
|
||||
|
||||
## 🏗️ 系统架构
|
||||
|
||||
@@ -26,7 +25,7 @@ flowchart LR
|
||||
D[(Cloudflare D1<br/>Database)]
|
||||
end
|
||||
|
||||
subgraph Providers["AI 服务提供商"]
|
||||
subgraph Providers["AI 服务商"]
|
||||
C1[Azure OpenAI]
|
||||
C2[OpenAI]
|
||||
end
|
||||
@@ -49,13 +48,13 @@ one-api-workers/
|
||||
│ │ ├── pricing_api.ts # 定价管理 API
|
||||
│ │ ├── db_api.ts # 数据库初始化 API
|
||||
│ │ └── index.ts # 管理接口路由
|
||||
│ ├── providers/ # AI 服务提供商
|
||||
│ ├── providers/ # AI 服务商
|
||||
│ │ ├── azure-openai-proxy.ts # Azure OpenAI 代理
|
||||
│ │ ├── openai-proxy.ts # OpenAI 代理
|
||||
│ │ ├── claude-proxy.ts # Claude 代理
|
||||
│ │ ├── openai-responses-proxy.ts # OpenAI Responses 代理
|
||||
│ │ ├── azure-openai-responses-proxy.ts # Azure Responses 代理
|
||||
│ │ └── index.ts # 提供商路由
|
||||
│ │ └── index.ts # 渠道路由
|
||||
│ ├── db/ # 数据库相关
|
||||
│ ├── model/ # 数据模型
|
||||
│ ├── constants.ts # 常量定义
|
||||
@@ -273,7 +272,7 @@ curl https://your-domain.com/v1/responses \
|
||||
|
||||
访问 `https://your-domain.com` 即可使用 Web 管理界面，功能包括：
|
||||
|
||||
- **🔗 渠道管理**：添加、编辑、删除 AI 服务提供商渠道（支持 OpenAI、Azure OpenAI、Claude、OpenAI Responses、Azure Responses）
|
||||
- **🔗 渠道管理**：添加、编辑、删除 AI 服务商（支持 OpenAI、Azure OpenAI、Claude、OpenAI Responses、Azure Responses）
|
||||
- **🔑 API Token 管理**：生成、管理和监控 API Token 使用情况
|
||||
- **💰 定价配置**：灵活配置不同模型的定价策略
|
||||
- **🧪 API 测试工具**：内置 API 测试界面，支持实时调试和错误排查
|
||||
@@ -289,7 +288,7 @@ curl https://your-domain.com/v1/responses \
|
||||
|
||||
#### 渠道配置
|
||||
|
||||
目前支持以下 AI 服务提供商：
|
||||
目前支持以下 AI 服务商：
|
||||
|
||||
**OpenAI 配置**
|
||||
|
||||
@@ -368,7 +367,7 @@ curl https://your-domain.com/v1/responses \
|
||||
**配置字段说明**：
|
||||
|
||||
- `name`: 渠道显示名称
|
||||
- `type`: 服务提供商类型（`openai`、`azure-openai`、`claude`、`openai-responses`、`azure-openai-responses`）
|
||||
- `type`: 服务商类型（`openai`、`azure-openai`、`claude`、`openai-responses`、`azure-openai-responses`）
|
||||
- `endpoint`: API 端点地址
|
||||
- `api_key`: API 密钥
|
||||
- `api_version`: API 版本（Azure OpenAI / Claude 可用；Azure Responses v1 请留空）
|
||||
|
||||
@@ -83,7 +83,7 @@ export function AppLayout({ children }: AppLayoutProps) {
|
||||
</header>
|
||||
)}
|
||||
|
||||
<main className="flex-1 overflow-y-auto bg-background">
|
||||
<main className="flex-1 overflow-y-auto bg-background gradient-mesh grid-pattern">
|
||||
<div className="mx-auto max-w-7xl w-full">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -566,7 +566,7 @@ export function Channels() {
|
||||
return (
|
||||
<PageContainer
|
||||
title="渠道管理"
|
||||
description="配置 AI 服务提供商连接"
|
||||
description="配置 AI 服务商接口，管理模型和负载均衡策略"
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()} disabled={isFetching}>
|
||||
@@ -601,14 +601,14 @@ export function Channels() {
|
||||
</div>
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<Card className="border-dashed border-2">
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-16 px-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
|
||||
<LinkIcon className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">添加您的第一个渠道</h3>
|
||||
<p className="text-muted-foreground text-sm text-center max-w-sm mb-6">
|
||||
渠道连接到 AI 服务提供商（如 OpenAI、Azure、Claude），用于代理和转发 API 请求。
|
||||
连接到 AI 服务商（如 OpenAI、Azure、Claude），用于代理和转发 API 请求。
|
||||
</p>
|
||||
<Button onClick={handleAdd} size="lg">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
|
||||
@@ -1,82 +1,84 @@
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Globe, Gauge, BarChart3, Shield, Zap, ArrowRight, Sparkles } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Globe, Gauge, BarChart3, Shield, Zap, ArrowRight, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuthStore } from "@/store/auth";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Globe,
|
||||
title: '多提供商支持',
|
||||
description: '支持 OpenAI、Azure OpenAI、Claude 等多种 AI 服务提供商。',
|
||||
gradient: 'from-blue-500/10 to-cyan-500/10',
|
||||
iconBg: 'from-blue-500 to-cyan-500',
|
||||
delay: '0ms',
|
||||
title: "多渠道支持",
|
||||
description: "支持 OpenAI、Azure OpenAI、Claude 等多种 AI 服务商。",
|
||||
gradient: "from-blue-500/10 to-cyan-500/10",
|
||||
iconBg: "from-blue-500 to-cyan-500",
|
||||
delay: "0ms",
|
||||
},
|
||||
{
|
||||
icon: Gauge,
|
||||
title: '负载均衡',
|
||||
description: '自动在多个渠道间分配请求，确保高可用性。',
|
||||
gradient: 'from-emerald-500/10 to-teal-500/10',
|
||||
iconBg: 'from-emerald-500 to-teal-500',
|
||||
delay: '50ms',
|
||||
title: "负载均衡",
|
||||
description: "支持多KEY/渠道间分配请求，自动重试+自动轮换，确保高可用性。",
|
||||
gradient: "from-emerald-500/10 to-teal-500/10",
|
||||
iconBg: "from-emerald-500 to-teal-500",
|
||||
delay: "50ms",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: '用量追踪',
|
||||
description: '实时监控 token 使用情况，精确成本核算。',
|
||||
gradient: 'from-amber-500/10 to-orange-500/10',
|
||||
iconBg: 'from-amber-500 to-orange-500',
|
||||
delay: '100ms',
|
||||
title: "用量追踪",
|
||||
description: "Analytics Engine 实时统计，精确成本核算与日志回溯。",
|
||||
gradient: "from-amber-500/10 to-orange-500/10",
|
||||
iconBg: "from-amber-500 to-orange-500",
|
||||
delay: "100ms",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: '安全管理',
|
||||
description: '基于令牌的访问控制与独立 API 密钥分配。',
|
||||
gradient: 'from-violet-500/10 to-purple-500/10',
|
||||
iconBg: 'from-violet-500 to-purple-500',
|
||||
delay: '150ms',
|
||||
title: "安全管理",
|
||||
description: "基于令牌的访问控制与独立 API 密钥分配。",
|
||||
gradient: "from-violet-500/10 to-purple-500/10",
|
||||
iconBg: "from-violet-500 to-purple-500",
|
||||
delay: "150ms",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{ num: '01', title: '管理员登录', desc: '使用管理员令牌登录系统', color: 'text-blue-500' },
|
||||
{ num: '02', title: '配置渠道', desc: '添加 AI 服务提供商渠道', color: 'text-emerald-500' },
|
||||
{ num: '03', title: '创建令牌', desc: '为应用创建 API 令牌', color: 'text-amber-500' },
|
||||
{ num: '04', title: '开始使用', desc: '使用令牌调用 API', color: 'text-violet-500' },
|
||||
]
|
||||
{ num: "01", title: "管理员登录", desc: "使用管理员令牌登录系统", color: "text-blue-500" },
|
||||
{ num: "02", title: "配置渠道", desc: "添加 API 服务商", color: "text-emerald-500" },
|
||||
{ num: "03", title: "创建令牌", desc: "为应用创建 API 令牌", color: "text-amber-500" },
|
||||
{ num: "04", title: "开始使用", desc: "使用令牌调用 API", color: "text-violet-500" },
|
||||
];
|
||||
|
||||
export function Dashboard() {
|
||||
const { openAuthModal } = useAuthStore()
|
||||
const { openAuthModal } = useAuthStore();
|
||||
|
||||
return (
|
||||
<div className="animate-in">
|
||||
{/* Hero Section */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="gradient-mesh grid-pattern">
|
||||
<div className="px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-primary/8 border border-primary/10 text-primary text-sm font-medium mb-6">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
<span>Unified AI Gateway</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-[3.5rem] font-bold tracking-tight leading-[1.1] mb-5">
|
||||
<span className="bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent">
|
||||
One API on Workers
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8 max-w-2xl">
|
||||
统一的 AI 模型接口网关。支持多服务商接入、智能负载均衡与精确用量追踪。
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg" onClick={openAuthModal} className="h-12 px-6 text-[15px] rounded-xl shadow-lg shadow-primary/20">
|
||||
管理员登录
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" asChild className="h-12 px-6 text-[15px] rounded-xl">
|
||||
<Link to="/api-test">体验 API</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-primary/8 border border-primary/10 text-primary text-sm font-medium mb-6">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
<span>Unified AI Gateway</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-[3.5rem] font-bold tracking-tight leading-[1.1] mb-5">
|
||||
<span className="bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent">
|
||||
One API on Workers
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8 max-w-2xl">
|
||||
基于 Cloudflare Workers<br/>分布式、高性能、低延迟的 AI 统一网关
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={openAuthModal}
|
||||
className="h-12 px-6 text-[15px] rounded-xl shadow-lg shadow-primary/20"
|
||||
>
|
||||
管理员登录
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
{/* <Button variant="outline" size="lg" asChild className="h-12 px-6 text-[15px] rounded-xl">
|
||||
<Link to="/api-test">体验 API</Link>
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,24 +91,24 @@ export function Dashboard() {
|
||||
<div className="px-4 md:px-6 lg:px-8 pb-8 space-y-10">
|
||||
{/* Features Grid */}
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">核心特性</h2>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 stagger-children">
|
||||
{features.map((feature) => (
|
||||
<Card key={feature.title} className="group hover-lift border-0 bg-gradient-to-br from-card to-card overflow-hidden">
|
||||
<Card
|
||||
key={feature.title}
|
||||
className="group hover-lift border-0 bg-gradient-to-br from-card to-card overflow-hidden"
|
||||
>
|
||||
<CardContent className="p-6 relative">
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${feature.iconBg} flex items-center justify-center mb-4 shadow-lg`}>
|
||||
<div
|
||||
className={`w-11 h-11 rounded-xl bg-gradient-to-br ${feature.iconBg} flex items-center justify-center mb-4 shadow-lg`}
|
||||
>
|
||||
<feature.icon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-1.5 text-[15px]">{feature.title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -115,18 +117,20 @@ export function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* Quick Start */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="p-6 pb-2">
|
||||
<Card className="border-0">
|
||||
<CardContent className="py-6">
|
||||
<div className="pb-4">
|
||||
<h2 className="text-lg font-semibold mb-1">快速开始</h2>
|
||||
<p className="text-sm text-muted-foreground">四步完成配置，开始使用统一接口</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-border">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{steps.map((step) => (
|
||||
<div key={step.num} className="p-6 group">
|
||||
<div key={step.num} className="group">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<span className={`text-2xl font-bold ${step.color} opacity-60 group-hover:opacity-100 transition-opacity`}>
|
||||
<span
|
||||
className={`text-2xl font-bold ${step.color} opacity-60 group-hover:opacity-100 transition-opacity`}
|
||||
>
|
||||
{step.num}
|
||||
</span>
|
||||
</div>
|
||||
@@ -143,10 +147,13 @@ export function Dashboard() {
|
||||
|
||||
{/* Supported Providers */}
|
||||
<div className="text-center py-4">
|
||||
<p className="text-xs text-muted-foreground/60 uppercase tracking-wider mb-4">支持的服务提供商</p>
|
||||
<p className="text-xs text-muted-foreground/60 uppercase tracking-wider mb-4">支持的服务端点</p>
|
||||
<div className="flex items-center justify-center gap-6 flex-wrap text-muted-foreground/40">
|
||||
{['OpenAI', 'Azure OpenAI', 'Claude', 'OpenAI Responses'].map((name) => (
|
||||
<div key={name} className="flex items-center gap-2 text-sm font-medium hover:text-muted-foreground transition-colors">
|
||||
{["OpenAI", "Azure OpenAI", "Claude", "OpenAI Responses"].map((name) => (
|
||||
<div
|
||||
key={name}
|
||||
className="flex items-center gap-2 text-sm font-medium hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
<Zap className="h-3.5 w-3.5" />
|
||||
{name}
|
||||
</div>
|
||||
@@ -155,5 +162,5 @@ export function Dashboard() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -216,7 +216,7 @@ export function Pricing() {
|
||||
</div>
|
||||
</div>
|
||||
) : pricingRows.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed flex flex-col items-center justify-center py-16">
|
||||
<div className="rounded-xl border bg-white shadow-sm flex flex-col items-center justify-center py-16">
|
||||
<div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mb-4">
|
||||
<DollarSign className="h-8 w-8 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
@@ -273,7 +273,7 @@ export function Tokens() {
|
||||
</div>
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<Card className="border-dashed border-2">
|
||||
<Card className="">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16 px-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Key className="h-7 w-7 text-primary" />
|
||||
|
||||
Reference in new issue
Block a user