maas-base-ui

GPUStack UI

GPUStack 平台的前端管理界面，提供 GPU 模型部署与管理、Playground 调试、资源监控、集群管理等一站式能力。

技术栈

• 框架: UmiJS Max 4.x
• UI: Ant Design 6.x + Pro Components
• 状态管理: Jotai
• 语言: TypeScript
• 包管理: pnpm

快速开始

环境要求

• Node.js 18+
• pnpm 9.3+

安装依赖

pnpm install

开发调试

npm run dev
# 默认访问 http://localhost:9000

如需代理到指定后端，设置环境变量：

PROXY_HOST=http://your-backend-host:port npm run dev

生产构建

npm run build

构建产物输出至 dist/ 目录。

预览构建产物

npm run preview

代码格式化

npm run format

Docker 部署

项目提供 Dockerfile 和 docker-compose.yml，支持一键容器化部署。

构建镜像

docker compose up -d --build

构建后的镜像名为 maas-base-ui:latest。

指定端口与环境变量

创建 .env.prod 文件并自定义配置：

UI_PORT=8080
APP_TITLE=成都网讯MaaS底座
ENABLE_PLAYGROUND=false

运行：

docker compose --env-file .env.prod up -d --build

Nginx 代理规则

容器内 Nginx 默认将 /v1、/v2、/auth、/version、/proxy、/update、/cli、/grafana 等路径代理到后端 backend:80，部署时确保 backend 服务与前端容器在同一 Docker 网络中。

项目结构

config/                 # Umi 构建配置（路由、代理、插件等）
src/
  app.tsx               # 应用入口：初始化、请求配置、插件加载
  access.ts             # 权限控制逻辑
  request-config.tsx    # 请求拦截器与错误处理
  atoms/                # Jotai 原子状态
  config/               # 运行时配置（主题、设置、快捷键等）
  layouts/              # 自定义布局（侧边栏、菜单、Logo）
  pages/                # 页面组件（按功能划分）
    dashboard/          # 仪表盘
    playground/         # Playground（聊天、Embedding、Rerank、图像、语音）
    llmodels/           # 模型目录、用户模型、部署管理
    resources/          # Worker、GPU、后端、模型文件
    cluster-management/ # 集群与凭据管理
    users/              # 用户管理
    api-keys/           # API 密钥管理
    benchmark/          # 基准测试
    gpu-service/        # GPU 服务（实例、模板、存储、SSH 密钥）
  components/           # 全局共享组件
  plugins/              # 插件系统（生命周期、企业版扩展）
  locales/              # 国际化语言包
  assets/               # 图片资源
  services/             # API 服务层
Dockerfile              # 多阶段构建（Node 18 构建 + Nginx 部署）
docker-compose.yml      # 容器编排配置
nginx.conf              # Nginx 反向代理配置

环境变量

变量名	说明	默认值
APP_TITLE	应用标题（左上角显示）	成都网讯MaaS底座
ENABLE_PLAYGROUND	是否启用 Playground 菜单	true
PROXY_HOST	开发环境后端代理地址	-
UI_PORT	Docker 部署时的容器映射端口	8080

其他命令

命令	说明
npm run dev	启动开发服务器
npm run build	生产构建
npm run preview	预览构建产物
npm run format	格式化代码
npm run check:locales	检查语言文件
npm run setup	初始化 Umi 项目