# WebRTCSignalServerWeb · 信令服务器后台管理系统

基于 **Vue 3 + Vite + TypeScript + Pinia + Vue Router + Element Plus** 的管理后台，
技术栈与目录组织参考 [`vue-vben-admin`](https://github.com/vbenjs/vue-vben-admin)，
用于管理 `WebRTCSignalServer`（Spring Boot WebSocket 信令服务器）。

## 功能概览

| 页面 | 说明 |
| --- | --- |
| 仪表盘 | 在线设备 / 主控端 / 被控端 / 待确认连接统计、设备类型分布饼图、信令流量柱状图、最近在线设备 |
| 设备管理 | 查看已注册设备（ID、类型、在线状态、上线时间），支持按类型筛选与自动刷新 |
| 连接请求 | 查看主控端发起、等待被控端确认的连接请求（去重 / 超时治理后的待决列表） |
| 服务器信息 | 运行时长（实时）、在线数、峰值会话、累计注册与信令流量明细 |
| 系统配置 | 连接治理参数（去重窗口、确认超时、WebSocket 端点）与管理令牌说明 |

数据来源于服务器新增的 `GET /api/admin/**` 接口，由 `AdminAuthFilter` 统一鉴权。

## 目录结构

```
WebRTCSignalServerWeb/
├─ public/                 # 静态资源（favicon 等）
├─ src/
│  ├─ api/                 # axios 实例与管理接口封装
│  ├─ components/          # 通用组件（StatCard）
│  ├─ layout/              # 基础布局 + 侧边栏 + 顶栏
│  ├─ router/              # 路由与鉴权守卫
│  ├─ stores/              # Pinia 状态（用户/令牌）
│  ├─ styles/              # 全局样式
│  ├─ views/               # 各业务页面
│  ├─ App.vue / main.ts
├─ .env                    # 后端地址与默认令牌
├─ vite.config.ts / tsconfig.json
└─ package.json
```

## 快速开始

### 1. 启动信令服务器（提供 API）

服务器需 Java 21+（当前 `pom.xml` 指定 Java 25）与 Maven：

```bash
cd WebRTCSignalServer
mvn spring-boot:run
# 默认端口 8080，管理令牌默认 admin.token = webrtc-admin-token
```

> 可在 `src/main/resources/application.yml` 修改 `admin.token`，或用环境变量
> `ADMIN_TOKEN` 覆盖。

### 2. 启动管理后台

```bash
cd WebRTCSignalServerWeb
npm install
npm run dev        # http://localhost:5180
```

构建生产包：

```bash
npm run build      # 产物在 dist/
npm run preview    # 本地预览构建产物
```

## 配置说明

`.env` 关键变量：

| 变量 | 默认值 | 说明 |
| --- | --- | --- |
| `VITE_API_BASE` | `http://localhost:8080` | 后端信令服务器地址 |
| `VITE_ADMIN_TOKEN` | `webrtc-admin-token` | 默认管理令牌（需与服务器一致） |

登录时使用 `admin.token` 作为令牌；鉴权通过后会以 `X-Admin-Token`
请求头随后续接口发送。令牌错误将返回 401 并跳转登录页。

## 接口一览（服务器侧新增）

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| GET | `/api/admin/dashboard` | 仪表盘汇总数据 |
| GET | `/api/admin/devices?type=` | 设备列表（可按 CONTROLLER / CONTROLLED 过滤） |
| GET | `/api/admin/connections` | 待确认连接请求 |
| GET | `/api/admin/config` | 连接治理配置项 |
| GET | `/api/admin/health` | 健康检查（登录校验也走此接口） |