From 14a7522a62cb15dc021080d78bd39e7b77ba9292 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Mon, 23 Oct 2023 22:19:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90pageheader=E7=9A=84=E5=AD=A6?=
 =?UTF-8?q?=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/PageHeader.vue | 45 ++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/PageHeader.vue b/src/layout/components/PageHeader.vue
index 1ea2f04..9d54e93 100644
--- a/src/layout/components/PageHeader.vue
+++ b/src/layout/components/PageHeader.vue
@@ -20,23 +20,32 @@
       </div>
       <template v-if="isLogin">
         <div class="gap cursor">
-          <router-link to="/personal/message"><el-icon><message/></el-icon></router-link>
+          <router-link to="/personal/message">
+            <!--            <el-badge :is-dot="!!unReadCount">-->
+            <el-badge :value="unReadCount">
+              <el-icon size="large">
+                <message/>
+              </el-icon>
+            </el-badge>
+          </router-link>
         </div>
-        <el-dropdown trigger="click">
+        <el-dropdown trigger="click" @command="handleCommand">
           <div class="flex-center cursor">
             {{ username }}
-            <el-icon><caret-bottom /></el-icon>
+            <el-icon>
+              <caret-bottom/>
+            </el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>{{ t('personnalCenter') }}</el-dropdown-item>
-              <el-dropdown-item>{{ t('logout') }}</el-dropdown-item>
+              <el-dropdown-item command="toPersonal">{{ t('personnalCenter') }}</el-dropdown-item>
+              <el-dropdown-item divided command="toLogout">{{ t('logout') }}</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </template>
       <template v-else-if="route.name !== 'Login'">
-        <router-link to="/Login">{{t('login')}}</router-link>
+        <router-link to="/Login">{{ t('login') }}</router-link>
       </template>
     </div>
   </div>
@@ -47,17 +56,34 @@ import {Message} from '@element-plus/icons-vue'
 import {useI18n} from "vue-i18n";
 import {ref} from 'vue';
 import {useRoute} from "vue-router";
+import router from "@/router/index.js";
 
 const route = useRoute();
 const {locale, t} = useI18n();
+
 function changeLanguage(lang) {
   locale.value = lang
   localStorage.setItem('locale', lang)
 }
+
 const isLogin = ref(false);
 const username = ref('admin');
+const unReadCount = ref(2);
 isLogin.value = true;
 
+const commands = {
+  toPersonal: () => {
+    router.push('/personal')
+  },
+  toLogout: () => {
+    console.log('退出')
+  }
+}
+
+function handleCommand(command) {
+  commands[command] && commands[command]()
+}
+
 </script>
 
 <style lang="scss">
@@ -67,22 +93,28 @@ isLogin.value = true;
   justify-content: space-between;
   padding: 0 20px;
   height: 100%;
+
   a {
     color: inherit;
     text-decoration: none;
   }
+
   h1 {
     margin: 0;
     font-size: 20px;
   }
+
   .gap {
     margin-right: 20px;
   }
+
   .right {
     .lang {
       font-size: 14px;
+
       .item {
         cursor: pointer;
+
         &.active {
           font-size: 18px;
           font-weight: bold;
@@ -90,6 +122,7 @@ isLogin.value = true;
       }
     }
   }
+
   .el-dropdown {
     color: inherit;
   }