💅 fix: stylelint scss style

src/App.vue

@@ -75,5 +75,5 @@ export default {
 </script>
 
 <style lang="scss">
-@use '@/styles/index.scss';
+@use "@/styles/index.scss";
 </style>

src/components/DialogModal/index.vue

@@ -117,61 +117,73 @@ export default defineComponent({
 
 <style lang="scss">
 .dialog-modal {
-  background: #FFFFFF;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%);
   border-radius: 8px;
   border: 1px solid #fff;
-  font-family: PingFangSC-Medium, PingFang SC;
+  font-family: PingFangSC-Medium, "PingFang SC";
   overflow: hidden;
+
   & > .el-dialog__header {
     display: none;
   }
+
   & > .el-dialog__body {
     padding: 0;
   }
+
   & > .el-dialog__footer {
     display: none;
   }
+
   .dialog-modal__box {
     display: flex;
     height: 627px;
+
     .dialog-modal__box-left {
       min-width: 118px;
       background-color: #1e3264;
       color: #fff;
       background-size: cover;
       background-repeat: no-repeat;
     }
+
     .dialog-modal__box-right {
       flex: 1;
       display: flex;
       min-width: 0;
       flex-direction: column;
+
       .dialog-modal__box-right__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         min-height: 50px;
         border-bottom: 1px solid #dcdfe6;
         padding: 0 16px 0 24px;
+
         .left-title {
           display: flex;
           align-items: center;
+
           .header-title {
             font-size: 18px;
             font-weight: 500;
             color: #303133;
           }
         }
+
         .right-close {
           cursor: pointer;
         }
       }
+
       .dialog-modal__box-right__body {
         flex: 1;
         min-height: 0;
         overflow-y: auto;
       }
+
       .dialog-modal__box-right__footer {
         display: flex;
         justify-content: flex-end;

src/components/Footer/index.vue

@@ -28,7 +28,7 @@ import { defineComponent, ref } from 'vue'
 import Octocat from './octocat.vue'
 
 export default defineComponent({
-  name: 'Footer',
+  name: 'MyFooter',
   components: {
     Octocat
   },
@@ -50,11 +50,14 @@ export default defineComponent({
 .footer {
   margin: 0 auto;
   width: 100%;
+
   &.border {
-    border-top: 1px solid rgba(#3c3c43, .12);
+    border-top: 1px solid rgba(#3c3c43, 0.12);
   }
+
   .container {
-    padding: 14px 0 14px;
+    padding: 14px 0;
+
     .text {
       display: flex;
       justify-content: center;
@@ -63,16 +66,17 @@ export default defineComponent({
       margin: 0;
       text-align: center;
       line-height: 1;
-      font-size: 1rem;
       color: #929292;
     }
   }
 }
+
 .github-link {
   color: #555;
-  border-bottom: 1px solid rgba(#7d7d7d, .3);
-  transition: border .3s ease-in-out;
+  border-bottom: 1px solid rgba(#7d7d7d, 0.3);
+  transition: border 0.3s ease-in-out;
   margin-left: 6px;
+
   &:hover {
     border-color: #7d7d7d;
   }

src/components/Footer/octocat.vue

@@ -37,7 +37,8 @@ export default defineComponent({
   width: 22px;
   margin: 0 6px;
   color: #71717a;
-  transition: .2s color;
+  transition: 0.2s color;
+
   &:hover {
     color: #3f3f46;
   }

src/components/IconFont/index.vue

@@ -103,16 +103,20 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .icon-font {
-  width: 1em; height: 1em;
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
-  fill: currentColor;
+  fill: currentcolor;
   overflow: hidden;
+
   &.middle {
     vertical-align: middle;
   }
+
   &.cursor {
     cursor: pointer;
   }
+
   &.disabled {
     color: #c0c4cc;
     cursor: not-allowed;

src/components/Layout/LayoutArea.vue

@@ -24,7 +24,7 @@
         </section>
       </div>
     </div>
-    <Footer show-border />
+    <MyFooter show-border />
   </div>
 </template>
 
@@ -42,6 +42,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 $headerHeight: 48px;
+
 .layout-area-container {
   display: flex;
   flex-direction: column;
@@ -50,27 +51,32 @@ $headerHeight: 48px;
   min-height: 100vh;
   overflow: hidden;
   background: #f0f2f5;
+
   .layout-area-container__top {
 
   }
+
   .layout-area-container__bottom {
     display: flex;
     flex: 1;
     position: relative;
     color: #303133;
+
     .layout-area-container__bottom__inner {
       position: absolute;
       top: 1px;
       left: 0;
       right: 0;
       bottom: 0;
       display: flex;
+
       .side-layout-area-menu-bar {
         position: relative;
         flex-direction: column;
         width: 256px;
-        transition: width .28s;
+        transition: width 0.28s;
         border-right: 1px solid #dcdfe6;
+
         .layout-area-menu-bar__inner {
           position: absolute;
           top: 0;
@@ -83,15 +89,18 @@ $headerHeight: 48px;
           scroll-behavior: smooth;
         }
       }
+
       .content-section-container {
         display: flex;
         flex: auto;
         flex-direction: column;
         min-width: 0;
         background-color: #f0f2f5;
+
         .main-content-box {
           flex: auto;
           position: relative;
+
           .inner-content {
             padding: 24px;
             position: absolute;

src/components/Layout/LayoutSection.vue

@@ -62,36 +62,44 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
+
   .layout-section-container__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: 40px;
+
     .layout-section-container__header-head {
       color: #303133;
+
       .layout-section-container__header-title {
         height: 18px;
         font-size: 18px;
         line-height: 18px;
         font-weight: 500;
       }
     }
+
     .layout-section-container__header-action {
 
     }
   }
+
   .layout-section-container__content {
     display: flex;
     flex-direction: column;
     position: relative;
     margin-top: 16px;
     flex: auto;
+
     .content-divider {
       height: 1px;
       background: #dcdfe6;
       margin-bottom: 6px;
     }
+
     .layout-section-container__content-inner {
+
       &.is-flex {
         flex: 1;
         display: flex;

src/components/Navigation/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dropdown
     class="navigation-avatar"
-    trigger="click"
+    trigger="hover"
   >
     <div style="padding: 0 12px;">
       <img
@@ -74,12 +74,14 @@ export default defineComponent({
   align-items: center;
   cursor: pointer;
   user-select: none;
+
   img {
     width: 24px;
     border: 1px solid $color-primary;
     border-radius: 50%;
   }
 }
+
 .navigation-avatar__dropdown-command {
   display: flex;
   align-items: center;

src/components/Navigation/NavBar.vue

@@ -40,9 +40,11 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 $headerHeight: 48px;
+
 .navigation-navbar-header-container {
   height: $headerHeight;
   line-height: $headerHeight;
+
   &.fixed-header {
     position: fixed;
     width: 100%;
@@ -51,7 +53,9 @@ $headerHeight: 48px;
     right: 0;
     z-index: 3;
   }
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
   .navbar-header-box {
     display: flex;
     height: 100%;

src/components/Navigation/Side/SideAction.vue

@@ -43,15 +43,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 .side-action-container {
   position: relative;
+
   .action-list {
     display: flex;
     white-space: nowrap;
+
     .action-item {
       height: 100%;
       line-height: inherit;
       background-color: #eee;
       padding: 0 12px;
       margin-right: 5px;
+
       &:last-child {
         // margin-right: 0;
       }

src/components/Navigation/Side/SideGoBack.vue

@@ -34,19 +34,23 @@ export default defineComponent({
   position: relative;
   height: 100%;
   white-space: nowrap;
+
   & > a {
     display: flex;
     align-items: center;
     height: 100%;
     color: #303133;
+
     .go-back-img {
       height: 32px;
     }
+
     .go-back-icon {
       color: #606266;
       font-size: 24px;
       padding-left: 8px;
     }
+
     .go-back-title {
       height: 22px;
       line-height: 22px;

src/components/Navigation/Side/SideLogo.vue

@@ -39,14 +39,17 @@ export default defineComponent({
   position: relative;
   height: 100%;
   white-space: nowrap;
+
   & > a {
     display: flex;
     align-items: center;
     height: 100%;
     color: #303133;
+
     .side-logo-img {
       width: 40px;
     }
+
     .side-logo-title {
       height: 32px;
       line-height: 32px;