企业官网建设流程全解析

• 桌面应用
• 移动开发
• 开发工具

设备窗口编排是 Escrcpy 中面向多设备管理与屏幕空间优化的高级功能，它提供全屏可视化的拖拽编辑界面，让用户能够精确控制每个设备镜像窗口的位置、尺寸与整体布局。通过本文，你将掌握编排界面的启动方式、全局配置组件与设备窗口组件的添加规则、窗口拖拽与缩放的操作细节、布局的保存/重置/清理流程，以及布局配置在scrcpy.global与scrcpy.[设备ID]配置节点中的存储与应用机制，从而为多设备协同工作流搭建个性化的操作环境。

功能概述

窗口编排功能以全屏可视化编辑界面为核心，允许用户同时完成以下操作：

• 同时管理多个设备窗口的布局
• 通过拖拽方式调整窗口位置和尺寸
• 设置全局默认配置和设备特定配置
• 实时预览窗口布局效果
• 保存和加载自定义布局方案

该功能在代码层面由 arrange-dialog 组件 实现，它承载了全部编排逻辑，并通过多个 composable（useAutoArrange、useDeviceManagement、useDialogManagement、useLayoutManagement、useSaveLayout、useWidgetEvents、useWidgetManagement）拆分为职责清晰的模块。用户通过主界面右上角的「窗口编排」按钮即可进入该全屏编排界面，对应入口位于 quick-bar 的 arrange 组件。

核心组件

编排界面中有两类核心组件，它们对应着两套不同的配置作用域。

全局配置组件

全局配置组件用于设置所有设备的默认窗口参数，包括：

• 默认窗口宽度和高度
• 默认窗口位置坐标
• 其他通用窗口属性

在实现中，全局组件以type: 'global'标记，其配置存储于scrcpy.global配置节点。从 useLayoutManagement.js 的loadLayout逻辑可以看出，只有当scrcpy.global中同时存在--window-width与--window-height时，全局组件才会被加载到编排区域。每个编排方案中只能存在一个全局配置组件——addWidget在command === 'global'时会先检查hasGlobalWidget，若已存在则弹出提示并拒绝重复添加（见 useWidgetManagement.js）。

设备窗口组件

每个已连接的设备都可以添加为独立的窗口组件，支持：

• 独立的位置和尺寸设置
• 设备特定的窗口配置（存储于scrcpy.[设备ID]）
• 继承或覆盖全局配置

设备组件以type: 'device'标记，通过deviceId关联具体设备。添加设备窗口时，系统会尝试读取设备的屏幕分辨率（device.screenWidth/device.screenHeight）来确定窗口的初始宽高比，并据此设置lockAspectRatio锁定宽高比（见addWidget与scaleDeviceScreenSize的实现）。

详细操作指南

启动窗口编排

1. 通过主界面启动
   • 在主界面右上角找到「窗口编排」按钮
   • 点击该按钮进入窗口编排界面
   • 系统将打开全屏的窗口编排界面

进入后，编排对话框以全屏（fullscreen）模式渲染，内部由arrangement-area与虚线边框的screen-container构成编排画布，未添加任何组件时画布中央会显示空状态占位（AppEmpty）。

添加和管理组件

添加全局配置组件

1. 点击「添加组件」下拉按钮
2. 选择「全局配置」选项
3. 全局配置组件将出现在编排区域
4. 该组件用于设置所有设备的默认参数

注意：每个编排方案中只能有一个全局配置组件。当下拉菜单中「全局配置」被添加过后，该选项会进入disabled状态。

添加设备窗口组件

1. 点击「添加组件」下拉按钮
2. 从设备列表中选择要添加的设备
3. 设备窗口组件将添加到编排区域
4. 每个设备只能添加一次

设备显示规则（对应 useDeviceManagement.js 与availableDevices计算属性）：

• 只显示当前已连接的设备，数据通过deviceStore.getList()加载
• 已添加的设备不会在下拉列表中重复显示——availableDevices会过滤掉已编排的设备 ID
• 设备名称优先显示自定义名称，其次为设备型号（device.name || device.model?.split(':')[1] || device.id）

窗口布局调整

移动窗口位置

