From ffab957acc95ee2aa28aecc10b929735b1b05a65 Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Thu, 9 Apr 2026 13:14:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(docs):=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E4=BB=A5=E5=8F=8D=E6=98=A0=20AI=20=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=95=86=E7=9A=84=E6=9B=B4=E6=94=B9=E5=92=8C=E6=96=B0=E7=89=B9?=
 =?UTF-8?q?=E6=80=A7=20feat(layout):=20=E6=B7=BB=E5=8A=A0=E6=B8=90?=
 =?UTF-8?q?=E5=8F=98=E8=83=8C=E6=99=AF=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=20feat(dashboard)?=
 =?UTF-8?q?:=20=E4=BC=98=E5=8C=96=E6=A0=B8=E5=BF=83=E7=89=B9=E6=80=A7?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=20fix(pricing):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=AE=9A=E4=BB=B7=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB?=
 =?UTF-8?q?=E6=80=A7=20fix(tokens):=20=E8=B0=83=E6=95=B4=E4=BB=A4=E7=89=8C?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E7=A1=AE=E4=BF=9D=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |  21 ++-
 frontend/src/components/layout/AppLayout.tsx |   2 +-
 frontend/src/pages/Channels.tsx              |   6 +-
 frontend/src/pages/Dashboard.tsx             | 163 ++++++++++---------
 frontend/src/pages/Pricing.tsx               |   2 +-
 frontend/src/pages/Tokens.tsx                |   2 +-
 6 files changed, 101 insertions(+), 95 deletions(-)

diff --git a/README.md b/README.md
index a3c69ac..791fad9 100644
--- a/README.md
+++ b/README.md
@@ -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 请留空）
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index e555b12..2b3211a 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -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>
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index 14d85ce..c4cb004 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -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" />
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 707c214..15a45d7 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -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>
-  )
+  );
 }
diff --git a/frontend/src/pages/Pricing.tsx b/frontend/src/pages/Pricing.tsx
index 8457093..c6abfa2 100644
--- a/frontend/src/pages/Pricing.tsx
+++ b/frontend/src/pages/Pricing.tsx
@@ -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>
diff --git a/frontend/src/pages/Tokens.tsx b/frontend/src/pages/Tokens.tsx
index 0c5fefe..c06d018 100644
--- a/frontend/src/pages/Tokens.tsx
+++ b/frontend/src/pages/Tokens.tsx
@@ -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" />