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 class="text-3xl font-bold text-[#262624] dark:text-[#f1ead8]">
架构说明 架构说明
</h1> </h1>
<p class="text-base text-[#666663] dark:text-[#a3a094] max-w-2xl">
Aether 作为一个高性能的 AI API Gateway，其核心在于统一的接入层与灵活的路由调度。我们在下方提供了一个架构的数据流向动画演示，帮助您直观地理解它的工作原理。
</p>
</div> </div>
<!-- 动态架构图 --> <!-- 动态架构图 -->
@@ -28,131 +25,99 @@ import ArchitectureDiagram from './components/ArchitectureDiagram.vue'
<section> <section>
<div <div
:class="[panelClasses.card]" :class="[panelClasses.card]"
class="p-8 mt-6" class="p-6 mt-6"
> >
<ul class="space-y-6"> <div class="space-y-5">
<li class="flex items-start gap-4"> <!-- 1. 多格式兼容接入 -->
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm"> <div class="space-y-1.5">
<span class="font-bold font-mono">1</span> <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>
<div> <p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed pl-[22px]">
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-1"> 支持多种 API 格式、端点配置及认证方式，不同客户端均可平滑接入。
多维度支持 </p>
</h3> </div>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
全面兼容并支持多种 API 格式、端点配置及不同的认证方式，保障不同客户端的平滑接入。
</p>
</div>
</li>
<li class="flex items-start gap-4"> <!-- 2. 统一模型路由 -->
<div class="w-10 h-10 rounded-full bg-[#cc785c]/10 text-[#cc785c] flex items-center justify-center shrink-0 mt-1 shadow-sm"> <div class="space-y-1.5">
<span class="font-bold font-mono">2</span> <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>
<div> <p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed pl-[22px]">
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-1"> 对外暴露统一模型名称，对内自动映射到各提供商的内部模型名及变体，支持优先级选择、亲和性路由、负载均衡与故障转移。
统一的模型入口 </p>
</h3> </div>
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
对外暴露统一的模型名称，对内自动映射到各提供商可能不同的内部模型名及其变体，支持多变体优先级选择和基于亲和性的稳定路由，结合负载均衡、故障转移等智能调度策略。 <!-- 3. 跨平台格式转换 -->
</p> <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> </div>
</li> <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">
<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"> </div>
<span class="font-bold font-mono">3</span> <ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
</div> <div class="md:hidden flex justify-center">
<div class="w-full"> <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-3"> </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]">
</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>
<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"> <ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
多API格式兼容入口 <div class="md:hidden flex justify-center">
</div> <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" /> </div>
<div class="md:hidden flex justify-center py-1"> <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">
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" /> 上游提供商
</div> </div>
<ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<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 class="md:hidden flex justify-center">
格式转换 <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div> </div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#91918d] dark:text-white/30 mx-1 shrink-0" /> <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 class="md:hidden flex justify-center py-1"> 格式转换
<ArrowRight class="w-5 h-5 text-[#91918d] dark:text-white/30 rotate-90" /> </div>
</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">
<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"> <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
上游提供商 </div>
</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">
<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> </div>
</div> </div>
</li> </div>
<li class="flex items-start gap-4"> <!-- 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"> <div class="space-y-2">
<span class="font-bold font-mono">4</span> <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>
<div class="w-full"> <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)]">
<h3 class="text-lg font-medium text-[#262624] dark:text-[#f1ead8] m-0 mb-3"> <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 入口
</h3> </div>
<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)]"> <ArrowRight class="hidden md:block w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 shrink-0" />
<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 class="md:hidden flex justify-center">
原生格式 API 入口 <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
</div> </div>
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" /> <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 class="md:hidden flex justify-center py-1"> 原生请求透传 → 上游提供商 → 原生响应透传
<ArrowRight class="w-5 h-5 text-[#cc785c] rotate-90" /> </div>
</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">
<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"> <ArrowRight class="w-4 h-4 text-[#cc785c]/40 dark:text-[#cc785c]/30 rotate-90" />
同格式请求原生透传 → 上游提供商 → 原生响应透传 </div>
</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">
<ArrowRight class="hidden md:block w-5 h-5 text-[#cc785c] mx-1 shrink-0" /> 原生 API 出口
<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> </div>
</div> </div>
</li> </div>
</div>
<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>
</section> </section>
</div> </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 --> <!-- Gemini: center X=572, w=100 => left=522 -->
<div class="absolute w-full top-[24px] z-10"> <div class="absolute w-full top-[24px] z-10">
<div <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 }" :style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
> >
<div <div
@@ -267,7 +267,7 @@ const shadows = computed(() => {
>Claude</span> >Claude</span>
</div> </div>
<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 }" :style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
> >
<div <div
@@ -280,7 +280,7 @@ const shadows = computed(() => {
>OpenAI</span> >OpenAI</span>
</div> </div>
<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 }" :style="{ backgroundColor: colors.cardBg, border: `1px solid ${colors.cardBorder}`, boxShadow: shadows.sm }"
> >
<div <div
@@ -346,8 +346,8 @@ const shadows = computed(() => {
</div> </div>
</div> </div>
<div <div
class="w-full h-[28px] rounded-xl flex items-center justify-center font-sans text-[10px] font-bold" class="w-full h-[28px] rounded-xl flex items-center justify-center font-sans text-[10px] font-semibold"
:style="{ border: `1px solid ${colors.coreBorder}`, color: colors.textMain, backgroundColor: colors.brandSoft }" :style="{ border: `1px solid ${colors.cardBorder}`, color: colors.textMain }"
> >
智能调度 / 故障转移 智能调度 / 故障转移
</div> </div>