feat(console,admin): kiosk 不再点击穿透 + 压住任务栏；大屏控制页新增「局域网大屏」（链接/复制/二维码）dev_0.4.0
## ① 现场问题：kiosk 窗口点击穿透（原设计方向反了） `displays.js` 原来对多屏 kiosk 调 `setIgnoreMouseEvents(true)`，注释写的是 「防止现场误触」——但该 API 的语义是「本窗口忽略鼠标」，点击会**落到它后面的 窗口或桌面**，现场想防的误触正好变成误点别的东西；被忽略鼠标的窗口也点不活。 现在窗口**默认吞掉鼠标、不穿透**。 配置项**改名**为 `display.allowClickThrough`（缺省 false；显式 true 才穿透）。 **旧键 `display.ignoreMouse` 完全不读**——老机器的配置文件里还写着旧版模板留下的 `ignoreMouse: true`，而配置策略是「已存在不覆盖」，只改默认值等于老机器升级后 照样穿透；改名才能让默认值真正生效。启动时若发现旧键会记一条中文提示（只记一次）， 并在合并后的配置里把它剥掉，防止将来有人再读到那个陈年 true。 （不是自动改写用户配置文件：无法区分「操作员刻意写的 true」与「旧模板留下的 true」。） ## ② 现场问题：任务栏盖住 kiosk 窗口、被盖住后抢不回前台 原顺序是 `setKiosk(true)` 之后又 `setBounds(...)`，在 Windows 上会把窗口从真正的 全屏态拽回「恰好铺满该屏的无边框窗口」→ 不是 topmost，任务栏与拖过去的窗口都盖得住。 现在固定为 **先 `setBounds` 定位 → 再 `setKiosk(true)` → 最后 `setAlwaysOnTop(true, 'screen-saver')`**（默认层级 `floating` 在 Windows 上仍画在任务栏下面），并加了 「已达标就不重复进出 kiosk」的守卫避免重排白闪；非 kiosk 分支会摘掉置顶。 Win 真机行为需现场复核，代码/桩级已验（含顺序与层级的断言）。 ## ③ 新功能：大屏控制页「局域网大屏」卡片 - 服务端新增 `GET /api/system/network`（recorder 及以上）：回本机可用局域网 IPv4 （排除回环/link-local/IPv6，去重，按 192.168/10/172.16-31 优先排序）+ 真实监听端口 + 路径；无地址回 `[]` 不报错。 - 卡片：每个地址一条可点击链接 + 复制按钮，第一个地址配二维码（148px）。 - **二维码是离线自实现的纯 TS 编码器**（版本 1–40 自动、ECC L/M/Q/H、8 种掩码择优）， 正确性用 **Python OpenCV 真解码**验收：29/29 条解出原文（含中文与边界）， SVG 渲染后再解码 4/4，并把验证过的矩阵冻结成仓库参照用例。 - 复制按**非安全上下文**处理：面板常从 `http://192.168.x.x` 打开，那里 `navigator.clipboard` 是 undefined，自动回退 `execCommand('copy')`。 ## ④ 真机联调抓出并修掉一个时序缺陷（真浏览器 + 真服务端） `DisplayPage` 的 `refreshLan()` 在挂载时跑，而 `auth` 是异步加载的——那一刻 `auth.readOnly` 必然为 true，卡片把「当前为只读访客」写进一个**普通 ref** 就返回了， 身份落定后没有任何东西再触发它：**管理员登录后卡片永远停在访客态， `/api/system/network` 一次都没被请求**。 改为「gate 由 computed 直接渲染 + watch gate 变 null 时重跑加载」，并补回归钉子。 （同时修正了一条把该错误结构当成正确行为的源码断言用例。） 端到端证据：真服务 + 局域网 IP（真非安全上下文）→ 卡片列出两个地址、点击复制变 「已复制」（走 execCommand 回退）→ 浏览器渲染的二维码截图经 cv2 解出 `http://10.50.101.85:19861/display`。 ## 文档 部署指南配置表与多屏行为、使用手册「大屏控制」与局域网设备段、devdocs 05/07/10/13、 升级说明新增 dev_0.4.0（含旧键废弃与启动提示）。**无数据迁移**，旧赛事包照常导入。 自检：服务端 13 包 ×2；前端 vue-tsc + 645 例 ×2 + build；Console 20 文件 + 68 例。
This commit is contained in:
AskaEth committed
1 parent
ed2c0b3f3c
commit
9ef68c2589
33 files changed
+2923
-95
No files matched your search
@@ -13,6 +13,7 @@ import type {
|
||||
EventSettings,
|
||||
HealthInfo,
|
||||
LiveEvents,
|
||||
NetworkInfo,
|
||||
Page,
|
||||
PageQuery,
|
||||
PointAdjustment,
|
||||
@@ -328,6 +329,19 @@ export const adminApi = {
|
||||
() => ({ source: 'auto', eventIds: [], events: [] }),
|
||||
),
|
||||
|
||||
/**
|
||||
* 本机局域网地址（`GET /api/system/network`，recorder 及以上）。
|
||||
*
|
||||
* 这句是给「大屏控制」页的局域网卡片用的：连不上后端时退回示例地址，
|
||||
* 让示例模式也能看到卡片长什么样；**403 不降级**——访客必须看到「没权限」而不是
|
||||
* 一条看着能用的假地址（那会让人拿着错的链接去别的设备上试）。
|
||||
*/
|
||||
systemNetwork: (): Promise<NetworkInfo> =>
|
||||
call(
|
||||
() => client.system.network(),
|
||||
() => mockDb.network(),
|
||||
),
|
||||
|
||||
login: (username: string, password: string): Promise<CurrentUser> =>
|
||||
callWrite(() => client.auth.login(username, password)),
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import type {
|
||||
EventCategory,
|
||||
EventSettings,
|
||||
HealthInfo,
|
||||
NetworkInfo,
|
||||
Page,
|
||||
PointAdjustment,
|
||||
PublishPayload,
|
||||
@@ -834,6 +835,22 @@ class MockDb {
|
||||
health(): HealthInfo {
|
||||
return { version: 'mock' }
|
||||
}
|
||||
|
||||
/**
|
||||
* 示例模式下的本机网络信息：字段形状与 `GET /api/system/network` 完全一致，
|
||||
* IP 用私有段里的一条假地址，绝不能让示例数据里出现真机或公网地址。
|
||||
*/
|
||||
network(): NetworkInfo {
|
||||
return {
|
||||
port: 19540,
|
||||
displayPath: '/display',
|
||||
adminPath: '/admin',
|
||||
addresses: [
|
||||
{ ip: '192.168.1.23', interface: 'eth0', family: 'ipv4' },
|
||||
{ ip: '10.0.8.7', interface: 'wlan0', family: 'ipv4' },
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function round(value: number): number {
|
||||
|
||||
@@ -24,6 +24,7 @@ export const ICON_PATHS = {
|
||||
maximize: 'M5 5h14v14H5z',
|
||||
restore: 'M8 8h11v11H8zM5 16V5h11',
|
||||
check: 'M5 12.5 10 17l9-10',
|
||||
copy: 'M9 9h11v11H9zM15 9V4H4v11h4',
|
||||
warning: 'M12 4l9 16H3l9-16Zm0 6v4m0 3v.5',
|
||||
search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.3-4.3',
|
||||
chevron: 'M8 10l4 4 4-4',
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { formatDateTime, type EventSettings, type LiveEvents } from '@/shared'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { formatDateTime, type EventSettings, type LiveEvents, type NetworkInfo } from '@/shared'
|
||||
import type { DisplayInstance } from '@/shared/api'
|
||||
import { DISPLAY_PAGES, type DisplayPageKey } from '@/display/types'
|
||||
import { encodeQr, qrToSvg } from '@/shared/qrcode'
|
||||
import MxIcon from '../components/MxIcon.vue'
|
||||
import PageHeader from '../components/PageHeader.vue'
|
||||
import { adminApi } from '../api/client'
|
||||
import MockBadge from '../components/system/MockBadge.vue'
|
||||
import { adminApi, ApiError } from '../api/client'
|
||||
import { settingsApi } from '../components/system/systemApi'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useEventStore } from '../stores/event'
|
||||
import { useToastStore } from '../stores/toast'
|
||||
import { copyText, lanDisplayLinks } from './lanDisplay'
|
||||
|
||||
/**
|
||||
* 页面选项直接取大屏那份清单（`@/display/types`）：规范页名与中文标签只维护一处，
|
||||
@@ -317,17 +320,114 @@ function onVisibilityChange(): void {
|
||||
if (document.visibilityState === 'visible') void refreshInstances()
|
||||
}
|
||||
|
||||
// ── 局域网大屏（别的设备用浏览器打开就是一块大屏） ────────────────────────────
|
||||
|
||||
const lanInfo = ref<NetworkInfo | null>(null)
|
||||
/**
|
||||
* 非 null 表示卡片只能给说明、给不出地址：权限不足或接口读不到。
|
||||
*
|
||||
* 用 `lanInfo === null` 兼作「还没读到答案」——请求只有「拿到数据」和「拿到一句话」
|
||||
* 两种结局，所以首帧不会先闪一下「未检测到局域网地址」那个空态。
|
||||
*/
|
||||
const lanProblem = ref<string | null>(null)
|
||||
/** 刚复制成功的地址，1.5 秒后清掉，用来把按钮文案切成「已复制」。 */
|
||||
const copiedUrl = ref<string | null>(null)
|
||||
let copiedTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
/** 二维码目标边长（像素）：卡片里放得下，也够手机在正常距离扫出来。 */
|
||||
const QR_PIXELS = 140
|
||||
const QR_MARGIN = 4
|
||||
|
||||
/**
|
||||
* 访客提前拦住，不去吃那个必然的 403。
|
||||
*
|
||||
* `/api/system/network` 是 recorder 及以上，与系统设置各面板同一口径；
|
||||
* 示例数据模式例外——那时本来就没有会话，但界面要能看到卡片长什么样。
|
||||
*/
|
||||
const lanGateReason = computed(() =>
|
||||
auth.readOnly && !data.isMock ? '只有登录后的录入员 / 管理员能查看局域网地址，当前为只读访客。' : null,
|
||||
)
|
||||
|
||||
const lanLinks = computed(() => (lanInfo.value === null ? [] : lanDisplayLinks(lanInfo.value)))
|
||||
|
||||
/** 有地址但服务端没给端口：拼不出链接，这句话要和「没插网线」分开说。 */
|
||||
const lanPortMissing = computed(() => lanInfo.value !== null && lanInfo.value.port <= 0)
|
||||
|
||||
/**
|
||||
* 第一个地址的小二维码。
|
||||
*
|
||||
* 只给第一条地址出码：卡片上摆一排二维码没有意义，现场也只需要一个能随手扫的入口。
|
||||
* scale 由模块数反推，让不同版本（21–177 模块）渲染出来都落在接近的像素尺寸上。
|
||||
*/
|
||||
const lanQrSvg = computed(() => {
|
||||
const first = lanLinks.value[0]
|
||||
if (first === undefined) return null
|
||||
const size = encodeQr(first.url).size
|
||||
const scale = Math.max(1, Math.round(QR_PIXELS / (size + QR_MARGIN * 2)))
|
||||
return qrToSvg(first.url, { scale, margin: QR_MARGIN, ecc: 'M' })
|
||||
})
|
||||
|
||||
async function refreshLan(): Promise<void> {
|
||||
// 身份还没就绪时不要「把访客理由写进 lanProblem 就完事」：auth 是异步加载的，
|
||||
// 挂载那一刻 readOnly 必然为 true，写死之后即使随后拿到管理员身份也没有东西再触发本函数
|
||||
// —— 卡片会永远停在「只读访客」，接口一次都不会被请求（真机深链进本页必现）。
|
||||
// 这里的职责只有「能不能读」；读不了就清空状态，等 watch 在身份就绪后重跑。
|
||||
if (lanGateReason.value !== null) {
|
||||
lanInfo.value = null
|
||||
lanProblem.value = null
|
||||
return
|
||||
}
|
||||
try {
|
||||
lanInfo.value = await adminApi.systemNetwork()
|
||||
lanProblem.value = null
|
||||
} catch (caught) {
|
||||
// 403 是权限边界，其余是服务端没给答案；两者在现场要做的事完全不同，不能合成一句。
|
||||
lanInfo.value = null
|
||||
lanProblem.value =
|
||||
caught instanceof ApiError && caught.code === 'FORBIDDEN'
|
||||
? '当前账号没有查看权限，请先登录（该接口需要录入员及以上）。'
|
||||
: `读不到局域网地址：${caught instanceof Error ? caught.message : '未知错误'}`
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLanUrl(url: string): Promise<void> {
|
||||
// 面板多半是从 http://192.168.x.x 打开的，那里 navigator.clipboard 是 undefined，
|
||||
// copyText 会自己退到 execCommand，这里只负责把结果反馈给操作员。
|
||||
const copied = await copyText(url)
|
||||
if (!copied) {
|
||||
toast.error('复制失败', '浏览器不允许自动复制，请手动选中地址复制')
|
||||
return
|
||||
}
|
||||
copiedUrl.value = url
|
||||
if (copiedTimer !== null) clearTimeout(copiedTimer)
|
||||
copiedTimer = setTimeout(() => {
|
||||
copiedUrl.value = null
|
||||
copiedTimer = null
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadDisplays()
|
||||
void refreshSettings()
|
||||
void refreshLive()
|
||||
void refreshInstances()
|
||||
void refreshLan()
|
||||
// 身份是异步加载的：挂载那一刻 readOnly 必然为 true，卡片只能先显示「只读访客」。
|
||||
// 等身份落定（gate 变成 null）必须**主动重跑一次**，否则这张卡会永远停在访客态、
|
||||
// 接口一次都不请求 —— 真机深链进本页必现（2026-09-12 用真 Chromium 复现）。
|
||||
watch(lanGateReason, (reason) => {
|
||||
if (reason === null) void refreshLan()
|
||||
})
|
||||
startPolling()
|
||||
document.addEventListener('visibilitychange', onVisibilityChange)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopPolling()
|
||||
if (copiedTimer !== null) {
|
||||
clearTimeout(copiedTimer)
|
||||
copiedTimer = null
|
||||
}
|
||||
document.removeEventListener('visibilitychange', onVisibilityChange)
|
||||
})
|
||||
|
||||
@@ -804,69 +904,117 @@ async function send(
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="mx-card">
|
||||
<div class="mx-card-head">
|
||||
<span class="mx-card-title">在线大屏</span>
|
||||
<span class="mx-badge" :class="onlineCount > 0 ? 'mx-badge-success' : 'mx-badge-neutral'">
|
||||
{{ onlineCount }} / {{ instances.length }} 在线
|
||||
</span>
|
||||
</div>
|
||||
<div class="mx-card-body">
|
||||
<div v-if="instancesError !== null" class="board-note">
|
||||
<MxIcon name="warning" :size="14" />
|
||||
<span>读取在线大屏失败：{{ instancesError }}</span>
|
||||
<div class="col">
|
||||
<section class="mx-card">
|
||||
<div class="mx-card-head">
|
||||
<span class="mx-card-title">局域网大屏</span>
|
||||
<MockBadge v-if="data.isMock" />
|
||||
<span v-else-if="lanLinks.length > 0" class="mx-badge mx-badge-neutral">
|
||||
{{ lanLinks.length }} 个可用地址
|
||||
</span>
|
||||
</div>
|
||||
<div class="mx-card-body">
|
||||
<p class="lan-intro">在别的设备浏览器打开下面的地址，就是一块大屏。</p>
|
||||
|
||||
<p v-if="instances.length === 0" class="display-note">
|
||||
还没有大屏上报。本机用 Console 打开的大屏窗口、以及局域网设备打开 /display 后，都会在这里出现（每 5 秒刷新一次）。
|
||||
</p>
|
||||
<p v-if="lanGateReason !== null" class="notice">{{ lanGateReason }}</p>
|
||||
<p v-else-if="lanProblem !== null" class="notice">{{ lanProblem }}</p>
|
||||
<p v-else-if="lanInfo === null" class="display-note">读取中…</p>
|
||||
<p v-else-if="lanPortMissing" class="display-note">
|
||||
服务端没有下发大屏端口，暂时拼不出能在别的设备打开的地址。
|
||||
</p>
|
||||
|
||||
<div v-for="instance in instances" :key="instance.id" class="display-row">
|
||||
<div class="display-meta">
|
||||
<div class="display-name">
|
||||
<span class="instance-id">{{ instance.id }}</span>
|
||||
<span class="mx-badge" :class="instance.online ? 'mx-badge-success' : 'mx-badge-error'">
|
||||
{{ instance.online ? '在线' : '离线' }}
|
||||
</span>
|
||||
<span v-if="instance.slow" class="mx-badge mx-badge-warning">落后</span>
|
||||
<span class="mx-badge mx-badge-neutral">
|
||||
{{ instance.screen === '' ? '局域网浏览器' : `屏 ${instance.screen}` }}
|
||||
</span>
|
||||
<template v-else-if="lanLinks.length > 0">
|
||||
<div v-for="(item, index) in lanLinks" :key="item.ip" class="lan-row">
|
||||
<div class="lan-line">
|
||||
<a class="lan-link" :href="item.url" target="_blank" rel="noopener">{{ item.url }}</a>
|
||||
<button class="mx-btn mx-btn-secondary mx-btn-sm" type="button" @click="copyLanUrl(item.url)">
|
||||
<MxIcon :name="copiedUrl === item.url ? 'check' : 'copy'" :size="14" />
|
||||
{{ copiedUrl === item.url ? '已复制' : '复制' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="index === 0 && lanQrSvg !== null" class="lan-qr">
|
||||
<!--
|
||||
内容是自家编码器产出的 SVG 字符串（路径全是数字坐标、aria 里的文本已转义），
|
||||
不是用户输入；用它换掉几百个 <rect>，卡片首屏才不会被二维码拖慢。
|
||||
-->
|
||||
<div class="lan-qr-code" v-html="lanQrSvg"></div>
|
||||
<div class="lan-qr-note">手机扫码直接打开</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="display-sub">
|
||||
当前页：{{ instance.page === '' ? '未上报' : pageLabel(instance.page) }} · 来源：{{ instance.remoteAddr === '' ? '未知' : instance.remoteAddr }}
|
||||
</div>
|
||||
<div class="display-sub">最后心跳：{{ formatDateTime(instance.lastHeartbeat) }}</div>
|
||||
<div v-if="!instance.online" class="display-sub">已离线：指令发不到它，等大屏重新连上再切页。</div>
|
||||
</template>
|
||||
|
||||
<p v-else class="display-note">未检测到局域网地址（可能是没插网线 / 只有回环）。</p>
|
||||
|
||||
<p class="hint">
|
||||
地址由服务端下发的端口与路径拼成；平板上打开后不必登录，大屏本身是只读的。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-card">
|
||||
<div class="mx-card-head">
|
||||
<span class="mx-card-title">在线大屏</span>
|
||||
<span class="mx-badge" :class="onlineCount > 0 ? 'mx-badge-success' : 'mx-badge-neutral'">
|
||||
{{ onlineCount }} / {{ instances.length }} 在线
|
||||
</span>
|
||||
</div>
|
||||
<div class="mx-card-body">
|
||||
<div v-if="instancesError !== null" class="board-note">
|
||||
<MxIcon name="warning" :size="14" />
|
||||
<span>读取在线大屏失败：{{ instancesError }}</span>
|
||||
</div>
|
||||
<div class="display-actions">
|
||||
<select
|
||||
class="mx-cell-input instance-page-select"
|
||||
:value="draftFor(`instance:${instance.id}`, instance.page)"
|
||||
:disabled="!canWrite || !instance.online || targetPending !== null"
|
||||
@change="pickPage(`instance:${instance.id}`, $event)"
|
||||
>
|
||||
<option v-for="page in DISPLAY_PAGES" :key="page.key" :value="page.key">{{ page.title }}</option>
|
||||
</select>
|
||||
<button
|
||||
class="mx-btn mx-btn-primary mx-btn-sm"
|
||||
type="button"
|
||||
:disabled="!canWrite || !instance.online || targetPending !== null"
|
||||
@click="gotoInstance(instance)"
|
||||
>
|
||||
{{ targetPending === `instance:${instance.id}` ? '下发中…' : '切到此页' }}
|
||||
</button>
|
||||
|
||||
<p v-if="instances.length === 0" class="display-note">
|
||||
还没有大屏上报。本机用 Console 打开的大屏窗口、以及局域网设备打开 /display 后，都会在这里出现（每 5 秒刷新一次）。
|
||||
</p>
|
||||
|
||||
<div v-for="instance in instances" :key="instance.id" class="display-row">
|
||||
<div class="display-meta">
|
||||
<div class="display-name">
|
||||
<span class="instance-id">{{ instance.id }}</span>
|
||||
<span class="mx-badge" :class="instance.online ? 'mx-badge-success' : 'mx-badge-error'">
|
||||
{{ instance.online ? '在线' : '离线' }}
|
||||
</span>
|
||||
<span v-if="instance.slow" class="mx-badge mx-badge-warning">落后</span>
|
||||
<span class="mx-badge mx-badge-neutral">
|
||||
{{ instance.screen === '' ? '局域网浏览器' : `屏 ${instance.screen}` }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="display-sub">
|
||||
当前页：{{ instance.page === '' ? '未上报' : pageLabel(instance.page) }} · 来源：{{ instance.remoteAddr === '' ? '未知' : instance.remoteAddr }}
|
||||
</div>
|
||||
<div class="display-sub">最后心跳：{{ formatDateTime(instance.lastHeartbeat) }}</div>
|
||||
<div v-if="!instance.online" class="display-sub">已离线：指令发不到它，等大屏重新连上再切页。</div>
|
||||
</div>
|
||||
<div class="display-actions">
|
||||
<select
|
||||
class="mx-cell-input instance-page-select"
|
||||
:value="draftFor(`instance:${instance.id}`, instance.page)"
|
||||
:disabled="!canWrite || !instance.online || targetPending !== null"
|
||||
@change="pickPage(`instance:${instance.id}`, $event)"
|
||||
>
|
||||
<option v-for="page in DISPLAY_PAGES" :key="page.key" :value="page.key">{{ page.title }}</option>
|
||||
</select>
|
||||
<button
|
||||
class="mx-btn mx-btn-primary mx-btn-sm"
|
||||
type="button"
|
||||
:disabled="!canWrite || !instance.online || targetPending !== null"
|
||||
@click="gotoInstance(instance)"
|
||||
>
|
||||
{{ targetPending === `instance:${instance.id}` ? '下发中…' : '切到此页' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="board-hint">
|
||||
<p>当前状态：{{ locked ? '已锁定' : '自动轮播' }} · 全部大屏页面 {{ pageLabel(currentPage) }}</p>
|
||||
<p v-if="instancesUpdatedAt !== null" class="muted">最近一次刷新：{{ formatDateTime(instancesUpdatedAt) }}</p>
|
||||
<p class="muted">「落后」= 该实例确认的版本落后（大屏可能在卡或网络差）；离线实例会在服务端保留一段时间，便于排查。</p>
|
||||
<p v-if="data.isMock" class="mock">示例数据模式下指令不会真正下发到大屏。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="board-hint">
|
||||
<p>当前状态：{{ locked ? '已锁定' : '自动轮播' }} · 全部大屏页面 {{ pageLabel(currentPage) }}</p>
|
||||
<p v-if="instancesUpdatedAt !== null" class="muted">最近一次刷新：{{ formatDateTime(instancesUpdatedAt) }}</p>
|
||||
<p class="muted">「落后」= 该实例确认的版本落后（大屏可能在卡或网络差）；离线实例会在服务端保留一段时间，便于排查。</p>
|
||||
<p v-if="data.isMock" class="mock">示例数据模式下指令不会真正下发到大屏。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -943,6 +1091,53 @@ async function send(
|
||||
background: var(--mx-s3);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lan-intro {
|
||||
font-size: 12px;
|
||||
color: var(--mx-t3);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lan-row {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--mx-r-sm);
|
||||
background: var(--mx-s3);
|
||||
}
|
||||
.lan-row + .lan-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.lan-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.lan-link {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--mx-mono);
|
||||
font-size: 13px;
|
||||
color: var(--mx-primary);
|
||||
/* 地址是机器串出来的，窄栏里要能折行，不能把「复制」按钮顶出卡片。 */
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.lan-qr {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
.lan-qr-code {
|
||||
/* 二维码自带白底留出静区，和卡片底色隔开，避免深色主题下扫不出来。 */
|
||||
line-height: 0;
|
||||
padding: 6px;
|
||||
border-radius: var(--mx-r-xs);
|
||||
background: #fff;
|
||||
}
|
||||
.lan-qr-note {
|
||||
font-size: 12px;
|
||||
color: var(--mx-t3);
|
||||
}
|
||||
.textarea-wrap {
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { NetworkAddress, NetworkInfo } from '@/shared'
|
||||
|
||||
/**
|
||||
* 「局域网大屏」卡片的纯逻辑。
|
||||
*
|
||||
* 抽出来是因为这两件事都没法在组件里测：地址要靠服务端下发的 port / displayPath 拼
|
||||
* （不能写死），复制要在 `navigator.clipboard` 不存在的老式上下文里退回 execCommand。
|
||||
* 现场面板正是从 `http://192.168.x.x:<端口>` 这种裸 HTTP 地址打开的——**非安全上下文里
|
||||
* clipboard 是 undefined**，所以回退不是兼容性洁癖，而是这条路径的常态。
|
||||
*/
|
||||
|
||||
export interface LanDisplayLink {
|
||||
ip: string
|
||||
/** 完整地址：`http://<ip>:<port><displayPath>`。 */
|
||||
url: string
|
||||
}
|
||||
|
||||
/** 拼一条局域网大屏地址；IPv6 要加方括号，否则端口那一段会被当成地址的一部分。 */
|
||||
export function displayUrl(address: NetworkAddress, network: NetworkInfo): string {
|
||||
const host = address.ip.includes(':') ? `[${address.ip}]` : address.ip
|
||||
return `http://${host}:${network.port}${network.displayPath}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 把服务端返回的网络信息摊平成可点的链接。
|
||||
*
|
||||
* 端口缺失（服务端异常 / 老版本接口）时给空数组：拼 `http://ip:0/display` 这种
|
||||
* 「看着像链接、点开连不上」的东西比空态更糟。
|
||||
*/
|
||||
export function lanDisplayLinks(network: NetworkInfo): LanDisplayLink[] {
|
||||
if (!Number.isFinite(network.port) || network.port <= 0) return []
|
||||
return network.addresses.map((address) => ({ ip: address.ip, url: displayUrl(address, network) }))
|
||||
}
|
||||
|
||||
/** 复制用到的宿主能力；全部可注入，这样在 node 里也能把回退路径走一遍。 */
|
||||
export interface CopyDeps {
|
||||
/** 默认取 `navigator.clipboard`；非安全上下文下它本身就不存在。 */
|
||||
clipboard?: { writeText?: (text: string) => Promise<void> } | null
|
||||
/** 默认走「临时 textarea + document.execCommand('copy')」。 */
|
||||
legacyCopy?: (text: string) => boolean
|
||||
}
|
||||
|
||||
interface ClipboardLike {
|
||||
writeText?: (text: string) => Promise<void>
|
||||
}
|
||||
|
||||
function navigatorClipboard(): ClipboardLike | null {
|
||||
const nav = (globalThis as { navigator?: { clipboard?: ClipboardLike } }).navigator
|
||||
return nav?.clipboard ?? null
|
||||
}
|
||||
|
||||
/**
|
||||
* 优先用异步剪贴板 API，失败或不存在时退回 execCommand。
|
||||
*
|
||||
* 两个坑：一是非安全上下文里 `navigator.clipboard` 直接是 `undefined`（不是抛错），
|
||||
* 二是即便存在，用户拒绝授权 / 文档失焦时 `writeText` 也会 reject——两种都要落到回退，
|
||||
* 而不是把「没复制成功」当成已复制提示给操作员。
|
||||
*/
|
||||
export async function copyText(text: string, deps: CopyDeps = {}): Promise<boolean> {
|
||||
const clipboard = 'clipboard' in deps ? deps.clipboard : navigatorClipboard()
|
||||
if (typeof clipboard?.writeText === 'function') {
|
||||
try {
|
||||
await clipboard.writeText(text)
|
||||
return true
|
||||
} catch {
|
||||
// 落到下面的回退
|
||||
}
|
||||
}
|
||||
const fallback = deps.legacyCopy ?? legacyExecCopy
|
||||
try {
|
||||
return fallback(text)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/** 老式回退：造一个隐身 textarea 选中再 execCommand('copy')。 */
|
||||
function legacyExecCopy(text: string): boolean {
|
||||
const doc = (globalThis as { document?: Document }).document
|
||||
if (doc === undefined || doc.body === null || typeof doc.execCommand !== 'function') return false
|
||||
|
||||
const area = doc.createElement('textarea')
|
||||
area.value = text
|
||||
// aria-hidden + 定位到视口外 + 透明：既不改变布局，也不让移动端弹键盘。
|
||||
area.setAttribute('aria-hidden', 'true')
|
||||
area.style.position = 'fixed'
|
||||
area.style.top = '0'
|
||||
area.style.left = '0'
|
||||
area.style.opacity = '0'
|
||||
area.style.pointerEvents = 'none'
|
||||
doc.body.appendChild(area)
|
||||
|
||||
try {
|
||||
area.focus()
|
||||
area.select()
|
||||
area.setSelectionRange(0, area.value.length)
|
||||
return doc.execCommand('copy')
|
||||
} finally {
|
||||
// 无论成败都要摘掉临时节点：否则每点一次复制就在 body 里留一个隐身 textarea。
|
||||
area.remove()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import { test } from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
/**
|
||||
* 「局域网大屏」卡片的接线与文案。
|
||||
*
|
||||
* 组件本身没有 DOM 测试环境（仓库里只有「纯函数 + 源码断言」这一套），所以这里钉两件事：
|
||||
* 卡片必须出现的那几句原文，以及它只从 `adminApi.systemNetwork()` 拿地址——
|
||||
* 现场端口/路径改过时，页面里任何写死的 `19540` / `http://…/display` 都会生成一条假链接。
|
||||
*/
|
||||
|
||||
function jsonResponse(body: unknown, status = 200): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
}
|
||||
|
||||
let reply: () => Response = () => jsonResponse({ ok: true, data: null })
|
||||
|
||||
// 必须在导入被测模块之前装好：ApiClient 构造时就把当时的 fetch 绑进实例。
|
||||
globalThis.fetch = (async () => reply()) as typeof fetch
|
||||
|
||||
function respondWith(response: () => Response): void {
|
||||
reply = response
|
||||
}
|
||||
|
||||
const { ApiError, adminApi } = await import('../api/client')
|
||||
|
||||
const PAGE = readFileSync(new URL('../pages/DisplayPage.vue', import.meta.url), 'utf8')
|
||||
|
||||
test('卡片文案齐全：标题、一句话说明、复制反馈、扫码说明、空态', () => {
|
||||
assert.match(PAGE, /局域网大屏/)
|
||||
assert.match(PAGE, /在别的设备浏览器打开下面的地址，就是一块大屏/)
|
||||
assert.match(PAGE, /手机扫码直接打开/)
|
||||
assert.match(PAGE, /已复制/)
|
||||
assert.match(PAGE, /未检测到局域网地址（可能是没插网线 \/ 只有回环）/)
|
||||
})
|
||||
|
||||
test('链接本身就是可点的新窗口链接', () => {
|
||||
assert.match(PAGE, /<a class="lan-link" :href="item\.url" target="_blank" rel="noopener">/)
|
||||
})
|
||||
|
||||
test('页面的地址只来自 lanDisplayLinks()，不写死端口或路径', () => {
|
||||
assert.match(PAGE, /import \{ copyText, lanDisplayLinks \} from '\.\/lanDisplay'/)
|
||||
assert.match(PAGE, /lanDisplayLinks\(lanInfo\.value\)/)
|
||||
// 19540 一旦出现在页面里，就说明有人在拼地址时替服务端做了决定。
|
||||
assert.doesNotMatch(PAGE, /19540/)
|
||||
})
|
||||
|
||||
test('二维码只给第一个地址，且用的是矢量 SVG', () => {
|
||||
assert.match(PAGE, /v-if="index === 0 && lanQrSvg !== null"/)
|
||||
assert.match(PAGE, /import \{ encodeQr, qrToSvg \} from '@\/shared\/qrcode'/)
|
||||
assert.match(PAGE, /qrToSvg\(first\.url, \{ scale, margin: QR_MARGIN, ecc: 'M' \}\)/)
|
||||
})
|
||||
|
||||
test('复制按钮走 copyText（含非安全上下文回退），失败有提示', () => {
|
||||
assert.match(PAGE, /await copyText\(url\)/)
|
||||
assert.match(PAGE, /toast\.error\('复制失败'/)
|
||||
})
|
||||
|
||||
test('访客按只读说明拦住，不整页报错', () => {
|
||||
assert.match(PAGE, /只有登录后的录入员 \/ 管理员能查看局域网地址，当前为只读访客。/)
|
||||
// 提示必须由 computed 直接渲染：写成「挂载时把它复制进一个 ref」会在身份就绪后永远不清
|
||||
// （2026-09-12 真浏览器复现：管理员登录后卡片仍停在访客态，接口一次都没请求）。
|
||||
assert.match(PAGE, /<p v-if="lanGateReason !== null" class="notice">/)
|
||||
})
|
||||
|
||||
test('接口不可用时卡片给说明，页面照常渲染其它卡片', () => {
|
||||
assert.match(PAGE, /读不到局域网地址：/)
|
||||
// 读失败不能清空其它区域；卡片自己的提示条与在线大屏的提示条是两条独立通路。
|
||||
assert.match(PAGE, /lanProblem\.value =/)
|
||||
})
|
||||
|
||||
test('systemNetwork：403 不降级成示例地址', async () => {
|
||||
respondWith(() =>
|
||||
jsonResponse({ ok: false, error: { code: 'FORBIDDEN', message: '需要录入员及以上权限' } }, 403),
|
||||
)
|
||||
|
||||
await assert.rejects(
|
||||
() => adminApi.systemNetwork(),
|
||||
(error: unknown) => {
|
||||
assert.ok(error instanceof ApiError)
|
||||
assert.equal(error.code, 'FORBIDDEN')
|
||||
return true
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
test('systemNetwork：后端连不上时给示例地址，让示例模式也能看到卡片', async () => {
|
||||
respondWith(() => {
|
||||
throw new TypeError('fetch failed')
|
||||
})
|
||||
|
||||
const info = await adminApi.systemNetwork()
|
||||
|
||||
assert.equal(info.port, 19540)
|
||||
assert.equal(info.displayPath, '/display')
|
||||
assert.ok(info.addresses.length > 0)
|
||||
// 示例地址必须是私有段，不能是回环或公网地址。
|
||||
for (const address of info.addresses) {
|
||||
assert.match(address.ip, /^(10\.|192\.168\.|172\.(1[6-9]|2\d|3[01])\.)/)
|
||||
}
|
||||
})
|
||||
|
||||
test('systemNetwork：接口存在时按服务端下发的端口与路径透传', async () => {
|
||||
respondWith(() =>
|
||||
jsonResponse({
|
||||
ok: true,
|
||||
data: {
|
||||
port: 8080,
|
||||
displayPath: '/screen',
|
||||
adminPath: '/admin',
|
||||
addresses: [{ ip: '192.168.1.23', interface: 'eth0', family: 'ipv4' }],
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
const info = await adminApi.systemNetwork()
|
||||
assert.equal(info.port, 8080)
|
||||
assert.equal(info.displayPath, '/screen')
|
||||
})
|
||||
@@ -0,0 +1,38 @@
|
||||
import { test } from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
/**
|
||||
* 「局域网大屏」卡片的加载时机回归钉子。
|
||||
*
|
||||
* 真事故（2026-09-12 用真 Chromium + 真服务端复现）：`refreshLan()` 在挂载时跑，
|
||||
* 而 `auth` 是**异步**加载的 —— 那一刻 `auth.readOnly` 必然为 true，于是卡片把
|
||||
* 「当前为只读访客」写进 `lanProblem` 这个**普通 ref** 就返回了；等身份落定后
|
||||
* 没有任何东西再触发它，结果：
|
||||
* - 卡片永远停在访客态（管理员登录后也一样）；
|
||||
* - `/api/system/network` **一次都没被请求**。
|
||||
* 页面级测试在仓库里跑不起来（没有 jsdom / @vue/test-utils），所以这里退化成源码断言：
|
||||
* 钉住「gate 由 computed 直接渲染」+「gate 变 null 时会重跑加载」这两件事，
|
||||
* 防止以后重构又把它改回「写死进 ref 就完事」。
|
||||
*/
|
||||
const SOURCE = readFileSync(new URL('../pages/DisplayPage.vue', import.meta.url), 'utf8')
|
||||
|
||||
test('访客提示直接由 computed 渲染，不从 ref 里读（否则身份就绪后不会消失）', () => {
|
||||
assert.match(SOURCE, /<p v-if="lanGateReason !== null" class="notice">/, 'gate 必须直接绑 computed')
|
||||
assert.match(SOURCE, /const lanGateReason = computed\(/, 'gate 必须是 computed')
|
||||
// 反面：把 gate 写进 lanProblem 后就 return，是本事故的写法
|
||||
assert.doesNotMatch(
|
||||
SOURCE,
|
||||
/lanProblem\.value = lanGateReason\.value/,
|
||||
'不允许把 gate 写进 lanProblem：那是个普通 ref，身份就绪后不会自己清掉',
|
||||
)
|
||||
})
|
||||
|
||||
test('身份就绪（gate 变 null）时必须重跑一次加载', () => {
|
||||
assert.match(SOURCE, /watch\(lanGateReason,/, '必须 watch gate')
|
||||
assert.match(
|
||||
SOURCE,
|
||||
/watch\(lanGateReason,[\s\S]{0,200}?refreshLan\(\)/,
|
||||
'watch 的回调里必须调用 refreshLan()，否则接口永远不会被请求',
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,133 @@
|
||||
import { test } from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import type { NetworkInfo } from '@/shared'
|
||||
import { copyText, displayUrl, lanDisplayLinks } from '../pages/lanDisplay'
|
||||
|
||||
/**
|
||||
* 「局域网大屏」卡片的两条硬要求：
|
||||
* 1. 地址完全由服务端下发的 port / displayPath 拼出来——现场端口或路径改过时，
|
||||
* 前端写死的那个数会安静地生成一条打不开的链接；
|
||||
* 2. 复制在非安全上下文里也得成功。面板就是从 `http://192.168.x.x:19540` 打开的，
|
||||
* 那里 `navigator.clipboard` 是 undefined，必须退到 execCommand + 临时 textarea。
|
||||
*/
|
||||
|
||||
const NETWORK: NetworkInfo = {
|
||||
port: 19540,
|
||||
displayPath: '/display',
|
||||
adminPath: '/admin',
|
||||
addresses: [
|
||||
{ ip: '192.168.1.23', interface: 'eth0', family: 'ipv4' },
|
||||
{ ip: '10.0.8.7', interface: 'wlan0', family: 'ipv4' },
|
||||
],
|
||||
}
|
||||
|
||||
test('地址用服务端下发的端口与路径拼，不写死 19540 / /display', () => {
|
||||
assert.equal(displayUrl(NETWORK.addresses[0]!, NETWORK), 'http://192.168.1.23:19540/display')
|
||||
|
||||
// 换个端口与路径，拼出来必须跟着变。
|
||||
const custom: NetworkInfo = { ...NETWORK, port: 8080, displayPath: '/screen' }
|
||||
assert.equal(displayUrl(custom.addresses[0]!, custom), 'http://192.168.1.23:8080/screen')
|
||||
assert.deepEqual(
|
||||
lanDisplayLinks(custom).map((link) => link.url),
|
||||
['http://192.168.1.23:8080/screen', 'http://10.0.8.7:8080/screen'],
|
||||
)
|
||||
})
|
||||
|
||||
test('IPv6 地址加方括号，否则端口会被当成地址的一部分', () => {
|
||||
const info: NetworkInfo = { ...NETWORK, addresses: [{ ip: 'fe80::1', interface: 'eth0', family: 'ipv6' }] }
|
||||
assert.equal(displayUrl(info.addresses[0]!, info), 'http://[fe80::1]:19540/display')
|
||||
})
|
||||
|
||||
test('每个地址都摊成一条链接，顺序与服务端一致', () => {
|
||||
const links = lanDisplayLinks(NETWORK)
|
||||
assert.deepEqual(
|
||||
links.map((link) => link.ip),
|
||||
['192.168.1.23', '10.0.8.7'],
|
||||
)
|
||||
})
|
||||
|
||||
test('没地址时给空数组（页面据此显示空态）', () => {
|
||||
assert.deepEqual(lanDisplayLinks({ ...NETWORK, addresses: [] }), [])
|
||||
})
|
||||
|
||||
test('端口为 0 时给空数组，不拼 http://ip:0/display 这种点不开的链接', () => {
|
||||
assert.deepEqual(lanDisplayLinks({ ...NETWORK, port: 0 }), [])
|
||||
})
|
||||
|
||||
test('复制：navigator.clipboard 不存在时走到 execCommand 回退', async () => {
|
||||
const seen: string[] = []
|
||||
const ok = await copyText('http://192.168.1.23:19540/display', {
|
||||
clipboard: null, // 非安全上下文里就是这个值
|
||||
legacyCopy: (text) => {
|
||||
seen.push(text)
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
assert.equal(ok, true)
|
||||
assert.deepEqual(seen, ['http://192.168.1.23:19540/display'])
|
||||
})
|
||||
|
||||
test('复制：clipboard 存在但被拒绝（writeText reject）时也走到回退', async () => {
|
||||
let legacyCalls = 0
|
||||
const ok = await copyText('addr', {
|
||||
clipboard: {
|
||||
writeText: () => Promise.reject(new Error('NotAllowedError')),
|
||||
},
|
||||
legacyCopy: () => {
|
||||
legacyCalls++
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
assert.equal(ok, true)
|
||||
assert.equal(legacyCalls, 1)
|
||||
})
|
||||
|
||||
test('复制：clipboard 成功时不该再走回退', async () => {
|
||||
const written: string[] = []
|
||||
let legacyCalls = 0
|
||||
const ok = await copyText('addr', {
|
||||
clipboard: {
|
||||
writeText: async (text) => {
|
||||
written.push(text)
|
||||
},
|
||||
},
|
||||
legacyCopy: () => {
|
||||
legacyCalls++
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
assert.equal(ok, true)
|
||||
assert.deepEqual(written, ['addr'])
|
||||
assert.equal(legacyCalls, 0)
|
||||
})
|
||||
|
||||
test('复制：两条路都不通时返回 false，不谎报成功', async () => {
|
||||
assert.equal(await copyText('addr', { clipboard: null, legacyCopy: () => false }), false)
|
||||
assert.equal(
|
||||
await copyText('addr', {
|
||||
clipboard: null,
|
||||
legacyCopy: () => {
|
||||
throw new Error('document.execCommand is not a function')
|
||||
},
|
||||
}),
|
||||
false,
|
||||
)
|
||||
// node 里既没有 navigator.clipboard 也没有 document：不能抛异常。
|
||||
assert.equal(await copyText('addr', { clipboard: null }), false)
|
||||
})
|
||||
|
||||
const SOURCE = readFileSync(new URL('../pages/lanDisplay.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('回退实现真的用临时 textarea + execCommand，并且会把 DOM 清理干净', () => {
|
||||
assert.match(SOURCE, /doc\.execCommand\('copy'\)/)
|
||||
assert.match(SOURCE, /doc\.createElement\('textarea'\)/)
|
||||
assert.match(SOURCE, /doc\.body\.appendChild\(area\)/)
|
||||
// 不摘掉临时节点，每点一次复制就在 body 里留一个隐身 textarea。
|
||||
assert.match(SOURCE, /finally \{[\s\S]*area\.remove\(\)/)
|
||||
// 先 clipboard 后回退的顺序不能反：优先走异步剪贴板，失败才退。
|
||||
assert.match(SOURCE, /await clipboard\.writeText\(text\)/)
|
||||
})
|
||||
Reference in new issue
Block a user