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

fix(guide): 架构图标签改为产品名称(Claude/Gemini)并调整节点间距

Browse Source 
- 将 Source/Output 标签从 Anthropic/Google 改为 Claude/Gemini
- 增大虚线框与引擎卡片的垂直间距，改善布局层次
- 同步调整连接线路径坐标和动画时长
This commit is contained in:
fawney19
2026-02-23 22:41:53 +08:00
parent a7675606a1
commit cd05ec770c
1 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,17 +63,17 @@ const shadows = computed(() => {
*
* SOURCES label: Y = 8
* Source pills: top=24, h=36 => bottom = 60
* Line: 3 merge to 1 at Gateway top Y=78, then straight to dashed box top Y=88
* Line: 3 merge to 1 at Gateway top Y=78, then straight to dashed box top Y=98
* Gateway box: top=78, h=240 => bottom = 318
* Dashed box: top=88, h=112 => bottom=200 (left=180, w=400)
* Dashed box: top=98, h=112 => bottom=210 (left=180, w=400)
*
* Junction dots (3 total, all at X=380):
* [dot] Y=78 Gateway top merge (3 sources -> 1)
* [dot] Y=200 Route node (1 -> 3 engines)
* [dot] Y=210 Route node (1 -> 3 engines)
* [dot] Y=318 Merge/exit node (3 engines -> 1 -> 3 outputs, at Gateway bottom)
*
* Engine cards: top=230, h=28 => bottom=258
* Line: Y=258 stub Y=264, curve to merge/exit Y=318
* Engine cards: top=250, h=28 => bottom=278
* Line: Y=278 stub Y=284, curve to merge/exit Y=318
* Line: Y=318 diverge to output pills top Y=360
* OUTPUTS label: Y = 342
* Output pills: top=360, h=36
@@ -118,44 +118,44 @@ const shadows = computed(() => {
fill="none"
stroke-linecap="round"
>
<!-- Sources (Y=60) -> merge at Gateway top (Y=78) -> dashed box top (Y=88) -->
<!-- Sources (Y=60) -> merge at Gateway top (Y=78) -> dashed box top (Y=98) -->
<path
id="f-in-1"
d="M 188 60 L 188 66 C 188 72, 380 72, 380 78 L 380 88"
d="M 188 60 L 188 66 C 188 72, 380 72, 380 78 L 380 98"
/>
<path
id="f-in-2"
d="M 380 60 L 380 88"
d="M 380 60 L 380 98"
/>
<path
id="f-in-3"
d="M 572 60 L 572 66 C 572 72, 380 72, 380 78 L 380 88"
d="M 572 60 L 572 66 C 572 72, 380 72, 380 78 L 380 98"
/>
<!-- Route dot (Y=200) -> Engine cards top (Y=230) -->
<!-- Route dot (Y=210) -> Engine cards top (Y=250) -->
<path
id="f-sL"
d="M 380 200 C 380 214, 188 214, 188 230"
d="M 380 210 C 380 230, 188 230, 188 250"
/>
<path
id="f-sM"
d="M 380 200 L 380 230"
d="M 380 210 L 380 250"
/>
<path
id="f-sR"
d="M 380 200 C 380 214, 572 214, 572 230"
d="M 380 210 C 380 230, 572 230, 572 250"
/>
<!-- Engine bottom (Y=258) -> merge/exit node at Gateway bottom (Y=318) -->
<!-- Engine bottom (Y=278) -> merge/exit node at Gateway bottom (Y=318) -->
<path
id="f-oL"
d="M 188 258 L 188 264 C 188 292, 380 292, 380 318"
d="M 188 278 L 188 284 C 188 302, 380 302, 380 318"
/>
<path
id="f-oM"
d="M 380 258 L 380 318"
d="M 380 278 L 380 318"
/>
<path
id="f-oR"
d="M 572 258 L 572 264 C 572 292, 380 292, 380 318"
d="M 572 278 L 572 284 C 572 302, 380 302, 380 318"
/>
<!-- Merge/exit node at Gateway bottom (Y=318) -> output pills top (Y=360) -->
<path
@@ -173,7 +173,7 @@ const shadows = computed(() => {
</g>
<!-- Animated dots -->
<g>
<!-- Sources -> dashed box top (curves only, ~220px each, ~100px/s) -->
<!-- Sources -> dashed box top (curves only, ~230px each, ~100px/s) -->
<circle
r="2.5"
:fill="colors.brand"
@@ -188,34 +188,34 @@ const shadows = computed(() => {
dur="2.2s"
repeatCount="indefinite"
><mpath href="#f-in-3" /></animateMotion></circle>
<!-- Route -> Engines (curves only, ~210px each) -->
<!-- Route -> Engines (curves only, ~250px each) -->
<circle
r="2.5"
:fill="colors.brand"
><animateMotion
dur="1.2s"
dur="1.4s"
repeatCount="indefinite"
><mpath href="#f-sL" /></animateMotion></circle>
<circle
r="2.5"
:fill="colors.brand"
><animateMotion
dur="1.2s"
dur="1.4s"
repeatCount="indefinite"
><mpath href="#f-sR" /></animateMotion></circle>
<!-- Engines -> merge/exit node (curves only, ~260px each) -->
<!-- Engines -> merge/exit node (curves only, ~230px each) -->
<circle
r="2.5"
:fill="colors.brand"
><animateMotion
dur="1.6s"
dur="1.4s"
repeatCount="indefinite"
><mpath href="#f-oL" /></animateMotion></circle>
<circle
r="2.5"
:fill="colors.brand"
><animateMotion
dur="1.6s"
dur="1.4s"
repeatCount="indefinite"
><mpath href="#f-oR" /></animateMotion></circle>
<!-- Exit -> outputs (curves only, ~210px each) -->
@@ -249,9 +249,9 @@ const shadows = computed(() => {
</div>
<!-- Source pills: top=24, h=36, centerY=42 -->
<!-- Anthropic: center X=188, w=100 => left=138 -->
<!-- OpenAI: center X=380, w=100 => left=330 -->
<!-- Google: center X=572, w=100 => left=522 -->
<!-- Claude: center X=188, w=100 => left=138 -->
<!-- OpenAI: center X=380, w=100 => left=330 -->
<!-- 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"
@@ -264,7 +264,7 @@ const shadows = computed(() => {
<span
class="font-sans text-[11px] font-bold"
:style="{ color: colors.textMain }"
>Anthropic</span>
>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"
@@ -290,7 +290,7 @@ const shadows = computed(() => {
<span
class="font-sans text-[11px] font-bold"
:style="{ color: colors.textMain }"
>Google</span>
>Gemini</span>
</div>
</div>
@@ -308,9 +308,9 @@ const shadows = computed(() => {
</div>
<!-- Dashed box: abs positioned in outer 760x420 container -->
<!-- center X=380, w=400 => left=180. top=88, h=112 => bottom=200 -->
<!-- center X=380, w=400 => left=180. top=98, h=112 => bottom=210 -->
<div
class="absolute left-[180px] top-[88px] w-[400px] h-[112px] rounded-2xl flex flex-col items-center gap-1.5 px-5 py-[10px] z-20"
class="absolute left-[180px] top-[98px] w-[400px] h-[112px] rounded-2xl flex flex-col items-center gap-1.5 px-5 py-[10px] z-20"
:style="{ border: `1.5px dashed ${colors.coreBorder}` }"
>
<div
@@ -355,7 +355,7 @@ const shadows = computed(() => {
<!-- Engine cards: bar style matching feature bars, w=170, h=28 -->
<div
class="absolute left-[103px] top-[230px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
class="absolute left-[103px] top-[250px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
:style="{ backgroundColor: colors.brandSoft, border: `1px solid ${colors.cardBorder}` }"
>
<div
@@ -368,7 +368,7 @@ const shadows = computed(() => {
>格式转换</span>
</div>
<div
class="absolute left-[295px] top-[230px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
class="absolute left-[295px] top-[250px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
:style="{ backgroundColor: colors.brandSoft, border: `1px solid ${colors.cardBorder}` }"
>
<div
@@ -381,7 +381,7 @@ const shadows = computed(() => {
>反向代理</span>
</div>
<div
class="absolute left-[487px] top-[230px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
class="absolute left-[487px] top-[250px] w-[170px] h-[28px] rounded-full flex items-center justify-center gap-1.5 z-20"
:style="{ backgroundColor: colors.brandSoft, border: `1px solid ${colors.cardBorder}` }"
>
<div
@@ -400,9 +400,9 @@ const shadows = computed(() => {
class="absolute left-[376px] top-[74px] w-2 h-2 rounded-full border border-white dark:border-[#1e1e1e] z-40"
:style="{ backgroundColor: colors.brand }"
/>
<!-- Route node: center (380, 200) — 1 diverges to 3 engines -->
<!-- Route node: center (380, 210) — 1 diverges to 3 engines -->
<div
class="absolute left-[376px] top-[196px] w-2 h-2 rounded-full border border-white dark:border-[#1e1e1e] z-40"
class="absolute left-[376px] top-[206px] w-2 h-2 rounded-full border border-white dark:border-[#1e1e1e] z-40"
:style="{ backgroundColor: colors.brand }"
/>
<!-- Merge/exit node: center (380, 318) at Gateway bottom border -->
@@ -424,9 +424,9 @@ const shadows = computed(() => {
</div>
<!-- Output pills: top=360, h=36 -->
<!-- Anthropic: center X=188, w=120 => left=128 -->
<!-- OpenAI: center X=380, w=120 => left=320 -->
<!-- Google: center X=572, w=120 => left=512 -->
<!-- Claude: center X=188, w=120 => left=128 -->
<!-- OpenAI: center X=380, w=120 => left=320 -->
<!-- Gemini: center X=572, w=120 => left=512 -->
<div class="absolute w-full top-[360px] z-10">
<div
class="absolute left-[128px] w-[120px] h-[36px] rounded-full flex items-center justify-center gap-2"
@@ -439,7 +439,7 @@ const shadows = computed(() => {
<span
class="font-sans text-[10px] font-bold"
:style="{ color: colors.textMain }"
>Anthropic 响应</span>
>Claude 响应</span>
</div>
<div
class="absolute left-[320px] w-[120px] h-[36px] rounded-full flex items-center justify-center gap-2"
@@ -465,7 +465,7 @@ const shadows = computed(() => {
<span
class="font-sans text-[10px] font-bold"
:style="{ color: colors.textMain }"
>Google 响应</span>
>Gemini 响应</span>
</div>
</div>
</div>