refactor: 删除无用外部样式文件

src/layout/components/Sidebar/components/SidebarLogo.vue

@@ -54,8 +54,4 @@ const logo = ref(new URL(`../../../../assets/logo.png`, import.meta.url).href);
     width: $sidebar-width;
   }
 }
-
-.mobile .logo-container {
-  width: $sidebar-width-collapsed;
-}
 </style>

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

@@ -133,24 +133,57 @@ function resolvePath(routePath: string) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-.submenu-title-noDropdown {
+.hideSidebar {
-  position: relative;
+  .submenu-title-noDropdown {
-
+    position: relative;
-  .el-tooltip {
     padding: 0 !important;
 
-    .sub-el-icon {
+    .el-tooltip {
-      margin-left: 19px;
+      padding: 0 !important;
+
+      .sub-el-icon {
+        margin-left: 19px;
+      }
+    }
+
+    & > span {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
     }
   }
 
-  & > span {
+  .el-sub-menu {
-    display: inline-block;
-    width: 0;
-    height: 0;
     overflow: hidden;
-    visibility: hidden;
+
+    & > .el-sub-menu__title {
+      padding: 0 !important;
+
+      .sub-el-icon {
+        margin-left: 19px;
+      }
+
+      .el-sub-menu__icon-arrow {
+        display: none;
+      }
+    }
+  }
+
+  .el-menu--collapse {
+    .el-sub-menu {
+      & > .el-sub-menu__title {
+        & > span {
+          display: inline-block;
+          width: 0;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+    }
   }
 }
 </style>

src/layout/index.vue

@@ -84,8 +84,8 @@ watch(
 const classObj = computed(() => ({
   hideSidebar: !appStore.sidebar.opened,
   openSidebar: appStore.sidebar.opened,
-  withoutAnimation: appStore.sidebar.withoutAnimation,
   mobile: appStore.device === "mobile",
+  "layout-left": layout.value === "left",
   "layout-top": layout.value === "top",
   "layout-mix": layout.value === "mix",
 }));
@@ -93,20 +93,20 @@ const classObj = computed(() => ({
 watchEffect(() => {
   if (width.value < WIDTH) {
     appStore.toggleDevice("mobile");
-    appStore.closeSideBar(true);
+    appStore.closeSideBar();
   } else {
     appStore.toggleDevice("desktop");
 
     if (width.value >= 1200) {
-      appStore.openSideBar(true);
+      appStore.openSideBar();
     } else {
-      appStore.closeSideBar(true);
+      appStore.closeSideBar();
     }
   }
 });
 
 function handleOutsideClick() {
-  appStore.closeSideBar(false);
+  appStore.closeSideBar();
 }
 
 function toggleSidebar() {
@@ -249,6 +249,14 @@ function toggleSidebar() {
 }
 
 .hideSidebar {
+  .sidebar-container {
+    width: $sidebar-width-collapsed !important;
+  }
+
+  .main-container {
+    margin-left: $sidebar-width-collapsed;
+  }
+
   .mix-container__left {
     width: $sidebar-width-collapsed;
   }
@@ -262,7 +270,19 @@ function toggleSidebar() {
       width: 100%;
     }
 
-    .layout-top {
+    &.layout-left {
+      .main-container {
+        margin-left: 0;
+      }
+
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sidebar-width, 0, 0);
+      }
+    }
+
+    &.layout-top {
       .sidebar-container {
         z-index: 999;
         display: flex;

src/store/modules/app.ts

@@ -32,7 +32,6 @@ export const useAppStore = defineStore("app", () => {
   // actions
   function toggleSidebar() {
     sidebar.opened = !sidebar.opened;
-    sidebar.withoutAnimation = false;
     if (sidebar.opened) {
       sidebarStatus.value = "opened";
     } else {
@@ -40,15 +39,13 @@ export const useAppStore = defineStore("app", () => {
     }
   }
 
-  function closeSideBar(withoutAnimation: boolean) {
+  function closeSideBar() {
     sidebar.opened = false;
-    sidebar.withoutAnimation = withoutAnimation;
     sidebarStatus.value = "closed";
   }
 
-  function openSideBar(withoutAnimation: boolean) {
+  function openSideBar() {
     sidebar.opened = true;
-    sidebar.withoutAnimation = withoutAnimation;
     sidebarStatus.value = "opened";
   }
 

src/styles/dark.scss

@@ -1,41 +0,0 @@
-html.dark {
-  --menu-background: var(--el-bg-color-overlay);
-  --menu-text: #fff;
-  --menuActiveText: var(--el-menu-active-color);
-  --menuHover: rgb(0 0 0 / 20%);
-  --sub-menu-background: var(--el-menu-bg-color);
-  --subMenuActiveText: var(--el-menu-active-color);
-  --subMenuHover: rgb(0 0 0 / 20%);
-
-  // wang-editor toolbar
-  --w-e-toolbar-bg-color: var(--el-bg-color-overlay);
-  --w-e-toolbar-color: var(--el-text-color-regulary);
-  --w-e-toolbar-active-bg-color: var(--el-bg-color-page);
-  --w-e-toolbar-active-color: var(--el-color-info-dark-2);
-  --w-e-toolbar-disabled-color: var(--el-disabled-text-color);
-  --w-e-toolbar-border-color: var(--el-color-info-light-8);
-
-  // wang-editor textarea
-  --w-e-textarea-bg-color: var(--el-bg-color-overlay);
-  --w-e-textarea-color: var(--el-text-color-regulary);
-  --w-e-textarea-slight-border-color: var(--el-color-primary);
-  --w-e-textarea-slight-bg-color: rgb(var(--el-color-primary-rgb) 0.1);
-  --w-e-textarea-selected-border-color: var(--el-color-primary);
-  --w-e-textarea-border-color: var(--el-color-info-light-5);
-
-  // // wang-editor modal
-  --w-e-modal-button-bg-color: var(--el-button-bg-color);
-  --w-e-modal-button-border-color: var(--el-color-info-light-3);
-
-  .navbar {
-    background-color: var(--el-bg-color);
-
-    .setting-container .setting-item:hover {
-      background: var(--el-fill-color-light);
-    }
-  }
-
-  .right-panel-btn {
-    background-color: var(--el-color-primary-dark);
-  }
-}

src/styles/index.scss

@@ -1,7 +1,5 @@
 @import "./transition";
-@import "./sidebar";
 @import "./reset";
-@import "./dark";
 
 .app-container {
   padding: 10px;

src/styles/sidebar.scss

@@ -1,141 +0,0 @@
-.app {
-  .hideSidebar {
-    .mix-wrapper__left {
-      width: 54px;
-    }
-
-    .sidebar-container {
-      width: 54px !important;
-
-      .header {
-        .logo-wrap {
-          width: 54px !important;
-          transition: transform 0.28s;
-        }
-      }
-    }
-
-    .main-container {
-      margin-left: 54px;
-    }
-
-    .submenu-title-noDropdown {
-      position: relative;
-      padding: 0 !important;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-      }
-
-      & > span {
-        display: inline-block;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-      }
-    }
-
-    .el-sub-menu {
-      overflow: hidden;
-
-      & > .el-sub-menu__title {
-        padding: 0 !important;
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-
-        .el-sub-menu__icon-arrow {
-          display: none;
-        }
-      }
-    }
-
-    .el-menu--collapse {
-      .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
-            display: inline-block;
-            width: 0;
-            height: 0;
-            overflow: hidden;
-            visibility: hidden;
-          }
-        }
-      }
-    }
-  }
-
-  .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $sidebar-width !important;
-  }
-
-  // mobile responsive
-  .mobile {
-    .main-container {
-      margin-left: 0;
-    }
-
-    .sidebar-container {
-      width: $sidebar-width !important;
-      transition: transform 0.28s;
-    }
-
-    &.hideSidebar:not(.layout-mix, .layout-top) {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sidebar-width, 0, 0);
-      }
-    }
-  }
-
-  .withoutAnimation {
-    .main-container,
-    .sidebar-container {
-      transition: none;
-    }
-  }
-}
-
-// when menu collapsed
-.el-menu--vertical {
-  & > .el-menu {
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-  }
-
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menu-hover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
-}