workflow: add stylelint

.stylelintignore

@@ -0,0 +1,3 @@
+/dist/*
+/public/*
+public/*

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "preview:build": "npm run build && vite preview",
     "lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint-staged": "lint-staged"
   },
   "husky": {
@@ -81,6 +82,10 @@
     "rimraf": "^3.0.2",
     "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-order": "^4.1.0",
     "typescript": "^4.4.2",
     "vite": "^2.5.3",
     "vite-plugin-element-plus": "^0.0.12",

src/assets/iconfont/iconfont.css

@@ -15,23 +15,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.team-iconshanchu:before {
+.team-iconshanchu::before {
   content: "\e617";
 }
 
-.team-iconshow-main-container:before {
+.team-iconshow-main-container::before {
   content: "\e878";
 }
 
-.team-iconhidden-main-container:before {
+.team-iconhidden-main-container::before {
   content: "\e881";
 }
 
-.team-iconexit-fullscreen:before {
+.team-iconexit-fullscreen::before {
   content: "\e62a";
 }
 
-.team-iconfullscreen:before {
+.team-iconfullscreen::before {
   content: "\e62b";
 }
 

src/components/ReCountTo/src/rebound/rebound.css

@@ -19,6 +19,7 @@ ul {
     transform: translateY(-90%);
     filter: url(#blur);
   }
+
   to {
     transform: translateY(1%);
     filter: url(#blur);
@@ -30,18 +31,23 @@ ul {
     transform: translateY(calc(var(--i) * -9.09% - 7%));
     filter: none;
   }
+
   25% {
     transform: translateY(calc(var(--i) * -9.09% + 3%));
   }
+
   50% {
     transform: translateY(calc(var(--i) * -9.09% - 1%));
   }
+
   70% {
     transform: translateY(calc(var(--i) * -9.09% + 0.6%));
   }
+
   85% {
     transform: translateY(calc(var(--i) * -9.09% - 0.3%));
   }
+
   to {
     transform: translateY(calc(var(--i) * -9.09%));
   }
@@ -51,15 +57,19 @@ ul {
   25% {
     transform: translateY(8%);
   }
+
   50% {
     transform: translateY(-4%);
   }
+
   70% {
     transform: translateY(2%);
   }
+
   85% {
     transform: translateY(-1%);
   }
+
   to {
     transform: translateY(0);
   }

src/components/ReFlop/src/filpper.css

@@ -14,8 +14,8 @@
   font-family: "Helvetica Neue";
 }
 
-.m-flipper .digital:before,
+.m-flipper .digital::before,
-.m-flipper .digital:after {
+.m-flipper .digital::after {
   content: "";
   position: absolute;
   left: 0;
@@ -25,71 +25,71 @@
   box-sizing: border-box;
 }
 
-.m-flipper .digital:before {
+.m-flipper .digital::before {
   top: 0;
   bottom: 50%;
   border-radius: 10px 10px 0 0;
   border-bottom: solid 1px #666;
 }
 
-.m-flipper .digital:after {
+.m-flipper .digital::after {
   top: 50%;
   bottom: 0;
   border-radius: 0 0 10px 10px;
   line-height: 0;
 }
 
-/*向下翻*/
+/* 向下翻 */
-.m-flipper.down .front:before {
+.m-flipper.down .front::before {
   z-index: 3;
 }
 
-.m-flipper.down .back:after {
+.m-flipper.down .back::after {
   z-index: 2;
   transform-origin: 50% 0%;
   transform: perspective(160px) rotateX(180deg);
 }
 
-.m-flipper.down .front:after,
+.m-flipper.down .front::after,
-.m-flipper.down .back:before {
+.m-flipper.down .back::before {
   z-index: 1;
 }
 
-.m-flipper.down.go .front:before {
+.m-flipper.down.go .front::before {
   transform-origin: 50% 100%;
   animation: frontFlipDown 0.6s ease-in-out both;
   box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
   backface-visibility: hidden;
 }
 
-.m-flipper.down.go .back:after {
+.m-flipper.down.go .back::after {
   animation: backFlipDown 0.6s ease-in-out both;
 }
 
-/*向上翻*/
+/* 向上翻 */
-.m-flipper.up .front:after {
+.m-flipper.up .front::after {
   z-index: 3;
 }
 
-.m-flipper.up .back:before {
+.m-flipper.up .back::before {
   z-index: 2;
   transform-origin: 50% 100%;
   transform: perspective(160px) rotateX(-180deg);
 }
 
-.m-flipper.up .front:before,
+.m-flipper.up .front::before,
-.m-flipper.up .back:after {
+.m-flipper.up .back::after {
   z-index: 1;
 }
 
-.m-flipper.up.go .front:after {
+.m-flipper.up.go .front::after {
   transform-origin: 50% 0;
   animation: frontFlipUp 0.6s ease-in-out both;
   box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
   backface-visibility: hidden;
 }
 
-.m-flipper.up.go .back:before {
+.m-flipper.up.go .back::before {
   animation: backFlipUp 0.6s ease-in-out both;
 }
 
@@ -133,52 +133,52 @@
   }
 }
 
-.m-flipper .number0:before,
+.m-flipper .number0::before,
-.m-flipper .number0:after {
+.m-flipper .number0::after {
   content: "0";
 }
 
-.m-flipper .number1:before,
+.m-flipper .number1::before,
-.m-flipper .number1:after {
+.m-flipper .number1::after {
   content: "1";
 }
 
-.m-flipper .number2:before,
+.m-flipper .number2::before,
-.m-flipper .number2:after {
+.m-flipper .number2::after {
   content: "2";
 }
 
-.m-flipper .number3:before,
+.m-flipper .number3::before,
-.m-flipper .number3:after {
+.m-flipper .number3::after {
   content: "3";
 }
 
-.m-flipper .number4:before,
+.m-flipper .number4::before,
-.m-flipper .number4:after {
+.m-flipper .number4::after {
   content: "4";
 }
 
-.m-flipper .number5:before,
+.m-flipper .number5::before,
-.m-flipper .number5:after {
+.m-flipper .number5::after {
   content: "5";
 }
 
-.m-flipper .number6:before,
+.m-flipper .number6::before,
-.m-flipper .number6:after {
+.m-flipper .number6::after {
   content: "6";
 }
 
-.m-flipper .number7:before,
+.m-flipper .number7::before,
-.m-flipper .number7:after {
+.m-flipper .number7::after {
   content: "7";
 }
 
-.m-flipper .number8:before,
+.m-flipper .number8::before,
-.m-flipper .number8:after {
+.m-flipper .number8::after {
   content: "8";
 }
 
-.m-flipper .number9:before,
+.m-flipper .number9::before,
-.m-flipper .number9:after {
+.m-flipper .number9::after {
   content: "9";
 }

src/components/ReFlop/src/index.vue

@@ -156,6 +156,7 @@ export default {
 .flip-clock .m-flipper {
   margin: 0 3px;
 }
+
 .flip-clock em {
   display: inline-block;
   line-height: 102px;

src/components/ReFlowChart/src/Control.vue

@@ -128,29 +128,35 @@ export default defineComponent({
 
 <style scoped>
 @import "./assets/iconfont/iconfont.css";
+
 .control-container {
   position: absolute;
   right: 20px;
   background: hsla(0, 0%, 100%, 0.8);
   box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
 }
+
 .iconfont {
   font-size: 25px;
 }
+
 .control-container p {
   margin: 0;
   font-size: 12px;
 }
+
 .control-container ul {
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 2px;
 }
+
 .control-container ul li {
   width: 60px;
   text-align: center;
 }
+
 .control-container ul li button {
   border: none;
   background-color: transparent;

src/components/ReFlowChart/src/NodePanel.vue

@@ -68,9 +68,11 @@ export default defineComponent({
   text-align: center;
   z-index: 101;
 }
+
 .node-item {
   margin-bottom: 20px;
 }
+
 .node-item-icon {
   height: 30px;
   display: flex;
@@ -78,57 +80,70 @@ export default defineComponent({
   justify-content: center;
   background-size: cover;
 }
+
 .node-label {
   font-size: 12px;
   margin-top: 5px;
   user-select: none;
 }
+
 .node-start {
   background: url("./background/start.png") no-repeat;
   background-size: cover;
 }
+
 .node-rect {
   border: 1px solid black;
 }
+
 .node-user {
   background: url("./background/user.png") no-repeat;
   background-size: cover;
 }
+
 .node-time {
   background: url("./background/time.png") no-repeat;
   background-size: cover;
 }
+
 .node-push {
   background: url("./background/push.png") no-repeat;
   background-size: cover;
 }
+
 .node-download {
   background: url("./background/download.png") no-repeat;
   background-size: cover;
 }
+
 .node-click {
   background: url("./background/click.png") no-repeat;
   background-size: cover;
 }
+
 .node-end {
   background: url("./background/end.png") no-repeat;
   background-size: cover;
 }
+
 .bpmn-start {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==)
     center center no-repeat;
   cursor: grab;
 }
+
 .bpmn-end {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC)
     center center no-repeat;
   cursor: grab;
 }
+
 .bpmn-user {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==)
     center center no-repeat;
   cursor: grab;
 }
+
 .bpmn-exclusiveGateway {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=)
     center center no-repeat;

src/components/ReFlowChart/src/assets/iconfont/iconfont.css

@@ -15,31 +15,31 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-full-screen-hs:before {
+.icon-full-screen-hs::before {
   content: "\e656";
 }
 
-.icon-watch-hs:before {
+.icon-watch-hs::before {
   content: "\e766";
 }
 
-.icon-download-hs:before {
+.icon-download-hs::before {
   content: "\e6af";
 }
 
-.icon-enlarge-hs:before {
+.icon-enlarge-hs::before {
   content: "\e765";
 }
 
-.icon-previous-hs:before {
+.icon-previous-hs::before {
   content: "\e84c";
 }
 
-.icon-zoom-out-hs:before {
+.icon-zoom-out-hs::before {
   content: "\e744";
 }
 
-.icon-next-step-hs:before {
+.icon-next-step-hs::before {
   content: "\e84b";
 }
 

src/components/ReInfo/index.vue

@@ -182,25 +182,32 @@ export default defineComponent({
     right: 25px;
     top: 22vh;
   }
+
   .rule-form {
     width: 80%;
+
     .verify {
       position: absolute;
       margin: -10px 0 0 -120px;
+
       &:hover {
         cursor: pointer;
       }
     }
+
     .tips {
       color: #409eff;
       float: right;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
+
   .secret {
     color: #409eff;
+
     &:hover {
       cursor: pointer;
     }

src/components/ReMap/src/Amap.vue

@@ -161,6 +161,7 @@ export default defineComponent({
 #mapview {
   height: 100%;
 }
+
 :deep(.amap-marker-label) {
   border: none !important;
 }

src/components/ReSelector/src/index.css

@@ -2,22 +2,27 @@
   font-size: 18px;
   transition: 0.3s;
 }
+
 .hs-item {
   width: 30px;
   height: 30px;
   box-sizing: border-box;
   line-height: 30px;
 }
+
 .hs-on {
   background-color: #409eff;
   border-radius: 50%;
 }
+
 .hs-range {
   background-color: #f2f6fc;
 }
+
 .both-left-sides {
   border-radius: 50% 0 0 50%;
 }
+
 .both-right-sides {
   border-radius: 0 50% 50% 0;
 }

src/components/ReSplitPane/index.css

@@ -1,4 +1,4 @@
-.clearfix:after {
+.clearfix::after {
   visibility: hidden;
   display: block;
   font-size: 0;
@@ -6,10 +6,12 @@
   clear: both;
   height: 0;
 }
+
 .vue-splitter-container {
   height: 100%;
   position: relative;
 }
+
 .vue-splitter-container-mask {
   z-index: 9999;
   width: 100%;
@@ -21,24 +23,27 @@
 
 .splitter-pane.vertical.splitter-paneL {
   position: absolute;
-  left: 0px;
+  left: 0;
   height: 100%;
   padding-right: 3px;
 }
+
 .splitter-pane.vertical.splitter-paneR {
   position: absolute;
-  right: 0px;
+  right: 0;
   height: 100%;
   padding-left: 3px;
 }
+
 .splitter-pane.horizontal.splitter-paneL {
   position: absolute;
-  top: 0px;
+  top: 0;
   width: 100%;
 }
+
 .splitter-pane.horizontal.splitter-paneR {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   width: 100%;
   padding-top: 3px;
 }

src/components/ReSplitPane/resizer.css

@@ -10,6 +10,7 @@
   -webkit-background-clip: padding;
   background-clip: padding-box;
 }
+
 .splitter-pane-resizer.horizontal {
   height: 11px;
   margin: -5px 0;
@@ -18,6 +19,7 @@
   cursor: row-resize;
   width: 100%;
 }
+
 .splitter-pane-resizer.vertical {
   width: 11px;
   height: 100%;

src/layout/components/AppMain.vue

@@ -47,6 +47,7 @@ export default defineComponent({
   position: relative;
   overflow-x: hidden;
 }
+
 .fixed-header + .app-main {
   padding-top: 50px;
 }

src/layout/components/Navbar.vue

@@ -194,20 +194,24 @@ export default defineComponent({
     align-items: center;
     height: 48px;
     line-height: 48px;
+
     .inter {
       width: 40px;
       height: 48px;
       display: flex;
       align-items: center;
       justify-content: space-around;
+
       &:hover {
         cursor: pointer;
         background: #f0f0f0;
       }
+
       img {
         width: 25px;
       }
     }
+
     .hsset {
       width: 40px;
       height: 48px;
@@ -215,11 +219,13 @@ export default defineComponent({
       align-items: center;
       justify-content: space-around;
       margin-right: 5px;
+
       &:hover {
         cursor: pointer;
         background: #f0f0f0;
       }
     }
+
     .el-dropdown-link {
       width: 70px;
       display: flex;
@@ -227,9 +233,11 @@ export default defineComponent({
       justify-content: space-around;
       margin-right: 10px;
       cursor: pointer;
+
       p {
         font-size: 14px;
       }
+
       img {
         width: 22px;
         height: 22px;
@@ -241,9 +249,11 @@ export default defineComponent({
 .el-dropdown-menu__item {
   padding: 0 10px;
 }
+
 .el-dropdown-menu {
   padding: 6px 0;
 }
+
 .el-dropdown-menu__item:focus,
 .el-dropdown-menu__item:not(.is-disabled):hover {
   color: #606266;

src/layout/components/panel/index.vue

@@ -81,7 +81,7 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
   background: #fff;
@@ -118,6 +118,7 @@ export default {
   line-height: 48px;
   top: 45%;
   background: rgb(24, 144, 255);
+
   i {
     font-size: 24px;
     line-height: 48px;
@@ -139,9 +140,11 @@ export default {
   align-items: center;
   top: 15px;
   margin-left: 10px;
+
   i {
     font-size: 20px;
     margin-right: 20px;
+
     &:hover {
       cursor: pointer;
       color: red;

src/layout/components/screenfull/index.vue

@@ -39,6 +39,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   justify-content: space-around;
+
   &:hover {
     cursor: pointer;
     background: #f0f0f0;

src/layout/components/setting/index.vue

@@ -246,6 +246,7 @@ export default {
 <style lang="scss" scoped>
 .setting {
   width: 100%;
+
   li {
     display: flex;
     justify-content: space-between;
@@ -253,16 +254,19 @@ export default {
     margin: 25px;
   }
 }
+
 :deep(.el-divider__text) {
   font-size: 16px;
   font-weight: 700;
 }
+
 .theme-stley {
   margin-top: 25px;
   width: 100%;
   height: 60px;
   display: flex;
   justify-content: space-around;
+
   li {
     width: 30%;
     height: 100%;
@@ -273,6 +277,7 @@ export default {
     background-color: #f0f2f5;
     border-radius: 4px;
     box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
     &:nth-child(1) {
       div {
         &:nth-child(1) {
@@ -280,13 +285,14 @@ export default {
           height: 100%;
           background: #1b2a47;
         }
+
         &:nth-child(2) {
           width: 70%;
           height: 30%;
           top: 0;
           right: 0;
           background-color: #fff;
-          box-shadow: 0 0 1px #888888;
+          box-shadow: 0 0 1px #888;
           position: absolute;
         }
       }
@@ -297,17 +303,18 @@ export default {
         &:nth-child(1) {
           width: 30%;
           height: 100%;
-          box-shadow: 0 0 1px #888888;
+          box-shadow: 0 0 1px #888;
           background-color: #fff;
           border-radius: 4px 0 0 4px;
         }
+
         &:nth-child(2) {
           width: 70%;
           height: 30%;
           top: 0;
           right: 0;
           background-color: #fff;
-          box-shadow: 0 0 1px #888888;
+          box-shadow: 0 0 1px #888;
           position: absolute;
         }
       }

src/layout/components/sidebar/Logo.vue

@@ -74,7 +74,7 @@ export default defineComponent({
 
   .collapse {
     .sidebar-logo {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 }

src/layout/components/tag/index.vue

@@ -565,11 +565,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@keyframes scheduleInWidth {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+@keyframes scheduleOutWidth {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0;
+  }
+}
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg);
+  }
+
+  to {
+    -o-transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .tags-view {
   width: 100%;
   font-size: 14px;
   display: flex;
-  box-shadow: 0 0 1px #888888;
+  box-shadow: 0 0 1px #888;
 
   .scroll-item {
     border-radius: 3px 3px 0 0;
@@ -585,6 +640,7 @@ export default {
       font-size: 10px;
       color: #1890ff;
       cursor: pointer;
+
       &:hover {
         border-radius: 50%;
         color: #fff;
@@ -612,6 +668,7 @@ export default {
     position: relative;
     width: 100%;
     background: #fff;
+
     .scroll-item {
       &:nth-child(1) {
         margin-left: 5px;
@@ -640,6 +697,7 @@ export default {
     white-space: nowrap;
     outline: 0;
     box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+
     li {
       width: 100%;
       margin: 0;
@@ -665,6 +723,7 @@ export default {
   align-items: center;
   background: #fff;
   font-size: 16px;
+
   li {
     width: 40px;
     height: 38px;
@@ -692,15 +751,17 @@ export default {
     }
   }
 }
+
 .el-dropdown-menu__item:not(.is-disabled):hover {
   color: #606266;
   background: #f0f0f0;
 }
+
 :deep(.el-dropdown-menu__item) i {
   margin-right: 10px;
 }
 
-.el-dropdown-menu__item--divided:before {
+.el-dropdown-menu__item--divided::before {
   margin: 0;
 }
 
@@ -712,6 +773,7 @@ export default {
   background-color: #eaf4fe;
   position: relative;
   color: #fff;
+
   a {
     color: #1890ff;
   }
@@ -725,6 +787,7 @@ export default {
 .card-in {
   border: 1px solid #1890ff;
   color: #1890ff;
+
   a {
     color: #1890ff;
   }
@@ -733,6 +796,7 @@ export default {
 .card-out {
   border: none;
   color: #666;
+
   a {
     color: #666;
   }
@@ -757,14 +821,6 @@ export default {
   background: #1890ff;
   animation: scheduleInWidth 400ms ease-in;
 }
-@keyframes scheduleInWidth {
-  from {
-    width: 0px;
-  }
-  to {
-    width: 100%;
-  }
-}
 // 灵动模式下鼠标移出隐藏蓝色进度条
 .schedule-out {
   width: 0;
@@ -775,14 +831,6 @@ export default {
   background: #1890ff;
   animation: scheduleOutWidth 400ms ease-in;
 }
-@keyframes scheduleOutWidth {
-  from {
-    width: 100%;
-  }
-  to {
-    width: 0;
-  }
-}
 // 刷新按钮动画效果
 .refresh-button {
   -webkit-animation: rotate 600ms linear infinite;
@@ -790,36 +838,4 @@ export default {
   -o-animation: rotate 600ms linear infinite;
   animation: rotate 600ms linear infinite;
 }
-@-webkit-keyframes rotate {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@-moz-keyframes rotate {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(360deg);
-  }
-}
-@-o-keyframes rotate {
-  from {
-    -o-transform: rotate(0deg);
-  }
-  to {
-    -o-transform: rotate(360deg);
-  }
-}
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>

src/layout/index.vue

@@ -175,25 +175,28 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+$sideBarWidth: 210px;
 @mixin clearfix {
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;
   }
 }
-$sideBarWidth: 210px;
 
 .app-wrapper {
   @include clearfix;
+
   position: relative;
   height: 100%;
   width: 100%;
+
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;

src/style/index.scss

@@ -26,8 +26,8 @@ label {
 }
 
 *,
-*:before,
+*::before,
-*:after {
+*::after {
   box-sizing: inherit;
 }
 
@@ -55,7 +55,7 @@ ul {
 }
 
 .clearfix {
-  &:after {
+  &::after {
     visibility: hidden;
     display: block;
     font-size: 0;
@@ -97,9 +97,6 @@ ul {
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
-  filter: url("data:image/svg+xml;utf8,#grayscale");
-  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-  -webkit-filter: grayscale(1);
 }
 
 // 色弱模式

src/style/mixin.scss

@@ -1,5 +1,5 @@
 @mixin clearfix {
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;

src/style/sidebar.scss

@@ -27,13 +27,13 @@
     background-color: $menuBg;
     height: 100%;
     position: fixed;
-    font-size: 0px;
+    font-size: 0;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    box-shadow: 0 0 1px #888888;
+    box-shadow: 0 0 1px #888;
 
     // reset element-plus css
     .horizontal-collapse-transition {
@@ -46,7 +46,7 @@
     }
 
     .el-scrollbar__bar.is-vertical {
-      right: 0px;
+      right: 0;
     }
 
     .el-scrollbar {
@@ -72,6 +72,7 @@
     .el-menu {
       border: none;
       height: 100%;
+      background-color: transparent;
       // background-color: $menuBg !important;
       // width: 100% !important;
     }
@@ -80,23 +81,21 @@
     .el-sub-menu__title {
       color: $menuText;
     }
-
+    
-    .el-menu {
-      background-color: transparent;
-    }
-
     // menu hover
     .submenu-title-noDropdown,
     .el-sub-menu__title {
+      background: $menuBg;
+
       &:hover {
         background-color: $menuHover !important;
       }
-      background: $menuBg;
     }
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
+
       i {
         color: $subMenuActiveText !important;
       }
@@ -139,6 +138,7 @@
 
     .el-sub-menu {
       overflow: hidden;
+
       & > .el-sub-menu__title {
         .el-sub-menu__icon-arrow {
           display: none;
@@ -166,17 +166,21 @@
   .el-menu--vertical {
     .el-menu--popup {
       background-color: $subMenuBg !important;
+
       .el-menu-item {
         color: $menuText;
         background-color: $subMenuBg;
+
         &:hover {
           background-color: $subMenuHover;
         }
       }
+
       .el-sub-menu__title {
         color: $menuText;
       }
     }
+
     & > .el-menu {
       i {
         margin-right: 16px;
@@ -186,6 +190,7 @@
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
+
       i {
         color: $subMenuActiveText !important;
       }
@@ -217,7 +222,7 @@
   // 手机端
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .sidebar-container {

src/views/components/count-to/index.vue

@@ -49,6 +49,7 @@ export default {
 .flex {
   display: flex;
 }
+
 :deep(.el-card) {
   text-align: center;
   margin-bottom: 10px;

src/views/components/cropping/index.vue

@@ -53,9 +53,11 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .el-button {
   margin-top: 10px;
 }
+
 .croppered {
   display: block;
   width: 45%;

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

@@ -126,26 +126,30 @@ export default {
 .box-card {
   margin: 10px;
 }
+
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   span {
     margin-right: 20px;
   }
 }
+
 .warp {
   height: 270px;
   width: 360px;
   margin: 0 auto;
   overflow: hidden;
+
   ul {
     list-style: none;
     padding: 0;
     margin: 0 auto;
+
     li,
     a {
-      display: block;
       height: 30px;
       line-height: 30px;
       display: flex;

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

@@ -54,6 +54,7 @@ export default {
 <style lang="scss" scoped>
 $W: 100%;
 $H: 80vh;
+
 .split-pane {
   width: 98%;
   height: $H;
@@ -61,6 +62,7 @@ $H: 80vh;
   text-align: center;
   font-size: 50px;
   color: #fff;
+
   .dv-a,
   .dv-b,
   .dv-c {
@@ -69,13 +71,16 @@ $H: 80vh;
     background: rgba($color: dodgerblue, $alpha: 0.8);
     line-height: $H;
   }
+
   .dv-b,
   .dv-c {
     line-height: 250px;
   }
+
   .dv-b {
     background: rgba($color: #000, $alpha: 0.8);
   }
+
   .dv-c {
     background: rgba($color: #ce272d, $alpha: 0.8);
   }

src/views/editor/index.vue

@@ -46,6 +46,7 @@ export default {
 :deep(.w-e-text-container) {
   z-index: 99 !important;
 }
+
 :deep(.w-e-toolbar) {
   z-index: 999 !important;
   position: static;

src/views/error/401.vue

@@ -37,33 +37,41 @@ export default {
   width: 800px;
   max-width: 100%;
   margin: 100px auto;
+
   .pan-back-btn {
     background: #008489;
     color: #fff;
     border: none !important;
   }
+
   .pan-gif {
     margin: 0 auto;
     display: block;
   }
+
   .pan-img {
     display: block;
     margin: 0 auto;
     width: 100%;
   }
+
   .text-jumbo {
     font-size: 60px;
     font-weight: 700;
     color: #484848;
   }
+
   .list-unstyled {
     font-size: 14px;
+
     li {
       padding-bottom: 5px;
     }
+
     a {
       color: #008489;
       text-decoration: none;
+
       &:hover {
         text-decoration: underline;
       }

src/views/error/404.vue

@@ -47,70 +47,43 @@ export default {
   top: 40%;
   left: 50%;
 }
+
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
+
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
+
     &__parent {
       width: 100%;
     }
+
     &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
       @keyframes cloudLeft {
         0% {
           top: 17px;
           left: 220px;
           opacity: 0;
         }
+
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
+
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
+
         100% {
           top: 97px;
           left: 60px;
@@ -123,16 +96,19 @@ export default {
           left: 420px;
           opacity: 0;
         }
+
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
+
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
+
         100% {
           top: 160px;
           left: 120px;
@@ -145,30 +121,85 @@ export default {
           left: 500px;
           opacity: 0;
         }
+
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
+
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
+
         100% {
           top: 200px;
           left: 300px;
           opacity: 0;
         }
       }
+
+      position: absolute;
+
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
     }
   }
+
   .bullshit {
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
+
     &__oops {
       font-size: 32px;
       font-weight: bold;
@@ -180,6 +211,7 @@ export default {
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
+
     &__headline {
       font-size: 20px;
       line-height: 24px;
@@ -192,6 +224,7 @@ export default {
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
+
     &__info {
       font-size: 13px;
       line-height: 21px;
@@ -203,6 +236,7 @@ export default {
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
+
     &__return-home {
       display: block;
       float: left;
@@ -211,7 +245,7 @@ export default {
       background: #1482f0;
       border-radius: 100px;
       text-align: center;
-      color: #ffffff;
+      color: #fff;
       opacity: 0;
       font-size: 14px;
       line-height: 36px;
@@ -221,16 +255,6 @@ export default {
       animation-delay: 0.3s;
       animation-fill-mode: forwards;
     }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
   }
 }
 </style>

src/views/flow-chart/index.vue

@@ -99,29 +99,35 @@ export default {
   height: 85vh;
   outline: none;
 }
+
 .logic-flow-view {
   margin: 10px;
   position: relative;
 }
+
 .demo-title {
   text-align: center;
   margin: 20px;
 }
+
 .demo-control {
   position: absolute;
   top: 10px;
   right: 20px;
   z-index: 2;
 }
+
 .time-plus {
   cursor: pointer;
 }
+
 .add-panel {
   position: absolute;
   z-index: 11;
   background-color: white;
   padding: 10px 5px;
 }
+
 .el-drawer__body {
   height: 80%;
   overflow: auto;

src/views/system/dict/config.vue

@@ -168,6 +168,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .list {
   padding: 10px;
+
   .page-left {
     position: absolute;
     left: 10px;
@@ -176,20 +177,25 @@ export default defineComponent({
     z-index: 10;
   }
 }
+
 :deep(.select-count) {
   margin-right: 5px;
 }
+
 :deep(.el-drawer__header) {
   margin-bottom: 0;
 }
+
 :deep(.el-drawer__header span) {
   color: rgba(0, 0, 0, 0.85);
   font-weight: 500;
   font-size: 16px;
 }
+
 :deep(.el-divider--horizontal) {
   margin: 13px 0;
 }
+
 :deep(.el-icon-close) {
   &:hover {
     color: red;

src/views/system/dict/index.vue

@@ -336,18 +336,22 @@ export default {
 .dict-container {
   margin: 10px;
 }
+
 .vxe-input + .vxe-button,
 .vxe-input + .vxe-button--dropdown,
 .vxe-button + .vxe-button,
 .vxe-button + .vxe-button--dropdown {
   margin-left: 0;
 }
+
 .vxe-button.type--button:not(.is--round) {
   border-radius: 0;
 }
+
 .vxe-button.size--medium.type--button {
   margin-right: 0.07em;
 }
+
 .text-model {
   &:hover {
     cursor: pointer;

src/views/welcome.vue

@@ -210,6 +210,7 @@ export default {
   width: 100%;
   height: 100%;
   margin-top: 1px;
+
   .top-content {
     display: flex;
     justify-content: space-between;
@@ -218,9 +219,11 @@ export default {
     background: #fff;
     padding: 20px;
     border-bottom: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
+
     .left-mark {
       display: flex;
       align-items: center;
+
       img {
         display: block;
         width: 72px;
@@ -231,10 +234,12 @@ export default {
       }
     }
   }
+
   .box-card {
     width: 80vw;
     margin: 10px auto;
     position: relative;
+
     #brokenLine {
       width: 100%;
       height: 50vh;

stylelint.config.js

@@ -0,0 +1,69 @@
+module.exports = {
+  root: true,
+  plugins: ["stylelint-order"],
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  rules: {
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["deep"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["v-deep", ":deep"]
+      }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin"
+        ]
+      }
+    ],
+    "no-empty-source": null,
+    "named-grid-areas-no-invalid": null,
+    "unicode-bom": "never",
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "rule-empty-line-before": [
+      "always",
+      {
+        ignore: ["after-comment", "first-nested"]
+      }
+    ],
+    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
+    "order/order": [
+      [
+        "dollar-variables",
+        "custom-properties",
+        "at-rules",
+        "declarations",
+        {
+          type: "at-rule",
+          name: "supports"
+        },
+        {
+          type: "at-rule",
+          name: "media"
+        },
+        "rules"
+      ],
+      { severity: "warning" }
+    ]
+  },
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
+};