refactor: ♻️ 代码规范优化

src/layout/components/NavBar/components/NavbarRight.vue

@@ -67,12 +67,12 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
   margin: 10px 0;
 }
 
-.dark .navbar__right > *:hover {
-  background: rgb(255 255 255 / 20%);
-}
-
 .layout-top .navbar__right > *,
 .layout-mix .navbar__right > * {
   color: #fff;
 }
+
+.dark .navbar__right > *:hover {
+  color: #ccc;
+}
 </style>

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -149,10 +149,10 @@ function resolvePath(routePath: string) {
 
     & > span {
       display: inline-block;
+      visibility: hidden;
       width: 0;
       height: 0;
       overflow: hidden;
-      visibility: hidden;
     }
   }
 
@@ -178,10 +178,10 @@ function resolvePath(routePath: string) {
     .el-sub-menu {
       & > .el-sub-menu__title > span {
         display: inline-block;
+        visibility: hidden;
         width: 0;
         height: 0;
         overflow: hidden;
-        visibility: hidden;
       }
     }
   }

src/layout/components/Sidebar/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合 -->
-    <div v-if="isMixLayout" class="flex w-full">
+    <!-- 混合布局 -->
+    <div v-if="layout == LayoutEnum.MIX" class="flex w-full">
       <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <SidebarMixTopMenu class="flex-1" />
       <NavbarRight />
     </div>
 
-    <!-- 顶部 || 左侧 -->
+    <!-- 顶部布局 || 左侧布局 -->
     <template v-else>
       <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <el-scrollbar>
@@ -15,7 +15,7 @@
       </el-scrollbar>
 
       <!-- 顶部导航 -->
-      <NavbarRight v-if="isTopLayout" />
+      <NavbarRight v-if="layout == LayoutEnum.TOP" />
     </template>
   </div>
 </template>
@@ -33,8 +33,6 @@ const permissionStore = usePermissionStore();
 const sidebarLogo = computed(() => settingsStore.sidebarLogo);
 const layout = computed(() => settingsStore.layout);
 
-const isMixLayout = computed(() => layout.value === LayoutEnum.MIX);
-const isTopLayout = computed(() => layout.value === LayoutEnum.TOP);
 const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
 </script>
 

src/layout/components/TagsView/index.vue

@@ -187,25 +187,17 @@ function isAffix(tag: TagView) {
 }
 
 function isFirstView() {
-  try {
-    return (
-      selectedTag.value.path === "/dashboard" ||
-      selectedTag.value.fullPath === tagsViewStore.visitedViews[1].fullPath
-    );
-  } catch (err) {
-    return false;
-  }
+  return (
+    selectedTag.value.path === "/dashboard" ||
+    selectedTag.value.fullPath === tagsViewStore.visitedViews[1]?.fullPath
+  );
 }
 
 function isLastView() {
-  try {
-    return (
-      selectedTag.value.fullPath ===
-      tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].fullPath
-    );
-  } catch (err) {
-    return false;
-  }
+  return (
+    selectedTag.value.fullPath ===
+    tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1]?.fullPath
+  );
 }
 
 function refreshSelectedTag(view: TagView) {

src/layout/index.vue

@@ -21,8 +21,8 @@
         </div>
       </div>
 
-      <div :class="{ hasTagsView: showTagsView }" class="main-container">
-        <TagsView v-if="showTagsView" />
+      <div :class="{ hasTagsView: isShowTagsView }" class="main-container">
+        <TagsView v-if="isShowTagsView" />
         <AppMain />
         <Settings v-if="defaultSettings.showSettings" />
         <!-- 返回顶部 -->
@@ -33,9 +33,9 @@
     </div>
 
     <!-- 左侧和顶部布局 -->
-    <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
+    <div v-else :class="{ hasTagsView: isShowTagsView }" class="main-container">
       <NavBar v-if="layout === LayoutEnum.LEFT" />
-      <TagsView v-if="showTagsView" />
+      <TagsView v-if="isShowTagsView" />
       <AppMain />
       <Settings v-if="defaultSettings.showSettings" />
       <!-- 返回顶部 -->
@@ -62,7 +62,7 @@ const width = useWindowSize().width;
 const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
 const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 const isOpenSidebar = computed(() => appStore.sidebar.opened);
-const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
+const isShowTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
 const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
 const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
 const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单
@@ -245,8 +245,10 @@ watch(route, () => {
 }
 
 .hideSidebar {
-  .main-container {
-    margin-left: $sidebar-width-collapsed;
+  &.layout-left {
+    .main-container {
+      margin-left: $sidebar-width-collapsed;
+    }
   }
 
   &.layout-top {
@@ -280,7 +282,7 @@ watch(route, () => {
   &.mobile {
     .sidebar-container {
       pointer-events: none;
-      transform: translate3d(-210px, 0, 0);
+      transform: translate3d(-$sidebar-width, 0, 0);
       transition-duration: 0.3s;
     }
 
@@ -291,13 +293,10 @@ watch(route, () => {
 }
 
 .mobile {
-  .main-container {
+  .layout-mix,
+  .layout-top,
+  .layout-left {
     margin-left: 0;
   }
-
-  &.layout-top {
-    // 顶部模式全局变量修改
-    --el-menu-item-height: $navbar-height;
-  }
 }
 </style>