perf: layout显示用户信息优化

package.json

@@ -31,9 +31,9 @@
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
     "@pureadmin/components": "^1.0.6",
-    "@vueuse/core": "^8.2.0",
+    "@vueuse/core": "^8.2.5",
     "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^8.2.0",
+    "@vueuse/shared": "^8.2.5",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
     "cropperjs": "^1.5.12",
@@ -57,8 +57,8 @@
     "responsive-storage": "^1.0.11",
     "rgb-hex": "^4.0.0",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.33",
+    "vue": "^3.2.32",
+    "vue-i18n": "^9.2.0-beta.35",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1",
@@ -77,7 +77,7 @@
     "@iconify-icons/fluent": "^1.2.5",
     "@iconify-icons/ri": "^1.2.1",
     "@iconify-icons/uil": "^1.2.1",
-    "@iconify/vue": "^3.2.0",
+    "@iconify/vue": "^3.2.1",
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
     "@pureadmin/theme": "^0.0.1",
     "@types/element-resize-detector": "1.1.3",
@@ -90,9 +90,9 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^1.8.0",
+    "@vitejs/plugin-legacy": "^1.8.1",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.9",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "autoprefixer": "^10.4.2",
@@ -121,12 +121,12 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unplugin-element-plus": "^0.3.1",
-    "vite": "^2.9.1",
+    "unplugin-element-plus": "^0.3.4",
+    "vite": "^2.9.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.7",
     "vite-plugin-style-import": "1.4.1",
-    "vite-plugin-windicss": "^1.8.3",
+    "vite-plugin-windicss": "^1.8.4",
     "vite-svg-loader": "2.2.0",
     "vue-eslint-parser": "^8.2.0",
     "windicss": "^3.5.1"

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();
 
@@ -114,8 +115,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/hooks/nav.ts

@@ -26,6 +26,10 @@ export function useNav() {
     };
   });
 
+  const avatarsStyle = computed(() => {
+    return username ? { marginRight: "10px" } : "";
+  });
+
   const isCollapse = computed(() => {
     return !pureApp.getSidebarStatus;
   });
@@ -117,6 +121,7 @@ export function useNav() {
     isCollapse,
     pureApp,
     username,
+    avatarsStyle,
     getDropdownItemStyle
   };
 }

src/style/sidebar.scss

@@ -241,7 +241,6 @@
       }
 
       .el-dropdown-link {
-        width: 100px;
         height: 48px;
         padding: 10px;
         display: flex;