perf: 当菜单加载慢时，添加 `loading` 动画，优化用户体验

src/layout/components/sidebar/horizontal.vue

@@ -41,7 +41,10 @@ watch(
 </script>
 
 <template>
-  <div class="horizontal-header">
+  <div
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
     <div class="horizontal-header-left" @click="backHome">
       <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
       <h4>{{ title }}</h4>
@@ -129,6 +132,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;

src/layout/components/sidebar/mixNav.vue

@@ -58,7 +58,11 @@ watch(
 </script>
 
 <template>
-  <div v-if="device !== 'mobile'" class="horizontal-header">
+  <div
+    v-if="device !== 'mobile'"
+    class="horizontal-header"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+  >
     <el-menu
       router
       ref="menuRef"
@@ -161,6 +165,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;

src/layout/components/sidebar/vertical.vue

@@ -59,7 +59,10 @@ watch(
 </script>
 
 <template>
-  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+  <div
+    v-loading="menuData.length === 0"
+    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+  >
     <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar
       wrap-class="scrollbar-wrapper"
@@ -91,3 +94,9 @@ watch(
     />
   </div>
 </template>
+
+<style scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+</style>