vue3后台管理框架geeker admin -- ThemeDrawer 大标题布局样式 代码分析0 环境 Node.
0 环境
1 参考文档
2 前言
主要是介绍ThemeDrawer/index.vue，位置在src/layouts/components/ThemeDrawer/index.vue。下面我说的默认就是该index.vue。还有个重要的ts，@/hooks/useTheme.ts，比如setAsideTheme()。
3 正文
先看index.vue下的第8行到52行，也就是<div class="layout-box">...</div>。四种布局方式，它们都有@click="setLayout('xxx')"。先找到对应的实现，就是第178行到182行。代码如下：
这里做了两步操作，第一个是设置全局state，将val赋值给layout。如下图：
// 设置布局方式
const setLayout = (val: LayoutType) => {
globalStore.setGlobalState("layout", val);
setAsideTheme();
};
第二个是setAsideTheme，关系到主题的设置，这里以前文章有详细介绍。一般就是页面布局，暗黑模式，侧边栏反转色等，具体的如下图：
这里除了主题颜色外，其它都在setAsideTheme管控范围。
简单观察：最明显的是侧边栏背景色切换。
仔细看这里的侧边栏反转色，v-model绑定的是"asideInverted", 这里的asideInverted是从useGlobalStore里取的，看下图：
global.ts第27行，asideInverted默认是false。
一旦我点击了侧边栏反转色的按钮，激活它，就是将asideInverted设置为true，看下图第75行，asideInverted.value为真，type = "inverted"生效，第77行，asideTheme[type!]这里asideTheme会拿到inverted里的值，看下面第二张图。
ctrl+鼠标悬浮在asideTheme上，会看到一个对象，有--el-aside-logo-text-color和--el-aside-border-color的配色。
它作用在下图。但是你会发现不单单是图标标题颜色和右边框变化了，侧边栏背景色也变黑了呢。
其实是设置菜单样式，setMenuTheme的实现第60行到70行，这里重要的判断是64行，layout.value不等于transverse，asideInverted.value为真，type为inverted，
SubMenu组件中可以看到颜色的定义。
一旦改变了这些颜色，el-menu及子组件相关背景色，选中和悬浮色啥的都会跟着改变。
再看头部反转色，激活开关按钮，直接感受头部变黑。
这里的开关按钮关联的是headerInverted，然后找到setHeaderTheme点进去，如下面第二张图：
定位到setHeaderTheme实现，这里命中的是：if (headerInverted.value) type = "inverted";，此刻headerInverted为真，headerTheme会得到inverted对应的值。这里设置菜单样式，if判断没有生效的，只是默认，没必要再去看了。如下图二：
它们用在哪里呢，如下图：
总结
setAsideTheme你只要记住它的功能是设置侧边栏样式以及设置菜单样式即可。还有菜单样式的设置，以及头样式设置。不管是头样式设置还是侧边栏设置，都会用到菜单样式。核心的点就是，开关控制了type类型，得到对应的对象，这个对象决定了你要选中这片区域的背景色、颜色。。。
转载自:https://juejin.cn/post/7418877490871943231