chore: update eslint@8.8.0

.eslintrc.js

@@ -37,7 +37,7 @@ module.exports = {
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    "@vue/eslint-config-typescript"
   ],
   parser: "vue-eslint-parser",
   parserOptions: {
@@ -50,6 +50,10 @@ module.exports = {
     }
   },
   rules: {
+    "vue/no-v-html": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/multi-word-component-names": "off",
     "@typescript-eslint/no-explicit-any": "off", // any
     "no-debugger": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off", // setup()

.prettierrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   bracketSpacing: true,
-  jsxBracketSameLine: true,
   singleQuote: false,
-  arrowParens: 'avoid',
-  trailingComma: 'none'
+  arrowParens: "avoid",
+  trailingComma: "none"
 };

package.json

@@ -82,33 +82,37 @@
     "@types/node": "14.14.14",
     "@types/nprogress": "0.2.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "4.31.0",
-    "@typescript-eslint/parser": "4.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "@vitejs/plugin-legacy": "^1.6.4",
     "@vitejs/plugin-vue": "^2.1.0",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
-    "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/eslint-config-typescript": "7.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@zougt/vite-plugin-theme-preprocessor": "^1.4.4",
     "autoprefixer": "^10.4.2",
     "cross-env": "7.0.3",
-    "eslint": "7.30.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-vue": "7.17.0",
-    "husky": "7.0.2",
+    "eslint": "^8.8.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.4.1",
+    "husky": "^7.0.4",
     "lint-staged": "11.1.2",
     "postcss": "8.2.6",
+    "postcss-html": "^1.3.0",
     "postcss-import": "14.0.0",
-    "prettier": "2.3.2",
+    "postcss-scss": "^4.0.3",
+    "prettier": "^2.5.1",
     "pretty-quick": "3.1.1",
     "rimraf": "3.0.2",
     "rollup-plugin-visualizer": "^5.5.4",
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-order": "4.1.0",
+    "stylelint": "^14.3.0",
+    "stylelint-config-html": "^1.0.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended": "^6.0.0",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-order": "^5.0.0",
     "typescript": "^4.5.5",
     "unplugin-element-plus": "^0.2.0",
     "vite": "^2.7.13",
@@ -118,7 +122,7 @@
     "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-windicss": "^1.6.1",
     "vite-svg-loader": "2.2.0",
-    "vue-eslint-parser": "7.10.0",
+    "vue-eslint-parser": "^8.2.0",
     "windicss": "^3.4.3"
   },
   "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",

src/components/ReCountTo/src/normal/index.tsx

@@ -169,7 +169,8 @@ export default defineComponent({
           style={{
             color: props.color,
             fontSize: props.fontSize
-          }}>
+          }}
+        >
           {state.displayValue}
         </span>
       </>

src/components/ReCountTo/src/rebound/index.tsx

@@ -43,7 +43,8 @@ export default defineComponent({
         <div
           class="scroll-num"
           // @ts-ignore
-          style={{ "--i": props.i, "--delay": props.delay }}>
+          style={{ "--i": props.i, "--delay": props.delay }}
+        >
           <ul ref="ul" style={{ fontSize: "32px" }}>
             <li>0</li>
             <li>1</li>

src/components/ReCropper/src/index.tsx

@@ -133,7 +133,8 @@ export default defineComponent({
       <>
         <div
           class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
-          style={this.getWrapperStyle}>
+          style={this.getWrapperStyle}
+        >
           <img
             ref="imgElRef"
             src={this.props.src}

src/components/ReFlop/src/filpper.css

@@ -9,7 +9,7 @@
   background: #fff;
   font-size: 66px;
   color: #fff;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
   text-align: center;
   font-family: "Helvetica Neue";
 }
@@ -58,7 +58,7 @@
 .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);
+  box-shadow: 0 -2px 6px rgb(255 255 255 / 30%);
   backface-visibility: hidden;
 }
 
@@ -85,7 +85,7 @@
 .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);
+  box-shadow: 0 2px 6px rgb(255 255 255 / 30%);
   backface-visibility: hidden;
 }
 

src/components/ReSelector/src/index.tsx

@@ -299,10 +299,12 @@ export default defineComponent({
                       cursor: unref(rateDisabled) ? "auto" : "pointer",
                       textAlign: "center"
                     }}
-                    key={key}>
+                    key={key}
+                  >
                     <div
                       ref={`hsdiv${props.HsKey}${key}`}
