Merge remote-tracking branch 'origin/main'

src/layout/components/PageHeader.vue

@@ -20,17 +20,26 @@
       </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>
@@ -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;
   }