feat: 大屏增强——一键亮屏按钮、卡片显示设备名+IP+熄屏状态(thumb 响应头 X-Screen-State)、点击卡片进入设备操作弹窗(实时流+触控+按键+文字),工具页远程看屏子分栏移除并入大屏

This commit is contained in:
2026-08-19 14:17:33 +08:00
parent c78f17d72f
commit e07b339a51
5 changed files with 269 additions and 199 deletions
-36
View File
@@ -494,7 +494,6 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
<button class="sub-tab" data-sub="appver" onclick="showSubTab('tools','appver')">应用版本管理</button>
<button class="sub-tab" data-sub="devapps" onclick="showSubTab('tools','devapps')">设备已装应用</button>
<button class="sub-tab" data-sub="devpool" onclick="showSubTab('tools','devpool')">设备池管理</button>
<button class="sub-tab" data-sub="screen" onclick="showSubTab('tools','screen')">远程看屏</button>
</div>
<!-- 子分栏 1:剪贴板注入 -->
@@ -674,41 +673,6 @@ body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14
</div>
</div>
<!-- 子分栏 7:远程看屏(MJPEG 实时流 + 触控) -->
<div class="sub-panel" id="tools-sub-screen">
<div class="toolbar">
<select id="screen-device" class="form-control" style="width:300px;font-family:monospace"></select>
<button class="btn btn-primary" onclick="startScreenView()">开始看屏</button>
<button class="btn" onclick="stopScreenView()">停止</button>
<button class="btn" onclick="loadScreenDevices(true)">刷新设备</button>
<span id="screen-status" class="text-muted"></span>
</div>
<div style="display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap">
<div style="position:relative" id="screen-stage">
<img id="screen-img" alt="远程画面"
style="max-width:420px;border-radius:12px;border:1px solid var(--border);background:#000;cursor:crosshair;user-select:none">
<div id="screen-loading" class="empty" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:#fff;border-radius:12px">连接中(首次连接需推送 atx-agent,最长约 30 秒)...</div>
</div>
<div style="display:flex;flex-direction:column;gap:6px;min-width:200px">
<div style="font-size:12px;color:var(--text-light)">操作(鼠标拖拽=滑动,点击=轻触)</div>
<div style="display:flex;gap:6px;flex-wrap:wrap">
<button class="btn btn-xs" onclick="screenKey('back')">◀ 返回</button>
<button class="btn btn-xs" onclick="screenKey('home')">🏠 主页</button>
<button class="btn btn-xs" onclick="screenKey('recent')">📋 最近</button>
<button class="btn btn-xs" onclick="screenKey('menu')">☰ 菜单</button>
<button class="btn btn-xs" onclick="screenKey('power')">⏻ 电源</button>
<button class="btn btn-xs" onclick="screenKey('volume_up')">🔊 音量+</button>
<button class="btn btn-xs" onclick="screenKey('volume_down')">🔉 音量-</button>
</div>
<div style="display:flex;gap:6px;margin-top:4px">
<input type="text" id="screen-text" class="form-control" style="flex:1" placeholder="输入文字(需光标在输入框)"
onkeydown="if(event.key==='Enter')screenSendText()">
<button class="btn btn-xs" onclick="screenSendText()">发送</button>
</div>
<div class="help" style="margin-top:6px">画面为设备原生分辨率 JPEG 流(约 3-6 帧/秒)。设备息屏时画面为黑,可先点电源/亮屏。</div>
</div>
</div>
</div>
</div>
</div><!-- /.content -->