diff --git a/README.md b/README.md index 7bfff2a..29016bd 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,199 @@ -# Tauri + React +# 大屏媒体轮播系统 (DPM) -This template should help get you started developing with Tauri and React in Vite. +**Digital Playback Media** — 基于 Tauri + React 的全屏媒体轮播控制系统,专为昆明市大学生创业园展播大屏设计。 -## Recommended IDE Setup +## 概述 -- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) +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 二进制中,发布时只需分发单个可执行文件。 + +## 许可 + +本项目为昆明市大学生创业园公益定制开发。 + +--- + +*云南派音人工智能科技提供技术支持*