fix: 修复form设计器在黑暗模式下的显示问题 (#2543)

src/router/routes/modules/form-design/main.ts

@@ -8,7 +8,7 @@ const permission: AppRouteModule = {
   component: LAYOUT,
   meta: {
     orderNo: 10000,
-    icon: 'icon:add-circle',
+    icon: 'ion:build-outline',
     title: '表单设计',
   },
   children: [

src/views/form-design/components/VFormDesign/index.vue

@@ -1,15 +1,14 @@
 <template>
-  <!-- <div class="v-form-design-container"> -->
-  <!-- <header class="v-form-design-header">{{ title }}</header> -->
-
   <Layout>
     <LayoutSider
-      class="left"
-      theme="light"
+      class="left sider"
       collapsible
       collapsedWidth="0"
       width="270"
-      :zeroWidthTriggerStyle="{ 'margin-top': '-70px' }"
+      :zeroWidthTriggerStyle="{
+        'margin-top': '-70px',
+        'background-color': 'gray',
+      }"
       breakpoint="md"
     >
       <CollapseContainer title="基础控件">
@@ -53,16 +52,14 @@
       />
     </LayoutContent>
     <LayoutSider
-      class="right"
+      class="right sider"
       collapsible
       :reverseArrow="true"
-      theme="light"
       collapsedWidth="0"
       width="270"
-      :zeroWidthTriggerStyle="{ 'margin-top': '-70px' }"
+      :zeroWidthTriggerStyle="{ 'margin-top': '-70px', 'background-color': 'gray' }"
       breakpoint="lg"
     >
-      <!-- <div class="right" onselectstart="return false"> -->
       <PropsPanel ref="propsPanel" :activeKey="formConfig.activeKey">
         <template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
           <slot
@@ -71,7 +68,6 @@
           ></slot>
         </template>
       </PropsPanel>
-      <!-- </div> -->
     </LayoutSider>
   </Layout>
 
@@ -80,7 +76,6 @@
   <ImportJsonModal ref="importJsonModal" />
   <VFormPreview ref="eFormPreview" :formConfig="formConfig" />
   <VFormPreview2 ref="eFormPreview2" :formConfig="formConfig" />
-  <!-- </div> -->
 </template>
 
 <script lang="ts" setup>
@@ -100,13 +95,11 @@
   import { ref, provide, Ref } from 'vue';
   import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
 
-  // import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
   import { IVFormComponent, IFormConfig, PropsTabKey } from '../../typings/v-form-component';
   import { formItemsForEach, generateKey } from '../../utils';
   import { cloneDeep } from 'lodash-es';
   import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig';
   import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
-  // import { IAnyObject } from '../../typings/base-type';
   import { globalConfigState } from './config/formItemPropsConfig';
   import { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typings/form-type';
 
@@ -361,5 +354,8 @@
 </script>
 
 <style lang="less" scoped>
-  // @import url(./styles/variable.less);
+  .sider {
+    //需要设置背景色，让主题生效
+    background-color: @component-background;
+  }
 </style>

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

@@ -4,27 +4,22 @@
 
   :deep(.list-main) {
     overflow: hidden;
-    min-height: 100%;
     padding: 5px;
     position: relative;
-    background: #fafafa;
-    // border    : 1px #ccc dashed;
 
     .moving {
-      // 拖放移动中
-      // outline-width: 0;
+      // 拖放移动中;
       min-height: 35px;
       box-sizing: border-box;
       overflow: hidden;
       padding: 0 !important;
-      // margin       : 3px 0;
       position: relative;
 
       &::before {
         content: '';
         height: 5px;
         width: 100%;
-        background: @primary-color;
+        background-color: @primary-color;
         position: absolute;
         top: 0;
         right: 0;
@@ -40,7 +35,7 @@
       min-height: 60px;
 
       &:hover {
-        background: @primary-hover-bg-color;
+        background-color: @primary-hover-bg-color;
       }
 
       // 选择时 start
@@ -48,7 +43,7 @@
         content: '';
         height: 5px;
         width: 100%;
-        background: @primary-color;
+        background-color: @primary-color;
         position: absolute;
         top: 0;
         right: -100%;
@@ -56,7 +51,7 @@
       }
 
       &.active {
-        background: @primary-hover-bg-color;
+        background-color: @primary-hover-bg-color;
         outline-offset: 0;
 
         &::before {
@@ -77,7 +72,6 @@
           height: 100%;
           top: 0;
           left: 0;
-          // z-index: 888;
         }
 
         .ant-form-item {
@@ -122,12 +116,12 @@
       .copy {
         border-radius: 0 0 0 8px;
         right: 30px;
-        background: @primary-color;
+        background-color: @primary-color;
       }
 
       .delete {
         right: 0;
-        background: @primary-color;
+        background-color: @primary-color;
       }
     }
 
@@ -135,7 +129,7 @@
       position: relative;
       box-sizing: border-box;
       padding: 5px;
-      background: @layout-background-color;
+      background-color: @layout-background-color;
       width: 100%;
       transition: all 0.3s;
       overflow: hidden;
@@ -152,14 +146,14 @@
       }
 
       .grid-row {
-        background: @layout-background-color;
+        background-color: @layout-background-color;
 
         .grid-col {
           .draggable-box {
             min-height: 80px;
             min-width: 50px;
             border: 1px #ccc dashed;
-            background: #fff;
+            // background: #fff;
 
             .list-main {
               min-height: 83px;
@@ -183,11 +177,11 @@
       }
 
       &.active {
-        background: @layout-hover-bg-color;
+        background-color: @layout-hover-bg-color;
         outline-offset: 0;
 
         &::before {
-          background: @layout-color;
+          background-color: @layout-color;
           right: 0;
         }
       }
@@ -218,12 +212,12 @@
         > .copy {
           border-radius: 0 0 0 8px;
           right: 30px;
-          background: @layout-color;
+          background-color: @layout-color;
         }
 
         > .delete {
           right: 0;
-          background: @layout-color;
+          background-color: @layout-color;
         }
       }
     }

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

@@ -1,522 +0,0 @@
-.v-form-design-container {
-  // height: 100%;
-  width: 100%;
-  // overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  & > .v-form-design-header {
-    height: @header-height;
-    line-height: @header-height;
-    background: @primary-color;
-    text-align: center;
-    font-size: 20px;
-    color: #fff;
-  }
-
-  :deep(.icon) {
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-    fill: currentcolor;
-    // overflow: hidden;
-  }
-
-  .content {
-    position: relative;
-    flex: 1;
-    // margin-top: 5px;
-    display: flex;
-    // flex-flow: row nowrap;
-    // height: 100%;
-    // overflow: hidden;
-    box-sizing: border-box;
-
-    .left,
-    .right {
-      width: @left-right-width;
-      box-shadow: 0 0 1px 1px #ccc;
-      // overflow: hidden;
-      // height: 100%;
-      // height: 600px;
-      //
-      border: 1px solid green;
-      // overflow-y: auto;
-      // :deep(.ant-tabs) {
-      //   height: 100%;
-      //   .ant-tabs-content-holder {
-      //     // display: flex;
-      //     // flex-flow: column;
-      //     height: 100%;
-      //     .ant-tabs-content {
-      //       // flex:1;
-      //       // height: 0;
-      //       // overflow-y: auto;
-      //       // overflow-x: hidden;
-      //       display: flex;
-      //       flex-flow: column;
-      //       height: 100%;
-      //     }
-      //   }
-      // }
-    }
-
-    :deep(.right) {
-      // & > div {
-      // height: 100%;
-      // }
-      // overflow: hidden;
-      // & > div {
-      //   height: 100%;
-      //   .ant-tabs-content-holder{
-      //     height: 100%;
-      //     .ant-tabs-content{
-      //       height: 100%;
-      //       .ant-tabs-tabpane{
-      //         height: 100%;
-      //       }
-      //     }
-      //   }
-      // }
-
-      .ant-tabs {
-        width: 280px;
-        height: 100%;
-        // overflow: hidden;
-
-        .ant-tabs-content-holder {
-          // display: flex;
-          // flex-flow: column;
-          // height: 100%;
-          // overflow: hidden;
-
-          .ant-tabs-content {
-            // flex:1;
-            // height: 0;
-            // overflow-y: auto;
-            // overflow-x: hidden;
-
-            height: 100%;
-            // overflow: hidden;
-            .ant-tabs-tabpane {
-              .properties-content {
-                // height: 100%;
-
-                // overflow: auto;
-                // overflow: hidden;
-
-                // background: #fff;
-                .properties-body {
-                  box-sizing: border-box;
-                  // height: 100%;
-
-                  // display: flex;
-                  // flex-flow: column;
-
-                  form {
-                    position: absolute;
-                    // height: 400px;
-                    height: calc(100% - 50px);
-                    // height: 100%;
-                    // flex: 1;
-                    // height: 0;
-                    margin-right: 10px;
-                    // overflow: auto;
-                    overflow-y: auto;
-                    overflow-x: hidden;
-                    // overflow: auto;
-                  }
-                  // overflow: auto;
-                  // height: 100%;
-                  // padding: 8px 16px;
-                  .hint-box {
-                    margin-top: 200px;
-                  }
-
-                  .ant-form-item,
-                  .ant-slider-with-marks {
-                    margin-left: 10px;
-                    margin-right: 20px;
-                    margin-bottom: 0;
-                  }
-
-                  .ant-form-item {
-                    // box-sizing: border-box;
-                    width: 100%;
-                    margin-bottom: 0;
-                    // padding: 2px 0;
-                    border-bottom: 1px solid @border-color;
-
-                    .ant-form-item-label {
-                      line-height: 2;
-                      vertical-align: text-top;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    :deep(.left) {
-      .ant-collapse {
-        border: 0;
-
-        .ant-collapse-header {
-          padding: 7px 0 7px 40px;
-        }
-
-        .ant-collapse-content-box {
-          padding: 0;
-        }
-      }
-
-      ul {
-        padding: 5px;
-        list-style: none;
-        display: flex;
-        margin-bottom: 0;
-        flex-wrap: wrap;
-        // background: #efefef;
-
-        li {
-          padding: 8px 12px;
-          transition: all 0.3s;
-          width: calc(50% - 6px);
-          margin: 2.7px;
-          height: 36px;
-          line-height: 20px;
-          cursor: move;
-          border: 1px solid @border-color;
-          border-radius: 3px;
-
-          &:hover {
-            color: @primary-color;
-            border: 1px solid @primary-color;
-            position: relative;
-            // z-index: 1;
-            box-shadow: 0 2px 6px @primary-color;
-          }
-        }
-      }
-    }
-
-    :deep(.node-panel) {
-      box-shadow: 0 0 1px 1px #ccc;
-      flex: 1;
-      margin: 0 8px;
-      overflow: hidden;
-
-      .draggable-box {
-        height: 100%;
-        overflow: auto;
-
-        .list-main {
-          overflow: hidden;
-          min-height: 100%;
-          padding: 5px;
-          position: relative;
-          background: #fafafa;
-          // border    : 1px #ccc dashed;
-
-          .moving {
-            // 拖放移动中
-            // outline-width: 0;
-            min-height: 35px;
-            box-sizing: border-box;
-            overflow: hidden;
-            padding: 0 !important;
-            // margin       : 3px 0;
-            position: relative;
-
-            &::before {
-              content: '';
-              height: 5px;
-              width: 100%;
-              background: @primary-color;
-              position: absolute;
-              top: 0;
-              right: 0;
-            }
-          }
-
-          .drag-move-box {
-            position: relative;
-            box-sizing: border-box;
-            padding: 8px;
-            overflow: hidden;
-            transition: all 0.3s;
-            min-height: 60px;
-
-            &:hover {
-              background: @primary-hover-bg-color;
-            }
-
-            // 选择时 start
-            &::before {
-              content: '';
-              height: 5px;
-              width: 100%;
-              background: @primary-color;
-              position: absolute;
-              top: 0;
-              right: -100%;
-              transition: all 0.3s;
-            }
-
-            &.active {
-              background: @primary-hover-bg-color;
-              outline-offset: 0;
-
-              &::before {
-                right: 0;
-              }
-            }
-
-            // 选择时 end
-            .form-item-box {
-              position: relative;
-              box-sizing: border-box;
-              word-wrap: break-word;
-
-              &::before {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-                // z-index: 888;
-              }
-
-              .ant-form-item {
-                // 修改ant form-item的margin为padding
-                margin: 0;
-                padding-bottom: 6px;
-              }
-            }
-
-            .show-key-box {
-              // 显示key
-              position: absolute;
-              bottom: 2px;
-              right: 5px;
-              font-size: 14px;
-              // z-index: 999;
-              color: @primary-color;
-            }
-
-            .copy,
-            .delete {
-              position: absolute;
-              top: 0;
-              width: 30px;
-              height: 30px;
-              line-height: 30px;
-              text-align: center;
-              color: #fff;
-              // z-index: 989;
-              transition: all 0.3s;
-
-              &.unactivated {
-                opacity: 0 !important;
-                pointer-events: none;
-              }
-
-              &.active {
-                opacity: 1 !important;
-              }
-            }
-
-            .copy {
-              border-radius: 0 0 0 8px;
-              right: 30px;
-              background: @primary-color;
-            }
-
-            .delete {
-              right: 0;
-              background: @primary-color;
-            }
-          }
-
-          .grid-box {
-            position: relative;
-            box-sizing: border-box;
-            padding: 5px;
-            background: @layout-background-color;
-            width: 100%;
-            transition: all 0.3s;
-            overflow: hidden;
-
-            .form-item-box {
-              position: relative;
-              box-sizing: border-box;
-
-              .ant-form-item {
-                // 修改ant form-item的margin为padding
-                margin: 0;
-                padding-bottom: 15px;
-              }
-            }
-
-            .grid-row {
-              background: @layout-background-color;
-
-              .grid-col {
-                .draggable-box {
-                  min-height: 80px;
-                  min-width: 50px;
-                  border: 1px #ccc dashed;
-                  background: #fff;
-
-                  .list-main {
-                    min-height: 83px;
-                    position: relative;
-                    border: 1px #ccc dashed;
-                  }
-                }
-              }
-            }
-
-            // 选择时 start
-            &::before {
-              content: '';
-              height: 5px;
-              width: 100%;
-              background: transparent;
-              position: absolute;
-              top: 0;
-              right: -100%;
-              transition: all 0.3s;
-            }
-
-            &.active {
-              background: @layout-hover-bg-color;
-              outline-offset: 0;
-
-              &::before {
-                background: @layout-color;
-                right: 0;
-              }
-            }
-            // 选择时 end
-            > .copy-delete-box {
-              > .copy,
-              > .delete {
-                position: absolute;
-                top: 0;
-                width: 30px;
-                height: 30px;
-                line-height: 30px;
-                text-align: center;
-                color: #fff;
-                // z-index: 989;
-                transition: all 0.3s;
-
-                &.unactivated {
-                  opacity: 0 !important;
-                  pointer-events: none;
-                }
-
-                &.active {
-                  opacity: 1 !important;
-                }
-              }
-
-              > .copy {
-                border-radius: 0 0 0 8px;
-                right: 30px;
-                background: @layout-color;
-              }
-
-              > .delete {
-                right: 0;
-                background: @layout-color;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  ::-webkit-scrollbar {
-    /* 滚动条整体样式 */
-    width: 6px;
-
-    /* 高宽分别对应横竖滚动条的尺寸 */
-    height: 6px;
-    scrollbar-arrow-color: red;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    /* 滚动条里面小方块 */
-    border-radius: 5px;
-    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
-    background: rgb(0 0 0 / 20%);
-    scrollbar-arrow-color: red;
-  }
-
-  ::-webkit-scrollbar-track {
-    /* 滚动条里面轨道 */
-    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
-    border-radius: 0;
-    background: rgb(0 0 0 / 10%);
-  }
-}
-
-// code盒子样式
-.v-json-box {
-  height: 570px;
-  overflow: auto;
-
-  .vue-codemirror-wrap {
-    height: 100%;
-
-    .CodeMirror-wrap {
-      height: 100%;
-      background: #f6f6f6;
-
-      .CodeMirror-scroll {
-        height: 100%;
-        width: 100%;
-      }
-
-      pre.CodeMirror-line,
-      .CodeMirror-linenumber {
-        min-height: 21px;
-        line-height: 21px;
-      }
-    }
-  }
-}
-
-// code-modal盒子样式
-.v-code-modal {
-  .ant-modal-body {
-    padding: 12px;
-  }
-}
-
-.v-form-container {
-  // 内联布局样式
-  .ant-form-inline {
-    .list-main {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      align-content: flex-start;
-
-      .layout-width {
-        width: 100%;
-      }
-    }
-
-    .ant-form-item-control-wrapper {
-      min-width: 175px !important;
-    }
-  }
-}