# GPUStack UI

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

## 技术栈

- **框架**: [UmiJS Max 4.x](https://umijs.org/)
- **UI**: [Ant Design 6.x](https://ant.design/) + Pro Components
- **状态管理**: [Jotai](https://jotai.org/)
- **语言**: TypeScript
- **包管理**: pnpm

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 9.3+

### 安装依赖

```bash
pnpm install
```

### 开发调试

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

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

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

### 生产构建

```bash
npm run build
```

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

### 预览构建产物

```bash
npm run preview
```

### 代码格式化

```bash
npm run format
```

## Docker 部署

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

### 构建镜像

```bash
docker compose up -d --build
```

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

### 指定端口与环境变量

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

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

运行：

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

### 配置后端代理

通过 `BACKEND_URL` 环境变量指定后端服务地址：

```env
UI_PORT=8080
BACKEND_URL=http://your-backend-host:80
APP_TITLE=成都网讯MaaS底座
ENABLE_PLAYGROUND=false
```

容器内 Nginx 会自动将 `/v1`、`/v2`、`/auth`、`/version`、`/proxy`、`/update`、`/cli`、`/grafana` 等路径代理到 `BACKEND_URL` 指定的后端地址。

## 项目结构

```
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.template     # Nginx 反向代理模板（运行时通过 envsubst 渲染）
docker-entrypoint.sh    # Nginx 容器入口脚本
```

## 环境变量

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

## 其他命令

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