chore: sytlelint

package.json

@@ -25,7 +25,7 @@
     "clean:lib": "rimraf node_modules",
     "lint:eslint": "eslint --cache --max-warnings 0  \"src/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,ts,tsx,css,less,scss,vue,html,md}\"",
-    "lint:style": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:stylelint": "stylelint \"**/*.{vue,css,less,postcss,scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged",
     "npm:check": "npx npm-check-updates",
     "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
@@ -112,8 +112,10 @@
     "stylelint": "^15.6.0",
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0",
     "terser": "^5.17.1",
     "typescript": "^5.0.4",
     "unplugin-vue-setup-extend-plus": "^1.0.0",

pnpm-lock.yaml

@@ -228,6 +228,9 @@ devDependencies:
   stylelint:
     specifier: ^15.6.0
     version: 15.6.0
+  stylelint-config-recess-order:
+    specifier: ^4.0.0
+    version: 4.0.0(stylelint@15.6.0)
   stylelint-config-recommended:
     specifier: ^12.0.0
     version: 12.0.0(stylelint@15.6.0)
@@ -240,6 +243,9 @@ devDependencies:
   stylelint-order:
     specifier: ^6.0.3
     version: 6.0.3(stylelint@15.6.0)
+  stylelint-prettier:
+    specifier: ^3.0.0
+    version: 3.0.0(prettier@2.8.8)(stylelint@15.6.0)
   terser:
     specifier: ^5.17.1
     version: 5.17.1
@@ -7852,6 +7858,15 @@ packages:
       stylelint: 15.6.0
     dev: true
 
+  /stylelint-config-recess-order@4.0.0(stylelint@15.6.0):
+    resolution: {integrity: sha512-sOb+OofMryBR91CbzgV2FavpONqiIeAE7cfrgyUHqePblWBKsYzoUuWThI5EjPRA7KKeovm6ykr7twWYLeafPQ==}
+    peerDependencies:
+      stylelint: '>=15'
+    dependencies:
+      stylelint: 15.6.0
+      stylelint-order: 6.0.3(stylelint@15.6.0)
+    dev: true
+
   /stylelint-config-recommended-vue@1.4.0(postcss-html@1.5.0)(stylelint@15.6.0):
     resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
     engines: {node: ^12 || >=14}
@@ -7893,6 +7908,18 @@ packages:
       stylelint: 15.6.0
     dev: true
 
