fix: 🐛 代码规范检测问题修复

Former-commit-id: 6e75bc91ce33ea9e7a17fbcb896f086f768896f4
2023-04-15 23:51:27 +08:00
parent 5b033246bc
commit 0605f89a67
24 changed files with 440 additions and 450 deletions
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -1,33 +1,33 @@
-html.dark{
-  --menuBg:var(--el-bg-color-overlay);
-  --menuText:#fff;
-  --menuActiveText:var(--el-menu-active-color);
-  --menuHover:rgba(0,0,0,.2);
-
+html.dark {
+  --menuBg: var(--el-bg-color-overlay);
+  --menuText: #fff;
+  --menuActiveText: var(--el-menu-active-color);
+  --menuHover: rgb(0 0 0 / 20%);
  --subMenuBg: var(--el-menu-bg-color);
-  --subMenuActiveText:var(--el-menu-active-color);
-  --subMenuHover: rgba(0,0,0,.2);
-
+  --subMenuActiveText: var(--el-menu-active-color);
+  --subMenuHover: rgb(0 0 0 / 20%);

  .navbar {
-    background-color: var(--el-bg-color);
    color: var(--el-text-color-regular);
-    .navbar-setting-item:hover{
+    background-color: var(--el-bg-color);
+
+    .navbar-setting-item:hover {
      background: var(--el-fill-color-light);
    }
  }

-  .right-panel-btn{
+  .right-panel-btn {
    background-color: var(--el-color-primary-dark);
  }
-  .svg-icon,svg{
+
+  .svg-icon,
+  svg {
    fill: var(--el-text-color-regular);
  }

-
-  .sidebar-container{
+  .sidebar-container {
    .el-menu-item.is-active .svg-icon {
-      fill:  var(--el-color-primary);
+      fill: var(--el-color-primary);
    }
  }
 }
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,18 +1,16 @@
-@import './sidebar.scss';
-@import './reset.scss';
-@import './dark.scss';
-
+@import "./sidebar";
+@import "./reset";
+@import "./dark";

 .app-container {
-    padding: 20px;
-    .search {
-      padding: 18px 0 0 10px;
-      margin-bottom: 10px;
-      border-radius: 4px;
-      border: 1px solid var(--el-border-color-light);
-      box-shadow: var(--el-box-shadow-light);
-      background-color: var(--el-bg-color-overlay);
+  padding: 20px;
+
+  .search {
+    padding: 18px 0 0 10px;
+    margin-bottom: 10px;
+    background-color: var(--el-bg-color-overlay);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 4px;
+    box-shadow: var(--el-box-shadow-light);
  }
-
 }
-
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -2,9 +2,9 @@
 ::before,
 ::after {
  box-sizing: border-box;
-  border-width: 0;
+  border-color: currentcolor;
  border-style: solid;
-  border-color: currentColor;
+  border-width: 0;
 }

 #app {
@@ -13,69 +13,63 @@
 }

 html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
+  box-sizing: border-box;
  width: 100%;
  height: 100%;
-  box-sizing: border-box;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
 }

 body {
-  margin: 0;
-  line-height: inherit;
  width: 100%;
  height: 100%;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  line-height: inherit;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }

-
 a {
  color: inherit;
  text-decoration: inherit;
 }

-
 img,
-svg
- {
+svg {
  display: inline-block;
 }
+
 svg {
  vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
 }

-
-ul,li{
-  margin: 0;
+ul,
+li {
  padding: 0;
+  margin: 0;
  list-style: none;
 }

-
 *,
 *::before,
 *::after {
  box-sizing: inherit;
 }

-a:focus,
-a:active ,
-div:focus
-{
-  outline: none;
-}
-
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
  color: inherit;
  text-decoration: none;
+  cursor: pointer;
 }

+a:focus,
+a:active,
+div:focus {
+  outline: none;
+}
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,22 +1,22 @@
 #app {
  .main-container {
-    min-height: 100%;
-    transition: margin-left 0.28s;
-    margin-left: $sideBarWidth;
    position: relative;
+    min-height: 100%;
+    margin-left: $sideBarWidth;
+    transition: margin-left 0.28s;
  }

  .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
-    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
    overflow: hidden;
+    background-color: $menuBg;
+    transition: width 0.28s;

    // reset element-ui css
    .horizontal-collapse-transition {
@@ -29,7 +29,7 @@
    }

    .el-scrollbar__bar.is-vertical {
-      right: 0px;
+      right: 0;
    }

    .el-scrollbar {
@@ -46,7 +46,6 @@
      display: none;
    }

-
    .svg-icon {
      margin-right: 16px;
    }
@@ -57,9 +56,9 @@
    }

    .el-menu {
-      border: none;
-      height: 100%;
      width: 100% !important;
+      height: 100%;
+      border: none;
    }

    // menu hover
@@ -69,11 +68,11 @@
      }
    }

-    .is-active>.el-sub-menu__title {
+    .is-active > .el-sub-menu__title {
      color: $subMenuActiveText !important;
    }

-    & .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: $subMenuBg !important;
@@ -89,7 +88,7 @@
      width: 54px !important;

      .svg-icon {
-        margin-right: 0px;
+        margin-right: 0;
      }
    }

@@ -100,7 +99,7 @@
    .el-sub-menu {
      overflow: hidden;

-      &>.el-sub-menu__title {
+      & > .el-sub-menu__title {
        padding: 0 !important;

        .svg-icon {
@@ -119,13 +118,13 @@

    .el-menu--collapse {
      .el-sub-menu {
-        &>.el-sub-menu__title {
-          &>span {
-            height: 0;
+        & > .el-sub-menu__title {
+          & > span {
+            display: inline-block;
            width: 0;
+            height: 0;
            overflow: hidden;
            visibility: hidden;
-            display: inline-block;
          }
        }
      }
@@ -139,12 +138,12 @@
  // mobile responsive
  .mobile {
    .main-container {
-      margin-left: 0px;
+      margin-left: 0;
    }

    .sidebar-container {
-      transition: transform 0.28s;
      width: $sideBarWidth !important;
+      transition: transform 0.28s;
    }

    &.hideSidebar {
@@ -157,7 +156,6 @@
  }

  .withoutAnimation {
-
    .main-container,
    .sidebar-container {
      transition: none;
@@ -167,7 +165,7 @@

 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
    .svg-icon {
      margin-right: 16px;
    }
@@ -178,7 +176,7 @@
    }
  }

-  .nest-menu .el-sub-menu>.el-sub-menu__title,
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
  .el-menu-item {
    &:hover {
      // you can use $subMenuHover
@@ -187,7 +185,7 @@
  }

  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,25 +1,22 @@
 // 全局SCSS变量

-:root{
-  --menuBg:#304156;
-  --menuText:#bfcbd9;
-  --menuActiveText:#409eff;
-  --menuHover:#263445;
-
+:root {
+  --menuBg: #304156;
+  --menuText: #bfcbd9;
+  --menuActiveText: #409eff;
+  --menuHover: #263445;
  --subMenuBg: #1f2d3d;
  --subMenuActiveText: #f4f4f5;
  --subMenuHover: #001528;
-
 }

-
 $menuBg: var(--menuBg);
 $menuText: var(--menuText);
 $menuActiveText: var(--menuActiveText);
 $menuHover: var(--menuHover);

-$subMenuBg:var(--subMenuBg);
-$subMenuActiveText:var(--subMenuActiveText);
-$subMenuHover:var(--subMenuHover);
+$subMenuBg: var(--subMenuBg);
+$subMenuActiveText: var(--subMenuActiveText);
+$subMenuHover: var(--subMenuHover);

 $sideBarWidth: 210px;