refactor: ♻️ layout 布局代码重构优化，精简重复的css代码

src/layout/index.vue

@@ -1,44 +1,41 @@
 <template>
-  <div class="wh-full" :class="classObj">
+  <div class="layout" :class="layoutClass">
-    <!-- 遮罩层 -->
+    <!-- 移动端遮罩层 -->
-    <div
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="handleCloseSidebar" />
-      v-if="isMobile && isOpenSidebar"
-      class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
-      @click="handleOutsideClick"
-    />
 
-    <!-- 公用侧边栏 -->
+    <!-- 侧边栏 -->
-    <Sidebar class="sidebar-container" />
+    <Sidebar class="layout__sidebar" />
 
     <!-- 混合布局 -->
-    <div v-if="layout === LayoutEnum.MIX" class="mix-container">
+    <div v-if="layout === LayoutEnum.MIX" class="layout__container">
-      <div class="mix-container-sidebar">
+      <!-- 左侧菜单栏 -->
+      <div class="layout__sidebar--left">
         <el-scrollbar>
           <SidebarMenu :data="mixedLayoutLeftRoutes" :base-path="activeTopMenuPath" />
         </el-scrollbar>
-        <div class="sidebar-toggle">
+        <div class="layout__sidebar-toggle">
-          <hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSidebar" />
+          <hamburger :is-active="appStore.sidebar.opened" @toggle-click="handleToggleSidebar" />
         </div>
       </div>
-
+      <!-- 主内容区域 -->
-      <div :class="{ hasTagsView: isShowTagsView }" class="main-container">
+      <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
         <TagsView v-if="isShowTagsView" />
         <AppMain />
         <Settings v-if="defaultSettings.showSettings" />
-        <!-- 返回顶部 -->
+        <!-- 返回顶部按钮 -->
         <el-backtop target=".app-main">
           <div class="i-svg:backtop w-6 h-6" />
         </el-backtop>
       </div>
     </div>
 
-    <!-- 左侧和顶部布局 -->
+    <!-- 左侧或顶部布局的主内容区 -->
-    <div v-else :class="{ hasTagsView: isShowTagsView }" class="main-container">
+    <div v-else :class="{ hasTagsView: isShowTagsView }" class="layout__main">
       <NavBar v-if="layout === LayoutEnum.LEFT" />
       <TagsView v-if="isShowTagsView" />
       <AppMain />
       <Settings v-if="defaultSettings.showSettings" />
-      <!-- 返回顶部 -->
+      <!-- 返回顶部按钮 -->
       <el-backtop target=".app-main">
         <div class="i-svg:backtop w-6 h-6" />
       </el-backtop>
@@ -47,11 +44,17 @@
 </template>
 
 <script setup lang="ts">
+// 状态管理
 import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
+
+// 配置
 import defaultSettings from "@/settings";
+
+// 枚举
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { LayoutEnum } from "@/enums/LayoutEnum";
 
+// 组件
 import NavBar from "./components/NavBar/index.vue";
 
 const appStore = useAppStore();
@@ -59,154 +62,161 @@ const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const width = useWindowSize().width;
 
-const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
+// 常量
-const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度（大屏 >=1200px，中屏 >=992px，小屏 >=768px）
-const isOpenSidebar = computed(() => appStore.sidebar.opened);
-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); // 混合布局左侧菜单
 
+// 计算属性
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE); // 是否为移动设备
+const isSidebarOpen = computed(() => appStore.sidebar.opened); // 侧边栏是否展开
+const isShowTagsView = computed(() => settingsStore.tagsView); // 是否显示标签视图
+const layout = computed(() => settingsStore.layout); // 当前布局模式（left、top、mix）
+const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活路径
+const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单路由
+
+// 监听顶部菜单激活路径变化，更新混合布局左侧菜单路由
 watch(
   () => activeTopMenuPath.value,
   (newVal: string) => {
     permissionStore.setMixedLayoutLeftRoutes(newVal);
   },
-  {
+  { deep: true, immediate: true }
-    deep: true,
-    immediate: true,
-  }
 );
 
