登录到主页
一、 主页布局 Layout
首先定义界面div layout_container 定义侧边栏（slider） 工具栏（tabbar） 展示区（main）
- 界面div 宽度100% 高度100vh
- slider侧边栏因为要做伸缩功能，所以定义为全局变量。宽度:$base-menu-width; 高度100vh;设置背景颜色;伸缩动画等。
- tabbar工具栏使用固定布局 宽高进行计算
- 展示区也使用固定布局 宽高通过计算进行设置
二、 拆分组件
侧边栏拆分为Logo区域（包含标题）以及滚动菜单（el-scrollbar）
工具栏 拆分为面包屑（包含一个折叠的icon）以及用户信息setting组件
展示区 暂不拆分
三、 组件实现
1. 样式
- Logo组件由一个图片以及一个标题组成，除了静态结构以外。还需要考虑当折叠icon点击时，需要将文字进行隐藏。
- 设置折叠按钮状态。点击按钮后状态改变，icon更换图片。（利用component标签的is属性）
- 将按钮状态信息保存到pinia中，设置状态变量fold。为true表示折叠，false为展开。
- 侧边栏、工具栏以及展示区等组件设置动态样式 :class="LayoutStore.fold" 为true时表示为折叠样式。
2. 菜单组件实现 （简单的组件如logo组件 面包屑 按钮等略过）
初版先根据静态路由展示菜单，静态路由设置要求：
- 设置简单的一级路由：/login /404 /screen /:pathMatch(.) 匹配到其他的时候重定向到404
- 一级路由: / 拥有子路由 /home,
- 一级路由: /acl 拥有子路由 /acl/user /acl/role /acl/permission
- 一级路由: /product 拥有子路由 /product/trademark /product/attr /product/spu /product/sku
- 每个路由设置自有的name属性,是否展示 hidden默认为false。添加meta属性，定义title以及自己的icon
- 除了简单一级路由有用自己的界面以外，其他的一级路由都指向layout/index.vue。在main展示区域内不要忘记添加router-view标签。
组件内使用v-for进行遍历，根据无子路由,只一个子路由以及多个子路由分三类情况进行区分。
- 无子路由 直接展示自己的信息 嵌套v-if 没有子路由之后还要保证meta.hidden为false才进行展示。:index 使用item.path 点击事件goRoute中不传值的话，默认传的是该el-menu-item实例,实例上的index如果作为item.path路径的话很容易结合vue-Router进行跳转(二级路由写全 /acl/user 而不是 user)
- 只有一个子路由 不需要展开，直接显示自己的信息。注意这里拿的是子路由信息 item.children[0].meta
- 有多个子路由，进行递归，继续对其进行遍历。可展示的使用el-sub-menu。注意el-sub-menu中 title插槽中要把图标icon也填写进去，否则折叠的时候会出现一些bug。 递归的是 item.children
3.工具栏的面包屑组件 breadcrumb
el-breadcrumb-item对当前的route.matched进行遍历 （没有标题的不展示）
