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

* fix: 合并代码导致的问题，升级vite 4.4.0 * fix: stylelint
2025-09-01 18:17:46 +00:00 · 2023-07-07 07:06:36 +08:00
parent 1262e13067
commit c6e135195a
22 changed files with 1307 additions and 1500 deletions
--- a/apps/test-server/package.json
+++ b/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",
--- a/internal/eslint-config/package.json
+++ b/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",
--- a/internal/stylelint-config/package.json
+++ b/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"
--- a/internal/ts-config/package.json
+++ b/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"
  }
 }
--- a/internal/vite-config/package.json
+++ b/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",
--- a/internal/vite-config/src/plugins/index.ts
+++ b/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';
--- a/package.json
+++ b/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": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Menu/src/index.less
+++ b/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;
  }
 }
--- a/src/components/Modal/src/index.less
+++ b/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;
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/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;
-    color: @text-color-base;
-    list-style: none;
+    padding: 0;
    outline: none;
+    color: @text-color-base;
+    font-size: @font-size-base;
+    list-style: 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;
      }
    }

--- a/src/components/SimpleMenu/src/index.less
+++ b/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;
--- a/src/components/Tree/style/index.less
+++ b/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 {
--- a/src/components/VxeTable/src/css/component.scss
+++ b/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 {
-        padding: 0;
        @extend %ResetBorder;
-      }
-    }
-    & > .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-input-number {
+      .ant-input-number-input {
+        padding: 0;
+      }
+
+      .ant-input-number-handler-wrap,
+      .ant-input-number-handler-down {
+        @extend %ResetBorder;
+      }
+    }
+
    & > .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;
      }
    }
  }
--- a/src/components/VxeTable/src/css/index.scss
+++ b/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';
--- a/src/components/VxeTable/src/css/scrollbar.scss
+++ b/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;
  }
 }
--- a/src/components/VxeTable/src/css/toolbar.scss
+++ b/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;
--- a/src/components/VxeTable/src/css/variable.scss
+++ b/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;
--- a/src/design/ant/table.less
+++ b/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;
              }
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -5,14 +5,14 @@

 .@{header-prefix-cls} {
  display: flex;
-  height: @header-height;
-  padding: 0;
-  margin-left: -1px;
-  line-height: @header-height;
-  color: @white;
-  background-color: @white;
  align-items: center;
  justify-content: space-between;
+  height: @header-height;
+  margin-left: -1px;
+  padding: 0;
+  background-color: @white;
+  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;
--- a/src/layouts/default/tabs/index.less
+++ b/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;
--- a/src/views/form-design/components/VFormDesign/styles/drag.less
+++ b/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;
        }