Pine/DPM
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 添加双屏控制功能，支持在第二块屏幕上全屏展示内容；更新相关 UI 和逻辑以适应新功能

Browse Source
This commit is contained in:
Pine
2026-08-19 13:13:54 +08:00
parent 1e63da95ec
commit 5ed396aea4
8 changed files with 123 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/templates/admin.html
+23
View File
@@ -105,6 +105,19 @@
</div>
<!-- 页面切换 -->
<div class="card">
<div class="card-header">
<div class="card-icon"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#1D5DCE" stroke-width="1.6"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg></div>
<h3>目标屏（双屏独立控制）</h3>
</div>
<div class="page-switch-grid">
<button class="page-switch-btn screen-target" data-screen="both">全部（镜像）</button>
<button class="page-switch-btn screen-target" data-screen="main">仅主屏</button>
<button class="page-switch-btn screen-target" data-screen="secondary">仅副屏</button>
</div>
<div class="mqtt-hint">选择后，下方命令只发送到对应屏幕；「全部」两边同步。</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#1D5DCE" stroke-width="1.6"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg></div>
@@ -190,6 +203,16 @@
</div>
</div>
<!-- 双屏 -->
<div class="mqtt-group">
<div class="mqtt-group-title">双屏控制</div>
<div class="mqtt-row">
<button class="page-switch-btn" data-mqtt='{"action":"dual_screen","params":{"on":true}}'>启动双屏</button>
<button class="page-switch-btn" data-mqtt='{"action":"dual_screen","params":{"on":false}}'>关闭双屏</button>
</div>
<div class="mqtt-hint">在电脑另一块屏幕全屏展示（需展播机连接显示器）</div>
</div>
<!-- 媒体控制 -->
<div class="mqtt-group">
<div class="mqtt-group-title">媒体轮播</div>