0 环境
1 参考文档
2 前言
之前的文章，ThemeSetting初探应该还有印象吧，作者用mittBus进行组件的通讯，打开主题设置。还有想看在线的，上面的参考文档有，本地代码的位置：src/layouts/components/ThemeDrawer下面的index.scss和index.vue。
大体结构如下图：
3 正文
首先我们打开主题设置，就会触发到index.vue下，第186行的代码：mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));，drawerVisible设为true。
布局样式居中显示。
这里的<div class="layout-box">包裹着四种样式。当你光标放在这个布局样式上的时候，会有对应的纵向、经典、横向、分栏这样的提示，并且还有阴影的一个效果，当你选择一个样式时，选中样式会有一个√，并且边框加粗。
这里文字后面的 ?号 光标放在上面时，会有提示，和上面的类似，只不过这里是图标，上面的是文字。
点击这里侧边栏反转色按钮，对应的侧边栏变黑。
同理，这里头部反转色也是类似的效果。
如下图：点击后主题色确实变了，这里能做到变色，是通过changePrimary改的，这个之前初始化时，有提过。
暗黑模式对应代码81-84行，选中这个按钮，网站全屏黑。
灰色模式对应的代码85-88行，选中这个按钮，网站全屏变灰。这里的暗黑和灰色模式，对应的click是changeGreyOrWeak。
色弱模式对应的代码89-92行，选中这个按钮，色弱模式开启，一般人用不到。
界面设置如下图： 对应的代码从99行-130行，菜单折叠默认打开，当我们选择关闭时，侧边栏默认展开。
菜单手风琴模式默认是打开的，当我们选择关闭它时，侧边栏的默认展开。侧边栏的手风琴模式就关闭了。本来是当一个子菜单展开时，其他子菜单会自动收起。现在关闭了，当一个子菜单展开时，其他子菜单无反应。
水印，当我们选择打开时，会有很多个Geeker Admin。。。文字的水印。
一旦关闭面包屑功能的按钮，侧边图标+首页那块就会被隐藏掉。
当面包屑选中状态时，面包屑图标开关控制才会有效果。默认选中状态时，头部的首页图标是生效的。若是关闭面包屑图标的功能，头部的首页图标就消失了。
标签栏默认是选中的，标签栏默认就是存在的。当标签栏功能被关闭后，标签栏就隐藏了。
标签栏图标默认是打开的，标签栏图标是存在，一旦关闭了，这里标签栏图标就无了。
页脚默认说打开的，假如页脚是关闭的话，页脚就消失了。
上面这些绑定v-mode的值，是在src/stores/modules/global.ts这里。
3 总结
主要是要知道每一块对应什么功能就行。
