退出登录组件编写

src/layout/components/Header/index.vue

@@ -1,7 +1,14 @@
 <template>
   <n-layout-header class="layout__header" bordered>
-    Header Header Header
     <!-- <SideMenu menu-mode="horizontal" /> -->
+    <div class="user_msg">
+      <n-image
+        class="user_avatar"
+        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        preview-disabled
+      />
+      <span class="user_name">用户名</span>
+    </div>
   </n-layout-header>
 </template>
 
@@ -13,3 +20,22 @@ export default defineComponent({
   components: { SideMenu }
 })
 </script>
+
+<style scoped>
+.layout__header {
+  padding: 0 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.user_msg {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.user_avatar {
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+</style>

src/layout/components/Logout/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="user_msg">
+    <n-image
+      class="user_avatar"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      preview-disabled
+    />
+    <span class="user_name">用户名</span>
+  </div>
+</template>
+<script>
+export default {
+    name: 'Logout',
+    props: {
+        userInfo: {
+            type: Object,
+            default()=> {
+                
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.user_msg {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.user_avatar {
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+</style>