Electron 政务触控大屏：全屏、锁屏与超时回首页

政务大厅的触摸查询系统，核心不是功能堆叠，而是：大屏常开、误触可控、超时能自愈。我在多个大厅项目里见过同一类事故：上一用户停在办事进度页，下一位误点「继续办理」；或者浏览器被误触退出全屏，前台找不到入口。触控端比普通 Web 更需要一套「永远可用」的交互纪律。

为什么用 Electron

大厅环境网络与浏览器版本不可控。Electron 可以把触控端打包成桌面应用：全屏启动、禁掉系统手势、固定缩放，减少「用户把地址栏点出来」这类事故。React 负责页面，主进程负责窗口策略与本地缓存，职责清晰，运维也只需维护一个安装包。

主进程必须管的事

• kiosk: true 或等价全屏策略，禁止 Alt+Tab 等快捷键（运维通道单独开放）
• 禁用右键菜单、文本选择、拖拽缩放
• 崩溃后自动重启，并写本地 crash log
• 开机自启与版本号上报，便于远程排查

交互纪律

1. 开机进全屏：首屏即首页，不暴露历史路由
2. 空闲超时回首页：建议 60–120 秒无触摸即重置，清空表单与登录态
3. 触摸热区加大：按钮高度按手指设计（常见 48px 以上），忌桌面鼠标尺寸
4. 弱网可降级：关键事项指南本地缓存，进度查询失败给明确文案，而不是无限 loading
5. 敏感页二次确认：涉及个人信息展示时，增加「我已离开」或自动遮罩

常见坑

• 只用 CSS 隐藏滚动条，用户仍可滑出空白区域——要在路由层拦截
• 超时只清 UI 不清内存，长时间运行会 OOM——回首页时释放大列表与图片缓存
• 运维通道和密码写在代码里——应走配置中心或本地加密文件

数据对接

事项与进度走服务端接口，触控端只做展示与引导。内容更新走后台 CMS，避免每次改文案都发版客户端。接口层建议加 CDN 或边缘缓存，大厅高峰时 DNS 和 TLS 握手也会成为瓶颈。

渲染进程里的细节

React 路由建议用 Hash 或受控 BrowserRouter，避免用户通过手势触发浏览器历史栈异常。大图与视频走懒加载，首页资源控制在可接受体积内。接口请求统一封装超时（例如十秒）与重试上限，重试期间展示「正在查询」而不是空白页。若需展示办事二维码，生成后应在回首页时销毁 canvas 与临时链接，减少信息残留风险。

运维与现场交付

现场安装我会预留「维护模式」：长按角落热区五秒进入，需运维口令才能退出全屏或切换服务器地址。每台终端贴资产编号，启动时上报版本与编号，方便和工单系统关联。培训前台时强调：用户反馈「卡住了」先看是否停在非首页——多数情况是超时策略未生效或第三方页面被嵌进来。

交付检查清单

• [ ] 连续运行 8 小时无内存明显上涨
• [ ] 超时回首页后，上一用户输入不可见
• [ ] 断网 30 秒后，本地指南仍可浏览
• [ ] 运维快捷键仅在维护模式生效
• [ ] 崩溃重启后自动回到首页

触控产品的体验分，往往打在「不会卡住」上，而不是「动画炫不炫」。把纪律写进主进程和路由守卫，比事后培训前台更有效。

小结

政务触控端的第一目标是大厅场景下的长期可用：全屏纪律、超时回首页、弱网降级与运维通道要在方案阶段就定死。内容更新走后台，客户端少发版，现场维护成本会低一个数量级。验收时务必用真实触摸与嘈杂网络环境压一遍。