修复合并代码导致的冲突 (#2905)

* fix: 合并代码导致的问题，升级vite 4.4.0

* fix: stylelint

apps/test-server/package.json

@@ -24,7 +24,7 @@
     "@types/koa": "^2.13.6",
     "@types/koa-bodyparser": "^5.0.2",
     "@types/koa-router": "^7.4.4",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.0",
     "nodemon": "^2.0.22",
     "pm2": "^5.3.0",
     "rimraf": "^5.0.1",

internal/eslint-config/package.json

@@ -36,8 +36,8 @@
     "stub": "pnpm unbuild --stub"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",

internal/stylelint-config/package.json

@@ -36,12 +36,12 @@
     "postcss-less": "^6.0.0",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
-    "stylelint": "^15.9.0",
+    "stylelint": "^15.10.1",
     "stylelint-config-property-sort-order-smacss": "^9.1.0",
-    "stylelint-config-recommended": "^12.0.0",
+    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-prettier": "^3.0.0"

internal/ts-config/package.json

@@ -19,7 +19,7 @@
     "node-server.json"
   ],
   "dependencies": {
-    "@types/node": "^20.3.3",
-    "vite": "^4.3.9"
+    "@types/node": "^20.4.0",
+    "vite": "^4.4.0"
   }
 }

internal/vite-config/package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "vite": "^4.3.9"
+    "vite": "^4.4.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.1",
@@ -49,7 +49,7 @@
     "sass": "^1.63.6",
     "unocss": "^0.53.4",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "^3.0.2",
+    "vite-plugin-dts": "^3.1.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.9.2",

internal/vite-config/src/plugins/index.ts

@@ -2,7 +2,6 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { type PluginOption } from 'vite';
 import purgeIcons from 'vite-plugin-purge-icons';
-import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 
 import { createAppConfigPlugin } from './appConfig';
 import { configCompressPlugin } from './compress';

package.json

@@ -29,7 +29,7 @@
     "lint": "turbo run lint",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write .",
-    "lint:stylelint": "stylelint \"**/*.{vue,css,less.scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:stylelint": "stylelint \"**/*.{vue,css,less,scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
     "prepare": "husky install",
     "preview": "npm run build && vite preview",
     "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
@@ -101,12 +101,10 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.3",
     "vue-types": "^5.1.0",
     "vuedraggable": "^4.1.0",
-
     "vxe-table": "^4.4.5",
-
     "vxe-table-plugin-export-xlsx": "^3.0.4",
     "xe-utils": "^3.5.11",
     "xlsx": "^0.18.5"
@@ -114,7 +112,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
-    "@iconify/json": "^2.2.85",
+    "@iconify/json": "^2.2.87",
     "@purge-icons/generated": "^0.9.0",
     "@types/codemirror": "^5.60.8",
     "@types/crypto-js": "^4.1.1",
@@ -139,14 +137,14 @@
     "husky": "^8.0.3",
     "lint-staged": "13.2.3",
     "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier-plugin-packagejson": "^2.4.4",
     "rimraf": "^5.0.1",
     "turbo": "^1.10.7",
     "typescript": "^5.1.6",
     "unbuild": "^1.2.1",
-    "vite": "^4.3.9",
+    "vite": "^4.4.0",
     "vite-plugin-mock": "^2.9.6",
-    "vue-tsc": "^1.8.3"
+    "vue-tsc": "^1.8.4"
   },
   "packageManager": "pnpm@8.1.0",
   "engines": {

src/components/Menu/src/index.less

@@ -29,8 +29,8 @@
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
-          color: #fff;
           background-color: @top-menu-active-bg-color !important;
+          color: #fff;
         }
 
         .ant-menu-item:hover,
@@ -68,7 +68,7 @@
   }
 
   .ant-menu-inline.ant-menu-sub {
-    box-shadow: unset !important;
     transition: unset;
+    box-shadow: unset !important;
   }
 }

src/components/Modal/src/index.less

