# 大屏媒体轮播系统 (DPM)

**Digital Playback Media** — 基于 Tauri + React 的全屏媒体轮播控制系统，专为昆明市大学生创业园展播大屏设计。

## 概述

DPM 是一套完整的数字标牌（Digital Signage）解决方案，包含两大界面：

- **大屏展示页** (`/screen`) — 全屏自动轮播，支持视频与图片，具备沉浸式空间视觉背景
- **管理后台** (`/admin`) — 登录保护的管理面板，用于媒体上传、播放列表编排、播放控制与系统设置

系统通过 **SSE（Server-Sent Events）** 实现管理端与展示端的实时状态同步，支持局域网内远程管理。

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端框架 | React 19 + React Router 7 |
| 构建工具 | Vite 7 |
| 桌面框架 | Tauri 2 (Rust) |
| HTTP 服务 | Axum 0.8 (嵌入式 HTTP 服务器) |
| 数据持久化 | JSON 文件存储 |
| 实时通信 | Server-Sent Events (SSE) |
| 内网穿透 | nps 客户端嵌入式集成 |

## 功能特性

### 媒体管理
- **本地上传** — 支持 .mp4、.mkv、.avi、.jpg、.jpeg、.png 格式
- **远程 URL** — 添加网络媒体资源链接
- **媒体预览** — 图片与视频的模态框预览
- **文件删除** — 从媒体库移除文件

### 播放控制
- **播放/暂停** — 实时控制展示端的播放状态
- **上一曲/下一曲** — 切换播放内容
- **顺序/随机播放** — 两种播放模式
- **图片时长可调** — 1~300 秒
- **音量控制** — 实时同步调节

### 展示端体验
- **沉浸式空间背景** — 深邃星空背景 + 透视网格 + 动态环境光晕
- **自动播放** — 启动后自动加载播放列表
- **视频/图片自适应** — 全屏覆盖显示
- **声音管理** — 浏览器自动播放策略处理
- **点击暂停/恢复** — 现场快速控制

### 系统功能
- **全屏/窗口模式切换** — 自由切换展示形态
- **最小化窗口** — 后台运行
- **开机自启动** — 系统级自启（Tauri autostart 插件）
- **关闭 → 最小化** — 防止误关闭
- **内网穿透** — 内置 nps 客户端，支持外网远程访问

### 管理后台
- **登录保护** — 账号密码验证
- **实时状态显示** — 当前播放内容、状态
- **上传进度条** — 文件上传实时反馈
- **响应式设计** — 桌面/移动端自适应
- **Toast 通知** — 操作即时反馈

## 快速开始

### 环境要求

- **Rust** (edition 2021)
- **Node.js** >= 18
- **Yarn** 或 npm
- **Tauri CLI** (`cargo install tauri-cli`)

### 安装

```bash
# 安装前端依赖
yarn install

# 开发模式运行（同时启动 Vite 开发服务器和 Tauri 应用）
yarn tauri dev

# 仅启动 Web 开发服务器（浏览器中预览）
yarn dev
```

### 构建生产版本

```bash
yarn tauri build
```

构建产物位于 `src-tauri/target/release/` 目录。

## 项目结构

```
dpm/
├── index.html                 # HTML 入口
├── package.json               # 前端依赖配置
├── vite.config.js             # Vite 构建配置（API 代理到 :10801）
├── public/
│   └── npc.zip                # 内网穿透客户端（嵌入二进制）
├── src/                       # 前端源代码
│   ├── main.jsx               # React 入口
│   ├── App.jsx                # 路由配置（/admin, /screen）
│   ├── pages/
│   │   ├── Admin.jsx          # 管理后台页面
│   │   └── Screen.jsx         # 大屏展示页面
│   ├── utils/
│   │   └── api.js             # API 封装（REST + SSE）
│   └── styles/
│       ├── tokens.css         # CSS 基础重置
│       ├── admin.css          # 管理后台样式
│       └── screen.css         # 大屏展示样式
└── src-tauri/                 # Rust 后端源代码
    ├── Cargo.toml             # Rust 依赖配置
    ├── tauri.conf.json        # Tauri 应用配置
    ├── capabilities/
    │   └── default.json       # Tauri 权限配置
    └── src/
        ├── main.rs            # 程序入口
        ├── lib.rs             # 模块导出 + 启动逻辑
        ├── server.rs          # Axum HTTP 服务器（路由 + 处理器）
        ├── models.rs          # 数据模型（Settings, PlaybackState, etc.）
        ├── storage.rs         # JSON 文件持久化存储
        └── events.rs          # SSE 事件广播管理器
```

## API 参考

系统内置 HTTP 服务器监听 `0.0.0.0:10801`，提供以下 REST API：

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/api/login` | 管理员登录 |
| GET | `/api/settings` | 获取系统设置 |
| POST | `/api/settings` | 更新系统设置 |
| GET | `/api/playlist` | 获取播放列表（含音量/模式/时长） |
| POST | `/api/playlist/add` | 添加到播放列表 |
| POST | `/api/playlist/remove` | 从播放列表移除 |
| GET | `/media` | 获取所有媒体文件列表 |
| POST | `/upload` | 上传媒体文件（multipart） |
| POST | `/api/media/add-url` | 添加 URL 媒体 |
| POST | `/api/delete` | 删除媒体文件 |
| POST | `/api/control` | 播放控制（play/pause/next/prev） |
| GET | `/api/state` | 获取当前播放状态 |
| POST | `/api/state` | 更新播放状态 |
| GET | `/api/events` | SSE 实时事件流 |
| POST | `/api/display-command` | 显示命令（minimize 等） |
| GET | `/file/*` | 静态媒体文件服务 |

### 默认登录凭据

- **账号**: `admin`
- **密码**: `**********`

> 可通过编辑系统数据目录下的 `dpm/data.json` 修改。

### 数据存储位置

系统数据存储在操作系统标准数据目录下的 `dpm/` 文件夹中：

- **macOS**: `~/Library/Application Support/dpm/data.json`
- **Linux**: `~/.local/share/dpm/data.json`
- **Windows**: `C:\Users\<用户>\AppData\Roaming\dpm/data.json`

媒体文件存储在用户 `~/Downloads/Media/` 目录。

## 内网穿透

系统内置 [nps](https://github.com/ehang-io/nps) 客户端，自动从嵌入的 `public/npc.zip` 解压并启动，实现外网远程访问管理后台。

- 启动参数在 `server.rs` 中配置
- *仅支持 Windows*
- 自动设置 Unix 可执行权限
- 解压到系统数据目录 `dpm/npc/`

## 开发说明

### 端口

| 端口 | 用途 |
|------|------|
| 10801 | 后端 HTTP API 服务器 |
| 1420 | Vite 前端开发服务器 |

### Vite 开发代理

开发模式下，Vite 自动将 `/api`、`/file`、`/media`、`/upload` 路径代理到 `localhost:10801`，前端无需关心跨域问题。

### 构建

前端构建产物（`dist/`）通过 `RustEmbed` 编译到 Rust 二进制中，发布时只需分发单个可执行文件。

## 许可

本项目为昆明市大学生创业园公益定制开发。

---

*云南派音人工智能科技提供技术支持*