stylelint 相关依赖升级，根据规则调整部分代码

.stylelintrc

@@ -20,6 +20,10 @@
         "no-descending-specificity": null,
         "selector-pseudo-class-no-unknown": null,
         "property-no-unknown": null,
-        "font-family-no-missing-generic-family-keyword": null
+        "font-family-no-missing-generic-family-keyword": null,
+        "selector-id-pattern": null,
+        "selector-class-pattern": null,
+        "scss/no-global-function-names": null,
+        "max-line-length": null
     }
 }

package.json

@@ -39,7 +39,7 @@
         "@vue/compiler-sfc": "^3.2.20",
         "eslint": "^8.1.0",
         "eslint-plugin-vue": "^7.20.0",
-        "http-server": "^13.0.2",
+        "http-server": "^14.0.0",
         "husky": "^7.0.4",
         "lint-staged": "^11.2.3",
         "plop": "^2.7.6",
@@ -48,13 +48,13 @@
         "stylelint": "^14.0.0",
         "stylelint-config-html": "^0.0.2",
         "stylelint-config-recommended": "^6.0.0",
-        "stylelint-config-recommended-scss": "^4.3.0",
+        "stylelint-config-recommended-scss": "^5.0.0",
         "stylelint-config-recommended-vue": "^0.0.5",
-        "stylelint-config-standard": "^22.0.0",
-        "stylelint-scss": "^3.21.0",
+        "stylelint-config-standard": "^23.0.0",
+        "stylelint-scss": "^4.0.0",
         "svgo": "^2.7.0",
         "unplugin-auto-import": "^0.4.12",
-        "unplugin-vue-components": "^0.15.6",
+        "unplugin-vue-components": "^0.16.0",
         "vite": "^2.6.10",
         "vite-plugin-banner": "^0.1.3",
         "vite-plugin-compression": "^0.3.5",
@@ -64,6 +64,6 @@
         "vite-plugin-spritesmith": "^0.1.1",
         "vite-plugin-svg-icons": "^1.0.5",
         "vite-plugin-vue-setup-extend": "^0.1.0",
-        "vue-eslint-parser": "^7.11.0"
+        "vue-eslint-parser": "^8.0.0"
     }
 }

src/assets/styles/globals.scss

