'use strict' const os = require('os') const { BrowserWindow, screen } = require('electron') const SELECTION = { ALL_SECONDARY: 'all-secondary', ALL: 'all', SPECIFIED: 'specified' } // 大屏窗口管理:按显示器枚举结果开窗,绝不写死坐标。 // 坐标一律用 DIP(display.bounds),页面内部再用 CSS 缩放适配,两边互不干扰。 class DisplayManager { constructor({ values, server, log }) { this.display = values.display this.server = server this.log = log this.enabled = false this.single = true this.boundSingle = null this.windows = new Map() // displayId -> { win, page, reloadTimer } this.screenListeners = [] this.layoutTimer = null } enable() { if (this.enabled) return this.enabled = true this.layout() } pageFor(index) { const pages = Array.isArray(this.display.pages) && this.display.pages.length ? this.display.pages : ['standings'] // 单屏没有编排可言,固定锁第一页(默认总积分榜) if (this.single) return pages[0] return pages[index % pages.length] } pickDisplays() { const all = screen.getAllDisplays() const primary = screen.getPrimaryDisplay() // 单屏机器上谈「扩展屏编排」没有意义,直接窗口化 if (all.length <= 1) return { single: true, displays: all.slice(0, 1) } const selection = this.display.selection || SELECTION.ALL_SECONDARY let picked if (selection === SELECTION.ALL) { picked = all.slice() } else if (selection === SELECTION.SPECIFIED) { picked = this.pickSpecified(all) } else { picked = this.pickSecondary(all, primary) } // 只有整机就一块屏时才是「单屏测试模式」;笔记本 + 一块扩展屏属于多屏场景, // 扩展屏要正常 kiosk,不能退化成窗口化 if (!picked.length) return { single: true, displays: [primary] } return { single: false, displays: picked } } // 默认策略是「除内置屏外的每块屏」(doc 06 §6.2)。用 display.internal 判断, // 而不是拿主屏当替身:现场常把主屏设成外接 HDMI,用主屏排除会把 kiosk 开到笔记本屏。 // 全部屏都报 internal=false 时(纯台式机)退回「排除主屏」的旧口径。 pickSecondary(all, primary) { const external = all.filter((item) => item.internal === false) if (external.length && external.length < all.length) return external return all.filter((item) => item.id !== primary.id) } // displays 配置里可以写 display.id,也可以写 0 起的序号 pickSpecified(all) { const wanted = Array.isArray(this.display.displays) ? this.display.displays : [] const picked = [] for (const key of wanted) { const match = typeof key === 'number' ? all.find((item) => item.id === key) || all[key] : all.find((item) => String(item.id) === String(key)) if (match && !picked.includes(match)) picked.push(match) } return picked } layout() { if (!this.enabled) return const { single, displays } = this.pickDisplays() this.single = single this.bindScreenListeners(single) const wanted = new Set(displays.map((item) => item.id)) for (const [displayId, entry] of [...this.windows]) { if (!wanted.has(displayId)) { this.destroyEntry(displayId, entry) } } displays.forEach((display, index) => { const page = this.pageFor(index) const existing = this.windows.get(display.id) if (existing) { this.applyGeometry(existing.win, display, single) if (existing.page !== page) { existing.page = page this.loadPage(existing, display, page, single) } return } this.windows.set(display.id, this.createWindow(display, index, single, page)) }) this.log.push('console', `大屏排布完成:${single ? '单屏窗口化' : `多屏 kiosk × ${displays.length}`},显示器 ${displays.map((d) => d.id).join(', ')}`) } createWindow(display, index, single, page) { const bounds = display.bounds const win = new BrowserWindow({ ...this.geometryFor(display, single), show: false, // 窗口化模式由页面自绘标题栏(与应用其它窗口同风格),保留原生边框会多出一条标题栏; // 多屏 kiosk 本来就不要边框 frame: false, // 与 Console 主窗口同一套兜底:个别平台会忽略 frame:false titleBarStyle: 'hidden', kiosk: !single && this.display.kiosk !== false, autoHideMenuBar: true, backgroundColor: this.display.backgroundColor || '#000000', title: `大屏 · ${page}`, webPreferences: { contextIsolation: true, nodeIntegration: false, sandbox: true, // 大屏常年在后台焦点之外,默认节流会冻结动画和定时器 backgroundThrottling: false } }) // 大屏页零交互控件;窗口层再兜一道,防止现场误触鼠标 if (!single && this.display.ignoreMouse !== false) { win.setIgnoreMouseEvents(true) } // F11 只在单屏模式下有意义(现场调试用),多屏 kiosk 不允许切走 if (single) { win.webContents.on('before-input-event', (event, input) => { if (input.type === 'keyDown' && input.key === 'F11') { event.preventDefault() win.setFullScreen(!win.isFullScreen()) } }) } win.once('ready-to-show', () => { if (!win.isDestroyed()) win.show() }) win.webContents.on('render-process-gone', (_event, details) => { this.log.push('console', `大屏渲染进程异常(display=${display.id},${details.reason}),将重载`) if (!win.isDestroyed()) win.webContents.reload() }) const entry = { win, page, reloadTimer: null } // 无人值守跑 24h 以上,定时重载兜底内存与连接泄漏 const hours = Number(this.display.reloadEveryHours) || 0 if (hours > 0) { entry.reloadTimer = setInterval(() => { if (!win.isDestroyed()) win.webContents.reload() }, hours * 3600 * 1000) } this.applyGeometry(win, display, single) this.loadPage(entry, display, page, single) this.log.push('console', `打开大屏窗口 display=${display.id} bounds=${bounds.width}x${bounds.height}@${bounds.x},${bounds.y} page=${page}`) return entry } geometryFor(display, single) { const bounds = display.bounds if (!single) return { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height } // 单屏窗口化:不铺满,留出边距方便看管理窗口和调试 const width = Math.round(bounds.width * 0.8) const height = Math.round(bounds.height * 0.8) return { x: bounds.x + Math.round((bounds.width - width) / 2), y: bounds.y + Math.round((bounds.height - height) / 2), width, height } } applyGeometry(win, display, single) { if (!win || win.isDestroyed()) return if (single) { if (win.isKiosk()) win.setKiosk(false) if (win.isFullScreen()) win.setFullScreen(false) } else if (this.display.kiosk !== false) { win.setKiosk(true) } win.setBounds(this.geometryFor(display, single)) } loadPage(entry, display, page, single) { if (!entry || !entry.win || entry.win.isDestroyed()) return const url = this.urlFor(display, page, single) this.log.push('console', `大屏加载 ${url}`) entry.win.loadURL(url).catch((err) => { // 服务端还没起来时加载失败是正常的,健康检查通过后会重排重载 this.log.push('console', `大屏加载失败(display=${display.id}):${err.message}`) }) } urlFor(display, page, single) { const params = new URLSearchParams() params.set(this.display.pageParam || 'page', page) // lock=1 告知页面锁死单页,不参与轮播 params.set('lock', '1') params.set('screen', String(display.id)) params.set('instance', `${os.hostname()}-${display.id}`) // 只有单屏窗口化才画标题栏;多屏 kiosk 全屏无人值守,不能占高度 if (single) params.set('windowed', '1') return `http://127.0.0.1:${this.server.port}/display?${params.toString()}` } // 单屏模式要「行为冻结」:不跟随屏幕变化重排,所以连监听都不挂 bindScreenListeners(single) { if (this.screenListeners.length && this.boundSingle === single) return this.unbindScreenListeners() this.boundSingle = single if (single) return const schedule = () => { if (this.layoutTimer) clearTimeout(this.layoutTimer) // 分辨率/缩放变化会连续触发多次,防抖后再重排 this.layoutTimer = setTimeout(() => { this.layoutTimer = null this.layout() }, 600) } screen.on('display-metrics-changed', schedule) screen.on('display-added', schedule) screen.on('display-removed', schedule) this.screenListeners = [ ['display-metrics-changed', schedule], ['display-added', schedule], ['display-removed', schedule] ] } unbindScreenListeners() { for (const [event, handler] of this.screenListeners) { screen.removeListener(event, handler) } this.screenListeners = [] } destroyEntry(displayId, entry) { if (entry.reloadTimer) clearInterval(entry.reloadTimer) if (entry.win && !entry.win.isDestroyed()) entry.win.destroy() this.windows.delete(displayId) this.log.push('console', `关闭大屏窗口 display=${displayId}`) } relayout() { if (!this.enabled) return for (const [, entry] of this.windows) { if (entry.win && !entry.win.isDestroyed()) entry.win.webContents.reload() } this.layout() } getInfo() { return [...this.windows.entries()].map(([displayId, entry]) => ({ displayId, page: entry.page, url: entry.win && !entry.win.isDestroyed() ? entry.win.webContents.getURL() : '', bounds: entry.win && !entry.win.isDestroyed() ? entry.win.getBounds() : null })) } closeAll() { if (this.layoutTimer) clearTimeout(this.layoutTimer) this.unbindScreenListeners() for (const [displayId, entry] of [...this.windows]) { this.destroyEntry(displayId, entry) } this.enabled = false } } module.exports = { DisplayManager, SELECTION }