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

2026-10-07 15:28:36 +08:00 · 2021-10-23 20:59:30 +08:00
parent 10cd51cba7
commit cd9bf2880e
19 changed files with 1444 additions and 722 deletions
@@ -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;
@@ -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;
    }
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
        }
@@ -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 {
@@ -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;
@@ -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>
@@ -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;
        }
@@ -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>
@@ -24,7 +24,7 @@ export default {
 .preview {
    margin-top: 10px;
    &::before {
-        content: '预览：';
+        content: "预览：";
        display: block;
    }
 }
@@ -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;
@@ -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;
    }