为什么竞技预测平台需要 Electron 桌面端
在实时性要求极高的竞技预测与数字娱乐场景中，浏览器的沙箱机制和多标签页切换延迟往往会成为用户体验的瓶颈。Electron 将 Chromium 与 Node.js 融合，允许同一套 JavaScript 代码直接操纵操作系统能力——文件读写、系统托盘、短连接 HTTP 服务器等。对于同时面向操盘手、风险管理员和终端投注用户的多设备矩阵而言，Electron 提供了统一的开发栈和按需分发的二进制包，避免了为不同角色维护多套原生代码的巨大成本。
产品一：面向用户的桌面应用（app_user）
该应用直接分发给高频竞技预测用户，目标是提供媲美原生客户端的速度与交互。
原生桌面体验
通过 BrowserWindow 的透明无边框模式 搭配自定义标题栏，应用视觉完全由前端 CSS 控制，消失的 Windows 原生边框让界面更像一个沉浸式工作台。结合 preload 脚本 暴露受限的 IPC 通道，既保证了 DOM 访问安全，又能让渲染进程调用文件对话框、本地通知等原生 API。
系统托盘集成
即使窗口关闭，应用程序仍然以托盘图标形式驻留在系统通知区域。利用 Electron 的 Tray 模块 实现实时赛事提醒：当有重要赔率变动或赛果结算时，托盘气泡会弹出摘要，右键菜单提供“打开主面板”、“快速投注”、“静默模式”等快捷操作。托盘状态同步采用主进程维护一个单例状态的模式，防止多次点击引发窗口叠加。
多窗口交易界面
不同于传统标签页，用户可拖拽分离出独立的实时赛果预测盘口窗口、资金流水窗口和历史记录窗口。所有窗口共享同一个主进程内建的内存数据库（如 better-sqlite3 的只读连接），避免 IPC 大数据序列化。窗口布局支持保存与恢复，主进程通过 BrowserWindow.setBounds() 在应用启动时自动还原上次的多屏排列。
本地 HTTP 服务器——端口 80 复用
app_user 内置一个轻量级 Node.js HTTP 服务器监听 127.0.0.1:80。其作用并非对外暴露服务，而是拦截本机对特定域名的请求，从而在无互联网环境下也能响应静态资源。例如，当渲染进程加载 https://local.app/api/odds 时，通过修改系统的 hosts 文件或代理规则将请求引向本地 80 端口，由主进程的 express 路由直接返回从 WebSocket 长连接中缓存的赔率数据。这种做法使得即使在网络闪断时，界面仍然能够保留上一次拉取的快照，实现了 离线可读数据 的假象——真正的下单指令会暂存队列，待网络恢复后自动发送。
桌面应用内的浏览器 UI
主界面由 BrowserView 嵌入一个经过性能优化的 React 单页应用，路由之间使用 <webview> 隔离不同业务模块。每个 webview 赋予独立的 partition，使得 Cookie 和本地存储天然隔离，防止不同盘口间的状态污染。同时，Node.js 主进程通过 session.webRequest.onBeforeRequest 拦截所有外链，确保第三方跟踪脚本不会离开桌面环境，有效降低信息泄露风险。
产品二：管理端桌面应用（app_admin）
管理操作为独立应用，严格与用户端分离，提供更高权限的后台能力。
操盘手管理仪表盘
页面基于 React + Ant Design，通过主进程管理的单一 WebSocket 连接推送实时交易量、用户活跃度和异常预警。管理员可同时打开多个 BrowserWindow，例如一个用于监控全局大盘，另一个用于审核提现请求。窗口间通讯使用主进程的 MessagePorts，实现毫秒级数据同步，无需走网络栈。
内置图像处理能力（Sharp 库）
得益于 Node.js 环境，app_admin 直接集成了高性能图像处理库 sharp。运营人员上传赛事封面或广告横幅时，图片在本地主进程内完成压缩、裁剪、格式转换（WebP），无需上传到远程服务器预处理，既减少了带宽消耗，又提升了操作响应速度。sharp 基于 libvips，处理 4K 图片也远快于浏览器 canvas 方案。
本地 HTTP 服务器——端口 81
管理端开启 127.0.0.1:81 的本地服务。除了充当管理端自身的静态资源服务器外，它还承载一套 RESTful API，供同局域网内经过白名单授权的其他调试设备（如平板）访问管理数据。所有 API 强制使用自签 TLS 证书加密，并结合 Electron 的 certificate-error 事件自动信任，在保证内网安全的同时提供了便捷的多屏监控能力。
需要多设备平台：面向用户和管理员的Electron桌面应用方案？联系我们获取免费咨询。
产品三：营销网站（app_Website）
营销站独立打包为一个轻量级 Electron 包装，但本质是 Express.js 静态站点。
Express.js 静态站点（端口 82）
启动后，本地 82 端口托管预渲染好的 HTML 页面，包含 SEO 元标记和结构化数据。这样做是为了让运营人员在离线环境（如展会）也能用笔记本向客户展示产品。站点内容通过 Git 子模块管理，Electron 主进程在启动时 自动拉取最新的静态资源包，并 reload 页面。
Cloudflare CDN 集成
当设备联网时，app_Website 的渲染进程会通过 <link rel="preconnect"> 预连接 Cloudflare CDN，动态加载最新的营销素材（动画、视频）。本地服务器作为 fallback，CDN 失效时无缝切换，保证演示不中断。
SEO 优化的内容分发
虽然 Electron 本身不参与搜索引擎抓取，但本地产出的静态网站可以被部署到线上，并且已经在本地验证了核心网页指标（LCP、CLS）。这种“先本地验证、再云端上线”的模式提升了 SEO 迭代效率。
Electron 相比纯 Web 方案的优势
- 更好的性能：独立渲染进程分担负载，长列表虚拟滚动结合主进程内存缓存，避免浏览器垃圾回收导致的掉帧。
- 离线能力：利用 Service Worker 缓存静态资产，结合本地 SQLite 实现关键数据离线读写；网络恢复后自动冲突合并。
- 系统级集成：快捷键全局注册、原生通知、Dock 菜单徽标（未读消息数），这些 Web 无法直接提供的功能极大提升用户粘性。
- 增强安全（本地服务器）：敏感操作（如签名、加密）全部在 Node.js 主进程完成，渲染进程仅获取结果。流量不经过公网，杜绝中间人攻击。
部署：操盘手如何安装与运行
我们交付的是一套完整的 Electron 多应用构建流水线。PM 通过 CI 生成三个对应的 .exe / .dmg / .AppImage 包，并上传到内部下载门户。管理员首次启动 app_admin 时，需要输入一次性激活码，该码会绑定本机机器指纹（基于 MAC 地址与主板序列号的哈希），激活后公钥写入本地 keystore，此后每次与服务端通讯都使用双向 TLS 认证。面向用户的 app_user 则采用静默安装策略，配合自动更新模块 electron-updater，从对象存储拉取差分包，增量升级。
所有应用启动时分别占用 80、81、82 端口，若端口冲突，主进程会尝试端口 +1 递增，并在 UI 状态栏给出提示。整体架构围绕“本地优先、云端兜底”设计，确保竞技预测业务 7×24 小时不间断。
常见问题：Electron 平台
| 问题 | 解答 |
|---|---|
| Electron 应用体积过大怎么办？ | 使用 electron-builder 的 zstd 压缩，安装包控制在 70 MB 以内；首次启动后动态拉取平台相关的原生模块，减少初始体积。 |
| 如何防止本地服务器被滥用？ | 每个本地服务只监听 127.0.0.1，且验证请求头中的自定义 token（由主进程生成随机密钥并写入渲染进程的全局变量）。 |
| 多窗口会不会耗尽内存？ | 通过 same-origin 资源共享 和窗口池复用机制，超过 5 个窗口时将非活动窗口渲染进程挂起（hidden-inset），内存控制在 200 MB 以内。 |