perf: 同步完整版代码

src/layout/components/navbar.vue

@@ -24,6 +24,7 @@ const {
   toggleSideBar,
   pureApp,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -93,8 +94,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -169,7 +170,6 @@ function translationEn() {
     }
 
     .el-dropdown-link {
-      width: 100px;
       height: 48px;
       padding: 10px;
       display: flex;

src/layout/components/sidebar/horizontal.vue

@@ -30,6 +30,7 @@ const {
   handleResize,
   menuSelect,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -46,6 +47,13 @@ watch(
   }
 );
 
+watch(
+  () => route.path,
+  () => {
+    menuSelect(route.path, routers);
+  }
+);
+
 function translationCh() {
   instance.locale = { locale: "zh" };
   locale.value = "zh";
@@ -114,8 +122,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/mixNav.vue

@@ -33,6 +33,7 @@ const {
   resolvePath,
   pureApp,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -166,8 +167,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/sidebarItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 import path from "path";
 import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 
 const { pureApp } = useNav();
 const menuMode = ["vertical", "mix"].includes(pureApp.layout);

src/layout/components/sidebar/vertical.vue

@@ -51,6 +51,7 @@ watch(
   () => route.path,
   () => {
     getSubMenuData(route.path);
+    menuSelect(route.path, routers);
   }
 );
 </script>