307 lines
7.3 KiB
Markdown
307 lines
7.3 KiB
Markdown
---
|
||
layout: home
|
||
|
||
hero:
|
||
name: "Metapi 文档中心"
|
||
text: "中转站的中转站"
|
||
tagline: "将分散的 AI 中转站聚合为一个统一网关"
|
||
image:
|
||
src: /logos/logo-full.png
|
||
alt: Metapi
|
||
actions:
|
||
- theme: brand
|
||
text: 10 分钟快速上手
|
||
link: /getting-started
|
||
- theme: alt
|
||
text: 常见问题 FAQ
|
||
link: /faq
|
||
- theme: alt
|
||
text: 贡献教程/FAQ
|
||
link: /community/faq-tutorial-guidelines
|
||
|
||
features:
|
||
- title: 快速上手
|
||
details: 从部署到第一条请求，按步骤完成最小可用环境搭建。
|
||
link: /getting-started
|
||
- title: 问题排查
|
||
details: 汇总高频报错、根因定位和标准修复路径，降低重复沟通成本。
|
||
link: /faq
|
||
- title: 运维与配置
|
||
details: 覆盖部署、配置、监控、备份、升级回滚等生产场景。
|
||
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>
|
||
|
||
## 文档定位
|
||
|
||
- 面向新用户：快速搭建和接入
|
||
- 面向维护者：稳定运行、排障和升级
|
||
- 面向贡献者：持续沉淀教程、FAQ 与最佳实践
|
||
|
||
## 推荐阅读路径
|
||
|
||
1. [快速上手](/getting-started)
|
||
2. [部署指南](/deployment)
|
||
3. [配置说明](/configuration)
|
||
4. [客户端接入](/client-integration)
|
||
5. [常见问题 FAQ](/faq)
|
||
|
||
## 协作维护
|
||
|
||
如需新增文档内容，请优先使用统一模板与提交流程：
|
||
[FAQ/教程贡献规范](/community/faq-tutorial-guidelines)
|