# electron-desktop

**Repository Path**: marvinma/electron-desktop

## Basic Information

- **Project Name**: electron-desktop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-28
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron 多屏幕窗口弹出测试项目

## 1. 项目目的

本项目是一个技术演示（Demo），旨在实现和测试在多显示器（多屏幕）环境下，Electron 应用如何精确地在用户指定的目标屏幕上弹出新的子窗口。

核心功能点：
- 主窗口提供一个界面，允许用户查看所有当前连接的显示器。
- 用户可以在主窗口选择一个目标显示器。
- 点击按钮后，应用会创建一个新的子窗口，并确保该窗口出现在用户所选择的那个显示器上。

## 2. 技术实现

本项目基于现代前端技术栈构建，手动集成了以下核心技术：

- **核心框架**: `electron@22.0.0`
- **UI 框架**: `react@^18.2.0`
- **UI 组件库**: `antd@^5.17.2`
- **构建工具**: `webpack`，用于打包 React 渲染进程和 Electron 主进程代码。
- **打包与分发**: `electron-builder@23.6.0`，用于将应用打包成可执行文件（如 `.dmg` 或 `.exe`）。
- **开发脚本**: 使用 `concurrently` 和 `wait-on` 协同运行 Webpack 开发服务器和 Electron 应用，以实现热重载和高效开发。

## 3. 已知限制：关于显示器序号

在实现“指定屏幕”功能时，我们遇到了一个由 Electron API 自身决定的重要限制：

**Electron 的 `screen` 模块无法直接获取到操作系统（如 Windows 的“显示设置”或 macOS 的“排列”）中显示给用户的那个序号标识（例如 “1”、“2”）。**

`screen.getAllDisplays()` API 返回的显示器数组顺序也**不保证**与操作系统设置中的顺序完全一致。

为了解决这个问题，本项目采用了 Electron 官方推荐的、最稳健的实现方式：
- **内部逻辑**: 程序通过每个显示器唯一的、由系统分配的 `display.id` 来进行精确识别和定位。
- **用户界面 (UI)**: 为了帮助用户区分不同的屏幕，下拉选择菜单中会显示每个屏幕的 **分辨率** 和 **是否为主显示器** 的信息（例如 `Screen 1 (1920x1080) [Primary]`）。

这确保了功能在所有平台（Windows, macOS, Linux）上都能可靠、一致地工作，即使用户无法通过操作系统的显示序号来选择，也能通过分辨率等信息准确地选中目标屏幕。

## 4. 效果演示

点击下方链接查看项目运行的效果视频：

[查看演示视频](./electron弹窗指定屏幕.mp4)