ClawBot多显示器开发环境与大屏布局优化

在多显示器环境下，ClawBot用户常遇到的界面错位问题，往往严重影响工作效率。界面元素跑偏、窗口无法跨屏拖拽、工作区布局混乱——这些现象的背后，通常指向同一个核心症结：ClawBot的渲染层未适配多显示器的DPI缩放，或窗口管理策略缺乏跨屏感知能力。接下来，我们从几个关键环节入手，系统性地解决这一困扰。

启用Electron多显示器DPI适配与高分辨率缩放

ClawBot基于Electron框架开发，在高DPI多屏环境下，默认渲染行为可能忽略系统级的缩放差异，导致UI拉伸或截断。要彻底修复此问题，必须强制开启Chromium的多显示器DPI感知机制。

定位到ClawBot主进程的启动脚本（通常是main.js或src/main/index.js）。在app.whenReady()回调之前，添加以下两行关键代码：

app.commandLine.appendSwitch('high-dpi-support', 'true')
app.commandLine.appendSwitch('force-device-scale-factor', '1')

完成配置后，重启ClawBot即可使参数生效，实现多屏DPI自适应。

配置窗口初始位置与尺寸：实现跨屏边界覆盖

ClawBot默认的窗口初始化仅绑定单个屏幕坐标，自然无法感知多显示器区域。需要显式声明支持多屏显示，并让窗口尺寸覆盖主副屏的交界区域，这样工作区才能自由拖动到任意显示器上。

在窗口创建逻辑中找到new BrowserWindow({})，替换为以下优化后的配置：

{
  width: 1920,
  height: 1080,
  minWidth: 1280,
  minHeight: 720,
  frame: true,
  webPreferences: { nodeIntegration: true, contextIsolation: false },
  show: false
}

随后，在win.loadURL()后面添加win.maximize()或win.setBounds(screen.getPrimaryDisplay().workArea)，让窗口默认铺满主屏工作区，从而为跨屏拖拽奠定基础。

启用WebContents多显示器全屏渲染：突破单屏限制

当ClawBot内嵌的Web视图（如技能面板、仪表盘）需要跨屏显示时，必须解除Chromium对webkit-playsinline等属性的单屏限制，同时启用多显示器合成缓冲区。

在渲染进程（renderer.js或Vue/React组件）中找到webview或iframe节点，添加CSS样式：style="width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:9999;"。接着在主进程中监听screen-change事件：

screen.on('display-metrics-changed', (event, display, changedMetrics) => {
  if (changedMetrics.includes('scaleFactor') || changedMetrics.includes('bounds')) {
    win.webContents.send('refresh-display-config', screen.getAllDisplays());
  }
});

渲染进程中则监听该消息，并据此动态重置容器尺寸，实现无缝跨屏渲染。

禁用系统级窗口管理冲突：避免虚拟桌面与贴靠布局干扰

macOS Monterey+或Windows 11的虚拟桌面与贴靠布局功能，时常会劫持ClawBot的窗口状态，导致最大化异常或无法记住上次位置。需要通过原生API绕过系统窗口管理器的干预。

在BrowserWindow构造选项中添加：skipTaskbar: false, thickFrame: true。如果是macOS平台，追加titleBarStyle: 'hiddenInset'。Windows平台则需在app.whenReady()中执行：

const { net } = require('electron');
app.commandLine.appendSwitch('disable-features', 'CalculateNativeWinOcclusion');

重新打包应用后，验证窗口拖拽是否能够穿透所有显示器的边界，确保跨屏操作流畅无阻。

使用ClawBot CLI强制指定多屏渲染模式：无需修改源码

如果你的ClawBot版本为v0.8.2或更高，内置的CLI工具可直接在运行时注入多显示器渲染策略，无需修改源码即可切换渲染后端。

打开终端，进入ClawBot安装目录，执行以下命令：

npx clawdbot-cli --render-mode=multi-display --dpr=auto

如果需要固定主屏作为渲染锚点，可追加参数：--primary-display=0（索引从0开始）。观察控制台输出，如果看到Multi-display rendering enabled with DPI auto-scaling，即表示成功启用。启动后，主界面将自动适配当前所有连接显示器的分辨率与缩放比例，彻底解决界面错位问题。