i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-09-01 17:00:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(guide): 精简架构说明布局和样式细节

Browse Source 
- 移除副标题描述段落，采用紧凑编号列表替代圆形大卡片布局
- 精简文案表述，缩减流程图间距和元素尺寸
- 移除架构图提供商标签的 hover 动效
- 调整核心调度条的字重和边框样式
This commit is contained in:
fawney19
2026-02-23 22:58:52 +08:00
parent cd05ec770c
commit cd70c9148e
2 changed files with 87 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
frontend/src/views/public/guide/ArchitectureGuide.vue
View File

@@ -15,9 +15,6 @@ import ArchitectureDiagram from './components/ArchitectureDiagram.vue'
<h1 class="text-3xl font-bold text-[#262624] dark:text-[#f1ead8]">
架构说明
</h1>
<p class="text-base text-[#666663] dark:text-[#a3a094] max-w-2xl">
Aether 作为一个高性能的 AI API Gateway，其核心在于统一的接入层与灵活的路由调度。我们在下方提供了一个架构的数据流向动画演示，帮助您直观地理解它的工作原理。
</p>
</div>
<!-- 动态架构图 -->
@@ -28,131 +25,99 @@ import ArchitectureDiagram from './components/ArchitectureDiagram.vue'
<section>
<div
:class="[panelClasses.card]"
class="p-8 mt-6"
class="p-6 mt-6"
>
<ul class="space-y-6">
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm">
<span class="font-bold font-mono">1</span>
<div class="space-y-5">
<!-- 1. 多格式兼容接入 -->
<div class="space-y-1.5">
<div class="flex items-center gap-2.5">
<span class="text-xs font-medium font-mono text-[#cc785c]">1.</span>
<span class="text-sm font-medium text-[#262624] dark:text-[#f1ead8]">多格式兼容接入</span>
</div>
<div>
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-1">
多维度支持
</h3>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
全面兼容并支持多种 API 格式、端点配置及不同的认证方式，保障不同客户端的平滑接入。
</p>
</div>
</li>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed pl-[22px]">
支持多种 API 格式、端点配置及认证方式，不同客户端均可平滑接入。
</p>
</div>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm">
<span class="font-bold font-mono">2</span>
<!-- 2. 统一模型路由 -->
<div class="space-y-1.5">
<div class="flex items-center gap-2.5">
<span class="text-xs font-medium font-mono text-[#cc785c]">2.</span>
<span class="text-sm font-medium text-[#262624] dark:text-[#f1ead8]">统一模型路由</span>
</div>
<div>
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-1">
统一的模型入口
</h3>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
对外暴露统一的模型名称，对内自动映射到各提供商可能不同的内部模型名及其变体，支持多变体优先级选择和基于亲和性的稳定路由，结合负载均衡、故障转移等智能调度策略。
</p>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed pl-[22px]">
对外暴露统一模型名称，对内自动映射到各提供商的内部模型名及变体，支持优先级选择、亲和性路由、负载均衡与故障转移。
</p>
</div>
<!-- 3. 跨平台格式转换 -->
<div class="space-y-2">
<div class="flex items-center gap-2.5">
<span class="text-xs font-medium font-mono text-[#cc785c]">3.</span>
<span class="text-sm font-medium text-[#262624] dark:text-[#f1ead8]">跨平台格式转换</span>
</div>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm">
<span class="font-bold font-mono">3</span>
</div>
<div class="w-full">
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-3">
格式转换流程 (跨平台转发)
</h3>
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-3 bg-[#f5f5f0]/50 dark:bg-[rgba(227,224,211,0.05)] p-4 rounded-xl border border-[#e5e4df] dark:border-[rgba(227,224,211,0.06)]">
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg p-3 text-center text-sm font-medium text-[#262624] dark:text-white shadow-sm">
多API格式兼容入口
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" />
</div>
<div class="flex-1 bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 rounded-lg p-3 text-center text-sm font-medium text-[#cc785c] dark:text-[#d4a27f]">
格式转换
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#91918d] dark:text-white/30 mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#91918d] dark:text-white/30 rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg p-3 text-center text-sm font-medium text-[#262624] dark:text-white shadow-sm">
上游提供商
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#91918d] dark:text-white/30 mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#91918d] dark:text-white/30 rotate-90" />
</div>
<div class="flex-1 bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 rounded-lg p-3 text-center text-sm font-medium text-[#cc785c] dark:text-[#d4a27f]">
格式转换
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg p-3 text-center text-sm font-medium text-[#262624] dark:text-white shadow-sm">
兼容出口响应
</div>
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-2 bg-[#f5f5f0]/50 dark:bg-[rgba(227,224,211,0.05)] p-3 rounded-xl border border-[#e5e4df] dark:border-[rgba(227,224,211,0.06)]">
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#262624] dark:text-white/80">
兼容格式入口
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-1 bg-[#cc785c]/5 dark:bg-[#cc785c]/10 border border-[#cc785c]/15 dark:border-[#cc785c]/20 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#cc785c] dark:text-[#d4a27f]">
格式转换
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#262624] dark:text-white/80">
上游提供商
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-1 bg-[#cc785c]/5 dark:bg-[#cc785c]/10 border border-[#cc785c]/15 dark:border-[#cc785c]/20 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#cc785c] dark:text-[#d4a27f]">
格式转换
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#262624] dark:text-white/80">
兼容格式响应
</div>
</div>
</li>
</div>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm">
<span class="font-bold font-mono">4</span>
<!-- 4. 同生态原生透传 -->
<div class="space-y-2">
<div class="flex items-center gap-2.5">
<span class="text-xs font-medium font-mono text-[#cc785c]">4.</span>
<span class="text-sm font-medium text-[#262624] dark:text-[#f1ead8]">同生态原生透传</span>
</div>
<div class="w-full">
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-3">
透传流程 (原生同生态)
</h3>
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-3 bg-[#f5f5f0]/50 dark:bg-[rgba(227,224,211,0.05)] p-4 rounded-xl border border-[#e5e4df] dark:border-[rgba(227,224,211,0.06)]">
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg p-3 text-center text-sm font-medium text-[#262624] dark:text-white shadow-sm">
原生格式 API 入口
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" />
</div>
<div class="flex-[2] bg-blue-500/5 dark:bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 text-center text-sm font-medium text-blue-600 dark:text-blue-400">
同格式请求原生透传 → 上游提供商 → 原生响应透传
</div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" />
<div class="md:hidden flex justify-center py-1">
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg p-3 text-center text-sm font-medium text-[#262624] dark:text-white shadow-sm">
原生 API 出口
</div>
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-2 bg-[#f5f5f0]/50 dark:bg-[rgba(227,224,211,0.05)] p-3 rounded-xl border border-[#e5e4df] dark:border-[rgba(227,224,211,0.06)]">
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#262624] dark:text-white/80">
原生 API 入口
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-[2] bg-[#cc785c]/5 dark:bg-[#cc785c]/10 border border-[#cc785c]/15 dark:border-[#cc785c]/20 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#cc785c] dark:text-[#d4a27f]">
原生请求透传 → 上游提供商 → 原生响应透传
</div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<div class="md:hidden flex justify-center">
<ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div>
<div class="flex-1 bg-white dark:bg-[#191714] border border-[#e5e4df] dark:border-white/10 rounded-lg py-2 px-3 text-center text-xs font-medium text-[#262624] dark:text-white/80">
原生 API 出口
</div>
</div>
</li>
<li class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0 mt-1 shadow-sm">
<span class="font-bold font-mono">5</span>
</div>
<div>
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-1">
响应回路
</h3>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
上游提供商返回的响应会经过逆向格式转换（跨平台场景）或直接透传（同生态场景），同时将提供商内部的模型名还原为客户端请求时使用的统一模型名，确保客户端收到格式和字段完全兼容的响应。
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>

10
frontend/src/views/public/guide/components/ArchitectureDiagram.vue
View File

@@ -254,7 +254,7 @@ const shadows = computed(() => {
<!-- Gemini: center X=572, w=100 => left=522 -->
<div class="absolute w-full top-[24px] z-10">
<div
class="absolute left-[138px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 transition-transform hover:-translate-y-0.5 cursor-pointer"
class="absolute left-[138px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 "
:style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
>
<div
@@ -267,7 +267,7 @@ const shadows = computed(() => {
>Claude</span>
</div>
<div
class="absolute left-[330px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 transition-transform hover:-translate-y-0.5 cursor-pointer"
class="absolute left-[330px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 "
:style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
>
<div
@@ -280,7 +280,7 @@ const shadows = computed(() => {
>OpenAI</span>
</div>
<div
class="absolute left-[522px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 transition-transform hover:-translate-y-0.5 cursor-pointer"
class="absolute left-[522px] w-[100px] h-[36px] rounded-full flex items-center justify-center gap-2 "
:style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
>
<div
@@ -346,8 +346,8 @@ const shadows = computed(() => {
</div>
</div>
<div
class="w-full h-[28px] rounded-xl flex items-center justify-center font-sans text-[10px] font-bold"
:style="{ border: `1px solid ${colors.coreBorder}`, color: colors.textMain, backgroundColor: colors.brandSoft }"
class="w-full h-[28px] rounded-xl flex items-center justify-center font-sans text-[10px] font-semibold"
:style="{ border: `1px solid ${colors.cardBorder}`, color: colors.textMain }"
>
智能调度 / 故障转移
</div>