1. 选择目标窗口：点击要移动的窗口组件
2. 拖拽移动：按住鼠标左键拖拽窗口到目标位置
3. 实时反馈：拖拽过程中可以看到实时的位置变化
4. 释放定位：松开鼠标完成位置调整

窗口的拖拽与缩放由vue-draggable-resizable库驱动（见 index.vue）。拖拽与缩放过程中触发@dragging/@resizing事件做实时反馈，松手后通过@drag-stop/@resize-stop事件把最终结果换算回“真实屏幕坐标”（realX/realY/realWidth/realHeight）并写回组件状态。

调整窗口尺寸

1. 定位调整点：将鼠标移动到窗口的边角位置
2. 拖拽调整：按住鼠标左键拖拽来改变窗口大小
3. 比例约束：系统会自动维持合理的窗口比例
4. 最小尺寸限制：窗口不能小于预设的最小尺寸

当设备存在屏幕分辨率信息时，组件会开启lock-aspect-ratio，确保缩放过程中窗口宽高比与设备屏幕保持一致。

尺寸限制说明

• 最小宽度：容器宽度的 1/6
• 最小高度：容器高度的 1/4
• 边界约束：窗口不能拖拽到编排区域外部（VueDraggableResizable设置了:parent="true"，限制在画布内移动）
• 重叠处理：允许窗口重叠，但建议避免完全遮挡

在实现层，index.vue 还定义了像素级兜底约束：minWidth = 48、minHeight = 24，作为vue-draggable-resizable的最小尺寸下限，配合画布比例限制共同约束窗口尺寸。

精确数值输入

除了鼠标拖拽，编排界面还提供数值精调能力。悬停窗口中央会显示当前宽 × 高与X, Y坐标，点击后弹出表单（见 widget-rect/index.vue），可分别输入 W / H / X / Y 四个数值，确认后通过scaleConverter换算为画布坐标并即时生效，适合对多窗口对齐要求较高的场景。

自动网格排列

编排界面底部工具栏还提供了「网格选择器」（GridPicker），选择cols × rows网格后触发autoArrange（见 useAutoArrange.js）：

• 画布上尚无设备组件时，自动排列所有未放置的设备
• 画布上已有设备组件时，仅对已放置的设备按网格重新排布
• 全局配置组件永远不会被自动排列触碰
• 按网格单元计算每个设备的宽高，优先保持设备屏幕宽高比（scale = Math.min(cellRealW / dw, cellRealH / dh)），无屏幕信息时填充单元 80% 大小，并将设备居中于单元内
• 超出网格容量的设备会被静默忽略

该能力对「一键整理多设备窗口」场景非常实用，是文档未展开但源码明确支持的高阶操作。

布局管理操作

重置布局

1. 点击控制面板中的「重置布局」按钮
2. 系统将清除当前所有组件
3. 重新加载保存的布局配置
4. 如果没有保存的配置，将显示空白编排区域

resetLayout的本质是重新执行loadLayout()：清空arrangedWidgets，再从scrcpy.global与各scrcpy.[设备ID]节点重新读取配置生成组件。

清除全部组件

1. 点击「清除全部」按钮
2. 系统将弹出确认对话框（ElMessageBox.confirm）
3. 确认后将移除所有窗口组件
4. 编排区域将变为空白状态

值得注意的是，清除操作并非立即写入配置：被清除的组件会先被标记进removedWidgets列表，只有在最终点击「保存布局」时才会真正清理对应配置（见下文存储机制）。

删除单个组件

1. 将鼠标悬停在目标窗口组件上
2. 点击窗口右上角的删除按钮（×）
3. 该组件将立即从编排区域移除
4. 对应的设备将重新出现在可添加列表中

删除同样通过markWidgetAsRemoved记录待清理项；若误删后重新添加同一设备，会通过unmarkWidgetAsRemoved撤销清理标记，避免保存时误删配置（见 useWidgetManagement.js）。

配置保存和应用

保存布局配置

1. 完成布局调整：确保所有窗口组件都已调整到满意的位置和尺寸
2. 点击保存按钮：点击界面底部的「保存布局」按钮
3. 配置写入：系统将当前布局信息写入配置文件
4. 成功反馈：显示保存成功的消息提示