+  /stylelint-prettier@3.0.0(prettier@2.8.8)(stylelint@15.6.0):
+    resolution: {integrity: sha512-kIks1xw6np0zElokMT2kP6ar3S4MBoj6vUtPJuND1pFELMpZxVS/0uHPR4HDAVn0WAD3I5oF0IA3qBFxBpMkLg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      prettier: '>=2.0.0'
+      stylelint: '>=14.0.0'
+    dependencies:
+      prettier: 2.8.8
+      prettier-linter-helpers: 1.0.0
+      stylelint: 15.6.0
+    dev: true
+
   /stylelint@15.6.0:
     resolution: {integrity: sha512-Cqzpc8tvJm77KaM8qUbhpJ/UYK55Ia0whQXj4b9IId9dlPICO7J8Lyo15SZWiHxKjlvy3p5FQor/3n6i8ignXg==}
     engines: {node: ^14.13.1 || >=16.0.0}

src/components/Application/src/AppDarkModeToggle.vue

@@ -46,6 +46,8 @@ html[data-theme='dark'] {
 .@{prefix-cls} {
   position: relative;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 50px;
   height: 26px;
   padding: 0 6px;
@@ -53,8 +55,6 @@ html[data-theme='dark'] {
   cursor: pointer;
   background-color: #151515;
   border-radius: 30px;
-  justify-content: space-between;
-  align-items: center;
 
   &-inner {
     position: absolute;

src/components/Application/src/AppLogo.vue

@@ -70,8 +70,8 @@ function goHome() {
   &__title {
     font-size: 16px;
     font-weight: 700;
-    transition: all 0.5s;
     line-height: normal;
+    transition: all 0.5s;
   }
 }
 </style>

src/components/Application/src/search/AppSearchFooter.vue

@@ -23,6 +23,8 @@ const { t } = useI18n()
 .@{prefix-cls} {
   position: relative;
   display: flex;
+  flex-shrink: 0;
+  align-items: center;
   height: 44px;
   padding: 0 16px;
   font-size: 12px;
@@ -30,11 +32,11 @@ const { t } = useI18n()
   background-color: @component-background;
   border-top: 1px solid @border-color-base;
   border-radius: 0 0 16px 16px;
-  align-items: center;
-  flex-shrink: 0;
 
   &-item {
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: 20px;
     height: 18px;
     padding-bottom: 2px;
@@ -42,8 +44,6 @@ const { t } = useI18n()
     background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
     border-radius: 2px;
     box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgb(30 35 90 / 40%);
-    align-items: center;
-    justify-content: center;
 
     &:nth-child(2),
     &:nth-child(3),

src/components/Application/src/search/AppSearchModal.vue

@@ -114,11 +114,11 @@ function handleClose() {
   left: 0;
   z-index: 800;
   display: flex;
+  justify-content: center;
   width: 100%;
   height: 100%;
   padding-top: 50px;
   background-color: rgb(0 0 0 / 25%);
-  justify-content: center;
 
   &--mobile {
     padding: 0;
@@ -159,19 +159,19 @@ function handleClose() {
 
   &-content {
     position: relative;
+    flex-direction: column;
     width: 632px;
     margin: 0 auto auto;
     background-color: @component-background;
     border-radius: 16px;
     box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
-    flex-direction: column;
   }
 
   &-input__wrapper {
     display: flex;
-    padding: 14px 14px 0;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    padding: 14px 14px 0;
   }
 
   &-input {
@@ -194,12 +194,12 @@ function handleClose() {
 
   &-not-data {
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100px;
     font-size: 0.9;
     color: rgb(150 159 175);
-    align-items: center;
-    justify-content: center;
   }
 
   &-list {
@@ -213,6 +213,7 @@ function handleClose() {
     &__item {
       position: relative;
       display: flex;
+      align-items: center;
       width: 100%;
       height: 56px;
       padding-bottom: 4px;
@@ -224,7 +225,6 @@ function handleClose() {
       background-color: @component-background;
       border-radius: 4px;
       box-shadow: 0 1px 3px 0 #d4d9e1;
-      align-items: center;
 
       > div:first-child,
       > div:last-child {

src/components/Basic/src/BasicArrow.vue

@@ -49,8 +49,8 @@ const getClass = computed(() => {
 .@{prefix-cls} {
   display: inline-block;
   cursor: pointer;
-  transform: rotate(0deg);
   transition: all 0.3s ease 0.1s;
+  transform: rotate(0deg);
   transform-origin: center center;
 
   &--active {

src/components/Basic/src/BasicTitle.vue

@@ -64,8 +64,8 @@ const getClass = computed(() => [
     width: 3px;
     height: 16px;
     margin-right: 4px;
-    background-color: @primary-color;
     content: '';
+    background-color: @primary-color;
   }
 
   &-help {

src/components/Container/src/collapse/CollapseContainer.vue

@@ -97,9 +97,9 @@ export default defineComponent({
 
   &__header {
     display: flex;
-    height: 32px;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    height: 32px;
     border-bottom: 1px solid @border-color-light;
   }
 
@@ -109,10 +109,10 @@ export default defineComponent({
 
   &__action {
     display: flex;
-    text-align: right;
     flex: 1;
     align-items: center;
     justify-content: flex-end;
+    text-align: right;
   }
 }
 </style>

src/components/ContextMenu/src/ContextMenu.vue

@@ -172,12 +172,12 @@ export default defineComponent({
   width: 156px;
   margin: 0;
   list-style: none;
+  user-select: none;
   background-color: @component-background;
+  background-clip: padding-box;
   border: 1px solid rgb(0 0 0 / 8%);
   border-radius: 0.25rem;
   box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 6%);
-  background-clip: padding-box;
-  user-select: none;
 
   &__item {
     margin: 0 !important;

src/components/Cropper/src/CopperModal.vue

@@ -204,8 +204,8 @@ async function handleOk() {
 
   &-toolbar {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     margin-top: 10px;
   }
 
@@ -225,11 +225,11 @@ async function handleOk() {
 
   &-group {
     display: flex;
+    align-items: center;
+    justify-content: space-around;
     padding-top: 8px;
     margin-top: 8px;
     border-top: 1px solid @border-color-base;
-    justify-content: space-around;
-    align-items: center;
   }
 }
 </style>

src/components/Cropper/src/CropperAvatar.vue

@@ -90,14 +90,14 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
   }
 
   &-image-mask {
-    opacity: 0;
     position: absolute;
     width: inherit;
     height: inherit;
-    border-radius: inherit;
-    border: inherit;
-    background: rgb(0 0 0 / 40%);
     cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
     transition: opacity 0.4s;
 
     :deep(svg) {

src/components/Drawer/src/BasicDrawer.vue

@@ -191,11 +191,11 @@ function handleOk() {
   position: absolute;
 
   .ant-drawer-header {
+    box-sizing: border-box;
     width: 100%;
     height: @detail-header-height;
     padding: 0;
     border-top: 1px solid @border-color-base;
-    box-sizing: border-box;
   }
 
   .ant-drawer-title {

src/components/Drawer/src/components/DrawerHeader.vue

@@ -42,8 +42,8 @@ function handleClose() {
 @footer-height: 60px;
 .@{prefix-cls} {
   display: flex;
-  height: 100%;
   align-items: center;
+  height: 100%;
 
   &__back {
     padding: 0 12px;

src/components/Form/src/BasicForm.vue

@@ -299,10 +299,10 @@ const getFormActionBindProps = computed((): Recordable => ({ ...getProps.value,
 
       .suffix {
         display: inline-flex;
+        align-items: center;
         padding-left: 6px;
         margin-top: 1px;
         line-height: 1;
-        align-items: center;
       }
     }
   }

src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue

@@ -94,14 +94,14 @@ export default defineComponent({
   }
 
   .options-delete {
+    flex-shrink: 0;
     width: 30px;
     height: 30px;
-    flex-shrink: 0;
     line-height: 30px;
-    text-align: center;
-    border-radius: 50%;
-    background: #f5f5f5;
     color: #666;
+    text-align: center;
+    background: #f5f5f5;
+    border-radius: 50%;
 
     &:hover {
       background: #ff4d4f;

src/components/FormDesign/src/components/VFormDesign/components/RuleProps.vue

@@ -237,9 +237,9 @@ export default defineComponent({
 :deep(.icon) {
   width: 1em;
   height: 1em;
+  overflow: hidden;
   vertical-align: -0.15em;
   fill: currentcolor;
-  overflow: hidden;
 }
 
 .rule-props-content {
@@ -249,10 +249,10 @@ export default defineComponent({
 
   .rule-props-item {
     position: relative;
-    background-color: #f0eded;
     padding: 3px 2px;
-    border-radius: 5px;
     margin-bottom: 5px;
+    background-color: #f0eded;
+    border-radius: 5px;
 
     :deep(.ant-form-item) {
       border: 0 !important;
@@ -262,11 +262,11 @@ export default defineComponent({
       position: absolute;
       top: -5px;
       right: -5px;
+      z-index: 999;
       color: #ccc;
       cursor: pointer;
-      border-radius: 7px;
       background-color: #a3a0a0;
-      z-index: 999;
+      border-radius: 7px;
 
       &:hover {
         color: #00c;

src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue

@@ -68,28 +68,28 @@ export default defineComponent({
 @import url('../styles/variable.less');
 
 ul {
-  padding: 5px;
-  list-style: none;
   display: flex;
-  margin-bottom: 0;
   flex-wrap: wrap;
+  padding: 5px;
+  margin-bottom: 0;
+  list-style: none;
   // background: #efefef;
 
   li {
-    padding: 8px 12px;
-    transition: all 0.3s;
     width: calc(50% - 6px);
-    margin: 2.7px;
     height: 36px;
+    padding: 8px 12px;
+    margin: 2.7px;
     line-height: 20px;
     cursor: move;
     border: 1px solid @border-color;
     border-radius: 3px;
+    transition: all 0.3s;
 
     &:hover {
+      position: relative;
       color: @primary-color;
       border: 1px solid @primary-color;
-      position: relative;
       // z-index: 1;
       box-shadow: 0 2px 6px @primary-color;
     }

src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

@@ -94,8 +94,8 @@ export default defineComponent({
     .list-main {
       display: flex;
       flex-wrap: wrap;
-      justify-content: flex-start;
       align-content: flex-start;
+      justify-content: flex-start;
 
       .layout-width {
         width: 100%;
@@ -113,24 +113,24 @@ export default defineComponent({
   height: 100%;
 
   .empty-text {
-    color: #aaa;
-    height: 150px;
-    inset: -10% 0 0;
-    margin: auto;
     position: absolute;
+    inset: -10% 0 0;
     z-index: 100;
+    height: 150px;
+    margin: auto;
+    color: #aaa;
   }
 
   .draggable-box {
     // width: 100%;
     .drag-move {
-      cursor: move;
       min-height: 62px;
+      cursor: move;
     }
 
     .list-main {
-      overflow: auto;
       height: 100%;
+      overflow: auto;
       // 列表动画
       .list-enter-active {
         transition: all 0.5s;

src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue

@@ -60,12 +60,12 @@ export default defineComponent({
   box-sizing: border-box;
 
   form {
-    width: 100%;
     position: absolute;
+    width: 100%;
     height: calc(100% - 50px);
     margin-right: 10px;
-    overflow-y: auto;
     overflow-x: hidden;
+    overflow-y: auto;
   }
 
   .hint-box {
@@ -74,9 +74,9 @@ export default defineComponent({
 
   .ant-form-item,
   .ant-slider-with-marks {
-    margin-left: 10px;
     margin-right: 20px;
     margin-bottom: 0;
+    margin-left: 10px;
   }
 
   .ant-form-item {

src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue

@@ -99,24 +99,23 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-//noinspection CssUnknownTarget
 @import url('../styles/variable.less');
 
 .operating-area {
-  border-bottom: 2px solid @border-color;
-  font-size: 16px;
-  text-align: left;
-  height: @operating-area-height;
-  line-height: @operating-area-height;
-  padding: 0 12px;
   display: flex;
-  justify-content: space-between;
   align-content: center;
+  justify-content: space-between;
+  height: @operating-area-height;
+  padding: 0 12px;
   padding-left: 30px;
+  font-size: 16px;
+  line-height: @operating-area-height;
+  text-align: left;
+  border-bottom: 2px solid @border-color;
 
   a {
-    color: #666;
     margin: 0 5px;
+    color: #666;
 
     &.disabled,
     &.disabled:hover {
@@ -128,8 +127,8 @@ export default defineComponent({
     }
 
     > span {
-      font-size: 14px;
       padding-left: 2px;
+      font-size: 14px;
     }
   }
 }

src/components/FormDesign/src/components/VFormDesign/styles/drag.less

@@ -4,36 +4,36 @@
 
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :deep(.list-main) {
-    overflow: hidden;
-    padding: 5px;
     position: relative;
+    padding: 5px;
+    overflow: hidden;
 
     .moving {
+      position: relative;
+      box-sizing: border-box;
       // 拖放移动中;
       min-height: 35px;
-      box-sizing: border-box;
-      overflow: hidden;
       padding: 0 !important;
-      position: relative;
+      overflow: hidden;
 
       &::before {
-        content: '';
-        height: 5px;
-        width: 100%;
-        background-color: @primary-color;
         position: absolute;
         top: 0;
         right: 0;
+        width: 100%;
+        height: 5px;
+        content: '';
+        background-color: @primary-color;
       }
     }
 
     .drag-move-box {
       position: relative;
       box-sizing: border-box;
+      min-height: 60px;
       padding: 8px;
       overflow: hidden;
       transition: all 0.3s;
-      min-height: 60px;
 
       &:hover {
         background-color: @primary-hover-bg-color;
@@ -41,13 +41,13 @@
 
       // 选择时 start
       &::before {
-        content: '';
-        height: 5px;
-        width: 100%;
-        background-color: @primary-color;
         position: absolute;
         top: 0;
         right: -100%;
+        width: 100%;
+        height: 5px;
+        content: '';
+        background-color: @primary-color;
         transition: all 0.3s;
       }
 
@@ -67,26 +67,26 @@
         word-wrap: break-word;
 
         &::before {
-          content: '';
           position: absolute;
-          width: 100%;
-          height: 100%;
           top: 0;
           left: 0;
+          width: 100%;
+          height: 100%;
+          content: '';
         }
 
         .ant-form-item {
+          padding-bottom: 6px;
           // 修改ant form-item的margin为padding
           margin: 0;
-          padding-bottom: 6px;
         }
       }
 
       .show-key-box {
         // 显示key
         position: absolute;
-        bottom: 2px;
         right: 5px;
+        bottom: 2px;
         font-size: 14px;
         // z-index: 999;
         color: @primary-color;
@@ -99,14 +99,14 @@
         width: 30px;
         height: 30px;
         line-height: 30px;
-        text-align: center;
         color: #fff;
+        text-align: center;
         // z-index: 989;
         transition: all 0.3s;
 
         &.unactivated {
-          opacity: 0 !important;
           pointer-events: none;
+          opacity: 0 !important;
         }
 
         &.active {
@@ -115,9 +115,9 @@
       }
 
       .copy {
-        border-radius: 0 0 0 8px;
         right: 30px;
         background-color: @primary-color;
+        border-radius: 0 0 0 8px;
       }
 
       .delete {
@@ -129,20 +129,20 @@
     .grid-box {
       position: relative;
       box-sizing: border-box;
-      padding: 5px;
-      background-color: @layout-background-color;
       width: 100%;
-      transition: all 0.3s;
+      padding: 5px;
       overflow: hidden;
+      background-color: @layout-background-color;
+      transition: all 0.3s;
 
       .form-item-box {
         position: relative;
         box-sizing: border-box;
 
         .ant-form-item {
+          padding-bottom: 15px;
           // 修改ant form-item的margin为padding
           margin: 0;
-          padding-bottom: 15px;
         }
       }
 
@@ -151,14 +151,14 @@
 
         .grid-col {
           .draggable-box {
-            min-height: 80px;
             min-width: 50px;
+            min-height: 80px;
             border: 1px #ccc dashed;
             // background: #fff;
 
             .list-main {
-              min-height: 83px;
               position: relative;
+              min-height: 83px;
               border: 1px #ccc dashed;
             }
           }
@@ -167,13 +167,13 @@
 
       // 选择时 start
       &::before {
-        content: '';
-        height: 5px;
-        width: 100%;
-        background: transparent;
         position: absolute;
         top: 0;
         right: -100%;
+        width: 100%;
+        height: 5px;
+        content: '';
+        background: transparent;
         transition: all 0.3s;
       }
 
@@ -182,8 +182,8 @@
         outline-offset: 0;
 
         &::before {
-          background-color: @layout-color;
           right: 0;
+          background-color: @layout-color;
         }
       }
       // 选择时 end
@@ -195,14 +195,14 @@
           width: 30px;
           height: 30px;
           line-height: 30px;
-          text-align: center;
           color: #fff;
+          text-align: center;
           // z-index: 989;
           transition: all 0.3s;
 
           &.unactivated {
-            opacity: 0 !important;
             pointer-events: none;
+            opacity: 0 !important;
           }
 
           &.active {
@@ -211,9 +211,9 @@
         }
 
         > .copy {
-          border-radius: 0 0 0 8px;
           right: 30px;
           background-color: @layout-color;
+          border-radius: 0 0 0 8px;
         }
 
         > .delete {

src/components/Loading/src/Loading.vue

@@ -35,10 +35,10 @@ defineProps({
   left: 0;
   z-index: 200;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  justify-content: center;
-  align-items: center;
   background-color: rgb(240 242 245 / 40%);
 
   &.absolute {

src/components/Modal/src/components/ModalClose.vue

@@ -55,8 +55,8 @@ function handleFullScreen(e: Event) {
 @prefix-cls: ~'@{namespace}-basic-modal-close';
 .@{prefix-cls} {
   display: flex;
-  height: 95%;
   align-items: center;
+  height: 95%;
 
   > span {
     margin-left: 48px;

src/components/Page/src/PageFooter.vue

@@ -26,8 +26,8 @@ const { getCalcContentWidth } = useMenuSetting()
   bottom: 0;
   z-index: @page-footer-z-index;
   display: flex;
-  width: 100%;
   align-items: center;
+  width: 100%;
   padding: 0 24px;
   line-height: 44px;
   background-color: @component-background;

src/components/Preview/src/Functional.vue

@@ -419,16 +419,16 @@ export default defineComponent({
   position: fixed;
   inset: 0;
   z-index: @preview-comp-z-index;
-  background: rgb(0 0 0 / 50%);
   user-select: none;
+  background: rgb(0 0 0 / 50%);
 
   &-content {
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     color: @white;
-    justify-content: center;
-    align-items: center;
   }
 
   &-image {
@@ -477,13 +477,13 @@ export default defineComponent({
     bottom: 10%;
     left: 50%;
     display: flex;
+    justify-content: center;
     width: 260px;
     height: 44px;
     padding: 0 22px;
     margin-left: -139px;
     background: rgb(109 109 109 / 60%);
     border-radius: 22px;
-    justify-content: center;
 
     &-item {
       display: flex;

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -69,11 +69,11 @@ watch(
       display: block;
       width: 20%;
       height: inherit;
+      content: '';
       background-color: transparent;
       border-color: @white;
       border-style: solid;
       border-width: 0 5px;
-      content: '';
     }
 
     &::before {

src/components/Table/src/BasicTable.vue

@@ -361,10 +361,10 @@ emit('register', tableAction, formActions)
 
     &-title {
       display: flex;
+      align-items: center;
+      justify-content: space-between;
       padding: 8px 6px;
       border-bottom: none;
-      justify-content: space-between;
-      align-items: center;
     }
 
     //.ant-table-tbody > tr.ant-table-row-selected td {

src/components/Table/src/components/TableAction.vue

@@ -169,8 +169,8 @@ function onCellClick(e: MouseEvent) {
   }
 
   .ant-btn-link {
-    margin-left: 0;
     padding: 8px 4px;
+    margin-left: 0;
   }
 
   .ant-divider,

src/components/Table/src/components/TableHeader.vue

@@ -48,8 +48,8 @@ function handleColumnChange(data: ColumnChangeParam[]) {
 
 .@{prefix-cls} {
   &__toolbar {
-    flex: 1;
     display: flex;
+    flex: 1;
     align-items: center;
     justify-content: flex-end;
 

src/components/Table/src/components/TableTitle.vue

@@ -40,7 +40,7 @@ const getTitle = computed(() => {
 
 .@{prefix-cls} {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 </style>

src/components/Table/src/components/editable/EditableCell.vue

@@ -498,11 +498,11 @@ export default defineComponent({
 
   .ellipsis-cell {
     .cell-content {
-      overflow-wrap: break-word;
-      word-break: break-word;
       overflow: hidden;
-      white-space: nowrap;
       text-overflow: ellipsis;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      white-space: nowrap;
     }
   }
 

src/components/Upload/src/UploadModal.vue

@@ -268,9 +268,9 @@ async function handleCloseFunc() {
     margin-bottom: 8px;
 
     &__btn {
+      flex: 1;
       margin-left: 8px;
       text-align: right;
-      flex: 1;
     }
   }
 }

src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -17,7 +17,7 @@
           :src="'data:image/png;base64,' + pointBackImgBase"
           ref="canvas"
           alt=""
-          style="width: 100%; height: 100%; display: block"
+          style="display: block; width: 100%; height: 100%"
           @click="bindingClick ? canvasClick($event) : undefined"
         />
 

src/components/Verifition/src/Verify/VerifySlide.vue

@@ -2,7 +2,7 @@
   <div style="position: relative">
     <div v-if="type === '2'" class="verify-img-out" :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }">
       <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
-        <img :src="'data:image/png;base64,' + backImgBase" alt="" style="width: 100%; height: 100%; display: block" />
+        <img :src="'data:image/png;base64,' + backImgBase" alt="" style=" display: block;width: 100%; height: 100%" />
         <div class="verify-refresh" @click="refresh" v-show="showRefresh">
           <i class="iconfont icon-refresh"></i>
         </div>
@@ -49,7 +49,7 @@
               'background-size': setSize.imgWidth + ' ' + setSize.imgHeight
             }"
           >
-            <img :src="blockBackImgBase" alt="" style="width: 100%; height: 100%; display: block; -webkit-user-drag: none" />
+            <img :src="blockBackImgBase" alt="" style=" display: block;width: 100%; height: 100%; -webkit-user-drag: none" />
           </div>
         </div>
       </div>

src/components/VirtualScroll/src/VirtualScroll.vue

@@ -162,10 +162,10 @@ export default defineComponent({
 .virtual-scroll {
   position: relative;
   display: block;
+  flex: 1 1 auto;
   width: 100%;
   max-width: 100%;
   overflow: auto;
-  flex: 1 1 auto;
 
   &__container {
     display: block;

src/design/ant/btn.less

@@ -186,8 +186,8 @@
   }
 
   &-background-ghost {
-    border-width: 1px;
     background-color: transparent !important;
+    border-width: 1px;
 
     &[disabled],
     &[disabled]:hover {

src/design/ant/input.less

@@ -4,8 +4,8 @@
 .ant-input {
   &-number,
   &-number-group-wrapper {
-    min-width: 110px;
     width: 100% !important;
+    min-width: 110px;
     max-width: 100%;
   }
 }

src/layouts/default/feature/index.vue

@@ -52,13 +52,13 @@ const getIsFixedSettingDrawer = computed(() => {
   right: 0;
   z-index: 10;
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10px;
   color: @white;
   cursor: pointer;
   background-color: @primary-color;
   border-radius: 6px 0 0 6px;
-  justify-content: center;
-  align-items: center;
 
   svg {
     width: 1em;

src/layouts/default/header/MultipleHeader.vue

@@ -78,8 +78,8 @@ const getClass = computed(() => {
 @prefix-cls: ~'@{namespace}-layout-multiple-header';
 
 .@{prefix-cls} {
-  transition: width 0.2s;
   flex: 0 0 auto;
+  transition: width 0.2s;
 
   &--dark {
     margin-left: -1px;

src/layouts/default/header/components/Breadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="[prefixCls, `${prefixCls}--${theme}`]">
-    <Breadcrumb :routes="routes">
+    <Breadcrumb :routes="routes as any">
       <template #itemRender="{ route, routes: routesMatched, paths }">
         <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
         <span v-if="!hasRedirect(routesMatched, route)">
@@ -142,8 +142,8 @@ function getIcon(route) {
 
 .@{prefix-cls} {
   display: flex;
-  padding: 0 8px;
   align-items: center;
+  padding: 0 8px;
 
   .ant-breadcrumb-link {
     .anticon {

src/layouts/default/header/components/user-dropdown/index.vue

@@ -98,13 +98,13 @@ function handleMenuClick(e: MenuInfo) {
 @prefix-cls: ~'@{namespace}-header-user-dropdown';
 
 .@{prefix-cls} {
+  align-items: center;
   height: @header-height;
   padding: 0 0 0 10px;
   padding-right: 10px;
   overflow: hidden;
   font-size: 12px;
   cursor: pointer;
-  align-items: center;
 
   img {
     width: 24px;

src/layouts/default/header/index.less

@@ -5,14 +5,14 @@
 
 .@{header-prefix-cls} {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: @header-height;
   padding: 0;
   margin-left: -1px;
   line-height: @header-height;
   color: @white;
   background-color: @white;
-  align-items: center;
-  justify-content: space-between;
 
   &--mobile {
     .@{breadcrumb-prefix-cls},
@@ -47,8 +47,8 @@
   }
 
   &-logo {
-    height: @header-height;
     min-width: 192px;
+    height: @header-height;
     padding: 0 10px;
     font-size: 14px;
 
@@ -61,15 +61,15 @@
 
   &-left {
     display: flex;
-    height: 100%;
     align-items: center;
+    height: 100%;
 
     .@{header-trigger-prefix-cls} {
       display: flex;
+      align-items: center;
       height: 100%;
       padding: 1px 10px 0;
       cursor: pointer;
-      align-items: center;
 
       .anticon {
         font-size: 16px;
@@ -94,25 +94,25 @@
   }
 
   &-menu {
-    height: 100%;
-    min-width: 0;
     flex: 1;
     align-items: center;
+    min-width: 0;
+    height: 100%;
   }
 
   &-action {
     display: flex;
-    min-width: 180px;
     // padding-right: 12px;
     align-items: center;
+    min-width: 180px;
 
     &__item {
       display: flex !important;
+      align-items: center;
       height: @header-height;
       padding: 0 2px;
       font-size: 1.2em;
       cursor: pointer;
-      align-items: center;
 
       .ant-badge {
         height: @header-height;

src/layouts/default/index.vue

@@ -54,10 +54,10 @@ const layoutClass = computed(() => {
 
 .@{prefix-cls} {
   display: flex;
+  flex-direction: column;
   width: 100%;
   min-height: 100%;
   background-color: @content-bg;
-  flex-direction: column;
 
   > .ant-layout {
     min-height: 100%;

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -48,8 +48,8 @@ function handleClick(color: string) {
 .@{prefix-cls} {
   display: flex;
   flex-wrap: wrap;
-  margin: 16px 0;
   justify-content: space-around;
+  margin: 16px 0;
 
   &__item {
     width: 20px;

src/layouts/default/sider/MixSider.vue

@@ -345,9 +345,9 @@ export default defineComponent({
 
   &-logo {
     display: flex;
+    justify-content: center;
     height: @header-height;
     padding-left: 0 !important;
-    justify-content: center;
 
     img {
       width: @logo-width;
@@ -457,8 +457,8 @@ export default defineComponent({
           left: 0;
           width: 3px;
           height: 100%;
-          background-color: @primary-color;
           content: '';
+          background-color: @primary-color;
         }
       }
     }
@@ -481,13 +481,13 @@ export default defineComponent({
     bottom: 0;
     left: 0;
     width: 100%;
+    height: 36px;
     font-size: 14px;
+    line-height: 36px;
     color: rgb(255 255 255 / 65%);
     text-align: center;
     cursor: pointer;
     background-color: @trigger-dark-bg-color;
-    height: 36px;
-    line-height: 36px;
   }
 
   &.light &-trigger {
@@ -506,6 +506,8 @@ export default defineComponent({
 
     &__title {
       display: flex;
+      align-items: center;
+      justify-content: space-between;
       height: @header-height;
       // margin-left: -6px;
       font-size: 18px;
@@ -513,8 +515,6 @@ export default defineComponent({
       border-bottom: 1px solid rgb(238 238 238);
       opacity: 0;
       transition: unset;
-      align-items: center;
-      justify-content: space-between;
 
       &.show {
         min-width: 130px;

src/layouts/default/tabs/index.less

@@ -29,8 +29,8 @@ html[data-theme='light'] {
 
   .ant-tabs.ant-tabs-card {
     .ant-tabs-nav {
-      padding-top: 2px;
       height: @multiple-height;
+      padding-top: 2px;
       margin: 0;
       background-color: @component-background;
       border: 0;
@@ -58,12 +58,12 @@ html[data-theme='light'] {
         .ant-tabs-tab-remove {
           width: 8px;
           height: 28px;
+          margin-right: -4px;
+          margin-left: 2px;
           font-size: 12px;
           color: inherit;
           opacity: 0;
           transition: none;
-          margin-left: 2px;
-          margin-right: -4px;
 
           &:hover {
             svg {

src/views/base/exception/Exception.vue

@@ -129,8 +129,8 @@ export default defineComponent({
 
 .@{prefix-cls} {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
 
   .ant-result-icon {
     img {

src/views/base/iframe/index.vue

@@ -74,12 +74,12 @@ function hideLoading() {
   }
 
   &__main {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background-color: @component-background;
     border: 0;
-    box-sizing: border-box;
   }
 }
 </style>

src/views/base/lock/LockPage.vue

@@ -127,12 +127,12 @@ function handleShowForm(show = false) {
   &__hour,
   &__minute {
     display: flex;
+    align-items: center;
+    justify-content: center;
     font-weight: 700;
     color: #bababa;
     background-color: #141313;
     border-radius: 30px;
-    justify-content: center;
-    align-items: center;
 
     @media screen and (max-width: @screen-md) {
       span:not(.meridiem) {
@@ -176,12 +176,12 @@ function handleShowForm(show = false) {
     top: 0;
     left: 0;
     display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     background-color: rgb(0 0 0 / 50%);
     backdrop-filter: blur(8px);
-    justify-content: center;
-    align-items: center;
 
     &-content {
       width: 260px;

src/views/base/login/Login.vue

@@ -125,11 +125,11 @@ html[data-theme='dark'] {
     width: 100%;
     height: 100%;
     margin-left: -48%;
-    background-image: url('@/assets/svg/login-bg.svg');
-    background-position: 100%;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
     content: '';
+    background-image: url('@/assets/svg/login-bg.svg');
+    background-repeat: no-repeat;
+    background-position: 100%;
+    background-size: auto 100%;
 
     @media (max-width: @screen-xl) {
       display: none;

stylelint.config.js

@@ -1,15 +1,29 @@
 module.exports = {
   root: true,
-  plugins: ['stylelint-order'],
+  plugins: ['stylelint-order', 'stylelint-prettier'],
-  extends: ['stylelint-config-standard'],
+  extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
-  customSyntax: 'postcss-html',
+  overrides: [
+    {
+      files: ['**/*.(css|html|vue)'],
+      customSyntax: 'postcss-html'
+    },
+    {
+      files: ['*.less', '**/*.less'],
+      customSyntax: 'postcss-less',
+      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue']
+    }
+  ],
   rules: {
+    'prettier/prettier': true,
+    'at-rule-no-unknown': null,
+    'selector-not-notation': null,
+    'import-notation': null,
     'function-no-unknown': null,
     'selector-class-pattern': null,
     'selector-pseudo-class-no-unknown': [
       true,
       {
-        ignorePseudoClasses: ['global']
+        ignorePseudoClasses: ['global', 'deep']
       }
     ],
     'selector-pseudo-element-no-unknown': [
@@ -24,19 +38,19 @@ module.exports = {
         ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
       }
     ],
+    'media-feature-range-notation': null,
     'no-empty-source': null,
+    'string-quotes': null,
     'import-notation': null,
     'named-grid-areas-no-invalid': null,
     'no-descending-specificity': null,
     'font-family-no-missing-generic-family-keyword': null,
-    // 'declaration-block-trailing-semicolon': 'always',
     'rule-empty-line-before': [
       'always',
       {
         ignore: ['after-comment', 'first-nested']
       }
     ],
-    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
     'order/order': [
       [
         'dollar-variables',
@@ -51,36 +65,14 @@ module.exports = {
           type: 'at-rule',
           name: 'media'
         },
+        {
+          type: 'at-rule',
+          name: 'include'
+        },
         'rules'
       ],
-      { severity: 'warning' }
+      { severity: 'error' }
     ]
   },
-  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
-  overrides: [
-    {
-      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
-      extends: ['stylelint-config-recommended'],
-      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']
-          }
-        ]
-      }
-    },
-    {
-      files: ['*.less', '**/*.less'],
-      customSyntax: 'postcss-less',
-      extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue']
-    }
-  ]
 }