学习搭建后台管理系统模板之layout布局

本项目学习对象是优秀的后台系统模板vben-admin，期待通过学习解读该项目，熟悉前端项目工程化。

看了vben-admin的layout布局，感觉好麻烦，我尝试往简单了做，我觉得已经涵盖常见布局类型了。做法是：控制顶栏和侧边栏的【是否显示】【是否固定】，除此之外还需记录【侧边栏宽度】【顶栏高度】，因为布局主要通过position来控制位置。

ps:一开始确实不知道怎么下手，总想着从更广的角度去考虑，浪费了不少时间，还折腾不出啥，唉！人就是想太多，没必要，干就完了，只要把它拆开，其实也没啥东西，先从实现一种效果开始。做着做着想法自然就出来了。

目前达到的效果：

左侧栏模式：左侧栏始终存在

我先假设：左侧栏模式为左侧栏始终存在，不管右边如何变动，先搭建出如下的结构，为了方便测试，先给Main区域2000px高度，这样一看，感觉问题就少了很多，也清晰了，这样在眼前就几个问题。【其实更应该从顶栏模式开始设计，因为顶栏模式需要考虑的问题会更少，不需要考虑侧边栏的宽度对顶栏的影响】

1. header是否存在
2. header是否固定
3. 侧边栏是否存在（目前布局下，已假设为一直存在）
4. 侧边栏是否固定（即是否随内容高度滚动，如果是固定，则始终在哪个位置）

这四个选项意味着需要四个配置项，我用的vue，所以我用vuex来保存这些状态，同时我还有一个初始的配置项，在项目加载时会先加载初始的配置项。为了达到这个布局效果，需要记录6个属性。

headerShow = true // 顶栏是否存在
headerFixed = true // 顶栏是否固定
siderShow = true // 侧边栏是否存在
siderFixed = true // 侧边栏是否固定
headerHeight = 48 // 顶栏高度
siderWidth = 218 // 侧边栏看度

对于是否显示来说最简单了，啥都不用考虑，主要是在开了固定之后，相应的位置就脱离了文档流，父容器得不到他的大小了，所以才需要记录【顶栏高度】【侧边栏宽度】,便于让整体布局知道这里还占着位置。
当不是固定模式下，都是不使用定位的，一般高度都是100%或auto;当开启了固定后，高度便需要通过calc来计算了。实际情况得自己去试，才能发现各种各样的情况。

顶栏模式: 顶部始终存在

当完成了侧边栏的布局后，顶栏就变得异常简单了，基本不需要改动什么。

ps: 不过当不做限制时，让顶栏和侧边栏都是随意消失时，会感觉很怪异，所以我还做了限制，当顶栏模式下，顶栏的【显示开关】会变得不可用，侧边栏也是如此。