本来不想再写 Electron 相关的文章，毕竟项目都停摆了。但有小伙伴需要就有动力写 ～
前言
虽然官方推荐大家用BrowserView，但市面上相关的资料确实不多，笔者前面介绍了如何用BrowserView实现标签页窗口布局，但标签页布局算是简单模式的，没有复杂的层叠场景，笔者这一篇就进一步介绍下我们是怎么实现出一个主窗口复合布局的。
最终效果
本来想放一个好点的效果视频，但发现线上的功能已经被阉割没什么东西了，所以凑合示意一下：
本文后续的讲解会挑阉割前的设计来讲，实际上远比这个视频复杂的多 ～
附一个客户端下载地址：www.gaoding.com/pro 虽然不维护了，但整体架子还在，有兴趣可以点点看。
布局介绍
完整的产品布局如下：
分为侧边栏、顶部栏、内容区和一个帮助反馈的浮动按钮（这个顶部浮动很难受）。
当然可以不用
BrowserView，整体一个 Web 页面套壳一把梭，这样开发是最简单的。但使用
BrowserView的好处也很明显：
- 无需关心各个内容区是部署在哪里，有没有跨域问题。
- 避免框架融合的痛，各个业务到底是使用 Vue 还是 React 还是什么玩意儿实现的，还能实现业务间解耦。
- 离线可用，比如侧边栏和顶部栏采用本地加载，至少网络不好的情况下能出来个框架，这是桌面端的一个特性，但很多应用也没做多好。
我们先不管悬浮的帮助中心按钮，整个主框架上分为3个部分：
- 主窗口
BrowserWindow对象，URL 加载的 HTML 只有一个作用，渲染底层的背景色。 - 顶部栏 + 侧边栏是充满整个窗口的
BrowserView, 内容中心是透明区域，这里作用下文讲。 - 内容区是由多个
BrowserView组成的，跟侧边栏一级导航一一对应，当然它是懒加载。
细节分析
早期做法（遮罩处理）
最后这个形态也是经过一次调整，最早是调研的对象是竞品Figma。
我们用字节的 Debugron 工具可以很方便的查看其他 App 得布局、进程等信息。（确实做 Electron 还关注安全的团队更少了 ...）
我们找到它顶部栏的实现：
初始状态就这一条。
当点击更多 ... 时，你会发现这个页面就铺满了。
可以看出它的做法是改变整个顶部栏BrowserView的高度。
但可以看到内容区的内容没有被遮挡，这是因为它下面用了个完全透明的div。
我们简单验证，给这个div一个半透明的颜色：
最后呈现结果如下：
这样做的还有一个好处，内容区什么也不用关心，因为它本身是盖在上面的，响应（关闭弹窗）事件还是由顶部栏这一层的div提供就好。
我们最早的做法也是学它（粗糙的草图）：
遇到的难题（局限性）
但我们不同的是，我们不止有顶部栏，后面还有侧边一级导航栏，所以如果还用这种方式，就需要一个侧边栏BrowserView：
但这样做不仅多一个BrowserView的开销，而且侧边栏和顶部栏的通信也会变的十分复杂。
现在的做法（布局切换）
最后就如开始介绍的那样，只使用一个BrowserView绘制侧边栏和顶部栏，中间是透明区域，这个是早期做法的灵感。
那我们需要的处理的就是：
- 正常情况下，内容区的
BrowserView层级在框架布局的BrowserView之上。 - 如果框架弹出下拉框或者 Tips 的情况，把框架布局的
BrowserView的层级置顶。
这其实很简单，我们借助于通信能力即可实现。
我们是多端通用的通信能力，有兴趣可以看下跨端通信终结者｜桌面端已加入全家桶🔝
具体实现代码（仅参考）：
关于悬浮球（帮助中心）
这个悬浮球恶心的原因是，它必须永远置顶 ...
所以无论框架层级是否置顶，都需要再把这玩意儿置顶下。
关键是Electron没提供层级管理的 API，只有setTopBrowserView ... 调用2次的现象是悬浮球会有略微闪烁的情况，因为不是在同一帧绘制的 ...
后续
本文按评论区小伙伴需要，总结了我们对于这种复合布局是如何处理的，其实还是有很多细节没讲，也是过了个年，记得不是很清楚啦。
如果大家有兴趣、有问题可以本文评论，简单的会直接解答，如果复杂的就单开文章来讲讲 ～
