From f4ca72a7a23aad89a256704556a03046a75fe43e Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Mon, 28 Aug 2023 17:23:51 +0800
Subject: [PATCH] perf: formdesign

---
 .../VFormCreate/components/FormRender.vue     |  63 ++--
 .../src/components/VFormCreate/index.vue      |  17 +-
 .../VFormDesign/components/CodeModal.vue      |  42 ++-
 .../VFormDesign/components/ComponentProps.vue |  81 +++--
 .../VFormDesign/components/FormItemProps.vue  |  19 +-
 .../VFormDesign/components/FormNode.vue       |   8 +-
 .../components/FormNodeOperate.vue            |  89 +++---
 .../VFormDesign/components/FormOptions.vue    |  72 ++---
 .../VFormDesign/components/FormProps.vue      | 118 ++++---
 .../components/ImportJsonModal.vue            | 127 ++++----
 .../VFormDesign/components/JsonModal.vue      |  64 ++--
 .../VFormDesign/components/PreviewCode.vue    |   8 +-
 .../VFormDesign/config/formItemPropsConfig.ts |   4 +-
 .../src/components/VFormDesign/index.vue      |  39 ++-
 .../VFormDesign/modules/CollapseItem.vue      |  77 +++--
 .../modules/FormComponentPanel.vue            | 140 ++++----
 .../VFormDesign/modules/PropsPanel.vue        |  64 ++--
 .../VFormDesign/modules/Toolbar.vue           |  54 ++--
 .../components/VFormDesign/styles/drag.less   |  49 +--
 .../src/components/VFormItem/index.vue        | 299 +++++++++---------
 .../src/components/VFormItem/vFormItem.vue    |  65 ++--
 .../src/components/VFormPreview/index.vue     | 102 +++---
 .../src/hooks/useFormInstanceMethods.ts       |  16 +-
 .../FormDesign/src/hooks/useVFormMethods.ts   |  41 ++-
 .../FormDesign/src/typings/form-type.ts       |   6 +-
 .../src/typings/v-form-component.ts           |   7 +-
 src/components/FormDesign/src/utils/index.ts  |  56 +---
 27 files changed, 860 insertions(+), 867 deletions(-)

diff --git a/src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue b/src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue
index 234a512..d95986b 100644
--- a/src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue
+++ b/src/components/FormDesign/src/components/VFormCreate/components/FormRender.vue
@@ -1,44 +1,40 @@
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
 import { Col, Row } from 'ant-design-vue'
 import type { IFormConfig, IVFormComponent } from '../../../typings/v-form-component'
 import VFormItem from '../../VFormItem/index.vue'
 