@@ -1,11 +1,9 @@
+/* stylelint-disable media-feature-range-notation */
 .fullscreen-modal {
   overflow: hidden;
 
   .ant-modal {
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
+    inset: 0 !important;
     width: 100% !important;
     height: 100%;
 
@@ -63,8 +61,8 @@
   }
 
   &-close {
-    font-weight: normal;
     outline: none;
+    font-weight: normal;
   }
 
   &-close-x {
@@ -110,16 +108,19 @@
 .ant-modal-confirm .ant-modal-body {
   padding: 24px !important;
 }
+
 @media screen and (max-height: 600px) {
   .ant-modal {
     top: 60px;
   }
 }
+
 @media screen and (max-height: 540px) {
   .ant-modal {
     top: 30px;
   }
 }
+
 @media screen and (max-height: 480px) {
   .ant-modal {
     top: 10px;

src/components/SimpleMenu/src/components/menu.less

@@ -7,13 +7,13 @@
 
 .light-border {
   &::after {
+    content: '';
+    display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    display: block;
     width: 2px;
-    content: '';
     background-color: @primary-color;
   }
 }
@@ -37,16 +37,16 @@
       position: relative;
       z-index: 1;
       padding: 12px 20px;
+      transition: all @transition-time @ease-in-out;
       color: @menu-dark-subsidiary-color;
       cursor: pointer;
-      transition: all @transition-time @ease-in-out;
 
       &-icon {
         position: absolute;
         top: 50%;
         right: 18px;
-        transition: transform @transition-time @ease-in-out;
         transform: translateY(-50%) rotate(-90deg);
+        transition: transform @transition-time @ease-in-out;
       }
     }
 
@@ -61,8 +61,8 @@
         }
 
         &-selected {
-          color: #fff;
           background-color: @primary-color !important;
+          color: #fff;
         }
       }
     }
@@ -78,8 +78,8 @@
 
         &-selected {
           z-index: 2;
-          color: @primary-color;
           background-color: fade(@primary-color, 10);
+          color: @primary-color;
 
           .light-border();
         }
