refactor: ♻️ 代码规范优化

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>