electerm终端分屏进阶：垂直/水平分割与布局保存

在日常服务器管理或开发工作中，频繁切换多个Terminal（终端）窗口往往会降低工作效率。electerm作为一款跨平台的终端工具，提供了强大的分屏功能，让你可以在单个窗口内同时操作多个会话。本文将详细介绍如何使用垂直/水平分割、自定义布局以及布局保存功能，帮助你打造高效的工作流。

分屏布局类型与应用场景

electerm支持8种预设布局，涵盖从简单到复杂的各种场景需求。核心布局定义在src/client/common/constants.js中，通过splitMap和splitConfig对象管理布局类型和分割规则：

// 布局类型定义
export const splitMap = {
  c1: 'single',           // 单窗口
  c2: 'twoColumns',       // 两列垂直分割
  c3: 'threeColumns',     // 三列垂直分割
  r2: 'twoRows',          // 两行水平分割
  r3: 'threeRows',        // 三行水平分割
  c2x2: 'grid2x2',        // 2x2网格分割
  c1r2: 'twoRowsRight',   // 左侧1个+右侧2行
  r1c2: 'twoColumnsBottom'// 上方1个+下方2列
}

// 布局配置
export const splitConfig = {
  c2: { children: 2, handle: 1 },  // 两列布局含1个分隔手柄
  r2: { children: 2, handle: 1 },  // 两行布局含1个分隔手柄
  c2x2: { children: 4, handle: 3 }  // 2x2网格含3个分隔手柄
}

常用布局适用场景

布局类型	代码标识	适用场景
两列垂直分割	c2	同时操作两台服务器
两行水平分割	r2	本地终端与远程终端对比
2x2网格分割	c2x2	多服务监控（如日志+进程+性能+编辑）
左侧1个+右侧2行	c1r2	主操作窗口+辅助信息窗格

快速上手：基础分屏操作

键盘快捷键分割

electerm提供直观的快捷键操作，默认配置下：

• 垂直分割（两列布局）：Ctrl+Shift+D（Windows/Linux）或Cmd+Shift+D（Mac）
• 水平分割（两行布局）：Ctrl+Shift+E（Windows/Linux）或Cmd+Shift+E（Mac）

快捷键定义在src/client/common/constants.js中，通过ctrlOrCmd变量自动适配系统：

export const ctrlOrCmd = isMacJs ? 'cmd' : 'ctrl'  // 自动识别系统快捷键前缀

鼠标拖拽调整

所有分屏布局都包含可拖拽的分隔手柄（handle），布局算法在src/client/components/layout/layout-alg.js中实现。以两列布局为例，分隔手柄位于屏幕中央：

// 两列布局实现代码
const layoutTwoColumns = (w, h) => ({
  wrapStyles: [
    { left: 0, top: 0, bottom: 0, right: (w/2 - 2) + 'px' },  // 左侧面板
    { left: (w/2 + 2) + 'px', top: 0, bottom: 0, right: 0 }   // 右侧面板
  ],
  handleStyles: [
    { left: (w/2 - 2) + 'px', top: 0, bottom: 0 }  // 中央分隔手柄
  ]
})

拖拽手柄时，布局系统会实时计算新尺寸并应用，最小宽度限制为minTerminalWidth: 90像素，确保每个终端窗口保持可用大小。

高级技巧：自定义布局与动态调整

布局切换与组合

通过菜单栏「View」→「Layout」可选择8种预设布局，布局切换逻辑在src/client/components/layout/layout.jsx中实现，核心代码：

// 布局渲染逻辑
export default auto(function Layout (props) {
  const { store } = props
  const { layout } = store
  const conf = splitConfig[layout]
  const styles = buildLayoutStyles(conf, layout)
  
  return (
    <Layouts {...layoutProps} key='layouts'>
      {renderSessions(conf, layout)}  // 根据布局渲染终端会话
    </Layouts>
  )
})

进阶组合示例：先使用Ctrl+Shift+D创建垂直分割，再在右侧面板使用Ctrl+Shift+E创建水平分割，形成左侧1个+右侧2行的复合布局（c1r2）。

动态调整与尺寸计算

布局系统会根据窗口大小自动调整面板尺寸，核心计算逻辑在src/client/components/layout/session-size-alg.js中：