@@ -91,15 +91,15 @@
 .content();
 .content() {
   .@{menu-prefix-cls} {
-    position: relative;
     display: block;
+    position: relative;
     width: 100%;
-    padding: 0;
     margin: 0;
-    font-size: @font-size-base;
+    padding: 0;
+    outline: none;
     color: @text-color-base;
+    font-size: @font-size-base;
     list-style: none;
-    outline: none;
 
     // .collapse-transition {
     //   transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
@@ -125,15 +125,15 @@
     }
 
     &-item {
+      display: flex;
       position: relative;
       z-index: 1;
-      display: flex;
       align-items: center;
-      font-size: @font-size-base;
+      outline: none;
       color: inherit;
+      font-size: @font-size-base;
       list-style: none;
       cursor: pointer;
-      outline: none;
 
       &:hover,
       &:active {
@@ -218,8 +218,8 @@
     &-light&-vertical &-item {
       &-active:not(.@{menu-prefix-cls}-submenu) {
         z-index: 2;
-        color: @primary-color;
         background-color: fade(@primary-color, 10);
+        color: @primary-color;
 
         .light-border();
       }
@@ -239,12 +239,12 @@
         }
 
         &::before {
+          content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
-          content: '';
           background-color: @primary-color;
         }
       }
@@ -254,8 +254,8 @@
     &-dark&-vertical &-submenu-title {
       color: @menu-dark-subsidiary-color;
       &-active:not(.@{menu-prefix-cls}-submenu) {
-        color: #fff !important;
         background-color: @primary-color !important;
+        color: #fff !important;
       }
 
       &:hover {
@@ -267,16 +267,16 @@
       > li.@{menu-prefix-cls}-item-active,
       .@{menu-prefix-cls}-submenu-active {
         position: relative;
-        color: #fff !important;
         background-color: @sider-dark-darken-bg-color !important;
+        color: #fff !important;
 
         &::before {
+          content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
-          content: '';
           background-color: @primary-color;
         }
 
@@ -289,8 +289,8 @@
     &-dark&-vertical &-submenu &-item {
       &-active,
       &-active:hover {
-        color: #fff;
         border-right: none;
+        color: #fff;
       }
     }
 

src/components/SimpleMenu/src/index.less

@@ -28,22 +28,22 @@
 .@{simple-prefix-cls} {
   &-sub-title {
     overflow: hidden;
+    transition: all 0.3s;
     text-overflow: ellipsis;
     white-space: nowrap;
-    transition: all 0.3s;
   }
 
   &-tag {
+    display: inline-block;
     position: absolute;
     top: calc(50% - 8px);
     right: 30px;
-    display: inline-block;
-    padding: 2px 3px;
     margin-right: 4px;
+    padding: 2px 3px;
+    border-radius: 2px;
+    color: #fff;
     font-size: 10px;
     line-height: 14px;
-    color: #fff;
-    border-radius: 2px;
 
     &--collapse {
       top: 6px !important;

src/components/Tree/style/index.less

@@ -17,8 +17,8 @@
   }
 
   &__title {
-    position: relative;
     display: flex;
+    position: relative;
     align-items: center;
     width: 100%;
     padding-right: 10px;
@@ -35,15 +35,15 @@
   }
 
   &__actions {
+    display: flex;
     position: absolute;
     //top: 2px;
     right: 3px;
-    display: flex;
   }
 
   &__action {
-    margin-left: 4px;
     visibility: hidden;
+    margin-left: 4px;
   }
 
   &-header {

src/components/VxeTable/src/css/component.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable scss/percent-placeholder-pattern */
 %ResetBorder {
   border: 0;
   box-shadow: none;
@@ -13,11 +14,13 @@
     width: 100%;
   }
 }
+
 .vxe-form {
   .vxe-form--item-content {
     @extend %CompWidth;
   }
 }
+
 .vxe-table--filter-antd-wrapper {
   & > .ant-input,
   & > .ant-input-number,
@@ -26,16 +29,20 @@
     width: 180px;
   }
 }
+
 .vxe-cell,
 .vxe-tree-cell {
   @extend %CompWidth;
+
   & > .ant-rate {
     vertical-align: bottom;
+
     .anticon-star {
       display: block;
     }
   }
 }
+
 .col--valid-error {
   & > .vxe-cell,
   & > .vxe-tree-cell {
@@ -50,55 +57,67 @@
     }
   }
 }
+
 .vxe-table.cell--highlight {
   .vxe-cell,
   .vxe-tree-cell {
     & > .ant-input,
     & > .ant-input-number {
-      padding: 0;
       @extend %ResetBorder;
+
+      padding: 0;
     }
+
     & > .ant-select {
       .ant-input {
+        @extend %ResetBorder;
+
         padding: 0;
+      }
+
+      .ant-select-selection {
         @extend %ResetBorder;
+
+        .ant-select-selection__rendered {
+          margin: 0;
+        }
       }
     }
+
     & > .ant-input-number {
       .ant-input-number-input {
         padding: 0;
       }
+
       .ant-input-number-handler-wrap,
       .ant-input-number-handler-down {
         @extend %ResetBorder;
       }
     }
-    & > .ant-select {
-      .ant-select-selection {
-        @extend %ResetBorder;
-        .ant-select-selection__rendered {
-          margin: 0;
-        }
-      }
-    }
+
     & > .ant-cascader-picker {
       .ant-input {
         @extend %ResetBorder;
       }
+
       .ant-cascader-picker-label {
         padding: 0;
       }
     }
+
     & > .ant-calendar-picker {
       .ant-calendar-picker-input {
-        padding: 0;
         @extend %ResetBorder;
+
+        padding: 0;
       }
     }
+
     & > .ant-time-picker {
       .ant-time-picker-input {
-        padding: 0;
         @extend %ResetBorder;
+
+        padding: 0;
       }
     }
   }

src/components/VxeTable/src/css/index.scss

@@ -1,6 +1,6 @@
-@import './common.scss';
-@import './variable.scss';
-@import './scrollbar.scss';
-@import './toolbar.scss';
-@import './component.scss';
-@import 'vxe-table/styles/index.scss';
+@import './common';
+@import './variable';
+@import './scrollbar';
+@import './toolbar';
+@import './component';
+@import 'vxe-table/styles/index';

src/components/VxeTable/src/css/scrollbar.scss

@@ -3,22 +3,27 @@
     width: 8px;
     height: 8px;
   }
+
   ::-webkit-scrollbar-track {
-    background-color: #ffffff;
+    background-color: #fff;
   }
+
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
     border: 1px solid #f1f1f1;
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-color: rgb(0 0 0 / 10%);
+    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
   }
+
   ::-webkit-scrollbar-thumb:hover {
     background-color: #a8a8a8;
   }
+
   ::-webkit-scrollbar-thumb:active {
     background-color: #a8a8a8;
   }
+
   ::-webkit-scrollbar-corner {
-    background-color: #ffffff;
+    background-color: #fff;
   }
 }

src/components/VxeTable/src/css/toolbar.scss

@@ -5,6 +5,7 @@
 .vxe-toolbar .vxe-tools--wrapper,
 .vxe-toolbar .vxe-tools--operate button:first-child {
   margin: 0;
+  margin-left: 10px;
 }
 
 .vxe-toolbar .vxe-tools--wrapper,
@@ -13,11 +14,6 @@
   border-radius: 0 !important;
 }
 
-.vxe-toolbar .vxe-tools--wrapper,
-.vxe-toolbar .vxe-tools--operate button:first-child {
-  margin-left: 10px;
-}
-
 .vxe-toolbar .vxe-tools--wrapper,
 .vxe-toolbar .vxe-tools--operate .vxe-custom--wrapper {
   margin-left: 1px;

src/components/VxeTable/src/css/variable.scss

@@ -1,6 +1,6 @@
-$vxe-primary-color: rgb(9, 96, 189) !default;
-$vxe-table-row-current-background-color: rgba(9, 96, 189, 0.3);
-$vxe-table-row-hover-current-background-color: rgba(9, 96, 189, 0.2);
-$vxe-table-column-hover-background-color: rgba(9, 96, 189, 0.3);
-$vxe-table-column-current-background-color: rgba(9, 96, 189, 0.2);
+$vxe-primary-color: rgb(9 96 189) !default;
+$vxe-table-row-current-background-color: rgb(9 96 189 / 30%);
+$vxe-table-row-hover-current-background-color: rgb(9 96 189 / 20%);
+$vxe-table-column-hover-background-color: rgb(9 96 189 / 30%);
+$vxe-table-column-current-background-color: rgb(9 96 189 / 20%);
 $vxe-table-validate-error-color: #f56c6c;

src/design/ant/table.less

@@ -44,10 +44,6 @@
         .ant-table {
           .ant-table-content {
             .ant-table-scroll {
-              .ant-table-hide-scrollbar {
-                //overflow-x: auto !important;
-              }
-
               .ant-table-body {
                 overflow: auto !important;
               }

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;
+  padding: 0;
   background-color: @white;
-  align-items: center;
-  justify-content: space-between;
+  color: @white;
+  line-height: @header-height;
 
   &--mobile {
     .@{breadcrumb-prefix-cls},
@@ -40,15 +40,15 @@
 
   &--fixed {
     position: fixed;
+    z-index: @layout-header-fixed-z-index;
     top: 0;
     left: 0;
-    z-index: @layout-header-fixed-z-index;
     width: 100%;
   }
 
   &-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;
@@ -131,9 +131,9 @@
   }
 
   &--light {
-    background-color: @white !important;
     border-bottom: 1px solid @header-light-bottom-border-color;
     border-left: 1px solid @header-light-bottom-border-color;
+    background-color: @white !important;
 
     .@{header-prefix-cls}-logo {
       color: @text-color-base;
@@ -165,9 +165,9 @@
   }
 
   &--dark {
-    background-color: @header-dark-bg-color !important;
     // border-bottom: 1px solid @border-color-base;
     border-left: 1px solid @border-color-base;
+    background-color: @header-dark-bg-color !important;
     .@{header-prefix-cls}-logo {
       &:hover {
         background-color: @header-dark-bg-hover-color;

src/layouts/default/tabs/index.less

@@ -19,9 +19,9 @@ html[data-theme='light'] {
 .@{prefix-cls} {
   z-index: 10;
   height: @multiple-height + 2;
-  line-height: @multiple-height + 2;
-  background-color: @component-background;
   border-bottom: 1px solid @border-color-base;
+  background-color: @component-background;
+  line-height: @multiple-height + 2;
 
   .ant-tabs-small {
     height: @multiple-height;
@@ -29,11 +29,11 @@ html[data-theme='light'] {
 
   .ant-tabs.ant-tabs-card {
     .ant-tabs-nav {
-      padding-top: 2px;
       height: @multiple-height;
       margin: 0;
-      background-color: @component-background;
+      padding-top: 2px;
       border: 0;
+      background-color: @component-background;
       box-shadow: none;
 
       .ant-tabs-nav-container {
@@ -44,10 +44,10 @@ html[data-theme='light'] {
       .ant-tabs-tab {
         height: calc(@multiple-height - 2px);
         padding-right: 12px;
-        line-height: calc(@multiple-height - 2px);
-        color: @text-color-base;
-        background-color: @component-background;
         transition: none;
+        background-color: @component-background;
+        color: @text-color-base;
+        line-height: calc(@multiple-height - 2px);
 
         &:hover {
           .ant-tabs-tab-remove {
@@ -58,12 +58,12 @@ html[data-theme='light'] {
         .ant-tabs-tab-remove {
           width: 8px;
           height: 28px;
-          font-size: 12px;
-          color: inherit;
-          opacity: 0;
-          transition: none;
-          margin-left: 2px;
           margin-right: -4px;
+          margin-left: 2px;
+          transition: none;
+          opacity: 0;
+          color: inherit;
+          font-size: 12px;
 
           &:hover {
             svg {
@@ -92,9 +92,9 @@ html[data-theme='light'] {
       .ant-tabs-tab-active {
         position: relative;
         padding-left: 18px;
-        background: @primary-color;
-        border: 0;
         transition: none;
+        border: 0;
+        background: @primary-color;
 
         span {
           color: @white !important;
@@ -147,11 +147,11 @@ html[data-theme='light'] {
       display: inline-block;
       width: 36px;
       height: @multiple-height;
-      line-height: @multiple-height;
+      border-left: 1px solid @border-color-base;
       color: @text-color-secondary;
+      line-height: @multiple-height;
       text-align: center;
       cursor: pointer;
-      border-left: 1px solid @border-color-base;
 
       &:hover {
         color: @text-color-base;
@@ -172,8 +172,8 @@ html[data-theme='light'] {
       display: inline-block;
       width: 100%;
       height: @multiple-height - 2;
-      padding-left: 0;
       margin-left: -10px;
+      padding-left: 0;
       font-size: 12px;
       cursor: pointer;
       user-select: none;

src/views/form-design/components/VFormDesign/styles/drag.less

@@ -3,36 +3,36 @@
   overflow: auto;
 
   :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;
+        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,18 +41,18 @@
       // 选择时 start
       &::before {
         content: '';
-        height: 5px;
-        width: 100%;
-        background-color: @primary-color;
         position: absolute;
         top: 0;
         right: -100%;
+        width: 100%;
+        height: 5px;
         transition: all 0.3s;
+        background-color: @primary-color;
       }
 
       &.active {
-        background-color: @primary-hover-bg-color;
         outline-offset: 0;
+        background-color: @primary-hover-bg-color;
 
         &::before {
           right: 0;
@@ -68,10 +68,10 @@
         &::before {
           content: '';
           position: absolute;
-          width: 100%;
-          height: 100%;
           top: 0;
           left: 0;
+          width: 100%;
+          height: 100%;
         }
 
         .ant-form-item {
@@ -84,11 +84,11 @@
       .show-key-box {
         // 显示key
         position: absolute;
-        bottom: 2px;
         right: 5px;
-        font-size: 14px;
+        bottom: 2px;
         // z-index: 999;
         color: @primary-color;
+        font-size: 14px;
       }
 
       .copy,
@@ -97,11 +97,11 @@
         top: 0;
         width: 30px;
         height: 30px;
-        line-height: 30px;
-        text-align: center;
-        color: #fff;
         // z-index: 989;
         transition: all 0.3s;
+        color: #fff;
+        line-height: 30px;
+        text-align: center;
 
         &.unactivated {
           opacity: 0 !important;
@@ -114,8 +114,8 @@
       }
 
       .copy {
-        border-radius: 0 0 0 8px;
         right: 30px;
+        border-radius: 0 0 0 8px;
         background-color: @primary-color;
       }
 
@@ -128,11 +128,11 @@
     .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;
+      transition: all 0.3s;
+      background-color: @layout-background-color;
 
       .form-item-box {
         position: relative;
@@ -150,14 +150,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,22 +167,22 @@
       // 选择时 start
       &::before {
         content: '';
-        height: 5px;
-        width: 100%;
-        background: transparent;
         position: absolute;
         top: 0;
         right: -100%;
+        width: 100%;
+        height: 5px;
         transition: all 0.3s;
+        background: transparent;
       }
 
       &.active {
-        background-color: @layout-hover-bg-color;
         outline-offset: 0;
+        background-color: @layout-hover-bg-color;
 
         &::before {
-          background-color: @layout-color;
           right: 0;
+          background-color: @layout-color;
         }
       }
       // 选择时 end
@@ -193,11 +193,11 @@
           top: 0;
           width: 30px;
           height: 30px;
-          line-height: 30px;
-          text-align: center;
-          color: #fff;
           // z-index: 989;
           transition: all 0.3s;
+          color: #fff;
+          line-height: 30px;
+          text-align: center;
 
           &.unactivated {
             opacity: 0 !important;
@@ -210,8 +210,8 @@
         }
 
         > .copy {
-          border-radius: 0 0 0 8px;
           right: 30px;
+          border-radius: 0 0 0 8px;
           background-color: @layout-color;
         }