-                      class={`hs-item ${[unref(classes)[key] + key]}`}>
+                      class={`hs-item ${[unref(classes)[key] + key]}`}
+                    >
                       <span>{item}</span>
                     </div>
                   </td>

src/components/ReSplitPane/index.tsx

@@ -111,20 +111,24 @@ export default defineComponent({
           class="vue-splitter-container clearfix"
           style={(unref(cursor), unref(userSelect))}
           onMouseup={() => onMouseUp()}
-          onMousemove={() => onMouseMove(event)}>
+          onMousemove={() => onMouseMove(event)}
+        >
           <div
             class={unref(leftClass)}
-            style={{ [unref(type)]: unref(percent) + "%" }}>
+            style={{ [unref(type)]: unref(percent) + "%" }}
+          >
             {ctx.slots.paneL()}
           </div>
           <resizer
             style={`${unref([resizeType])}:${unref(percent)}%`}
             split={props.splitSet?.split}
             onMousedown={() => onMouseDown()}
-            onClick={() => onClick()}></resizer>
+            onClick={() => onClick()}
+          ></resizer>
           <div
             class={unref(rightClass)}
-            style={{ [unref(type)]: 100 - unref(percent) + "%" }}>
+            style={{ [unref(type)]: 100 - unref(percent) + "%" }}
+          >
             {ctx.slots.paneR()}
           </div>
           <div v-show={unref(active)} class="vue-splitter-container-mask"></div>

src/components/ReSplitPane/resizer.css

@@ -1,21 +1,18 @@
 .splitter-pane-resizer {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #000;
   position: absolute;
   opacity: 0.2;
   z-index: 1;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding;
+  background-clip: padding;
   background-clip: padding-box;
 }
 
 .splitter-pane-resizer.horizontal {
   height: 11px;
   margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  border-top: 5px solid rgb(255 255 255 / 0%);
+  border-bottom: 5px solid rgb(255 255 255 / 0%);
   cursor: row-resize;
   width: 100%;
 }
@@ -24,7 +21,7 @@
   width: 11px;
   height: 100%;
   margin-left: -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
+  border-left: 5px solid rgb(255 255 255 / 0%);
+  border-right: 5px solid rgb(255 255 255 / 0%);
   cursor: col-resize;
 }

src/layout/components/sidebar/horizontal.vue

@@ -207,14 +207,8 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .translation {
-  .el-dropdown-menu__item {
-    padding: 5px 40px !important;
-  }
-
-  .el-dropdown-menu__item:focus,
-  .el-dropdown-menu__item:not(.is-disabled):hover {
-    color: #606266;
-    background: #f0f0f0;
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
   }
 
   .check-zh {
@@ -231,16 +225,10 @@ onMounted(() => {
 .logout {
   max-width: 120px;
 
-  .el-dropdown-menu__item {
+  ::v-deep(.el-dropdown-menu__item) {
     min-width: 100%;
     display: inline-flex;
     flex-wrap: wrap;
   }
-
-  .el-dropdown-menu__item:focus,
-  .el-dropdown-menu__item:not(.is-disabled):hover {
-    color: #606266;
-    background: #f0f0f0;
-  }
 }
 </style>

src/layout/components/tag/index.scss

@@ -18,36 +18,6 @@
   }
 }
 
-@-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);
@@ -80,7 +50,7 @@
 
   .scroll-item {
     border-radius: 3px 3px 0 0;
-    padding: 0 6px 0 6px;
+    padding: 0 6px;
     box-shadow: 0 0 1px #888;
     position: relative;
     margin-right: 4px;
@@ -123,7 +93,7 @@
   a {
     text-decoration: none;
     color: #666;
-    padding: 0 4px 0 4px;
+    padding: 0 4px;
   }
 
   .scroll-container {
@@ -340,8 +310,5 @@
 
 /* 刷新按钮动画效果 */
 .refresh-button {
-  -webkit-animation: rotate 600ms linear infinite;
-  -moz-animation: rotate 600ms linear infinite;
-  -o-animation: rotate 600ms linear infinite;
   animation: rotate 600ms linear infinite;
 }

src/layout/theme/default-vars.scss

@@ -19,7 +19,7 @@ $subMenuBg: #0f0303 !default;
 /* 有无子集的激活菜单背景 */
 $subMenuActiveBg: #4091f7 !default;
 $navTextColor: #fff !default;
-$menuText: rgba(254, 254, 254, 0.65) !default;
+$menuText: rgb(254 254 254 / 65%) !default;
 
 /* logo背景颜色 */
 $sidebarLogo: #002140 !default;

src/layout/theme/dusk-vars.scss

@@ -5,7 +5,7 @@ $menuHover: #e13c39;
 $subMenuBg: #000;
 $subMenuActiveBg: #e13c39;
 $navTextColor: red;
-$menuText: rgba(254, 254, 254, 0.651);
+$menuText: rgb(254 254 254 / 65.1%);
 $sidebarLogo: #42090c;
 $menuTitleHover: #fff;
 $menuActiveBefore: #e13c39;

src/layout/theme/volcano-vars.scss

@@ -5,7 +5,7 @@ $menuHover: #e85f33;
 $subMenuBg: #0f0603;
 $subMenuActiveBg: #e85f33;
 $navTextColor: #fff;
-$menuText: rgba(254, 254, 254, 0.65);
+$menuText: rgb(254 254 254 / 65%);
 $sidebarLogo: #441708;
 $menuTitleHover: #fff;
 $menuActiveBefore: #e85f33;

src/layout/theme/yellow-vars.scss

@@ -5,7 +5,7 @@ $menuHover: #f6da4d;
 $subMenuBg: #0f0603;
 $subMenuActiveBg: #f6da4d;
 $navTextColor: #fff;
-$menuText: rgba(254, 254, 254, 0.65);
+$menuText: rgb(254 254 254 / 65%);
 $sidebarLogo: #443b05;
 $menuTitleHover: #fff;
 $menuActiveBefore: #f6da4d;

src/style/dark.scss

@@ -19,7 +19,7 @@
   }
 
   .el-overlay {
-    background-color: rgba(0, 0, 0, 0.05) !important;
+    background-color: rgb(0 0 0 / 5%) !important;
   }
 
   .el-drawer {

src/style/element-plus.scss

@@ -25,7 +25,7 @@
 }
 
 .el-dropdown-menu {
-  padding: 2px 0 2px 0 !important;
+  padding: 2px 0 !important;
 }
 
 .el-range-separator {

src/style/index.scss

@@ -11,7 +11,7 @@ body {
   padding: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, Arial, sans-serif;
 }
@@ -74,19 +74,11 @@ ul {
 /* 灰色模式 */
 .html-grey {
   filter: grayscale(100%);
-  -webkit-filter: grayscale(100%);
-  -moz-filter: grayscale(100%);
-  -ms-filter: grayscale(100%);
-  -o-filter: grayscale(100%);
 }
 
 /* 色弱模式 */
 .html-weakness {
   filter: invert(80%);
-  -webkit-filter: invert(80%);
-  -moz-filter: invert(80%);
-  -ms-filter: invert(80%);
-  -o-filter: invert(80%);
 }
 
 .pc-spacing {

src/style/sidebar.scss

@@ -502,9 +502,7 @@
     background-color: $menuActiveBefore;
     content: "";
     clear: both;
-    -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
-    -webkit-transform: translateY(0);
     transform: translateY(0);
   }
 
@@ -517,9 +515,7 @@
     background-color: $menuActiveBefore;
     content: "";
     clear: both;
-    -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
-    -webkit-transform: translateY(0);
     transform: translateY(0);
   }
 
@@ -530,7 +526,6 @@
     position: absolute;
     height: 0;
     width: 3px;
-    -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     top: 50%;
   }

stylelint.config.js

@@ -1,18 +1,20 @@
 module.exports = {
   root: true,
   plugins: ["stylelint-order"],
+  customSyntax: "postcss-html",
   extends: ["stylelint-config-standard", "stylelint-config-prettier"],
   rules: {
+    "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        ignorePseudoClasses: ["deep"]
+        ignorePseudoClasses: ["global"]
       }
     ],
     "selector-pseudo-element-no-unknown": [
       true,
       {
-        ignorePseudoElements: ["v-deep", ":deep"]
+        ignorePseudoElements: ["v-deep"]
       }
     ],
     "at-rule-no-unknown": [
@@ -65,5 +67,26 @@ module.exports = {
       { severity: "warning" }
     ]
   },
-  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"]
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],
+  overrides: [
+    {
+      files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
+      extends: ["stylelint-config-recommended", "stylelint-config-html"],
+      rules: {
+        "keyframes-name-pattern": null,
+        "selector-pseudo-class-no-unknown": [
+          true,
+          {
+            ignorePseudoClasses: ["deep", "global"]
+          }
+        ],
+        "selector-pseudo-element-no-unknown": [
+          true,
+          {
+            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
+          }
+        ]
+      }
+    }
+  ]
 };