@@ -4,13 +4,13 @@
     height: 13px;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgb(0 0 0 / 40%);
     background-clip: padding-box;
     border: 3px solid transparent;
     border-radius: 7px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(0 0 0 / 50%);
 }
 ::-webkit-scrollbar-track {
     background-color: transparent;
@@ -26,7 +26,7 @@ body {
     margin: 0;
     color: #333;
     box-sizing: border-box;
-    font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif;
+    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
     -webkit-tap-highlight-color: transparent;
     &.hidden {
         overflow: hidden;
@@ -46,8 +46,8 @@ body {
     [data-fixed-calc-width] {
         transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(division($g-sub-sidebar-width, 2));
     }
-    &[data-menu-mode=head],
-    &[data-menu-mode=single] {
+    &[data-menu-mode="head"],
+    &[data-menu-mode="single"] {
         [data-fixed-calc-width] {
             width: calc(100% - #{$g-sub-sidebar-width});
             transform: translateX(-50%) translateX(division($g-sub-sidebar-width, 2));
@@ -59,15 +59,15 @@ body {
         width: calc(100% - #{$g-main-sidebar-width} - 64px);
         transform: translateX(-50%) translateX(division($g-main-sidebar-width, 2)) translateX(32px);
     }
-    &[data-menu-mode=head],
-    &[data-menu-mode=single] {
+    &[data-menu-mode="head"],
+    &[data-menu-mode="single"] {
         [data-fixed-calc-width] {
             width: calc(100% - 64px);
             transform: translateX(-50%) translateX(32px);
         }
     }
 }
-[data-mode=mobile] {
+[data-mode="mobile"] {
     [data-fixed-calc-width] {
         width: 100% !important;
         transform: translateX(-50%) !important;

src/assets/styles/resources/utils.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 // @mixin 通过 @include 调用使用
 // % 通过 @extend 调用使用
@@ -8,13 +8,13 @@
 
 // 文字超出隐藏，默认为单行超出隐藏，可设置多行
 @mixin text-overflow($line: 1, $fixed-width: true) {
-    @if ($line==1 and $fixed-width==true) {
+    @if ($line == 1 and $fixed-width == true) {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
     @else {
-        display: -webkit-box;
+        display: box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: $line;
         overflow: hidden;
@@ -24,15 +24,15 @@
 // 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
 @mixin position-center($type: x) {
     position: absolute;
-    @if ($type==x) {
+    @if ($type == x) {
         left: 50%;
         transform: translateX(-50%);
     }
-    @if ($type==y) {
+    @if ($type == y) {
         top: 50%;
         transform: translateY(-50%);
     }
-    @if ($type==xy) {
+    @if ($type == xy) {
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -50,7 +50,7 @@
     zoom: 1;
     &::before,
     &::after {
-        content: '';
+        content: "";
         display: block;
         clear: both;
     }

src/components/Copyright/index.vue

@@ -9,7 +9,7 @@
 
 <style lang="scss" scoped>
 footer {
-    margin: 40px 0 20px 0;
+    margin: 40px 0 20px;
     line-height: 20px;
     text-align: center;
     color: #808695;

src/components/ImageUpload/index.vue

@@ -154,13 +154,13 @@ function onSuccess(res) {
 .image {
     position: relative;
     .mask {
-        opacity: 0;
+        opacity: 0%;
         position: absolute;
         top: 0;
         width: 100%;
         height: 100%;
         font-size: 24px;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 50%);
         transition: all 0.3s;
         .actions {
             width: 100px;
@@ -187,7 +187,7 @@ function onSuccess(res) {
         }
     }
     &:hover .mask {
-        opacity: 1;
+        opacity: 100%;
     }
 }
 :deep(.el-upload) {
@@ -214,13 +214,13 @@ function onSuccess(res) {
             position: absolute;
             top: 0;
             &::after {
-                content: '';
+                content: "";
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 left: 0;
                 top: 0;
-                background-color: rgba(0, 0, 0, 0.2);
+                background-color: rgb(0 0 0 / 20%);
             }
             .el-progress {
                 z-index: 1;

src/components/ImagesUpload/index.vue

@@ -183,13 +183,13 @@ function onSuccess(res) {
         display: block;
     }
     .mask {
-        opacity: 0;
+        opacity: 0%;
         position: absolute;
         top: 0;
         width: 100%;
         height: 100%;
         font-size: 24px;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 50%);
         transition: all 0.3s;
         .actions {
             width: 100px;
@@ -216,7 +216,7 @@ function onSuccess(res) {
         }
     }
     &:hover .mask {
-        opacity: 1;
+        opacity: 100%;
     }
 }
 .images-upload {
@@ -243,13 +243,13 @@ function onSuccess(res) {
             position: absolute;
             top: 0;
             &::after {
-                content: '';
+                content: "";
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 left: 0;
                 top: 0;
-                background-color: rgba(0, 0, 0, 0.2);
+                background-color: rgb(0 0 0 / 20%);
             }
             .el-progress {
                 z-index: 1;

src/layout/components/BuyIt/index.vue

@@ -89,10 +89,10 @@ function open(url) {
         background-color: #409eff;
         border-bottom: 1px solid #fff;
         transition: 0.3s;
-        opacity: 0.7;
+        opacity: 70%;
         cursor: pointer;
         &:hover {
-            opacity: 1;
+            opacity: 100%;
         }
         &:first-child {
             border-top-left-radius: 5px;

src/layout/components/Search/index.vue

@@ -217,14 +217,14 @@ function scrollTo(offsetTop) {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($color: #000, $alpha: 0.5);
+    background-color: rgb(0 0 0 / 50%);
     backdrop-filter: blur(10px);
     transition: all 0.2s;
     transform: translateZ(0);
-    opacity: 0;
+    opacity: 0%;
     visibility: hidden;
     &.searching {
-        opacity: 1;
+        opacity: 100%;
         visibility: visible;
         .container {
             transform: initial;
@@ -267,7 +267,7 @@ function scrollTo(offsetTop) {
                     font-size: 12px;
                     font-weight: bold;
                     color: #333;
-                    background-color: rgba($color: #fff, $alpha: 0.8);
+                    background-color: rgb(255 255 255 / 80%);
                     box-shadow: inset 0 -2px #505e5f, inset 0 0 1px 1px #dec6c6, 0 1px 2px 1px #acb0c166;
                 }
             }
@@ -291,8 +291,8 @@ function scrollTo(offsetTop) {
                 &.actived {
                     background-color: #dbe7f8;
                     .icon {
-                        [class^=el-icon-],
-                        [class^=ri-],
+                        [class^="el-icon-"],
+                        [class^="ri-"],
                         .svg-icon {
                             color: #409eff;
                             transform: scale(1.2);
@@ -312,8 +312,8 @@ function scrollTo(offsetTop) {
                 .icon {
                     flex: 0 0 66px;
                     text-align: center;
-                    [class^=el-icon-],
-                    [class^=ri-],
+                    [class^="el-icon-"],
+                    [class^="ri-"],
                     .svg-icon {
                         color: #999;
                         font-size: 20px;

src/layout/components/SidebarItem/index.vue

@@ -89,7 +89,7 @@ function resolvePath(routePath) {
         vertical-align: -0.25em;
         transition: transform 0.3s;
         color: unset;
-        &[class^=el-icon-],
+        &[class^="el-icon-"],
         &[class*=" el-icon-"] {
             vertical-align: middle;
         }

src/layout/components/SubSidebar/index.vue

@@ -38,7 +38,7 @@ function onSidebarScroll(e) {
 }
 .sub-sidebar-enter-from,
 .sub-sidebar-leave-active {
-    opacity: 0;
+    opacity: 0%;
     transform: translateY(30px) skewY(10deg);
 }
 .sub-sidebar-leave-active {

src/layout/components/ThemeSetting/index.vue

@@ -345,7 +345,7 @@ onMounted(() => {
         }
         &-side {
             &::before {
-                content: '';
+                content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -354,7 +354,7 @@ onMounted(() => {
                 background-color: #222b45;
             }
             &::after {
-                content: '';
+                content: "";
                 position: absolute;
                 top: 0;
                 left: 10px;
@@ -365,7 +365,7 @@ onMounted(() => {
         }
         &-head {
             &::before {
-                content: '';
+                content: "";
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -374,7 +374,7 @@ onMounted(() => {
                 background-color: #222b45;
             }
             &::after {
-                content: '';
+                content: "";
                 position: absolute;
                 top: 10px;
                 left: 0;
@@ -385,7 +385,7 @@ onMounted(() => {
         }
         &-single {
             &::before {
-                content: '';
+                content: "";
                 position: absolute;
                 top: 0;
                 left: 0;

src/layout/components/Topbar/index.vue

@@ -93,6 +93,7 @@ function pathCompile(path) {
         align-items: center;
         padding-right: 50px;
         overflow: hidden;
+        /* stylelint-disable-next-line property-no-vendor-prefix */
         -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
         .sidebar-collapse {
             display: flex;
@@ -136,7 +137,7 @@ function pathCompile(path) {
 }
 .breadcrumb-enter-from,
 .breadcrumb-leave-active {
-    opacity: 0;
+    opacity: 0%;
     transform: translateX(30px) skewX(-50deg);
 }
 </style>

src/layout/components/UserMenu/index.vue

@@ -130,6 +130,7 @@ function pro() {
             font-weight: bold;
             font-size: 14px;
             background-image: linear-gradient(to right, #ffa237, #fc455d);
+            /* stylelint-disable-next-line property-no-vendor-prefix */
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }

src/layout/index.vue

@@ -91,8 +91,8 @@ function switchMenu(index) {
         margin-left: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
     }
     // 没有主侧边栏
-    &[data-menu-mode=head],
-    &[data-menu-mode=single] {
+    &[data-menu-mode="head"],
+    &[data-menu-mode="single"] {
         .sidebar-container {
             width: $g-sub-sidebar-width;
         }
@@ -110,8 +110,8 @@ function switchMenu(index) {
         margin-left: calc(#{$g-main-sidebar-width} + 64px);
     }
     // 没有主侧边栏
-    &[data-menu-mode=head],
-    &[data-menu-mode=single] {
+    &[data-menu-mode="head"],
+    &[data-menu-mode="single"] {
         .sidebar-container {
             width: 64px;
         }
@@ -120,7 +120,7 @@ function switchMenu(index) {
         }
     }
 }
-[data-mode=mobile] {
+[data-mode="mobile"] {
     .sidebar-container {
         width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
         transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
@@ -131,7 +131,7 @@ function switchMenu(index) {
     .main-container {
         margin-left: 0;
     }
-    &[data-menu-mode=head] {
+    &[data-menu-mode="head"] {
         .sidebar-container {
             width: calc(#{$g-main-sidebar-width} + #{$g-sub-sidebar-width});
             transform: translateX(-#{$g-main-sidebar-width}) translateX(-#{$g-sub-sidebar-width});
@@ -143,7 +143,7 @@ function switchMenu(index) {
             margin-left: 0;
         }
     }
-    &[data-menu-mode=single] {
+    &[data-menu-mode="single"] {
         .sidebar-container {
             width: calc(#{$g-sub-sidebar-width});
             transform: translateX(-#{$g-sub-sidebar-width});
@@ -185,14 +185,14 @@ function switchMenu(index) {
         left: 0;
         width: 100%;
         height: 100%;
-        background-color: rgba($color: #000, $alpha: 0.5);
+        background-color: rgb(0 0 0 / 50%);
         backdrop-filter: blur(2px);
         transition: all 0.2s;
         transform: translateZ(0);
-        opacity: 0;
+        opacity: 0%;
         visibility: hidden;
         &.show {
-            opacity: 1;
+            opacity: 100%;
             visibility: visible;
         }
     }
@@ -252,11 +252,11 @@ header + .wrapper {
     transition: 0.15s;
 }
 .main-enter-from {
-    opacity: 0;
+    opacity: 0%;
     margin-left: -20px;
 }
 .main-leave-to {
-    opacity: 0;
+    opacity: 0%;
     margin-left: 20px;
 }
 </style>

src/views/component_extend_example/editor.demo.vue

@@ -24,7 +24,7 @@ export default {
 .preview {
     margin-top: 10px;
     &::before {
-        content: '预览：';
+        content: "预览：";
         display: block;
     }
 }

src/views/index.vue

@@ -3,7 +3,7 @@
         <page-header title="欢迎使用 Fantastic-admin（基础版）">
             <template #content>
                 <div>
-                    <div style="margin-bottom: 5px;">这是一款<b style="text-emphasis-style: '❤';">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</div>
+                    <div style="margin-bottom: 5px;">这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护</div>
                     <div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
                 </div>
             </template>
@@ -14,7 +14,7 @@
         </page-header>
         <el-row :gutter="20" style="margin: 0 10px;">
             <el-col :lg="8">
-                <page-main title="框架信息" style="margin: 0 0 20px 0;">
+                <page-main title="框架信息" style="margin: 0 0 20px;">
                     <div class="fa-info">
                         <img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/logo.png`" style="width: 150px;">
                         <h1>Fantastic-admin</h1>
@@ -34,7 +34,7 @@
                 </page-main>
             </el-col>
             <el-col :lg="16">
-                <el-row :gutter="20" style="margin: 0 -10px 20px -10px;">
+                <el-row :gutter="20" style="margin: 0 -10px 20px;">
                     <el-col :md="4">
                         <div class="icon-box icon-box-1" @click="onIconClick('收藏')">
                             <i class="el-icon-star-off" />
@@ -72,7 +72,7 @@
                         </div>
                     </el-col>
                 </el-row>
-                <page-main title="应用场景" style="margin: 0 0 20px 0;">
+                <page-main title="应用场景" style="margin: 0 0 20px;">
                     <div class="question">
                         <ol class="answer">
                             <li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
@@ -272,6 +272,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.text-emphasis {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-text-emphasis-style: "❤";
+}
 .fa-info {
     padding: 10px 0 0;
     text-align: center;
@@ -378,7 +382,7 @@ export default {
         color: #666;
     }
     .contrast::after {
-        content: '%';
+        content: "%";
     }
     .sub-title {
         font-size: 12px;

src/views/login.vue

@@ -182,7 +182,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-[data-mode=mobile] {
+[data-mode="mobile"] {
     #login-box {
         max-width: 80%;
         .login-banner {
@@ -190,7 +190,7 @@ export default {
         }
     }
 }
-:deep(input[type=password]::-ms-reveal) {
+:deep(input[type="password"]::-ms-reveal) {
     display: none;
 }
 .bg-banner {
@@ -198,7 +198,7 @@ export default {
     z-index: 0;
     width: 100%;
     height: 100%;
-    background-image: url(../assets/images/login-bg.jpg);
+    background-image: url("../assets/images/login-bg.jpg");
     background-size: cover;
     background-position: center center;
 }
@@ -209,13 +209,13 @@ export default {
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-    background: rgba(255, 255, 255, 0.8);
+    background: rgb(255 255 255 / 80%);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 0 5px #999;
     .login-banner {
         width: 300px;
-        background-image: url(../assets/images/login-banner.jpg);
+        background-image: url("../assets/images/login-banner.jpg");
         background-size: cover;
         background-position: center center;
     }