在layout文件夹中创建header文件夹，用来存放header区域相关组件

在header文件夹中新建Header.vue、Collapse.vue、LoginOut.vue文件
分别对应头部整体区域、收缩按钮组件、退出登录组件

将Collapse.vue、LoginOut.vue引入Header.vue
为Header.vue配置样式

在layout.Index.vue主页引入Header.vue
对Index.vue中的header区域添加样式，分隔收缩图标和退出登录

order-system/src/layout/Index.vue

@@ -6,7 +6,11 @@
       <Menu></Menu>
     </el-aside>
     <el-container>
-      <el-header class="header">Header</el-header>
+      <el-header class="header">
+        <!-- 头部区域直接引入头部组件 -->
+        <Header></Header>
+      </el-header>
+
       <el-main class="main">
 
         <!-- 路由跳转后，页面显示在main区域 -->
@@ -19,6 +23,9 @@
 <script setup lang="ts">
   // 引入菜单
   import Menu from './Menu.vue'
+
+  // 引入头部区域
+  import Header from './header/Header.vue';
 </script>
 
 <style scoped lang="scss">
@@ -32,7 +39,13 @@
   }
 
   .header {
-    background-color: chocolate;
+    // background-color: chocolate;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #d8dce5 !important;
+
+    // 分隔开收缩图标和退出登录
+    justify-content: space-between;
   }
 
   .main {

order-system/src/layout/header/Collapse.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    收缩图标
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

order-system/src/layout/header/Header.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="left-header">
+    <collapse></collapse>
+  </div>
+
+  <LoginOut></LoginOut>
+</template>
+
+<script setup lang="ts">
+  // 引入另外两个组件
+  import Collapse from './Collapse.vue';
+  import LoginOut from './LoginOut.vue';
+</script>
+
+<style scoped lang="scss">
+  .left-header{
+    display: flex;
+    align-items: center;
+  }
+</style>

order-system/src/layout/header/LoginOut.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    退出登录
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>