From cf6b2285fbcae31b1db14a75abe13e4f67f9b2b6 Mon Sep 17 00:00:00 2001
From: ciat-777 <juricek.chen@gmail.com>
Date: Tue, 3 Mar 2026 15:13:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE=E6=9E=B6=E6=9E=84?=
 =?UTF-8?q?=E5=92=8C=E7=95=8C=E9=9D=A2=E9=A2=84=E8=A7=88=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/.gitignore |   1 +
 docs/index.md              | 255 +++++++++++++++++++++++++++++++++++++
 2 files changed, 256 insertions(+)

diff --git a/docs/.vitepress/.gitignore b/docs/.vitepress/.gitignore
index 518e159..521a9c7 100644
--- a/docs/.vitepress/.gitignore
+++ b/docs/.vitepress/.gitignore
@@ -1,2 +1,3 @@
 dist/
 cache/
+.temp/
diff --git a/docs/index.md b/docs/index.md
index 6d4606f..cbd6301 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,6 +31,261 @@ features:
     link: /operations
 ---
 
+## 项目架构
+
+<div class="home-architecture">
+  <img
+    src="./screenshots/metapi-architecture.png"
+    alt="Metapi Federated AI Model Aggregation Gateway Architecture"
+  />
+</div>
+
+## 项目界面预览
+
+<div class="home-carousel" aria-label="项目界面自动轮播预览">
+  <button class="home-carousel-nav home-carousel-prev" type="button" aria-label="上一张">
+    <span aria-hidden="true">‹</span>
+  </button>
+  <button class="home-carousel-nav home-carousel-next" type="button" aria-label="下一张">
+    <span aria-hidden="true">›</span>
+  </button>
+  <div class="home-carousel-track">
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/dashboard.png" alt="仪表盘" />
+      <figcaption>仪表盘</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/model-marketplace.png" alt="模型广场" />
+      <figcaption>模型广场</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/routes.png" alt="智能路由" />
+      <figcaption>智能路由</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/accounts.png" alt="账号管理" />
+      <figcaption>账号管理</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/sites.png" alt="站点管理" />
+      <figcaption>站点管理</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/tokens.png" alt="令牌管理" />
+      <figcaption>令牌管理</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/playground.png" alt="模型操练场" />
+      <figcaption>模型操练场</figcaption>
+    </figure>
+    <figure class="home-carousel-slide">
+      <img src="./screenshots/monitor.png" alt="可用性监控" />
+      <figcaption>可用性监控</figcaption>
+    </figure>
+  </div>
+</div>
+
+<style>
+.home-architecture {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.home-architecture img {
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid var(--vp-c-divider);
+  box-shadow: 0 12px 28px rgba(2, 8, 20, 0.08);
+}
+
+.home-carousel {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 10px 24px rgba(2, 8, 20, 0.06);
+}
+
+.home-carousel-track {
+  display: flex;
+  width: 100%;
+  transform: translateX(0%);
+  transition: transform 420ms ease;
+  will-change: transform;
+}
+
+.home-carousel-slide {
+  flex: 0 0 100%;
+  margin: 0;
+}
+
+.home-carousel-slide img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: min(78vh, 980px);
+  object-fit: contain;
+  background: var(--vp-c-bg);
+}
+
+.home-carousel-slide figcaption {
+  padding: 12px 14px;
+  font-size: 22px;
+  line-height: 1.2;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.home-carousel-nav {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 14%;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  cursor: pointer;
+}
+
+.home-carousel-nav span {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 24, 39, 0.56);
+  font-size: 28px;
+  line-height: 1;
+  user-select: none;
+}
+
+.home-carousel:hover .home-carousel-nav {
+  opacity: 1;
+}
+
+.home-carousel-prev {
+  left: 0;
+  justify-content: flex-start;
+  padding-left: 12px;
+  background: linear-gradient(90deg, rgba(15, 23, 42, 0.2), transparent);
+}
+
+.home-carousel-next {
+  right: 0;
+  justify-content: flex-end;
+  padding-right: 12px;
+  background: linear-gradient(270deg, rgba(15, 23, 42, 0.2), transparent);
+}
+
+@media (max-width: 640px) {
+  .home-carousel-slide figcaption {
+    font-size: 18px;
+    padding: 10px 12px;
+  }
+
+  .home-carousel-nav {
+    opacity: 1;
+    width: 18%;
+  }
+
+  .home-carousel-nav span {
+    width: 34px;
+    height: 34px;
+    font-size: 24px;
+  }
+}
+</style>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from 'vue';
+
+let disposeCarousel = null;
+
+onMounted(() => {
+  const root = document.querySelector('.home-carousel');
+  if (!root) return;
+
+  const track = root.querySelector('.home-carousel-track');
+  const slides = root.querySelectorAll('.home-carousel-slide');
+  const prevBtn = root.querySelector('.home-carousel-prev');
+  const nextBtn = root.querySelector('.home-carousel-next');
+
+  if (!track || slides.length === 0) return;
+
+  const total = slides.length;
+  let index = 0;
+  let timerId = null;
+
+  const render = () => {
+    track.style.transform = `translateX(-${index * 100}%)`;
+  };
+
+  const goNext = () => {
+    index = (index + 1) % total;
+    render();
+  };
+
+  const goPrev = () => {
+    index = (index - 1 + total) % total;
+    render();
+  };
+
+  const stopAutoPlay = () => {
+    if (timerId !== null) {
+      window.clearInterval(timerId);
+      timerId = null;
+    }
+  };
+
+  const startAutoPlay = () => {
+    stopAutoPlay();
+    timerId = window.setInterval(goNext, 3000);
+  };
+
+  const onMouseEnter = () => stopAutoPlay();
+  const onMouseLeave = () => startAutoPlay();
+  const onPrevClick = () => {
+    goPrev();
+    startAutoPlay();
+  };
+  const onNextClick = () => {
+    goNext();
+    startAutoPlay();
+  };
+
+  root.addEventListener('mouseenter', onMouseEnter);
+  root.addEventListener('mouseleave', onMouseLeave);
+  prevBtn?.addEventListener('click', onPrevClick);
+  nextBtn?.addEventListener('click', onNextClick);
+
+  render();
+  startAutoPlay();
+
+  disposeCarousel = () => {
+    stopAutoPlay();
+    root.removeEventListener('mouseenter', onMouseEnter);
+    root.removeEventListener('mouseleave', onMouseLeave);
+    prevBtn?.removeEventListener('click', onPrevClick);
+    nextBtn?.removeEventListener('click', onNextClick);
+  };
+});
+
+onBeforeUnmount(() => {
+  if (typeof disposeCarousel === 'function') {
+    disposeCarousel();
+  }
+});
+</script>
+
 ## 文档定位
 
 - 面向新用户：快速搭建和接入