// 会话尺寸计算算法
export default function calcSessionSize (layout, w, h) {
  const { cols, rows } = layoutConfigs[layout]
  const sessionWidth = (w - (cols - 1)*spacing)/cols  // 计算列宽
  const sessionHeight = (h - (rows - 1)*spacing)/rows // 计算行高
  
  // 特殊布局调整（如左侧1个+右侧2行）
  if (special === 'right') {
    sessions[0].height = h  // 左侧面板占满高度
  }
  return sessions
}

调整窗口大小时，所有面板会按比例缩放，保持布局比例不变。

布局保存与恢复：提升工作流效率

自动保存机制

electerm会自动保存当前布局状态，实现代码在src/client/store/layout.js中：

// 布局状态保存逻辑
saveLayoutState () {
  const state = {
    layout: this.layout,
    activeTabId: this.activeTabId,
    batchLayout: this.batchLayout
  }
  localStorage.setItem('layoutState', JSON.stringify(state))
}

// 应用启动时恢复
loadLayoutState () {
  const saved = localStorage.getItem('layoutState')
  if (saved) {
    const state = JSON.parse(saved)
    this.layout = state.layout
    this.activeTabId = state.activeTabId
  }
}

手动保存与切换布局方案

通过工作区配置功能，可保存多套布局方案：

1. 配置完成布局后，打开「Settings」→「Layouts」
2. 点击「Save Current Layout」输入方案名称
3. 需要时在「Layouts」菜单中选择已保存方案

布局数据存储在用户配置中，可通过src/app/lib/user-config-controller.js进行管理。

实战案例：多服务器监控面板

目标场景

构建包含4个面板的监控布局，实现：

• 左侧：主操作终端（ssh连接生产服务器）
• 右侧上：错误日志实时查看（tail -f error.log）
• 右侧下左：系统性能监控（top命令）
• 右侧下右：进程状态监控（ps aux | grep node）

实现步骤

1. 使用Ctrl+Shift+D创建垂直分割（c2布局）
2. 选中右侧面板，使用Ctrl+Shift+E创建水平分割（转为c1r2布局）
3. 选中右下方面板，使用Ctrl+Shift+D创建垂直分割（完成目标布局）
4. 通过「Layouts」→「Save Current Layout」保存为"Production Monitor"

布局实现代码对应src/client/components/layout/layout-alg.js中的layoutTwoRowsRight函数：

// 左侧1个+右侧2行布局实现
const layoutTwoRowsRight = (w, h) => ({
  wrapStyles: [
    { left: 0, top: 0, bottom: 0, right: (w/2 - 2) + 'px' }, // 左侧面板
    { left: (w/2 + 2) + 'px', top: 0, right: 0, bottom: (h/2 - 2) + 'px' }, // 右上
    { left: (w/2 + 2) + 'px', top: (h/2 + 2) + 'px', right: 0, bottom: 0 } // 右下
  ]
})

常见问题与解决方案

分屏后快捷键冲突

问题：部分终端应用（如vim）的快捷键与分屏快捷键冲突。

解决：在「Settings」→「Shortcuts」中重新映射分屏快捷键，配置文件位于src/client/store/setting.js。

布局错乱或面板无法调整

问题：复杂布局下可能出现面板尺寸异常。

解决：

1. 重置布局：「View」→「Reset Layout」
2. 检查最小尺寸限制：配置文件中minTerminalWidth参数（默认90像素）
3. 清除缓存：删除~/.electerm/layout-state.json文件

多显示器布局同步

问题：多显示器环境下布局位置不适应。

解决：启用「Settings」→「Sync Layout Across Displays」，实现代码在src/client/components/setting-panel/tab-settings.jsx中。

总结与进阶建议

electerm的分屏功能通过灵活的布局系统和状态管理，显著提升多任务处理效率。核心实现依赖于：

• 布局算法：src/client/components/layout/layout-alg.js
• 状态管理：src/client/store/layout.js
• 用户配置：src/app/common/config-default.js

进阶建议：

• 探索自定义布局开发，通过修改splitMap和splitConfig添加新布局
• 使用「Batch Operations」功能，实现多面板同时执行命令
• 结合「Connection Hopping」功能，在复杂网络环境中保持布局稳定

通过本文介绍的分屏技巧，你可以构建符合个人工作习惯的终端工作区，让多任务处理更加流畅高效。更多高级功能可参考官方文档或查看源码实现。