244ffe8f31d42d96dc3622ad0d17aa357e4501cb
园区大屏(park-desktop / DPM)
核对:2026-10-19 · 依据 park-desktop
main@a2fbad8· 以实现为准
DPM(Digital Playback Media)—— 基于 Tauri 2 + React 19 的园区大屏客户端,为昆明市大学生创业园 OPC 运营中心提供数据大屏、数字孪生、AI 助手、媒体轮播、任务大屏与企业墙。
园区后端已并入 server-core
/park(不再有独立:10085后端);管理后台为后端 FastAPI + Jinja 页面(GET /admin),不由 React 路由接管。实时控制走 MQTT(EMQX:8083),不再使用内置 Axum HTTP 服务 / SSE / nps。
技术栈
| 层级 | 技术 |
|---|---|
| 前端框架 | React 19 + React Router 7 |
| 构建工具 | Vite 7 + Tailwind 4.3(@tailwindcss/vite) |
| 桌面框架 | Tauri 2(Rust,src-tauri/,本地 wry 补丁) |
| 三维 / 可视化 | three 0.185(@react-three/fiber / drei)、@appica/ui-react |
| 实时通信 | MQTT 5.15(mqtt.js,EMQX) |
| 二维码 | qrcode.react |
页面(src/App.jsx)
| 路由 | 页面 | 说明 |
|---|---|---|
/ |
DataScreen |
园区数据大屏(概览/数据快照) |
/twin |
DigitalTwin |
数字孪生(3D 园区) |
/ai |
AiAssistant |
园区 AI 助手(含语音 s2s) |
/screen |
MediaScreen |
全屏媒体轮播(视频/图片,MQTT 受控) |
/tasks |
TaskDisplay |
任务大屏(轮播卡 + 二维码扫码接单) |
/wall |
CompanyWall |
入驻企业展示墙 |
- 统一页眉布局
components/ScreenLayout;/voice有VoiceAssistant组件但当前未挂路由。 - 首启可走 屏幕绑定(
components/BindScreen+utils/tenant,绑定后按租户拉数据);支持双屏(set_dual_screen)、全屏、开机自启(tauri-plugin-autostart)、应用内自动更新(components/UpdateNotify+utils/updateCheck)。
功能概览
- 媒体轮播(
pages/MediaScreen.jsx):视频/图片全屏轮播、沉浸式空间背景、自动播放、点击暂停/恢复、音量与顺序/随机播放、播放状态上报(opc/display/*MQTT 主题)。 - 任务大屏(
pages/TaskDisplay.jsx):任务轮播卡 + 二维码扫码接单。 - 园区数据 / 数字孪生 / 企业墙:数据快照(
opc/dashboard/tick)、3D 园区、入驻企业展示。 - AI 助手:对话面板 + 语音 s2s(
src/voice/)。 - 设备与运维:屏幕绑定/租户隔离、心跳上报(
opc/display/heartbeat,后端统计在线)、双屏、全屏、开机自启、自动更新。 - 管理后台:媒体上传、播放列表编排与播放控制等由 server-core
/park的后端/admin页面提供(前端不再内置管理页)。
快速开始
环境要求
- Rust(edition 2021)、Node.js >= 18、Yarn(或 npm)、Tauri 2 CLI(
yarn tauri走本地依赖)
安装与运行
yarn install
yarn dev # 仅启动 Vite(http://localhost:1420,浏览器预览大屏)
yarn tauri dev # Tauri 桌面端(前端 + Rust 壳)
yarn build # 前端产物 dist/
yarn tauri build # 桌面安装包,产物在 src-tauri/target/release/
⚠️ 按团队铁律:AI 不启动/重启任何服务(含 vite / Tauri),需要时通知用户亲自操作。
配置(src/config.js)
地址解析优先级:exe 旁 config.json(Tauri read_runtime_config)> 后端 /park/api/config 下发 > 构建期 VITE_* > 内置默认。
| 项 | 默认 | 覆盖方式 |
|---|---|---|
| 园区 API | http://<当前主机>:8090/park(打包生产回退 opc.pinesound.cn) |
window.__DPM_API__、VITE_API_BASE |
| MQTT | ws(s)://<当前主机>:8083/mqtt(生产 wss) |
window.__DPM_MQTT__、VITE_MQTT_URL |
| 视频识别 | 空 = 禁用 | window.__DPM_VISION__、VITE_VISION_API_BASE |
| 大屏引导令牌 | 空 | window.__DPM_BOOTSTRAP__、VITE_PARK_BOOTSTRAP_TOKEN |
旧 :10085 地址一律判为失效并回退 server-core 统一入口。
项目结构
index.html
package.json # 包名 dpm
vite.config.js # 端口 1420;无 dev 代理(API 由 src/config.js 直连 server-core)
public/ # logo、语音 worklets 等静态资源
src/
main.jsx # React 入口 + 运行时配置引导 + 致命错误兜底
App.jsx # 6 个大屏路由
config.js # API / MQTT / Vision / bootstrap 令牌解析
pages/ # DataScreen / DigitalTwin / AiAssistant / MediaScreen / TaskDisplay / CompanyWall
components/ # ScreenLayout / BindScreen / PageHeader / 各类面板、弹窗
utils/ # api.js、mqtt.js、tenant.js、taskData.js、updateCheck.js、pageNav.js、sounds.js
voice/ # s2s 语音客户端、orb 可视化、worklets
styles/ # tokens/global/datascreen/mediascreen/task-display 等
src-tauri/
Cargo.toml # tauri 2 + opener/autostart + 本地 wry 补丁
tauri.conf.json # productName「云超服昆创园OPC运营中心」,1200x800 全屏
capabilities/default.json # 窗口/自启/opener 权限
src/{main.rs,lib.rs} # 入口;命令:set_dual_screen / install_update / read_runtime_config
端口一览
| 端口 | 用途 |
|---|---|
| 1420 | Vite 前端开发服务器(strictPort) |
| 8090 | server-core(园区 API 前缀 /park) |
| 8083 | MQTT Broker(EMQX,/mqtt) |
| 10085 | 已废弃的旧园区后端(源码已回退到统一入口,勿再使用) |
许可
本项目为昆明市大学生创业园公益定制开发。
云南派音人工智能科技提供技术支持
Description
Languages
JavaScript
63.3%
CSS
34%
Rust
1%
HTML
0.9%
Python
0.6%
Other
0.2%