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