-export default defineComponent({
-  name: 'FormRender',
-  components: {
-    VFormItem,
-    Row,
-    Col,
+defineProps({
+  formData: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({}),
-    },
-    schema: {
-      type: Object as PropType<IVFormComponent>,
-      default: () => ({}),
-    },
-    formConfig: {
-      type: Object as PropType<IFormConfig>,
-      default: () => [] as IFormConfig[],
-    },
-    setFormModel: {
-      type: Function as PropType<(key: string, value: any) => void>,
-      default: null,
-    },
+  schema: {
+    type: Object as PropType<IVFormComponent>,
+    default: () => ({}),
+  },
+  formConfig: {
+    type: Object as PropType<IFormConfig>,
+    default: () => [] as IFormConfig[],
+  },
+  setFormModel: {
+    type: Function as PropType<(key: string, value: any) => void>,
+    default: null,
   },
-  emits: ['change', 'submit', 'reset'],
-  setup(_props) {},
 })
+
+const emit = defineEmits(['change', 'submit', 'reset'])
 </script>
 
 <template>
   <template v-if="['Grid'].includes(schema.component)">
     <Row class="grid-row">
-      <Col v-for="(colItem, index) in schema.columns" :key="index" class="grid-col" :span="colItem.span">
+      <Col
+        v-for="(colItem, index) in schema.columns"
+        :key="index"
+        class="grid-col"
+        :span="colItem.span"
+      >
         <FormRender
           v-for="(item, k) in colItem.children"
           :key="k"
@@ -56,11 +52,14 @@ export default defineComponent({
     :schema="schema"
     :form-data="formData"
     :set-form-model="setFormModel"
-    @change="$emit('change', { schema, value: $event })"
-    @submit="$emit('submit', schema)"
-    @reset="$emit('reset')"
+    @change="emit('change', { schema, value: $event })"
+    @submit="emit('submit', schema)"
+    @reset="emit('reset')"
   >
-    <template v-if="schema.componentProps && schema.componentProps.slotName" #[schema.componentProps!.slotName]>
+    <template
+      v-if="schema.componentProps && schema.componentProps.slotName"
+      #[schema.componentProps!.slotName]
+    >
       <slot :name="schema.componentProps!.slotName" />
     </template>
   </VFormItem>
diff --git a/src/components/FormDesign/src/components/VFormCreate/index.vue b/src/components/FormDesign/src/components/VFormCreate/index.vue
index 808a69c..5285d6c 100644
--- a/src/components/FormDesign/src/components/VFormCreate/index.vue
+++ b/src/components/FormDesign/src/components/VFormCreate/index.vue
@@ -45,12 +45,16 @@ export default defineComponent({
     })
 
     const noHiddenList = computed(() => {
-      return props.formConfig.schemas && props.formConfig.schemas.filter(item => item.hidden !== true)
+      return (
+        props.formConfig.schemas
+          && props.formConfig.schemas.filter(item => item.hidden !== true)
+      )
     })
 
     const fApi = useVModel(props, 'fApi', emit)
 
-    const { submit, validate, clearValidate, resetFields, validateField } = useFormInstanceMethods(props, formModelNew, context, eFormModel)
+    const { submit, validate, clearValidate, resetFields, validateField }
+        = useFormInstanceMethods(props, formModelNew, context, eFormModel)
 
     const { linkOn, ...methods } = useVFormMethods(
       { formConfig: props.formConfig, formData: props.formModel } as unknown as IProps,
@@ -78,7 +82,9 @@ export default defineComponent({
     /**
      * 获取表单属性
      */
-    const formModelProps = computed(() => omit(props.formConfig, ['disabled', 'labelWidth', 'schemas']) as Recordable)
+    const formModelProps = computed(
+      () => omit(props.formConfig, ['disabled', 'labelWidth', 'schemas']) as Recordable,
+    )
 
     const handleSubmit = () => {
       submit()
@@ -127,7 +133,10 @@ export default defineComponent({
           @reset="resetFields"
         >
           <template v-if="schema && schema.componentProps" #[`schema.componentProps!.slotName`]>
-            <slot :name="schema.componentProps!.slotName" v-bind="{ formModel, field: schema.field, schema }" />
+            <slot
+              :name="schema.componentProps!.slotName"
+              v-bind="{ formModel, field: schema.field, schema }"
+            />
           </template>
         </FormRender>
       </Row>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue
index d330699..8aba302 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue
@@ -1,8 +1,8 @@
 <!--
  * @Description: 渲染代码
 -->
-<script lang="ts">
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+<script lang="ts" setup>
+import { computed, reactive } from 'vue'
 import { Modal } from 'ant-design-vue'
 import { formatRules, removeAttrs } from '../../../utils'
 import type { IFormConfig } from '../../../typings/v-form-component'
@@ -38,37 +38,31 @@ let codeVueLast = `
      }
   }
 }
-<\/script>`
+<\/script>`;
 //
-export default defineComponent({
-  name: 'CodeModal',
-  components: { PreviewCode, Modal },
-  setup() {
-    const state = reactive({
-      open: false,
-      jsonData: {} as IFormConfig
-    })
+const state = reactive({
+  open: false,
+  jsonData: {} as IFormConfig,
+});
 
-    const showModal = (formConfig: IFormConfig) => {
-      formConfig.schemas && formatRules(formConfig.schemas)
-      state.open = true
-      state.jsonData = formConfig
-    }
+const showModal = (formConfig: IFormConfig) => {
+  formConfig.schemas && formatRules(formConfig.schemas);
+  state.open = true;
+  state.jsonData = formConfig;
+};
 
-    const editorVueJson = computed(() => {
-      return codeVueFront + JSON.stringify(removeAttrs(state.jsonData), null, '\t') + codeVueLast
-    })
+const editorVueJson = computed(() => {
+  return codeVueFront + JSON.stringify(removeAttrs(state.jsonData), null, '\t') + codeVueLast;
+});
 
-    return { ...toRefs(state), editorVueJson, showModal }
-  }
-})
+defineExpose({ showModal })
 </script>
 <template>
   <Modal
     title="代码"
     :footer="null"
-    :open="open"
-    @cancel="open = false"
+    :open="state.open"
+    @cancel="state.open = false"
     wrapClassName="v-code-modal"
     style="top: 20px"
     width="850px"
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
index 569621d..bcd8ad9 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue
@@ -2,7 +2,20 @@
  * @Description: 组件属性控件
 -->
 <script lang="ts">
-import { Checkbox, Col, Empty, Form, FormItem, Input, InputNumber, RadioGroup, Row, Select, Switch } from 'ant-design-vue'
+import {
+  Checkbox,
+  Col,
+  Empty,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  RadioGroup,
+  Row,
+  Select,
+  Switch,
+} from 'ant-design-vue'
+import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue'
 import { computed, defineComponent, ref, watch } from 'vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import {
@@ -14,7 +27,6 @@ import {
 import { formItemsForEach, remove } from '../../../utils'
 import type { IBaseFormAttrs } from '../config/formItemPropsConfig'
 import FormOptions from './FormOptions.vue'
-import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue'
 
 export default defineComponent({
   name: 'ComponentProps',
@@ -45,19 +57,21 @@ export default defineComponent({
 
     const { formConfig } = useFormDesignState()
 
-    if (formConfig.value.currentItem)
-      formConfig.value.currentItem.componentProps = formConfig.value.currentItem.componentProps || {}
+    if (formConfig.value.currentItem) {
+      formConfig.value.currentItem.componentProps
+          = formConfig.value.currentItem.componentProps || {}
+    }
 
     watch(
       () => formConfig.value.currentItem?.field,
       (_newValue, oldValue) => {
         formConfig.value.schemas
-          && formItemsForEach(formConfig.value.schemas, (item) => {
-            if (item.link) {
-              const index = item.link.findIndex(linkItem => linkItem === oldValue)
-              index !== -1 && remove(item.link, index)
-            }
-          })
+            && formItemsForEach(formConfig.value.schemas, (item) => {
+              if (item.link) {
+                const index = item.link.findIndex(linkItem => linkItem === oldValue)
+                index !== -1 && remove(item.link, index)
+              }
+            })
       },
     )
 
@@ -94,18 +108,18 @@ export default defineComponent({
         })
 
         baseComponentAttrs[formConfig.value.currentItem!.component]
-          && baseComponentAttrs[formConfig.value.currentItem!.component].forEach(async (item) => {
-            if (item.component) {
-              if (['Switch', 'Checkbox', 'Radio'].includes(item.component)) {
-                item.category = 'control'
-                allOptions.value.push(item)
-              }
-              else {
-                item.category = 'input'
-                allOptions.value.push(item)
+            && baseComponentAttrs[formConfig.value.currentItem!.component].forEach(async (item) => {
+              if (item.component) {
+                if (['Switch', 'Checkbox', 'Radio'].includes(item.component)) {
+                  item.category = 'control'
+                  allOptions.value.push(item)
+                }
+                else {
+                  item.category = 'input'
+                  allOptions.value.push(item)
+                }
               }
-            }
-          })
+            })
       },
       {
         immediate: true,
@@ -114,14 +128,14 @@ export default defineComponent({
     // 控制性的选项
     const controlOptions = computed(() => {
       return allOptions.value.filter((item) => {
-        return item.category === 'control'
+        return item.category == 'control'
       })
     })
 
     // 非控制性选择
     const inputOptions = computed(() => {
       return allOptions.value.filter((item) => {
-        return item.category === 'input'
+        return item.category == 'input'
       })
     })
 
@@ -140,9 +154,9 @@ export default defineComponent({
     const linkOptions = computed(() => {
       return (
         formConfig.value.schemas
-        && formConfig.value.schemas
-          .filter(item => item.key !== formConfig.value.currentItem!.key)
-          .map(({ label, field }) => ({ label: `${label}/${field}`, value: field }))
+          && formConfig.value.schemas
+            .filter(item => item.key !== formConfig.value.currentItem!.key)
+            .map(({ label, field }) => ({ label: `${label}/${field}`, value: field }))
       )
     })
     return {
@@ -199,12 +213,23 @@ export default defineComponent({
           </FormItem>
         </div>
         <FormItem label="关联字段">
-          <Select v-model:value="formConfig.currentItem.link" mode="multiple" :options="linkOptions" />
+          <Select
+            v-model:value="formConfig.currentItem.link"
+            mode="multiple"
+            :options="linkOptions"
+          />
         </FormItem>
 
         <FormItem
           v-if="
-            ['Select', 'CheckboxGroup', 'RadioGroup', 'TreeSelect', 'Cascader', 'AutoComplete'].includes(formConfig.currentItem.component)
+            [
+              'Select',
+              'CheckboxGroup',
+              'RadioGroup',
+              'TreeSelect',
+              'Cascader',
+              'AutoComplete',
+            ].includes(formConfig.currentItem.component)
           "
           label="选项"
         >
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
index 6dc9217..4e5127b 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue
@@ -3,7 +3,18 @@
 -->
 <script lang="ts">
 import { computed, defineComponent, watch } from 'vue'
-import { Checkbox, Col, Empty, Form, FormItem, Input, RadioGroup, Select, Slider, Switch } from 'ant-design-vue'
+import {
+  Checkbox,
+  Col,
+  Empty,
+  Form,
+  FormItem,
+  Input,
+  RadioGroup,
+  Select,
+  Slider,
+  Switch,
+} from 'ant-design-vue'
 import { isArray } from 'lodash-es'
 import {
   advanceFormItemColProps,
@@ -40,8 +51,10 @@ export default defineComponent({
       () => {
         if (formConfig.value.currentItem) {
           formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {}
-          formConfig.value.currentItem.itemProps.labelCol = formConfig.value.currentItem.itemProps.labelCol || {}
-          formConfig.value.currentItem.itemProps.wrapperCol = formConfig.value.currentItem.itemProps.wrapperCol || {}
+          formConfig.value.currentItem.itemProps.labelCol
+              = formConfig.value.currentItem.itemProps.labelCol || {}
+          formConfig.value.currentItem.itemProps.wrapperCol
+              = formConfig.value.currentItem.itemProps.wrapperCol || {}
         }
       },
       { deep: true, immediate: true },
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue
index d08afb6..877b764 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue
@@ -40,13 +40,19 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="drag-move-box" :class="{ active: schema.key === formConfig.currentItem?.key }" @click.stop="handleSelectItem">
+  <div
+    class="drag-move-box"
+    :class="{ active: schema.key === formConfig.currentItem?.key }"
+    @click.stop="handleSelectItem"
+  >
     <div class="form-item-box">
       <VFormItem :form-config="formConfig" :schema="schema" />
     </div>
+
     <div class="show-key-box">
       {{ schema.label + (schema.field ? `/${schema.field}` : '') }}
     </div>
+
     <FormNodeOperate :schema="schema" :current-item="formConfig.currentItem" />
   </div>
 </template>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormNodeOperate.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormNodeOperate.vue
index 3bf75a3..2ef9aaf 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormNodeOperate.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/FormNodeOperate.vue
@@ -1,60 +1,57 @@
 <!--
  * @Description: 节点操作复制删除控件
 -->
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import type { IVFormComponent } from '../../../typings/v-form-component'
 import { remove } from '../../../utils'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
-export default defineComponent({
-  name: 'FormNodeOperate',
-  components: {
-    Icon,
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    schema: {
-      type: Object,
-      default: () => ({}),
-    },
-    currentItem: {
-      type: Object,
-      default: () => ({}),
-    },
+  currentItem: {
+    type: Object,
+    default: () => ({}),
   },
-  setup(props) {
-    const { formConfig, formDesignMethods } = useFormDesignState()
-    const activeClass = computed(() => {
-      return props.schema.key === props.currentItem.key ? 'active' : 'unactivated'
-    })
-    /**
-     * 删除当前项
-     */
-    const handleDelete = () => {
-      const traverse = (schemas: IVFormComponent[]) => {
-        schemas.some((formItem, index) => {
-          const { component, key } = formItem
-          // 处理栅格和标签页布局
-          ;['Grid', 'Tabs'].includes(component) && formItem.columns?.forEach(item => traverse(item.children))
-          if (key === props.currentItem.key) {
-            const params: IVFormComponent
-              = schemas.length === 1 ? { component: '' } : schemas.length - 1 > index ? schemas[index + 1] : schemas[index - 1]
-            formDesignMethods.handleSetSelectItem(params)
-            remove(schemas, index)
-            return true
-          }
-        })
-      }
-      traverse(formConfig.value!.schemas)
-    }
+})
 
-    const handleCopy = () => {
-      formDesignMethods.handleCopy()
-    }
-    return { activeClass, handleDelete, handleCopy }
-  },
+const { formConfig, formDesignMethods } = useFormDesignState()
+const activeClass = computed(() => {
+  return props.schema.key === props.currentItem.key ? 'active' : 'unactivated'
 })
+/**
+       * 删除当前项
+       */
+function handleDelete() {
+  const traverse = (schemas: IVFormComponent[]) => {
+    schemas.some((formItem, index) => {
+      const { component, key } = formItem;
+      // 处理栅格和标签页布局
+      ['Grid', 'Tabs'].includes(component)
+              && formItem.columns?.forEach(item => traverse(item.children))
+      if (key === props.currentItem.key) {
+        const params: IVFormComponent
+                = schemas.length === 1
+                  ? { component: '' }
+                  : schemas.length - 1 > index
+                    ? schemas[index + 1]
+                    : schemas[index - 1]
+        formDesignMethods.handleSetSelectItem(params)
+        remove(schemas, index)
+        return true
+      }
+    })
+  }
+  traverse(formConfig.value!.schemas)
+}
+
+function handleCopy() {
+  formDesignMethods.handleCopy()
+}
 </script>
 
 <template>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue
index 0919c4d..9e0e0de 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue
@@ -1,55 +1,37 @@
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
+<script lang="ts" setup>
 import { Input } from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import { remove } from '../../../utils'
 import message from '../../../utils/message'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
-export default defineComponent({
-  name: 'FormOptions',
-  components: { Input, Icon },
-  // props: {},
-  setup() {
-    const state = reactive({})
-    const { formConfig } = useFormDesignState()
-    const key = formConfig.value.currentItem?.component === 'TreeSelect' ? 'treeData' : 'options'
-    const addOptions = () => {
-      if (!formConfig.value.currentItem?.componentProps?.[key])
-        formConfig.value.currentItem!.componentProps![key] = []
-      const len = formConfig.value.currentItem?.componentProps?.[key].length + 1
-      formConfig.value.currentItem!.componentProps![key].push({
-        label: `选项${len}`,
-        value: `${len}`,
-      })
-    }
-    const deleteOptions = (index: number) => {
-      remove(formConfig.value.currentItem?.componentProps?.[key], index)
-    }
+const { formConfig } = useFormDesignState()
+const key = formConfig.value.currentItem?.component === 'TreeSelect' ? 'treeData' : 'options'
+function addOptions() {
+  if (!formConfig.value.currentItem?.componentProps?.[key])
+    formConfig.value.currentItem!.componentProps![key] = []
+  const len = formConfig.value.currentItem?.componentProps?.[key].length + 1
+  formConfig.value.currentItem!.componentProps![key].push({
+    label: `选项${len}`,
+    value: `${len}`,
+  })
+}
+function deleteOptions(index: number) {
+  remove(formConfig.value.currentItem?.componentProps?.[key], index)
+}
 
-    const addGridOptions = () => {
-      formConfig.value.currentItem?.columns?.push({
-        span: 12,
-        children: [],
-      })
-    }
-    const deleteGridOptions = (index: number) => {
-      if (index === 0)
-        return message.warning('请至少保留一个栅格')
+function addGridOptions() {
+  formConfig.value.currentItem?.columns?.push({
+    span: 12,
+    children: [],
+  })
+}
+function deleteGridOptions(index: number) {
+  if (index === 0)
+    return message.warning('请至少保留一个栅格')
 
-      remove(formConfig.value.currentItem!.columns!, index)
-    }
-    return {
-      ...toRefs(state),
-      formConfig,
-      addOptions,
-      deleteOptions,
-      key,
-      deleteGridOptions,
-      addGridOptions,
-    }
-  },
-})
+  remove(formConfig.value.currentItem!.columns!, index)
+}
 </script>
 
 <template>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue b/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
index decf45a..5b9fcb0 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/FormProps.vue
@@ -1,43 +1,30 @@
 <!--
  * @Description: 右侧属性面板控件 表单属性面板
 -->
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import type { RadioChangeEvent } from 'ant-design-vue'
-import { Checkbox, Col, InputNumber, Slider } from 'ant-design-vue'
-
-// import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
-import { Form, FormItem, Radio } from 'ant-design-vue'
+import {
+  Checkbox,
+  Col,
+  Form,
+  FormItem,
+  InputNumber,
+  Radio,
+  Slider,
+} from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 
-export default defineComponent({
-  name: 'FormProps',
-  components: {
-    InputNumber,
-    Slider,
-    Checkbox,
-    RadioGroup: Radio.Group,
-    RadioButton: Radio.Button,
-    Form,
-    FormItem,
-    Col,
-  },
-  setup() {
-    const { formConfig } = useFormDesignState()
-
-    formConfig.value = formConfig.value || {
-      labelCol: { span: 24 },
-      wrapperCol: { span: 24 },
-    }
+const { formConfig } = useFormDesignState()
 
-    const lableLayoutChange = (e: RadioChangeEvent) => {
-      if (e.target.value === 'Grid')
-        formConfig.value.layout = 'horizontal'
-    }
+formConfig.value = formConfig.value || {
+  labelCol: { span: 24 },
+  wrapperCol: { span: 24 },
+}
 
-    return { formConfig, lableLayoutChange }
-  },
-})
+function lableLayoutChange(e: RadioChangeEvent) {
+  if (e.target.value === 'Grid')
+    formConfig.value.layout = 'horizontal'
+}
 </script>
 
 <template>
@@ -46,33 +33,42 @@ export default defineComponent({
       <!--      <e-upload v-model="fileList"></e-upload> -->
 
       <FormItem label="表单布局">
-        <RadioGroup v-model:value="formConfig.layout" button-style="solid">
-          <RadioButton value="horizontal">
+        <Radio.Group v-model:value="formConfig.layout" button-style="solid">
+          <Radio.Button value="horizontal">
             水平
-          </RadioButton>
-          <RadioButton value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
+          </Radio.Button>
+          <Radio.Button value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
             垂直
-          </RadioButton>
-          <RadioButton value="inline" :disabled="formConfig.labelLayout === 'Grid'">
+          </Radio.Button>
+          <Radio.Button value="inline" :disabled="formConfig.labelLayout === 'Grid'">
             行内
-          </RadioButton>
-        </RadioGroup>
+          </Radio.Button>
+        </Radio.Group>
       </FormItem>
 
       <!-- <Row> -->
       <FormItem label="标签布局">
-        <RadioGroup v-model:value="formConfig.labelLayout" button-style="solid" @change="lableLayoutChange">
-          <RadioButton value="flex">
+        <Radio.Group
+          v-model:value="formConfig.labelLayout"
+          button-style="solid"
+          @change="lableLayoutChange"
+        >
+          <Radio.Button value="flex">
             固定
-          </RadioButton>
-          <RadioButton value="Grid" :disabled="formConfig.layout !== 'horizontal'">
+          </Radio.Button>
+          <Radio.Button value="Grid" :disabled="formConfig.layout !== 'horizontal'">
             栅格
-          </RadioButton>
-        </RadioGroup>
+          </Radio.Button>
+        </Radio.Group>
       </FormItem>
       <!-- </Row> -->
       <FormItem v-show="formConfig.labelLayout === 'flex'" label="标签宽度（px）">
-        <InputNumber v-model:value="formConfig.labelWidth" :style="{ width: '100%' }" :min="0" :step="1" />
+        <InputNumber
+          v-model:value="formConfig.labelWidth"
+          :style="{ width: '100%' }"
+          :min="0"
+          :step="1"
+        />
       </FormItem>
       <div v-if="formConfig.labelLayout === 'Grid'">
         <FormItem label="labelCol">
@@ -83,28 +79,28 @@ export default defineComponent({
         </FormItem>
 
         <FormItem label="标签对齐">
-          <RadioGroup v-model:value="formConfig.labelAlign" button-style="solid">
-            <RadioButton value="left">
+          <Radio.Group v-model:value="formConfig.labelAlign" button-style="solid">
+            <Radio.Button value="left">
               靠左
-            </RadioButton>
-            <RadioButton value="right">
+            </Radio.Button>
+            <Radio.Button value="right">
               靠右
-            </RadioButton>
-          </RadioGroup>
+            </Radio.Button>
+          </Radio.Group>
         </FormItem>
 
         <FormItem label="控件大小">
-          <RadioGroup v-model:value="formConfig.size" button-style="solid">
-            <RadioButton value="default">
+          <Radio.Group v-model:value="formConfig.size" button-style="solid">
+            <Radio.Button value="default">
               默认
-            </RadioButton>
-            <RadioButton value="small">
+            </Radio.Button>
+            <Radio.Button value="small">
               小
-            </RadioButton>
-            <RadioButton value="large">
+            </Radio.Button>
+            <Radio.Button value="large">
               大
-            </RadioButton>
-          </RadioGroup>
+            </Radio.Button>
+          </Radio.Group>
         </FormItem>
       </div>
       <FormItem label="表单属性">
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue
index 26b1805..e7e5a48 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue
@@ -1,8 +1,8 @@
 <!--
  * @Description: 导入JSON模板
 -->
-<script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
 
 // import message from '../../../utils/message';
 import { Modal, Upload } from 'ant-design-vue'
@@ -14,21 +14,13 @@ import { formItemsForEach, generateKey } from '../../../utils'
 import { CodeEditor, MODE } from '@/components/CodeEditor'
 import { useMessage } from '@/hooks/web/useMessage'
 
-export default defineComponent({
-  name: 'ImportJsonModal',
-  components: {
-    CodeEditor,
-    Upload,
-    Modal,
-  },
-  setup() {
-    const { createMessage } = useMessage()
+const { createMessage } = useMessage()
 
-    const myEditor = ref(null)
+const myEditor = ref(null)
 
-    const state = reactive({
-      open: false,
-      json: `{
+const state = reactive({
+  open: false,
+  json: `{
         "schemas": [
           {
             "component": "input",
@@ -46,67 +38,57 @@ export default defineComponent({
         "labelCol": {},
         "wrapperCol": {}
       }`,
-      jsonData: {
-        schemas: {},
-        config: {},
-      },
-      handleSetSelectItem: null,
-    })
-    const { formDesignMethods } = useFormDesignState()
-    const handleCancel = () => {
-      state.open = false
-    }
-    const showModal = () => {
-      state.open = true
-    }
-    const handleImportJson = () => {
-      // 导入JSON
-      try {
-        const editorJsonData = JSON.parse(state.json) as IFormConfig
-        editorJsonData.schemas
-          && formItemsForEach(editorJsonData.schemas, (formItem) => {
-            generateKey(formItem)
-          })
-        formDesignMethods.setFormConfig({
-          ...editorJsonData,
-          activeKey: 1,
-          currentItem: { component: '' },
-        })
-        handleCancel()
-        createMessage.success('导入成功')
-      }
-      catch {
-        createMessage.error('导入失败，数据格式不对')
-      }
-    }
-    const beforeUpload = (e: File) => {
-      // 通过json文件导入
-      const reader = new FileReader()
-      reader.readAsText(e)
-      reader.onload = function () {
-        state.json = this.result as string
-        handleImportJson()
-      }
-      return false
-    }
-
-    return {
-      myEditor,
-      handleImportJson,
-      beforeUpload,
-      handleCancel,
-      showModal,
-      ...toRefs(state),
-      MODE,
-    }
+  jsonData: {
+    schemas: {},
+    config: {},
   },
+  handleSetSelectItem: null,
 })
+const { formDesignMethods } = useFormDesignState()
+function handleCancel() {
+  state.open = false
+}
+function showModal() {
+  state.open = true
+}
+function handleImportJson() {
+  // 导入JSON
+  try {
+    const editorJsonData = JSON.parse(state.json) as IFormConfig
+    editorJsonData.schemas
+            && formItemsForEach(editorJsonData.schemas, (formItem) => {
+              generateKey(formItem)
+            })
+    formDesignMethods.setFormConfig({
+      ...editorJsonData,
+      activeKey: 1,
+      currentItem: { component: '' },
+    })
+    handleCancel()
+    createMessage.success('导入成功')
+  }
+  catch {
+    createMessage.error('导入失败，数据格式不对')
+  }
+}
+function beforeUpload(e: File) {
+  // 通过json文件导入
+  const reader = new FileReader()
+  reader.readAsText(e)
+  reader.onload = function () {
+    state.json = this.result as string
+    handleImportJson()
+  }
+  return false
+}
+
+defineExpose({ showModal })
 </script>
 
 <template>
   <Modal
     title="JSON数据"
-    :open="open"
+    :open="state.open"
     cancel-text="关闭"
     :destroy-on-close="true"
     wrap-class-name="v-code-modal"
@@ -126,7 +108,12 @@ export default defineComponent({
       <a-button @click="handleCancel">
         取消
       </a-button>
-      <Upload class="upload-button" :before-upload="beforeUpload" :show-upload-list="false" accept="application/json">
+      <Upload
+        class="upload-button"
+        :before-upload="beforeUpload"
+        :show-upload-list="false"
+        accept="application/json"
+      >
         <a-button type="primary">
           导入json文件
         </a-button>
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue
index 7ecb7a9..cda46af 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue
@@ -1,59 +1,51 @@
 <!--
  * @Description: 渲染JSON数据
 -->
-<script lang="ts">
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+<script lang="ts" setup>
+import { computed, reactive } from 'vue'
 import { Modal } from 'ant-design-vue'
 import type { IFormConfig } from '../../../typings/v-form-component'
 import { formatRules, removeAttrs } from '../../../utils'
 import PreviewCode from './PreviewCode.vue'
 
-export default defineComponent({
-  name: 'JsonModal',
-  components: {
-    PreviewCode,
-    Modal,
-  },
-  emits: ['cancel'],
-  setup(_props, { emit }) {
-    const state = reactive<{
-      open: boolean
-      jsonData: IFormConfig
-    }>({
-      open: false, // 控制json数据弹框显示
-      jsonData: {} as IFormConfig, // json数据
-    })
-    /**
+const emit = defineEmits(['cancel'])
+
+const state = reactive<{
+  open: boolean
+  jsonData: IFormConfig
+}>({
+  open: false, // 控制json数据弹框显示
+  jsonData: {} as IFormConfig, // json数据
+})
+/**
      * 显示Json数据弹框
      * @param jsonData
      */
-    const showModal = (jsonData: IFormConfig) => {
-      formatRules(jsonData.schemas)
-      state.jsonData = jsonData
-      state.open = true
-    }
+function showModal(jsonData: IFormConfig) {
+  formatRules(jsonData.schemas)
+  state.jsonData = jsonData
+  state.open = true
+}
 
-    // 计算json数据
-    const editorJson = computed(() => {
-      return JSON.stringify(removeAttrs(state.jsonData), null, '\t')
-    })
+// 计算json数据
+const editorJson = computed(() => {
+  return JSON.stringify(removeAttrs(state.jsonData), null, '\t')
+})
 
-    // 关闭弹框
-    const handleCancel = () => {
-      state.open = false
-      emit('cancel')
-    }
+// 关闭弹框
+function handleCancel() {
+  state.open = false
+  emit('cancel')
+}
 
-    return { ...toRefs(state), editorJson, handleCancel, showModal }
-  },
-})
+defineExpose({ showModal })
 </script>
 
 <template>
   <Modal
     title="JSON数据"
     :footer="null"
-    :open="open"
+    :open="state.open"
     :destroy-on-close="true"
     wrap-class-name="v-code-modal"
     style="top: 20px"
diff --git a/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue b/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue
index 9ae1c1b..171564a 100644
--- a/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue
@@ -73,7 +73,13 @@ export default defineComponent({
       <CodeEditor ref="myEditor" :value="editorJson" :mode="MODE.JSON" />
     </div>
     <div class="copy-btn-box">
-      <a-button type="primary" class="copy-btn" data-clipboard-action="copy" :data-clipboard-text="editorJson" @click="handleCopyJson">
+      <a-button
+        type="primary"
+        class="copy-btn"
+        data-clipboard-action="copy"
+        :data-clipboard-text="editorJson"
+        @click="handleCopyJson"
+      >
         复制数据
       </a-button>
       <a-button type="primary" @click="handleExportJson">
diff --git a/src/components/FormDesign/src/components/VFormDesign/config/formItemPropsConfig.ts b/src/components/FormDesign/src/components/VFormDesign/config/formItemPropsConfig.ts
index f286f6f..1a242ed 100644
--- a/src/components/FormDesign/src/components/VFormDesign/config/formItemPropsConfig.ts
+++ b/src/components/FormDesign/src/components/VFormDesign/config/formItemPropsConfig.ts
@@ -183,7 +183,9 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     label: '控件-FormItem',
     component: 'Select',
     componentProps: {
-      options: baseComponents.concat(customComponents).map(item => ({ value: item.component, label: item.label })),
+      options: baseComponents
+        .concat(customComponents)
+        .map(item => ({ value: item.component, label: item.label })),
     },
   },
   {
diff --git a/src/components/FormDesign/src/components/VFormDesign/index.vue b/src/components/FormDesign/src/components/VFormDesign/index.vue
index 0fb99c9..c9eb7ba 100644
--- a/src/components/FormDesign/src/components/VFormDesign/index.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/index.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { type Ref, provide, ref } from 'vue'
+import type { Ref } from 'vue'
+import { provide, ref } from 'vue'
 import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue'
-
 import { cloneDeep } from 'lodash-es'
-import { type UseRefHistoryReturn, useRefHistory } from '@vueuse/core'
+import type { UseRefHistoryReturn } from '@vueuse/core'
+import { useRefHistory } from '@vueuse/core'
 import VFormPreview from '../VFormPreview/index.vue'
 import VFormPreview2 from '../VFormPreview/useForm.vue'
 import type { IFormConfig, IVFormComponent, PropsTabKey } from '../../typings/v-form-component'
@@ -13,18 +14,14 @@ import type { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typ
 import CollapseItem from './modules/CollapseItem.vue'
 import FormComponentPanel from './modules/FormComponentPanel.vue'
 import JsonModal from './components/JsonModal.vue'
-
 import Toolbar from './modules/Toolbar.vue'
 import PropsPanel from './modules/PropsPanel.vue'
 import ImportJsonModal from './components/ImportJsonModal.vue'
 import CodeModal from './components/CodeModal.vue'
-
-import 'codemirror/mode/javascript/javascript'
-
 import { globalConfigState } from './config/formItemPropsConfig'
 import { useDesign } from '@/hooks/web/useDesign'
-
 import { CollapseContainer } from '@/components/Container/index'
+import 'codemirror/mode/javascript/javascript'
 
 defineProps({
   title: {
@@ -94,7 +91,9 @@ const historyReturn = useRefHistory(formConfig, {
  */
 function handleSetSelectItem(schema: IVFormComponent) {
   formConfig.value.currentItem = schema
-  handleChangePropsTabs(schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1)
+  handleChangePropsTabs(
+    schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1,
+  )
 }
 
 function setGlobalConfigState(formItem: IVFormComponent) {
@@ -154,7 +153,8 @@ function copyFormItem(formItem: IVFormComponent) {
  * @param item {IVFormComponent} 当前点击的组件
  * @param isCopy {boolean} 是否复制
  */
-function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFormComponent, isCopy = true) {
+function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFormComponent,
+  isCopy = true) {
   const key = formConfig.value.currentItem?.key
   /**
    * 遍历当表单项配置，如果是复制，则复制一份表单项，如果不是复制，则直接添加到表单项中
@@ -165,7 +165,9 @@ function handleCopy(item: IVFormComponent = formConfig.value.currentItem as IVFo
     schemas.some((formItem: IVFormComponent, index: number) => {
       if (formItem.key === key) {
         // 判断是不是复制
-        isCopy ? schemas.splice(index, 0, copyFormItem(formItem)) : schemas.splice(index + 1, 0, item)
+        isCopy
+          ? schemas.splice(index, 0, copyFormItem(formItem))
+          : schemas.splice(index + 1, 0, item)
         const event = {
           newIndex: index + 1,
         }
@@ -254,7 +256,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
       collapsed-width="0"
       width="270"
       :zero-width-trigger-style="{
-        'margin-top': '-70px',
+        'margin-top': '-60px',
         'background-color': 'gray',
       }"
       breakpoint="md"
@@ -293,7 +295,11 @@ provide<IFormDesignMethods>('formDesignMethods', {
         @handle-open-code-modal="handleOpenModal(codeModal!)"
         @handle-clear-form-items="handleClearFormItems"
       />
-      <FormComponentPanel :current-item="formConfig.currentItem" :data="formConfig" @handle-set-select-item="handleSetSelectItem" />
+      <FormComponentPanel
+        :current-item="formConfig.currentItem"
+        :data="formConfig"
+        @handle-set-select-item="handleSetSelectItem"
+      />
     </LayoutContent>
     <LayoutSider
       :class="`right ${prefixCls}-sider`"
@@ -301,12 +307,15 @@ provide<IFormDesignMethods>('formDesignMethods', {
       :reverse-arrow="true"
       collapsed-width="0"
       width="270"
-      :zero-width-trigger-style="{ 'margin-top': '-70px', 'background-color': 'gray' }"
+      :zero-width-trigger-style="{ 'margin-top': '-60px', 'background-color': 'gray' }"
       breakpoint="lg"
     >
       <PropsPanel ref="propsPanel" :active-key="formConfig.activeKey">
         <template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
-          <slot :name="`${item.component}Props`" v-bind="{ formItem: data, props: data.componentProps }" />
+          <slot
+            :name="`${item.component}Props`"
+            v-bind="{ formItem: data, props: data.componentProps }"
+          />
         </template>
       </PropsPanel>
     </LayoutSider>
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
index ff2881c..acb7e69 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
@@ -2,24 +2,25 @@
 import { defineComponent, reactive } from 'vue'
 import draggable from 'vuedraggable'
 import type { IVFormComponent } from '../../../typings/v-form-component'
-
-// import { toRefs } from '@vueuse/core';
 import { Icon } from '@/components/Icon'
+import { useDesign } from '@/hooks/web/useDesign'
 
 export default defineComponent({
   name: 'CollapseItem',
   components: { Draggable: draggable, Icon },
   props: {
     list: {
-      type: [Array] as PropType<IVFormComponent[]>,
+      type: [Array],
       default: () => [],
     },
     handleListPush: {
-      type: Function as PropType<(item: IVFormComponent) => void>,
+      type: Function,
       default: null,
     },
   },
   setup(props, { emit }) {
+    const { prefixCls } = useDesign('form-design-collapse-item')
+
     const state = reactive({})
     const handleStart = (e: any, list1: IVFormComponent[]) => {
       emit('start', list1[e.oldIndex].component)
@@ -32,13 +33,13 @@ export default defineComponent({
     const cloneItem = (one) => {
       return props.handleListPush(one)
     }
-    return { state, handleStart, handleAdd, cloneItem }
+    return { prefixCls, state, handleStart, handleAdd, cloneItem }
   },
 })
 </script>
 
 <template>
-  <div>
+  <div :class="prefixCls">
     <Draggable
       tag="ul"
       :model-value="list"
@@ -54,7 +55,11 @@ export default defineComponent({
       @add="handleAdd"
     >
       <template #item="{ element, index }">
-        <li class="bs-box text-ellipsis" @dragstart="$emit('add-attrs', list, index)" @click="$emit('handle-list-push', element)">
+        <li
+          class="bs-box text-ellipsis"
+          @dragstart="$emit('add-attrs', list, index)"
+          @click="$emit('handle-list-push', element)"
+        >
           <!-- <svg v-if="element.icon.indexOf('icon-') > -1" class="icon" aria-hidden="true">
             <use :xlink:href="`#${element.icon}`" />
           </svg> -->
@@ -67,34 +72,42 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
-@import url('../styles/variable.less');
+  @prefix-cls: ~'@{namespace}-form-design-collapse-item';
+
+  @import url('../styles/variable.less');
 
-ul {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 5px;
-  margin-bottom: 0;
-  list-style: none;
-  // background: #efefef;
+  .@{prefix-cls} {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 5px;
+      margin-bottom: 0;
+      list-style: none;
+      // background: #efefef;
 
-  li {
-    width: calc(50% - 6px);
-    height: 36px;
-    padding: 8px 12px;
-    margin: 2.7px;
-    line-height: 20px;
-    cursor: move;
-    border: 1px solid var(--border-color);
-    border-radius: 3px;
-    transition: all 0.3s;
+      li {
+        width: calc(50% - 6px);
+        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;
+        &:hover {
+          position: relative;
+          color: @primary-color;
+          border: 1px solid @primary-color;
+          // z-index: 1;
+          box-shadow: 0 2px 6px @primary-color;
+        }
+      }
     }
-  }
-}
 
-svg {
-  display: inline !important;
-}
+    svg {
+      display: inline !important;
+    }
+  }
 </style>
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue b/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
index db1c4d1..f9a593c 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
@@ -7,8 +7,8 @@ import draggable from 'vuedraggable'
 import { computed, defineComponent } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { Empty, Form } from 'ant-design-vue'
-import LayoutItem from '../components/LayoutItem.vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
+import LayoutItem from '../components/LayoutItem.vue'
 
 export default defineComponent({
   name: 'FormComponentPanel',
@@ -20,12 +20,12 @@ export default defineComponent({
   },
   emits: ['handleSetSelectItem'],
   setup(_, { emit }) {
-    const { formConfig } = useFormDesignState() as Recordable
+    const { formConfig } = useFormDesignState()
 
     /**
-     * 拖拽完成事件
-     * @param newIndex
-     */
+       * 拖拽完成事件
+       * @param newIndex
+       */
     const addItem = ({ newIndex }: any) => {
       formConfig.value.schemas = formConfig.value.schemas || []
 
@@ -35,9 +35,9 @@ export default defineComponent({
     }
 
     /**
-     * 拖拽开始事件
-     * @param e {Object} 事件对象
-     */
+       * 拖拽开始事件
+       * @param e {Object} 事件对象
+       */
     const handleDragStart = (e: any) => {
       emit('handleSetSelectItem', formConfig.value.schemas[e.oldIndex])
     }
@@ -61,7 +61,11 @@ export default defineComponent({
 
 <template>
   <div class="form-panel v-form-container">
-    <Empty v-show="formConfig.schemas.length === 0" class="empty-text" description="从左侧选择控件添加" />
+    <Empty
+      v-show="formConfig.schemas.length === 0"
+      class="empty-text"
+      description="从左侧选择控件添加"
+    />
     <Form v-bind="formConfig">
       <div class="draggable-box">
         <Draggable
@@ -77,7 +81,12 @@ export default defineComponent({
           @start="handleDragStart"
         >
           <template #item="{ element }">
-            <LayoutItem class="drag-move" :schema="element" :data="formConfig" :current-item="formConfig.currentItem || {}" />
+            <LayoutItem
+              class="drag-move"
+              :schema="element"
+              :data="formConfig"
+              :current-item="formConfig.currentItem || {}"
+            />
           </template>
         </Draggable>
       </div>
@@ -86,73 +95,72 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
-@import url('../styles/variable.less');
-@import url('../styles/drag.less');
-
-.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%;
+  @import url('../styles/variable.less');
+  @import url('../styles/drag.less');
+
+  .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-item-control-wrapper {
-      min-width: 175px !important;
+      .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);
-    overflow: auto;
-
-    .drag-move {
-      min-height: 62px;
-      cursor: move;
+  .form-panel {
+    position: relative;
+    height: 100%;
+
+    .empty-text {
+      position: absolute;
+      inset: -10% 0 0;
+      z-index: 100;
+      height: 150px;
+      margin: auto;
+      color: #aaa;
     }
 
-    .list-main {
-      // height: 100%;
-      // overflow: auto;
-      // 列表动画
-      .list-enter-active {
-        transition: all 0.5s;
-      }
-
-      .list-leave-active {
-        transition: all 0.3s;
-      }
+    .draggable-box {
+      height: calc(100vh - 200px);
+      // width: 100%;
+      overflow: auto;
 
-      .list-enter,
-      .list-leave-to {
-        opacity: 0;
-        transform: translateX(-100px);
+      .drag-move {
+        min-height: 62px;
+        cursor: move;
       }
 
-      .list-enter {
-        height: 30px;
+      .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>
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue b/src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue
index a57d482..53bc796 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue
@@ -28,7 +28,9 @@ export default defineComponent({
   setup() {
     const { formConfig } = useFormDesignState()
     const slotProps = computed(() => {
-      return customComponents.find(item => item.component === formConfig.value.currentItem?.component)
+      return customComponents.find(
+        item => item.component === formConfig.value.currentItem?.component,
+      )
     })
     return { formConfig, customComponents, slotProps }
   },
@@ -56,43 +58,43 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
-@import url('../styles/variable.less');
+  @import url('../styles/variable.less');
 
-:deep(.ant-tabs) {
-  box-sizing: border-box;
+  :deep(.ant-tabs) {
+    box-sizing: border-box;
 
-  form {
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 50px);
-    margin-right: 10px;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
+    form {
+      position: absolute;
+      width: 100%;
+      height: calc(100% - 50px);
+      margin-right: 10px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
 
-  .hint-box {
-    margin-top: 200px;
-  }
+    .hint-box {
+      margin-top: 200px;
+    }
 
-  .ant-form-item,
-  .ant-slider-with-marks {
-    margin-right: 20px;
-    margin-bottom: 0;
-    margin-left: 10px;
-  }
+    .ant-form-item,
+    .ant-slider-with-marks {
+      margin-right: 20px;
+      margin-bottom: 0;
+      margin-left: 10px;
+    }
 
-  .ant-form-item {
-    // width: 100%;
-    margin-bottom: 0;
+    .ant-form-item {
+      // width: 100%;
+      margin-bottom: 0;
 
-    .ant-form-item-label {
-      line-height: 2;
-      vertical-align: text-top;
+      .ant-form-item-label {
+        line-height: 2;
+        vertical-align: text-top;
+      }
     }
-  }
 
-  .ant-input-number {
-    width: 100%;
+    .ant-input-number {
+      width: 100%;
+    }
   }
-}
 </style>
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
index f92f621..a9d482f 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
@@ -6,7 +6,7 @@ import { defineComponent, inject, reactive, toRefs } from 'vue'
 import type { UseRefHistoryReturn } from '@vueuse/core'
 import { Divider, Tooltip } from 'ant-design-vue'
 import type { IFormConfig } from '../../../typings/v-form-component'
-import Icon from '@/components/Icon/index'
+import { Icon } from '@/components/Icon'
 
 interface IToolbarsConfig {
   type: string
@@ -100,34 +100,38 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
-//noinspection CssUnknownTarget
-@import url('../styles/variable.less');
+  //noinspection CssUnknownTarget
+  @import url('../styles/variable.less');
 
-.operating-area {
-  display: flex;
-  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 var(--border-color);
+  .operating-area {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    height: @operating-area-height;
+    padding: 0 12px;
+    padding-left: 40px;
+    font-size: 16px;
+    line-height: @operating-area-height;
+    text-align: left;
+    border-bottom: 2px solid @border-color;
 
-  a {
-    margin: 0 5px;
-    color: #666;
+    a {
+      margin: 0 5px;
+      color: #666;
 
-    &.disabled,
-    &.disabled:hover {
-      color: #ccc;
-    }
+      &.disabled,
+      &.disabled:hover {
+        color: #ccc;
+      }
+
+      &:hover {
+        color: @primary-color;
+      }
 
-    > span {
-      padding-left: 2px;
-      font-size: 14px;
+      > span {
+        padding-left: 2px;
+        font-size: 14px;
+      }
     }
   }
-}
 </style>
diff --git a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
index 8a48910..0f80634 100644
--- a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
+++ b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
@@ -2,7 +2,6 @@
   height: 100%;
   overflow: auto;
 
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :deep(.list-main) {
     position: relative;
     padding: 5px;
@@ -17,12 +16,13 @@
       overflow: hidden;
 
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: 0;
         width: 100%;
         height: 5px;
-        content: "";
+        background-color: @primary-color;
       }
     }
 
@@ -34,19 +34,25 @@
       overflow: hidden;
       transition: all 0.3s;
 
+      &:hover {
+        background-color: @primary-hover-bg-color;
+      }
+
       // 选择时 start
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: -100%;
         width: 100%;
         height: 5px;
-        content: "";
         transition: all 0.3s;
+        background-color: @primary-color;
       }
 
       &.active {
         outline-offset: 0;
+        background-color: @primary-hover-bg-color;
 
         &::before {
           right: 0;
@@ -60,18 +66,18 @@
         word-wrap: break-word;
 
         &::before {
+          content: '';
           position: absolute;
           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;
         }
       }
 
@@ -80,8 +86,9 @@
         position: absolute;
         right: 5px;
         bottom: 2px;
-        font-size: 14px;
         // z-index: 999;
+        color: @primary-color;
+        font-size: 14px;
       }
 
       .copy,
@@ -90,15 +97,15 @@
         top: 0;
         width: 30px;
         height: 30px;
-        line-height: 30px;
-        color: #fff;
-        text-align: center;
         // z-index: 989;
         transition: all 0.3s;
+        color: #fff;
+        line-height: 30px;
+        text-align: center;
 
         &.unactivated {
-          pointer-events: none;
           opacity: 0 !important;
+          pointer-events: none;
         }
 
         &.active {
@@ -109,10 +116,12 @@
       .copy {
         right: 30px;
         border-radius: 0 0 0 8px;
+        background-color: @primary-color;
       }
 
       .delete {
         right: 0;
+        background-color: @primary-color;
       }
     }
 
@@ -122,17 +131,17 @@
       width: 100%;
       padding: 5px;
       overflow: hidden;
-      background-color: @layout-background-color;
       transition: all 0.3s;
+      background-color: @layout-background-color;
 
       .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;
         }
       }
 
@@ -157,19 +166,19 @@
 
       // 选择时 start
       &::before {
+        content: '';
         position: absolute;
         top: 0;
         right: -100%;
         width: 100%;
         height: 5px;
-        content: "";
-        background: transparent;
         transition: all 0.3s;
+        background: transparent;
       }
 
       &.active {
-        background-color: @layout-hover-bg-color;
         outline-offset: 0;
+        background-color: @layout-hover-bg-color;
 
         &::before {
           right: 0;
@@ -184,15 +193,15 @@
           top: 0;
           width: 30px;
           height: 30px;
-          line-height: 30px;
-          color: #fff;
-          text-align: center;
           // z-index: 989;
           transition: all 0.3s;
+          color: #fff;
+          line-height: 30px;
+          text-align: center;
 
           &.unactivated {
-            pointer-events: none;
             opacity: 0 !important;
+            pointer-events: none;
           }
 
           &.active {
@@ -202,8 +211,8 @@
 
         > .copy {
           right: 30px;
-          background-color: @layout-color;
           border-radius: 0 0 0 8px;
+          background-color: @layout-color;
         }
 
         > .delete {
diff --git a/src/components/FormDesign/src/components/VFormItem/index.vue b/src/components/FormDesign/src/components/VFormItem/index.vue
index 7d2fa27..cdccfa5 100644
--- a/src/components/FormDesign/src/components/VFormItem/index.vue
+++ b/src/components/FormDesign/src/components/VFormItem/index.vue
@@ -1,166 +1,143 @@
 <!--
  * @Description:
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, defineComponent, reactive, toRefs, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { asyncComputed } from '@vueuse/core'
 import { omit } from 'lodash-es'
 import { Col, Divider, FormItem, Tooltip } from 'ant-design-vue'
 import { componentMap } from '../../core/formItemConfig'
 import type { IFormConfig, IVFormComponent } from '../../typings/v-form-component'
 import { handleAsyncOptions } from '../../utils'
-
-// import FormItem from '/@/components/Form/src/components/FormItem.vue';
-
 import { useFormModelState } from '../../hooks/useFormDesignState'
 import { Icon } from '@/components/Icon'
 
-export default defineComponent({
-  name: 'VFormItem',
-  components: {
-    Tooltip,
-    Icon,
-    FormItem,
-    Divider,
-    Col,
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: () => ({}),
   },
-
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({}),
-    },
-    schema: {
-      type: Object as PropType<IVFormComponent>,
-      required: true,
-    },
-    formConfig: {
-      type: Object as PropType<IFormConfig>,
-      required: true,
-    },
+  schema: {
+    type: Object as PropType<IVFormComponent>,
+    required: true,
   },
-  emits: ['update:form-data', 'change'],
-  setup(props, { emit }) {
-    const state = reactive({
-      componentMap,
-    })
-
-    const { formModel: formData1, setFormModel } = useFormModelState()
-    const colPropsComputed = computed(() => {
-      const { colProps = {} } = props.schema
-      return colProps
-    })
-    const formItemProps = computed(() => {
-      const { formConfig } = unref(props)
-      let { field, required, rules, labelCol, wrapperCol } = unref(props.schema)
-      const { colon } = props.formConfig
-
-      const { itemProps } = unref(props.schema)
-
-      // <editor-fold desc="布局属性">
-      labelCol = labelCol || (formConfig.layout === 'horizontal'
-        ? formConfig.labelLayout === 'flex'
-          ? { style: `width:${formConfig.labelWidth}px` }
-          : formConfig.labelCol
-        : {})
-
-      wrapperCol = wrapperCol || (formConfig.layout === 'horizontal'
-        ? formConfig.labelLayout === 'flex'
-          ? { style: 'width:auto;flex:1' }
-          : formConfig.wrapperCol
-        : {})
-
-      const style = formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex' ? { display: 'flex' } : {}
-
-      /**
+  formConfig: {
+    type: Object as PropType<IFormConfig>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:form-data', 'change'])
+
+const { formModel: formData1, setFormModel } = useFormModelState()
+const colPropsComputed = computed(() => {
+  const { colProps = {} } = props.schema
+  return colProps
+})
+const formItemProps = computed(() => {
+  const { formConfig } = unref(props)
+  let { field, required, rules, labelCol, wrapperCol } = unref(props.schema)
+  const { colon } = props.formConfig
+
+  const { itemProps } = unref(props.schema)
+
+  // <editor-fold desc="布局属性">
+  labelCol = labelCol || (formConfig.layout === 'horizontal'
+    ? formConfig.labelLayout === 'flex'
+      ? { style: `width:${formConfig.labelWidth}px` }
+      : formConfig.labelCol
+    : {})
+
+  wrapperCol = wrapperCol || (formConfig.layout === 'horizontal'
+    ? formConfig.labelLayout === 'flex'
+      ? { style: 'width:auto;flex:1' }
+      : formConfig.wrapperCol
+    : {})
+
+  const style
+          = formConfig.layout === 'horizontal' && formConfig.labelLayout === 'flex'
+            ? { display: 'flex' }
+            : {}
+
+  /**
        * 将字符串正则格式化成正则表达式
        */
 
-      const newConfig = Object.assign(
-        {},
-        {
-          name: field,
-          style: { ...style },
-          colon,
-          required,
-          rules,
-          labelCol,
-          wrapperCol,
-        },
-        itemProps,
-      )
-      if (!itemProps?.labelCol?.span)
-        newConfig.labelCol = labelCol
-
-      if (!itemProps?.wrapperCol?.span)
-        newConfig.wrapperCol = wrapperCol
-
-      if (!itemProps?.rules)
-        newConfig.rules = rules
-
-      return newConfig
-    }) as Recordable
-
-    const componentItem = computed(() => componentMap.get(props.schema.component as string))
-
-    // console.log('component change:', props.schema.component, componentItem.value);
-    const handleClick = (schema: IVFormComponent) => {
-      if (schema.component === 'Button' && schema.componentProps?.handle)
-        emit(schema.componentProps?.handle)
-    }
-    /**
+  const newConfig = Object.assign(
+    {},
+    {
+      name: field,
+      style: { ...style },
+      colon,
+      required,
+      rules,
+      labelCol,
+      wrapperCol,
+    },
+    itemProps,
+  )
+  if (!itemProps?.labelCol?.span)
+    newConfig.labelCol = labelCol
+
+  if (!itemProps?.wrapperCol?.span)
+    newConfig.wrapperCol = wrapperCol
+
+  if (!itemProps?.rules)
+    newConfig.rules = rules
+
+  return newConfig
+}) as Recordable<any>
+
+const componentItem = computed(() => componentMap.get(props.schema.component as string))
+
+// console.log('component change:', props.schema.component, componentItem.value);
+function handleClick(schema: IVFormComponent) {
+  if (schema.component === 'Button' && schema.componentProps?.handle)
+    emit(schema.componentProps?.handle)
+}
+/**
      * 处理异步属性，异步属性会导致一些属性渲染错误，如defaultValue异步加载会导致渲染不出来，故而此处只处理options，treeData，同步属性在cmpProps中处理
      */
-    const asyncProps = asyncComputed(async () => {
-      let { options, treeData } = props.schema.componentProps ?? {}
-      if (options)
-        options = await handleAsyncOptions(options)
-      if (treeData)
-        treeData = await handleAsyncOptions(treeData)
-      return {
-        options,
-        treeData,
-      }
-    })
-
-    /**
+const asyncProps = asyncComputed(async () => {
+  let { options, treeData } = props.schema.componentProps ?? {}
+  if (options)
+    options = await handleAsyncOptions(options)
+  if (treeData)
+    treeData = await handleAsyncOptions(treeData)
+  return {
+    options,
+    treeData,
+  }
+})
+
+/**
      * 处理同步属性
      */
-    const cmpProps = computed(() => {
-      const isCheck = props.schema && ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
-      const { field } = props.schema
-
-      let { disabled, ...attrs } = omit(props.schema.componentProps, ['options', 'treeData']) ?? {}
-
-      disabled = props.formConfig.disabled || disabled
-
-      return {
-        ...attrs,
-        disabled,
-        [isCheck ? 'checked' : 'value']: formData1.value[field!],
-      }
-    })
-
-    const handleChange = function (e) {
-      const isCheck = ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
-      const target = e ? e.target : null
-      const value = target ? (isCheck ? target.checked : target.value) : e
-      setFormModel(props.schema.field!, value)
-      emit('change', value)
-    }
-    return {
-      ...toRefs(state),
-      componentItem,
-      formItemProps,
-      handleClick,
-      asyncProps,
-      cmpProps,
-      handleChange,
-      colPropsComputed,
-    }
-  },
+const cmpProps = computed(() => {
+  const isCheck
+          = props.schema && ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
+  const { field } = props.schema
+
+  let { disabled, ...attrs }
+          = omit(props.schema.componentProps, ['options', 'treeData']) ?? {}
+
+  disabled = props.formConfig.disabled || disabled
+
+  return {
+    ...attrs,
+    disabled,
+    [isCheck ? 'checked' : 'value']: formData1.value[field!],
+  }
 })
+
+const handleChange = function (e) {
+  const isCheck = ['Switch', 'Checkbox', 'Radio'].includes(props.schema.component)
+  const target = e ? e.target : null
+  const value = target ? (isCheck ? target.checked : target.value) : e
+  setFormModel(props.schema.field!, value)
+  emit('change', value)
+}
 </script>
 
 <template>
@@ -176,8 +153,14 @@ export default defineComponent({
         </Tooltip>
       </template>
 
-      <slot v-if="schema.componentProps && schema.componentProps?.slotName" :name="schema.componentProps.slotName" v-bind="schema" />
-      <Divider v-else-if="schema.component === 'Divider' && schema.label && !formItemProps.hiddenLabel">
+      <slot
+        v-if="schema.componentProps && schema.componentProps?.slotName"
+        :name="schema.componentProps.slotName"
+        v-bind="schema"
+      />
+      <Divider
+        v-else-if="schema.component === 'Divider' && schema.label && !formItemProps.hiddenLabel"
+      >
         {{ schema.label }}
       </Divider>
       <!-- 部分控件需要一个空div -->
@@ -199,20 +182,20 @@ export default defineComponent({
 </template>
 
 <style lang="less" scoped>
-.ml-5 {
-  margin-left: 5px;
-}
-
-// form字段中的标签有ant-col，不能使用width:100%
-:deep(.ant-col) {
-  width: auto;
-}
-
-.ant-form-item:not(.ant-form-item-with-help) {
-  margin-bottom: 20px;
-}
-
-// .w-full {
-//   width: 100% !important;
-// }
+  .ml-5 {
+    margin-left: 5px;
+  }
+
+  // form字段中的标签有ant-col，不能使用width:100%
+  :deep(.ant-col) {
+    width: auto;
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 20px;
+  }
+
+  // .w-full {
+  //   width: 100% !important;
+  // }
 </style>
diff --git a/src/components/FormDesign/src/components/VFormItem/vFormItem.vue b/src/components/FormDesign/src/components/VFormItem/vFormItem.vue
index 2c7f469..dccb744 100644
--- a/src/components/FormDesign/src/components/VFormItem/vFormItem.vue
+++ b/src/components/FormDesign/src/components/VFormItem/vFormItem.vue
@@ -11,59 +11,46 @@
   >
 -->
 
-<script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
 import type { IFormConfig, IVFormComponent } from '../../typings/v-form-component'
 import type { FormProps, FormSchema } from '@/components/Form'
 
-import FormItem from '/@/components/Form/src/components/FormItem.vue'
+import FormItem from '@/components/Form/src/components/FormItem.vue'
 
-export default defineComponent({
-  name: 'VFormItem',
-  components: {
-    FormItem,
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({}),
-    },
-    schema: {
-      type: Object as PropType<IVFormComponent>,
-      required: true,
-    },
-    formConfig: {
-      type: Object as PropType<IFormConfig>,
-      required: true,
-    },
+  schema: {
+    type: Object as PropType<IVFormComponent>,
+    required: true,
   },
-  setup(props) {
-    const schema = computed(() => {
-      const schema: FormSchema = {
-        ...unref(props.schema),
-      } as FormSchema
+  formConfig: {
+    type: Object as PropType<IFormConfig>,
+    required: true,
+  },
+})
 
-      return schema
-    })
+const schema = computed(() => {
+  const schema: FormSchema = {
+    ...unref(props.schema),
+  } as FormSchema
 
-    // Get the basic configuration of the form
-    const getProps = computed((): FormProps => {
-      return { ...unref(props.formConfig) } as FormProps
-    })
-    return {
-      schemaNew: schema,
-      getProps,
-    }
-  },
+  return schema
+})
+
+// Get the basic configuration of the form
+const getProps = computed((): FormProps => {
+  return { ...unref(props.formConfig) } as FormProps
 })
 </script>
 
 <template>
-  <FormItem :schema="schemaNew" :form-props="getProps">
+  <FormItem :schema="schema" :form-props="getProps">
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}" />
     </template>
   </FormItem>
 </template>
-
-<style lang="less" scoped></style>
diff --git a/src/components/FormDesign/src/components/VFormPreview/index.vue b/src/components/FormDesign/src/components/VFormPreview/index.vue
index 1add54d..2a569ca 100644
--- a/src/components/FormDesign/src/components/VFormPreview/index.vue
+++ b/src/components/FormDesign/src/components/VFormPreview/index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Description: 渲染组件，无法使用Vben的组件
 -->
-<script lang="ts">
-import { defineComponent, reactive, ref, toRefs } from 'vue'
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
 import { Modal } from 'ant-design-vue'
 import type { IFormConfig } from '../../typings/v-form-component'
 import type { IAnyObject } from '../../typings/base-type'
@@ -12,74 +12,57 @@ import type { IVFormMethods } from '../../hooks/useVFormMethods'
 import JsonModal from '../VFormDesign/components/JsonModal.vue'
 import type { IToolbarMethods } from '../../typings/form-type'
 
-export default defineComponent({
-  name: 'VFormPreview',
-  components: {
-    JsonModal,
-    VFormCreate,
-    Modal,
-  },
-  setup() {
-    const jsonModal = ref<IToolbarMethods | null>(null)
-    const state = reactive<{
-      formModel: IAnyObject
-      open: boolean
-      formConfig: IFormConfig
-      fApi: IVFormMethods
-    }>({
-      formModel: {},
-      formConfig: {} as IFormConfig,
-      open: false,
-      fApi: {} as IVFormMethods,
-    })
+const jsonModal = ref<IToolbarMethods | null>(null)
+const state = reactive<{
+  formModel: IAnyObject
+  open: boolean
+  formConfig: IFormConfig
+  fApi: IVFormMethods
+}>({
+  formModel: {},
+  formConfig: {} as IFormConfig,
+  open: false,
+  fApi: {} as IVFormMethods,
+})
 
-    /**
+/**
      * 显示Json数据弹框
      * @param jsonData
      */
-    const showModal = (jsonData: IFormConfig) => {
-      // console.log('showModal-', jsonData);
-      formatRules(jsonData.schemas)
-      state.formConfig = jsonData
-      state.open = true
-    }
+function showModal(jsonData: IFormConfig) {
+  // console.log('showModal-', jsonData);
+  formatRules(jsonData.schemas)
+  state.formConfig = jsonData
+  state.open = true
+}
 
-    /**
+/**
      * 获取表单数据
      * @return {Promise<void>}
      */
-    const handleCancel = () => {
-      state.open = false
-      state.formModel = {}
-    }
-    const handleGetData = async () => {
-      const _data = await state.fApi.submit?.()
-      jsonModal.value?.showModal?.(_data)
-    }
+function handleCancel() {
+  state.open = false
+  onCancel()
+}
+async function handleGetData() {
+  const _data = await state.fApi.submit?.()
+  jsonModal.value?.showModal?.(_data)
+}
 
-    const onSubmit = (_data: IAnyObject) => {
-      //
-    }
-    const onCancel = () => {
-      state.formModel = {}
-    }
-    return {
-      handleGetData,
-      handleCancel,
-      ...toRefs(state),
-      showModal,
-      jsonModal,
-      onSubmit,
-      onCancel,
-    }
-  },
-})
+function onSubmit(_data: IAnyObject) {
+  //
+}
+function onCancel() {
+  state.formModel = {}
+}
+
+defineExpose({ showModal, onCancel })
 </script>
 
 <template>
   <Modal
     title="预览(支持布局)"
-    :open="open"
+    :open="state.open"
     ok-text="获取数据"
     cancel-text="关闭"
     style="top: 20px"
@@ -88,7 +71,12 @@ export default defineComponent({
     @ok="handleGetData"
     @cancel="handleCancel"
   >
-    <VFormCreate v-model:fApi="fApi" v-model:formModel="formModel" :form-config="formConfig" @submit="onSubmit">
+    <VFormCreate
+      v-model:fApi="state.fApi"
+      v-model:formModel="state.formModel"
+      :form-config="state.formConfig"
+      @submit="onSubmit"
+    >
       <template #slotName="{ formModel, field }">
         <a-input v-model:value="formModel[field]" placeholder="我是插槽传递的输入框" />
       </template>
diff --git a/src/components/FormDesign/src/hooks/useFormInstanceMethods.ts b/src/components/FormDesign/src/hooks/useFormInstanceMethods.ts
index 8696548..461b319 100644
--- a/src/components/FormDesign/src/hooks/useFormInstanceMethods.ts
+++ b/src/components/FormDesign/src/hooks/useFormInstanceMethods.ts
@@ -1,11 +1,16 @@
-import { getCurrentInstance, toRaw } from 'vue'
 import type { Ref, SetupContext } from 'vue'
+import { getCurrentInstance, toRaw } from 'vue'
 import { cloneDeep, forOwn, isFunction } from 'lodash-es'
 import { Form } from 'ant-design-vue'
 import type { AForm, IVFormComponent } from '../typings/v-form-component'
 import type { IAnyObject } from '../typings/base-type'
 
-export function useFormInstanceMethods(props: IAnyObject, formdata, context: Partial<SetupContext>, _formInstance: Ref<AForm | null>) {
+export function useFormInstanceMethods(
+  props: IAnyObject,
+  formdata,
+  context: Partial<SetupContext>,
+  _formInstance: Ref<AForm | null>,
+) {
   /**
    * 绑定props和on中的上下文为parent
    */
@@ -13,8 +18,9 @@ export function useFormInstanceMethods(props: IAnyObject, formdata, context: Par
     const instance = getCurrentInstance()
     const vm = instance?.parent
     if (!vm)
-      return
-    ;(props.formConfig.schemas as IVFormComponent[]).forEach((item) => {
+      return;
+
+    (props.formConfig.schemas as IVFormComponent[]).forEach((item) => {
       // 绑定 props 中的上下文
       forOwn(item.componentProps, (value: any, key) => {
         if (isFunction(value))
@@ -35,7 +41,7 @@ export function useFormInstanceMethods(props: IAnyObject, formdata, context: Par
 
   const { resetFields, validate, clearValidate, validateField } = useForm(formdata, [])
 
-  const submit = () => {
+  const submit = async () => {
     // const _result = await validate();
 
     const data = cloneDeep(toRaw(formdata.value))
diff --git a/src/components/FormDesign/src/hooks/useVFormMethods.ts b/src/components/FormDesign/src/hooks/useVFormMethods.ts
index 17002c3..ec9f792 100644
--- a/src/components/FormDesign/src/hooks/useVFormMethods.ts
+++ b/src/components/FormDesign/src/hooks/useVFormMethods.ts
@@ -13,7 +13,11 @@ export interface IProps {
   formModel: IAnyObject
 }
 
-type ISet = <T extends keyof IVFormComponent>(field: string, key: T, value: IVFormComponent[T]) => void
+type ISet = <T extends keyof IVFormComponent>(
+  field: string,
+  key: T,
+  value: IVFormComponent[T],
+) => void
 // 获取当前field绑定的表单项
 type IGet = (field: string) => IVFormComponent | undefined
 // 获取field在formData中的值
@@ -59,7 +63,8 @@ export function useVFormMethods(
    * @param {string} field
    * @return {IVFormComponent | undefined}
    */
-  const get: IGet = field => findFormItem(props.formConfig.schemas, item => item.field === field)
+  const get: IGet = field =>
+    findFormItem(props.formConfig.schemas, item => item.field === field)
 
   /**
    * 根据表单field设置表单项字段值
@@ -73,6 +78,20 @@ export function useVFormMethods(
       formItem[key] = value
   }
 
+  /**
+   * 设置表单项的props
+   * @param {string} field 需要设置的表单项field
+   * @param {string} key 需要设置的key
+   * @param value 需要设置的值
+   */
+  const setProps: ISetProps = (field, key, value) => {
+    const formItem = get(field)
+    if (formItem?.componentProps) {
+      ['options', 'treeData'].includes(key) && setValue(field, undefined)
+
+      formItem.componentProps[key] = value
+    }
+  }
   /**
    * 设置字段的值，设置后触发校验
    * @param {string} field  需要设置的字段
@@ -92,20 +111,6 @@ export function useVFormMethods(
       })
     }
   }
-  /**
-   * 设置表单项的props
-   * @param {string} field 需要设置的表单项field
-   * @param {string} key 需要设置的key
-   * @param value 需要设置的值
-   */
-  const setProps: ISetProps = (field, key, value) => {
-    const formItem = get(field)
-    if (formItem?.componentProps) {
-      ;['options', 'treeData'].includes(key) && setValue(field, undefined)
-
-      formItem.componentProps[key] = value
-    }
-  }
   /**
    * 设置表单配置方法
    * @param {string} key
@@ -143,7 +148,9 @@ export function useVFormMethods(
    * @param {string | undefined} field
    */
   const disable: IDisable = (field) => {
-    typeof field === 'string' ? setProps(field, 'disabled', true) : setFormConfig('disabled', field !== false)
+    typeof field === 'string'
+      ? setProps(field, 'disabled', true)
+      : setFormConfig('disabled', field !== false)
   }
 
   /**
diff --git a/src/components/FormDesign/src/typings/form-type.ts b/src/components/FormDesign/src/typings/form-type.ts
index ed67584..79caf23 100644
--- a/src/components/FormDesign/src/typings/form-type.ts
+++ b/src/components/FormDesign/src/typings/form-type.ts
@@ -44,5 +44,9 @@ export interface IFormDesignMethods {
   handleAddAttrs(schemas: IVFormComponent[], index: number): void
   setFormConfig(config: IFormConfig): void
   // 添加到表单中之前触发
-  handleBeforeColAdd(event: { newIndex: string }, schemas: IVFormComponent[], isCopy?: boolean): void
+  handleBeforeColAdd(
+    event: { newIndex: string },
+    schemas: IVFormComponent[],
+    isCopy?: boolean,
+  ): void
 }
diff --git a/src/components/FormDesign/src/typings/v-form-component.ts b/src/components/FormDesign/src/typings/v-form-component.ts
index b941592..74c2a5a 100644
--- a/src/components/FormDesign/src/typings/v-form-component.ts
+++ b/src/components/FormDesign/src/typings/v-form-component.ts
@@ -177,7 +177,12 @@ export interface AForm {
    * validate one or several form items
    * @type Function
    */
-  validateField: (name: string, value: any, rules: Record<string, unknown>[], option?: validateOptions) => Promise<RuleError[]>
+  validateField: (
+    name: string,
+    value: any,
+    rules: Record<string, unknown>[],
+    option?: validateOptions,
+  ) => Promise<RuleError[]>
   /**
    * reset all the fields and remove validation result
    */
diff --git a/src/components/FormDesign/src/utils/index.ts b/src/components/FormDesign/src/utils/index.ts
index 7bb8f77..15f6953 100644
--- a/src/components/FormDesign/src/utils/index.ts
+++ b/src/components/FormDesign/src/utils/index.ts
@@ -1,6 +1,5 @@
 // import { VueConstructor } from 'vue';
 import { cloneDeep, isArray, isFunction, isNumber, uniqueId } from 'lodash-es'
-import type { Ref } from 'vue'
 import type { IFormConfig, IVFormComponent, IValidationRule } from '../typings/v-form-component'
 
 // import { del } from '@vue/composition-api';
@@ -40,7 +39,10 @@ export function generateKey(formItem?: IVFormComponent): string | boolean {
  * @param value {number | ((item: T, index: number, array: Array<T>) => boolean}
  * @returns {T} 返回删除的数组项
  */
-export function remove<T>(array: Array<T>, value: number | ((item: T, index: number, array: Array<T>) => boolean)): T | undefined {
+export function remove<T>(
+  array: Array<T>,
+  value: number | ((item: T, index: number, array: Array<T>) => boolean),
+): T | undefined {
   let removeVal: Array<T | undefined> = []
   if (!isArray(array))
     return undefined
@@ -107,10 +109,10 @@ export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComp
 /**
  * 查找表单项
  */
-export const findFormItem: (schemas: IVFormComponent[], cb: (formItem: IVFormComponent) => boolean) => IVFormComponent | undefined = (
-  schemas,
-  cb,
-) => {
+export const findFormItem: (
+  schemas: IVFormComponent[],
+  cb: (formItem: IVFormComponent) => boolean,
+) => IVFormComponent | undefined = (schemas, cb) => {
   let res
   const traverse = (schemas: IVFormComponent[]): boolean => {
     return schemas.some((formItem: IVFormComponent) => {
@@ -203,45 +205,3 @@ export function runCode<T>(code: any): T {
     return code
   }
 }
-
-/**
- * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
- */
-
-// 编码表单 Conf
-export function encodeConf(designerRef: Ref<Recordable>) {
-  return JSON.stringify(designerRef.value.getOption())
-}
-
-// 编码表单 Fields
-export function encodeFields(designerRef: Ref<Recordable>) {
-  const rule = designerRef.value.getRule()
-  const fields: string[] = []
-  rule.forEach((item) => {
-    fields.push(JSON.stringify(item))
-  })
-  return fields
-}
-
-// 解码表单 Fields
-export function decodeFields(fields: string[]) {
-  const rule: object[] = []
-  fields.forEach((item) => {
-    rule.push(JSON.parse(item))
-  })
-  return rule
-}
-
-// 设置表单的 Conf 和 Fields
-export function setConfAndFields(designerRef: Ref<Recordable>, conf: string, fields: string[]) {
-  designerRef.value.setOption(JSON.parse(conf))
-  designerRef.value.setRule(decodeFields(fields))
-}
-
-// 设置表单的 Conf 和 Fields
-export function setConfAndFields2(detailPreview: Ref<Recordable>, conf: string, fields: string[], value?: object) {
-  detailPreview.value.option = JSON.parse(conf)
-  detailPreview.value.rule = decodeFields(fields)
-  if (value)
-    detailPreview.value.value = value
-}