-const classObj = computed(() => ({
+// 监听窗口宽度变化，调整设备类型和侧边栏状态
-  hideSidebar: !appStore.sidebar.opened,
-  openSidebar: appStore.sidebar.opened,
-  mobile: appStore.device === DeviceEnum.MOBILE,
-  [`layout-${settingsStore.layout}`]: true,
-}));
-
 watchEffect(() => {
-  appStore.toggleDevice(width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP);
+  const isDesktop = width.value >= WIDTH_DESKTOP;
-  if (width.value >= WIDTH_DESKTOP) {
+  appStore.toggleDevice(isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE);
+  if (isDesktop) {
     appStore.openSideBar();
   } else {
     appStore.closeSideBar();
   }
 });
 
-function handleOutsideClick() {
+// 监听路由变化，如果是移动设备且侧边栏展开，则关闭侧边栏
-  appStore.closeSideBar();
-}
-
-function toggleSidebar() {
-  appStore.toggleSidebar();
-}
-
 const route = useRoute();
 watch(route, () => {
-  if (isMobile.value && isOpenSidebar.value) {
+  if (isMobile.value && isSidebarOpen.value) {
     appStore.closeSideBar();
   }
 });
+
+// 计算属性：布局样式
+const layoutClass = computed(() => ({
+  hideSidebar: !appStore.sidebar.opened,
+  openSidebar: appStore.sidebar.opened,
+  mobile: appStore.device === DeviceEnum.MOBILE,
+  [`layout-${settingsStore.layout}`]: true,
+}));
+
+/**
+ * 处理遮罩层点击事件，关闭侧边栏
+ */
+function handleCloseSidebar() {
+  appStore.closeSideBar();
+}
+
+/**
+ * 处理切换侧边栏的展开/收起状态
+ */
+function handleToggleSidebar() {
+  appStore.toggleSidebar();
+}
 </script>
-
 <style lang="scss" scoped>
-.sidebar-container {
+.layout {
-  position: fixed;
+  width: 100%;
-  top: 0;
+  height: 100%;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  width: $sidebar-width;
-  background-color: $menu-background;
-  transition: width 0.28s;
 
-  :deep(.el-menu) {
+  &__overlay {
-    border: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &__sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: $sidebar-width;
+    background-color: $menu-background;
+    transition: width 0.28s;
+
+    :deep(.el-menu) {
+      border: none;
+    }
+  }
+
+  &__main {
+    position: relative;
+    height: 100%;
+    margin-left: $sidebar-width;
+    overflow-y: auto;
+    transition: margin-left 0.28s;
+
+    .fixed-header {
+      position: sticky;
+      top: 0;
+      z-index: 9;
+      transition: width 0.28s;
+    }
   }
 }
 
-.main-container {
+// 占位符选择器
-  position: relative;
+%layout__sidebar--horizontal {
-  height: 100%;
+  width: 100% !important;
-  margin-left: $sidebar-width;
+  height: $navbar-height;
-  overflow-y: auto;
-  transition: margin-left 0.28s;
 
-  .fixed-header {
+  :deep(.el-scrollbar) {
-    position: sticky;
+    flex: 1;
-    top: 0;
+    height: $navbar-height;
-    z-index: 9;
+  }
-    transition: width 0.28s;
+
+  :deep(.el-menu-item),
+  :deep(.el-sub-menu__title),
+  :deep(.el-menu--horizontal) {
+    height: $navbar-height;
+    line-height: $navbar-height;
   }
 }
 
 .layout-top {
-  .sidebar-container {
+  .layout__sidebar {
     position: sticky;
-    z-index: 999;
     display: flex;
-    width: 100% !important;
+    @extend %layout__sidebar--horizontal;
-    height: $navbar-height;
-
-    :deep(.el-scrollbar) {
-      flex: 1;
-      height: $navbar-height;
-    }
-
-    :deep(.el-menu-item),
-    :deep(.el-sub-menu__title),
-    :deep(.el-menu--horizontal) {
-      height: $navbar-height;
-      line-height: $navbar-height;
-    }
-
-    :deep(.el-menu--collapse) {
-      width: 100%;
-    }
   }
 
-  .main-container {
+  .layout__main {
     height: calc(100vh - $navbar-height);
     margin-left: 0;
   }
 }
 
 .layout-mix {
-  .sidebar-container {
+  .layout__sidebar {
-    width: 100% !important;
+    @extend %layout__sidebar--horizontal;
-    height: $navbar-height;
-
-    :deep(.el-scrollbar) {
-      flex: 1;
-      height: $navbar-height;
-    }
-
-    :deep(.el-menu-item),
-    :deep(.el-sub-menu__title),
-    :deep(.el-menu--horizontal) {
-      height: $navbar-height;
-      line-height: $navbar-height;
-    }
-
-    :deep(.el-menu--horizontal.el-menu) {
-      border: none;
-    }
   }
 
-  .mix-container {
+  .layout__container {
     display: flex;
     height: 100%;
     padding-top: $navbar-height;
 
-    .mix-container-sidebar {
+    .layout__sidebar--left {
       position: relative;
       width: $sidebar-width;
       height: 100%;
       background-color: var(--menu-background);
 
       :deep(.el-scrollbar) {
-        // 50px 是底部收缩按钮的高度
         height: calc(100vh - $navbar-height - 50px);
       }
 
@@ -215,7 +225,7 @@ watch(route, () => {
         border: none;
       }
 
-      .sidebar-toggle {
+      .layout__sidebar-toggle {
         position: absolute;
         bottom: 0;
         display: flex;
@@ -224,19 +234,10 @@ watch(route, () => {
         width: 100%;
         height: 50px;
         line-height: 50px;
-        box-shadow: 0 0 6px -2px var(--el-color-primary);
-
-        div:hover {
-          background-color: var(--menu-background);
-        }
-
-        :deep(svg) {
-          color: var(--el-color-primary) !important;
-        }
       }
     }
 
-    .main-container {
+    .layout__main {
       flex: 1;
       min-width: 0;
       margin-left: 0;
@@ -246,24 +247,24 @@ watch(route, () => {
 
 .hideSidebar {
   &.layout-left {
-    .main-container {
+    .layout__main {
       margin-left: $sidebar-width-collapsed;
     }
   }
 
   &.layout-top {
-    .main-container {
+    .layout__main {
       margin-left: 0;
     }
   }
 
   &.layout-mix {
-    .sidebar-container {
+    .layout__sidebar {
       width: 100% !important;
     }
 
-    .mix-container {
+    .layout__container {
-      &-sidebar {
+      .layout__sidebar--left {
         width: $sidebar-width-collapsed;
       }
     }
@@ -271,22 +272,22 @@ watch(route, () => {
 }
 
 .layout-left.hideSidebar {
-  .sidebar-container {
+  .layout__sidebar {
     width: $sidebar-width-collapsed !important;
   }
 
-  .main-container {
+  .layout__main {
     margin-left: $sidebar-width-collapsed;
   }
 
   &.mobile {
-    .sidebar-container {
+    .layout__sidebar {
       pointer-events: none;
       transform: translate3d(-$sidebar-width, 0, 0);
       transition-duration: 0.3s;
     }
 
-    .main-container {
+    .layout__main {
       margin-left: 0;
     }
   }