1.页面布局
首先就是页面布局，使用HTML、CSS及elemnt-plus组件库
使用Menu菜单组件来编写左侧导航栏，第一次引入组件时，页面如下图所示，我们需要对页面DOM部分进行优化
这样左侧的导航栏已经编写好，同理编写上方导航栏，并使用组件库中的Icon图标来使页面更加美观，该图标库需要单独安装
安装npm install @element-plus/icons-vue
导入并注册为组件，并在需要放置图标的地方添加（每个图标都会对应一个代码，所以每使用一次，都要导入并注册一次）
此时页面的大致效果如上图所示，此处，我们给左侧的导航栏添加一个折叠效果，方法是给左侧导航栏绑定一个布尔值，官方文档如下图所示
我们在script标签中创建data属性，return出iscollapse：false（当iscollapse为false时，导航栏展开，当iscollapse为true时，导航栏折叠），并且给整个左侧导航栏绑定属性 :collapse = " iscollapse "，如下图所示
使用v-if条件渲染来改变图标的样式，当collapse为false时，导航栏不折叠，显示图标fold，当collapse为true时，导航栏折叠，显示图标expand
此时要给左侧导航栏的宽度进行删除，并在标签中进行样式绑定，使用三目运算符，根据iscollapse的值来改变width的宽度
左侧的标题栏同样使用条件渲染，当折叠时显示Bing，当展开时显示Bing酒店管理系统。
最后给整个导航栏添加一个transition过渡样式，使展开/折叠时，页面显得更加流畅
2.切换主题功能
在全局状态管理中定义主题！
在store中新建modules文件夹，并在其中创建theme.js文件。定义主题数据如下图所示，并在
并且要给主题颜色标签添加一个点击事件，事件名称为updateThemeActive，在全局状态管理中定义，如下图所示
并在manager.vue管理页面中使用计算属性来返回主题文件中的主题数组
并在上方导航栏的“主题”栏的展开项中展示，使用v-for来显示item.name，页面效果如下图所示
为了给每个选项设置一个hover悬停变成黄色的效果，需要给index绑定一个值，如下图所示
根据标签v-for中对应的index来获取store中对应的主题，所以我们要通过计算属性的方式来获取，如下图所示
此时页面中所有的背景颜色都是写死的，所以我们要将页面中所有style中写死的backgroundcolor属性删除，并给需要添加背景颜色的标签绑定样式
这样当我们点击主题颜色中的任何一个选项时，页面的主题颜色都会根据我们的点击而发生改变。
大致的原理就是： 我们在全局状态管理中将所有的主题颜色，按照对象的方式写下来，并放在themes数组中，给“个人主题”中的每个主题绑定点击事件changeTheme，根据点击来获取对应的index，再将index传至全局状态管理store中，调用store中定义好的方法，来改变全局状态管理中的主题索引themeActive，最后根据，最后在DOM页面中使用计算属性来返回点击后主题索引所对应的主题数组中的对应的对象中的颜色value值，最后给每个需要改变背景颜色的地方，使用绑定属性的方式来绑定背景颜色
至此，当我们刷新页面的话，主题会恢复，因为全局状态管理里的数据是不能刷新的，所以每当我们点击一个主题时，我们要将该主题对应的index作为一份数据保存到缓存localStorage中，当页面关闭再重新打开时，数据不会丢失，并且在页面重新打开时，通过生命周期函数，在生命周期函数中获取该index，并将该index作为参数传入切换主题的方法，来获取当前index所对应的全局状态管理中的对象，从而改变页面的主题色
3.退出功能
给管理员标签下的退出系统标签绑定一个exit方法
退出方法中，要清空所有的缓存，sessionStorage和localStorage都要清除，并且将路由页面返回至首页！首页根据本地是否有缓存来判断跳转到哪个页面（登录页面Login）
