perf: 使用pnpm lint格式化代码，适配最新版的stylelint规则

.stylelintignore

@@ -1,3 +1,4 @@
 /dist/*
 /public/*
 public/*
+src/style/reset.scss

index.html

@@ -21,50 +21,50 @@
         html,
         body,
         #app {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           width: 100%;
           height: 100%;
-          display: flex;
-          position: relative;
-          justify-content: center;
-          align-items: center;
           overflow: hidden;
         }
 
         .loader,
-        .loader:before,
+        .loader::before,
-        .loader:after {
+        .loader::after {
-          border-radius: 50%;
           width: 2.5em;
           height: 2.5em;
-          animation-fill-mode: both;
+          border-radius: 50%;
           animation: loadAnimation 1.8s infinite ease-in-out;
+          animation-fill-mode: both;
         }
 
         .loader {
-          color: #406eeb;
-          font-size: 10px;
-          margin: 80px auto;
           position: relative;
+          top: 0;
+          margin: 80px auto;
+          font-size: 10px;
+          color: #406eeb;
           text-indent: -9999em;
           transform: translateZ(0);
-          animation-delay: -0.16s;
-          top: 0;
           transform: translate(-50%, 0);
+          animation-delay: -0.16s;
         }
 
-        .loader:before,
+        .loader::before,
-        .loader:after {
+        .loader::after {
-          content: "";
           position: absolute;
           top: 0;
+          content: "";
         }
 
-        .loader:before {
+        .loader::before {
           left: -3.5em;
           animation-delay: -0.32s;
         }
 
-        .loader:after {
+        .loader::after {
           left: 3.5em;
         }
 

src/components/ReFlop/src/index.vue

@@ -123,9 +123,9 @@ onUnmounted(() => {
 
 .flip-clock em {
   display: inline-block;
-  line-height: 102px;
   font-size: 66px;
   font-style: normal;
+  line-height: 102px;
   vertical-align: top;
 }
 </style>

src/components/ReFlowChart/src/Control.vue

@@ -132,10 +132,10 @@ onMounted(() => {
 </template>
 
 <style scoped>
-@import "./assets/iconfont/iconfont.css";
+@import url("./assets/iconfont/iconfont.css");
 
 .control-container {
-  background: hsla(0, 0%, 100%, 0.8);
+  background: hsl(0deg 0% 100% / 80%);
   box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
 }
 

src/components/ReIcon/src/Select.vue

@@ -200,8 +200,8 @@ watch(
 
 .icon-item {
   &:hover {
-    border-color: var(--el-color-primary);
     color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
     transition: all 0.4s;
     transform: scaleX(1.05);
   }
@@ -224,15 +224,15 @@ watch(
 }
 
 :deep(.el-tabs__item) {
+  height: 30px;
   font-size: 12px;
   font-weight: normal;
-  height: 30px;
   line-height: 30px;
 }
 
 :deep(.el-tabs__header),
 :deep(.el-tabs__nav-wrap) {
-  margin: 0;
   position: static;
+  margin: 0;
 }
 </style>

src/components/ReQrcode/src/index.scss

@@ -1,6 +1,7 @@
 .qrcode {
   &--disabled {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgb(255 255 255 / 95%);
+
     & > div {
       transform: translate(-50%, -50%);
     }

src/components/ReTreeLine/index.scss

@@ -8,42 +8,48 @@ $--element-tree-line-width: 1px !default;
 }
 
 .element-tree-node-label-wrapper {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
 }
+
 .element-tree-node-label {
   font-size: 12px;
 }
+
 .element-tree-node-line-ver {
-  display: block;
   position: absolute;
   top: 0;
   left: 0;
+  display: block;
   height: 100%;
   border-left: $--element-tree-line-width $--element-tree-line-style
     $--element-tree-line-color;
+
   &.last-node-line {
     border-left: $--element-tree-line-width $--element-tree-line-style
       transparent;
   }
+
   &.last-node-isLeaf-line {
     height: 50%;
   }
 }
+
 .element-tree-node-line-hor {
-  display: block;
   position: absolute;
   top: 50%;
   left: 0;
+  display: block;
   height: 0;
   border-bottom: $--element-tree-line-width $--element-tree-line-style
     $--element-tree-line-color;
 }
+
 .element-tree-node-label-line {
   flex: 1;
-  border-top: $--element-tree-line-width $--element-tree-line-style
-    $--element-tree-line-color;
   align-self: center;
   margin: 0 10px;
+  border-top: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
 }

src/layout/components/appMain.vue

@@ -130,16 +130,16 @@ const transitionMain = defineComponent({
 
 <style scoped>
 .app-main {
+  position: relative;
   width: 100%;
   height: 100vh;
-  position: relative;
   overflow-x: hidden;
 }
 
 .app-main-nofixed-header {
+  position: relative;
   width: 100%;
   min-height: 100vh;
-  position: relative;
 }
 
 .main-content {

src/layout/components/navbar.vue

@@ -121,28 +121,28 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
   overflow: hidden;
 
   .hamburger-container {
-    line-height: 48px;
-    height: 100%;
     float: left;
+    height: 100%;
+    line-height: 48px;
     cursor: pointer;
   }
 
   .vertical-header-right {
     display: flex;
+    align-items: center;
+    justify-content: flex-end;
     min-width: 280px;
     height: 48px;
-    align-items: center;
     color: #000000d9;
-    justify-content: flex-end;
 
     .el-dropdown-link {
-      height: 48px;
-      padding: 10px;
       display: flex;
       align-items: center;
       justify-content: space-around;
-      cursor: pointer;
+      height: 48px;
+      padding: 10px;
       color: #000000d9;
+      cursor: pointer;
 
       p {
         font-size: 14px;
@@ -182,9 +182,9 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
   max-width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
     display: inline-flex;
     flex-wrap: wrap;
+    min-width: 100%;
   }
 }
 </style>

src/layout/components/notice/index.vue

@@ -46,8 +46,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 48px;
   width: 60px;
+  height: 48px;
   cursor: pointer;
 
   .header-notice-icon {
@@ -59,7 +59,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   width: 330px;
 
   .noticeList-container {
-    padding: 15px 24px 0 24px;
+    padding: 15px 24px 0;
   }
 
   :deep(.el-tabs__header) {
@@ -71,7 +71,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   }
 
   :deep(.el-tabs__nav-wrap) {
-    padding: 0 36px 0 36px;
+    padding: 0 36px;
   }
 }
 </style>

src/layout/components/notice/noticeItem.vue

@@ -118,6 +118,7 @@ function hoverDescription(event, description) {
   align-items: flex-start;
   justify-content: space-between;
   padding: 12px 0;
+
   // border-bottom: 1px solid #f0f0f0;
 
   .notice-container-avatar {
@@ -127,15 +128,15 @@ function hoverDescription(event, description) {
 
   .notice-container-text {
     display: flex;
+    flex: 1;
     flex-direction: column;
     justify-content: space-between;
-    flex: 1;
 
     .notice-text-title {
       display: flex;
       margin-bottom: 8px;
-      font-weight: 400;
       font-size: 14px;
+      font-weight: 400;
       line-height: 1.5715;
       cursor: pointer;
 
@@ -143,8 +144,8 @@ function hoverDescription(event, description) {
         flex: 1;
         width: 200px;
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .notice-title-extra {
@@ -162,8 +163,8 @@ function hoverDescription(event, description) {
 
     .notice-text-description {
       display: -webkit-box;
-      text-overflow: ellipsis;
       overflow: hidden;
+      text-overflow: ellipsis;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
     }

src/layout/components/panel/index.vue

@@ -60,9 +60,9 @@ emitter.on("openPanel", () => {
 
 <style>
 .showright-panel {
-  overflow: hidden;
   position: relative;
   width: calc(100% - 15px);
+  overflow: hidden;
 }
 </style>
 
@@ -71,23 +71,23 @@ emitter.on("openPanel", () => {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: -1;
+  background: rgb(0 0 0 / 20%);
   opacity: 0;
   transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  background: rgba(0, 0, 0, 0.2);
-  z-index: -1;
 }
 
 .right-panel {
-  width: 100%;
-  max-width: 315px;
-  height: 100vh;
   position: fixed;
   top: 0;
   right: 0;
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+  z-index: 40000;
+  width: 100%;
+  max-width: 315px;
+  height: 100vh;
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  z-index: 40000;
 }
 
 .show {
@@ -95,9 +95,9 @@ emitter.on("openPanel", () => {
 
   .right-panel-background {
     z-index: 20000;
-    opacity: 1;
     width: 100%;
     height: 100%;
+    opacity: 1;
   }
 
   .right-panel {
@@ -106,20 +106,20 @@ emitter.on("openPanel", () => {
 }
 
 .handle-button {
+  position: absolute;
+  top: 45%;
+  left: -48px;
+  z-index: 0;
   width: 48px;
   height: 48px;
-  position: absolute;
-  left: -48px;
-  text-align: center;
   font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
+  line-height: 48px;
-  z-index: 0;
+  color: #fff;
+  text-align: center;
   pointer-events: auto;
   cursor: pointer;
-  color: #fff;
+  background: rgb(24 144 255);
-  line-height: 48px;
+  border-radius: 6px 0 0 6px !important;
-  top: 45%;
-  background: rgb(24, 144, 255);
 
   i {
     font-size: 24px;
@@ -128,24 +128,24 @@ emitter.on("openPanel", () => {
 }
 
 .right-panel-items {
-  margin-top: 60px;
   height: calc(100vh - 60px);
+  margin-top: 60px;
   overflow-y: auto;
 }
 
 .project-configuration {
+  position: fixed;
+  top: 15px;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 30px;
-  position: fixed;
-  justify-content: space-between;
-  align-items: center;
-  top: 15px;
   margin-left: 10px;
 }
 
 :deep(.el-divider--horizontal) {
   width: 90%;
-  margin: 20px auto 0 auto;
+  margin: 20px auto 0;
 }
 </style>

src/layout/components/search/components/SearchResult.vue

@@ -84,11 +84,11 @@ function handleTo() {
     display: flex;
     align-items: center;
     height: 56px;
-    margin-top: 8px;
     padding: 14px;
-    border-radius: 4px;
+    margin-top: 8px;
     cursor: pointer;
     border: 0.1px solid #ccc;
+    border-radius: 4px;
     transition: all 0.3s;
 
     &-title {

src/layout/components/setting/index.vue

@@ -418,35 +418,35 @@ onBeforeMount(() => {
 
   li {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     margin: 25px;
   }
 }
 
 .pure-datatheme {
+  display: block;
   width: 100%;
   height: 50px;
-  text-align: center;
-  display: block;
   padding-top: 25px;
+  text-align: center;
 }
 
 .pure-theme {
-  margin-top: 25px;
-  width: 100%;
-  height: 50px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  width: 100%;
+  height: 50px;
+  margin-top: 25px;
 
   li {
+    position: relative;
     width: 18%;
     height: 45px;
-    background: #f0f2f5;
-    position: relative;
     overflow: hidden;
     cursor: pointer;
+    background: #f0f2f5;
     border-radius: 4px;
     box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
 
@@ -459,13 +459,13 @@ onBeforeMount(() => {
         }
 
         &:nth-child(2) {
-          width: 70%;
+          position: absolute;
-          height: 30%;
           top: 0;
           right: 0;
+          width: 70%;
+          height: 30%;
           background: #fff;
           box-shadow: 0 0 1px #888;
-          position: absolute;
         }
       }
     }
@@ -491,13 +491,13 @@ onBeforeMount(() => {
         }
 
         &:nth-child(2) {
-          width: 30%;
+          position: absolute;
-          height: 70%;
           bottom: 0;
           left: 0;
+          width: 30%;
+          height: 70%;
           background: #fff;
           box-shadow: 0 0 1px #888;
-          position: absolute;
         }
       }
     }
@@ -505,11 +505,11 @@ onBeforeMount(() => {
 }
 
 .theme-color {
+  display: flex;
+  justify-content: center;
   width: 100%;
   height: 40px;
   margin-top: 20px;
-  display: flex;
-  justify-content: center;
 
   li {
     float: left;
@@ -519,8 +519,8 @@ onBeforeMount(() => {
     margin-right: 8px;
     font-weight: 700;
     text-align: center;
-    border-radius: 2px;
     cursor: pointer;
+    border-radius: 2px;
 
     &:nth-child(2) {
       border: 1px solid #ddd;

src/layout/components/sidebar/horizontal.vue

@@ -156,9 +156,9 @@ watch(
   max-width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
     display: inline-flex;
     flex-wrap: wrap;
+    min-width: 100%;
   }
 }
 </style>

src/layout/components/sidebar/logo.vue

@@ -37,33 +37,33 @@ const { title } = useNav();
 
 <style lang="scss" scoped>
 .sidebar-logo-container {
+  position: relative;
   width: 100%;
   height: 48px;
   overflow: hidden;
-  position: relative;
 
   .sidebar-logo-link {
-    height: 100%;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
+    height: 100%;
 
     img {
-      height: 32px;
       display: inline-block;
+      height: 32px;
     }
 
     .sidebar-title {
-      height: 32px;
-      line-height: 32px;
-      margin: 2px 0 0 12px;
-      color: $subMenuActiveText;
       display: inline-block;
+      height: 32px;
+      margin: 2px 0 0 12px;
       overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       font-size: 18px;
       font-weight: 600;
+      line-height: 32px;
+      color: $subMenuActiveText;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

src/layout/components/sidebar/mixNav.vue

@@ -188,9 +188,9 @@ watch(
   max-width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
     display: inline-flex;
     flex-wrap: wrap;
+    min-width: 100%;
   }
 }
 </style>

src/layout/components/tag/index.scss

@@ -39,41 +39,41 @@
 }
 
 .tags-view {
-  width: 100%;
+  position: relative;
-  font-size: 14px;
   display: flex;
   align-items: center;
+  width: 100%;
+  font-size: 14px;
   color: var(--el-text-color-primary);
   background: #fff;
-  position: relative;
   box-shadow: 0 0 1px #888;
 
   .scroll-item {
-    border-radius: 3px 3px 0 0;
-    padding: 0 6px;
-    box-shadow: 0 0 1px #888;
     position: relative;
-    margin-right: 4px;
-    height: 28px;
     display: inline-block;
+    height: 28px;
+    padding: 0 6px;
+    margin-right: 4px;
     line-height: 28px;
-    transition: all 0.4s;
     cursor: pointer;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 0 1px #888;
+    transition: all 0.4s;
 
     .el-icon-close {
+      position: absolute;
+      top: 50%;
       font-size: 10px;
       color: var(--el-color-primary);
       cursor: pointer;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
       transition: font-size 0.2s;
+      transform: translate(-50%, -50%);
 
       &:hover {
-        border-radius: 50%;
+        font-size: 13px;
         color: #fff;
         background: #b4bccc;
-        font-size: 13px;
+        border-radius: 50%;
       }
     }
 
@@ -91,24 +91,24 @@
   }
 
   a {
-    text-decoration: none;
-    color: var(--el-text-color-primary);
     padding: 0 4px;
+    color: var(--el-text-color-primary);
+    text-decoration: none;
   }
 
   .scroll-container {
-    flex: 1;
-    overflow: hidden;
-    padding: 5px 0;
-    white-space: nowrap;
     position: relative;
+    flex: 1;
+    padding: 5px 0;
+    overflow: hidden;
+    white-space: nowrap;
 
     .tab {
       position: relative;
       float: left;
-      list-style: none;
       overflow: visible;
       white-space: nowrap;
+      list-style: none;
       transition: transform 0.5s ease-in-out;
 
       .scroll-item {
@@ -123,29 +123,28 @@
 
   /* 右键菜单 */
   .contextmenu {
-    margin: 0;
-    background: #fff;
     position: absolute;
-    list-style-type: none;
     padding: 5px 0;
-    border-radius: 4px;
+    margin: 0;
-    color: var(--el-text-color-primary);
-    font-weight: normal;
     font-size: 13px;
+    font-weight: normal;
+    color: var(--el-text-color-primary);
     white-space: nowrap;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
     outline: 0;
     box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
 
     li {
-      width: 100%;
-      margin: 0;
-      padding: 7px 12px;
-      cursor: pointer;
       display: flex;
       align-items: center;
+      width: 100%;
+      padding: 7px 12px;
+      margin: 0;
+      cursor: pointer;
 
       &:hover {
-        // background: var(--el-color-primary-light-9);
         color: var(--el-color-primary);
       }
 
@@ -159,11 +158,11 @@
 
 .el-dropdown-menu {
   li {
+    display: flex;
+    align-items: center;
     width: 100%;
     margin: 0;
     cursor: pointer;
-    display: flex;
-    align-items: center;
 
     svg {
       display: block;
@@ -184,6 +183,7 @@
 :deep(.el-dropdown-menu__item--divided) {
   margin: 1px 0;
 }
+
 .el-dropdown-menu__item--divided::before {
   margin: 0;
 }
@@ -193,7 +193,6 @@
 }
 
 .scroll-item.is-active {
-  // background-color: var(--el-color-primary-light-9);
   position: relative;
   color: #fff;
 
@@ -213,16 +212,16 @@
 .arrow-left,
 .arrow-right,
 .arrow-down {
+  position: relative;
   width: 40px;
   height: 38px;
   color: var(--el-text-color-primary);
-  position: relative;
 
   svg {
-    width: 20px;
-    height: 20px;
     position: absolute;
     left: 50%;
+    width: 20px;
+    height: 20px;
     transform: translate(-50%, 50%);
   }
 }
@@ -236,8 +235,8 @@
 }
 
 .arrow-right {
-  box-shadow: -5px 0 5px -6px #ccc;
   border-right: 0.5px solid #ccc;
+  box-shadow: -5px 0 5px -6px #ccc;
 
   &:hover {
     cursor: e-resize;
@@ -255,8 +254,8 @@
 
 /* 卡片模式下鼠标移出隐藏蓝色边框 */
 .card-out {
-  border: none;
   color: #666;
+  border: none;
 
   a {
     color: #666;
@@ -265,32 +264,32 @@
 
 /* 灵动模式 */
 .schedule-active {
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
   background: var(--el-color-primary);
 }
 
 /* 灵动模式下鼠标移入显示蓝色进度条 */
 .schedule-in {
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
   background: var(--el-color-primary);
   animation: scheduleInWidth 200ms ease-in;
 }
 
 /* 灵动模式下鼠标移出隐藏蓝色进度条 */
 .schedule-out {
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 0;
   height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
   background: var(--el-color-primary);
   animation: scheduleOutWidth 200ms ease-in;
 }

src/layout/components/tag/index.vue

@@ -603,5 +603,5 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import url("./index.scss");
 </style>

src/layout/frameView.vue

@@ -56,15 +56,15 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .frame {
-  height: calc(100vh - 88px);
   z-index: 998;
+  height: calc(100vh - 88px);
 
   .frame-iframe {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
     border: 0;
-    box-sizing: border-box;
   }
 }
 

src/layout/index.vue

@@ -179,20 +179,16 @@ const layoutHeader = defineComponent({
 </template>
 
 <style lang="scss" scoped>
-@mixin clearfix {
+.app-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
   &::after {
-    content: "";
     display: table;
     clear: both;
+    content: "";
   }
-}
-
-.app-wrapper {
-  @include clearfix;
-
-  position: relative;
-  height: 100%;
-  width: 100%;
 
   &.mobile.openSidebar {
     position: fixed;
@@ -201,13 +197,13 @@ const layoutHeader = defineComponent({
 }
 
 .app-mask {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
   background: #000;
   opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
 }
 
 .re-screen {

src/style/dark.scss

@@ -32,8 +32,8 @@ html.dark {
   .tags-view {
     .arrow-left,
     .arrow-right {
-      box-shadow: none;
       border-right: 1px solid $border-style;
+      box-shadow: none;
     }
 
     .arrow-right {
@@ -46,6 +46,7 @@ html.dark {
     .el-divider__text {
       --el-bg-color: var(--el-bg-color);
     }
+
     .el-divider--horizontal {
       border-top: none;
     }
@@ -63,10 +64,10 @@ html.dark {
     }
 
     .form-edit-widget-label a {
+      color: $color-white;
       background: var(--el-color-primary);
       border: none;
       border-radius: 5px;
-      color: $color-white;
     }
 
     .el-aside {
@@ -84,14 +85,18 @@ html.dark {
   .el-table__cell {
     background: var(--el-bg-color);
   }
+
   .el-card {
     --el-card-bg-color: var(--el-bg-color);
+
     // border: none !important;
   }
+
   .el-backtop {
     --el-backtop-bg-color: var(--el-color-primary-light-9);
     --el-backtop-hover-bg-color: var(--el-color-primary);
   }
+
   .el-dropdown-menu__item:not(.is-disabled):hover {
     background: transparent;
   }
@@ -103,18 +108,18 @@ html.dark {
     &.el-message-box__close,
     &.el-notification__closeBtn {
       &:hover {
-        color: rgba(255, 255, 255, 0.85) !important;
+        color: rgb(255 255 255 / 85%) !important;
-        background-color: rgba(255, 255, 255, 0.12);
+        background-color: rgb(255 255 255 / 12%);
       }
     }
   }
 
   /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
   .pure-message {
+    background-color: rgb(36 37 37) !important;
     background-image: initial !important;
-    background-color: rgb(36, 37, 37) !important;
+    box-shadow: rgb(13 13 13 / 12%) 0 3px 6px -4px,
-    box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px,
+      rgb(13 13 13 / 8%) 0 6px 16px 0, rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
-      rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important;
 
     & .el-message__content {
       color: $color-white !important;
@@ -124,8 +129,8 @@ html.dark {
 
     & .el-message__closeBtn {
       &:hover {
-        color: rgba(255, 255, 255, 0.85);
+        color: rgb(255 255 255 / 85%);
-        background-color: rgba(255, 255, 255, 0.12);
+        background-color: rgb(255 255 255 / 12%);
       }
     }
   }

src/style/element-plus.scss

@@ -78,6 +78,7 @@
     }
   }
 }
+
 .el-icon {
   &.el-dialog__close,
   &.el-drawer__close,
@@ -85,22 +86,23 @@
   &.el-notification__closeBtn {
     width: 24px;
     height: 24px;
-    outline: none;
     border-radius: 4px;
+    outline: none;
     transition: background-color 0.2s, color 0.2s;
+
     &:hover {
-      color: rgba(0, 0, 0, 0.88) !important;
+      color: rgb(0 0 0 / 88%) !important;
-      background-color: rgba(0, 0, 0, 0.06);
       text-decoration: none;
+      background-color: rgb(0 0 0 / 6%);
     }
   }
 }
 
 /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
 .pure-message {
-  border-width: 0 !important;
-  background: #fff !important;
   padding: 10px 13px !important;
+  background: #fff !important;
+  border-width: 0 !important;
   box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
     0 9px 28px 8px #0000000d !important;
 
@@ -119,13 +121,13 @@
   }
 
   & .el-message__closeBtn {
-    outline: none;
-    border-radius: 4px;
     right: 9px !important;
+    border-radius: 4px;
+    outline: none;
     transition: background-color 0.2s, color 0.2s;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.06);
+      background-color: rgb(0 0 0 / 6%);
     }
   }
 }

src/style/index.scss

@@ -1,8 +1,7 @@
-@import "./mixin.scss";
+@import "./transition";
-@import "./transition.scss";
+@import "./element-plus";
-@import "./element-plus.scss";
+@import "./sidebar";
-@import "./sidebar.scss";
+@import "./dark";
-@import "./dark.scss";
 
 /* 自定义全局 CssVar */
 :root {

src/style/mixin.scss

@@ -1,28 +0,0 @@
-@mixin clearfix {
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-@mixin scrollBar {
-  &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
-    border-radius: 20px;
-  }
-}

src/style/reset.scss

@@ -2,9 +2,9 @@
 ::before,
 ::after {
   box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
   border-color: currentColor;
+  border-style: solid;
+  border-width: 0;
 }
 
 #app {
@@ -13,25 +13,24 @@
 }
 
 html {
-  line-height: 1.5;
+  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
   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;
 }
 
 hr {
@@ -69,9 +68,9 @@ small {
 
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 
@@ -85,8 +84,8 @@ sup {
 
 table {
   text-indent: 0;
-  border-color: inherit;
   border-collapse: collapse;
+  border-color: inherit;
 }
 
 button,
@@ -94,12 +93,12 @@ input,
 optgroup,
 select,
 textarea {
+  padding: 0;
+  margin: 0;
   font-family: inherit;
   font-size: 100%;
   line-height: inherit;
   color: inherit;
-  margin: 0;
-  padding: 0;
 }
 
 button,
@@ -160,8 +159,8 @@ pre {
 }
 
 fieldset {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 legend {
@@ -171,9 +170,9 @@ legend {
 ol,
 ul,
 menu {
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 textarea {
@@ -182,8 +181,8 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;
   color: #9ca3af;
+  opacity: 1;
 }
 
 button,
@@ -238,9 +237,9 @@ a:active {
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
   color: inherit;
   text-decoration: none;
+  cursor: pointer;
 }
 
 div:focus {
@@ -249,11 +248,11 @@ div:focus {
 
 .clearfix {
   &::after {
-    visibility: hidden;
     display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
     height: 0;
+    clear: both;
+    font-size: 0;
+    visibility: hidden;
+    content: " ";
   }
 }

src/style/sidebar.scss

@@ -2,20 +2,21 @@
 @mixin merge-style($sideBarWidth) {
   $menuActiveText: #7a80b4;
 
-  @media screen and (min-width: 150px) and (max-width: 420px) {
+  @media screen and (width >= 150px) and (width <= 420px) {
     .app-main-nofixed-header {
       overflow-y: hidden;
     }
   }
-  @media screen and (min-width: 420px) {
+
+  @media screen and (width >= 420px) {
     .app-main-nofixed-header {
       overflow: hidden;
     }
   }
 
   .sub-menu-icon {
-    font-size: 18px;
     margin-right: 5px;
+    font-size: 18px;
 
     svg {
       width: 18px;
@@ -24,26 +25,27 @@
   }
 
   .set-icon {
-    height: 48px;
-    width: 40px;
     display: flex;
-    cursor: pointer;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 48px;
+    cursor: pointer;
   }
 
   .main-container {
+    position: relative;
     height: 100vh;
     min-height: 100%;
-    /* main-content 属性动画 */
-    transition: margin-left var(--pure-transition-duration);
     margin-left: $sideBarWidth;
-    position: relative;
     background: #f0f2f5;
 
+    /* main-content 属性动画 */
+    transition: margin-left var(--pure-transition-duration);
+
     .el-scrollbar__wrap {
-      overflow: auto;
       height: 100%;
+      overflow: auto;
     }
   }
 
@@ -53,6 +55,7 @@
     right: 0;
     z-index: 998;
     width: calc(100% - 210px);
+
     /* fixed-header 属性左上角动画 */
     transition: width var(--pure-transition-duration);
   }
@@ -70,20 +73,21 @@
   }
 
   .sidebar-container {
-    /* 展开动画 */
-    transition: width var(--pure-transition-duration);
-    width: $sideBarWidth !important;
-    background: $menuBg;
-    height: 100%;
     position: fixed;
-    font-size: 0;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
     overflow: hidden;
+    font-size: 0;
+    background: $menuBg;
     box-shadow: 0 0 1px #888;
 
+    /* 展开动画 */
+    transition: width var(--pure-transition-duration);
+
     .scrollbar-wrapper {
       overflow-x: hidden !important;
     }
@@ -101,6 +105,7 @@
         /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
         height: calc(100% - 92px);
       }
+
       .el-scrollbar.mobile {
         height: 100%;
       }
@@ -113,15 +118,15 @@
     a {
       display: inline-block;
       display: flex;
-      padding-left: 10px;
       flex-wrap: wrap;
       width: 100%;
+      padding-left: 10px;
     }
 
     .el-menu {
-      border: none;
       height: 100%;
       background-color: transparent !important;
+      border: none;
     }
 
     .el-menu-item,
@@ -158,8 +163,8 @@
     }
 
     .is-active {
-      transition: color 0.3s;
       color: $subMenuActiveText !important;
+      transition: color 0.3s;
     }
 
     .el-menu-item.is-active.nest-menu > * {
@@ -168,22 +173,19 @@
     }
 
     .el-menu-item.is-active.nest-menu::before {
-      content: "";
-      clear: both;
       position: absolute;
-      left: 8px;
+      inset: 0 8px;
-      right: 8px;
       margin: 4px 0;
-      top: 0;
+      clear: both;
-      bottom: 0;
+      content: "";
-      border-radius: 3px;
       background: var(--el-color-primary) !important;
+      border-radius: 3px;
     }
 
     .el-menu .el-menu--inline .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      font-size: 12px;
       min-width: $sideBarWidth !important;
+      font-size: 12px;
       background-color: $subMenuBg !important;
     }
 
@@ -196,21 +198,21 @@
       left: 0;
       width: 2px;
       height: 100%;
-      background-color: $menuActiveBefore;
-      content: "";
       clear: both;
+      content: "";
+      background-color: $menuActiveBefore;
       transition: all var(--pure-transition-duration) ease-in-out;
       transform: translateY(0);
     }
 
     .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
-      content: "";
-      display: block;
       position: absolute;
-      height: 0;
-      width: 3px;
-      transform: translateY(-50%);
       top: 50%;
+      display: block;
+      width: 3px;
+      height: 0;
+      content: "";
+      transform: translateY(-50%);
     }
 
     /* 无子集的激活菜单背景 */
@@ -218,17 +220,15 @@
       z-index: 1;
       color: #fff;
     }
+
     .is-active.submenu-title-noDropdown.outer-most::before {
-      content: "";
-      clear: both;
       position: absolute;
-      left: 8px;
+      inset: 0 8px;
-      right: 8px;
       margin: 4px 0;
-      top: 0;
+      clear: both;
-      bottom: 0;
+      content: "";
-      border-radius: 3px;
       background: var(--el-color-primary) !important;
+      border-radius: 3px;
     }
   }
 
@@ -261,8 +261,8 @@
 
     /* 子菜单中还有子菜单 */
     .el-menu .el-sub-menu__title {
-      font-size: 12px;
       min-width: $sideBarWidth !important;
+      font-size: 12px;
       background-color: $subMenuBg !important;
     }
 
@@ -279,8 +279,8 @@
     }
 
     .is-active {
-      transition: color 0.3s;
       color: $subMenuActiveText !important;
+      transition: color 0.3s;
     }
 
     .el-menu-item.is-active.nest-menu > * {
@@ -289,15 +289,12 @@
     }
 
     .el-menu-item.is-active.nest-menu::before {
-      content: "";
-      clear: both;
       position: absolute;
-      left: 8px;
+      inset: 0 8px;
-      right: 8px;
+      clear: both;
-      top: 0;
+      content: "";
-      bottom: 0;
-      border-radius: 3px;
       background: var(--el-color-primary) !important;
+      border-radius: 3px;
     }
 
     .el-menu-item,
@@ -345,8 +342,8 @@
 
     /* 子菜单中还有子菜单 */
     .el-menu .el-sub-menu__title {
-      font-size: 12px;
       min-width: $sideBarWidth !important;
+      font-size: 12px;
       background-color: $subMenuBg !important;
 
       &:hover {
@@ -371,8 +368,8 @@
     }
 
     .el-menu-item.is-active {
-      transition: color 0.3s;
       color: $subMenuActiveText !important;
+      transition: color 0.3s;
     }
 
     .el-menu-item.is-active.nest-menu > * {
@@ -381,68 +378,65 @@
     }
 
     .el-menu-item.is-active.nest-menu::before {
-      content: "";
-      clear: both;
       position: absolute;
-      left: 5px;
+      inset: 0 5px;
-      right: 5px;
+      clear: both;
-      top: 0;
+      content: "";
-      bottom: 0;
-      border-radius: 3px;
       background: var(--el-color-primary) !important;
+      border-radius: 3px;
     }
   }
 
   .horizontal-header {
     display: flex;
+    align-items: center;
     justify-content: space-around;
-    background: $menuBg;
     width: 100%;
     height: 48px;
-    align-items: center;
+    background: $menuBg;
 
     .horizontal-header-left {
       display: flex;
-      height: 100%;
+      align-items: center;
       width: auto;
       min-width: 200px;
-      align-items: center;
+      height: 100%;
       padding-left: 10px;
       cursor: pointer;
       transition: all var(--pure-transition-duration) ease;
 
       img {
-        height: 32px;
         display: inline-block;
+        height: 32px;
       }
 
       span {
-        height: 32px;
-        line-height: 32px;
-        margin: 2px 0 0 12px;
-        color: $subMenuActiveText;
         display: inline-block;
+        height: 32px;
+        margin: 2px 0 0 12px;
         overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
         font-size: 18px;
         font-weight: 600;
+        line-height: 32px;
+        color: $subMenuActiveText;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
 
     .horizontal-header-menu {
-      height: 100%;
-      min-width: 0;
       flex: 1;
       align-items: center;
+      min-width: 0;
+      height: 100%;
     }
 
     .horizontal-header-right {
       display: flex;
-      min-width: 340px;
       align-items: center;
-      color: $subMenuActiveText;
       justify-content: flex-end;
+      min-width: 340px;
+      color: $subMenuActiveText;
 
       /* 搜索 */
       .search-container,
@@ -468,19 +462,19 @@
         width: 40px;
         height: 48px;
         padding: 11px;
-        outline: none;
-        cursor: pointer;
         color: $subMenuActiveText;
+        cursor: pointer;
+        outline: none;
       }
 
       .el-dropdown-link {
-        height: 48px;
-        padding: 10px;
         display: flex;
-        cursor: pointer;
         align-items: center;
         justify-content: space-around;
+        height: 48px;
+        padding: 10px;
         color: $subMenuActiveText;
+        cursor: pointer;
 
         p {
           font-size: 14px;
@@ -495,10 +489,10 @@
     }
 
     .el-menu {
-      border: none;
-      height: 100%;
       width: 100% !important;
+      height: 100%;
       background-color: transparent;
+      border: none;
     }
 
     .el-menu-item,
@@ -532,8 +526,8 @@
     }
 
     .is-active {
-      transition: color 0.3s;
       color: $subMenuActiveText !important;
+      transition: color 0.3s;
     }
   }
 
@@ -553,8 +547,8 @@
     }
 
     .sidebar-container {
-      transition: transform var(--pure-transition-duration);
       width: $sideBarWidth;
+      transition: transform var(--pure-transition-duration);
     }
 
     &.hideSidebar {
@@ -569,6 +563,7 @@
 
 body[layout="vertical"] {
   $sideBarWidth: 210px;
+
   @include merge-style($sideBarWidth);
 
   .el-menu--collapse {
@@ -586,8 +581,8 @@ body[layout="vertical"] {
     }
 
     .sidebar-container {
-      transition: width var(--pure-transition-duration);
       width: 54px !important;
+      transition: width var(--pure-transition-duration);
 
       .is-active.submenu-title-noDropdown.outer-most {
         background: transparent !important;
@@ -603,8 +598,8 @@ body[layout="vertical"] {
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
-            height: 100%;
             width: 100%;
+            height: 100%;
             text-align: center;
             visibility: visible;
           }
@@ -643,6 +638,7 @@ body[layout="vertical"] {
 
 body[layout="horizontal"] {
   $sideBarWidth: 0;
+
   @include merge-style($sideBarWidth);
 
   .fixed-header,
@@ -657,6 +653,7 @@ body[layout="horizontal"] {
 
 body[layout="mix"] {
   $sideBarWidth: 210px;
+
   @include merge-style($sideBarWidth);
 
   .el-menu--collapse {
@@ -674,8 +671,8 @@ body[layout="mix"] {
     }
 
     .sidebar-container {
-      transition: width var(--pure-transition-duration);
       width: 54px !important;
+      transition: width var(--pure-transition-duration);
 
       .is-active.submenu-title-noDropdown.outer-most {
         background: transparent !important;
@@ -691,9 +688,10 @@ body[layout="mix"] {
       .el-sub-menu {
         & > .el-sub-menu__title {
           padding: 0;
+
           & > span {
-            height: 100%;
             width: 100%;
+            height: 100%;
             text-align: center;
             visibility: visible;
           }

src/style/transition.scss

@@ -31,6 +31,7 @@
 }
 
 .breadcrumb-leave-active {
+  position: absolute;
   transition: all 0.3s;
 }
 
@@ -40,10 +41,6 @@
   transform: translateX(20px);
 }
 
-.breadcrumb-leave-active {
-  position: absolute;
-}
-
 /**
  * @description 重置el-menu的展开收起动画时长
  */

src/views/able/barcode.vue

@@ -38,7 +38,7 @@ const barcodes = [
           <el-link
             href="https://lindell.me/JsBarcode/"
             target="_blank"
-            style="font-size: 16px; margin: 0 5px 4px 0"
+            style="margin: 0 5px 4px 0; font-size: 16px"
           >
             JsBarcode
           </el-link>

src/views/able/execl.vue

@@ -76,7 +76,7 @@ const exportExcel = () => {
         <el-link
           href="https://github.com/SheetJS/sheetjs"
           target="_blank"
-          style="font-size: 16px; margin: 0 5px 4px 0"
+          style="margin: 0 5px 4px 0; font-size: 16px"
         >
           github地址
         </el-link>

src/views/able/infinite-scroll.vue

@@ -39,7 +39,7 @@ const load = () => {
         <el-link
           href="https://github.com/yujinpan/el-table-infinite-scroll"
           target="_blank"
-          style="font-size: 16px; margin: 0 5px 4px 0"
+          style="margin: 0 5px 4px 0; font-size: 16px"
         >
           github地址
         </el-link>

src/views/able/menu-tree.vue

@@ -52,7 +52,7 @@ const filterMethod = (query: string, node: treeNode) => {
             href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
             target="_blank"
             :icon="useRenderIcon(NodeTree)"
-            style="font-size: 16px; margin: 0 5px 4px 0"
+            style="margin: 0 5px 4px 0; font-size: 16px"
           >
             Tree V2
           </el-link>

src/views/able/pdf.vue

@@ -41,7 +41,7 @@ const onPrint = () => {
         <el-link
           href="https://github.com/hrynko/vue-pdf-embed"
           target="_blank"
-          style="font-size: 16px; margin: 0 5px 4px 0"
+          style="margin: 0 5px 4px 0; font-size: 16px"
         >
           github地址
         </el-link>

src/views/able/print.vue

@@ -201,7 +201,7 @@ const tableData: User[] = [
 
 .card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 </style>

src/views/able/qrcode.vue

@@ -30,7 +30,7 @@ const disabledClick = () => {
           <el-link
             href="https://github.com/soldair/node-qrcode"
             target="_blank"
-            style="font-size: 16px; margin: 0 5px 4px 0"
+            style="margin: 0 5px 4px 0; font-size: 16px"
           >
             qrcode
           </el-link>

src/views/able/swiper.vue

@@ -91,7 +91,7 @@ const swiperExample: any[] = [
         <el-link
           href="https://github.com/nolimits4web/swiper"
           target="_blank"
-          style="font-size: 16px; margin: 0 5px 4px 0"
+          style="margin: 0 5px 4px 0; font-size: 16px"
         >
           github地址
         </el-link>

src/views/able/timeline.vue

@@ -80,26 +80,26 @@ const activities = [
 
 <style scoped>
 .message {
+  position: relative;
+  box-sizing: border-box;
   width: 200px;
+  padding: 5px 12px;
+  line-height: 18px;
+  color: #fff;
+  word-break: break-all;
   background-color: var(--el-color-primary);
   border-color: var(--el-color-primary);
-  color: #fff;
-  line-height: 18px;
-  padding: 5px 12px 5px 12px;
-  box-sizing: border-box;
   border-radius: 6px;
-  position: relative;
-  word-break: break-all;
 }
 
 .message::after {
-  content: "";
   position: absolute;
   top: 8px;
   left: -10px;
   width: 0;
   height: 0;
   overflow: hidden;
+  content: "";
   border-color: var(--el-color-primary) transparent transparent;
   border-style: solid dashed dashed;
   border-width: 10px;

src/views/able/virtual-list/horizontal.vue

@@ -65,9 +65,9 @@ const filteredItems = computed(() => {
 
 <style scoped>
 .dynamic-scroller-demo {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroller {
@@ -81,10 +81,10 @@ const filteredItems = computed(() => {
 }
 
 .message {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-height: 32px;
   padding: 12px;
-  box-sizing: border-box;
 }
 </style>

src/views/able/virtual-list/index.vue

@@ -16,7 +16,7 @@ defineOptions({
         <el-link
           href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
           target="_blank"
-          style="font-size: 16px; margin: 0 5px 4px 0"
+          style="margin: 0 5px 4px 0; font-size: 16px"
         >
           github地址
         </el-link>

src/views/able/virtual-list/vertical.vue

@@ -60,9 +60,9 @@ const filteredItems = computed(() => {
 
 <style scoped>
 .dynamic-scroller-demo {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroller {
@@ -70,9 +70,9 @@ const filteredItems = computed(() => {
 }
 
 .message {
+  box-sizing: border-box;
   display: flex;
   min-height: 32px;
   padding: 12px;
-  box-sizing: border-box;
 }
 </style>

src/views/components/contextmenu/basic.vue

@@ -63,12 +63,12 @@ export default defineComponent({
 <style scoped>
 .wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 300px;
   height: 200px;
-  border: 3px dashed rgba(90, 167, 164, 0.9);
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
   border-radius: 8px;
-  background-color: rgba(90, 167, 164, 0.2);
 }
 </style>

src/views/components/contextmenu/menuDynamic.vue

@@ -98,13 +98,13 @@ export default defineComponent({
 <style scoped>
 .wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 300px;
   height: 200px;
   margin-bottom: 30px;
-  border: 3px dashed rgba(90, 167, 164, 0.9);
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
   border-radius: 8px;
-  background-color: rgba(90, 167, 164, 0.2);
 }
 </style>

src/views/components/contextmenu/menuGroup.vue

@@ -60,12 +60,12 @@ export default ExampleSFC;
 <style scoped>
 .wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   width: 300px;
   height: 200px;
-  border: 3px dashed rgba(90, 167, 164, 0.9);
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
   border-radius: 8px;
-  background-color: rgba(90, 167, 164, 0.2);
 }
 </style>

src/views/components/cropping/index.vue

@@ -44,8 +44,8 @@ const onCropper = (): void => {
 <style scoped>
 .cropper-container {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .el-button {

src/views/components/danmaku/index.vue

@@ -110,7 +110,7 @@ function addDanmu() {
           <el-link
             href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
             target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             vue3-danmaku
           </el-link>
@@ -197,10 +197,10 @@ function addDanmu() {
     align-items: center;
 
     .img {
-      height: 25px;
       width: 25px;
-      border-radius: 50%;
+      height: 25px;
       margin-right: 5px;
+      border-radius: 50%;
     }
   }
 }

src/views/components/draggable/index.vue

@@ -65,7 +65,7 @@ onMounted(() => {
             href="https://sortablejs.github.io/vue.draggable.next/#/simple"
             target="_blank"
             :icon="useRenderIcon(Rank)"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             vuedraggable
           </el-link>
@@ -150,35 +150,36 @@ onMounted(() => {
 /* grid列表拖拽 */
 .grid-container {
   display: grid;
-  grid-template-columns: 33.3% 33.3% 33.3%;
   grid-template-rows: 33.3% 33.3% 33.3%;
+  grid-template-columns: 33.3% 33.3% 33.3%;
 }
 
 .item-single {
-  font-size: 1.5em;
   height: 77px;
-  text-align: center;
+  font-size: 1.5em;
   line-height: 85px;
-  border: 1px solid #e5e4e9;
+  text-align: center;
   cursor: move;
+  border: 1px solid #e5e4e9;
 }
 
 .item-cut {
-  font-size: 1.5em;
   height: 77px;
+  font-size: 1.5em;
   line-height: 77px;
   text-align: center;
-  border: 1px solid #e5e4e9;
   cursor: move;
+  border: 1px solid #e5e4e9;
 }
 
 .item {
   font-size: 2em;
-  text-align: center;
   line-height: 100px;
-  border: 1px solid #e5e4e9;
+  text-align: center;
   cursor: move;
-  @media screen and (max-width: 750px) {
+  border: 1px solid #e5e4e9;
+
+  @media screen and (width <= 750px) {
     line-height: 90px;
   }
 }

src/views/components/json-editor/index.vue

@@ -80,7 +80,7 @@ watch(
           <el-link
             href="https://github.com/leezng/vue-json-pretty"
             target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             vue-json-pretty
           </el-link>
@@ -91,7 +91,7 @@ watch(
           <el-link
             href="https://github.com/surmon-china/vue-codemirror"
             target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             codemirror6
           </el-link>

src/views/components/seamless-scroll/index.vue

@@ -125,8 +125,8 @@ function changeDirection(val) {
 <style lang="scss" scoped>
 .card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 
   span {
     margin-right: 20px;
@@ -134,23 +134,23 @@ function changeDirection(val) {
 }
 
 .warp {
-  height: 270px;
   width: 360px;
+  height: 270px;
   margin: 0 auto;
   overflow: hidden;
 
   ul {
-    list-style: none;
     padding: 0;
     margin: 0 auto;
+    list-style: none;
 
     li,
     a {
-      height: 30px;
-      line-height: 30px;
       display: flex;
       justify-content: space-between;
+      height: 30px;
       font-size: 15px;
+      line-height: 30px;
     }
   }
 }

src/views/components/split-pane/index.vue

@@ -57,9 +57,9 @@ $H: 70vh;
 .split-pane {
   width: 70vw;
   height: $H;
-  text-align: center;
   font-size: 50px;
   color: #fff;
+  text-align: center;
   border: 1px solid #e5e6eb;
 
   .dv-a,
@@ -67,8 +67,8 @@ $H: 70vh;
   .dv-c {
     width: $W;
     height: $W;
-    color: rgba($color: dodgerblue, $alpha: 0.8);
     line-height: $H;
+    color: rgba($color: dodgerblue, $alpha: 80%);
   }
 
   .dv-b,
@@ -77,11 +77,11 @@ $H: 70vh;
   }
 
   .dv-b {
-    color: rgba($color: #000, $alpha: 0.8);
+    color: rgba($color: #000, $alpha: 80%);
   }
 
   .dv-c {
-    color: rgba($color: #ce272d, $alpha: 0.8);
+    color: rgba($color: #ce272d, $alpha: 80%);
   }
 }
 </style>

src/views/components/video/index.vue

@@ -42,7 +42,7 @@ onMounted(() => {
             href="https://v3.h5player.bytedance.com/"
             target="_blank"
             :icon="useRenderIcon(VideoPlay)"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             西瓜播放器
           </el-link>

src/views/editor/index.vue

@@ -48,7 +48,7 @@ const handleCreated = editor => {
             href="https://www.wangeditor.com"
             target="_blank"
             :icon="useRenderIcon(Edit)"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             Wangeditor
           </el-link>

src/views/empty/index.vue

@@ -18,21 +18,21 @@ defineOptions({
 
 <style lang="scss" scoped>
 .back {
-  width: 200px;
-  height: 200px;
-  cursor: pointer;
-  border-radius: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: relative;
   top: 50%;
   left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+  background: rgb(138 150 160 / 8%);
+  border-radius: 18px;
   transform: translate(-50%, -50%);
-  background: rgba(138, 150, 160, 0.08);
 
   &:hover {
-    background: rgba(138, 150, 160, 0.2);
+    background: rgb(138 150 160 / 20%);
     transition: background 0.6s;
   }
 }

src/views/flow-chart/index.vue

@@ -40,7 +40,7 @@ function initLf() {
   LogicFlow.use(Menu);
   const domLf = new LogicFlow({
     ...unref(config),
-    container: document.querySelector("#LF-Turbo")
+    container: document.querySelector("#turbo")
   });
   lf.value = domLf;
   // 设置边类型bpmn:sequenceFlow为默认类型
@@ -74,7 +74,7 @@ onMounted(() => {
             href="http://logic-flow.org/"
             target="_blank"
             :icon="useRenderIcon(SetUp)"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             LogicFlow
           </el-link>
@@ -93,7 +93,7 @@ onMounted(() => {
       <!-- 节点面板 -->
       <NodePanel :lf="lf" :nodeList="nodeList" />
       <!-- 画布 -->
-      <div id="LF-Turbo" />
+      <div id="turbo" />
       <!-- 数据查看面板 -->
       <el-dialog
         class="flow-dialog"
@@ -110,19 +110,19 @@ onMounted(() => {
 </template>
 
 <style scoped>
-#LF-Turbo {
+#turbo {
   width: 100%;
   height: 70vh;
 }
 
 .logic-flow-view {
-  margin: 10px;
   position: relative;
+  margin: 10px;
 }
 
 .demo-title {
-  text-align: center;
   margin: 20px;
+  text-align: center;
 }
 
 .demo-control {
@@ -139,23 +139,23 @@ onMounted(() => {
 .add-panel {
   position: absolute;
   z-index: 11;
-  background-color: white;
   padding: 10px 5px;
+  background-color: white;
 }
 
 .el-drawer__body {
-  height: 80%;
-  overflow: auto;
-  margin-top: -30px;
   z-index: 3;
+  height: 80%;
+  margin-top: -30px;
+  overflow: auto;
 }
 
 :deep(.flow-dialog) {
-  transform: none;
-  left: 0;
-  top: 5vh;
   position: relative;
+  top: 5vh;
+  left: 0;
   margin: 0 auto;
+  transform: none;
 }
 
 :deep(.flow-dialog) .el-dialog__body {

src/views/list/card/components/Card.vue

@@ -94,25 +94,25 @@ const cardLogoClass = computed(() => [
   display: flex;
   flex-direction: column;
   margin-bottom: 12px;
-  border-radius: 3px;
   overflow: hidden;
   cursor: pointer;
+  border-radius: 3px;
 
   &_detail {
     flex: 1;
-    padding: 24px 32px;
     min-height: 140px;
+    padding: 24px 32px;
 
     &--logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 56px;
       height: 56px;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: #e0ebff;
       font-size: 32px;
       color: #0052d9;
+      background: #e0ebff;
+      border-radius: 50%;
 
       &__disabled {
         color: #a1c4ff;
@@ -129,21 +129,21 @@ const cardLogoClass = computed(() => [
     }
 
     &--name {
-      margin: 24px 0 8px 0;
+      margin: 24px 0 8px;
       font-size: 16px;
       font-weight: 400;
     }
 
     &--desc {
+      display: -webkit-box;
+      height: 40px;
+      margin-bottom: 24px;
+      overflow: hidden;
       font-size: 12px;
       line-height: 20px;
-      overflow: hidden;
       text-overflow: ellipsis;
-      display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
-      margin-bottom: 24px;
-      height: 40px;
     }
   }
 

src/views/pure-table/high.vue

@@ -22,7 +22,7 @@ function tabClick({ index }) {
           <el-link
             href="https://github.com/pure-admin/pure-admin-table"
             target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             @pureadmin/table
           </el-link>

src/views/pure-table/index.vue

@@ -24,7 +24,7 @@ function tabClick({ index }) {
           <el-link
             href="https://github.com/pure-admin/pure-admin-table"
             target="_blank"
-            style="font-size: 16px; margin: 0 4px 5px"
+            style="margin: 0 4px 5px; font-size: 16px"
           >
             @pureadmin/table
           </el-link>

src/views/result/success.vue

@@ -58,7 +58,7 @@ const columns = [
                 role="img"
                 aria-label="dingding"
                 class="anticon anticon-dingding flex items-center cursor-pointer"
-                style="color: rgb(0, 160, 233); margin-left: 8px"
+                style="margin-left: 8px; color: rgb(0 160 233)"
               >
                 <svg
                   viewBox="64 64 896 896"

src/views/welcome/index.vue

@@ -281,6 +281,6 @@ axios
 }
 
 .main-content {
-  margin: 20px 20px 0 20px !important;
+  margin: 20px 20px 0 !important;
 }
 </style>