保存流程由 useSaveLayout.js 实现，其写入逻辑如下（对当前画布上每个组件）：

const rectConfig = { '--window-width': Math.round(widget.realWidth), '--window-height': Math.round(widget.realHeight), '--window-x': Math.round(widget.realX), '--window-y': Math.round(widget.realY), } const scope = widget.type === 'global' ? 'global' : widget.deviceId const scopeConfig = { ...scrcpy[scope] || {}, ...rectConfig } window.$preload.store.set(['scrcpy', scope], scopeConfig)

配置存储机制

• 全局配置：存储在scrcpy.global配置节点
• 设备配置：存储在scrcpy.[设备ID]配置节点
• 参数格式（均为 scrcpy 标准命令行参数，取值会取整为整数）：
  • --window-width：窗口宽度
  • --window-height：窗口高度
  • --window-x：窗口 X 坐标
  • --window-y：窗口 Y 坐标

保存时还有一层隐式清理逻辑：对于本次从画布上删除的组件，系统会从对应scrcpy.global或scrcpy.[设备ID]节点中删除上述四个窗口参数，实现“布局删除与配置清理”的同步，避免残留配置影响下次镜像启动。

窗口参数模型

除了位置与尺寸四个核心参数，窗口配置节点还支持更多 scrcpy 窗口相关参数（见 窗口偏好模型），均属于scrcpy字段下的子配置：

这些参数说明窗口编排保存的不仅是几何信息，还能与偏好设置中的窗口选项联动，共同决定镜像窗口的呈现方式。

配置应用时机

• 启动镜像时：设备开始镜像时自动应用对应的窗口配置，位置与尺寸会作为 scrcpy 启动参数传入
• 配置继承：设备特定配置优先，未设置的参数继承全局配置
• 动态更新：保存配置后立即生效，无需重启应用——保存完成后会调用preferenceStore.init()重新初始化偏好配置，保证后续启动镜像时读取到最新布局

坐标换算机制

编排界面中存在两套坐标系：真实屏幕坐标（realX/realY/realWidth/realHeight，即最终写入配置的数值）与画布显示坐标（x/y/width/height，即渲染像素）。二者通过 use-scale-screen 提供的scaleConverter互相转换：加载布局时把配置值换算为画布像素（useLayoutManagement.createWidgetFromConfig），拖拽/缩放结束或精确输入确认时再换算回真实值（useWidgetEvents与widget-rect）。这也是为什么拖拽过程中可以实时看到窗口位置变化，而保存的却是与实际窗口尺寸一致的绝对值。

故障排除

常见问题

问题1：设备不显示在添加列表中

• 确认设备已正确连接，设备数据来源于设备存储（deviceStore.getList()），未连接设备不会出现在下拉菜单
• 检查设备是否已经添加到编排中——已添加设备会被availableDevices过滤
• 尝试关闭编排界面重新进入，或在设备页面刷新设备列表后重试

问题2：窗口拖拽不响应

• 确认鼠标点击在窗口的可拖拽区域（窗口标题栏及主体区域）
• 检查是否有其他程序占用鼠标事件
• 尝试重新打开编排界面

问题3：保存的布局没有生效

• 确认点击了「保存布局」按钮——仅调整组件而不保存不会写入配置
• 检查配置文件是否有写入权限
• 尝试重启应用后再次测试
• 注意：若在删除组件后未保存，相关设备的旧窗口配置仍会保留在scrcpy.[设备ID]节点中，下次镜像仍会按旧配置定位

问题4：窗口尺寸异常

• 检查是否超出了最小尺寸限制（画布比例限制与像素级 48×24 下限）
• 确认显示器分辨率设置正确
• 尝试重置布局后重新配置

小结

设备窗口编排功能将 Escrcpy 的多设备管理从“多次手动拉窗”升级为“一次编排、持久生效”：通过全屏拖拽画布、全局/设备两级配置作用域、精确数值输入与自动网格排列，用户可以把多台设备的镜像窗口一次性摆放到理想位置，并由系统持久化到scrcpy.global与scrcpy.[设备ID]配置节点中。合理使用该功能，可以显著提高多设备管理的效率，创建适合自己工作流程的个性化操作环境。

• 桌面应用
• 移动开发
• 开发工具