开源一套 Vue3 多模态 AI 控制台前端：游乐场、工作室与 API 文档页

为什么要开源前端

过去几个月，我在做一套 Gemini 多模态 API 网关 ：对话走 OpenAI 兼容层，图片/音乐/视频走 Gemini 原生 v1beta。服务端用 Java Spring Boot 实现计费、鉴权、转发与充值，用户侧还需要一个能「看得见、点得着」的控制台。

这套 用户端 Web 前端 （web/ 目录）从官网、文档页到游乐场和工作室，都是日常迭代出来的。最近把它开源出来，主要考虑：

给同类项目做 UI 参考------多模态控制台怎么拆路由、怎么做 SSE 流式、怎么展示 Markdown 回复，可以直接对照代码；
降低二次开发成本 ------Fork 后改 site.js 里的品牌与域名，接自己的后端即可；
边界清晰 ------前端开源，后端与管理后台仍商业授权，想做完整私有部署的团队可以按需合作。

下面按「开源了什么 → 技术实现 → 怎么跑起来 → 两种使用方式」说明。

开源范围：哪些开了、哪些没有

模块	是否开源	说明
用户端 Web `web/`	✅ 开源	本文主角
Java 后端 `server/`	❌ 未开源	网关、计费、支付、Gemini 转发等
管理后台 `admin/`	❌ 未开源	随后端商业授权提供

前端 不包含 Gemini Key、JWT Secret、支付密钥等敏感信息，所有鉴权与扣费逻辑都在后端。这也是可以放心把前端公开的原因之一。

功能一览

开源前端覆盖一条完整的「开发者使用 AI 网关」路径：

页面	路由	能力
官网首页	`/`	产品介绍、接入引导
模型价格	`/pricing`	公开价目
API 文档	`/docs`	OpenAI / Gemini 接入说明（站内 Markdown）
登录注册	`/auth`	邮箱验证码、短信验证码
控制台	`/dashboard`	用量概览
对话游乐场	`/playground`	流式多轮对话；支持上传图片与 PDF 文档理解
图片工作室	`/images`	Nano Banana 文生图 / 图生图
音乐工作室	`/music`	Lyria 文生音乐
视频工作室	`/videos`	Veo 视频生成
财务账单	`/billing`	余额、充值、消费明细
API 密钥	`/api-keys`	创建与管理 Key

游乐场里 PDF 走的是 Gemini 原生文档理解（inlineData + application/pdf），适合「上传论文/合同后直接问答」的场景；图片则走多模态视觉理解。流式输出用 SSE ，和后端 text/event-stream 对齐。

技术栈与目录

Vue 3 （Composition API + <script setup>）
Vue Router 4
Vite 8
Tailwind CSS 3
marked + highlight.js + DOMPurify（AI 回复 Markdown 渲染与 XSS 过滤）

核心目录结构：

复制代码

web/
├── public/              # logo、图标、首页配图
├── src/
│   ├── api/             # fetch 封装、SSE 流式 chat
│   ├── components/      # 布局、Markdown、对话框等
│   ├── composables/     # 参考图/PDF 附件选择
│   ├── config/site.js   # 站点名、域名、文档里的 API Base URL
│   ├── router/
│   ├── utils/           # imageParts、markdown 等
│   └── views/           # 各业务页面
├── vite.config.js       # 开发时代理 /api → 后端
└── tailwind.config.js

前后端怎么通信

1. 普通 REST

src/api/client.js 里统一走相对路径 /api/...，生产环境由 Nginx 反代 到 Java 服务；本地开发时 Vite 代理到 localhost:15555：

js 复制代码

// vite.config.js（节选）
server: {
  proxy: {
    '/api': { target: 'http://localhost:15555', changeOrigin: true },
  },
},

2. 游乐场流式对话

streamChat() 用 fetch + ReadableStream 解析 SSE，按 event: chunk / event: done 更新 UI，不依赖额外 SSE 库。核心思路：

请求头：Accept: text/event-stream
按 \n\n 拆事件块，解析 event: 与 data:
流结束回调里刷新 Token 用量

3. 登录态：Access + Refresh 双 Token

前端实现了 短 Access + 长 Refresh 自动续期：Access 快过期时静默调 /api/auth/refresh，401 时尝试刷新一次再重试。Token 存 localStorage，不会把密钥写进源码。

4. 多模态附件

用户消息里的图片/PDF 在发送前转 Base64，后端再组装 Gemini inlineData。历史消息里图片可上传对象存储后只留 URL，减小数据库体积------这部分逻辑前后端配合，前端只负责选择与预览。

本地跑起来（3 步）

环境：Node.js 18+，以及一个可用的后端 API（本地 Java 或测试环境）。

bash 复制代码

git clone https://gitee.com/mtq851/aisoui-model-transfer-station.git
cd aisoui-model-transfer-station/web
npm install
npm run dev

浏览器打开 http://localhost:5173。若后端也在本机 15555 端口，登录、游乐场等页面即可联调。

生产构建：

bash 复制代码

npm run build
# 产物在 dist/，配合 Nginx 静态托管 + /api 反代

品牌与域名在 src/config/site.js 修改即可，例如站点名、文档里展示的 API Base URL。

两种使用方式（怎么选）

方式一：直接用现成平台（SaaS）

若你只是要调 API、不想运维，注册平台账号、创建 Key 即可，不必部署本前端。开源仓库更适合「看实现、学 SSE/Markdown/多模态 UI」。

方式二：私有部署（前端 Fork + 后端商业授权）

若需要自有品牌、独立域名、计费自主可控：

Fork / 定制本前端（改 UI、改 site.js）
购买并获得 Java 后端源码 与部署文档
自建 MySQL、Redis、对象存储、支付与短信等
Nginx：/ → 前端静态，/api → 后端

后端源码不在公开仓库里；私有部署与授权事宜见 Gitee 仓库 README → 联系我们（微信扫码）。

开源仓库

Gitee：Aisoui 模型中转站

复制代码

https://gitee.com/mtq851/aisoui-model-transfer-station

bash 复制代码

git clone https://gitee.com/mtq851/aisoui-model-transfer-station.git

建议阅读：

根目录 README.md --- 产品能力、API 快速开始
web/README.md --- 前端专用说明、合作模式、部署细节
web/src/views/PlaygroundView.vue --- 流式对话 + 附件
web/src/api/client.js --- 请求封装与 Token 续期

欢迎 Star、Issue、PR（UI 修复、文档、无障碍、i18n 等方向都欢迎）。

小结

开源的是 用户端 Vue3 控制台，不是完整后端。
技术点：SSE 流式 、Markdown 渲染 、多模态附件 、双 Token 续期 、Tailwind 深色 UI。
想用现成服务 → 直接注册平台；想私有部署 → Fork 前端 + 商业后端授权。

如果你也在做 AI 网关或开发者控制台，希望这套 UI 能少踩一点坑。有问题欢迎在评论区或 Gitee Issue 交流。

免责声明

本文为个人开源说明与技术分享，前端代码按仓库 License 使用。API 调用、数据安全与合规请自行评估；请勿将 API Key 提交到公开仓库。上游模型能力以各厂商实际为准。