fix: eslint

src/components/Application/src/AppDarkModeToggle.vue

@@ -35,7 +35,7 @@ function toggleDarkMode() {
     @click="toggleDarkMode"
   >
     <div
-      class="dark:(transform translateX(calc(100% + 2px))) absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
+      class="absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
     />
     <SvgIcon size="14" name="sun" />
     <SvgIcon size="14" name="moon" />

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

@@ -4,7 +4,7 @@
 -->
 <script lang="ts" setup>
 import draggable from 'vuedraggable'
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { Empty, Form } from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
@@ -12,7 +12,7 @@ import LayoutItem from '../components/LayoutItem.vue'
 
 const emit = defineEmits(['handleSetSelectItem'])
 
-const  Draggable = draggable
+const Draggable = draggable
 
 const { formConfig } = useFormDesignState()
 
@@ -46,30 +46,17 @@ const layoutTag = computed(() => {
 
 <template>
   <div class="v-form-container form-panel">
-    <Empty
+    <Empty v-show="formConfig.schemas.length === 0" class="empty-text" description="从左侧选择控件添加" />
-      v-show="formConfig.schemas.length === 0"
-      class="empty-text"
-      description="从左侧选择控件添加"
-    />
     <Form v-bind="formConfig">
       <div class="draggable-box">
         <Draggable
-          v-model="formConfig.schemas"
+          v-model="formConfig.schemas" class="list-main ant-row" group="form-draggable"
-          class="list-main ant-row"
+          :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }" ghost-class="moving" :animation="180"
-          group="form-draggable"
+          handle=".drag-move" item-key="key" @add="addItem" @start="handleDragStart"
-          :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
-          ghost-class="moving"
-          :animation="180"
-          handle=".drag-move"
-          item-key="key"
-          @add="addItem"
-          @start="handleDragStart"
         >
           <template #item="{ element }">
             <LayoutItem
-              class="drag-move"
+              class="drag-move" :schema="element" :data="formConfig"
-              :schema="element"
-              :data="formConfig"
               :current-item="formConfig.currentItem || {}"
             />
           </template>
@@ -80,72 +67,74 @@ const layoutTag = computed(() => {
 </template>
 
 <style lang="less" scoped>
-  @import url('../styles/variable.less');
+@import url('../styles/variable.less');
-  @import url('../styles/drag.less');
+@import url('../styles/drag.less');
 
-  .v-form-container {
+.v-form-container {
-    // 内联布局样式
-    .ant-form-inline {
-      .list-main {
-        display: flex;
-        flex-wrap: wrap;
-        align-content: flex-start;
-        justify-content: flex-start;
 
-        .layout-width {
+  // 内联布局样式
-          width: 100%;
+  .ant-form-inline {
-        }
+    .list-main {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: flex-start;
+
+      .layout-width {
+        width: 100%;
+      }
+    }
+
+    .ant-form-item-control-wrapper {
+      min-width: 175px !important;
+    }
+  }
+}
+
+.form-panel {
+  position: relative;
+  height: 100%;
+
+  .empty-text {
+    position: absolute;
+    inset: -10% 0 0;
+    z-index: 100;
+    height: 150px;
+    margin: auto;
+    color: #aaa;
+  }
+
+  .draggable-box {
+    height: calc(100vh - 200px);
+    // width: 100%;
+    overflow: auto;
+
+    .drag-move {
+      min-height: 62px;
+      cursor: move;
+    }
+
+    .list-main {
+
+      // 列表动画
+      .list-enter-active {
+        transition: all 0.5s;
       }
 
-      .ant-form-item-control-wrapper {
+      .list-leave-active {
-        min-width: 175px !important;
+        transition: all 0.3s;
-      }
+      }
-    }
+
-  }
+      .list-enter,
-
+      .list-leave-to {
-  .form-panel {
+        opacity: 0;
-    position: relative;
+        transform: translateX(-100px);
-    height: 100%;
+      }
-
+
-    .empty-text {
+      .list-enter {
-      position: absolute;
+        height: 30px;
-      inset: -10% 0 0;
-      z-index: 100;
-      height: 150px;
-      margin: auto;
-      color: #aaa;
-    }
-
-    .draggable-box {
-      height: calc(100vh - 200px);
-      // width: 100%;
-      overflow: auto;
-
-      .drag-move {
-        min-height: 62px;
-        cursor: move;
-      }
-
-      .list-main {
-        // 列表动画
-        .list-enter-active {
-          transition: all 0.5s;
-        }
-
-        .list-leave-active {
-          transition: all 0.3s;
-        }
-
-        .list-enter,
-        .list-leave-to {
-          opacity: 0;
-          transform: translateX(-100px);
-        }
-
-        .list-enter {
-          height: 30px;
-        }
       }
     }
   }
+}
 </style>