89 lines
3.2 KiB
Markdown
89 lines
3.2 KiB
Markdown
# 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` | 健康检查（登录校验也走此接口） |
|