开源一个 API 开放平台门户前端：本地 npm run dev 就能逛接口文档
适合：想自建 API 门户、或需要一套「接口目录 + 文档 + 在线调试」前端壳的同学。
背景
做开放平台时，前端往往要同时扛几件事：
- 接口分类浏览（免费 / 会员 / 计次）
- 文档页（路径、参数、错误码、调用示例）
- 在线调试（粘贴
X-Api-Key直接试调） - 用户控制台 UI（Token、调用日志等）
后端鉴权、计费、额度可以慢慢迭代，但门户体验最好尽早有一套可跑的前端。
于是把线上门户前端单独抽出来，做成开源演示仓库。
仓库与在线效果
技术栈：Vue 3 + Vite + Element Plus + Pinia + Axios。
首页
分类入口、搜索、接口卡片一览：
探索页
按分类与计费类型筛选全量接口：
接口文档页
请求地址、参数、说明与「在线调试」入口：
30 秒跑起来
bash
git clone https://github.com/XuChen-Wang/sanyu-open-web-demo.git
cd sanyu-open-web-demo
npm install
npm run dev默认开发端口 8081。/api 会代理到线上文档站，本地不必起 Java 后端也能浏览接口列表和文档页。
自定义代理：
bash
cp .env.example .env.development
# 修改 VITE_PROXY_TARGET / VITE_PROXY_STRIP_API能看什么
| 页面 | 作用 |
|---|---|
| 首页 | Banner、搜索、分类入口 |
| 探索 | 全量接口卡片 + 分类 / 计费类型筛选 |
| 文档详情 | 请求地址、参数表、返回说明、curl / fetch 示例 |
| 在线调试 | 粘贴 Token 后试调开放接口 |
| 控制台 UI | Token、日志等页面结构（登录能力依赖后端） |
说明：本仓库只有前端。登录、额度、计费由后端提供；仓库内不内置任何真实 Key。
调试怎么接
开放接口鉴权头是 X-Api-Key。流程很简单：
- 在文档站注册 / 登录
- 控制台创建 Token
- 粘到文档页「在线调试」面板
本地调试和线上文档体验一致，方便对照字段。
为什么开源前端就够
很多同学其实不需要一上来就 fork 整套 Spring Boot 多模块。先把门户交互、文档结构、调试面板跑通，再决定后端怎么拆，成本更低。
若你关心的是「完整能力目录、额度说明、账号体系」，直接看在线文档站即可；本仓库负责把 UI 与调用路径讲清楚。
License
MIT。欢迎 Star、提 Issue，或直接改造成自己的 API 门户壳。
相关链接：