优化 Header 组件

src/components/Header/index.vue

@@ -2,8 +2,8 @@
   <header class="header-container" :class="{ 'hide-shadow': hideShadow }"
     :style="{ height, zIndex, lineHeight: height }">
     <div class="opts left-opts" v-if="$slots['left-opts'] || title || $slots.title">
-      <a-button v-if="showHome" class="header-btn" @click="backToHome">首页</a-button>
-      <a-button v-if="showBack" class="header-btn" @click="back">返回</a-button>
+      <a-button v-if="showBack" @click="back">返回</a-button>
+      <a-button v-if="showHome" @click="backToHome">首页</a-button>
       <slot name="left-opts" />
     </div>
     <div class="title" v-if="title || $slots.title">
@@ -13,6 +13,8 @@
     </div>
     <div class="opts right-opts" v-if="$slots['right-opts'] || title || $slots.title">
       <slot name="right-opts" />
+      <a-button @click="handleLogout" type="primary" danger
+        v-if="showLogout && username">退出：{{ username }}</a-button>
     </div>
     <slot />
   </header>
@@ -20,6 +22,9 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
+import { Modal } from 'ant-design-vue';
+import { useAuthStore, useUserStore } from '@/store';
+import { storeToRefs } from 'pinia';
 
 defineProps({
   showHome: {
@@ -30,6 +35,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  showLogout: {
+    type: Boolean,
+    default: true,
+  },
   title: {
     type: String,
     default: null,
@@ -51,6 +60,22 @@ defineProps({
 const emit = defineEmits(['back']);
 const router = useRouter();
 
+const userStore = useUserStore();
+const { username } = storeToRefs(userStore);
+
+const authStore = useAuthStore();
+const handleLogout = () => {
+  Modal.confirm({
+    title: '提示',
+    content: `是否确认退出登录：${ username.value }`,
+    okText: '确定',
+    cancelText: '取消',
+    onOk: () => {
+      authStore.logout();
+    },
+  });
+};
+
 const back = () => {
   emit('back');
   defaultBack();
@@ -61,7 +86,7 @@ const defaultBack = () => {
 };
 
 const backToHome = () => {
-  router.push({ name: 'ipc' });
+  router.push({ name: 'Index' });
 };
 </script>
 
@@ -72,7 +97,8 @@ const backToHome = () => {
   display: flex;
   align-items: center;
   gap: 10px;
-  background-color: #fff;
+  background-color: #1f2e54;
+  color: #fff;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
   &.hide-shadow {
@@ -81,6 +107,7 @@ const backToHome = () => {
 
   .title {
     flex: 14;
+    color: #fff;
     white-space: nowrap;
     overflow: hidden;
     text-align: center;
@@ -105,12 +132,5 @@ const backToHome = () => {
       justify-content: flex-end;
     }
   }
-
-  :deep(.header-btn.ant-btn) {
-    height: 80%;
-    text-align: center;
-    font-size: clamp(14px, 1vw, 18px);
-    padding: 0 0.75rem;
-  }
 }
 </style>