本来不想再写 Electron 相关的文章，毕竟项目都停摆了。但有小伙伴需要就有动力写 ～

前言

最终效果

本来想放一个好点的效果视频，但发现线上的功能已经被阉割没什么东西了，所以凑合示意一下：

后续有需要，会挑阉割前的设计来讲，实际上远比这个视频复杂的多 ～

附一个客户端下载地址：www.gaoding.com/pro 虽然不维护了，但整体架子还在，有兴趣可以点点看。

布局介绍

完整的产品布局如下：

分为侧边栏、顶部栏、内容区和一个帮助反馈的浮动按钮（这个顶部浮动很难受）。

当然可以不用BrowserView，整体一个 Web 页面套壳一把梭，这样开发是最简单的。

但使用BrowserView的好处也很明显：

1. 无需关心各个内容区是部署在哪里，有没有跨域问题。
2. 避免框架融合的痛，各个业务到底是使用 Vue 还是 React 还是什么玩意儿实现的，还能实现业务间解耦。
3. 离线可用，比如侧边栏和顶部栏采用本地加载，至少网络不好的情况下能出来个框架，这是桌面端的一个特性，但很多应用也没做多好。

我们先不管悬浮的帮助中心按钮，整个主框架上分为3个部分：

1. 主窗口BrowserWindow对象，URL 加载的 HTML 只有一个作用，渲染底层的背景色。
2. 顶部栏 + 侧边栏是充满整个窗口的BrowserView, 内容中心是透明区域，这里作用下文讲。
3. 内容区是由多个BrowserView组成的，跟侧边栏一级导航一一对应，当然它是懒加载。

细节分析

早期做法（遮罩处理）

最后这个形态也是经过一次调整，最早是调研竞品Figma来实现的。

我们用字节大佬提供的 Debugron 工具可以很方便的查看其他 App 得布局、进程等信息。（确实做 Electron 还关注安全的团队更少了 ...）

我们找到它顶部栏的实现：

初始状态就这一条。

当点击更多 ... 时，你会发现这个页面就铺满了。

可以看出它的做法是改变整个顶部栏BrowserView的高度。

但可以看到内容区的内容没有被遮挡，这是因为它下面用了个完全透明的div。

我们简单验证，给这个div一个半透明的颜色：

最后呈现结果如下：

这样做的还有一个好处，内容区什么也不用关心，因为它本身是盖在上面的，响应（关闭弹窗）事件还是由顶部栏这一层的div提供就好。

我们最早的做法也是学它（粗糙的草图）：

遇到的难题（局限性）

但我们不同的是，我们不止有顶部栏，后面还有侧边一级导航栏，所以如果还用这种方式，就需要一个侧边栏BrowserView：

但这样做不仅多一个BrowserView的开销，而且侧边栏和顶部栏的通信也会变的十分复杂。

现在的做法（布局切换）

最后就如开始介绍的那样，只使用一个BrowserView绘制侧边栏和顶部栏，中间是透明区域，这个是早期做法的灵感。

那我们需要的处理的就是：

1. 正常情况下，内容区的BrowserView层级在框架布局的BrowserView之上。
2. 如果框架弹出下拉框或者 Tips 的情况，把框架布局的BrowserView的层级置顶。

视频中的搜索栏、用户菜单栏、侧边的弹出框都是用的这种布局切换的实现方式。

具体核心实现代码（仅参考）：

然后就是页面如何跟主进程处理这个切换操作了，这里不细提了。

关于悬浮球（帮助中心）

这个悬浮球恶心的原因是，它必须永远置顶 ...

所以无论框架层级是否置顶，都需要再把这玩意儿置顶下。

关键是Electron没提供层级管理的 API，只有setTopBrowserView ... 调用2次的现象是悬浮球会有略微闪烁的情况，因为不是在同一帧绘制的 ...

后续

本文按评论区小伙伴需要，总结了我们对于这种复合布局是如何处理的，其实还是有很多细节没讲，也是过了个年，记得不是很清楚啦。

如果大家有兴趣、有问题可以本文评论，简单的会直接解答，如果复杂的就单开文章来讲讲 ～