第七章 项目布局实现（7.4.1）——右侧头部模板

7.4 右侧头部区域实现

7.4.1 右侧头部模板

1. 创建头部左侧模板 src/layout/layoutHeader/HeaderLeft.vue

   头部左侧有菜单收缩图标、当前所在菜单项面包屑。面包屑参考：https://cn.element-plus.org/zh-CN/component/breadcrumb.html

   <script setup lang="ts"></script>
   
   <template>
     <div flex items-center>
       <i i-ep-expand m-r-2 />
       <!-- 面包屑 -->
       <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">
           <span flex items-center>
             <i i-ep-setting />
             系统管理
           </span>
         </el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/' }">
           <span flex items-center>
             <i i-ep-menu />
             菜单管理
           </span>
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
   </te